/*!
 * ============================================================================
 *  CirkleHost — Soft Modern redesign layer for Lagom 2
 * ============================================================================
 *  Loaded by templates/lagom2/includes/head.tpl AFTER theme.css on every page
 *  (front-end, CMS pages and the order form). It only retunes Lagom's own
 *  design tokens + a handful of scoped component styles — no structural
 *  changes. Delete this file to instantly revert to stock Lagom.
 *
 *  Sections
 *   1. Design tokens (:root)               6. Cards / panels / lists
 *   2. Dark-mode token nudges              7. Home tiles + sections
 *   3. Base / typography                   8. Pricing tables
 *   4. Buttons                             9. Footer
 *   5. Forms & inputs                     10. Order form cohesion
 *      5b. Navbar                         11. Misc polish
 * ============================================================================ */

/* ---------------------------------------------------------------------------
 * 0. ADMIN-CONTROLLED VARIABLES  (--ch-*)
 * ---------------------------------------------------------------------------
 *  These are the knobs the "CirkleHost Theme Customizer" addon module
 *  (modules/addons/cirkletheme) can override at runtime. It injects a single
 *  <style id="ch-theme-overrides">:root{ --ch-...: <value>; }</style> into
 *  every page head (ClientAreaHeadOutput hook) for ONLY the values an admin
 *  changed. Everything below consumes `var(--ch-x, <fallback>)`, so the site
 *  looks identical whether or not the module is active.
 * ------------------------------------------------------------------------- */
:root {
    /* Global */
    --ch-primary:        #1566ff;
    --ch-secondary:      #4338ca;
    --ch-accent:         #38bdf8;   /* cyber blue */
    --ch-accent-2:       #8b5cf6;   /* subtle purple/magenta */
    --ch-bg:             #edf3fc;
    --ch-surface:        rgba(255, 255, 255, 0.82);
    --ch-text:           #0f1729;
    --ch-text-muted:     #9aa4b2;
    --ch-border:         rgba(124, 58, 237, 0.12);

    /* Header */
    --ch-header-bg:      #0b0e15;
    --ch-header-text:    #c9d1de;
    --ch-header-link:    #c9d1de;
    --ch-header-hover:   #ffffff;
    --ch-header-border:  rgba(139, 92, 246, 0.22);

    /* Footer */
    --ch-footer-bg:      #0b0e15;
    --ch-footer-text:    #8b95a6;
    --ch-footer-heading: #e6eaf1;
    --ch-footer-link:    #aab3c2;
    --ch-footer-hover:   #38bdf8;
    --ch-footer-border:  rgba(56, 189, 248, 0.22);

    /* Derived / extended global */
    --ch-primary-hover:  var(--ch-secondary, #4338ca);
    --ch-body-bg:        var(--ch-bg, #edf3fc);
    --ch-body-text:      var(--ch-text, #0f1729);

    /* Sidebar (client area) */
    --ch-sidebar-bg:      #0f1420;
    --ch-sidebar-text:    #c9d1de;
    --ch-sidebar-link:    #aab3c2;
    --ch-sidebar-hover:   #ffffff;
    --ch-sidebar-active:  rgba(56, 189, 248, 0.14);
    --ch-sidebar-border:  rgba(255, 255, 255, 0.07);
    --ch-sidebar-heading: #e6eaf1;

    /* Forms / inputs */
    --ch-input-bg:      #ffffff;
    --ch-input-text:    var(--ch-text, #0f1729);
    --ch-input-border:  var(--gray-lighter-3, #dfe3ea);
    --ch-input-focus:   var(--ch-primary, #1566ff);

    /* Header buttons (Register / Login in the nav) */
    --ch-header-btn:        var(--ch-accent, #38bdf8);
    --ch-header-btn-hover:  var(--ch-header-hover, #ffffff);
    /* dark chip behind the (white) logo — used by light-header presets */
    --ch-logo-chip:        transparent;

    /* Shape + elevation (presets swap these) */
    --ch-radius-btn:   999px;
    --ch-radius-card:  14px;
    --ch-radius-input: 10px;
    --ch-shadow-sm:  0 1px 2px rgba(15, 23, 41, 0.06), 0 4px 12px rgba(15, 23, 41, 0.06);
    --ch-shadow-md:  0 1px 2px rgba(15, 23, 41, 0.06), 0 8px 24px rgba(15, 23, 41, 0.08);
    --ch-shadow-lg:  0 2px 6px rgba(15, 23, 41, 0.08), 0 18px 40px rgba(15, 23, 41, 0.10);

    /* Typography (preset chooses the face; fallback keeps the stack) */
    --ch-font: "Plus Jakarta Sans", "Noto Sans Bengali", Roboto, system-ui,
               -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

    /* Effects — the module swaps these whole values (or a flat gradient) */
    --ch-bg-effect:  radial-gradient(900px 620px at 10% -6%,  rgba(232, 74, 240, 0.11), transparent 60%),
                     radial-gradient(1000px 700px at 102% 6%, rgba(34, 211, 238, 0.11), transparent 55%),
                     radial-gradient(1200px 820px at 50% 118%, rgba(124, 58, 237, 0.10), transparent 60%),
                     linear-gradient(rgba(124, 58, 237, 0.045) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(124, 58, 237, 0.045) 1px, transparent 1px),
                     linear-gradient(180deg, #f4f2fd 0%, #edf3fc 55%, #f1eefc 100%);
    --ch-card-glow:  0 1px 2px rgba(15, 23, 41, 0.05),
                     0 12px 30px rgba(124, 58, 237, 0.08),
                     0 6px 18px rgba(34, 211, 238, 0.06);
    --ch-card-glow-hover: 0 2px 6px rgba(15, 23, 41, 0.06),
                     0 20px 44px rgba(124, 58, 237, 0.14),
                     0 10px 26px rgba(34, 211, 238, 0.10);
}

/* ---------------------------------------------------------------------------
 * 0b. WIRE THE EXTENDED --ch-* VARS INTO LAGOM
 * ------------------------------------------------------------------------- */
:root {
    --font-family-base:  var(--ch-font);
    --input-bg:          var(--ch-input-bg);
    --input-color:       var(--ch-input-text);
    --input-border-color: var(--ch-input-border);
}
/* white logo stays readable on any header colour */
.app-nav .logo,
.app-nav-header .logo {
    background: var(--ch-logo-chip, transparent);
    border-radius: 10px;
    padding: 2px 8px;
}
/* header nav buttons (Register / Login) */
.app-nav .btn-primary,
.app-nav-menu .btn-primary {
    background: var(--ch-header-btn, var(--ch-accent)) !important;
    background-image: none !important;
    color: #061018 !important;
    border-color: transparent !important;
}
.app-nav .btn-primary:hover,
.app-nav-menu .btn-primary:hover { filter: brightness(1.08); }

/* client-area sidebar */
.main-sidebar,
.app-nav-primary,
.app-nav-secondary,
.main-body-sidebar-primary,
.main-body-sidebar-secondary {
    background: var(--ch-sidebar-bg, #0f1420) !important;
    color: var(--ch-sidebar-text, #c9d1de);
    border-color: var(--ch-sidebar-border, rgba(255,255,255,0.07));
}
.main-sidebar a,
.main-sidebar .nav-link,
.app-nav-primary a,
.app-nav-secondary a {
    color: var(--ch-sidebar-link, #aab3c2) !important;
}
.main-sidebar a:hover,
.main-sidebar .nav-link:hover,
.main-sidebar .nav-link.active,
.app-nav-primary a:hover,
.app-nav-secondary a:hover {
    color: var(--ch-sidebar-hover, #fff) !important;
    background-color: var(--ch-sidebar-active, rgba(56,189,248,0.14)) !important;
}
.main-sidebar .sidebar-title,
.main-sidebar h3,
.main-sidebar h4 { color: var(--ch-sidebar-heading, #e6eaf1) !important; }

/* ---------------------------------------------------------------------------
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------------- */
:root {

    /* ---- Brand: stays blue, cleaner ramp + indigo-tinted gradient -------- */
    --brand-primary:               var(--ch-primary, #1566ff);
    --brand-primary-lighter:       #4f8bff;
    --brand-primary-lighter-2:     #b9d1ff;
    --brand-primary-lighter-3:     #dbe8ff;
    --brand-primary-lighter-4:     #eef4ff;
    --brand-primary-darker:        #0b46c9;
    --brand-primary-gradient-start:#1566ff;
    --brand-primary-gradient-end:  #5a7bff;

    --brand-secondary:             var(--ch-secondary, #4338ca);
    --brand-secondary-lighter:     #7b74dd;
    --brand-secondary-darker:      #312a9c;
    --brand-secondary-gradient-start: #312a9c;
    --brand-secondary-gradient-end:   #4f46e5;

    --brand-info:                  #1566ff;
    --brand-info-lighter:          #4f8bff;
    --brand-info-darker:           #0b46c9;
    --brand-info-gradient-start:   #0b46c9;
    --brand-info-gradient-end:     #1566ff;

    --brand-success:               #16a34a;
    --brand-success-darker:        #128040;
    --brand-warning:               #f59e0b;
    --brand-warning-darker:        #d98207;
    --brand-danger:                #e11d48;
    --brand-danger-darker:         #be123c;

    /* ---- Neutrals: cooler, higher contrast headings --------------------- */
    --gray-base:                   #55606f;
    --gray-lighter:                var(--ch-text-muted, #9aa4b2);
    --gray-lighter-2:              #c2c9d3;
    --gray-lighter-3:              #dfe3ea;
    --gray-lighter-4:              #eef1f6;
    --gray-faded:                  #f6f8fb;
    --gray-darker:                 var(--ch-text, #0f1729);

    /* ---- Surface ------------------------------------------------------- */
    --body-bg:                     #eef1fb;   /* fallback; real bg is on <body> below */

    /* ---- Cyberpunk accent glows (light, subtle) ---------------------- */
    --cy-magenta:                  232, 74, 240;   /* rgb triplets for rgba() */
    --cy-cyan:                     34, 211, 238;
    --cy-violet:                   124, 58, 237;
    --cy-grid:                     rgba(124, 58, 237, 0.045);

    /* ---- Icons / illustrations track the new blue -------------------- */
    --gray-icons-hover:            var(--brand-primary);
    --svg-illustration-color-1:    #1566ff;
    --svg-illustration-color-2:    #4f8bff;
    --svg-illustration-color-3:    #7ba7ff;
    --svg-illustration-color-4:    #9cbcff;
    --svg-illustration-color-5:    #bcd2ff;
    --svg-illustration-color-6:    #dbe8ff;
    --svg-banner-shape-left:       var(--brand-primary-lighter);
    --svg-banner-shape-right:      var(--brand-primary);

    /* ---- Radius: friendlier, more contemporary ---------------------- */
    --border-radius-xs:            5px;
    --border-radius-sm:            7px;
    --border-radius-base:          var(--ch-radius-input, 10px);
    --border-radius-lg:            var(--ch-radius-card, 14px);
    --border-radius-xlg:           20px;

    /* ---- Elevation: soft, layered — replaces most hard borders ------ */
    --box-shadow-xs:   0 1px 2px rgba(15, 23, 41, 0.06);
    --box-shadow-sm:   0 1px 2px rgba(15, 23, 41, 0.06), 0 4px 12px rgba(15, 23, 41, 0.06);
    --box-shadow-base: 0 1px 2px rgba(15, 23, 41, 0.06), 0 8px 24px rgba(15, 23, 41, 0.08);
    --box-shadow-lg:   0 2px 6px rgba(15, 23, 41, 0.08), 0 18px 40px rgba(15, 23, 41, 0.10);
    --box-shadow-xlg:  0 8px 20px rgba(15, 23, 41, 0.10), 0 32px 64px rgba(15, 23, 41, 0.16);

    /* ---- Buttons: rounder ----------------------------------------- */
    --btn-xs-border-radius:   var(--ch-radius-btn, 999px);
    --btn-sm-border-radius:   var(--ch-radius-btn, 999px);
    --btn-base-border-radius: var(--ch-radius-btn, 999px);
    --btn-lg-border-radius:   var(--ch-radius-btn, 999px);
    --btn-box-shadow:         0 6px 16px rgba(21, 102, 255, 0.16);

    /* ---- Navbar: DARK cyberpunk (white logo needs a dark ground) ----- */
    --app-nav-top-bg:            var(--ch-header-bg, #0b0e15);
    --app-nav-navbar-bg:         var(--ch-header-bg, #0b0e15);
    --app-nav-top-border-bottom: 1px solid var(--ch-header-border, rgba(139, 92, 246, 0.22));
    --app-nav-top-box-shadow:    0 1px 0 rgba(56, 189, 248, 0.12), 0 10px 30px rgba(0, 0, 0, 0.38);
    --app-nav-top-menu-link-color:        var(--ch-header-link, #c9d1de);
    --app-nav-top-menu-link-hover-color:  var(--ch-header-hover, #ffffff);
    --app-nav-top-menu-icon-color:        #8b93a3;
    --app-nav-top-menu-icon-hover-color:  #38bdf8;
    --app-nav-left-link-color:            var(--ch-header-link, #c9d1de);
    --app-nav-left-link-hover-color:      var(--ch-header-hover, #ffffff);
    --app-nav-left-icon-color:            #8b93a3;
    --app-nav-left-icon-hover-color:      #38bdf8;
    --mob-app-nav-header-bg:              var(--ch-header-bg, #0b0e15);
    --mob-app-nav-header-border-bottom:   1px solid var(--ch-header-border, rgba(139, 92, 246, 0.20));

    /* ---- Panels / cards: faint glass so the neon bg glows through -- */
    --panel-bg:            rgba(255, 255, 255, 0.82);
    --panel-border:        1px solid rgba(124, 58, 237, 0.10);
    --panel-border-radius: var(--border-radius-lg);
    --panel-box-shadow:    var(--box-shadow-sm);

    /* card tokens inherit from panel in Lagom, keep them aligned */
    --card-bg:             rgba(255, 255, 255, 0.82);

    /* ---- Client-area (sidebar layout): no white slabs -- */
    --main-body-sidebar-content-bg: transparent;
    --app-nav-left-bg:              var(--ch-header-bg, #0b0e15);
    --dropdown-bg:                  rgba(255, 255, 255, 0.90);
    --modal-content-bg:             rgba(255, 255, 255, 0.94);
}

/* ---------------------------------------------------------------------------
 * 2. DARK-MODE TOKEN NUDGES  (Lagom maps dark mode to the "futuristic" style;
 *    keep the accent consistent and lift contrast a little)
 * ------------------------------------------------------------------------- */
:root[data-theme="dark"],
[data-theme="dark"] :root,
.dark-mode,
body.dark-mode {
    --brand-primary:                #4f8bff;
    --brand-primary-gradient-start: #3b7bff;
    --brand-primary-gradient-end:   #6b8bff;
    --box-shadow-base: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45);
    --box-shadow-lg:   0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
 * 3. BASE / TYPOGRAPHY  +  LIGHT-CYBERPUNK BACKGROUND
 *    A subtle magenta / cyan / violet glow field over a faint tech grid on a
 *    light violet-tinted ground. Fixed to the viewport so it reads as one
 *    continuous surface behind header, body and footer — never plain white.
 * ------------------------------------------------------------------------- */
body {
    letter-spacing: -0.005em;
    background-color: var(--ch-bg, var(--body-bg));
    background-image: var(--ch-bg-effect);
    background-size: auto, auto, auto, 46px 46px, 46px 46px, auto;
    background-position: center;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-attachment: fixed;
}

.section-title,
h2.section-title {
    font-weight: 800;
    letter-spacing: -0.02em;
}

a {
    transition: color .15s ease;
}

/* Selection colour — cyberpunk magenta */
::selection { background: rgba(232, 74, 240, 0.22); }

/* ---------------------------------------------------------------------------
 * 3b. DARK CYBERPUNK HEADER + FOOTER
 *     The CirkleHost logo is a light/silver mark — on white it washes out, on
 *     near-black it reads crisply. So the header (desktop bar + mobile bar +
 *     slide-out drawer + its dropdowns) and the footer all get a charcoal
 *     ground with restrained cyber-blue / violet accents. Cards / body stay
 *     on the light glow field from section 3.
 * ------------------------------------------------------------------------- */

/* --- header surfaces (driven by --ch-header-bg) --- */
.app-nav,
.app-nav-menu,
.app-nav-navbar,
.navbar.app-nav-navbar,
.app-nav-header,
.app-nav-menu .app-nav-default,
.app-nav-menu .app-nav-primary,
.app-nav-menu .app-nav-secondary {
    background-color: var(--ch-header-bg, #0b0e15) !important;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--ch-header-bg, #0b0e15) 92%, #ffffff) 0%, var(--ch-header-bg, #0b0e15) 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.app-nav {
    border-bottom: 1px solid var(--ch-header-border, rgba(139, 92, 246, 0.22));
    box-shadow: 0 1px 0 rgba(56, 189, 248, 0.12), 0 10px 30px rgba(0, 0, 0, 0.38);
}
.app-nav-header {
    border-bottom: 1px solid var(--ch-header-border, rgba(139, 92, 246, 0.20));
}

/* --- footer surface (driven by --ch-footer-bg) --- */
.main-footer {
    background-color: var(--ch-footer-bg, #0b0e15) !important;
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--ch-footer-bg, #0b0e15) 92%, #ffffff) 0%, var(--ch-footer-bg, #0b0e15) 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top: 1px solid var(--ch-footer-border, rgba(56, 189, 248, 0.22));
    color: var(--ch-footer-text, #93a0b4);
}

/* --- header nav: light text, clean hovers, no glow --- */
.app-nav a,
.app-nav .nav-link,
.app-nav-menu a,
.app-nav-menu .nav-link,
.app-nav-navbar a,
.app-nav-navbar .nav-link {
    color: var(--ch-header-link, #c9d1de) !important;
}
.app-nav a:hover,
.app-nav .nav-link:hover,
.app-nav-menu a:hover,
.app-nav-menu .nav-link:hover,
.app-nav-navbar a:hover,
.app-nav-navbar .nav-link:hover,
.app-nav .nav-link.active,
.app-nav-menu .nav-link.active {
    color: var(--ch-header-hover, #ffffff) !important;
    background-color: color-mix(in srgb, var(--ch-accent, #38bdf8) 12%, transparent) !important;
}
.app-nav .nav-link i,
.app-nav .nav-link .lm,
.app-nav-menu .nav-link i,
.app-nav .svg-icon,
.app-nav-navbar .nav-link i {
    color: #8b93a3 !important;
    fill: #8b93a3 !important;
}
.app-nav .nav-link:hover i,
.app-nav-menu .nav-link:hover i,
.app-nav .nav-link:hover .svg-icon {
    color: #38bdf8 !important;
    fill: #38bdf8 !important;
}
/* hamburger / toggler bars */
.app-nav-toggle span,
.app-nav-toggle span:before,
.app-nav-toggle span:after,
.app-nav-header .app-nav-toggle span,
.navbar-toggler-icon {
    background-color: #c9d1de !important;
}

/* --- header + footer dropdowns → dark to match --- */
.app-nav .dropdown-menu,
.app-nav-menu .dropdown-menu,
.main-footer .dropdown-menu {
    background-color: #11151f !important;
    background-image: none !important;
    border: 1px solid rgba(56, 189, 248, 0.16) !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.app-nav .dropdown-menu a,
.app-nav .dropdown-menu .dropdown-item,
.app-nav-menu .dropdown-menu a,
.main-footer .dropdown-menu a,
.main-footer .dropdown-menu .dropdown-item {
    color: #c9d1de !important;
}
.app-nav .dropdown-menu a:hover,
.app-nav .dropdown-menu .dropdown-item:hover,
.app-nav-menu .dropdown-menu a:hover,
.main-footer .dropdown-menu a:hover,
.main-footer .dropdown-menu .dropdown-item:hover {
    background-color: rgba(56, 189, 248, 0.12) !important;
    color: #ffffff !important;
}
.app-nav .dropdown-menu .dropdown-header,
.app-nav .dropdown-divider,
.main-footer .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #7b8494 !important;
}

/* panels / cards / tiles / packages: faint glass + soft dual neon glow */
.panel,
.card,
.tile.tile-home,
.packages .package,
.package,
.list-group-item-link:hover,
.dropdown-menu {
    background-color: var(--ch-surface, rgba(255, 255, 255, 0.82));
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid var(--ch-border, rgba(124, 58, 237, 0.12));
    box-shadow: var(--ch-card-glow);
}

/* hover lift keeps the neon, just stronger */
.tile.tile-home:hover,
.packages .package:hover,
.package:hover,
.panel:hover {
    box-shadow: var(--ch-card-glow-hover);
}

/* section dividers get a faint neon line instead of grey */
.section + .section,
.main-body .section-header {
    border-color: rgba(124, 58, 237, 0.12);
}

/* client-area / order-form content wells shouldn't be flat white either */
.app-body,
.main-body,
.content-inner,
.clientarea-body {
    background: transparent;
}

/* ---------------------------------------------------------------------------
 * 4. BUTTONS
 * ------------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: transform .14s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

.btn-primary,
.btn-primary:focus {
    background-image: linear-gradient(135deg, var(--brand-primary-gradient-start) 0%, var(--brand-primary-gradient-end) 100%);
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(21, 102, 255, 0.22);
}
.btn-primary:hover {
    background-image: linear-gradient(135deg, var(--brand-primary-darker) 0%, var(--brand-primary) 100%);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(21, 102, 255, 0.30);
}
.btn-primary:active { transform: translateY(0); }

.btn-lg {
    padding-left: 1.9em;
    padding-right: 1.9em;
}

.btn-secondary:hover,
.btn-default:hover {
    transform: translateY(-1px);
}

/* Faded / ghost buttons get the rounded treatment automatically via tokens */
.btn-primary-faded {
    background-color: var(--brand-primary-lighter-4);
    color: var(--brand-primary-darker);
    border-color: transparent;
}
.btn-primary-faded:hover {
    background-color: var(--brand-primary-lighter-3);
    color: var(--brand-primary-darker);
}

/* ---------------------------------------------------------------------------
 * 5. FORMS & INPUTS
 * ------------------------------------------------------------------------- */
.form-control,
.input-group .form-control,
select.form-control {
    border-radius: var(--border-radius-base);
    border-color: var(--gray-lighter-3);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px rgba(21, 102, 255, 0.14);
}

/* Homepage / domain-checker combined search box.
   ---------------------------------------------------------------------------
   DESKTOP (>=768px): unchanged — Lagom's inline pill bar, we only round the
   outer container + square the inner joins so the pieces sit flush.
   MOBILE  (<768px):  a clean stacked layout — input, then Transfer, then
   Search, each a full-width rounded control with even spacing. No pill
   padding, no clipping, no overflow. */
.search-group.search-group-combined,
.domain-search-input.search-group-combined {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
}
.search-group-combined .form-control,
.search-group-combined .btn,
.search-group-combined .btn-lg {
    border-radius: var(--border-radius-base);
}
@media (min-width: 768px) {
    /* desktop: horizontal bar — square inner joins, round only the outer ends */
    .search-group-combined .form-control,
    .search-group-combined .btn {
        border-radius: 0;
    }
    .search-group-combined > :first-child .form-control,
    .search-group-combined > :first-child {
        border-top-left-radius: var(--border-radius-base);
        border-bottom-left-radius: var(--border-radius-base);
    }
    .search-group-combined .search-group-btn > :last-child {
        border-top-right-radius: var(--border-radius-base);
        border-bottom-right-radius: var(--border-radius-base);
    }
}
@media (max-width: 767.98px) {
    /* container becomes a plain transparent stack wrapper */
    .domain-search-input.search-group-combined,
    .search-group.search-group-combined {
        display: flex !important;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        align-items: stretch;
    }
    .search-group-combined > * { min-width: 0 !important; }

    .search-group-combined .search-field {
        width: 100%;
        margin: 0 !important;
    }
    .search-group-combined .search-field .form-control,
    .search-group-combined .form-control-lg {
        width: 100%;
        height: 52px;
        border-radius: 12px !important;
        background: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 8px 24px rgba(15, 23, 41, 0.14) !important;
    }
    .search-group-combined .search-field-lg .search-field-icon {
        top: 17px;
    }

    .search-group-combined .search-group-btn {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0 !important;
    }
    .search-group-combined .search-group-btn .btn {
        width: 100%;
        min-width: 0 !important;
        height: 50px;
        margin: 0 !important;
        border-radius: 12px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------------
 * 5b. NAVBAR
 * ------------------------------------------------------------------------- */
.app-nav-top,
.navbar.app-nav-navbar,
header .app-nav-top {
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

.app-nav-top .nav-link,
.app-nav-top-menu .nav-link {
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.app-nav-top .nav-link:hover,
.app-nav-top-menu .nav-link:hover {
    background-color: var(--brand-primary-lighter-4);
}

/* ---------------------------------------------------------------------------
 * 6. CARDS / PANELS / LIST GROUPS
 * ------------------------------------------------------------------------- */
.panel,
.card {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray-lighter-4);
    box-shadow: var(--box-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.list-group-item {
    border-color: var(--gray-lighter-4);
}
.list-group-item-link {
    border-radius: var(--border-radius-base);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.list-group-item-link:hover {
    background-color: #fff;
    box-shadow: var(--box-shadow-sm);
    transform: translateY(-1px);
}

/* Alerts a touch softer */
.alert {
    border-radius: var(--border-radius-base);
}

/* ---------------------------------------------------------------------------
 * 7. HOME BANNER + TILES + SECTIONS
 * ------------------------------------------------------------------------- */
.main-banner.banner-home,
.main-banner {
    background-image:
        radial-gradient(820px 420px at 6% -14%,  rgba(232, 74, 240, 0.26), transparent 62%),
        radial-gradient(820px 440px at 102% -8%, rgba(34, 211, 238, 0.22), transparent 60%),
        radial-gradient(1000px 480px at 62% 124%, rgba(124, 58, 237, 0.26), transparent 64%),
        linear-gradient(135deg, var(--brand-primary-darker) 0%, var(--brand-primary) 55%, var(--brand-primary-lighter) 100%);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    box-shadow: 0 24px 60px rgba(76, 29, 149, 0.24);
}
.banner-home .banner-title,
.main-banner .banner-title {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Home "how can we help" tiles → lifted cards */
.tile.tile-home {
    background: #fff;
    border: 1px solid var(--gray-lighter-4);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile.tile-home:hover {
    transform: translateY(-4px);
    border-color: var(--brand-primary-lighter-2);
    box-shadow: var(--box-shadow-lg);
}
.tile.tile-home .tile-icon i,
.tile.tile-home .tile-icon svg {
    transition: transform .18s ease;
}
.tile.tile-home:hover .tile-icon i,
.tile.tile-home:hover .tile-icon svg {
    transform: scale(1.08);
}

.section .section-header {
    margin-bottom: var(--spacing-4x);
}

/* ---------------------------------------------------------------------------
 * 8. PRICING TABLES  (cart.php product lists, store)
 * ------------------------------------------------------------------------- */
.packages .package,
.package {
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--gray-lighter-4);
    box-shadow: var(--box-shadow-sm);
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.packages .package:hover,
.package:hover {
    transform: translateY(-4px);
    box-shadow: var(--box-shadow-lg);
    border-color: var(--brand-primary-lighter-2);
}
.package.package-featured,
.package.featured,
.package--featured {
    border-color: var(--brand-primary);
    box-shadow: 0 18px 44px rgba(21, 102, 255, 0.18);
}

/* ---------------------------------------------------------------------------
 * 9. FOOTER  (Lagom markup: .main-footer / .footer-bottom / .footer-top)
 *    Dark surface is set in section 3b; here: text + link colours + spacing.
 * ------------------------------------------------------------------------- */
.main-footer .footer-top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.main-footer .footer-bottom {
    padding-top: var(--spacing-3x);
    padding-bottom: var(--spacing-3x);
}
.main-footer,
.main-footer p,
.main-footer .footer-company-desc {
    color: var(--ch-footer-text, #8b95a6);
}
.main-footer .footer-copyright {
    color: var(--ch-footer-text, #798294);
    font-size: 0.9em;
}
.main-footer a,
.main-footer .footer-nav a,
.main-footer .footer-nav .nav-link {
    color: var(--ch-footer-link, #aab3c2);
    transition: color .15s ease;
}
.main-footer a:hover,
.main-footer .footer-nav a:hover,
.main-footer .footer-nav .nav-link:hover,
.main-footer .footer-title:hover {
    color: var(--ch-footer-hover, #38bdf8);
}
.main-footer .footer-title {
    color: var(--ch-footer-heading, #e6eaf1);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.main-footer .footer-title .footer-icon svg path {
    fill: #8b95a6;
}
.main-footer .footer-company-socials a {
    color: #aab3c2;
}
.main-footer hr,
.main-footer .footer-nav + .footer-nav {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ---------------------------------------------------------------------------
 * 10. ORDER FORM COHESION  (templates/orderforms/* — same theme.css + this)
 * ------------------------------------------------------------------------- */
.order-summary,
.summary-container,
#order-summary,
.cart-summary {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
}
.order-nav .nav-link,
.checkout-steps .step {
    border-radius: 999px;
}
.product-group .product,
.cart-products .product {
    border-radius: var(--border-radius-lg);
}

/* ---------------------------------------------------------------------------
 * 11. MISC POLISH
 * ------------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.dropdown-menu {
    border-radius: var(--border-radius-base);
    border: 1px solid var(--gray-lighter-4);
    box-shadow: var(--box-shadow-lg);
}

.modal-content {
    border-radius: var(--border-radius-lg);
    border: none;
    box-shadow: var(--box-shadow-xlg);
}

.pagination .page-link {
    border-radius: var(--border-radius-sm) !important;
    margin: 0 2px;
    border-color: var(--gray-lighter-4);
}

hr { border-top-color: var(--gray-lighter-4); }

/* Tables inside panels */
.table thead th {
    border-bottom: 2px solid var(--gray-lighter-4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82em;
    color: var(--gray-lighter);
}

/* Progress + loaders take the brand */
.progress-bar { background-color: var(--brand-primary); }