/* =====================================================================
   GATE TRADERS -- shared theme CSS for the registration + login +
   password-reset pages
   Save as: /public_html/app/gt_theme.css
   Load from gt_theme.php's own loginThemeHead() via:
       <link rel="stylesheet" href="gt_theme.css">
   (from registration/registration.php, one level down, this resolves
   as href="../gt_theme.css" -- see loginThemeHead()'s own $cssHref
   parameter.)
   ---------------------------------------------------------------------
   PULLED OUT of gt_theme.php's inline <style> block (this pass) so CSS
   changes no longer require touching the PHP file, and so the browser
   can cache this one file across every page that shares it instead of
   re-downloading identical CSS inline on each page.

   ALSO FIXED (this pass) -- registration.php's password + confirm
   password fields were stacked as two full-height rows, which pushed
   the card past the visible height of a 16" laptop screen (confirmed
   from your own screenshots: the card scrolled just to reach "Get
   started free"). Fixes applied:
     1. New `.form-row-split` class lays two fields side by side in one
        row (grid, 2 columns, gap) instead of stacking them -- used for
        password + confirm password on registration.php. Falls back to
        stacked (1 column) under 520px so mobile still gets full-width
        fields.
     2. Slightly tightened vertical rhythm ONLY where it was genuinely
        loose -- form-row margin 16px -> 14px, pw-checklist bottom
        margin 18px -> 10px, the negative margin trick on
        pw-strength-track tightened to match -- shaves roughly 40-50px
        off the total card height without cramming anything or making
        text harder to read. Nothing else changed.
===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.55;
    background: var(--paper);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: inherit; }

:root {
    /* Brand colors CONFIRMED against gatetraders_pk_brand_brief.md --
       "do not change these", the whole live system (app, billing
       dashboard, receipts) already uses this exact palette. */
    --navy:        #001f3f;
    --orange:      #E95420;
    --orange-dark: #c8451a;
    --white:       #ffffff;
    --paper:       #f5f7fa;
    --ink:         #1c2430;
    --muted:       #5b6270;
    --line:        #e4e7ec;
    --error-bg:    #fdecea;
    --error-text:  #7a2118;
    --success-bg:  #e3f3ea;
    --success-text:#1f6b45;
}

.dev-banner {
    background-color: #fff3cd; color: #664d03; text-align: center;
    font-size: 12.5px; font-weight: 600; padding: 8px 16px;
    border-bottom: 1px solid #ffe69c;
}

/* Two-column page shell -- side panel + form. On narrow screens the
   side panel disappears entirely and .login-wrap alone centers the
   card. */
.page {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    min-height: 0;
}

.side-panel {
    flex: 1 1 44%;
    min-width: 320px;
    position: relative;
    display: flex;
    align-items: center;
    padding: 56px 48px;
    background-color: var(--navy);
    background-image: linear-gradient(160deg, rgba(0,31,63,0.94) 0%, rgba(0,21,43,0.90) 55%, rgba(0,15,30,0.95) 100%);
    color: var(--white);
    /* UPDATED (this pass): the side panel now carries a lot more content
       than the original short tagline + paragraph -- heading, intro,
       a 4-item feature list, a billing note and a full CTA block. On a
       short/laptop viewport height that combined block can now be
       taller than the panel itself. max-height + overflow-y here (not
       on .side-panel-inner) means the SCROLLBAR, if one ever appears,
       tracks the whole navy panel edge-to-edge rather than a narrow
       inner column -- so it never clips the "Try Live Demo" button off
       screen, it just scrolls gracefully within the panel instead. */
    max-height: 100vh;
    overflow-y: auto;
}
.side-panel-inner { max-width: 420px; margin: 0 auto; width: 100%; }
.side-panel-brand { margin-bottom: 28px; }
.side-panel-brand img {
    display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain;
}
.side-panel-heading {
    font-size: 26px; font-weight: 800; line-height: 1.25;
    margin: 0 0 14px; letter-spacing: -0.01em;
}
.side-panel-copy { font-size: 15px; color: rgba(255,255,255,0.82); margin: 0 0 18px; max-width: 400px; }
.side-panel-copy:last-child { margin-bottom: 0; }

/* Feature bullet list -- checkmark style, matching the orange accent
   used everywhere else in the theme. Plain <ul>/<li>, no external icon
   font dependency (kept consistent with the rest of gt_theme.css,
   which avoids adding new font/icon dependencies). */
.side-panel-features {
    list-style: none; margin: 0 0 20px; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.side-panel-features li {
    position: relative; padding-left: 26px;
    font-size: 14px; color: rgba(255,255,255,0.9); line-height: 1.45;
}
.side-panel-features li::before {
    content: "\2713"; position: absolute; left: 0; top: 0;
    color: var(--orange); font-weight: 800; font-size: 14px;
}

/* JazzCash / Bank Transfer billing note -- deliberately plain text, no
   pricing figures or plan names here (see loginThemeSidePanel()'s own
   comment: no pricing button/link on this panel, per instruction). */
.side-panel-billing-note {
    font-size: 13px; color: rgba(255,255,255,0.65); font-style: italic;
}

/* Live-demo call-to-action block -- UPDATED (per your request) to match
   Averixo's own solid filled-orange button treatment exactly, instead
   of the outlined style this pass originally shipped with. */
.side-panel-cta {
    margin-top: 24px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.14);
}
.side-panel-cta-lead {
    font-size: 13.5px; color: rgba(255,255,255,0.78); line-height: 1.55;
    margin: 0 0 14px; max-width: 380px;
}
.side-panel-cta-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box; font-family: inherit; font-weight: 700;
    font-size: 14.5px; text-decoration: none; padding: 13px 18px; border-radius: 8px;
    background: var(--orange); color: var(--white);
    border: 2px solid var(--orange);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.side-panel-cta-btn:hover {
    background: var(--orange-dark);
    border-color: var(--orange-dark);
    color: var(--white);
}

.login-wrap {
    flex: 1 1 56%;
    min-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 20px;
}
.login-inner { width: 100%; max-width: 440px; }

/* Dark-on-white brand mark shown above the form card -- the DARK logo
   variant, since it sits on a white/paper background here, not the
   navy side panel. Hidden on narrow screens where the side panel
   (which already carries the white logo) is also hidden, so mobile
   visitors still see the brand mark once, not zero times. */
.form-logo { display: none; text-align: center; margin: 0 0 20px; }
.form-logo img { display: inline-block; height: 34px; width: auto; max-width: 200px; object-fit: contain; }

@media (max-width: 900px) {
    .side-panel { display: none; }
    .login-wrap { flex: 1 1 100%; }
    .form-logo { display: block; }
}

.form-card {
    background: var(--white);
    border: 1px solid var(--navy);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(0,31,63,0.35);
}
.panel-heading {
    background-color: var(--orange);
    color: var(--white);
    padding: 22px 28px;
}
.panel-heading h2 { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.01em; }
.panel-heading p  { margin: 0; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.panel-body { padding: 22px 28px 24px; }

.form-row { margin-bottom: 14px; }
label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--navy); }
.req { color: var(--orange); font-weight: 700; }
.field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
input.field-invalid { border-color: #c0392b; }

/* Two fields side by side in one row (e.g. password + confirm
   password on registration.php) -- keeps the form shorter than
   stacking them as two separate full rows. Collapses to a single
   column under 520px so mobile keeps full-width fields. */
.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
    margin-bottom: 14px;
}
.form-row-split .form-row { margin-bottom: 0; }
@media (max-width: 520px) {
    .form-row-split { grid-template-columns: 1fr; gap: 14px 0; }
}

input[type=email], input[type=password], input[type=text], input[type=tel] {
    width: 100%; padding: 11px 13px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 14.5px; background: #fbfcfd;
    color: var(--ink); font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder { color: #a7b1bb; }
input:focus {
    outline: none; border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(233,84,32,0.15);
}

.field-hp { position: absolute; left: -9999px; top: -9999px; }

.forgot-link {
    display: block; text-align: right; font-size: 12.5px;
    font-weight: 600; color: var(--orange); text-decoration: none;
    margin: -8px 0 16px;
}
.forgot-link:hover { text-decoration: underline; }

.back-to-signin {
    display: block; text-align: center; font-size: 13.5px;
    font-weight: 700; color: var(--orange); text-decoration: none;
    margin-top: 18px;
}
.back-to-signin:hover { text-decoration: underline; }

.btn-primary {
    width: 100%; padding: 13px 16px; background: var(--orange);
    color: var(--white); border: 1px solid var(--orange);
    border-radius: 8px; font-size: 15.5px; font-weight: 700;
    cursor: pointer; letter-spacing: 0.01em; margin-top: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    text-align: center; text-decoration: none; display: block;
}
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); }

.msg { border-radius: 8px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; }
.msg-error { background: var(--error-bg); color: var(--error-text); }
.msg-success { background: var(--success-bg); color: var(--success-text); }
.msg ul { margin: 4px 0 0; padding-left: 18px; }

.form-foot-note { text-align: center; color: var(--muted); font-size: 12px; margin: 14px 0 0; }
.form-foot-note a { color: var(--orange); text-decoration: none; font-weight: 600; }
.form-foot-note a:hover { text-decoration: underline; }

/* Password strength meter + live requirement checklist. */
.pw-strength-track {
    height: 4px; border-radius: 2px; background: var(--line);
    margin: -6px 0 8px; overflow: hidden;
}
.pw-strength-fill {
    height: 100%; width: 0%; border-radius: 2px;
    background: #c0392b; transition: width 0.2s ease, background-color 0.2s ease;
}
.pw-strength-fill.weak   { background: #c0392b; }
.pw-strength-fill.medium { background: #E95420; }
.pw-strength-fill.strong { background: #1f6b45; }
.pw-checklist { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pw-checklist li { font-size: 11.5px; color: var(--muted); position: relative; padding-left: 20px; }
.pw-checklist li::before { content: "\2013"; position: absolute; left: 0; font-weight: 700; color: var(--muted); }
.pw-checklist li.met { color: var(--success-text); }
.pw-checklist li.met::before { content: "\2713"; color: var(--success-text); }

.site-footer {
    max-width: 440px; margin: 24px auto 0; padding: 18px 4px 0;
    border-top: 1px solid rgba(0,31,63,0.08);
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted);
}
.site-footer-copy { line-height: 1.6; }
.site-footer-copy a { color: var(--muted); text-decoration: none; font-weight: 700; }
.site-footer-copy a:hover { color: var(--orange); text-decoration: underline; }
.site-footer-contact a { color: var(--orange); text-decoration: none; font-weight: 700; }
.site-footer-contact a:hover { text-decoration: underline; }

/* "Your workspace is ready" style success card. */
.success-card {
    background-color: var(--success-bg); border: 1px solid #bfe0cc;
    border-radius: 10px; padding: 20px 20px 22px;
}
.success-card-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.success-card-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background-color: var(--success-text); color: var(--white);
    font-size: 15px; font-weight: 800; flex: 0 0 auto;
}
.success-card-title { font-size: 15.5px; font-weight: 800; color: var(--success-text); }
.success-card-body { margin: 0 0 16px; font-size: 13.5px; color: var(--success-text); line-height: 1.6; }
.success-card-slug-box {
    background-color: var(--white); border: 1px solid #bfe0cc; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 16px; display: flex; align-items: center;
    justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.success-card-slug {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px; color: var(--ink); font-weight: 600;
}
.success-card-slug-tag {
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--success-text); background-color: #d3ecdd; padding: 3px 9px;
    border-radius: 20px; flex: 0 0 auto;
}
.success-card-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; box-sizing: border-box; font-family: inherit; font-weight: 700;
    font-size: 15px; text-decoration: none; padding: 14px 18px; border-radius: 8px;
    margin-bottom: 12px;
}
.success-card-btn.primary { background-color: var(--success-text); color: var(--white); border: 2px solid var(--success-text); }
.success-card-btn.secondary { background-color: var(--orange); color: var(--white); border: 2px solid var(--orange); margin-bottom: 0; }

@media (max-width: 420px) {
    .panel-body { padding: 24px 20px 26px; }
    .panel-heading { padding: 20px 20px; }
    .site-footer { justify-content: center; text-align: center; }
}

/* Shorter viewports (laptops in particular -- browser chrome/taskbar
   eats real screen height even on a 16" display) -- switch the page
   from vertically-centered to top-anchored so a slightly-too-tall card
   never gets clipped or forces a page scrollbar to reach the submit
   button; a little breathing room at the top costs nothing, a hidden
   submit button does. */
@media (max-height: 820px) {
    .login-wrap { align-items: flex-start; padding-top: 18px; padding-bottom: 18px; }
    /* align-items: flex-start here means the CTA button is the part
       that would clip first if the panel ever runs out of height --
       the overflow-y: auto set on .side-panel above (base rule, not
       repeated here) is what keeps it reachable by scrolling instead. */
    .side-panel { align-items: flex-start; padding-top: 32px; padding-bottom: 32px; }
}

/* Very short viewports (e.g. a laptop with browser chrome open, height
   under ~700px) -- trim the side panel's own vertical rhythm a bit
   further so the full content (heading + copy + feature list + billing
   note + CTA) is more likely to fit without needing to scroll at all.
   Doesn't touch font sizes, only spacing. */
@media (max-height: 700px) {
    .side-panel-brand { margin-bottom: 18px; }
    .side-panel-heading { margin-bottom: 10px; }
    .side-panel-copy { margin-bottom: 12px; }
    .side-panel-features { margin-bottom: 14px; gap: 7px; }
    .side-panel-cta { margin-top: 16px; padding-top: 16px; }
    .side-panel-cta-lead { margin-bottom: 10px; }
}