/* =====================================================================
   1SWISS1 base components
   ---------------------------------------------------------------------
   Mixed inspiration:
     - Linear      → restraint, sharp typography, soft shadows
     - Cloudflare  → structured SaaS, clear hierarchy
     - Hostinger   → warmth, generous radii, confident CTAs

   All class selectors are namespaced `s1-` to avoid clashing with the
   Bootstrap 4 classes shipped by WHMCS twenty-one. Custom properties
   keep the longer `--1s1-` form (CSS allows leading digits in custom
   property names but not in class identifiers).
   ===================================================================== */

/* =================================================================
   1. TYPOGRAPHY HELPERS
   ================================================================= */

.s1-eyebrow {
    display: inline-block;
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-semibold);
    letter-spacing: var(--1s1-tracking-wide);
    text-transform: uppercase;
    color: var(--1s1-brand);
}

.s1-title-display {
    font-size: var(--1s1-text-display);
    font-weight: var(--1s1-weight-medium);
    line-height: var(--1s1-leading-tight);
    letter-spacing: var(--1s1-tracking-tight);
    color: var(--1s1-text);
    margin: 0;
}

.s1-title-1 { font-size: var(--1s1-text-4xl); font-weight: var(--1s1-weight-semibold); line-height: var(--1s1-leading-tight); letter-spacing: var(--1s1-tracking-tight); margin: 0; }
.s1-title-2 { font-size: var(--1s1-text-3xl); font-weight: var(--1s1-weight-semibold); line-height: var(--1s1-leading-snug);  margin: 0; }
.s1-title-3 { font-size: var(--1s1-text-2xl); font-weight: var(--1s1-weight-semibold); line-height: var(--1s1-leading-snug);  margin: 0; }
.s1-title-4 { font-size: var(--1s1-text-xl);  font-weight: var(--1s1-weight-semibold); line-height: var(--1s1-leading-snug);  margin: 0; }

.s1-text-muted   { color: var(--1s1-text-muted); }
.s1-text-subtle  { color: var(--1s1-text-subtle); }
.s1-text-numeric { font-variant-numeric: var(--1s1-numeric-tabular); }

/* =================================================================
   2. BUTTONS
   ================================================================= */

.s1-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--1s1-space-2);
    padding: 10px 18px;
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--1s1-radius-md);
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--1s1-transition-fast),
        border-color     var(--1s1-transition-fast),
        color            var(--1s1-transition-fast),
        box-shadow       var(--1s1-transition-fast),
        transform        var(--1s1-transition-fast);
    white-space: nowrap;
}
.s1-btn:focus-visible {
    outline: none;
    box-shadow: var(--1s1-shadow-focus);
}
.s1-btn:active:not(:disabled) { transform: translateY(1px); }
.s1-btn:disabled,
.s1-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary (brand-filled) — main CTA */
.s1-btn--primary {
    background: var(--1s1-brand);
    color: var(--1s1-brand-on);
}
.s1-btn--primary:hover  { background: var(--1s1-brand-hover); color: var(--1s1-brand-on); }
.s1-btn--primary:active { background: var(--1s1-brand-active); }

/* Secondary (outlined) — equal weight to primary */
.s1-btn--secondary {
    background: var(--1s1-surface);
    color: var(--1s1-text);
    border-color: var(--1s1-border-strong);
}
.s1-btn--secondary:hover {
    background: var(--1s1-surface-sunken);
    border-color: var(--1s1-text-muted);
}

/* Ghost — tertiary actions, list rows */
.s1-btn--ghost {
    background: transparent;
    color: var(--1s1-text);
}
.s1-btn--ghost:hover { background: var(--1s1-surface-sunken); }

/* Dark — used inside hero sections / brand-dark surfaces */
.s1-btn--dark {
    background: var(--1s1-dark);
    color: var(--1s1-text-on-dark);
}
.s1-btn--dark:hover { background: var(--1s1-dark-soft); }

/* Sizes */
.s1-btn--sm { padding: 6px 12px; font-size: var(--1s1-text-xs); border-radius: var(--1s1-radius-sm); }
.s1-btn--lg { padding: 14px 24px; font-size: var(--1s1-text-md); border-radius: var(--1s1-radius-lg); }
.s1-btn--block { display: flex; width: 100%; }

/* =================================================================
   3. SURFACES (cards, panels)
   ================================================================= */

.s1-card {
    background: var(--1s1-surface);
    border: 1px solid var(--1s1-border);
    border-radius: var(--1s1-radius-lg);
    box-shadow: var(--1s1-shadow-sm);
    transition: box-shadow var(--1s1-transition-base), transform var(--1s1-transition-base);
}
.s1-card--hoverable:hover {
    box-shadow: var(--1s1-shadow-md);
    transform: translateY(-1px);
}
.s1-card__header,
.s1-card__body,
.s1-card__footer {
    padding: var(--1s1-space-6);
}
.s1-card__header {
    border-bottom: 1px solid var(--1s1-border);
}
.s1-card__footer {
    border-top: 1px solid var(--1s1-border);
    background: var(--1s1-surface-sunken);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* Section bands */
.s1-section {
    padding: var(--1s1-space-16) 0;
}
.s1-section--sunken { background: var(--1s1-surface-sunken); }
.s1-section--dark   { background: var(--1s1-dark); color: var(--1s1-text-on-dark); }

.s1-container {
    max-width: var(--1s1-container-xl);
    margin: 0 auto;
    padding: 0 var(--1s1-space-6);
}

/* =================================================================
   4. BADGES & PILLS
   ================================================================= */

.s1-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--1s1-space-1);
    padding: 2px 10px;
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-medium);
    line-height: 1.5;
    border-radius: var(--1s1-radius-pill);
    background: var(--1s1-surface-sunken);
    color: var(--1s1-text-muted);
    white-space: nowrap;
}
.s1-badge--brand   { background: var(--1s1-brand-soft);   color: var(--1s1-brand-active); }
.s1-badge--success { background: var(--1s1-success-soft); color: #047857; }
.s1-badge--warning { background: var(--1s1-warning-soft); color: #b45309; }
.s1-badge--danger  { background: var(--1s1-danger-soft);  color: #b91c1c; }
.s1-badge--info    { background: var(--1s1-info-soft);    color: #1d4ed8; }
.s1-badge--solid   { background: var(--1s1-text); color: var(--1s1-text-on-dark); }

/* Status dot inside a badge */
.s1-badge__dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* =================================================================
   5. FORM CONTROLS
   ================================================================= */

.s1-input,
.s1-select,
.s1-textarea {
    display: block;
    width: 100%;
    padding: 10px 14px;
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-sm);
    line-height: var(--1s1-leading-snug);
    color: var(--1s1-text);
    background: var(--1s1-surface);
    border: 1px solid var(--1s1-border-strong);
    border-radius: var(--1s1-radius-md);
    box-shadow: var(--1s1-shadow-xs);
    transition: border-color var(--1s1-transition-fast), box-shadow var(--1s1-transition-fast);
}
.s1-input::placeholder,
.s1-textarea::placeholder { color: var(--1s1-text-subtle); }

.s1-input:hover,
.s1-select:hover,
.s1-textarea:hover { border-color: var(--1s1-text-muted); }

.s1-input:focus,
.s1-select:focus,
.s1-textarea:focus {
    outline: none;
    border-color: var(--1s1-brand);
    box-shadow: var(--1s1-shadow-focus);
}

.s1-textarea { min-height: 120px; resize: vertical; }

.s1-label {
    display: inline-block;
    margin-bottom: var(--1s1-space-2);
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-medium);
    color: var(--1s1-text);
}
.s1-form-help {
    margin-top: var(--1s1-space-2);
    font-size: var(--1s1-text-xs);
    color: var(--1s1-text-muted);
}
.s1-form-error {
    margin-top: var(--1s1-space-2);
    font-size: var(--1s1-text-xs);
    color: var(--1s1-danger);
}

/* =================================================================
   6. ALERTS
   ================================================================= */

.s1-alert {
    display: flex;
    gap: var(--1s1-space-3);
    align-items: flex-start;
    padding: var(--1s1-space-4) var(--1s1-space-5);
    border-radius: var(--1s1-radius-md);
    border: 1px solid transparent;
    font-size: var(--1s1-text-sm);
    line-height: var(--1s1-leading-normal);
}
.s1-alert--info    { background: var(--1s1-info-soft);    border-color: #bfdbfe; color: #1d4ed8; }
.s1-alert--success { background: var(--1s1-success-soft); border-color: #a7f3d0; color: #047857; }
.s1-alert--warning { background: var(--1s1-warning-soft); border-color: #fcd34d; color: #92400e; }
.s1-alert--danger  { background: var(--1s1-danger-soft);  border-color: #fecaca; color: #b91c1c; }

.s1-alert__icon { flex: 0 0 auto; line-height: 1; padding-top: 2px; }
.s1-alert__body { flex: 1 1 auto; }
.s1-alert__title {
    font-weight: var(--1s1-weight-semibold);
    margin: 0 0 var(--1s1-space-1) 0;
}

/* =================================================================
   7. LINKS
   ================================================================= */

.s1-link {
    color: var(--1s1-text-link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--1s1-transition-fast), border-color var(--1s1-transition-fast);
}
.s1-link:hover {
    color: var(--1s1-text-link-hover);
    border-bottom-color: currentColor;
}

/* =================================================================
   8. LISTS
   ================================================================= */

.s1-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
}
.s1-list-check > li {
    position: relative;
    padding-left: calc(var(--1s1-space-6) + var(--1s1-space-2));
    margin-bottom: var(--1s1-space-3);
    color: var(--1s1-text-muted);
    font-size: var(--1s1-text-md);
    line-height: var(--1s1-leading-normal);
}
.s1-list-check > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--1s1-success-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3.5 8.5 6.5 11.5 12.5 5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

/* =================================================================
   9. DIVIDERS
   ================================================================= */

.s1-divider {
    border: 0;
    border-top: 1px solid var(--1s1-border);
    margin: var(--1s1-space-6) 0;
}
.s1-divider--brand {
    border-top-color: var(--1s1-brand);
    border-top-width: 2px;
    width: 48px;
    margin-left: 0;
}

/* =================================================================
   10. NAVIGATION (top navbar)
   ---------------------------------------------------------------
   Sticky dark navbar with translucent backdrop on scroll.
   Includes a desktop horizontal layout and a mobile drawer.
   The matching markup lives in templates/1SWISS1/header.tpl and
   templates/1SWISS1/includes/navbar.tpl. JS for scroll / drawer /
   active state lives in templates/1SWISS1/js/navbar.js.
   ================================================================= */

.s1-nav {
    position: sticky;
    top: 0;
    z-index: var(--1s1-z-sticky);
    background: var(--1s1-dark);
    transition:
        background-color var(--1s1-transition-base),
        backdrop-filter  var(--1s1-transition-base),
        box-shadow       var(--1s1-transition-base);
}
.s1-nav.is-scrolled {
    background: rgba(34, 34, 34, 0.82);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.s1-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--1s1-space-6);
    max-width: var(--1s1-container-2xl);
    margin: 0 auto;
    padding: 0 var(--1s1-space-6);
    height: 64px;
}

/* Brand / logo */
.s1-nav__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}
.s1-nav__brand img {
    display: block;
    height: 20px;
    width: auto;
}

/* Lists */
.s1-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--1s1-space-1);
}
.s1-nav__list--end {
    margin-left: auto;
    gap: var(--1s1-space-3);
}

.s1-nav__item {
    position: relative;
}

/* Top-level link */
.s1-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--1s1-space-2);
    padding: 8px 14px;
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-medium);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-radius: var(--1s1-radius-md);
    cursor: pointer;
    transition:
        color            var(--1s1-transition-fast),
        background-color var(--1s1-transition-fast);
    white-space: nowrap;
}
.s1-nav__link:hover,
.s1-nav__link:focus-visible {
    color: var(--1s1-text-on-dark);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
    outline: none;
}
.s1-nav__link.is-active {
    color: var(--1s1-text-on-dark);
}
.s1-nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -19px;
    height: 2px;
    background: var(--1s1-brand);
    border-radius: 2px 2px 0 0;
}

.s1-nav__chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    transition: transform var(--1s1-transition-fast);
}
.s1-nav__item--has-dropdown:hover > .s1-nav__link .s1-nav__chevron,
.s1-nav__item--has-dropdown:focus-within > .s1-nav__link .s1-nav__chevron {
    transform: rotate(180deg);
}

.s1-nav__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--1s1-brand);
    color: white;
    font-size: 11px;
    font-weight: var(--1s1-weight-semibold);
    font-variant-numeric: tabular-nums;
    margin-left: var(--1s1-space-1);
}

/* Dropdown panel */
.s1-nav__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: var(--1s1-space-2);
    background: var(--1s1-surface);
    border: 1px solid var(--1s1-border);
    border-radius: var(--1s1-radius-lg);
    box-shadow: var(--1s1-shadow-lg);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        opacity   var(--1s1-transition-base),
        transform var(--1s1-transition-base);
    z-index: 1;
}
/* Invisible bridge that keeps the hover active while the cursor
   travels from the parent link down into the dropdown panel. */
.s1-nav__dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.s1-nav__list--end .s1-nav__dropdown {
    left: auto;
    right: 0;
}
.s1-nav__item--has-dropdown:hover > .s1-nav__dropdown,
.s1-nav__item--has-dropdown:focus-within > .s1-nav__dropdown,
.s1-nav__dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.s1-nav__dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--1s1-space-3);
    padding: 8px 12px;
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-medium);
    color: var(--1s1-text);
    text-decoration: none;
    border-radius: var(--1s1-radius-sm);
    transition:
        color            var(--1s1-transition-fast),
        background-color var(--1s1-transition-fast);
    white-space: nowrap;
}
.s1-nav__dropdown-link:hover,
.s1-nav__dropdown-link:focus-visible {
    background: var(--1s1-brand-soft);
    color: var(--1s1-brand-active);
    text-decoration: none;
    outline: none;
}

.s1-nav__dropdown-bullet {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--1s1-brand);
    flex-shrink: 0;
}

.s1-nav__divider {
    height: 1px;
    margin: 4px 8px;
    background: var(--1s1-border);
    border: 0;
}

/* Cart pill */
.s1-nav__cart {
    display: inline-flex;
    align-items: center;
    gap: var(--1s1-space-2);
    padding: 8px 14px;
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-semibold);
    color: var(--1s1-brand);
    text-decoration: none;
    background: rgba(255, 87, 86, 0.12);
    border-radius: var(--1s1-radius-pill);
    transition: background-color var(--1s1-transition-fast);
}
.s1-nav__cart:hover {
    background: rgba(255, 87, 86, 0.22);
    color: var(--1s1-brand);
    text-decoration: none;
}
.s1-nav__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--1s1-brand);
    color: white;
    font-size: 11px;
    font-weight: var(--1s1-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* Mobile burger button */
.s1-nav__burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--1s1-radius-md);
    background: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    transition: background-color var(--1s1-transition-fast);
}
.s1-nav__burger:hover { background: rgba(255, 255, 255, 0.06); }
.s1-nav__burger svg { width: 22px; height: 22px; }
.s1-nav__burger-close { display: none; }
.s1-nav.is-drawer-open .s1-nav__burger-open { display: none; }
.s1-nav.is-drawer-open .s1-nav__burger-close { display: block; }

/* Mobile drawer (under 1100px) */
@media (max-width: 1100px) {
    .s1-nav__list--primary,
    .s1-nav__list--end {
        display: none;
    }
    .s1-nav__burger { display: inline-flex; }

    .s1-nav.is-drawer-open .s1-nav__list--primary,
    .s1-nav.is-drawer-open .s1-nav__list--end {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--1s1-space-1);
        background: var(--1s1-dark);
        padding: var(--1s1-space-5) var(--1s1-space-6);
        margin: 0;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }
    .s1-nav.is-drawer-open .s1-nav__list--primary { top: 64px; padding-top: var(--1s1-space-5); }
    .s1-nav.is-drawer-open .s1-nav__list--end {
        top: auto;
        bottom: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        max-height: none;
    }

    .s1-nav__link {
        justify-content: space-between;
        padding: 12px 14px;
        font-size: var(--1s1-text-md);
        width: 100%;
    }
    .s1-nav__link.is-active::after { display: none; }
    .s1-nav__link.is-active {
        background: rgba(255, 87, 86, 0.10);
        color: var(--1s1-brand);
    }

    .s1-nav__dropdown {
        position: static;
        margin-top: var(--1s1-space-1);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: none;
        opacity: 0;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        transform: none;
        pointer-events: none;
        transition:
            opacity    var(--1s1-transition-base),
            max-height var(--1s1-transition-base),
            padding    var(--1s1-transition-base);
    }
    .s1-nav__item--has-dropdown:hover > .s1-nav__dropdown,
    .s1-nav__item--has-dropdown:focus-within > .s1-nav__dropdown { opacity: 0; pointer-events: none; }
    .s1-nav__dropdown.is-open {
        opacity: 1;
        max-height: 600px;
        padding: var(--1s1-space-2);
        pointer-events: auto;
    }
    .s1-nav__dropdown-link {
        color: rgba(255, 255, 255, 0.85);
    }
    .s1-nav__dropdown-link:hover,
    .s1-nav__dropdown-link:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: white;
    }
    .s1-nav__divider { background: rgba(255, 255, 255, 0.08); }
}

/* =================================================================
   11. FOOTER (sitewide)
   ---------------------------------------------------------------
   Three-row dark footer matching the navbar:
     1. CTA strip       — big claim + contact CTA
     2. Main grid       — brand column + 3 link columns
     3. Bottom bar      — copyright + legal links + locale switcher
   The matching markup lives in templates/1SWISS1/footer.tpl.
   ================================================================= */

.s1-footer {
    background: var(--1s1-dark);
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--1s1-space-16);
    position: relative;
}

/* --- 1. CTA strip --- */
.s1-footer__cta {
    padding: var(--1s1-space-16) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.s1-footer__cta-inner {
    max-width: var(--1s1-container-xl);
    margin: 0 auto;
    padding: 0 var(--1s1-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--1s1-space-8);
    flex-wrap: wrap;
}
.s1-footer__cta-content { flex: 1 1 auto; min-width: 0; max-width: 700px; }
.s1-footer__cta-title {
    font-size: var(--1s1-text-4xl);
    font-weight: var(--1s1-weight-medium);
    color: white;
    margin: 0 0 var(--1s1-space-3);
    letter-spacing: var(--1s1-tracking-tight);
    line-height: 1.1;
}
.s1-footer__cta-lead {
    font-size: var(--1s1-text-md);
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    line-height: var(--1s1-leading-normal);
}
.s1-footer__cta .s1-btn--primary {
    box-shadow: 0 8px 24px rgba(255, 87, 86, 0.30);
}
.s1-footer__cta .s1-btn--primary:hover {
    box-shadow: 0 12px 32px rgba(255, 87, 86, 0.40);
    transform: translateY(-1px);
}

/* --- 2. Main grid --- */
.s1-footer__main {
    padding: var(--1s1-space-16) 0 var(--1s1-space-12);
}
.s1-footer__main-inner {
    max-width: var(--1s1-container-xl);
    margin: 0 auto;
    padding: 0 var(--1s1-space-6);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--1s1-space-10);
}

.s1-footer__brand-img {
    height: 24px;
    width: auto;
    margin-bottom: var(--1s1-space-4);
}
.s1-footer__tagline {
    font-size: var(--1s1-text-md);
    color: white;
    font-weight: var(--1s1-weight-medium);
    margin: 0 0 var(--1s1-space-3);
    max-width: 280px;
    line-height: var(--1s1-leading-snug);
}
.s1-footer__address {
    font-size: var(--1s1-text-sm);
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 var(--1s1-space-4);
    line-height: var(--1s1-leading-snug);
    max-width: 280px;
}
.s1-footer__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--1s1-space-2);
    color: white;
    text-decoration: none;
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-medium);
    transition: color var(--1s1-transition-fast);
}
.s1-footer__phone:hover { color: var(--1s1-brand); }

.s1-footer__social {
    display: flex;
    gap: var(--1s1-space-2);
    margin-top: var(--1s1-space-5);
    padding: 0;
    list-style: none;
}
.s1-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition:
        background-color var(--1s1-transition-fast),
        color            var(--1s1-transition-fast);
}
.s1-footer__social-link:hover {
    background: var(--1s1-brand);
    color: white;
}

.s1-footer__col-title {
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--1s1-tracking-wide);
    color: var(--1s1-brand);
    margin: 0 0 var(--1s1-space-4);
}
.s1-footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--1s1-space-2);
}
.s1-footer__list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--1s1-text-sm);
    transition: color var(--1s1-transition-fast);
}
.s1-footer__list a:hover { color: white; }

/* --- 3. Bottom bar --- */
.s1-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--1s1-space-5) 0;
}
.s1-footer__bottom-inner {
    max-width: var(--1s1-container-xl);
    margin: 0 auto;
    padding: 0 var(--1s1-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--1s1-space-4);
    flex-wrap: wrap;
    font-size: var(--1s1-text-xs);
    color: rgba(255, 255, 255, 0.5);
}
.s1-footer__legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--1s1-space-4);
}
.s1-footer__legal-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--1s1-transition-fast);
}
.s1-footer__legal-links a:hover { color: white; }

.s1-footer__locale-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--1s1-space-2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: var(--1s1-radius-md);
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-medium);
    cursor: pointer;
    transition:
        background-color var(--1s1-transition-fast),
        border-color     var(--1s1-transition-fast);
}
.s1-footer__locale-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.10);
}
.s1-footer__locale-chevron {
    font-size: 9px;
    opacity: 0.7;
}

@media (max-width: 1100px) {
    .s1-footer__main-inner {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .s1-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .s1-footer__cta-inner { flex-direction: column; align-items: flex-start; }
    .s1-footer__cta-title { font-size: var(--1s1-text-3xl); }
    .s1-footer__main-inner { grid-template-columns: 1fr 1fr; gap: var(--1s1-space-8); }
    .s1-footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 500px) {
    .s1-footer__cta { padding: var(--1s1-space-12) 0; }
    .s1-footer__main { padding: var(--1s1-space-12) 0 var(--1s1-space-8); }
    .s1-footer__main-inner { grid-template-columns: 1fr; }
    .s1-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* =================================================================
   12. LOCALE MODAL (language / currency switcher)
   ================================================================= */

.s1-locale-modal .modal-dialog { max-width: 520px; }
.s1-locale-modal .modal-content {
    background: var(--1s1-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--1s1-radius-xl);
    color: white;
    overflow: hidden;
}
.s1-locale-modal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--1s1-space-5) var(--1s1-space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.s1-locale-modal .modal-title {
    font-size: var(--1s1-text-lg);
    font-weight: var(--1s1-weight-medium);
    color: white;
    margin: 0;
}
.s1-locale-modal .close {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    text-shadow: none;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--1s1-transition-fast);
}
.s1-locale-modal .close:hover { color: white; }

.s1-locale-modal .modal-body { padding: var(--1s1-space-6); }
.s1-locale-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--1s1-space-4) var(--1s1-space-6);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: flex-end;
}
.s1-locale-modal__section-title {
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-semibold);
    color: var(--1s1-brand);
    text-transform: uppercase;
    letter-spacing: var(--1s1-tracking-wide);
    margin: 0 0 var(--1s1-space-3);
}
.s1-locale-modal__section + .s1-locale-modal__section { margin-top: var(--1s1-space-5); }
.s1-locale-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--1s1-space-2);
}
.s1-locale-item {
    display: block;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--1s1-radius-md);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    text-align: center;
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-medium);
    cursor: pointer;
    transition:
        background-color var(--1s1-transition-fast),
        border-color     var(--1s1-transition-fast),
        color            var(--1s1-transition-fast);
}
.s1-locale-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
    text-decoration: none;
}
.s1-locale-item.active {
    background: var(--1s1-brand);
    border-color: var(--1s1-brand);
    color: white;
}

/* =================================================================
   13. AUTH PAGES (login / register / password reset)
   ---------------------------------------------------------------
   Bootstrap-form-friendly: rules below override the .card / .form-*
   / .btn classes WHMCS injects, BUT only when scoped under .s1-auth
   so they don't leak into the rest of the app. The IDs that WHMCS
   JavaScript expects (#inputNewPassword1, #passwordStrengthMeterBar,
   etc.) are preserved.
   ================================================================= */

/* When an auth page is being rendered, hide the WHMCS sidebar that
   normally takes col-lg-3 / col-xl-2 of the row, and let the
   primary-content take 100% so the .s1-auth full-bleed can actually
   span edge to edge without the sidebar floating over it. Modern
   browsers only — :has() ships in Chrome 105+, Safari 15.4+, Firefox 121+. */
body:has(.s1-auth) .col-lg-3,
body:has(.s1-auth) .col-xl-2,
body:has(.s1-auth) .sidebar { display: none !important; }
body:has(.s1-auth) .primary-content,
body:has(.s1-auth) .col-lg-9,
body:has(.s1-auth) .col-xl-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

.s1-auth {
    /* Full-bleed wrapper: dark gradient bg from edge to edge.
       Breaks out of any Bootstrap .container / .row / col padding that
       wraps the template. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: calc(100vh - 64px);
    padding: var(--1s1-space-12) 0;
    background:
        radial-gradient(ellipse 60% 40% at 70% 0%, rgba(255, 87, 86, 0.06), transparent 60%),
        radial-gradient(ellipse 40% 40% at 0% 100%, rgba(255, 87, 86, 0.04), transparent 60%),
        var(--1s1-bg);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Constrained inner container (the actual content lives here) */
.s1-auth__inner {
    width: 100%;
    max-width: var(--1s1-container-xl);
    margin: 0 auto;
    padding: 0 var(--1s1-space-6);
}

/* ---- Split layout (login) ---- */
.s1-auth__inner--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--1s1-space-12);
}
.s1-auth__form-pane,
.s1-auth__brand-pane {
    width: 100%;
}
.s1-auth__form-pane { max-width: 480px; justify-self: end; }
.s1-auth__brand-pane {
    position: relative;
    padding: var(--1s1-space-12);
    border-radius: var(--1s1-radius-2xl);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255, 87, 86, 0.18), transparent 55%),
        linear-gradient(135deg, var(--1s1-dark) 0%, #2a2a2a 100%);
    color: var(--1s1-text-on-dark);
    overflow: hidden;
    isolation: isolate;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.s1-auth__brand-pane::before {
    /* Faint dot grid */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
    pointer-events: none;
    z-index: -1;
}
.s1-auth__brand-pane::after {
    /* Faint Swiss-cross watermark, bottom-right */
    content: '';
    position: absolute;
    bottom: var(--1s1-space-6);
    right: var(--1s1-space-6);
    width: 80px;
    height: 80px;
    background:
        linear-gradient(rgba(255, 87, 86, 0.16), rgba(255, 87, 86, 0.16)) center/100% 30% no-repeat,
        linear-gradient(rgba(255, 87, 86, 0.16), rgba(255, 87, 86, 0.16)) center/30% 100% no-repeat;
    pointer-events: none;
}
.s1-auth__brand-eyebrow {
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-semibold);
    letter-spacing: var(--1s1-tracking-wide);
    text-transform: uppercase;
    color: var(--1s1-brand);
    margin-bottom: var(--1s1-space-3);
}
.s1-auth__brand-title {
    font-size: 44px;
    font-weight: var(--1s1-weight-medium);
    line-height: 1.05;
    letter-spacing: var(--1s1-tracking-tight);
    margin: 0 0 var(--1s1-space-5);
    color: var(--1s1-text-on-dark);
}
.s1-auth__brand-lead {
    font-size: var(--1s1-text-md);
    color: rgba(255, 255, 255, 0.65);
    line-height: var(--1s1-leading-relaxed);
    margin: 0;
    max-width: 380px;
}
.s1-auth__brand-features {
    list-style: none;
    padding: 0;
    margin: var(--1s1-space-8) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--1s1-space-3);
}
.s1-auth__brand-features li {
    display: flex;
    align-items: center;
    gap: var(--1s1-space-3);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--1s1-text-sm);
}
.s1-auth__brand-features i {
    color: var(--1s1-success);
    flex-shrink: 0;
}

/* ---- Centered single-column layout (register, password reset) ---- */
.s1-auth__inner--centered {
    max-width: var(--1s1-container-md);
}
.s1-auth__page-header {
    text-align: center;
    margin-bottom: var(--1s1-space-8);
}
.s1-auth__page-eyebrow {
    display: inline-block;
    font-size: var(--1s1-text-xs);
    font-weight: var(--1s1-weight-semibold);
    letter-spacing: var(--1s1-tracking-wide);
    text-transform: uppercase;
    color: var(--1s1-brand);
    margin-bottom: var(--1s1-space-3);
}
.s1-auth__page-title {
    font-size: var(--1s1-text-4xl);
    font-weight: var(--1s1-weight-medium);
    line-height: 1.1;
    letter-spacing: var(--1s1-tracking-tight);
    color: var(--1s1-text);
    margin: 0 0 var(--1s1-space-3);
}
.s1-auth__page-lead {
    font-size: var(--1s1-text-md);
    color: var(--1s1-text-muted);
    margin: 0;
    line-height: var(--1s1-leading-normal);
}

/* ---- Card overrides (Bootstrap .card → s1-card style) ---- */
.s1-auth .card {
    background: var(--1s1-surface);
    border: 1px solid var(--1s1-border);
    border-radius: var(--1s1-radius-xl);
    box-shadow: var(--1s1-shadow-md);
    overflow: hidden;
    margin-bottom: var(--1s1-space-5);
}
.s1-auth .card-body { padding: var(--1s1-space-8); }
.s1-auth .card-title {
    font-size: var(--1s1-text-xl);
    font-weight: var(--1s1-weight-semibold);
    color: var(--1s1-text);
    margin: 0 0 var(--1s1-space-5);
    padding-bottom: var(--1s1-space-4);
    border-bottom: 1px solid var(--1s1-border);
}
.s1-auth .card-title small,
.s1-auth .card-title i {
    font-size: var(--1s1-text-xs);
    color: var(--1s1-text-muted);
    font-style: normal;
    font-weight: var(--1s1-weight-regular);
    display: block;
    margin-top: var(--1s1-space-1);
}
.s1-auth .card-footer {
    padding: var(--1s1-space-5) var(--1s1-space-8);
    background: var(--1s1-surface-sunken);
    border-top: 1px solid var(--1s1-border);
    font-size: var(--1s1-text-sm);
    color: var(--1s1-text-muted);
}
.s1-auth .card-footer a {
    color: var(--1s1-brand);
    font-weight: var(--1s1-weight-semibold);
    text-decoration: none;
}
.s1-auth .card-footer a:hover { color: var(--1s1-brand-hover); text-decoration: underline; }

/* ---- Form labels ---- */
.s1-auth .form-control-label,
.s1-auth label.field-icon { display: none; }   /* WHMCS field-icon labels are decorative; we use placeholders */
.s1-auth label:not(.field-icon):not(.form-check):not(.form-control-label) {
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-medium);
    color: var(--1s1-text);
    margin-bottom: var(--1s1-space-2);
    display: inline-block;
}

/* ---- Form inputs (Bootstrap .form-control / .field → s1-input style) ---- */
.s1-auth .form-control,
.s1-auth .field,
.s1-auth select.field,
.s1-auth select.form-control {
    width: 100%;
    padding: 11px 14px;
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-md);
    line-height: var(--1s1-leading-snug);
    color: var(--1s1-text);
    background: var(--1s1-surface);
    border: 1px solid var(--1s1-border-strong);
    border-radius: var(--1s1-radius-md);
    box-shadow: var(--1s1-shadow-xs);
    transition:
        border-color var(--1s1-transition-fast),
        box-shadow   var(--1s1-transition-fast);
}
.s1-auth .form-control:hover,
.s1-auth .field:hover { border-color: var(--1s1-text-muted); }
.s1-auth .form-control:focus,
.s1-auth .field:focus,
.s1-auth select.field:focus,
.s1-auth select.form-control:focus {
    outline: 0;
    border-color: var(--1s1-brand);
    box-shadow: var(--1s1-shadow-focus);
}
.s1-auth input[type="text"]::placeholder,
.s1-auth input[type="email"]::placeholder,
.s1-auth input[type="tel"]::placeholder,
.s1-auth input[type="password"]::placeholder { color: var(--1s1-text-subtle); }

/* ---- Form group spacing ---- */
.s1-auth .form-group {
    margin-bottom: var(--1s1-space-4);
    position: relative;
}
.s1-auth .form-group.prepend-icon { padding-left: 0; }
.s1-auth .form-group.prepend-icon .field-icon {
    /* Re-show the icon ONLY when the form-group requested it */
    display: none;
}

/* ---- Bootstrap input-group (login.tpl uses input-group-merge) ---- */
.s1-auth .input-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: 100%;
    background: var(--1s1-surface);
    border: 1px solid var(--1s1-border-strong);
    border-radius: var(--1s1-radius-md);
    box-shadow: var(--1s1-shadow-xs);
    overflow: hidden;
    transition:
        border-color var(--1s1-transition-fast),
        box-shadow   var(--1s1-transition-fast);
}
.s1-auth .input-group:focus-within {
    border-color: var(--1s1-brand);
    box-shadow: var(--1s1-shadow-focus);
}
.s1-auth .input-group .form-control,
.s1-auth .input-group .field {
    flex: 1 1 auto;
    min-width: 0;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 11px 4px 11px 0;
    background: transparent;
}
.s1-auth .input-group .form-control:focus,
.s1-auth .input-group .field:focus { box-shadow: none !important; }
.s1-auth .input-group-prepend,
.s1-auth .input-group-append {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
}
.s1-auth .input-group-text {
    padding: 0 12px;
    height: 100%;
    color: var(--1s1-text-subtle);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: var(--1s1-text-md);
    display: inline-flex;
    align-items: center;
}
.s1-auth .btn-reveal-pw {
    background: transparent;
    border: 0;
    padding: 0 var(--1s1-space-4);
    color: var(--1s1-text-subtle);
    cursor: pointer;
    transition: color var(--1s1-transition-fast);
}
.s1-auth .btn-reveal-pw:hover { color: var(--1s1-text); }

/* ---- Buttons (Bootstrap .btn-primary → s1-btn--primary) ---- */
.s1-auth .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--1s1-space-2);
    padding: 12px 22px;
    font-family: var(--1s1-font-sans);
    font-size: var(--1s1-text-sm);
    font-weight: var(--1s1-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--1s1-radius-md);
    cursor: pointer;
    transition:
        background-color var(--1s1-transition-fast),
        color            var(--1s1-transition-fast),
        box-shadow       var(--1s1-transition-fast),
        transform        var(--1s1-transition-fast);
    white-space: nowrap;
}
.s1-auth .btn-primary {
    background: var(--1s1-brand);
    color: var(--1s1-brand-on);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(255, 87, 86, 0.30);
}
.s1-auth .btn-primary:hover {
    background: var(--1s1-brand-hover);
    color: var(--1s1-brand-on);
    box-shadow: 0 12px 32px rgba(255, 87, 86, 0.40);
    transform: translateY(-1px);
}
.s1-auth .btn-default {
    background: var(--1s1-surface);
    color: var(--1s1-text);
    border-color: var(--1s1-border-strong);
}
.s1-auth .btn-default:hover {
    background: var(--1s1-surface-sunken);
    border-color: var(--1s1-text-muted);
}
.s1-auth .btn-lg { padding: 14px 28px; font-size: var(--1s1-text-md); }

/* ---- Remember-me + checkbox helpers ---- */
.s1-auth input[type="checkbox"].form-check-input { margin-right: 6px; }
.s1-auth .form-check input[type="checkbox"] { margin-right: var(--1s1-space-2); }

/* ---- Password strength meter ---- */
.s1-auth .password-strength-meter .progress {
    height: 6px;
    background: var(--1s1-surface-sunken);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: var(--1s1-space-2);
}
.s1-auth .password-strength-meter .progress-bar {
    background: var(--1s1-success);
    transition: width var(--1s1-transition-base), background-color var(--1s1-transition-fast);
}

/* ---- Field help text ---- */
.s1-auth .field-help-text {
    display: block;
    font-size: var(--1s1-text-xs);
    color: var(--1s1-text-muted);
    margin-top: var(--1s1-space-1);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .s1-auth__inner--split {
        grid-template-columns: 1fr;
        gap: var(--1s1-space-8);
    }
    .s1-auth__form-pane { justify-self: stretch; max-width: 540px; margin: 0 auto; }
    .s1-auth__brand-pane { display: none; }
}
@media (max-width: 700px) {
    .s1-auth { padding: var(--1s1-space-8) 0; }
    .s1-auth .card-body { padding: var(--1s1-space-6); }
    .s1-auth__page-title { font-size: var(--1s1-text-3xl); }
}

/* =================================================================
   14. UTILITIES (small, opt-in)
   ================================================================= */

.s1-text-on-dark { color: var(--1s1-text-on-dark); }

.s1-stack > * + *  { margin-top: var(--1s1-space-4); }
.s1-stack-sm > * + * { margin-top: var(--1s1-space-2); }
.s1-stack-lg > * + * { margin-top: var(--1s1-space-6); }

.s1-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--1s1-space-3);
    align-items: center;
}

.s1-grid {
    display: grid;
    gap: var(--1s1-space-6);
}
.s1-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s1-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s1-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 992px) {
    .s1-grid--3,
    .s1-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .s1-grid--2,
    .s1-grid--3,
    .s1-grid--4 { grid-template-columns: minmax(0, 1fr); }
}