/* ==========================================================================
   Blaze Host — CYAN ACCENT LAYER

   The palette was black + metallic gold + metallic silver, i.e. monochrome.
   This adds one saturated secondary (electric cyan) for links, hovers, icon
   accents and section bands, so the page has some colour rhythm.

   Division of labour, deliberately:
     GOLD  stays the "money" colour — buttons/CTAs, prices, the big
           "How can we help" band, badges. Untouched by this file.
     CYAN  is interaction + accent — links, hovers, focus, dividers,
           card hover borders, carousel dots, section bands.
     SILVER stays as the metal surface treatment (stat tiles, panels).

   Linked after blaze-silver.css (see includes/head.tpl) so these win over
   silver's `html body ... !important` rules.
   ========================================================================== */

:root {
    --blz-cyan: #22d3ee;
    --blz-cyan-deep: #0e7490;
    --blz-cyan-soft: rgba(34, 211, 238, 0.14);
    --blz-cyan-line: rgba(34, 211, 238, 0.35);
}

/* --- Links & hovers (these were gold) ----------------------------------- */
html body .nav-menu .main-menu .menu-item .menu-large .menu-item a:hover,
html body .nav-menu .main-menu .menu-item .menu-large .service-list .service.special i,
html body .nav-menu .main-menu .menu-item .menu-large .service-list .service.special .media-body a:hover,
html body .nav-menu .main-menu > .menu-item:hover > a,
html body .menu-item .sub-menu .menu-item a:hover,
html body .dropdown-menu.show a:hover,
html body #menu-mobile .dropdown.open .dropdown-menu a:hover,
html body .header .mobile .dropdown.open a.dropdown-toggle,
html body .navbar-main .navbar-nav > li a:hover,
html body .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover,
html body #top-nav a.quick-nav:hover,
html body .footer .contact a:hover,
html body .footer .contact a:hover i,
html body .footer .footer-menu .menu-item a:hover,
html body .footer .payment-list li i:hover {
    color: var(--blz-cyan) !important;
    -webkit-text-fill-color: var(--blz-cyan) !important;
}

/* Long-form prose links (legal pages) read better cyan than gold */
html body .blz-legal a,
html body .blz-legal a:visited {
    color: var(--blz-cyan) !important;
    -webkit-text-fill-color: var(--blz-cyan) !important;
}
html body .blz-legal a:hover,
html body .blz-legal a:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* --- Icon / divider accents (were gold) --------------------------------- */
html body .domain-promo-box i,
html body .services .service-wrap .line:before,
html body #order-standard_cart .mc-promo .arrow {
    background: var(--blz-cyan) !important;
    border-color: var(--blz-cyan) !important;
}
html body .double-bounce1,
html body .double-bounce2 {
    background: var(--blz-cyan) !important;
}

/* --- Cards: cyan on hover instead of gold ------------------------------- */
html body .blz-plan-card:hover {
    border-color: var(--blz-cyan-line) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--blz-cyan-soft) !important;
}
html body .blz-tld:hover {
    border-color: var(--blz-cyan-line) !important;
}
html body .blz-feature:hover {
    border-color: var(--blz-cyan-line) !important;
}

/* --- Focus rings: visible, and on-brand -------------------------------- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible {
    outline: 2px solid var(--blz-cyan) !important;
    outline-offset: 2px !important;
}

/* --- Carousel dots ------------------------------------------------------ */
html body .header-main-slider > .flickity-page-dots .dot.is-selected {
    background: var(--blz-cyan) !important;
}

/* --- Section bands -----------------------------------------------------
   Colour rhythm down the homepage: dark hero -> light tech strip ->
   dark plans -> CYAN band (Why Choose Us) -> gold band (How can we help)
   -> dark domains -> guarantee -> featured. */
html body .blz-home-alt {
    background-color: #030303 !important;
    background-image:
        radial-gradient(120% 80% at 50% 0%, rgba(34, 211, 238, 0.13) 0%, rgba(34, 211, 238, 0) 60%),
        linear-gradient(180deg, #041318 0%, #030303 70%) !important;
    border-top: 1px solid var(--blz-cyan-soft);
    border-bottom: 1px solid var(--blz-cyan-soft);
}
/* A soft cyan glow behind the TLD price tiles */
html body .blz-tlds {
    position: relative;
}
html body .blz-tlds::before {
    content: "";
    position: absolute;
    top: -12%;
    left: -8%;
    width: 116%;
    height: 124%;
    background: radial-gradient(closest-side, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
html body .blz-tld {
    position: relative;
    z-index: 1;
}

/* --- Order form: "MOST POPULAR" badge ----------------------------------
   The order form renders it with Bootstrap's bg-danger (salmon #e26f6f),
   which clashes with the gold/cyan palette. Gold matches the CTA buttons.
   NOTE: it currently shows on ALL plans because every product in the group
   has WHMCS's "Featured" flag set — that is product data, not CSS. */
html body #order-standard_cart .badge.feat,
html body .product .badge.feat {
    background-color: var(--blz-gold-base) !important;
    background-image: var(--blz-gold-metal) !important;
    color: var(--blz-gold-text) !important;
    border: 0 !important;
    font-weight: 700;
    letter-spacing: 0.04em;
}