/* ============================================================
   LightningPiggy — BTCPay Server Complete Theme
   
   This file themes ALL BTCPay pages consistently:
   PoS shop, checkout, forms, receipts, invoices.
   
   SETUP:
   1. Upload via Store Settings > Branding > Choose file
   2. In PoS app > HTML Meta Tags, paste:
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   ============================================================ */


/* ==========================================================
   SECTION 1: GLOBAL THEME VARIABLES
   These control colors across ALL BTCPay pages
   ========================================================== */
:root {
    /* Brand pink */
    --btcpay-primary-100: #fce7f1;
    --btcpay-primary-200: #f9c2dc;
    --btcpay-primary-300: #f49dc7;
    --btcpay-primary-400: #ed5fa5;
    --btcpay-primary-500: #e22c8c;
    --btcpay-primary-600: #cc2780;
    --btcpay-primary-700: #b82274;
    --btcpay-primary-800: #8c1a59;
    --btcpay-primary-900: #5e1139;
    --btcpay-primary-rgb: 226, 44, 140;
    --btcpay-primary-accent-rgb: 204, 39, 128;
    --btcpay-primary: rgb(var(--btcpay-primary-rgb));
    --btcpay-primary-accent: rgb(var(--btcpay-primary-accent-rgb));
    --btcpay-primary-shadow: rgba(var(--btcpay-primary-rgb), .25);

    /* Force light theme backgrounds */
    --btcpay-body-bg: #ffffff;
    --btcpay-body-text: #111827;
    --btcpay-body-text-muted: #4B5563;
    --btcpay-bg-tile: #ffffff;
    --btcpay-bg-dark: #F9FAFB;
    --btcpay-body-link: #e22c8c;
    --btcpay-body-link-accent: #cc2780;
    --btcpay-border-color: #E5E7EB;

    /* Neutral palette */
    --btcpay-neutral-100: #F9FAFB;
    --btcpay-neutral-200: #F3F4F6;
    --btcpay-neutral-300: #E5E7EB;
    --btcpay-neutral-400: #D1D5DB;
    --btcpay-neutral-500: #9CA3AF;
    --btcpay-neutral-600: #6B7280;
    --btcpay-neutral-700: #4B5563;
    --btcpay-neutral-800: #1F2937;
    --btcpay-neutral-900: #111827;

    /* Font */
    --btcpay-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Force light theme on dark mode too */
:root[data-btcpay-theme="dark"] {
    --btcpay-body-bg: #ffffff;
    --btcpay-body-text: #111827;
    --btcpay-body-text-muted: #4B5563;
    --btcpay-bg-tile: #ffffff;
    --btcpay-bg-dark: #F9FAFB;
    --btcpay-body-link: #e22c8c;
    --btcpay-body-link-accent: #cc2780;
    --btcpay-border-color: #E5E7EB;
    --btcpay-neutral-100: #F9FAFB;
    --btcpay-neutral-200: #F3F4F6;
    --btcpay-neutral-300: #E5E7EB;
    --btcpay-neutral-400: #D1D5DB;
    --btcpay-neutral-500: #9CA3AF;
    --btcpay-neutral-600: #6B7280;
    --btcpay-neutral-700: #4B5563;
    --btcpay-neutral-800: #1F2937;
    --btcpay-neutral-900: #111827;
}

/* Ensure prefers-color-scheme dark doesn't override */
@media (prefers-color-scheme: dark) {
    :root:not([data-btcpay-theme]) {
        --btcpay-body-bg: #ffffff;
        --btcpay-body-text: #111827;
        --btcpay-body-text-muted: #4B5563;
        --btcpay-bg-tile: #ffffff;
        --btcpay-bg-dark: #F9FAFB;
        --btcpay-body-link: #e22c8c;
        --btcpay-body-link-accent: #cc2780;
        --btcpay-border-color: #E5E7EB;
        --btcpay-neutral-100: #F9FAFB;
        --btcpay-neutral-200: #F3F4F6;
        --btcpay-neutral-300: #E5E7EB;
        --btcpay-neutral-400: #D1D5DB;
        --btcpay-neutral-500: #9CA3AF;
        --btcpay-neutral-600: #6B7280;
        --btcpay-neutral-700: #4B5563;
        --btcpay-neutral-800: #1F2937;
        --btcpay-neutral-900: #111827;
    }
}


/* ==========================================================
   SECTION 2: GLOBAL STYLES (all pages)
   ========================================================== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-font-smoothing: antialiased;
}

a {
    color: #e22c8c;
}

a:hover {
    color: #cc2780;
}

/* All backgrounds that might go dark */
.bg-tile {
    background: #ffffff !important;
}

.bg-dark {
    background: #F9FAFB !important;
}

/* All form inputs */
.form-control,
.form-select {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #E5E7EB !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #e22c8c !important;
    box-shadow: 0 0 0 3px rgba(226, 44, 140, 0.1) !important;
}

.form-label {
    color: #374151 !important;
}

/* All primary buttons across all pages */
.btn-primary {
    background: #e22c8c !important;
    border-color: #e22c8c !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: #111827 !important;
    border-color: #111827 !important;
}

.btn-secondary {
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
    color: #374151 !important;
}

.btn-secondary:hover {
    background: #E5E7EB !important;
}

/* Cards and containers everywhere */
.card {
    background: #ffffff !important;
    border-color: #F3F4F6 !important;
}

/* Text utilities */
.text-muted {
    color: #6B7280 !important;
}

.text-secondary {
    color: #4B5563 !important;
}


/* ==========================================================
   SECTION 3: POS SHOP PAGE
   ========================================================== */

/* Hide the BTCPay display title (we use our own in Astro) */
header.sticky-top h1,
header.sticky-top .fw-bold {
    display: none !important;
}

/* But keep the Cart title visible */
#cart header h1,
#cart header .fw-bold,
#cart h1 {
    display: block !important;
}

header.sticky-top {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #F3F4F6 !important;
    box-shadow: none !important;
}

/* ----------------------------------------------------------
   Search box — hidden for now (remove this block to restore)
   ---------------------------------------------------------- */
#SearchTerm,
#SearchTerm + button,
form[action*="search"],
.search-wrap,
input[type="search"] {
    display: none !important;
}

/* Search styling — commented out while hidden, uncomment when re-enabling search
#SearchTerm {
    border: 1px solid #E5E7EB !important;
    border-radius: 9999px !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', sans-serif !important;
    background: #ffffff !important;
    color: #111827 !important;
}

#SearchTerm:focus {
    border-color: #e22c8c !important;
    box-shadow: 0 0 0 3px rgba(226, 44, 140, 0.1) !important;
    outline: none !important;
}
*/

/* Category pills */
#Categories .btcpay-pill,
#Categories label.btcpay-pill {
    border-radius: 9999px !important;
    padding: 0.375rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #4B5563 !important;
    background: #F9FAFB !important;
    border: 1px solid #E5E7EB !important;
}

#Categories .btcpay-pill:hover,
#Categories label.btcpay-pill:hover {
    color: #111827 !important;
    background: #F3F4F6 !important;
}

#Categories input:checked + label.btcpay-pill {
    background: #e22c8c !important;
    color: #ffffff !important;
    border-color: #e22c8c !important;
}

/* Description */
.lead {
    max-width: 42rem !important;
    margin: 0 auto 2rem auto !important;
    text-align: center !important;
    padding: 1rem !important;
}

.lead p {
    font-size: 0.9375rem !important;
    line-height: 1.7 !important;
    margin-bottom: 0.5rem !important;
}

.lead a {
    color: #e22c8c !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.lead a:hover {
    color: #cc2780 !important;
}

/* Product cards — equal height with consistent image sizing */
.posItem {
    padding-bottom: 1.5rem !important;
}

.posItem .tile.card {
    border: 1px solid #F3F4F6 !important;
    border-radius: 1rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    background: #ffffff !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.posItem .tile.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-color: #E5E7EB !important;
}

/* Image container — fixed height, centered, full image visible */
.posItem .card-img-top {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    background: #F9FAFB !important;
    border-bottom: 1px solid #F3F4F6 !important;
    padding: 1rem !important;
    border-radius: 1rem 1rem 0 0 !important;
}

/* Card body — grows to fill available space */
.posItem .card-body {
    padding: 1rem 1.25rem !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.posItem .card-title {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
    margin-bottom: 0.375rem !important;
}

/* Price */
.posItem .card-body .fw-semibold {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* Description — truncate to 6 lines, expand on hover */
.posItem .card-text {
    font-size: 0.8125rem !important;
    color: #6B7280 !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}

.posItem .tile.card:hover .card-text {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* Stock badge */
.posItem .badge.text-bg-warning {
    background: #FEF3C7 !important;
    color: #92400E !important;
    font-weight: 500 !important;
    font-size: 0.6875rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 9999px !important;
    border: none !important;
}

.posItem:not(.posItem--inStock) .card {
    opacity: 0.5 !important;
}

.posItem:not(.posItem--inStock) .badge.text-bg-warning {
    background: #FEE2E2 !important;
    color: #991B1B !important;
}

/* Card footer — always at bottom */
.posItem .card-footer {
    background: transparent !important;
    border-top: 1px solid #F3F4F6 !important;
    padding: 1rem 1.25rem !important;
    margin-top: auto !important;
}

.posItem .card-footer .btn-primary {
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 1.5rem !important;
    font-family: 'Inter', sans-serif !important;
}


/* ==========================================================
   SECTION 3B: CART SIDEBAR
   ========================================================== */

/* ----------------------------------------------------------
   Hide cart when empty — hides when there's no <form> inside
   (the form only appears when products are in cart).
   Product grid goes full width when cart is hidden.
   To restore always-visible cart, remove these rules.
   ---------------------------------------------------------- */
aside#cart:not(:has(form)) {
    display: none !important;
}

/* Remove sidebar space by default */
#PosCart {
    --sidebar-width: 0px !important;
}

/* Restore sidebar space when cart has products */
#PosCart:has(aside#cart form) {
    --sidebar-width: 480px !important;
}

/* Cart sidebar */
#cart,
aside#cart {
    background: #ffffff !important;
    border-left: 1px solid #F3F4F6 !important;
}

/* Cart internals */
#cart .offcanvas-header,
#cart header.sticky-top {
    background: #ffffff !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

#cart .bg-tile {
    background: #ffffff !important;
}

#cart h1 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

#CartClear {
    color: #e22c8c !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

#cart h6 {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

#cart .text-danger {
    color: #EF4444 !important;
    font-size: 0.75rem !important;
}

#CartSubmit {
    background: #e22c8c !important;
    border: none !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.875rem 2rem !important;
    font-family: 'Inter', sans-serif !important;
}

#CartSubmit:hover {
    background: #111827 !important;
}

/* Cart toggle button */
.cart-toggle-btn {
    background: transparent !important;
    border: none !important;
    color: #4B5563 !important;
}

.cart-toggle-btn:hover {
    color: #111827 !important;
}

#CartBadge {
    background: #e22c8c !important;
    border-radius: 9999px !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
}


/* ==========================================================
   SECTION 4: CHECKOUT / INVOICE PAGE
   ========================================================== */

/* Checkout container */
.checkout-v2,
.payment-box,
#checkout,
#Checkout,
.invoice {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Checkout header area */
.top-header,
.payment-header,
#header-area {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Store name and branding on checkout */
.store-name {
    color: #111827 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Checkout card/panel */
.payment-details,
.checkout-body,
.manual-flow,
.payment-details-content {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Amount display */
.checkout-v2 .amount,
.payment-due .h2,
.payment-due h2,
#PaymentDetails-TotalFiat dd,
.amount-text {
    color: #111827 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Payment method tabs */
.payment-tabs .nav-link,
.payment-method {
    color: #4B5563 !important;
    background: #F9FAFB !important;
    border-color: #E5E7EB !important;
}

.payment-tabs .nav-link.active,
.payment-tabs .nav-link:hover,
.payment-method.active {
    color: #e22c8c !important;
    border-color: #e22c8c !important;
    background: #ffffff !important;
}

/* QR code area */
.qr-container {
    background: #ffffff !important;
}

/* Countdown timer */
.timer-row,
.timer {
    color: #4B5563 !important;
}

/* Invoice details / line items */
.payment-details dt,
.payment-details dd,
#PaymentDetails dt,
#PaymentDetails dd {
    color: #111827 !important;
}

/* Status badges on checkout */
.badge {
    font-weight: 500 !important;
    border-radius: 9999px !important;
}

/* Copy buttons and actions */
.btn-copy,
.btn-outline-primary {
    color: #e22c8c !important;
    border-color: #e22c8c !important;
}

.btn-copy:hover,
.btn-outline-primary:hover {
    background: #e22c8c !important;
    color: #ffffff !important;
}

/* Info/detail sections */
.payment-details-content dl,
.recommended-fee,
.address-text {
    color: #374151 !important;
}


/* ==========================================================
   SECTION 5: BUYER INFO FORM (after clicking Pay)
   ========================================================== */

/* Form container */
.form-page,
.public-page-wrap form,
#buyerForm,
#FormView {
    background: #ffffff !important;
    color: #111827 !important;
}

/* Form headings */
.form-page h1,
.form-page h2,
#FormView h1,
#FormView h2 {
    color: #111827 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Form field labels */
.form-page label,
#FormView label {
    color: #374151 !important;
    font-weight: 500 !important;
}

/* Form inputs specifically on the form page */
.form-page .form-control,
#FormView .form-control {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 0.5rem !important;
}

.form-page .form-control:focus,
#FormView .form-control:focus {
    border-color: #e22c8c !important;
    box-shadow: 0 0 0 3px rgba(226, 44, 140, 0.1) !important;
}

/* Submit button on form */
.form-page .btn-primary,
#FormView .btn-primary {
    background: #e22c8c !important;
    border-color: #e22c8c !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    padding: 0.75rem 2rem !important;
}

.form-page .btn-primary:hover,
#FormView .btn-primary:hover {
    background: #111827 !important;
    border-color: #111827 !important;
}


/* ==========================================================
   SECTION 6: RECEIPTS & CONFIRMATIONS
   ========================================================== */

.receipt,
.receipt-content,
.payment-settled {
    background: #ffffff !important;
    color: #111827 !important;
}

.receipt h1,
.receipt h2 {
    color: #111827 !important;
}

/* Success state */
.payment-settled .icon,
.checkmark {
    color: #10B981 !important;
}


/* ==========================================================
   SECTION 7: MODALS & OVERLAYS
   ========================================================== */

.modal-content {
    background: #ffffff !important;
    border-radius: 1rem !important;
    border: 1px solid #F3F4F6 !important;
}

.modal-header {
    border-bottom: 1px solid #F3F4F6 !important;
}

.modal-header .modal-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.modal-body {
    color: #111827 !important;
    background: #ffffff !important;
}

.modal-footer {
    border-top: 1px solid #F3F4F6 !important;
}

/* Offcanvas (mobile cart) */
.offcanvas {
    background: #ffffff !important;
    color: #111827 !important;
}


/* ==========================================================
   SECTION 8: FOOTER & MISC
   ========================================================== */

.store-footer {
    padding: 2rem 0 !important;
    border-top: 1px solid #F3F4F6 !important;
}

.store-powered-by {
    color: #9CA3AF !important;
    font-size: 0.75rem !important;
    text-decoration: none !important;
}

.store-powered-by:hover {
    color: #6B7280 !important;
}

/* Max width wrapper */
.public-page-wrap {
    max-width: 1152px !important;
    margin: 0 auto !important;
}