/* ==========================================================================
   Pricetracker — Login / create-account modal (.pt-login-modal)
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for the login/register popup design.

   The modal is rendered from three contexts — all LOGGED-OUT only, because
   templates/partials/login-modal.php returns early for logged-in users:
     • templates/partials/site-header.php   (site header — most pages)
     • templates/single-product.php          (product detail pages)
     • src/Account/PortalService.php          (public wishlist pages)

   This stylesheet is enqueued ONCE for every logged-out frontend request via
   Assets::enqueueLoginModalAssets() (hooked to wp_enqueue_scripts). Because
   that hook fires on every theme-rendered page — including the public
   wishlist page, whose handler calls get_header() → wp_head → wp_enqueue_scripts —
   any current OR future context that renders the modal is styled automatically,
   with no per-page conditionals to keep in sync.

   Self-contained on purpose:
     • Hard-coded hex values (no CSS custom properties). The modal renders
       OUTSIDE .pt-site-header, where the header's --ptsh-* variables are out
       of scope and would silently fall back (this previously made the email
       button invisible on some pages).
     • !important throughout so the rules win over the Astra theme's
       button/input/anchor defaults regardless of stylesheet load order.

   Before this file existed the design was duplicated across site-header.css
   and single-product-overrides.css (base + a higher-specificity override
   block), which drifted and fought over the cascade. Keep it consolidated
   here — do NOT re-add .pt-login-modal rules to those files.
   ========================================================================== */

.pt-login-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10001 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.pt-login-modal[hidden] { display: none !important; }
.pt-login-modal:not([hidden]) { display: flex !important; }

.pt-login-modal__backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 12, 28, 0.55) !important;
    cursor: pointer !important;
}

.pt-login-modal__panel {
    position: relative !important;
    width: min(420px, calc(100vw - 2rem)) !important;
    max-width: 420px !important;
    margin: 1rem !important;
    padding: 2rem 1.75rem 1.5rem !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(15, 8, 30, 0.28) !important;
}

.pt-login-modal__close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s !important;
}

.pt-login-modal__close:hover {
    background: #f1f5f9 !important;
    color: #1b3152 !important;
}

.pt-login-modal__close:active {
    background: #e5e7eb !important;
}

.pt-login-modal__close svg {
    width: 20px !important;
    height: 20px !important;
}

.pt-login-modal__header {
    margin-bottom: 1.375rem !important;
}

/* Title selector is (0,2,0) so the title `<p class="...__title">` beats the
   subtitle rule `.pt-login-modal__header p` (0,1,1) — both target a <p>. */
.pt-login-modal__header .pt-login-modal__title,
.pt-login-modal__header h2 {
    margin: 0 0 6px !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    color: #1b3152 !important;
}

.pt-login-modal__header p {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    color: #5b6477 !important;
}

.pt-login-modal__social {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    margin-bottom: 0.75rem !important;
}

.pt-login-modal__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 13px 14px !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1b3152 !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}

.pt-login-modal__btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #1b3152 !important;
}

.pt-login-modal__btn--google {
    border-color: #d8dde6 !important;
    background: #fff !important;
    color: #1b3152 !important;
}

.pt-login-modal__btn--google:hover {
    background: #f8fafc !important;
}

.pt-login-modal__btn--apple {
    background: #0f172a !important;
    border-color: #0f172a !important;
    color: #fff !important;
}

.pt-login-modal__btn--apple:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #fff !important;
}

/* Primary e-post-knappen. Hex-värdet hårdkodat (ej CSS-variabel) —
   variabelscope nådde inte modalen och gjorde knappen osynlig på vissa sidor. */
.pt-login-modal__btn--email {
    background: #1d2940 !important;
    border-color: #1d2940 !important;
    color: #ffffff !important;
}

.pt-login-modal__btn--email:hover,
.pt-login-modal__btn--email:focus {
    background: #122640 !important;
    border-color: #122640 !important;
    color: #ffffff !important;
}

.pt-login-modal__btn--email:active {
    background: #0a1628 !important;
    border-color: #0a1628 !important;
    color: #ffffff !important;
}

.pt-login-modal__btn--facebook {
    background: #1877F2 !important;
    border-color: #1877F2 !important;
    color: #ffffff !important;
}

.pt-login-modal__btn--facebook:hover,
.pt-login-modal__btn--facebook:focus {
    background: #166fe5 !important;
    border-color: #166fe5 !important;
    color: #ffffff !important;
}

.pt-login-modal__btn--facebook:active {
    background: #1464d3 !important;
    border-color: #1464d3 !important;
    color: #ffffff !important;
}

.pt-login-modal__divider {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin: 1.125rem 0 !important;
    color: #9aa3b2 !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.pt-login-modal__divider::before,
.pt-login-modal__divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: #e8ebf0 !important;
}

.pt-login-modal__field {
    margin-bottom: 0.625rem !important;
}

.pt-login-modal__input {
    width: 100% !important;
    padding: 13px 14px !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #1b3152 !important;
    font-size: 0.94rem !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.pt-login-modal__input:focus {
    border-color: #94a3b8 !important;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18) !important;
}

.pt-login-modal__helper {
    margin: 1rem 0 0 !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: #7a8294 !important;
}

.pt-login-modal__terms {
    margin: 0.875rem 0 0 !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
    color: #9aa3b2 !important;
    /* One line on the fixed 420px desktop panel. Tuned for the Swedish copy
       with the shortened "villkor" link (~68 chars fits ~0.72rem here).
       On narrow phones the panel shrinks below this, so the mobile query
       below restores wrapping to avoid overflow. */
    white-space: nowrap !important;
}

.pt-login-modal__terms a {
    color: #5b6477 !important;
    text-decoration: underline !important;
}

.pt-login-modal__success {
    text-align: center !important;
    padding: 2rem 0 !important;
}

.pt-login-modal__success[hidden] { display: none !important; }

.pt-login-modal__success-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 1rem !important;
    border-radius: 999px !important;
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.pt-login-modal__success-title,
.pt-login-modal__success h3 {
    margin: 0 0 0.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1b3152 !important;
}

.pt-login-modal__success p {
    margin: 0 !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    color: #5b6477 !important;
}

@media (max-width: 767px) {
    .pt-login-modal__panel {
        margin: 0.75rem !important;
        padding: 1.75rem 1.25rem 1.5rem !important;
        max-width: calc(100% - 1.5rem) !important;
    }

    /* The panel is narrower than the desktop 420px here — let the terms line
       wrap instead of overflowing. */
    .pt-login-modal__terms {
        white-space: normal !important;
    }
}