/* ====================================================================
   WEB-APP.CSS — Web/PWA mode styles for Home Buyers Guide SA
   Every rule is scoped to body.web-mode, which is only added by
   web-app.js when running in a browser. Zero effect inside the
   Android app.
   ==================================================================== */

/* --------------------------------------------------------------------
   1. APP FEEL — make the browser behave like a native app
   -------------------------------------------------------------------- */
body.web-mode {
    -webkit-tap-highlight-color: transparent;   /* no grey tap flash */
    overscroll-behavior-y: none;                /* no pull-to-refresh bounce */
}

body.web-mode button,
body.web-mode .tile,
body.web-mode .bottom-nav a,
body.web-mode .bottom-nav button,
body.web-mode .nav-item {
    touch-action: manipulation;                 /* no 300ms delay / double-tap zoom */
    -webkit-user-select: none;
    user-select: none;
}

/* Inputs must remain selectable */
body.web-mode input,
body.web-mode textarea,
body.web-mode select {
    -webkit-user-select: auto;
    user-select: auto;
}

/* Safety net: never show the upgrade strip on web */
body.web-mode .upgrade-strip {
    display: none !important;
}

/* --------------------------------------------------------------------
   2. INSTALL BANNER
   -------------------------------------------------------------------- */
body.web-mode .hbg-install-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)); /* above bottom nav */
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--nav-bg, #0d1520);
    border: 1px solid rgba(6, 214, 160, 0.45);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    animation: hbgIbSlideUp 0.35s ease;
}

@keyframes hbgIbSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

body.web-mode .hbg-ib-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.web-mode .hbg-ib-text strong {
    color: var(--text-primary, #ffffff);
    font-size: 0.9rem;
}

body.web-mode .hbg-ib-text span {
    color: var(--text-secondary, #8bbad4);
    font-size: 0.78rem;
    line-height: 1.35;
}

body.web-mode .hbg-ib-text span i {
    color: #06D6A0;
}

body.web-mode .hbg-ib-install {
    flex-shrink: 0;
    padding: 9px 16px;
    border: none;
    border-radius: 10px;
    background: #06D6A0;
    color: #0d1520;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
}

body.web-mode .hbg-ib-close {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #8bbad4);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* --------------------------------------------------------------------
   3. LAPTOP / TABLET — centred phone-frame layout
      On wide screens the app renders as a centred mobile column
      instead of stretching edge to edge.
   -------------------------------------------------------------------- */
@media (min-width: 768px) {

    body.web-mode {
        background:
            radial-gradient(1200px 600px at 50% -10%, rgba(6, 214, 160, 0.08), transparent 60%),
            #080d14;
    }

    body.web-mode .container {
        max-width: 560px !important;
        margin: 0 auto !important;
        min-height: 100vh;
        background: var(--bg-primary, #0d1520);
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
    }

    /* Fixed bottom nav follows the frame instead of the full viewport */
    body.web-mode .bottom-nav {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 100% !important;
        max-width: 560px;
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Fixed top header bar — same treatment as bottom nav. Without this
       it stays pinned to the real browser edges (left:0/right:0) while
       .container is centred, so the logo ends up floating off to the
       left, disconnected from the frame below it. */
    body.web-mode .app-top-bar {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        width: 100% !important;
        max-width: 560px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Onboarding "Get Started" welcome card. Its real class is
       .hbgw-card (onboarding.js renders <div class="hbgw-card">) —
       .welcome-content is old, unused CSS left over from an earlier
       version and was never what's on screen, which is why capping
       it had no visible effect. */
    body.web-mode .hbgw-card {
        max-width: 480px !important;
    }

    /* Assessment guidance card — same theme.css `max-width:100%
       !important` full-bleed pattern as the onboarding card, but
       this one's class name IS still current/live. */
    body.web-mode .assessment-guide-content {
        max-width: 480px !important;
        width: 100% !important;
        border-radius: 20px !important;
    }

    /* Floating assessment timer badge — anchored with `right: 20px` to
       the real viewport edge by default, so on desktop it drifts into
       the empty space beside the frame instead of sitting inside it.
       Recalculates its offset from the frame's right edge instead
       (frame half-width 280px + the original 20px inset). */
    body.web-mode .time-tracker {
        right: calc(50vw - 260px) !important;
    }

    /* Install banner follows the frame too */
    body.web-mode .hbg-install-banner {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        max-width: 536px;
    }

    body.web-mode .hbg-install-banner {
        animation: hbgIbSlideUpCentered 0.35s ease;
    }

    @keyframes hbgIbSlideUpCentered {
        from { transform: translate(-50%, 20px); opacity: 0; }
        to   { transform: translate(-50%, 0);    opacity: 1; }
    }
}

/* --------------------------------------------------------------------
   4. PROPERTY OVERVIEW — button row fixes
      On desktop the assessment-date-section is a single flex row which
      squeezes the calendar buttons off-screen. Stack date info above
      buttons, and put the two calendar buttons side-by-side.
   -------------------------------------------------------------------- */
body.web-mode .assessment-date-section {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
}

body.web-mode .assessment-date-info {
    width: 100% !important;
}

body.web-mode .assessment-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 0 !important;
}

body.web-mode .cal-btns {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    flex: 1 !important;
    flex-wrap: wrap !important;
}

body.web-mode .add-calendar-btn {
    flex: 1 !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* --------------------------------------------------------------------
   5. CALENDAR POPUP — styles for the Add to Calendar modal
      app.js builds this with .calendar-modal / .calendar-option-btn
      but no CSS was ever defined for them. These rules style it to
      match the rest of the app's dark UI.
   -------------------------------------------------------------------- */
body.web-mode .calendar-modal {
    padding: 4px 0 8px !important;
}

body.web-mode .calendar-options h4 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #8bbad4) !important;
    margin: 0 0 14px !important;
}

body.web-mode .calendar-option-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 13px 16px !important;
    margin-bottom: 8px !important;
    border: 1px solid rgba(6, 214, 160, 0.25) !important;
    border-radius: 12px !important;
    background: rgba(6, 214, 160, 0.07) !important;
    color: var(--text-primary, #ffffff) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: 'Poppins', sans-serif !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    text-align: left !important;
}

body.web-mode .calendar-option-btn:hover,
body.web-mode .calendar-option-btn:active {
    background: rgba(6, 214, 160, 0.15) !important;
}

body.web-mode .calendar-option-btn i {
    font-size: 1rem !important;
    color: #06D6A0 !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------
   6. FULLSCREEN PROMPT
   -------------------------------------------------------------------- */
body.web-mode .hbg-fs-prompt {
    position: fixed;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    z-index: 9100;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--nav-bg, #0d1520);
    border: 1px solid rgba(6, 214, 160, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    animation: hbgFsSlideDown 0.3s ease;
}

@keyframes hbgFsSlideDown {
    from { transform: translateY(-16px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

body.web-mode .hbg-fp-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(6, 214, 160, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #06D6A0;
    font-size: 1rem;
}

body.web-mode .hbg-fp-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.web-mode .hbg-fp-text strong {
    color: var(--text-primary, #ffffff);
    font-size: 0.88rem;
}

body.web-mode .hbg-fp-text span {
    color: var(--text-secondary, #8bbad4);
    font-size: 0.73rem;
    line-height: 1.35;
}

body.web-mode .hbg-fp-yes {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: 10px;
    background: #06D6A0;
    color: #0d1520;
    font-weight: 700;
    font-size: 0.8rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

body.web-mode .hbg-fp-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #8bbad4);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 768px) {
    body.web-mode .hbg-fs-prompt {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 24px);
        max-width: 536px;
    }
    body.web-mode .hbg-fs-prompt {
        animation: hbgFsSlideDownCentered 0.3s ease;
    }
    @keyframes hbgFsSlideDownCentered {
        from { transform: translate(-50%, -16px); opacity: 0; }
        to   { transform: translate(-50%, 0);     opacity: 1; }
    }
}

/* --------------------------------------------------------------------
   7. FULLSCREEN RESTORE BUTTON
      Small floating button that appears when the user exits fullscreen.
      Positioned just below the app top bar, inside the frame.
   -------------------------------------------------------------------- */
body.web-mode .hbg-fs-restore-btn {
    position: fixed;
    top: 62px;   /* just below the app top bar */
    right: 12px;
    z-index: 8500;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(6, 214, 160, 0.35);
    border-radius: 50%;
    background: rgba(13, 21, 32, 0.88);
    color: #06D6A0;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    transition: background 0.2s ease;
}

body.web-mode .hbg-fs-restore-btn:hover,
body.web-mode .hbg-fs-restore-btn:active {
    background: rgba(6, 214, 160, 0.18);
}

@media (min-width: 768px) {
    /* On desktop, pin it inside the right edge of the centred frame */
    body.web-mode .hbg-fs-restore-btn {
        right: calc(50vw - 280px + 12px);
    }
}

/* --------------------------------------------------------------------
   8. CUSTOM PHOTO PICKER — bottom sheet (Camera vs Gallery)
   -------------------------------------------------------------------- */
body.web-mode .hbg-photo-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: hbgOverlayFade 0.2s ease;
}

@keyframes hbgOverlayFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.web-mode .hbg-photo-picker-sheet {
    width: 100%;
    max-width: 560px;
    background: #131e2e;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(6, 214, 160, 0.2);
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: hbgSheetSlideUp 0.28s ease;
}

@keyframes hbgSheetSlideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

body.web-mode .hbg-pp-title {
    text-align: center;
    color: var(--text-secondary, #8bbad4);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 12px;
}

body.web-mode .hbg-pp-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 18px;
    margin-bottom: 10px;
    background: rgba(6, 214, 160, 0.07);
    border: 1px solid rgba(6, 214, 160, 0.18);
    border-radius: 15px;
    color: var(--text-primary, #ffffff);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

body.web-mode .hbg-pp-btn:active {
    background: rgba(6, 214, 160, 0.18);
}

body.web-mode .hbg-pp-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(6, 214, 160, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06D6A0;
    font-size: 1rem;
    flex-shrink: 0;
}

body.web-mode .hbg-pp-cancel {
    justify-content: center;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #8bbad4);
    font-weight: 500;
    margin-bottom: 0;
}

body.web-mode .hbg-pp-cancel:active {
    background: rgba(255, 255, 255, 0.05);
}

/* ====================================================================
   9. PREMIUM GATE SCREEN — matches Android modal styling
   ==================================================================== */
body.web-mode .pgs-screen {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 9000;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}
body.web-mode .pgs-screen.active { display: flex; }

body.web-mode .pgs-sheet {
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    overflow-y: auto;
    background: #131e2e;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom,0px));
    position: relative;
    animation: pgsUp 0.3s ease;
}
@keyframes pgsUp {
    from { transform: translateY(50px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
body.web-mode .pgs-x-btn {
    position: absolute; top: 14px; right: 16px;
    width: 30px; height: 30px; border: none; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: #fff; font-size: 0.85rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
body.web-mode .pgs-top { text-align: center; margin-bottom: 14px; padding-top: 4px; }
body.web-mode .pgs-crown-circle {
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(6,214,160,0.12); border: 2px solid rgba(6,214,160,0.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 10px; font-size: 1.3rem; color: #06D6A0;
}
body.web-mode .pgs-title { color: #fff; font-size: 1.1rem; font-weight: 800; margin: 0 0 3px; }
body.web-mode .pgs-subtitle { color: #8bbad4; font-size: 0.8rem; margin: 0; line-height: 1.4; }
body.web-mode .pgs-benefits {
    list-style: none; padding: 0; margin: 0 0 14px;
    display: flex; flex-direction: column; gap: 8px;
}
body.web-mode .pgs-benefits li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.84rem; color: #fff; line-height: 1.4;
}
body.web-mode .pgs-benefits li i { color: #06D6A0; flex-shrink: 0; margin-top: 2px; }
body.web-mode .pgs-plans { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
body.web-mode .pgs-plan-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
    cursor: pointer; position: relative; transition: border-color 0.15s;
}
body.web-mode .pgs-plan-row:active { border-color: #06D6A0; background: rgba(6,214,160,0.06); }
body.web-mode .pgs-trial-ribbon {
    position: absolute; top: -9px; left: 12px;
    background: linear-gradient(135deg,#06D6A0,#1DB88A);
    color: #0d1520; font-size: 0.58rem; font-weight: 900;
    padding: 2px 8px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em;
}
body.web-mode .pgs-plan-info { flex: 1; }
body.web-mode .pgs-plan-label { color: #fff; font-size: 0.86rem; font-weight: 700; display: flex; align-items: center; gap: 6px; }
body.web-mode .pgs-plan-period { color: #8bbad4; font-size: 0.7rem; margin-top: 1px; }
body.web-mode .pgs-plan-pricing { text-align: right; min-width: 60px; }
body.web-mode .pgs-plan-price { color: #fff; font-size: 1rem; font-weight: 800; }
body.web-mode .pgs-price-free { color: #06D6A0; }
body.web-mode .pgs-plan-sub { color: #8bbad4; font-size: 0.68rem; }
body.web-mode .pgs-plan-save { color: #06D6A0; font-size: 0.68rem; font-weight: 700; }
body.web-mode .pgs-save-gold { color: #F9C74F; }
body.web-mode .pgs-sub-btn {
    flex-shrink: 0; padding: 7px 13px; border: none; border-radius: 8px;
    background: rgba(255,255,255,0.1); color: #fff;
    font-size: 0.78rem; font-weight: 700; font-family: 'Poppins',sans-serif;
    cursor: pointer; white-space: nowrap; pointer-events: none;
}
body.web-mode .pgs-btn-trial { background: #06D6A0; color: #0d1520; }
body.web-mode .pgs-plan-featured {
    border-color: rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    margin-top: 10px;
}
body.web-mode .pgs-featured-badge {
    position: absolute; top: -10px; left: 12px;
    background: #06D6A0; color: #0d1520;
    font-size: 0.58rem; font-weight: 900; padding: 3px 8px;
    border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em;
}
body.web-mode .pgs-label-featured { color: #fff; }
body.web-mode .pgs-price-featured { color: #fff; }
body.web-mode .pgs-btn-featured { background: rgba(255,255,255,0.1); color: #fff; }
body.web-mode .pgs-best-tag {
    background: linear-gradient(135deg,#F9C74F,#F3722C);
    color: #0d1520; font-size: 0.55rem; font-weight: 900;
    padding: 2px 6px; border-radius: 6px; text-transform: uppercase;
}
body.web-mode .pgs-signin-section {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 14px; margin-top: 4px;
    display: flex; flex-direction: column; gap: 10px;
}
body.web-mode .pgs-signin-title { color: #8bbad4; font-size: 0.82rem; text-align: center; margin: 0; }
body.web-mode .pgs-signed-bar {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.75rem; color: #8bbad4;
    padding: 8px 12px; background: rgba(255,255,255,0.04); border-radius: 8px;
}
body.web-mode .pgs-billing-info {
    font-size: 0.74rem; color: #8bbad4; text-align: center;
    padding: 8px; background: rgba(255,255,255,0.04); border-radius: 8px; margin: 4px 0 0;
}
body.web-mode .pgs-legal {
    color: #8bbad4; font-size: 0.7rem; text-align: center; margin: 14px 0 8px; line-height: 1.4;
}
body.web-mode .pgs-free-btn {
    width: 100%; background: transparent;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    color: #8bbad4; font-size: 0.84rem; font-family: 'Poppins',sans-serif;
    padding: 11px; cursor: pointer;
}
body.web-mode .pgs-paypal-loading {
    text-align: center; color: #8bbad4; font-size: 0.88rem;
    padding: 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
body.web-mode .pgs-payment-error {
    color: #FF6B6B; font-size: 0.82rem; text-align: center; padding: 10px;
    background: rgba(255,107,107,0.08); border-radius: 10px; margin: 6px 0;
}
@media (min-width: 768px) {
    body.web-mode .pgs-screen { align-items: center; }
    body.web-mode .pgs-sheet { border-radius: 22px; max-height: 88vh; }
}

/* ====================================================================
   10. PREMIUM GATE — sign-in elements + plan selection state
   ==================================================================== */

/* Plan row selected state */
body.web-mode .pgs-plan-row.pgs-selected {
    border-color: #06D6A0 !important;
    background: rgba(6,214,160,0.1) !important;
    box-shadow: 0 0 0 2px rgba(6,214,160,0.25);
}

/* Google Sign-In button */
body.web-mode .pgs-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: #fff;
    border: none;
    border-radius: 12px;
    color: #1f1f1f;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.web-mode .pgs-google-btn:active { box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
body.web-mode .pgs-google-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Divider between Google and email */
body.web-mode .pgs-divider {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.web-mode .pgs-divider::before,
body.web-mode .pgs-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.1);
}
body.web-mode .pgs-divider span {
    color: #8bbad4;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Email input */
body.web-mode .pgs-email-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body.web-mode .pgs-email-input::placeholder { color: rgba(255,255,255,0.3); }
body.web-mode .pgs-email-input:focus {
    outline: none;
    border-color: #06D6A0;
    background: rgba(6,214,160,0.05);
}

/* Send Sign-in Link button */
body.web-mode .pgs-btn-primary {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg,#06D6A0,#1DB88A);
    color: #0d1520;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Secondary button (Use different email) */
body.web-mode .pgs-btn-secondary {
    width: 100%;
    padding: 11px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: #8bbad4;
    font-size: 0.82rem;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Sign out link */
body.web-mode .pgs-sign-out-link {
    background: none;
    border: none;
    color: #8bbad4;
    font-size: 0.72rem;
    cursor: pointer;
    text-decoration: underline;
    font-family: 'Poppins', sans-serif;
    padding: 0;
}

/* PayPal loading */
body.web-mode .pgs-paypal-loading {
    text-align: center;
    color: #8bbad4;
    font-size: 0.85rem;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Payment error */
body.web-mode .pgs-payment-error {
    color: #FF6B6B;
    font-size: 0.8rem;
    text-align: center;
    padding: 10px 12px;
    background: rgba(255,107,107,0.08);
    border-radius: 10px;
    margin: 4px 0;
    line-height: 1.4;
}

/* ====================================================================
   11. PAYFAST CHECKOUT BUTTON
   ==================================================================== */
body.web-mode .pgs-payfast-pay-btn {
    width: 100%;
    padding: 15px;
    background: #06D6A0;
    color: #0d1520;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}
body.web-mode .pgs-payfast-pay-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
body.web-mode .pgs-payfast-methods {
    text-align: center;
    color: #8bbad4;
    font-size: 0.72rem;
    margin: 8px 0 0;
}
body.web-mode .pgs-payfast-methods i {
    color: #06D6A0;
    margin-right: 3px;
}