/* =====================================================================
   BritonCloud – Modern Light Skin (red / blue / white)
   ---------------------------------------------------------------------
   Loaded LAST from includes/head.tpl, so it only re-skins the existing
   Antler markup. No template structure, class or JS hook is changed.
   To roll back: remove the <link ... modern.css> line in head.tpl.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --bc-red: #e11d2e;
  --bc-red-600: #c8102e;
  --bc-red-700: #a50e25;
  --bc-red-50: #fff1f2;
  --bc-red-100: #ffe1e4;

  --bc-blue: #1d4ed8;
  --bc-blue-500: #2563eb;
  --bc-blue-700: #1e40af;
  --bc-blue-50: #eef3ff;
  --bc-blue-100: #dbe6ff;

  --bc-ink: #0f172a;
  --bc-text: #334155;
  --bc-muted: #64748b;
  --bc-subtle: #94a3b8;
  --bc-border: #e2e8f0;
  --bc-border-strong: #cbd5e1;
  --bc-surface: #f6f8fc;
  --bc-white: #ffffff;

  --bc-radius-sm: 8px;
  --bc-radius: 12px;
  --bc-radius-lg: 18px;
  --bc-radius-xl: 24px;

  --bc-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --bc-shadow-sm: 0 2px 6px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --bc-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .05);
  --bc-shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, .25);
  --bc-ring: 0 0 0 4px rgba(37, 99, 235, .15);

  --bc-grad-brand: linear-gradient(135deg, #e11d2e 0%, #c8102e 45%, #1d4ed8 100%);
  --bc-grad-red: linear-gradient(135deg, #f43f4e 0%, #e11d2e 50%, #b5122a 100%);
  --bc-grad-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 45%, #1e40af 100%);

  --bc-font: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------- */
html body {
  font-family: var(--bc-font) !important;
  color: var(--bc-text);
  background: var(--bc-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .heading, html body .section-heading, html body .title,
html body .btn, html body input, html body select, html body textarea, html body button,
html body p, html body a, html body li, html body td, html body th, html body label, html body span:not([class*="fa"]):not([class*="ico"]):not([class*="icon"]) {
  font-family: var(--bc-font);
}
html body h1, html body h2, html body h3, html body h4 { letter-spacing: -.02em; }

html body .box-container,
html body .box-container .bg-colorstyle { background-color: var(--bc-white) !important; }

html body ::selection { background: var(--bc-red); color: #fff; }

html body a { color: var(--bc-blue-500); transition: color .2s ease; }
html body a:hover, html body a:focus { color: var(--bc-red); }

html body .box-container .mergecolor,
html body[data-background] .box-container .mergecolor,
html body .box-container .section-heading { color: var(--bc-ink) !important; }
html body .box-container .seccolor,
html body[data-background] .box-container .seccolor,
html body .box-container .section-subheading { color: var(--bc-muted) !important; }

html body .section-heading { font-weight: 800 !important; letter-spacing: -.025em; }
html body .section-subheading { font-weight: 400; }

/* Brand helper classes used across the theme */
html body .c-pink { color: var(--bc-red) !important; }
html body .bg-pink { background-color: var(--bc-red) !important; }
html body .c-purple { color: var(--bc-blue) !important; }
html body .bg-purple { background-color: var(--bc-blue) !important; }
html body .c-yellow { color: var(--bc-blue-500) !important; }
html body .bg-yellow { background-color: var(--bc-blue-500) !important; }

/* Loader */
html body #spinner-area { background: #fff !important; }
html body .double-bounce1, html body .double-bounce2 { background-color: var(--bc-red) !important; }
html body .double-bounce2 { background-color: var(--bc-blue-500) !important; }
html body .spinner-txt { color: var(--bc-ink) !important; font-weight: 700; }

/* Frame-mode borders */
html body .body-borders > div { background: #fff !important; }

/* ---------------------------------------------------------------------
   2. Buttons
   --------------------------------------------------------------------- */
html body .btn {
  border-radius: var(--bc-radius) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
html body .btn:focus-visible { box-shadow: var(--bc-ring) !important; outline: none; }

/* Primary (theme "yellow") -> Blue */
html body .btn-default-yellow-fill,
html body .btn-primary,
html body .landing-page .btn,
html body .btn-order-now {
  background: var(--bc-blue-500) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--bc-blue-500) !important;
  box-shadow: 0 8px 20px -8px rgba(37, 99, 235, .55) !important;
}
html body .btn-default-yellow-fill:hover,
html body .btn-default-yellow-fill:focus,
html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active {
  background: var(--bc-blue) !important;
  border-color: var(--bc-blue) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(29, 78, 216, .6) !important;
}

/* Accent (theme "pink") -> Red */
html body .btn-default-pink-fill,
html body .btn-default-grad-purple-fill,
html body .btn-danger {
  background: var(--bc-red) !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid var(--bc-red) !important;
  box-shadow: 0 8px 20px -8px rgba(225, 29, 46, .55) !important;
}
html body .btn-default-pink-fill:hover,
html body .btn-default-grad-purple-fill:hover,
html body .btn-danger:hover {
  background: var(--bc-red-600) !important;
  border-color: var(--bc-red-600) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Outline variants */
html body .btn-default-pink,
html body .btn-default-purple {
  background: transparent !important;
  color: var(--bc-red) !important;
  border: 1.5px solid var(--bc-red) !important;
}
html body .btn-default-pink:hover,
html body .btn-default-purple:hover { background: var(--bc-red) !important; color: #fff !important; }

/* Neutral (theme dark grey) -> White outline */
html body .btn-default-fill,
html body .btn-default {
  background: #fff !important;
  color: var(--bc-ink) !important;
  border: 1px solid var(--bc-border-strong) !important;
  box-shadow: var(--bc-shadow-xs) !important;
}
html body .btn-default-fill:hover,
html body .btn-default:hover,
html body .btn-default:focus {
  background: var(--bc-blue-50) !important;
  color: var(--bc-blue) !important;
  border-color: var(--bc-blue-100) !important;
}

html body .btn-success { border-radius: var(--bc-radius) !important; }

/* Badges */
html body .badge { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .04em; }
html body .plans.badge.feat,
html body a.plans.badge.feat { background: var(--bc-red) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(225, 29, 46, .6); }

/* ---------------------------------------------------------------------
   3. Top info bar + Header
   --------------------------------------------------------------------- */
html body .box-container .sec-bg3.infonews,
html body[data-background] .box-container .sec-bg3.infonews,
html body .box-container .infonews {
  background: var(--bc-surface) !important;
  border-bottom: 1px solid var(--bc-border);
}
html body .box-container .infonews .news,
html body .box-container .infonews .news span { color: var(--bc-muted) !important; }
html body .box-container .infonews .badge { background: var(--bc-red) !important; color: #fff !important; }
html body .box-container .infonews .c-yellow { color: var(--bc-blue-500) !important; font-weight: 600; }
html body .box-container .infonews-nav a { color: var(--bc-ink) !important; }
html body .box-container .infonews-nav a:hover { color: var(--bc-red) !important; }

html body .header .menu-wrap,
html body .box-container .menu-wrap,
html body .box-container .menu-wrap.fixed {
  /* solid white – no backdrop-filter: it would break the fixed mobile menu */
  background: #fff !important;
  background-image: none !important;
}
html body .box-container .menu-wrap.fixed,
html body .header.fixed,
html body .header .menu-wrap.fixed {
  box-shadow: 0 1px 0 var(--bc-border), 0 8px 24px -16px rgba(15, 23, 42, .25) !important;
}
html body .header .desk.navbar-nav > li > a,
html body .box-container .nav-menu .main-menu > .menu-item > a,
html body[data-background] .header .desk.navbar-nav > li a {
  color: var(--bc-ink) !important;
  font-weight: 600 !important;
}
html body .header .desk.navbar-nav > li > a:hover,
html body .header .desk.navbar-nav > li.active > a,
html body .box-container .nav-menu .main-menu > .menu-item:hover > a { color: var(--bc-red) !important; }

/* Dropdowns / mega menus */
html body .dropdown-menu,
html body .header .desk.navbar-nav .dropdown-menu,
html body .open > .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) !important;
  box-shadow: var(--bc-shadow-lg) !important;
  padding: 8px !important;
}
html body .dropdown-menu > li > a,
html body .dropdown-menu a.dropdown-item {
  border-radius: var(--bc-radius-sm);
  color: var(--bc-text) !important;
}
html body .dropdown-menu > li > a:hover,
html body .header .desk.navbar-nav .dropdown-menu > li a:hover,
html body .dropdown-menu.show a:hover {
  background: var(--bc-red-50) !important;
  color: var(--bc-red) !important;
}
html body .megamenu .start-offer .inner,
html body .megamenu-list .start-offer .inner,
html body .nav-menu .main-menu .menu-item .menu-large li.start-offer .inner {
  background: var(--bc-grad-blue) !important;
  border-radius: var(--bc-radius-lg) !important;
  color: #fff !important;
}
html body .megamenu .start-offer .inner .title,
html body .megamenu-list .start-offer .inner .title { color: #fff !important; }

/* Notification dot / user header */
html body .header .dropdown .notification .notify-header,
html body .header .dropdown.user-login .login-header { background: var(--bc-grad-brand) !important; }
html body .header .dotted-animation .main-circle,
html body .header .dotted-static .main-circle,
html body .header .dotted-animation .animate-circle,
html body .header .dotted-static .animate-circle { background-color: var(--bc-red) !important; }

/* Hamburger */
html body #nav-toggle span,
html body #nav-toggle span:before,
html body #nav-toggle span:after { background: var(--bc-ink) !important; }

/* Mobile menu */
html body #menu-mobile,
html body #menu-mobile .mobile.navbar-nav { background: #fff !important; }
html body #menu-mobile .mobile.navbar-nav a { color: var(--bc-ink) !important; }
html body #menu-mobile .dropdown.open .dropdown-menu a:hover { color: var(--bc-red) !important; }

/* ---------------------------------------------------------------------
   4. Homepage hero slider – light
   --------------------------------------------------------------------- */
html body .main-container.slider .silder-container {
  background-color: #fff !important;
  background-image:
    radial-gradient(900px 480px at 88% 30%, rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(700px 380px at 6% 18%, rgba(225, 29, 46, .07), transparent 60%),
    linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%) !important;
}
/* subtle dot grid */
html body .main-container.slider .silder-container:before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}
html body .main-container.slider .carousel-cell,
html body .main-container.slider .carousel-cell.sec-bg6,
html body .main-container.slider .carousel-cell.bg-colorstyle { background: transparent !important; }
html body .main-container.slider .carousel-cell.overlay:before { display: none !important; }
html body .main-container.slider .silder-video,
html body .main-container.slider .carousel.full-slider { display: none !important; }

html body .main-container.slider .silder-container .slider-content h1,
html body .main-container.slider .silder-container .slider-content h1.mergecolor {
  color: var(--bc-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
}
html body .main-container.slider .silder-container .slider-content h1 #typed1,
html body .main-container.slider .silder-container .slider-content h1 .typed-cursor {
  background: var(--bc-grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
html body .main-container.slider .silder-container .slider-content p,
html body .main-container.slider .silder-container .slider-content p.seccolor {
  color: var(--bc-muted) !important;
}
html body .special-note,
html body .special-note .text { color: var(--bc-muted) !important; }
html body .special-note b { color: var(--bc-red); }

/* Domain search box in hero */
html body .domains-search {
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-xl);
  box-shadow: var(--bc-shadow-lg);
  padding: 8px;
}
html body .domains-search .inputdomainsearch,
html body .domains-search textarea,
html body .domains-search .special-input {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--bc-ink) !important;
}
html body .domains-search .ds-content .btn { border-radius: var(--bc-radius-lg) !important; }
html body .domains-search .input-group .btn,
html body .domains-search .multiselect,
html body .domains-search .btn-group > .btn.multiselect {
  background: var(--bc-blue-50) !important;
  color: var(--bc-blue) !important;
  border: 1px solid var(--bc-blue-100) !important;
  box-shadow: none !important;
}
html body .domains-search label { color: var(--bc-muted) !important; }

/* Line-art illustrations: keep crisp on white */
html body .custom-element-right { filter: drop-shadow(0 20px 40px rgba(37, 99, 235, .08)); }

/* Slider dots */
html body .flickity-page-dots .dot { background: var(--bc-border-strong) !important; opacity: 1 !important; }
html body .flickity-page-dots .dot.is-selected { background: var(--bc-red) !important; width: 26px; border-radius: 99px; }

/* ---------------------------------------------------------------------
   5. Pricing cards (homepage + store)
   --------------------------------------------------------------------- */
html body .pricing .wrapper {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-xl) !important;
  box-shadow: var(--bc-shadow) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
html body .pricing .wrapper:hover { transform: translateY(-6px); box-shadow: var(--bc-shadow-lg) !important; }
html body .pricing .wrapper .top-content,
html body .pricing .wrapper .top-content.bg-seccolorstyle { background: #fff !important; }
html body .pricing .wrapper .title { color: var(--bc-ink) !important; font-weight: 800 !important; }
html body .pricing .wrapper .fromer { color: var(--bc-muted) !important; font-style: normal !important; }
html body .pricing .wrapper .price { color: var(--bc-ink) !important; font-weight: 800 !important; letter-spacing: -.02em; }
html body .pricing .wrapper .price sup { color: var(--bc-red); }
html body .pricing .wrapper .price .period { color: var(--bc-muted) !important; font-weight: 500; }
html body .pricing .wrapper .list-info { background: var(--bc-grad-red) !important; }
html body .pricing .wrapper .list-info.bg-purple { background: var(--bc-grad-blue) !important; }
html body .pricing .wrapper .list-info li,
html body .pricing .wrapper .list-info li span { color: #fff !important; }
html body .pricing .wrapper .list-info li span.c-purple,
html body .pricing .wrapper .list-info li span.c-pink {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
}
html body .pricing .wrapper .list-info li i,
html body .pricing .wrapper .list-info li i:before { color: #fff !important; }
html body .pricing .wrapper .list-info svg path { stroke: #fff; }

/* ---------------------------------------------------------------------
   6. "How can we help" services section
   --------------------------------------------------------------------- */
html body .box-container .sec-bg4,
html body[data-background] .box-container .sec-bg4 {
  background: var(--bc-blue-50) !important;
  background-image: none !important;
}
html body .box-container .division-ontop { background: transparent !important; }
html body .services .service-wrap .service-section,
html body .services .service-section.bg-colorstyle {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-xl) !important;
  box-shadow: var(--bc-shadow) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
html body .services .service-wrap .service-section:hover { transform: translateY(-6px); box-shadow: var(--bc-shadow-lg) !important; }
html body .services .service-wrap .service-section .title { color: var(--bc-ink) !important; font-weight: 700 !important; }
html body .services .service-wrap .service-section .subtitle { color: var(--bc-muted) !important; }
html body .services .service-wrap .line:before { background: var(--bc-red) !important; }

/* ---------------------------------------------------------------------
   7. Inner-page banner (top-header) – light
   --------------------------------------------------------------------- */
html body .top-header,
html body .top-header[class*="item"] {
  background-color: var(--bc-surface) !important;
  background-image:
    radial-gradient(800px 360px at 90% 0%, rgba(37, 99, 235, .12), transparent 60%),
    radial-gradient(600px 300px at 0% 0%, rgba(225, 29, 46, .06), transparent 60%) !important;
  border-bottom: 1px solid var(--bc-border);
}
html body .top-header.overlay:before { display: none !important; }
html body .top-header .wrapper .heading {
  color: var(--bc-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
}
html body .top-header .wrapper .subheading { color: var(--bc-muted) !important; }
html body .top-header .wrapper .heading:after {
  content: "";
  display: block;
  width: 64px; height: 4px; margin-top: 18px;
  border-radius: 4px;
  background: var(--bc-grad-brand);
}

/* ---------------------------------------------------------------------
   8. Client area: panels, tiles, tables, lists
   --------------------------------------------------------------------- */
html body .panel,
html body[data-background] .panel,
html body .tab-content .tab-pane .panel,
html body .bg-seccolorstyle,
html body .box-container .bg-seccolorstyle,
html body[data-background] .box-container .bg-seccolorstyle,
html body .sec-bg1,
html body .card {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) !important;
  box-shadow: var(--bc-shadow-sm) !important;
}
html body .panel .panel-heading,
html body[data-background] .panel .panel-heading,
html body .card-header {
  background: var(--bc-surface) !important;
  border-bottom: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
  color: var(--bc-ink) !important;
}
html body .panel .panel-heading h3,
html body .panel .panel-title { color: var(--bc-ink) !important; font-weight: 700 !important; }
html body .panel-info > .panel-heading,
html body[data-color] .panel-info > .panel-heading { background: var(--bc-blue-50) !important; color: var(--bc-blue) !important; }
html body .main-content .tab-content .panel-footer,
html body .panel-footer { background: var(--bc-surface) !important; border-top: 1px solid var(--bc-border) !important; color: var(--bc-text) !important; }

/* Home tiles + overview */
html body .services.overview-services .service-wrap .service-section,
html body .rockbox .service-section,
html body .services .service-section.bg-seccolorstyle {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-xl) !important;
  box-shadow: var(--bc-shadow) !important;
}
html body .services.overview-services.sec-main.sec-bg4,
html body[data-background] .services.overview-services.sec-main.sec-bg4 {
  background: var(--bc-surface) !important;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius-xl) !important;
}

/* Client-area "Account overview" highlight block (bg-yellow in markup) */
html body .box-container .services.overview-services.bg-yellow,
html body .services.overview-services.bg-yellow {
  background: var(--bc-blue-50) !important;
  border: 1px solid var(--bc-blue-100);
  border-radius: var(--bc-radius-xl) !important;
}
html body .services.overview-services.bg-yellow .section-heading { color: var(--bc-ink) !important; }
html body .services.overview-services.bg-yellow .section-subheading { color: var(--bc-muted) !important; }

/* Sidebar drop button & list groups */
html body .drop-down-btn.dropside-content,
html body[data-color] .drop-down-btn.dropside-content {
  background: var(--bc-red) !important;
  box-shadow: 0 8px 18px -8px rgba(225, 29, 46, .6);
}
html body .list-group-item {
  border-color: var(--bc-border) !important;
  color: var(--bc-text) !important;
}
html body a.list-group-item:hover { background: var(--bc-red-50) !important; color: var(--bc-red) !important; }
html body .list-group-item.active,
html body a.list-group-item.active,
html body a.list-group-item.active:focus {
  background: var(--bc-blue-50) !important;
  color: var(--bc-blue) !important;
  border-color: var(--bc-blue-100) !important;
}
html body .list-group-item.active span,
html body .list-group-item.active i { color: var(--bc-blue) !important; }

html body #Secondary_Navbar-Account .secundary-nav .secundary-header,
html body[data-color] #Secondary_Navbar-Account .secundary-nav .secundary-header { background: var(--bc-grad-brand) !important; }

/* Tables */
html body table.table-list,
html body[data-background] table.table-list,
html body .table {
  background: #fff !important;
  border-radius: var(--bc-radius-lg);
  overflow: hidden;
  border-color: var(--bc-border) !important;
}
html body table.table-list thead th,
html body[data-color] table.table-list thead th,
html body .table > thead > tr > th {
  background: var(--bc-surface) !important;
  color: var(--bc-ink) !important;
  font-weight: 700 !important;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--bc-border) !important;
}
html body table.table-list tbody td,
html body .table > tbody > tr > td { border-color: var(--bc-border) !important; color: var(--bc-text); }
html body table.table-list tbody tr:hover td { background: #fafbff !important; }
html body table.table-list tbody td.sorting_1 a,
html body[data-color] table.table-list tbody td.sorting_1 a { color: var(--bc-blue-500) !important; font-weight: 600; }

/* Status labels */
html body .label { border-radius: 999px !important; padding: .35em .8em !important; font-weight: 700; letter-spacing: .03em; }
html body .status-active, html body .status-paid, html body .status-open { background: #16a34a !important; }

/* Pagination */
html body .pagination > li > a,
html body .pagination > li > span,
html body .box-container .pagination > li > a {
  border-radius: var(--bc-radius-sm) !important;
  margin: 0 3px;
  border: 1px solid var(--bc-border) !important;
  background: #fff !important;
  color: var(--bc-ink) !important;
}
html body .pagination > li > a:hover { background: var(--bc-blue-50) !important; color: var(--bc-blue) !important; }
html body .pagination > .active > a,
html body .pagination > li.active > a,
html body .pagination > .active > a:hover,
html body .pagination > .active > span,
html body .page-item.active .page-link {
  background: var(--bc-red) !important;
  border-color: var(--bc-red) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------------
   9. Forms
   --------------------------------------------------------------------- */
html body .form-control,
html body .fill-input,
html body .custom-select,
html body select.form-control,
html body .box-container .form-control,
html body #order-standard_cart .form-control,
html body #order-standard_cart .field {
  background: #fff !important;
  border: 1px solid var(--bc-border-strong) !important;
  border-radius: var(--bc-radius) !important;
  color: var(--bc-ink) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
html body .form-control::placeholder,
html body .fill-input::placeholder { color: var(--bc-subtle) !important; }
html body .form-control:focus,
html body[data-color] .form-control:focus,
html body .fill-input:focus,
html body[data-color] .fill-input:focus,
html body[data-color] .custom-select.form-control:focus {
  border-color: var(--bc-blue-500) !important;
  box-shadow: var(--bc-ring) !important;
  outline: none !important;
}
html body label,
html body .control-label { color: var(--bc-ink); font-weight: 600; }
html body .input-group-addon,
html body .input-group-text {
  background: var(--bc-surface) !important;
  border-color: var(--bc-border-strong) !important;
  color: var(--bc-muted) !important;
}
html body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
html body[data-color] .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-color: var(--bc-blue-500) !important; }

/* Alerts */
html body .alert {
  border-radius: var(--bc-radius) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
html body .alert-danger  { background: var(--bc-red-50) !important; color: var(--bc-red-700) !important; border-color: var(--bc-red-100) !important; }
html body .alert-info    { background: var(--bc-blue-50) !important; color: var(--bc-blue-700) !important; border-color: var(--bc-blue-100) !important; }
html body .alert-success { background: #ecfdf3 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
html body .alert-warning { background: #fffbeb !important; color: #92400e !important; border-color: #fde68a !important; }

/* Modals */
html body .modal-content,
html body[data-background] .modal-content {
  background: #fff !important;
  border: 0 !important;
  border-radius: var(--bc-radius-xl) !important;
  box-shadow: var(--bc-shadow-lg) !important;
}
html body .modal-header { border-bottom: 1px solid var(--bc-border) !important; }
html body .modal-footer { border-top: 1px solid var(--bc-border) !important; }
html body .modal-backdrop.in, html body .modal-backdrop.show { opacity: .45 !important; background: #0f172a !important; }

/* Popover / tooltip */
html body .popover,
html body[data-color] .popover-body { border-radius: var(--bc-radius) !important; }
html body[data-color] .popover .popover-header { background: var(--bc-red) !important; }

/* ---------------------------------------------------------------------
   10. Login / register page
   --------------------------------------------------------------------- */
html body .loginpage,
html body .loginpage.sec-bg3 {
  background-color: var(--bc-surface) !important;
  background-image:
    radial-gradient(800px 420px at 100% 0%, rgba(37, 99, 235, .12), transparent 60%),
    radial-gradient(700px 380px at 0% 100%, rgba(225, 29, 46, .10), transparent 60%) !important;
}
html body .loginpage .login-form-container,
html body[data-background] .box-container .loginpage .login-form-container {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-xl) !important;
  box-shadow: var(--bc-shadow-lg) !important;
}
html body .loginpage .login-page-header i,
html body[data-color] .loginpage .login-page-header i {
  background: var(--bc-red) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(225, 29, 46, .6);
}
html body .forgot-pass { color: var(--bc-blue-500) !important; }
html body .forgot-pass:hover { color: var(--bc-red) !important; }

/* ---------------------------------------------------------------------
   11. Footer – light
   --------------------------------------------------------------------- */
html body .footer,
html body .box-container .footer,
html body[data-background] .box-container .footer {
  background: var(--bc-surface) !important;
  background-image: none !important;
  border-top: 1px solid var(--bc-border) !important;
}
html body .footer:before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 3px;
  background: var(--bc-grad-brand);
}
/* big faded Antler symbol behind the footer = theme branding, hide it */
html body .footer .logo-bg { display: none !important; }
html body .footer .heading,
html body .box-container .footer .heading {
  color: var(--bc-ink) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html body .footer .footer-menu .menu-item a,
html body .footer .contact, html body .footer .contact a,
html body .footer .copyright,
html body .footer h6,
html body .footer p,
html body .footer .payment-list li p { color: var(--bc-muted) !important; }
html body .footer .footer-menu .menu-item { font-size: 15px; }
html body .footer .footer-menu .menu-item a:hover,
html body .footer .contact a:hover { color: var(--bc-red) !important; }
html body .footer .payment-list li i { color: var(--bc-subtle) !important; }
html body .footer .payment-list li i:hover { color: var(--bc-blue-500) !important; }

/* show dark-text logo on light footer */
html body .footer img.logo-footer.d-block:not(.logo-bg) { display: none !important; }
html body .footer img.logo-footer.d-none { display: block !important; }

html body .footer .soc-icons i,
html body[data-color] .footer .soc-icons i {
  background: #fff !important;
  color: var(--bc-ink) !important;
  border: 1px solid var(--bc-border);
  border-radius: 12px !important;
  box-shadow: var(--bc-shadow-xs) !important;
}
html body .footer .soc-icons a:hover i,
html body .footer .soc-icons i:hover {
  background: var(--bc-red) !important;
  border-color: var(--bc-red);
  color: #fff !important;
  transform: translateY(-2px);
}

/* Newsletter */
html body .footer .subcribe .general-input {
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 999px;
  box-shadow: var(--bc-shadow);
  padding: 6px;
}
html body .footer .subcribe .fill-input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body .footer .subcribe .btn-subscribe { border-radius: 999px !important; }
html body .footer .footer-bottom { border-top: 1px solid var(--bc-border); padding-top: 24px !important; }

/* Email verification bar */
html body .verification-banner,
html body .email-verification {
  background: var(--bc-blue-50) !important;
  color: var(--bc-blue-700) !important;
  border-bottom: 1px solid var(--bc-blue-100);
}

/* ---------------------------------------------------------------------
   12. Order form / cart (standard_cart) accents
   --------------------------------------------------------------------- */
html body #order-standard_cart .order-summary,
html body[data-color] #order-standard_cart .order-summary {
  background: #fff !important;
  border: 1px solid var(--bc-border) !important;
  border-radius: var(--bc-radius-lg) !important;
  box-shadow: var(--bc-shadow) !important;
  overflow: hidden;
}
html body #order-standard_cart .order-summary h2 { background: var(--bc-grad-brand) !important; color: #fff !important; }
html body #order-standard_cart .order-summary .summary-container { background: #fff !important; color: var(--bc-text) !important; }
html body #order-standard_cart .account-select-container div.account.active,
html body[data-color] #order-standard_cart .account-select-container div.account.active {
  background: var(--bc-blue-50) !important;
  border-color: var(--bc-blue-500) !important;
}
html body #order-standard_cart .products .product,
html body #order-standard_cart .product {
  border-radius: var(--bc-radius-lg) !important;
}
html body .tld-pricing-header,
html body[data-color] .tld-pricing-header { background: var(--bc-grad-blue) !important; color: #fff !important; }

/* ---------------------------------------------------------------------
   13. Misc accents
   --------------------------------------------------------------------- */
html body .accordion.faq .panel-title.active,
html body[data-color] .accordion.faq .panel-title.active { background: var(--bc-red) !important; color: #fff !important; }
html body .tabs.offers-tabs .tabs-header .active,
html body[data-color] .tabs.offers-tabs .tabs-header .active { background: var(--bc-red) !important; color: #fff !important; }
html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:focus,
html body .nav-tabs > li.active > a:hover { color: var(--bc-red) !important; border-bottom-color: var(--bc-red) !important; }
html body .golink, html body[data-color] .golink { color: var(--bc-red) !important; }
html body .knowledge a, html body[data-color] .knowledge a { color: var(--bc-blue-500) !important; }

/* Settings panel trigger (theme demo) */
html body .btn-settings { background: var(--bc-ink) !important; color: #fff !important; border-radius: 12px 0 0 12px !important; }

/* Scrollbar */
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #f1f5f9; }
html::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid #f1f5f9; }
html::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---------------------------------------------------------------------
   14. Responsive tweaks
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
  html body .domains-search { border-radius: var(--bc-radius-lg); }
  html body .pricing .wrapper { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html body .btn, html body .pricing .wrapper, html body .services .service-wrap .service-section { transition: none !important; }
}

/* Mobile slide-in menu uses .bg-seccolorstyle – keep it flat (no card styling) */
html body .nav-menu .main-menu.bg-seccolorstyle,
html body[data-background] .box-container .nav-menu .main-menu.bg-seccolorstyle {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Mobile slide-in menu: white instead of dark navy */
html body .nav-menu .main-menu,
html body[data-background] .box-container .nav-menu .main-menu { background: #fff !important; }
html body .nav-menu .main-menu .menu-item > a { color: var(--bc-ink) !important; }
html body .nav-menu .main-menu .menu-item > a:hover { color: var(--bc-red) !important; }

/* ---------------------------------------------------------------------
   15. Your own logo (includes/brand-logo.tpl -> img.brand-logo)
   The theme gives logos a fixed width because its own logo is a 4:1 SVG.
   A PNG/JPG with a different shape would be stretched or squashed, so
   size it by height instead and always keep the aspect ratio.
   --------------------------------------------------------------------- */
html body img.brand-logo {
  width: auto !important;
  height: auto !important;
  max-width: 220px !important;
  max-height: 48px !important;
  object-fit: contain;
  vertical-align: middle;
}
html body .menu-wrap.fixed img.brand-logo { max-height: 42px !important; }
html body .footer img.brand-logo { max-height: 56px !important; margin-bottom: 8px; }
html body .loginpage img.brand-logo { max-height: 52px !important; }
@media (max-width: 575px) {
  html body img.brand-logo { max-width: 160px !important; max-height: 40px !important; }
  html body .footer img.brand-logo { margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------
   16. Hide the theme's demo "PANEL" / "DEMOS" buttons (Antler setup panel
   with "Buy Now on Envato"). It let visitors switch to dark mode / other
   colours that this skin does not support. Delete these lines to show it.
   --------------------------------------------------------------------- */
html body .btn-settings,
html body .btn-demos,
html body #offcanvasRight { display: none !important; }
/* 992-1199px (small laptops / tablets in landscape): the theme's menu is too
   wide there and runs over the logo. Keep the logo inside its column and
   tighten the gaps between menu items so both fit. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  html body .menu-wrap:not(.mobile) img.brand-logo { max-width: 100% !important; }
  html body .menu-wrap:not(.mobile) .main-menu > .menu-item > a.v-stroke { margin-right: 16px !important; }
  html body .menu-wrap:not(.mobile) .main-menu > .menu-item > .badge.me-5 { margin-right: 16px !important; }
  html body .menu-wrap:not(.mobile) .main-menu > .menu-item.me-2 { margin-right: 0 !important; }
}

/* Top bar label ("news" / "welcome") - keep its text white */
html body .box-container .infonews .news span.badge { color: #fff !important; }

/* centred banner headings: centre the red/blue accent line too */
html body .top-header .heading.text-center:after,
html body .top-header .text-center .heading:after { margin-left: auto; margin-right: auto; }

/* "Back to top" button: theme used gold */
html body .cd-top { background: var(--bc-red) !important; }