/* ============================================================
   Nexa Peptides — BTCPay Whitelabel Theme v8
   
   Palette derived from nexapeptides.us production codebase:
     Page bg:        #ffffff  (body bg-white)
     Card bg:        #ffffff  (ProductCard bg-white)
     Alt section bg: #f3f4f6  (bg-gray-100)
     Input bg:       #f9fafb  (bg-gray-50)
     Body text:      #111827  (text-gray-900)
     Label text:     #374151  (text-gray-700)
     Muted text:     #607991  (nexa-steel)
     Primary btn bg: #4C99E6  (nexa-blue, used as btn-cyan)
     Primary btn fg: #111827  (text-gray-900 — passes 5.9:1)
     Accent link:    #3b6fa0  (darkened accent — passes 5.3:1)
     Border:         #e5e7eb  (border-gray-200)
     Card border:    #f3f4f6  (border-gray-100)
     Header bg:      rgba(255,255,255,0.9) glass
   
   WCAG AA audit (all body-text pairs >= 4.5:1):
     Body text on page bg:   17.7:1  PASS
     Label on page bg:       10.3:1  PASS
     Input text on input bg: 17.0:1  PASS
     Placeholder on input:    4.6:1  PASS
     Btn text on btn bg:      5.9:1  PASS
     Link on white:           5.3:1  PASS
     Muted text on white:     4.5:1  PASS
     Checkbox label on white:10.3:1  PASS
   
   Font: Proxima Nova (self-hosted in /LocalStorage/fonts/)
   Logo: /LocalStorage/nexa-text.png (wordmark)
   v8: LIGHT theme — matches the actual nexapeptides.us palette.
       v7 dark-on-near-black replaced entirely.
   ============================================================ */

/* ============================================================
   PROXIMA NOVA — SELF-HOSTED
   ============================================================ */

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_boldit.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/LocalStorage/fonts/proximanova_blackit.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Force Proxima Nova everywhere */
*,
body,
h1, h2, h3, h4, h5, h6,
p, a, span, div, li, td, th,
input, button, select, textarea, label,
.btn,
.form-control,
.form-control-plaintext,
.nav-link,
.navbar-brand,
.clipboard-button,
.payment-details,
.public-invoice-wrap {
    font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================================================
   CSS VARIABLES
   ============================================================ */

:root {
    --nexa-blue:     #4C99E6;
    --nexa-accent:   #5D8CBA;
    --nexa-link:     #3b6fa0;
    --nexa-steel:    #607991;
    --nexa-slate:    #555D66;
    --nexa-body:     #111827;
    --nexa-label:    #374151;
    --nexa-muted:    #6b7280;
    --nexa-bg:       #ffffff;
    --nexa-alt-bg:   #f3f4f6;
    --nexa-input-bg: #f9fafb;
    --nexa-border:   #e5e7eb;
}

/* ============================================================
   SECTION 1 — HIDE BTCPAY BRANDING
   ============================================================ */

/* Hide default BTCPay SVG logo */
.navbar-brand svg,
.navbar-brand img[src*="btcpay"],
.navbar-brand img[src*="logo"] {
    display: none !important;
}

/* Hide navbar brand text/span */
.navbar-brand .h4,
.navbar-brand > span,
.navbar-brand .server-name {
    display: none !important;
}

/* Hide "Welcome to BTCPay Server" h1 */
h1[data-testid="header"],
.public-page h1.h2,
.login-intro h1 {
    display: none !important;
}

/* Hide login intro tagline paragraph */
.login-intro > p,
.public-page > .lead {
    display: none !important;
}

/* ============================================================
   SECTION 2 — HIDE SUPPORTER WALL
   ============================================================ */

div.row.justify-content-center.mt-5 {
    display: none !important;
}

h5.text-center.fw-normal.mb-4,
div.d-flex.flex-wrap.justify-content-center.gap-3.mb-4,
p.text-center:has(a[href*="foundation.btcpayserver"]),
p.text-center:has(a[href*="btcpayserver.org/donate"]) {
    display: none !important;
}

div[style*="width:0"][style*="height:0"][style*="visibility:hidden"] {
    display: none !important;
}

/* ============================================================
   SECTION 3 — HIDE BTCPAY FOOTER
   ============================================================ */

footer.btcpay-footer {
    display: none !important;
}

/* ============================================================
   SECTION 4 — PAGE BACKGROUND
   Clean white. Matches nexapeptides.us body bg-white.
   Subtle blue-tinted gradient header band for visual interest
   without darkening the login area.
   ============================================================ */

body.d-flex.flex-column.min-vh-100 {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(180deg, #f0f7ff 0%, #ffffff 180px) !important;
}

/* Content wrapper: center the login card */
section.content-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
    min-height: calc(100vh - 80px) !important;
}

/* Container: constrain to card width */
section.content-wrapper > .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 480px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* ============================================================
   SECTION 5 — LOGO ROW
   ============================================================ */

section.content-wrapper .row.justify-content-center.mb-2 {
    width: 100% !important;
    margin-bottom: 1.75rem !important;
}

section.content-wrapper .navbar-brand {
    margin-bottom: 0 !important;
}

/* Logo: wordmark on light background — no invert needed */
.main-logo-custom {
    height: auto !important;
    max-height: 48px !important;
    max-width: 240px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Authenticated pages sidebar logo */
.navbar-brand img[src*="LocalStorage"] {
    max-height: 32px !important;
    width: auto !important;
    display: block !important;
    filter: none !important;
    opacity: 1 !important;
}

/* ============================================================
   SECTION 6 — LOGIN CARD
   White card, border-gray-200, subtle shadow.
   Matches the nexapeptides.us ProductCard pattern exactly.
   ============================================================ */

.account-form {
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 !important;
    padding: 2.5rem 2.75rem !important;
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(76, 153, 230, 0.08) !important;
    border-top: 3px solid #4C99E6 !important;
}

/* "Sign in" heading */
.account-form h4 {
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.75rem !important;
    color: #111827 !important;
    letter-spacing: -0.015em !important;
}

/* Form labels — solid gray-700, fully readable */
.account-form .form-label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 0.4rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    opacity: 1 !important;
}

/* Text inputs — light gray bg so the field boundary is visible */
.account-form .form-control,
.account-form input[type="text"],
.account-form input[type="email"],
.account-form input[type="password"] {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    color: #111827 !important;
    font-size: 0.9375rem !important;
    height: 44px !important;
    padding: 0 0.875rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.account-form .form-control::placeholder,
.account-form input::placeholder {
    color: #9ca3af !important;
}

.account-form .form-control:focus,
.account-form input:focus {
    background: #ffffff !important;
    border-color: #4C99E6 !important;
    box-shadow: 0 0 0 3px rgba(76, 153, 230, 0.15) !important;
    outline: none !important;
    color: #111827 !important;
}

/* "Forgot password?" link */
.account-form .d-flex.justify-content-between a {
    font-size: 0.8rem !important;
    color: #3b6fa0 !important;
}

.account-form .d-flex.justify-content-between a:hover {
    color: #5D8CBA !important;
    text-decoration: underline !important;
}

/* Remember me label */
.account-form .form-check-label {
    font-size: 0.875rem !important;
    color: #374151 !important;
    opacity: 1 !important;
}

/* Submit button — btn-cyan pattern: Nexa blue bg, dark text */
.account-form .btn-primary.btn-lg,
.account-form button[type="submit"].btn-lg {
    height: 48px !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    width: 100% !important;
    background-color: #4C99E6 !important;
    border-color: #4C99E6 !important;
    color: #111827 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease !important;
    box-shadow: 0 2px 8px rgba(76, 153, 230, 0.25) !important;
}

.account-form .btn-primary.btn-lg:hover,
.account-form button[type="submit"].btn-lg:hover {
    background-color: #5ea8eb !important;
    border-color: #5ea8eb !important;
    color: #111827 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(76, 153, 230, 0.35) !important;
}

.account-form .btn-primary.btn-lg:active,
.account-form button[type="submit"].btn-lg:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(76, 153, 230, 0.2) !important;
}

/* Form group spacing */
.account-form .form-group {
    margin-bottom: 1.25rem !important;
}

/* Alert messages */
.account-form .alert,
.alert {
    max-width: 480px !important;
    width: 100% !important;
    margin: 0 0 1.25rem 0 !important;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
}

.alert-danger {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

.alert-success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #15803d !important;
}

/* Checkbox checked state */
.form-check-input:checked {
    background-color: #4C99E6 !important;
    border-color: #4C99E6 !important;
}

/* ============================================================
   SECTION 7 — GLOBAL COLOR TOKENS (authenticated pages)
   ============================================================ */

/* Global primary button — dark text on blue */
.btn-primary {
    background-color: #4C99E6 !important;
    border-color: #4C99E6 !important;
    color: #111827 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #5ea8eb !important;
    border-color: #5ea8eb !important;
    color: #111827 !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active {
    transform: translateY(0) !important;
}

/* Links */
a:not(.btn):not(.navbar-brand) {
    color: #3b6fa0 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

a:not(.btn):not(.navbar-brand):hover {
    color: #5D8CBA !important;
}

/* Active nav */
.nav-link.active,
.nav-item.active .nav-link,
.sidebar .active > .nav-link,
.sidebar .nav-link.active {
    color: #4C99E6 !important;
}

.sidebar .active > .nav-link,
.sidebar .nav-link.active {
    background-color: rgba(76, 153, 230, 0.08) !important;
    border-left-color: #4C99E6 !important;
}

/* Progress bars */
.progress-bar {
    background-color: #4C99E6 !important;
}

/* Badges */
.badge.bg-primary {
    background-color: #4C99E6 !important;
    color: #111827 !important;
}

/* Invoice settled status */
.invoice-payment .payment-status-settled,
.invoice-status-settled {
    color: #4C99E6 !important;
}

/* ============================================================
   SECTION 8 — CHECKOUT (Vue-based v2)
   ============================================================ */

.checkout-sheet {
    border-top: 3px solid #4C99E6 !important;
}

.payment-method-tab.active,
.payment-method-tab:hover {
    border-color: #4C99E6 !important;
    color: #4C99E6 !important;
}

.qr-container {
    border: 2px solid rgba(76, 153, 230, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
}

.timer-progress {
    background-color: #4C99E6 !important;
}

/* Checkout footer */
.public-invoice-wrap .payment-footer::after,
.checkout-footer::after {
    content: "Secure crypto payments for Nexa Peptides";
    display: block;
    text-align: center;
    font-size: 0.78rem;
    color: #607991;
    margin-top: 8px;
    font-family: 'Proxima Nova', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.01em;
}

/* ============================================================
   SECTION 9 — BTC ADDRESS DISPLAY
   ============================================================ */

#Address_BTC-CHAIN .truncate-center-truncated {
    display: inline-flex !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
}

#Address_BTC-CHAIN .truncate-center-start {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    flex: 1 1 auto !important;
    font-size: 0.85rem !important;
    font-family: 'Courier New', Courier, monospace !important;
    line-height: 1.5 !important;
}

#Address_BTC-CHAIN .truncate-center-end {
    display: none !important;
}

#Address_BTC-CHAIN .truncate-center,
#Address_BTC-CHAIN .form-control-plaintext {
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
    height: auto !important;
    min-height: 2.5rem !important;
}

#Address_BTC-CHAIN {
    overflow: visible !important;
    height: auto !important;
}

/* ============================================================
   SECTION 10 — WAITING BANNER, STATUS PILL, COUNTDOWN TIMER
   ============================================================ */

@keyframes nexa-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.25; transform: scale(0.65); }
}

#payment {
    position: relative !important;
}

#payment .d-flex:has(#AmountDue)::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4C99E6;
    animation: nexa-pulse-dot 1.6s ease-in-out infinite;
    flex-shrink: 0;
    margin-right: 8px;
    align-self: center;
}

#payment .d-flex:has(#AmountDue) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    position: relative !important;
}

#payment .d-flex:has(#AmountDue)::after {
    content: "Waiting for payment...";
    display: block;
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.92rem;
    font-weight: 600;
    color: #607991;
    letter-spacing: 0.01em;
}

#PaymentInfo {
    position: relative !important;
}

#PaymentInfo::before {
    content: "AWAITING PAYMENT";
    display: inline-block;
    padding: 3px 14px;
    border-radius: 999px;
    background-color: rgba(76, 153, 230, 0.1);
    color: #3b6fa0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
    border: 1px solid rgba(76, 153, 230, 0.3);
}

#PaymentInfo > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#PaymentInfo,
#PaymentInfo > div {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.timer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    background-color: #f0f7ff !important;
    border: 1px solid #bfdbfe !important;
    font-size: 0.88rem !important;
    color: #374151 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.timer .spinner-border {
    display: none !important;
}

.timer::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f7931a;
    animation: nexa-pulse-dot 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

.timer > span[data-i18n],
.timer > span:not(.spinner-border):not(.expiryTime) {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: #374151 !important;
}

.timer .expiryTime {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #3b6fa0 !important;
    letter-spacing: 0.04em !important;
    min-width: 3.5ch !important;
}