/* Workspace BD — Shared Theme Styles (ported from static template, extended for WP) */

/* Parallax category-menu base background tint — admin-customizable via the
   Customizer (separate from the hover overlay color above). */
.wbd-parallax-link {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--wbd-parallax-bg, #08111F) 90%, transparent), color-mix(in srgb, var(--wbd-parallax-bg, #08111F) 75%, transparent) 50%, transparent) !important;
}
.wbd-parallax-link.wbd-parallax-rtl {
    background-image: linear-gradient(to left, color-mix(in srgb, var(--wbd-parallax-bg, #08111F) 90%, transparent), color-mix(in srgb, var(--wbd-parallax-bg, #08111F) 75%, transparent) 50%, transparent) !important;
}

/* Parallax category-menu hover overlay — admin-customizable via the Customizer.
   Uses color-mix() so the hex value from --wbd-parallax-overlay can be tinted
   with transparency without needing a separate RGB-triplet CSS variable. */
.wbd-parallax-link:hover {
    background-image: linear-gradient(to right, color-mix(in srgb, var(--wbd-parallax-overlay, #1E40AF) 65%, transparent), transparent) !important;
}
[dir="rtl"] .wbd-parallax-link:hover,
.wbd-parallax-link.wbd-parallax-rtl:hover {
    background-image: linear-gradient(to left, color-mix(in srgb, var(--wbd-parallax-overlay, #1E40AF) 65%, transparent), transparent) !important;
}

/* Header/footer background — admin-customizable via the Customizer.
   color-mix keeps the same translucent/backdrop-blur look as before while
   letting the base color itself be swapped. */
.wbd-header-bg { background-color: color-mix(in srgb, var(--wbd-header-bg, #FFFFFF) 80%, transparent); }
.dark .wbd-header-bg { background-color: color-mix(in srgb, var(--wbd-header-bg-dark, #08111F) 80%, transparent); }
.wbd-footer-bg { background-color: var(--wbd-footer-bg, #F7F9FC); }
.dark .wbd-footer-bg { background-color: var(--wbd-footer-bg-dark, #08111F); }

/* Product single page — hover zoom */
.wbd-zoom-frame { overflow: hidden; }
.wbd-zoom-img { transition: transform 0.15s ease-out; will-change: transform; }

/* Nav "hover button" — used by the primary header menu and the catalog
   page's sticky category tabs. Plain color-hover becomes a pill background
   on hover, using the admin-customizable menu-hover color. */
.wbd-nav-btn {
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    border-radius: 9999px;
    color: var(--wbd-muted, #64748B);
    transition: all .2s ease;
}
.wbd-nav-btn:hover {
    background-color: color-mix(in srgb, var(--wbd-menu-hover, #1D4ED8) 12%, transparent);
    color: var(--wbd-menu-hover, #1D4ED8);
}
.wbd-nav-btn.is-active {
    background-color: color-mix(in srgb, var(--wbd-menu-hover, #1D4ED8) 12%, transparent);
    color: var(--wbd-menu-hover, #1D4ED8);
    font-weight: 600;
}
.wbd-nav-btn-cta {
    background-color: var(--wbd-cta, #1D4ED8);
    color: #fff !important;
}
.wbd-nav-btn-cta:hover {
    background-color: var(--wbd-accent, #1E40AF);
    color: #fff !important;
}

.unified-parallax-bg {
    background-image: url('../images/parallax-bg.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.counter-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.counter-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.counter-card:hover { transform: translateY(-8px); box-shadow: 0 20px 30px -10px rgba(139, 0, 0, 0.15); }
.counter-card:hover .icon-box { transform: scale(1.1) rotate(5deg); }

.modal-active { opacity: 1 !important; pointer-events: auto !important; }

.swiper-pagination-bullet { background: #64748B !important; opacity: 0.4; }
.swiper-pagination-bullet-active {
    background: #1D4ED8 !important;
    opacity: 1;
    width: 28px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

/* Story slider nav arrows (modern sliding customer stories) */
.story-nav {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #64748B;
    transition: all .25s ease;
}
.dark .story-nav { background: #101B2D; border-color: rgba(255,255,255,.08); color: #F8FAFC; }
.story-nav:hover { background: #1D4ED8; color: #fff; border-color: #1D4ED8; transform: translateY(-2px); }
.story-nav.swiper-button-disabled { opacity: .35; pointer-events: none; }
.story-quote-mark { font-family: Georgia, 'Times New Roman', serif; line-height: 1; }

/* Workspace BD Color System V2 */
.tech-accent { color: #06B6D4; }
.tech-bg { background-color: rgba(37, 99, 235, 0.10); }
.tech-border { border-color: rgba(37, 99, 235, 0.25); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #06B6D4;
    outline-offset: 3px;
}

.brand-gradient { background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); }
.brand-gradient-text {
    background: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
input:focus, textarea:focus, select:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* Quantity stepper (product single / checkout) */
.qty-input { -moz-appearance: textfield; }
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Checkout step indicator */
.step-dot { transition: all .3s ease; }

/* ---- Additions for WP theme (dashboard / admin / invoices) ---- */

/* Status badges used across dashboard + admin order screens */
.wbd-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 9999px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.wbd-badge-pending { background: rgba(100,116,139,.12); color: #475569; }
.wbd-badge-awaiting { background: rgba(217,119,6,.12); color: #b45309; }
.wbd-badge-code_pending { background: rgba(217,119,6,.12); color: #b45309; }
.wbd-badge-paid { background: rgba(16,185,129,.12); color: #047857; }
.wbd-badge-fulfilled { background: rgba(37,99,235,.12); color: #1d4ed8; }
.wbd-badge-refunded { background: rgba(244,63,94,.12); color: #be123c; }
.wbd-badge-cancelled { background: rgba(100,116,139,.15); color: #334155; }
.wbd-badge-active { background: rgba(16,185,129,.12); color: #047857; }
.wbd-badge-redeemed { background: rgba(37,99,235,.12); color: #1d4ed8; }
.wbd-badge-void { background: rgba(100,116,139,.15); color: #334155; }
.wbd-badge-approved { background: rgba(16,185,129,.12); color: #047857; }
.wbd-badge-denied { background: rgba(244,63,94,.12); color: #be123c; }

/* Dashboard sidebar active state */
.wbd-dash-link.is-active { background: #1D4ED8; color: #fff !important; }
.wbd-dash-link.is-active i { color: #fff !important; }

/* Simple toast for AJAX feedback across cart/checkout/dashboard */
#wbdToast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; max-width: 320px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: all .25s ease; }
#wbdToast.show { transform: translateY(0); opacity: 1; }

/* Printable invoice — screen preview */
.wbd-invoice { max-width: 800px; margin: 0 auto; background: #fff; color: #0F172A; }

/* Printable invoice — print output */
@media print {
    body * { visibility: hidden; }
    .wbd-invoice, .wbd-invoice * { visibility: visible; }
    .wbd-invoice { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 20px; }
    .wbd-no-print { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .unified-parallax-bg, .counter-section { background-attachment: scroll; }
}