/**
 * Base Design System - Core Styles
 * Theme-agnostic styles: typography, spacing, shadows, border-radius, structure
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ========================================================================== */

:root {
    /* Typography */
    --font-family: 'TT Hoves Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    /* Font Sizes - Based on actual usage */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    --font-size-5xl: 32px;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Colors - Text */
    --color-text-primary: #192024;
    --color-text-secondary: #5a6872;
    --color-text-muted: #8f9ca8;
    
    /* Colors - Background */
    --color-bg-white: #fff;
    --color-bg-gray-light: #f1f3f5;
    --color-bg-gray: #f9fafb;
    --color-bg-hover: #e6ebef;
    --color-bg-hover-alt: #efeff0;
    
    /* Colors - Borders */
    --color-border-primary: #d9e2e8;
    --color-border-secondary: #d9e2e9;
    --color-border-light: #e5ebf1;
    --color-border-medium: #b8c5d0;
    
    /* Colors - Accent (for active states) */
    --color-accent: #006ce4;
    --color-accent-bg: #f0f6ff;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(25, 32, 36, 0.1);
    --shadow-md: 0 3px 6px rgba(25, 32, 36, 0.16), 0 -1px 4px rgba(25, 32, 36, 0.04);
    --shadow-lg: 0 12px 30px rgba(25, 32, 36, 0.16);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    
    /* Component Sizes */
    --header-height: 64px;
    --button-height: 44px;
    --button-height-sm: 36px;
}

/* ============================================================================
   RESET & BASE STYLES
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
}

h2 { font-size: var(--font-size-5xl); }
h3 { font-size: var(--font-size-3xl); }
h5 { font-size: var(--font-size-md); }

p {
    margin: 0;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* ============================================================================
   HEADER / NAVIGATION
   ========================================================================== */

header {
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border-primary);
    z-index: 1000;
}

.navbar {
    height: var(--header-height);
    padding: 0;
}

/* In checkout mode the navbar is a 3-column layout:
   logo | steps (centered) | currency+lang
   We use absolute positioning for the steps so the logo
   and right controls can each be at their natural positions
   while the steps sit perfectly in the center of the bar. */
.navbar-checkout {
    position: relative;
}

.navbar-checkout .container {
    position: relative;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.navbar-brand-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

/* Mobile Controls Container */
.mobile-controls { gap: 0; }

/* Hamburger Toggle Button */
.navbar-toggler {
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition: background-color 0.2s ease;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
    background-color: var(--color-bg-hover);
    box-shadow: none;
}

.navbar-toggler svg { color: var(--color-text-primary); }

/* Desktop Navigation */
.nav-link {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: 0.4rem 0.85rem !important;
    transition: background-color 0.2s ease;
    border-radius: var(--radius-sm);
}

/* Breathing room between the pill-shaped desktop nav items, so the active item's
   filled background never touches the hover fill of the item next to it. Scoped to
   the desktop bar; the full-width offcanvas rows are meant to sit flush. */
.navbar-collapse .navbar-nav { column-gap: 4px; }

.nav-link:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.nav-link-gray { color: var(--color-text-primary); }

.nav-link svg { margin-right: 8px; }

.nav-link-icon-only { padding: 0.5rem 0.6rem !important; }

.mobile-controls .nav-link-icon-only {
    padding: 0.5rem 0.6rem !important;
    border-radius: var(--radius-lg);
}

.mobile-controls .nav-link-icon-only:hover { background-color: var(--color-bg-hover); }

.nav-link-button {
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.85rem !important;
    transition: all 0.2s ease;
}

.nav-link-button:hover {
    background-color: var(--color-bg-hover-alt);
    opacity: 1;
}

/* Active nav item = the current page. A subtle filled pill + bold weight, mirroring
   the offcanvas treatment, so it reads as "you are here" and is distinct from the
   plain hover state. The dropdown parent gets it too when a child page is active. */
.nav-link.active,
.nav-link.active:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}
/* Dropdown item for the current page. Overrides Bootstrap's blue .dropdown-item.active
   default so it matches the site's neutral menu styling. */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item.active:hover {
    background-color: var(--color-bg-hover);
    color: inherit;
    font-weight: var(--font-weight-semibold);
}

/* Right-side controls in checkout mode */
.checkout-nav-right { margin-left: auto; }

/* ============================================================================
   DARK HEADER VARIANT
   Chosen in the Builder (Menu tab → Header style). Only the top bar flips to a
   dark surface with light text; the mobile offcanvas panel and the dropdown
   menus stay light, so this is a header-colour choice, not a full dark theme.
   ========================================================================== */
:root { --header-dark-bg: #171c20; }

header.header--dark {
    background: var(--header-dark-bg);
    border-bottom-color: rgba(255, 255, 255, 0.10);
}
/* Bootstrap 5.3 drives nav-link colour (base / hover / focus / active / OPEN
   dropdown) from these navbar variables; their defaults are near-black, so an
   open dropdown toggle turned invisible on the dark bar and stayed that way while
   focused. Repointing the variables to white fixes every state at the source. */
.header--dark .navbar {
    --bs-navbar-color: rgba(255, 255, 255, 0.86);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}
.header--dark .navbar-brand-text { color: #fff; }
.header--dark .nav-link,
.header--dark .nav-link-gray { color: rgba(255, 255, 255, 0.86); }
.header--dark .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}
.header--dark .nav-link.active,
.header--dark .nav-link.active:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.header--dark .navbar-toggler svg { color: #fff; }
.header--dark .navbar-toggler:hover,
.header--dark .navbar-toggler:focus { background-color: rgba(255, 255, 255, 0.10); }
.header--dark .mobile-controls .nav-link-icon-only:hover { background-color: rgba(255, 255, 255, 0.10); }
.header--dark .nav-link-button {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
}
.header--dark .nav-link-button:hover { background-color: rgba(255, 255, 255, 0.12); }

/* Checkout step bar sits INSIDE the navbar on desktop, so it inherits the dark
   bar and needs light-on-dark step chrome to stay readable. */
.header--dark .csn-circle {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.6);
}
.header--dark .csn-step.completed .csn-circle,
.header--dark .csn-step.active .csn-circle {
    background: #fff;
    border-color: #fff;
    color: var(--header-dark-bg);
}
.header--dark .csn-label { color: rgba(255, 255, 255, 0.6); }
.header--dark .csn-step.active .csn-label,
.header--dark .csn-step.completed .csn-label { color: #fff; }
.header--dark .csn-line { background: rgba(255, 255, 255, 0.25); }
.header--dark .csn-line.active { background: #fff; }

/* ============================================================================
   CHECKOUT STEP BAR — DESKTOP (inside navbar, absolutely centered)
   ========================================================================== */

.checkout-steps-navbar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0;
    pointer-events: none;
}

/* Step circle */
.csn-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.csn-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-medium);
    background: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    transition: all 0.2s ease;
}

.csn-circle svg {
    width: 10px;
    height: 10px;
    display: none;
}

.csn-step.completed .csn-circle {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: #fff;
}

.csn-step.completed .csn-circle svg { display: block; }
.csn-step.completed .csn-circle span { display: none; }

.csn-step.active .csn-circle {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

.csn-label {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.csn-step.active .csn-label,
.csn-step.completed .csn-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

/* Connector line between steps */
.csn-line {
    width: 72px;
    height: 1px;
    background: var(--color-border-primary);
    margin: 0 6px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.csn-line.active { background: var(--color-text-primary); }

/* ============================================================================
   CHECKOUT STEP BAR — MOBILE (below navbar, border-top row)
   ========================================================================== */

.checkout-step-bar-mobile {
    border-top: 1px solid var(--color-border-light);
    padding: 9px 0 10px;
    background: var(--color-bg-white);
}

.checkout-steps-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto;
}

.csm-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.csm-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-medium);
    background: var(--color-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    transition: all 0.2s ease;
}

.csm-circle svg {
    width: 10px;
    height: 10px;
    display: none;
}

.csm-step.completed .csm-circle {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: #fff;
}

.csm-step.completed .csm-circle svg { display: block; }
.csm-step.completed .csm-circle span { display: none; }

.csm-step.active .csm-circle {
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

.csm-label {
    font-size: 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.csm-step.active .csm-label,
.csm-step.completed .csm-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.csm-line {
    width: 32px;
    height: 1px;
    background: var(--color-border-primary);
    margin: 0 6px;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.csm-line.active { background: var(--color-text-primary); }

/* ============================================================================
   MOBILE OFFCANVAS MENU
   ========================================================================== */

.offcanvas { width: 280px !important; }

.offcanvas-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border-light);
}

.offcanvas-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.offcanvas-body { padding: 1rem 0; }

.offcanvas .navbar-nav { width: 100%; }
.offcanvas .nav-item   { width: 100%; }

.offcanvas .nav-link {
    padding: 0.75rem 1.5rem !important;
    width: 100%;
    display: block;
    border-radius: 0;
    transition: background-color 0.2s ease;
}

.offcanvas .nav-link:hover       { background-color: var(--color-bg-hover); opacity: 1; }
.offcanvas .nav-link.active      { background-color: var(--color-bg-hover); font-weight: var(--font-weight-bold); }

.offcanvas .nav-link-button {
    border: 1px solid var(--color-text-primary);
    border-radius: var(--radius-sm);
    padding: 0.6rem 1rem !important;
    margin: 0 1.5rem;
    width: calc(100% - 3rem);
}

.offcanvas .nav-link-button:hover { background-color: var(--color-bg-hover-alt); }

.offcanvas .nav-divider {
    height: 1px;
    background-color: var(--color-border-light);
    margin: 0.75rem 0;
    border: none;
    opacity: 1;
}

.offcanvas-section-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 1rem 1.5rem 0.25rem;
}

.nav-item-social-separator { margin-top: 14px; }

.offcanvas-social { padding: 0 1.5rem; }

.offcanvas-social-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.offcanvas-social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.offcanvas-social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    padding: 0;
}

.offcanvas-social-link:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-text-primary);
}

/* ============================================================================
   BUTTONS
   ========================================================================== */

.btn {
    height: var(--button-height);
    padding: 0 24px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-outline-primary {
    background: var(--color-bg-white);
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-bg-hover-alt);
    border-color: var(--color-text-primary);
    color: var(--color-text-primary);
}

/* ============================================================================
   FLAG ICONS
   ========================================================================== */

.flag-icon {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
}

.offcanvas .collapse .flag-icon {
    width: 20px;
    height: 14px;
}

/* ============================================================================
   MODALS - LANGUAGE
   ========================================================================== */

#languageModal .modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-primary);
}

#languageModal .modal-header {
    border-bottom: 1px solid var(--color-border-light);
    padding: 1rem 1.25rem;
}

#languageModal .modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

#languageModal .modal-body {
    padding: 0;
    max-height: 400px;
    overflow-y: auto;
}

#languageModal .list-group-item {
    border: none;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: 0;
    padding: 1rem 1.25rem;
    color: var(--color-text-primary);
    transition: background-color 0.2s ease;
}

#languageModal .list-group-item:last-child { border-bottom: none; }
#languageModal .list-group-item:hover      { background-color: var(--color-bg-hover); }

#languageModal .list-group-item.active {
    background-color: var(--color-bg-hover);
    border-color: transparent;
    color: var(--color-text-primary);
}

#languageModal .list-group-item .flag-icon {
    width: 24px;
    height: 16px;
}

/* ============================================================================
   CURRENCY MODAL
   ========================================================================== */

.currency-modal-dialog { max-width: 820px; }

#currencyModal .modal-content {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-primary);
    overflow: hidden;
}

.currency-modal-header {
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--color-border-light);
    align-items: flex-start;
}

.currency-modal-header .modal-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.currency-modal-description {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.currency-modal-body {
    padding: 0 28px 28px;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-medium) transparent;
}

.currency-modal-body::-webkit-scrollbar       { width: 6px; }
.currency-modal-body::-webkit-scrollbar-track { background: transparent; }
.currency-modal-body::-webkit-scrollbar-thumb { background-color: var(--color-border-medium); border-radius: 10px; }
.currency-modal-body::-webkit-scrollbar-thumb:hover { background-color: var(--color-text-muted); }

.currency-section       { margin-top: 24px; }
.currency-section:first-child { margin-top: 20px; }

.currency-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.currency-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.currency-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background-color 0.15s ease;
    cursor: pointer;
    min-height: 60px;
    border-radius: var(--radius-lg);
    border: none;
    background: transparent;
}

.currency-grid-item:hover  { background-color: var(--color-bg-gray-light); }
.currency-grid-item.active { background-color: var(--color-accent-bg); }

.currency-grid-name {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}

.currency-grid-item.active .currency-grid-name {
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

.currency-grid-code { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.currency-grid-item.active .currency-grid-code { color: var(--color-accent); }

.currency-grid-check { position: absolute; top: 12px; right: 12px; color: var(--color-accent); }

@media (max-width: 767px) {
    #currencyModal { padding: 0 !important; }
    .currency-modal-dialog { max-width: 100%; width: 100%; margin: 0; height: 100dvh; max-height: 100dvh; }
    #currencyModal .modal-content { border-radius: 0; height: 100dvh; max-height: 100dvh; border: none; display: flex; flex-direction: column; overflow: hidden; }
    .currency-modal-header { padding: 20px 20px 16px; flex-shrink: 0; }
    .currency-modal-header .modal-title { font-size: var(--font-size-2xl); }
    /* max-height:none is load-bearing: the base rule caps the body at 60vh, which
       inside this 100dvh fullscreen sheet left the bottom third of the modal dead
       and made the list look cut off (owner report 24 Jul 2026). Let flex own it. */
    .currency-modal-body { padding: 0 20px 20px; flex: 1; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    .currency-grid { grid-template-columns: repeat(2, 1fr); }
    .currency-grid-name { white-space: normal; word-break: break-word; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .currency-grid { grid-template-columns: repeat(3, 1fr); }
    .currency-modal-dialog { max-width: 640px; }
}

/* ============================================================================
   SECTION UTILITIES
   ========================================================================== */

.container { max-width: 1200px; }

.section-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

@media (max-width: 991px) { .section-title { font-size: var(--font-size-4xl); } }
@media (max-width: 767px) { .section-title { font-size: var(--font-size-3xl); } }

@media (min-width: 992px) {
    .ms-lg-custom-3-5 { margin-left: 3.5rem !important; }
    .ms-lg-custom-2   { margin-left: 2rem !important; }
}