@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');

/* ROOT — APN Cloud design system (aligned to apncloud.com frontend) */
:root {
  /* Brand (refined orange + deepened ink, matching the frontend) */
  --primary: #fb5a07;
  --primary-hover: #de5005;
  --semi-primary: #d94a32;
  --darkBlue: #112a30;
  --semi-dark: #21464f;
  --semi-dark-2: #2a5660;
  --semi-dark-3: #0e2227;
  --gold: #ff8c44;
  --red: #d94a32;
  --gray: #4b5563;
  --darkGray: #4b5563;
  --mint: #ff8c44;
  --border: #e2e8ea;
  --light: #f6f8f9;
  --tomato: #d94a32;

  /* Typography — Plus Jakarta Sans (headings) + Inter (body) */
  --primary-font: 'Plus Jakarta Sans', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  --third-font: 'Poppins', sans-serif;

  /* Semantic surfaces (light mode; remapped in .dark-theme) */
  --surface: #f6f8f9;
  --card: #ffffff;
  --heading: #111827;
  --text: #374151;
  --muted: #4b5563;
  --text-muted: #6b7280;
  --text-tertiary: #9ca3af;

  /* Radius scale */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Elevation — soft premium shadows */
  --shadow-sm: 0 1px 2px rgba(17, 42, 48, .06), 0 1px 3px rgba(17, 42, 48, .08);
  --shadow-md: 0 4px 12px rgba(17, 42, 48, .08), 0 2px 6px rgba(17, 42, 48, .06);
  --shadow-lg: 0 18px 40px rgba(17, 42, 48, .12), 0 8px 16px rgba(17, 42, 48, .08);

  /* Semantic ALIASES — friendly names mapped onto the tokens above.
     Use either set; both resolve to the same value and flip in dark mode. */
  --bg-primary: var(--surface);
  --bg-secondary: #eef2f3;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-heading: var(--heading);
  --border-color: var(--border);
  --card-bg: var(--card);
  --accent-primary: var(--primary);
  --accent-hover: var(--primary-hover);
}
body {
  color: var(--text);
  background-color: var(--surface);
  font-family: var(--secondary-font);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--primary-font);
}
p {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray);
}
/* ----------------------------------- */

/* MAIN-BODY */
#main-body {
  padding-top: 30px;
}
#btnShowSidebar {
  margin-bottom: 20px;
}
/* ----------------------------------- */

/* CUSTOM */
.primary-color {
  color: var(--primary);
}
.primary-bg-color {
  background-color: var(--darkBlue);
}
.bg-2 {
  background-color: var(--semi-dark-3);
}
.rounded {
  border-radius: 50px !important;
}
/* ----------------------------------- */

/* BUTTON */
.theme-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  line-height: 1;
  padding: 0 20px;
  min-height: 48px;
  border-radius: 4px;
  letter-spacing: .8px;
  white-space: nowrap;
  font-family: var(--secondary-font);
  transition: all .15s ease-in-out;
}

/* size */
.--btn-size-sm {
  padding: 0 20px;
  min-height: 40px;
  font-size: 14px;
}

.--btn-size-md {
  padding: 0 20px;
  min-height: 46px;
  font-size: 14px;
}

/* fill-primary */
.--fill-primary {
  background-color: var(--primary);
  color: #fff !important;
  border: 1px solid var(--primary);
}

.--fill-primary:hover {
  background-color: var(--semi-primary);
  border-color: var(--semi-primary);
}



/* fill-success */
.--fill-success {
  background-color: #15CD72;
  color: #fff;
  border: 1px solid #15CD72;
}

.--fill-success:hover {
  background-color: #13B966;
  border-color: #13B966;
}

/* outline-dark */
.--outline-dark {
  background-color: var(--semi-dark);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, .1);
}

.--outline-dark:hover {
  border-color: rgba(255, 255, 255, .5);
  color: #ffffff;
}

/* circle-btn */
.--circle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  min-height: unset;
}

.--circle-btn img {
  width: 20px;
}

.--circle-btn.--size-md {
  width: 46px;
  height: 46px;
}

/* has-counter */
.--has-counter {
  position: relative;
}

.--has-counter::before {
  position: absolute;
  content: attr(data-count);
  top: -4px;
  right: -4px;
  background-color: var(--tomato);
  min-width: 20px;
  min-height: 20px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  padding: 4px;
}

/* ----------------------------------- */

/* SECTION HEAD */
.se-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 75px;
}

.se-head .se-title-1 {
  font-size: 16px;
  color: var(--primary);
  font-family: var(--third-font);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.se-head .se-title-2,
.header-lined h1 {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.se-head .se-para {
  font-size: 16px;
  color: var(--darkGray);
  margin-top: 25px;
}

@media only screen and (max-width: 1199.98px) {
  .se-head .se-title-2 {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767.98px) {
  .se-head {
    margin: 0 auto 45px;
  }

  .se-head .se-title-2 {
    font-size: 26px;
  }
}
/* ---------------------------- */

/* PRODUCTS-HEADLINE */
.products-headline {
  margin-bottom: 45px;
  text-align: center;
}
.products-headline .title-1 {
  font-weight: bold;
  font-size: 32px;
  color: #fff;
  margin-bottom: 15px;
}
.products-headline .title-2 {
  margin: 0 auto;
  font-size: 16px;
  font-family: var(--third-font);
  font-weight: 400;
  color: var(--gray);
  max-width: 700px;
  line-height: 1.6;
}
/* ---------------------------- */

/* : Main Container : */
.main-container {
  padding-bottom: 60px;
}
/* ---------------------------- */

/* :: TOPBAR :: */
header.header .topbar {
  margin: 0;
  padding: 10px 0;
  background-color: var(--primary);
  font-weight: 600;
}

/* input-group */
header.header .topbar .input-group,
header.header .topbar .btn-group {
  align-items: center;
}

header.header .topbar .btn {
  line-height: 1;
  color: #fff;
  padding: 0;
}

header.header .topbar .btn i {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  color: var(--darkBlue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

/* active-client */
header.header .topbar .active-client {
  line-height: 1;
}

header.header .topbar .active-client .input-group-text {
  color: #fff;
  font-size: 14px;
  background-color: transparent;
  border: 0;
  cursor: default;
}

header.header .topbar .active-client .btn {
  color: #fff;
  padding: 0;
  margin-right: 10px;
}

header.header .topbar .active-client .btn.btn-active-client:hover span {
  text-decoration: underline;
}

/* ---------------------------- */

header.header .logo-img {
  max-width: 200px;
  max-height: 60px;
  width: 80px;
}

/* ---------------------------- */

/* :: NEWS-AREA :: */
.news-area {
  padding: 6px 0;
  background-color: var(--mint);
}

.news-area .news .badge {
  color: #fff;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

.news-area .news.new .badge {
  background-color: var(--primary);
}

.news-area .news.hot .badge {
  background-color: var(--tomato);
  color: #fff;
}

.news-area .news .link {
  position: relative;
  font-size: 14px;
  color: var(--darkBlue);
  font-weight: 600;
  max-width: 370px;
}

.news-area .news .link:hover {
  text-decoration: underline;
}

/* links */
.news-area .links .item a {
  font-size: 14px;
  color: var(--darkBlue);
  font-weight: 600;
}

.news-area .links .item a:hover {
  text-decoration: underline;
}

/* ----------------------------------- */

/* :: THEME-NAVBAR :: */
.theme-navbar {
  position: relative;
  background-color: var(--darkBlue);
  border-bottom: 1px solid var(--border);
}

/* nav-top */
.theme-navbar .nav-top {
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}

@media only screen and (max-width: 767.98px) {
  .theme-navbar .nav-top {
    padding: 15px 0 15px;
  }
}

/* menu-icon */
.theme-navbar .nav-top .menu-icon {
  display: none;
}

@media only screen and (max-width: 1199.98px) {
  .theme-navbar .nav-top .menu-icon {
    display: block;
    min-width: 24px;
    width: 24px;
    margin-right: 10px;
    cursor: pointer;
  }
}

/* brand */
.theme-navbar .nav-top .brand img {
  height: 34px;
}

@media only screen and (max-width: 991.98px) {
  .theme-navbar .nav-top .brand img {
    height: 30px;
  }
}

/* options */
.theme-navbar .options .c-link {
  display: flex;
  align-items: center;
  transition: all .15s ease;
}

.theme-navbar .options .c-link:not(:last-of-type) {
  margin-right: 30px;
}

.theme-navbar .options .c-link .icon {
  width: 24px;
  margin-right: 10px;
}

.theme-navbar .options .c-link .text {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.theme-navbar .options .c-link:hover .text {
  text-decoration: underline;
}

@media only screen and (max-width: 991.98px) {
  .theme-navbar .options .c-link {
    display: none;
  }
}

/* buttons */
.theme-navbar .buttons {
  margin-left: 20px;
}

.theme-navbar .buttons .btn {
  padding: 12px 20px;
  font-size: 14px;
  height: auto;
}

/* lang */
.theme-navbar .lang {
  position: relative;
  margin-left: 20px;
  z-index: 97;
  -webkit-user-select: none;
  user-select: none;
}

.theme-navbar .lang .current {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: all .15s ease;
}

.theme-navbar .lang .current:hover,
.theme-navbar .lang.open .current {
  text-decoration: underline;
}

.theme-navbar .lang .current img {
  min-width: 10px;
  width: 10px;
  margin-left: 4px;
}

/* second-options */
.theme-navbar .second-options .o-link {
  position: relative;
}

.theme-navbar .second-options .icon {
  width: 24px;
  cursor: pointer;
}

.theme-navbar .second-options .o-link-cart.has-items::after {
  position: absolute;
  content: '';
  right: -2px;
  top: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--tomato);
  border-radius: 50%;
}

/* user-dropdown-menu */
.theme-navbar .second-options .user-dropdown-menu {
  position: absolute;
  display: none;
  top: 40px;
  right: -16px;
  background-color: var(--semi-dark);
  width: 300px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 16px 24px;
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
  z-index: 99;
}

.theme-navbar .second-options .user-dropdown-menu::before {
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  background-color: var(--semi-dark);
  border-width: 1px 1px 0 0;
  border: 2px solid var(--semi-dark);
  border-width: 1px 1px 0 0;
  top: -7px;
  right: 20px;
  transform: rotate(-45deg);
}

.theme-navbar .second-options .open .user-dropdown-menu {
  display: block;
}

/* uddm-link-parent */
.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent:not(:first-of-type) {
  padding-top: 16px;
}

.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent:not(:last-of-type) {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .title-2 {
  font-family: var(--primary-font);
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 20px;
}

.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .para-2 {
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
  margin-bottom: 10px;
}

.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .uddm-link {
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
}

.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .uddm-link:hover {
  text-decoration: underline;
}

/* nav-bottom */
.theme-navbar .nav-bottom {
  padding: 15px 0;
}

.theme-navbar .nav-bottom .info .item {
  display: flex;
  align-items: center;
}

.theme-navbar .nav-bottom .info .item:not(:last-of-type) {
  margin-right: 20px;
}

.theme-navbar .nav-bottom .info .item img {
  min-width: 14px;
  width: 14px;
  margin-right: 8px;
}

.theme-navbar .nav-bottom .info .item .text {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

/* links */
.theme-navbar .nav-bottom .links .link>a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  padding: 8px 15px;
  border-radius: 50px;
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
  text-decoration: none;
}

.theme-navbar .nav-bottom .links .link>a:hover,
.theme-navbar .nav-bottom .links .link.show .dropdown-toggle {
  background-color: var(--semi-dark);
}

.theme-navbar .nav-bottom .links .link:not(:last-of-type) {
  margin-right: 5px;
}

@media only screen and (max-width: 1199.98px) {
  .theme-navbar .nav-bottom .links {
    position: fixed;
    top: 0;
    left: -390px;
    bottom: 0;
    padding: 60px 0 50px;
    background-color: var(--semi-dark);
    border-right: 1px solid var(--border);
    transition: all .6s cubic-bezier(.77, 0, .175, 1);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 98;
  }

  .theme-navbar .nav-bottom .links.open-links {
    left: 0;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.2) !important;
  }

  .theme-navbar .nav-bottom .links::-webkit-scrollbar {
    width: 2px;
    height: 2px;
  }

  .theme-navbar .nav-bottom .links::-webkit-scrollbar-thumb {
    width: 2px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
  }

  .theme-navbar .nav-bottom .links .link>a {
    padding: 10px 20px;
    min-width: 380px;
  }

  .theme-navbar .nav-bottom .links .link:hover>a,
  .theme-navbar .nav-bottom .links .link.active>a,
  .theme-navbar .nav-bottom .links .link.open-dropdown-menu>a {
    background-color: var(--th-light);
    opacity: 1;
  }

  .theme-navbar .nav-bottom .links .link:not(:last-of-type) {
    margin-right: unset;
  }
}

/* close-links-btn */
.theme-navbar .nav-bottom .links .close-links-btn {
  display: none;
}

@media only screen and (max-width: 1199.98px) {
  .theme-navbar .nav-bottom .links .close-links-btn {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }

  .theme-navbar .nav-bottom .links .close-links-btn img {
    width: 18px;
  }

  .theme-navbar .nav-bottom .links .close-links-btn:hover {
    opacity: .7;
  }
}

/* lines */
.theme-navbar .nav-bottom .links .link .lines {
  position: relative;
  top: -1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 22px;
  height: 12px;
  margin-right: 6px;
}

.theme-navbar .nav-bottom .links .link .lines span {
  display: block;
  width: 20px;
  height: 1px;
  background-color: var(--darkBlue);
}

.theme-navbar .dropdown-divider {
  border-color: rgba(255, 255, 255, .1);
}

/* has-dropdown-menu */
.theme-navbar .nav-bottom .links .link.has-dropdown-menu>a::after,
.theme-navbar .nav-bottom .links .link.has-mega-menu>a::after {
  position: relative;
  content: '';
  width: 10px;
  height: 10px;
  background-image: url(../images/navbar/icons/down-chevron-light.png);
  background-size: contain;
  background-position: center 2px;
  background-repeat: no-repeat;
  margin-left: 4px;
}

@media only screen and (max-width: 1199.98px) {

  .theme-navbar .nav-bottom .links .link.has-dropdown-menu>a::after,
  .theme-navbar .nav-bottom .links .link.has-mega-menu>a::after {
    margin-left: auto;
    transform: rotate(-90deg);
  }
}

/* th-dropdown-menu */
.theme-navbar .nav-bottom .links .link .dropdown-menu {
  top: 5px !important;
  background-color: var(--semi-dark-2);
  min-width: 280px;
  padding: 16px 0 16px;
  border: 2px solid var(--border);
  border-radius: 4px;
  overflow-y: auto;
  /* transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1); */
}

.theme-navbar .nav-bottom .links .link .dropdown-menu::-webkit-scrollbar {
  width: 2px;
}

.theme-navbar .nav-bottom .links .link .dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--semi-dark-2);
  border-radius: 20px;
}

@media only screen and (max-width: 1199.98px) {
  .theme-navbar .nav-bottom .links .link .dropdown-menu {
    position: relative !important;
    top: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    border: 0 !important;
    padding: 26px 0 16px !important;
    width: 100%;
    margin-top: 0 !important;
  }
}

/* dropdown-item */
.theme-navbar .nav-bottom .links .link .dropdown-menu .dropdown-item {
  all: unset;
}

/* dm-link */
.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link::before {
  position: absolute;
  content: '';
  left: 10px;
  background-image: url(../images/icons/right-arrow.png);
  background-size: contain;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link:hover {
  color: var(--primary);
  padding-left: 46px;
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link:hover::before {
  left: 20px;
  opacity: 1;
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link.st-soon::after {
  position: relative;
  content: attr(data-st);
  font-size: 10px;
  background-color: rgba(255, 183, 48, 0.1);
  padding: 4px 8px;
  border-radius: 2px;
  margin-left: auto;
  width: 43px;
  text-align: center;
  text-transform: uppercase;
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link.st-new::after {
  position: relative;
  content: attr(data-st);
  font-size: 10px;
  color: #15CD72;
  background-color: rgba(21, 205, 113, 0.1);
  padding: 4px 8px;
  border-radius: 2px;
  margin-left: auto;
  width: 43px;
  text-align: center;
  text-transform: uppercase;
}

/* dm-link */
.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 20px;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  color: var(--light);
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link:hover {
  background-color: var(--th-light);
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link.st-soon::after {
  position: relative;
  content: 'Soon';
  font-size: 10px;
  color: var(--gold);
  background-color: rgba(255, 183, 48, 0.1);
  padding: 4px 8px;
  border-radius: 2px;
  margin-left: auto;
  width: 43px;
  text-align: center;
  text-transform: uppercase;
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link.st-new::after {
  position: relative;
  content: 'New';
  font-size: 10px;
  color: #15CD72;
  background-color: rgba(21, 205, 113, 0.1);
  padding: 4px 8px;
  border-radius: 2px;
  margin-left: auto;
  width: 43px;
  text-align: center;
  text-transform: uppercase;
}

/* ----------------------------------- */

/* :: HOME PAGE :: */

.main-header {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  background-image: url(../images/home/bg-d.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}

/* title-1 & para-1 */
.main-header .title-1 {
  font-size: 62px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  max-width: 600px;
}

.main-header .para-1 {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray);
  max-width: 600px;
}

@media only screen and (max-width: 991.98px) {
  .main-header .title-1 {
    font-size: 54px;
  }
}

@media only screen and (max-width: 767px) {
  .main-header {
    padding: 100px 0 60px;
  }

  .main-header .title-1 {
    font-size: 44px;
  }

  .main-header .para-1 {
    font-size: 14px;
  }
}

/* notify */
.main-header .notify {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid var(--border);
  background-color: var(--semi-dark);
  border-radius: 50px;
  cursor: default;
  margin-bottom: 45px;
}

.light-theme .main-header .notify {
  border: 1px solid var(--border);
  background-color: #FFFFFF;
}

.main-header .notify .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 50px;
  width: 54px;
  min-width: 54px;
  height: 54px;
}

.main-header .notify .icon img {
  width: 20px;
  transform: rotate(45deg);
}

.light-theme .main-header .notify .icon {
  background-color: var(--light);
}

.main-header .notify .text {
  padding: 0 25px 0 20px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}

.light-theme .main-header .notify .text {
  color: var(--darkGray);
}

@media only screen and (max-width: 767px) {
  .main-header .notify .icon {
    display: none;
  }

  .main-header .notify .text {
    padding: 15px 30px;
    font-size: 14px;
  }
}

/* header-form */
.main-header .header-form {
  position: relative;
  background-color: var(--semi-dark);
  border: 1px solid var(--border);
  padding: 60px 40px 40px;
  text-align: center;
  border-radius: 16px;
  max-width: 480px;
}

/* form-title */
.main-header .form-title {
  font-size: 22px;
  line-height: 1.4;
  color: #ffffff;
  font-weight: 700;
  font-family: var(--secondary-font);
}

/* form-label */
.main-header .form-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.main-header .form-label:not(:last-child) {
  margin-bottom: 15px;
}

.main-header .form-label input {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 52px;
  padding: 0 20px;
  background-color: #282a3f;
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
  width: 100%;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  font-family: var(--primary-font);
  font-weight: 500;
  outline: none;
  transition: background-color .2s ease;
}

.main-header .form-label input:hover {
  background-color: #2f3146;
}

.main-header .form-label input::placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}

/* form-comment */
.main-header .form-comment {
  font-size: 12px;
  font-weight: 500;
  color: var(--darkGray);
}

.main-header .form-comment a {
  color: var(--primary);
}

.main-header .form-comment a:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 767px) {
  .main-header .form-title {
    font-size: 17px;
  }
}

/* ---------------------------------- */

/* HOMEPAGE-FEATURES-SECTION */
.homepage-features-section {
  padding-bottom: 80px;
  background-color: #0e0f1f;
}

/* box */
.homepage-features-section .box {
  padding: 35px 30px;
  background-color: var(--semi-dark);
  border-radius: 8px;
}

.homepage-features-section .box-icon {
  width: 48px;
  margin-bottom: 20px;
}

.homepage-features-section .box-title {
  font-size: 20px;
  font-family: var(--third-font);
  font-weight: 600;
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
  .homepage-features-section .box-icon {
    width: 38px;
  }

  .homepage-features-section .box-title {
    font-size: 14px;
  }
}

/* ---------------------------------- */

/* OPERATING-SYS-SECTION */
.operating-sys-section {
  padding: 60px 0;
}

/* title-1 */
.operating-sys-section .title-1 {
  font-size: 46px;
  font-family: var(--third-font);
  font-weight: 700;
  color: #FFF;
  line-height: 1;
}

.operating-sys-section .title-1 span {
  line-height: 1;
  display: inline-block;
  font-family: var(--third-font);
  font-weight: 700;
}

/* para-1 */
.operating-sys-section .para-1 {
  font-size: 14px;
  font-weight: 600;
  color: var(--darkGray);
}

/* item */
.operating-sys-section .item {
  background-color: var(--semi-dark-2);
  padding: 20px 15px 20px 15px;
  border-radius: 8px;
  transition: background-color .25s ease;
}

.operating-sys-section .item img {
  width: 50px;
  margin-bottom: 20px;
}

.operating-sys-section .item .text {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--secondary-font);
  color: #9193a8;
}

@media only screen and (max-width: 1199.98px) {
  .operating-sys-section {
    padding: 60px 0 30px;
  }

  .operating-sys-section .title-1,
  .operating-sys-section .title-1 span,
  .operating-sys-section .title-1 span.primary-color {
    font-size: 36px;
    line-height: 1.4;
  }

  .operating-sys-section .item {
    margin-bottom: 30px;
  }
}

@media only screen and (max-width: 767px) {

  .operating-sys-section .title-1,
  .operating-sys-section .title-1 span,
  .operating-sys-section .title-1 span.primary-color {
    font-size: 26px;
    line-height: 1.2;
  }
}

/* ---------------------------------- */

/* THEME-PLANS-I */
.theme-plans-i .plans {
  border-radius: 12px;
  background-color: var(--semi-dark);
  border: 1px solid var(--border);
}
@media only screen and (max-width: 1199.98px) {
  .theme-plans-i .plans {
    border-radius: unset;
    border: unset;
    background-color: unset !important;
  }
}

/* plan */
.theme-plans-i .plans .plan {
  position: relative;
  padding: 50px 40px 40px;
  background-color: var(--semi-dark-3);
  height: 100%;
  z-index: 2
}
.theme-plans-i .plans .row>div:nth-child(1) .plan {
  border-radius: 12px 0 0 12px;
}
.theme-plans-i .plans .row>div:nth-child(4) .plan {
  border-radius: 0 12px 12px 0;
}
.theme-plans-i .plans .row>div:not(:last-of-type) .plan {
  border-right: 1px solid var(--border);
}
@media only screen and (max-width: 1199.98px) {
  .theme-plans-i .plans {
    background-color: unset;
  }
  .theme-plans-i .plans .row>div .plan {
    border-radius: 12px !important;
    border-right: unset !important
  }
}

/* plan-head */
.theme-plans-i .plans .plan-head {
  padding-bottom: 20px;
}
.theme-plans-i .plans .plan-name {
  font-size: 20px;
  font-family: var(--primary-font);
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.theme-plans-i .plans .plan-para {
  font-size: 14px;
  color: var(--darkGray);
  min-height: 50px
}

/* plan-price */
.theme-plans-i .plans .plan-price {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px
}
.theme-plans-i .plans .plan-price .price {
  font-size: 30px;
  font-family: var(--secondary-font);
  font-weight: 900;
  color: #fff;
}
.theme-plans-i .plans .plan-price .price-comment {
  font-size: 14px;
  color: var(--darkGray);
}

/* actions */
.theme-plans-i .plans .actions {
  padding-bottom: 10px
}

/* group */
.theme-plans-i .plans .group {
  margin-top: 45px;
}
.theme-plans-i .plans .group .title-4 {
  font-size: 16px;
  font-family: var(--secondary-font);
  color: #fff;
  margin-bottom: 20px
}
.theme-plans-i .plans .group .list li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  color: var(--darkGray);
  padding-right: 26px;
}
.theme-plans-i .plans .group .list li:not(last-of-type) {
  margin-bottom: 10px
}
.theme-plans-i .plans .group .list li img {
  margin-right: 10px;
  width: 16px
}

/* float-box */
.theme-plans-i .plans .group .list li .float-box {
  position: absolute;
  top: 2px;
  right: 0;
  width: 18px;
  height: 18px;
}
.theme-plans-i .plans .group .list li .float-box::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  content: '?';
  right: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background-color: var(--semi-dark-2);
  border-radius: 50%;
  font-size: 12px;
  font-family: var(--secondary-font);
  font-weight: 600;
  line-height: 1;
  transition: all .15s ease-in-out;
}
.theme-plans-i .plans .group .list li .float-box:hover::before {
  background-color: rgba(0, 0, 0, .2);
}
.theme-plans-i .plans .group .list li .float-box::after {
  position: absolute;
  content: attr(data-text);
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  width: 280px;
  background-color: var(--semi-dark);
  box-shadow: 0 10px 45px 0 rgba(0, 0, 0, .4);
  white-space: normal;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--darkGray);
  border: 1px solid var(--border);
  border-radius: 4px;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  transition: all .15s ease-in-out;
}
.theme-plans-i .plans .group .list li .float-box:hover::after {
  visibility: visible;
  opacity: 1;
}

/* se-footer */
.theme-plans-i .se-footer .line {
  margin: 6px 12px;
}
.theme-plans-i .se-footer .line .icon {
  min-width: 16px;
  width: 16px;
  margin-right: 10px;
}
.theme-plans-i .se-footer .line .text {
  font-size: 14px;
  color: var(--darkGray);
}

/* ---------------------------------- */

/* PRODUCTS-GROUP-I */
.products-group-i .box {
  background-color: var(--semi-dark);
  border-radius: 8px;
  padding: 35px 30px 10px;
  border: 1px solid var(--border);
  transition: all .20s ease;
}
.products-group-i .box:hover {
  background-color: var(--semi-dark-2);
}
.products-group-i .box-link {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  color: #26c6da;
}
.products-group-i .box .icon {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  overflow: hidden;
}
.products-group-i .box .icon::before {
  position: absolute;
  content: '';
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--primary);
  opacity: .1;
}
.products-group-i .box.color-1 .icon::before {
  background-color: #26C6DA;
}
.products-group-i .box.color-2 .icon::before {
  background-color: #FC573B;
}
.products-group-i .box.color-3 .icon::before {
  background-color: #FFD200;
}
.products-group-i .box.color-4 .icon::before {
  background-color: #BD63F9;
}
.products-group-i .box .icon img {
  width: 34px;
}
.products-group-i .box-title {
  color: #FFFFFF;
  font-size: 20px;
  font-family: var(--secondary-font);
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.2;
  max-width: 160px;
}
.products-group-i .box-para {
  font-size: 14px;
  font-weight: 500;
  color: var(--darkGray);
  line-height: 1.7;
  max-height: 70px;
  height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 25px;
}
.products-group-i .arrow {
  margin-top: 20px;
}
.products-group-i .arrow img {
  width: 24px;
  filter: contrast(0);
  transition: all .15s ease;
}
.products-group-i .box:hover .arrow img {
  filter: contrast(100%);
}
/* ---------------------------------- */

/* DOMAIN-CARD */
.domain-card {
  background-color: var(--semi-dark);
  position: relative;
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 30px;
}
.domain-card .domain-card-link {
  background-color: var(--primary);
  height: 80px;
  border-radius: 50%;
  aspect-ratio: 1/1;
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.domain-card .domain-card-link img {
  width: 30px;
}
.domain-card .domain-card-link:hover {
  background-color: var(--semi-primary);
}
.domain-card .domain-card-title {
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
.domain-card .domain-card-text {
  font-size: 16px;
  color: var(--darkGray);
}
@media only screen and (max-width: 991.98px) {
  .domain-card {
    padding: 40px 30px;
  }
  .domain-card .domain-card-link {
    height: 60px;
  }
  .domain-card .domain-card-link img {
    width: 20px;
  }
}
/* ---------------------------------- */

/* ACTION-BOX */
.action-box {
  position: relative;
  padding: 30px;
  border-radius: 12px;
  background-color: var(--semi-dark);
  border: 1px solid var(--border);
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
  height: 100%;
}
.action-box .box-img {
  width: 70px;
  margin-bottom: 15px;
}
.action-box .box-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.action-box:hover {
  border-color: var(--primary);
}
.action-box .box-link {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
/* ---------------------------------- */

/* :: FOOTER :: */
.theme-footer {
  position: relative;
  background-color: #000;
}
.theme-footer::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right,
  #fd004c,
  #fe9000,
  #fff020,
  #3edf4b,
  #3363ff,
  #b102b7,
  #fd004c
  );
  animation: rainbow-move 20s infinite linear alternate;
}
@keyframes rainbow-move {
  100% {
    background-position-x: 4000px;
  }
}

/* footer-top */
.theme-footer .footer-top {
  padding: 60px 0 20px;
}

/* footer-list-group */
.theme-footer .footer-list-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* footer-list */
.theme-footer .footer-list {
  padding-bottom: 4vh;
}
.theme-footer .footer-list .list-title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.theme-footer .footer-list .list-link:nth-child(2) {
  margin-top: 20px;
}
.theme-footer .footer-list .list-link:not(:last-of-type) {
  margin-bottom: 12px;
}
.theme-footer .footer-list .list-link > a {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray);
}
.theme-footer .footer-list .list-link > a:hover {
  text-decoration: underline;
  color: #fff;
}
@media only screen and (max-width: 1199.98px) {
  .theme-footer .footer-list-group {
    justify-content: flex-start;
  }
  .theme-footer .footer-list {
    min-width: 25%;
  }
}
@media only screen and (max-width: 991.98px) {
  .theme-footer .footer-list {
    min-width: 33.33%;
  }
}
@media only screen and (max-width: 767.98px) {
  .theme-footer .footer-list {
    min-width: 100%;
  }
  .theme-footer .footer-list .list-title::before,
  .theme-footer .footer-list .list-title::after {
    position: absolute;
    content: '';
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ffffff;
  }
  .theme-footer .footer-list .list-title::before {
    width: 10px;
    height: 2px;
  }
  .theme-footer .footer-list .list-title::after {
    height: 10px;
    width: 2px;
    right: 4px;
  }
  .theme-footer .footer-list.open-list .list-title::after {
    display: none;
  }
  .theme-footer .footer-list .list-link {
    display: none;
  }
  .theme-footer .footer-list.open-list .list-link {
    display: block;
  }
}

/* reg-bar */
.theme-footer .reg-bar {
  padding: 30px 40px;
  background-color: #2C2891;
  background-image: url(./../images/shared/shape.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 12px;
}
.theme-footer .reg-bar .title-4 {
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15px;
}
.theme-footer .reg-bar .para-2 {
  font-size: 16px;
  font-weight: 500;
  color: var(--gray);
}
@media only screen and (max-width: 767.98px) {
  .theme-footer .reg-bar .title-4 {
    font-size: 22px;
  }
  .theme-footer .reg-bar .para-2 {
    font-size: 14px;
  }
}

/* footer-bottom */
.theme-footer .footer-bottom {
  padding: 60px 0;
}

/* content */
@media only screen and (max-width: 991.98px) {
  .theme-footer .footer-bottom .content {
    flex-wrap: wrap;
  }
}

/* logo */
.theme-footer .footer-bottom .logo {
  margin-right: 40px;
}
.theme-footer .footer-bottom .logo img {
  min-width: 120px;
  width: 120px;
}

/* links */
.theme-footer .footer-bottom .links {
  margin-bottom: 4px;
}
.theme-footer .footer-bottom .links li {
  position: relative;
}
.theme-footer .footer-bottom .links li:not(:last-of-type) {
  margin-right: 20px;
}
.theme-footer .footer-bottom .links li:not(:last-of-type)::after {
  position: absolute;
  content: '';
  right: -11px;
  top: 3px;
  bottom: 3px;
  width: 1px;
  background-color: rgba(255, 255, 255, .3);
}
.theme-footer .footer-bottom .links li a {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}
.theme-footer .footer-bottom .links li a:hover {
  text-decoration: underline;
}

/* para-3 */
.theme-footer .footer-bottom .para-3 {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray);
}
.theme-footer .footer-bottom .para-3 a {
  color: #ffffff;
  font-weight: 500;
}
.theme-footer .footer-bottom .para-3 a:hover {
  text-decoration: underline;
}

/* social-list */
.theme-footer .footer-bottom .social-list li:not(:last-of-type) {
  margin-right: 10px;
}
.theme-footer .footer-bottom .social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.theme-footer .footer-bottom .social-list a:hover {
  opacity: .7;
}
.theme-footer .footer-bottom .social-list a img {
  min-width: 28px;
  width: 28px;
}
/* ----------------------------------- */

/* CUSTOM-FEA-TLDS */
.custom-fea-tlds .custom-fea-tld {
  padding: 30px 15px 30px 15px;
  background-color: var(--semi-dark);
  border-radius: 4px;
}
.custom-fea-tlds .custom-fea-tld-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}
.custom-fea-tlds .custom-fea-tld-title>span {
  font-size: 26px;
  font-weight: 600;
  color: var(--mint);
}
.custom-fea-tlds .price .text {
  color: var(--darkGray);
  font-size: 14px;
  margin-bottom: 5px;
}
.custom-fea-tlds .price {
  font-size: 16px;
  color: #fff;
  margin-top: 20px;
  font-weight: bold;
  font-family: var(--third-font);
}
/* ----------------------------------- */

/* SPOTLIGHT-TLDS */
.spotlight-tlds {
  background-color: var(--semi-dark) !important;
}
.spotlight-tlds .spotlight-tld {
  background-color: var(--semi-dark-2) !important;
  border-color: var(--border) !important;
  color: #fff !important;
}
.spotlight-tld .btn:not(.domain-contact-support) {
  background-color: var(--primary) !important;
}
.spotlight-tld .btn:not(.domain-contact-support):not(.unavailable):hover {
  background-color: var(--semi-primary) !important;
}
/* ----------------------------------- */

/* FILTER-TAB */
a.filter-tab {
  color: #fff;
  font-size: 14px;
  border: 1px solid var(--border);
  padding: 14px 28px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  background-color: var(--semi-dark-3);
  transition: all .15s cubic-bezier(0.215, 0.610, 0.355, 1);
}
a.filter-tab.--sm-tab {
  padding: 8px 14px;
}
a.filter-tab.active {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}
a.filter-tab:not(.active):hover {
  background-color: var(--semi-dark-2);
}
/* ----------------------------------- */

/* CUSTOM-TABLE */
.custom-table-container {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
}
.custom-th-table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  background-color: var(--semi-dark);
  border-radius: 12px;
}
.custom-th-table::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  z-index: -1;
}


/* table-title-1 */
.custom-th-table .custom-thead .tab-content .table-title-1 {
  display: block;
  font-size: 32px;
  color: #fff;
  font-weight: bold;
}

.custom-th-table .custom-thead .tab-content .table-title-1 .coin {
  position: relative;
  font-size: 24px;
  vertical-align: top;
  margin-right: 5px;
}
.custom-th-table .custom-thead .tab-content .table-title-1 .sm-text {
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
  margin-left: 5px;
  color: var(--darkGray);
}

/* thead */
.custom-th-table thead th {
  padding: 30px 30px 40px;
}
.custom-th-table thead tr:first-child th:first-child {
  border-top-left-radius: 12px;
}
.custom-th-table thead th:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* top-left-corner */
.custom-th-table thead th.top-left-corner {
  min-width: 300px;
  width: 300px;
  text-align: left;
  vertical-align: top;
}
.custom-th-table thead th.top-left-corner .table-title-head {
  display: block;
  font-size: 32px;
  color: #fff;
  line-height: 1.2;
  font-family: var(--primary-font);
  font-weight: bold;
}
.custom-th-table thead th.top-left-corner .table-title-head span {
  letter-spacing: -9px;
  display: inline-block;
}
@media only screen and (max-width: 1199.98px) {
  .custom-th-table thead th.top-left-corner {
    min-width: 200px;
    width: 200px;
  }
  .custom-th-table thead th.top-left-corner .table-title-head {
    font-size: 22px;
  }
}

/* top-right-corner */
.custom-th-table thead th.top-right-corner {
  min-width: 25%;
  width: 25%;
  text-align: center;
}

/* table-title-3 */
.custom-th-table thead th.top-right-corner .table-title-3 {
  display: block;
  color: #fff;
  font-size: 17px;
  font-family: var(--primary-font);
  font-weight: bold;
}
@media only screen and (max-width: 1199.98px) {
  .custom-th-table thead th.top-right-corner .table-title-3 {
    font-size: 16px;
    font-weight: 600;
  }
}

/* table-title-4 */
.custom-th-table thead th.top-right-corner .table-title-4 {
  font-size: 14px;
  color: #fff;
  font-weight: bold;
}

/* highlighted */
.custom-th-table tbody tr.highlighted {
  background-color: var(--semi-dark-3);
}
.custom-th-table tbody tr.highlighted td {
  border-bottom: 0;
  border-right: 1px solid var(--border) !important;
  font-weight: 500;
}
.custom-th-table tbody tr.highlighted td:last-child {
  border-right: 0 !important;
}

/* t-space */
.custom-th-table tbody tr.t-space {
  border: 0 !important;
}
.custom-th-table tbody tr.t-space td {
  border: 0 !important;
}

/* tbody > tr > td */
.custom-th-table tbody tr td {
  position: relative;
  padding: 15px 30px;
  color: var(--darkGray);
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.custom-th-table tbody tr td.left-corner {
  color: #fff;
}
.custom-th-table tbody tr td:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* left-corner */
.custom-th-table tbody .left-corner {
  min-width: 300px;
  width: 300px;
  font-weight: 600;
}
@media only screen and (max-width: 1199.98px) {
  .custom-th-table tbody .left-corner {
    min-width: 200px;
    width: 200px;
  }
}

/* td-small */
.custom-th-table tbody .td-small {
  font-weight: 600;
}
/* right-corner */
.custom-th-table tbody .right-corner {
  min-width: 25%;
  width: 25%;
  text-align: center;
}
@media only screen and (max-width: 767.98px) {
  .custom-th-table tbody .right-corner {
    min-width: 200px;
    width: 200px;
  }
}

/* no-tlds-div */
.no-tlds-div {
  font-size: 16px;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-weight: 600;
}
.spotlight-tlds {
  border: 1px solid var(--border) !important;
  background-color: var(--semi-dark-3) !important;
  border-radius: 4px;
}
.spotlight-tld .btn:not(.domain-contact-support) {
  background-color: var(--primary) !important;
  border-color: var(--primary);
}
/* ----------------------------------- */

/* DOMAIN-PROMO-BOX */
.domain-promo-box {
  background-color: var(--semi-dark) !important;
  border-color: var(--border) !important;
  color: var(--darkGray) !important;
}
.domain-promo-box h3 {
  font-size: 18px !important;
  color: #fff !important;
  font-weight: bold !important;
}
.domain-promo-box i {
  color: var(--primary);
}
/* ----------------------------------- */

/* ANNOUNCEMENTS */
.announcements .announcement {
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.announcements .announcement article {
  background-color: var(--semi-dark-2);
}
/* ----------------------------------- */

/* PAFINATION */
.pagination .page-item .page-link {
  background-color: var(--semi-dark);
  border: 1px solid var(--border);
}
.page-item.active .page-link {
  background-color: var(--primary);
}
.page-item.disabled .page-link {
  opacity: .5;
}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover,
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--border);
}
.list-group-item {
  background-color: var(--semi-dark);
}
/* ----------------------------------- */

/* LOCALISATION */
.modal-localisation .modal-content {
  background-color: var(--semi-dark);
}

.modal-localisation .modal-body {
  background: unset;
}

.modal-localisation .h5 {
  color: #fff;
  font-weight: 600;
  padding: 20px 0;
}

.modal-localisation .item-selector .item {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #FFF !important;
}

.modal-localisation .item-selector .item:hover {
  background-color: var(--semi-dark-2);
}

.modal-localisation .item-selector .item.active {
  border-color: var(--primary);
  background-color: var(--primary);
  color: #fff;
}
/* ----------------------------------- */

/* APNCLOUD LIGHT/DARK THEME OVERRIDES */
:root.dark-theme,
:root .dark-theme,
html.dark-theme,
body.dark-theme,
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Semantic surfaces — frontend teal-darks for zero-friction parity */
  --surface: #0e2227;
  --card: #16333a;
  --heading: #f8fafc;
  --text: #e7eef0;
  --muted: #9fb2b5;
  --text-muted: #9fb2b5;
  --gray: #9fb2b5;
  --darkGray: #c7d4d6;
  --border: #21464f;
  --light: #16333a;
  /* literal alias needs a dark value (the var()-based aliases auto-flip) */
  --bg-secondary: #132b31;
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  /* Deeper shadows read better on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, .55);
}

html.light-theme,
body.light-theme {
  color-scheme: light;
}

html.dark-theme,
body.dark-theme {
  color-scheme: dark;
}

body.light-theme,
body.light-theme.primary-bg-color {
  background: var(--surface);
  color: var(--text);
}

html.dark-theme body,
body.dark-theme,
body.dark-theme.primary-bg-color {
  background: var(--surface);
  color: var(--text);
}

body.light-theme p,
body.light-theme .text-muted,
body.light-theme .small,
body.light-theme small {
  color: var(--gray) !important;
}

html.dark-theme body p,
body.dark-theme p,
html.dark-theme body .text-muted,
body.dark-theme .text-muted,
html.dark-theme body .small,
body.dark-theme .small,
html.dark-theme body small,
body.dark-theme small {
  color: var(--darkGray) !important;
}

body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6,
body.light-theme .header-lined h1,
body.light-theme .se-head .se-title-2,
body.light-theme .products-headline .title-1,
body.light-theme .card-title,
body.light-theme .client-home-cards .card-title,
body.light-theme .mc-promo-manage .panel-heading h3,
body.light-theme .mc-promo-login .panel-heading h3 {
  color: var(--darkBlue) !important;
}

html.dark-theme body h1,
html.dark-theme body h2,
html.dark-theme body h3,
html.dark-theme body h4,
html.dark-theme body h5,
html.dark-theme body h6,
body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
html.dark-theme body .header-lined h1,
body.dark-theme .header-lined h1,
html.dark-theme body .se-head .se-title-2,
body.dark-theme .se-head .se-title-2,
html.dark-theme body .products-headline .title-1,
body.dark-theme .products-headline .title-1 {
  color: var(--heading) !important;
}

body.light-theme a:not(.theme-btn):not(.btn):not(.page-link):not(.dropdown-item),
body.light-theme .card a:not(.btn):not(.theme-btn),
body.light-theme .list-group-item a:not(.btn) {
  color: var(--semi-dark);
}

body.light-theme a:not(.theme-btn):not(.btn):not(.page-link):not(.dropdown-item):hover,
body.light-theme .card a:not(.btn):not(.theme-btn):hover,
body.light-theme .list-group-item a:not(.btn):hover {
  color: var(--primary);
}

.primary-bg-color {
  background-color: var(--light);
}

html.dark-theme body .primary-bg-color,
body.dark-theme .primary-bg-color {
  background-color: var(--darkBlue);
}

.rounded {
  border-radius: 4px !important;
}

.theme-btn,
.btn,
.form-control,
.custom-select,
.card,
.list-group-item,
.modal-content,
.dropdown-menu,
.page-link {
  border-radius: 4px;
}

.theme-btn {
  letter-spacing: 0;
  box-shadow: none;
}

.--fill-primary,
.btn-primary,
.btn-success,
.home-domain-search .input-group-wrapper .btn,
.spotlight-tld .btn:not(.domain-contact-support),
.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.--fill-primary:hover,
.btn-primary:hover,
.btn-success:hover,
.home-domain-search .input-group-wrapper .btn:hover,
.spotlight-tld .btn:not(.domain-contact-support):not(.unavailable):hover {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

body.light-theme .--outline-dark,
body.light-theme .btn-default,
body.light-theme .btn-secondary,
body.light-theme .btn-outline-primary {
  background: #fff;
  border-color: var(--border);
  color: var(--darkBlue) !important;
}

body.light-theme .--outline-dark:hover,
body.light-theme .btn-default:hover,
body.light-theme .btn-secondary:hover,
body.light-theme .btn-outline-primary:hover {
  background: var(--light);
  border-color: var(--primary);
  color: var(--primary) !important;
}

html.dark-theme body .--outline-dark,
body.dark-theme .--outline-dark,
html.dark-theme body .btn-default,
body.dark-theme .btn-default,
html.dark-theme body .btn-secondary,
body.dark-theme .btn-secondary {
  background: var(--semi-dark);
  border-color: var(--border);
  color: #fff !important;
}

header.header .topbar,
.news-area {
  background: var(--primary);
  color: #fff;
}

header.header .topbar .btn,
header.header .topbar .input-group-text,
.news-area .news .link,
.news-area .links .item a {
  color: #fff !important;
}

.news-area .news .badge {
  background: var(--darkBlue) !important;
  color: #fff;
}

.theme-navbar {
  background-color: var(--darkBlue);
  border-bottom-color: rgba(255, 255, 255, .12);
}

.theme-navbar .nav-top {
  border-bottom-color: rgba(255, 255, 255, .1);
}

.theme-navbar .options .c-link .text,
.theme-navbar .nav-bottom .info .item .text,
.theme-navbar .nav-bottom .links .link > a,
.theme-navbar .lang .current {
  color: rgba(255, 255, 255, .86);
}

.theme-navbar .options .c-link:hover .text,
.theme-navbar .nav-bottom .links .link > a:hover,
.theme-navbar .nav-bottom .links .link.show .dropdown-toggle,
.theme-navbar .lang .current:hover {
  color: #fff;
}

.theme-navbar .nav-bottom .links .link > a:hover,
.theme-navbar .nav-bottom .links .link.show .dropdown-toggle {
  background-color: var(--semi-dark);
}

.theme-navbar .nav-bottom .links .link .dropdown-menu,
.theme-navbar .second-options .user-dropdown-menu {
  background-color: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(16, 40, 47, .16);
}

.theme-navbar .second-options .user-dropdown-menu::before {
  background-color: #fff;
  border-color: #fff;
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link,
.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .title-2 {
  color: var(--darkBlue);
}

.theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link:hover,
.theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .uddm-link {
  color: var(--primary);
}

@media only screen and (max-width: 1199.98px) {
  .theme-navbar .nav-bottom .links {
    background-color: var(--darkBlue);
    border-right-color: rgba(255, 255, 255, .12);
  }

  .theme-navbar .nav-bottom .links .link > a {
    color: #fff;
  }
}

.theme-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 4px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.theme-mode-toggle:hover,
.theme-mode-toggle:focus {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .45);
  outline: none;
}

.theme-mode-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.theme-mode-toggle__icon--dark,
html.dark-theme .theme-mode-toggle__icon--light,
body.dark-theme .theme-mode-toggle__icon--light {
  display: none;
}

html.dark-theme .theme-mode-toggle__icon--dark,
body.dark-theme .theme-mode-toggle__icon--dark {
  display: inline-flex;
}

.theme-mode-toggle--mobile {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  margin-left: 4px;
}

.theme-mode-toggle--mobile .theme-mode-toggle__text {
  display: none;
}

.master-breadcrumb {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.master-breadcrumb .breadcrumb,
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--gray);
}

.breadcrumb-item.active {
  color: var(--darkBlue);
}

html.dark-theme body .master-breadcrumb,
body.dark-theme .master-breadcrumb {
  background: var(--semi-dark-3);
  border-bottom-color: var(--border);
}

html.dark-theme body .breadcrumb-item.active,
body.dark-theme .breadcrumb-item.active {
  color: #fff;
}

#main-body,
.main-container {
  background: transparent;
}

body.light-theme .card,
body.light-theme .mc-promo-manage,
body.light-theme .mc-promo-login,
body.light-theme .panel,
body.light-theme .list-group-item,
body.light-theme .client-home-cards .card,
body.light-theme .homepage-features-section .box,
body.light-theme .domain-card,
body.light-theme .custom-fea-tlds .custom-fea-tld,
body.light-theme .domain-promo-box,
body.light-theme .spotlight-tlds,
body.light-theme .spotlight-tlds .spotlight-tld,
body.light-theme .custom-th-table,
body.light-theme .custom-table-container,
body.light-theme .announcements .announcement article {
  background-color: #fff !important;
  border-color: var(--border) !important;
  color: var(--darkBlue) !important;
  box-shadow: 0 10px 28px rgba(16, 40, 47, .06);
}

html.dark-theme body .card,
body.dark-theme .card,
html.dark-theme body .mc-promo-manage,
body.dark-theme .mc-promo-manage,
html.dark-theme body .mc-promo-login,
body.dark-theme .mc-promo-login,
html.dark-theme body .panel,
body.dark-theme .panel,
html.dark-theme body .list-group-item,
body.dark-theme .list-group-item,
html.dark-theme body .client-home-cards .card,
body.dark-theme .client-home-cards .card,
html.dark-theme body .homepage-features-section .box,
body.dark-theme .homepage-features-section .box,
html.dark-theme body .domain-card,
body.dark-theme .domain-card,
html.dark-theme body .custom-fea-tlds .custom-fea-tld,
body.dark-theme .custom-fea-tlds .custom-fea-tld,
html.dark-theme body .domain-promo-box,
body.dark-theme .domain-promo-box,
html.dark-theme body .spotlight-tlds,
body.dark-theme .spotlight-tlds,
html.dark-theme body .custom-th-table,
body.dark-theme .custom-th-table {
  background-color: var(--semi-dark) !important;
  border-color: var(--border) !important;
  color: #fff !important;
  box-shadow: none;
}

body.light-theme .card-header,
body.light-theme .card-footer,
body.light-theme .client-home-cards .card-header,
body.light-theme .card-sidebar .list-group-item:not(.active):hover,
body.light-theme table.table-list thead th,
body.light-theme .dataTables_wrapper table.table-list thead th.sorting_asc,
body.light-theme .dataTables_wrapper table.table-list thead th.sorting_desc {
  background-color: #fff7f1 !important;
  border-color: var(--border) !important;
  color: var(--darkBlue) !important;
}

html.dark-theme body .card-header,
body.dark-theme .card-header,
html.dark-theme body .card-footer,
body.dark-theme .card-footer,
html.dark-theme body .client-home-cards .card-header,
body.dark-theme .client-home-cards .card-header,
html.dark-theme body table.table-list thead th,
body.dark-theme table.table-list thead th {
  background-color: var(--semi-dark-2) !important;
  border-color: var(--border) !important;
  color: #fff !important;
}

body.light-theme .form-control,
body.light-theme .custom-select,
body.light-theme .input-group-text,
body.light-theme select,
body.light-theme textarea,
body.light-theme input[type="text"],
body.light-theme input[type="email"],
body.light-theme input[type="password"],
body.light-theme input[type="search"] {
  background-color: #fff !important;
  border-color: var(--border) !important;
  color: var(--darkBlue) !important;
}

body.light-theme .form-control:focus,
body.light-theme .custom-select:focus,
body.light-theme textarea:focus,
body.light-theme input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(252, 93, 7, .12) !important;
}

html.dark-theme body .form-control,
body.dark-theme .form-control,
html.dark-theme body .custom-select,
body.dark-theme .custom-select,
html.dark-theme body .input-group-text,
body.dark-theme .input-group-text,
html.dark-theme body select,
body.dark-theme select,
html.dark-theme body textarea,
body.dark-theme textarea,
html.dark-theme body input[type="text"],
body.dark-theme input[type="text"],
html.dark-theme body input[type="email"],
body.dark-theme input[type="email"],
html.dark-theme body input[type="password"],
body.dark-theme input[type="password"],
html.dark-theme body input[type="search"],
body.dark-theme input[type="search"] {
  background-color: var(--semi-dark-2) !important;
  border-color: var(--border) !important;
  color: #fff !important;
}

body.light-theme .table,
body.light-theme .table td,
body.light-theme .table th,
body.light-theme table.table-list tbody td,
body.light-theme .custom-th-table tbody tr td,
body.light-theme .custom-th-table tbody tr td.left-corner {
  color: var(--darkBlue) !important;
  border-color: var(--border) !important;
}

body.light-theme .table-striped tbody tr:nth-of-type(odd),
body.light-theme .table-list > tbody > tr > td,
body.light-theme .custom-th-table tbody tr.highlighted {
  background-color: #fffaf6 !important;
}

body.light-theme .table-hover tbody tr:hover,
body.light-theme .table-list > tbody > tr:hover > td {
  background-color: #fff3e9 !important;
}

html.dark-theme body .table,
body.dark-theme .table,
html.dark-theme body .table td,
body.dark-theme .table td,
html.dark-theme body .table th,
body.dark-theme .table th,
html.dark-theme body table.table-list tbody td,
body.dark-theme table.table-list tbody td,
html.dark-theme body .custom-th-table tbody tr td,
body.dark-theme .custom-th-table tbody tr td {
  color: var(--darkGray) !important;
  border-color: var(--border) !important;
}

body.light-theme .card-sidebar .list-group-item.active,
body.light-theme .card-sidebar .list-group-item.active:hover,
body.light-theme .card-sidebar .list-group-item.active:focus {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

body.light-theme .alert-info,
body.light-theme .alert-warning,
body.light-theme .verification-banner {
  background-color: #fff7f1;
  border-color: var(--border);
  color: var(--darkBlue);
}

.theme-footer {
  background-color: var(--darkBlue);
  color: #fff;
}

.theme-footer::before {
  opacity: .25;
}

.theme-footer .footer-list .list-title,
.theme-footer .reg-bar .title-4,
.theme-footer .footer-bottom .links li a {
  color: #fff;
}

.theme-footer .footer-list .list-link > a,
.theme-footer .reg-bar .para-2,
.theme-footer .footer-bottom .para-3,
.theme-footer .footer-bottom .para-3 a {
  color: rgba(255, 255, 255, .68);
}

.theme-footer .footer-list .list-link > a:hover,
.theme-footer .footer-bottom .links li a:hover,
.theme-footer .footer-bottom .para-3 a:hover {
  color: var(--gold);
}

.theme-footer .reg-bar {
  background: var(--semi-dark-3);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}

.modal-localisation .modal-content,
.modal-content {
  background-color: #fff;
  border: 1px solid var(--border);
  color: var(--darkBlue);
}

.modal-localisation .h5,
.modal-title {
  color: var(--darkBlue);
}

.modal-localisation .item-selector .item {
  color: var(--darkBlue) !important;
}

.modal-localisation .item-selector .item:hover {
  background-color: #fff7f1;
}

html.dark-theme body .modal-localisation .modal-content,
body.dark-theme .modal-localisation .modal-content,
html.dark-theme body .modal-content,
body.dark-theme .modal-content {
  background-color: var(--semi-dark);
  border-color: var(--border);
  color: #fff;
}

html.dark-theme body .modal-localisation .h5,
body.dark-theme .modal-localisation .h5,
html.dark-theme body .modal-title,
body.dark-theme .modal-title,
html.dark-theme body .modal-localisation .item-selector .item,
body.dark-theme .modal-localisation .item-selector .item {
  color: #fff !important;
}
/* ----------------------------------- */

/* FRONTEND-MATCHED LIGHT MODE FIXES */
body.light-theme .theme-navbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--darkBlue);
}

body.light-theme .theme-navbar .nav-top {
  border-bottom: 1px solid var(--border) !important;
}

body.light-theme .theme-navbar .brand,
body.light-theme .theme-navbar .options .c-link .text,
body.light-theme .theme-navbar .nav-bottom .info .item .text,
body.light-theme .theme-navbar .nav-bottom .links .link > a,
body.light-theme .theme-navbar .lang .current {
  color: var(--darkBlue) !important;
}

body.light-theme .theme-navbar .options .c-link:hover .text,
body.light-theme .theme-navbar .nav-bottom .links .link > a:hover,
body.light-theme .theme-navbar .nav-bottom .links .link.show .dropdown-toggle,
body.light-theme .theme-navbar .lang .current:hover {
  color: var(--primary) !important;
}

body.light-theme .theme-navbar .nav-bottom .links .link > a:hover,
body.light-theme .theme-navbar .nav-bottom .links .link.show .dropdown-toggle {
  background-color: var(--light) !important;
}

body.light-theme .theme-navbar .options .c-link .icon,
body.light-theme .theme-navbar .nav-bottom .info .item img,
body.light-theme .theme-navbar .nav-top .menu-icon img,
body.light-theme .theme-navbar .second-options .icon,
body.light-theme .theme-navbar .theme-btn.--circle-btn img,
body.light-theme .theme-navbar .lang .current img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(18%) saturate(1118%) hue-rotate(144deg) brightness(92%) contrast(91%);
}

body.light-theme .theme-navbar .theme-mode-toggle,
body.light-theme .theme-navbar .--outline-dark {
  background-color: var(--light) !important;
  border-color: var(--border) !important;
  color: var(--darkBlue) !important;
}

body.light-theme .theme-navbar .theme-mode-toggle:hover,
body.light-theme .theme-navbar .--outline-dark:hover {
  background-color: #fff7f1 !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

body.light-theme .theme-navbar .theme-mode-toggle {
  box-shadow: none;
}

.theme-navbar .theme-mode-toggle {
  width: 46px;
  min-width: 46px;
  padding: 0 !important;
  border-radius: 50px;
}

.theme-navbar .theme-mode-toggle__text {
  display: none;
}

body.light-theme .theme-navbar .dropdown-menu,
body.light-theme .theme-navbar .nav-bottom .links .link .dropdown-menu,
body.light-theme .theme-navbar .second-options .user-dropdown-menu {
  background-color: #fff !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 8px rgba(16, 40, 47, .1) !important;
}

body.light-theme .theme-navbar .second-options .user-dropdown-menu::before {
  background-color: #fff !important;
  border-color: var(--border) !important;
}

body.light-theme .theme-navbar .dropdown-item,
body.light-theme .theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link,
body.light-theme .theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .title-2 {
  color: var(--darkBlue) !important;
}

body.light-theme .theme-navbar .nav-bottom .links .link .dropdown-menu .dm-link:hover,
body.light-theme .theme-navbar .second-options .user-dropdown-menu .uddm-link-parent .uddm-link {
  color: var(--primary) !important;
}

@media only screen and (max-width: 1199.98px) {
  body.light-theme .theme-navbar .nav-bottom .links {
    background-color: #fff !important;
    border-right: 1px solid var(--border) !important;
  }

  body.light-theme .theme-navbar .nav-bottom .links .link > a {
    color: var(--darkBlue) !important;
  }

  body.light-theme .theme-navbar .nav-bottom .links .link:hover > a,
  body.light-theme .theme-navbar .nav-bottom .links .link.active > a,
  body.light-theme .theme-navbar .nav-bottom .links .link.open-dropdown-menu > a {
    color: var(--primary) !important;
    background-color: var(--light) !important;
  }
}

body.light-theme .main-header {
  background-color: #dff3fb !important;
  background-image:
          radial-gradient(circle at 78% 18%, rgba(255, 140, 68, .46) 0 14%, transparent 34%),
          radial-gradient(circle at 88% 72%, rgba(252, 93, 7, .18) 0 13%, transparent 32%),
          radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .95) 0 12%, transparent 31%),
          linear-gradient(135deg, #f7fcff 0%, #dff3fb 48%, #bfe9f7 100%) !important;
  background-position: center !important;
}

body.light-theme .main-header .title-1 {
  color: var(--darkBlue) !important;
}

body.light-theme .main-header .para-1 {
  color: var(--darkGray) !important;
}

body.light-theme .main-header .notify {
  background-color: #fff !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.light-theme .main-header .notify .icon {
  background-color: var(--light) !important;
}

body.light-theme .main-header .notify .text {
  color: var(--darkGray) !important;
}

body.light-theme .main-header .header-form {
  background-color: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 28px rgba(16, 40, 47, .08) !important;
}

body.light-theme .main-header .form-title {
  color: var(--darkBlue) !important;
}

body.light-theme .main-header .form-label input {
  background-color: var(--light) !important;
  border-color: var(--border) !important;
  color: var(--darkBlue) !important;
}

body.light-theme .main-header .form-label input:hover,
body.light-theme .main-header .form-label input:focus {
  background-color: #fff !important;
  border-color: var(--primary) !important;
}

body.light-theme .main-header .form-label input::placeholder {
  color: rgba(22, 51, 58, .42) !important;
}

body.light-theme .main-header .form-comment {
  color: var(--gray) !important;
}

body.light-theme .homepage-features-section,
body.light-theme .operating-sys-section,
body.light-theme .theme-plans-i,
body.light-theme .products-group-i,
body.light-theme .actions-section,
body.light-theme .bg-1,
body.light-theme .bg-2 {
  background-color: var(--light) !important;
  color: var(--darkBlue) !important;
}

body.light-theme .homepage-features-section .box,
body.light-theme .operating-sys-section .item,
body.light-theme .theme-plans-i .plans,
body.light-theme .theme-plans-i .plans .plan,
body.light-theme .products-group-i .box,
body.light-theme .action-box,
body.light-theme .domain-card {
  background-color: #fff !important;
  border-color: var(--border) !important;
  color: var(--darkBlue) !important;
  box-shadow: none !important;
}

body.light-theme .homepage-features-section .box-title,
body.light-theme .operating-sys-section .title-1,
body.light-theme .operating-sys-section .title-1 span,
body.light-theme .operating-sys-section .item .text,
body.light-theme .theme-plans-i .plans .plan-name,
body.light-theme .theme-plans-i .plans .plan-price .price,
body.light-theme .theme-plans-i .plans .group .title-4,
body.light-theme .products-group-i .box-title,
body.light-theme .action-box .box-text,
body.light-theme .domain-card-title,
body.light-theme .custom-fea-tlds .custom-fea-tld-title,
body.light-theme .custom-th-table .custom-thead .tab-content .table-title-1,
body.light-theme .custom-th-table thead th.top-left-corner .table-title-head,
body.light-theme .custom-th-table thead th.top-right-corner .table-title-3,
body.light-theme .custom-th-table thead th.top-right-corner .table-title-4 {
  color: var(--darkBlue) !important;
}

body.light-theme .operating-sys-section .para-1,
body.light-theme .theme-plans-i .plans .plan-para,
body.light-theme .theme-plans-i .plans .plan-price .price-comment,
body.light-theme .theme-plans-i .plans .group .list li,
body.light-theme .theme-plans-i .se-footer .line .text,
body.light-theme .products-group-i .box-para,
body.light-theme .domain-card-text {
  color: var(--gray) !important;
}

body.light-theme .theme-plans-i .plans .plan-price,
body.light-theme .theme-plans-i .plans .row > div:not(:last-of-type) .plan {
  border-color: var(--border) !important;
}

body.light-theme .theme-plans-i .plans .group .list li .float-box::before {
  background-color: var(--light) !important;
  color: var(--darkBlue) !important;
}

body.light-theme .theme-plans-i .plans .group .list li .float-box::after {
  background-color: #fff !important;
  border-color: var(--border) !important;
  color: var(--gray) !important;
  box-shadow: 0 2px 15px #dde5eb !important;
}

body.light-theme .products-group-i .box:hover,
body.light-theme .action-box:hover,
body.light-theme .domain-card:hover {
  background-color: var(--light) !important;
}

body.light-theme .products-group-i .arrow img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(18%) saturate(1118%) hue-rotate(144deg) brightness(92%) contrast(91%) !important;
}

body.light-theme .homepage-features-section .box-icon {
  filter: invert(1);
}

body.light-theme .theme-footer {
  background-color: var(--darkBlue) !important;
  color: #fff !important;
}

body.light-theme .theme-footer::before {
  opacity: 1;
  background: linear-gradient(to right,
  #fc5d07,
  #ff8c44,
  #fff7ef,
  var(--primary),
  #bfe9f7,
  #d94a32,
  #fc5d07
  ) !important;
}

body.light-theme .theme-footer .footer-list .list-title,
body.light-theme .theme-footer .reg-bar .title-4,
body.light-theme .theme-footer .footer-bottom .links li a,
body.light-theme .theme-footer .footer-bottom .para-3 a {
  color: #fff !important;
}

body.light-theme .theme-footer .footer-list .list-link > a,
body.light-theme .theme-footer .reg-bar .para-2,
body.light-theme .theme-footer .footer-bottom .para-3,
body.light-theme .theme-footer .footer-bottom .copyright,
body.light-theme .theme-footer .footer-bottom .signature {
  color: rgba(255, 255, 255, .68) !important;
}

body.light-theme .theme-footer .footer-list .list-link > a:hover,
body.light-theme .theme-footer .footer-bottom .links li a:hover,
body.light-theme .theme-footer .footer-bottom .para-3 a:hover {
  color: var(--gold) !important;
}

body.light-theme .theme-footer .footer-bottom .links li:not(:last-of-type)::after {
  background-color: rgba(255, 255, 255, .28) !important;
}

body.light-theme .theme-footer .reg-bar {
  background-color: #10282f !important;
  background-image:
          radial-gradient(circle at 84% 18%, rgba(255, 140, 68, .38), transparent 34%),
          linear-gradient(135deg, #10282f 0%, #16333a 58%, #21464f 100%) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  box-shadow: none !important;
}

body.light-theme .theme-footer .footer-bottom .social-list a {
  background-color: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
}

body.light-theme .theme-footer .footer-bottom .social-list a:hover {
  background-color: rgba(255, 140, 68, .18) !important;
  opacity: 1;
}

body.light-theme .theme-footer .footer-bottom .social-list a img {
  filter: invert(1);
}

@media only screen and (max-width: 767.98px) {
  body.light-theme .theme-footer .footer-list .list-title::before,
  body.light-theme .theme-footer .footer-list .list-title::after {
    background-color: #fff !important;
  }
}

html.dark-theme body .theme-navbar,
body.dark-theme .theme-navbar {
  background-color: var(--darkBlue) !important;
  border-bottom-color: rgba(255, 255, 255, .12) !important;
}

html.dark-theme body .theme-navbar .nav-top,
body.dark-theme .theme-navbar .nav-top {
  border-bottom-color: rgba(255, 255, 255, .1) !important;
}

html.dark-theme body .theme-navbar .brand,
body.dark-theme .theme-navbar .brand,
html.dark-theme body .theme-navbar .options .c-link .text,
body.dark-theme .theme-navbar .options .c-link .text,
html.dark-theme body .theme-navbar .nav-bottom .info .item .text,
body.dark-theme .theme-navbar .nav-bottom .info .item .text,
html.dark-theme body .theme-navbar .nav-bottom .links .link > a,
body.dark-theme .theme-navbar .nav-bottom .links .link > a,
html.dark-theme body .theme-navbar .lang .current,
body.dark-theme .theme-navbar .lang .current {
  color: rgba(255, 255, 255, .86) !important;
}

html.dark-theme body .theme-navbar .options .c-link .icon,
body.dark-theme .theme-navbar .options .c-link .icon,
html.dark-theme body .theme-navbar .nav-bottom .info .item img,
body.dark-theme .theme-navbar .nav-bottom .info .item img,
html.dark-theme body .theme-navbar .nav-top .menu-icon img,
body.dark-theme .theme-navbar .nav-top .menu-icon img,
html.dark-theme body .theme-navbar .second-options .icon,
body.dark-theme .theme-navbar .second-options .icon,
html.dark-theme body .theme-navbar .theme-btn.--circle-btn img,
body.dark-theme .theme-navbar .theme-btn.--circle-btn img,
html.dark-theme body .theme-navbar .lang .current img,
body.dark-theme .theme-navbar .lang .current img {
  filter: none !important;
}

html.dark-theme body .main-header,
body.dark-theme .main-header {
  background-color: #10282f !important;
  background-image:
          radial-gradient(circle at 78% 18%, rgba(255, 140, 68, .44) 0 15%, transparent 34%),
          radial-gradient(circle at 88% 72%, rgba(252, 93, 7, .25) 0 13%, transparent 32%),
          radial-gradient(circle at 52% 14%, rgba(191, 233, 247, .20) 0 14%, transparent 34%),
          linear-gradient(135deg, #10282f 0%, #16333a 48%, #21464f 100%) !important;
}

html.dark-theme body .main-header .header-form,
body.dark-theme .main-header .header-form {
  background-color: var(--semi-dark) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
/* ----------------------------------- */

/* ============================================================= */
/* STEP 3 — CLIENT AREA DASHBOARD (premium SaaS feel)            */
/* ============================================================= */

/* Greeting header */
.ca-dashboard-head {
  margin-bottom: 28px;
}
.ca-dashboard-head__title {
  font-family: var(--primary-font);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--heading);
  margin-bottom: 6px;
}
.ca-dashboard-head__sub {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 0;
}

/* Stat tiles — premium soft-shadow cards */
.tiles .row.no-gutters {
  margin-left: -8px;
  margin-right: -8px;
}
.tiles .row.no-gutters > [class*="col-"] {
  padding: 8px;
}
.tiles .tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 22px 22px 24px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tiles .tile:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 90, 7, .25);
  box-shadow: var(--shadow-lg);
}
.tiles .tile i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  border-radius: 12px;
  font-size: 18px;
  color: var(--primary);
  background-color: rgba(251, 90, 7, .10);
}
.tiles .tile .stat {
  font-family: var(--primary-font);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading);
}
.tiles .tile .title {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
/* Left accent stripe (re-uses WHMCS .highlight.bg-color-*) */
.tiles .tile .highlight {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  height: auto;
  border-radius: 0;
}
.tiles .tile .highlight.bg-color-blue {
  background-color: #2b8a9e !important;
}
.tiles .tile .highlight.bg-color-green {
  background-color: #1f9d57 !important;
}
.tiles .tile .highlight.bg-color-red {
  background-color: var(--red) !important;
}
.tiles .tile .highlight.bg-color-gold {
  background-color: var(--primary) !important;
}

/* Panel cards — softer radius + elevation */
.client-home-cards .card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.client-home-cards .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.client-home-cards .card .card-header {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.client-home-cards .card .card-title {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 17px;
}
.client-home-cards .card .list-group-item {
  border-left: 0;
  border-right: 0;
}
/* ----------------------------------- */

/* ============================================================= */
/* STEP 4 — DATA TABLES, FORMS & STATUS BADGES                  */
/* ============================================================= */

/* ---- Table container as a premium card ---- */
.table-container {
  padding: 8px 8px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-md);
}
body.dark-theme .table-container,
html.dark-theme body .table-container {
  background-color: var(--card);
  border-color: var(--border);
}

/* ---- Table head: quiet, uppercase, lettered ---- */
table.table-list thead th {
  padding: 14px 16px !important;
  font-family: var(--secondary-font);
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted) !important;
  border-bottom: 2px solid var(--border) !important;
  background-color: transparent !important;
}

/* ---- Table body: roomy cells, clickable rows ---- */
table.table-list tbody td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
}
table.table-list tbody tr {
  cursor: pointer;
}
table.table-list tbody tr:last-child td {
  border-bottom: 0 !important;
}
/* dark-mode row hover (light hover already exists) */
body.dark-theme .table-list > tbody > tr:hover > td,
html.dark-theme body .table-list > tbody > tr:hover > td {
  background-color: rgba(255, 255, 255, .04) !important;
}

/* ---- Status badges → enterprise pills ---- */
.label.status,
span.label.status {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}
/* success — active / paid / registered / completed */
.label.status.status-active,
.label.status.status-paid,
.label.status.status-registered,
.label.status.status-completed,
.label.status.status-transferred {
  color: #157347 !important;
  background-color: #e7f6ed !important;
  border-color: #bfe3cd !important;
}
/* warning — pending / overdue / draft / collections */
.label.status.status-pending,
.label.status.status-pendingtransfer,
.label.status.status-pending-transfer,
.label.status.status-overdue,
.label.status.status-draft,
.label.status.status-collections {
  color: #b06000 !important;
  background-color: #fff3e0 !important;
  border-color: #ffd9a8 !important;
}
/* danger — unpaid / suspended / expired / cancelled / terminated / fraud */
.label.status.status-unpaid,
.label.status.status-suspended,
.label.status.status-expired,
.label.status.status-cancelled,
.label.status.status-terminated,
.label.status.status-fraud,
.label.status.status-transferredaway {
  color: #c5371d !important;
  background-color: #fdece9 !important;
  border-color: #f5c4ba !important;
}
/* neutral — refunded / closed / other */
.label.status.status-refunded,
.label.status.status-closed {
  color: var(--muted) !important;
  background-color: #eef1f2 !important;
  border-color: #dde3e5 !important;
}
/* dark-mode badge tints */
body.dark-theme .label.status.status-active,
body.dark-theme .label.status.status-paid,
body.dark-theme .label.status.status-registered,
body.dark-theme .label.status.status-completed,
body.dark-theme .label.status.status-transferred,
html.dark-theme body .label.status.status-active,
html.dark-theme body .label.status.status-paid,
html.dark-theme body .label.status.status-registered,
html.dark-theme body .label.status.status-completed {
  color: #67d99a !important;
  background-color: rgba(31, 157, 87, .16) !important;
  border-color: rgba(31, 157, 87, .35) !important;
}
body.dark-theme .label.status.status-pending,
body.dark-theme .label.status.status-pendingtransfer,
body.dark-theme .label.status.status-overdue,
body.dark-theme .label.status.status-draft,
body.dark-theme .label.status.status-collections,
html.dark-theme body .label.status.status-pending,
html.dark-theme body .label.status.status-overdue {
  color: #ffba7a !important;
  background-color: rgba(255, 140, 68, .16) !important;
  border-color: rgba(255, 140, 68, .35) !important;
}
body.dark-theme .label.status.status-unpaid,
body.dark-theme .label.status.status-suspended,
body.dark-theme .label.status.status-expired,
body.dark-theme .label.status.status-cancelled,
body.dark-theme .label.status.status-terminated,
body.dark-theme .label.status.status-fraud,
html.dark-theme body .label.status.status-unpaid,
html.dark-theme body .label.status.status-suspended {
  color: #f0907d !important;
  background-color: rgba(217, 74, 50, .18) !important;
  border-color: rgba(217, 74, 50, .38) !important;
}
body.dark-theme .label.status.status-refunded,
body.dark-theme .label.status.status-closed,
html.dark-theme body .label.status.status-refunded {
  color: var(--muted) !important;
  background-color: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* ---- Forms & buttons polish ---- */
.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"] {
  border-radius: var(--radius-sm) !important;
}
.form-control:focus,
.custom-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(251, 90, 7, .15) !important;
}
.btn-default,
.btn-group .btn,
.setBulkAction {
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* ----------------------------------- */

/* ============================================================= */
/* STEP 5 — SUPPORT TICKETS & CART / CHECKOUT                   */
/* ============================================================= */

/* ---- Ticket status badges (extend Step-4 pill system) ---- */
/* info — open / in-progress */
.label.status.status-open,
.label.status.status-inprogress,
.label.status.status-in-progress {
  color: #1f6b80 !important;
  background-color: #e6f1f4 !important;
  border-color: #bcdde6 !important;
}
/* success — answered */
.label.status.status-answered {
  color: #157347 !important;
  background-color: #e7f6ed !important;
  border-color: #bfe3cd !important;
}
/* warning — awaiting client / customer reply */
.label.status.status-customer-reply,
.label.status.status-customerreply,
.label.status.status-awaiting-reply {
  color: #b06000 !important;
  background-color: #fff3e0 !important;
  border-color: #ffd9a8 !important;
}
/* neutral — on hold */
.label.status.status-onhold,
.label.status.status-on-hold {
  color: var(--muted) !important;
  background-color: #eef1f2 !important;
  border-color: #dde3e5 !important;
}
/* dark-mode ticket tints */
body.dark-theme .label.status.status-open,
body.dark-theme .label.status.status-inprogress,
html.dark-theme body .label.status.status-open {
  color: #7ccbdd !important;
  background-color: rgba(43, 138, 158, .18) !important;
  border-color: rgba(43, 138, 158, .38) !important;
}
body.dark-theme .label.status.status-answered,
html.dark-theme body .label.status.status-answered {
  color: #67d99a !important;
  background-color: rgba(31, 157, 87, .16) !important;
  border-color: rgba(31, 157, 87, .35) !important;
}
body.dark-theme .label.status.status-customer-reply,
body.dark-theme .label.status.status-customerreply,
html.dark-theme body .label.status.status-customer-reply {
  color: #ffba7a !important;
  background-color: rgba(255, 140, 68, .16) !important;
  border-color: rgba(255, 140, 68, .35) !important;
}
body.dark-theme .label.status.status-onhold,
html.dark-theme body .label.status.status-onhold {
  color: var(--muted) !important;
  background-color: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* ---- Ticket conversation (viewticket) ---- */
.card.view-ticket .card-body {
  border-bottom: 1px solid var(--border);
}
.card.view-ticket .card-body:last-child {
  border-bottom: 0;
}
.ticket-reply .posted-by {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
  color: var(--muted);
}
.ticket-reply .posted-by-name {
  font-weight: 700;
  color: var(--heading);
}
.ticket-reply .message {
  font-size: 15px;
  line-height: 1.7;
}
/* Staff replies — subtle brand highlight to distinguish from client */
.ticket-reply.staff {
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background-color: rgba(251, 90, 7, .04);
}
body.dark-theme .ticket-reply.staff,
html.dark-theme body .ticket-reply.staff {
  background-color: rgba(251, 90, 7, .08);
}
/* Requestor badge → pill */
.label.requestor-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background-color: #eef1f2;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.label.requestor-badge.requestor-type-admin,
.label.requestor-badge.requestor-type-operator,
.label.requestor-badge.requestor-type-staff {
  color: var(--primary) !important;
  background-color: rgba(251, 90, 7, .10) !important;
  border-color: rgba(251, 90, 7, .30) !important;
}
body.dark-theme .label.requestor-badge,
html.dark-theme body .label.requestor-badge {
  background-color: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}

/* ---- Cart / checkout — secure, premium feel ---- */
.cart-sidebar,
.order-summary,
.summary-container {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-md);
}
body.dark-theme .cart-sidebar,
body.dark-theme .order-summary,
body.dark-theme .summary-container,
html.dark-theme body .cart-sidebar {
  background-color: var(--card);
  border-color: var(--border);
}
.cart-sidebar .bordered-totals,
.bordered-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.summary-container .cycle,
.cart-sidebar .cost {
  color: var(--heading);
}
/* Prominent checkout button */
.btn-checkout {
  display: block;
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
}
.btn-checkout .fas {
  margin-left: 6px;
}
.btn-continue-shopping {
  font-weight: 600;
}
/* Empty cart state */
.empty-cart {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.empty-cart i {
  color: var(--primary);
}
/* Cart item rows */
.cart-body .product,
.cart-body .item {
  border-bottom: 1px solid var(--border);
}
.cart-body .item-price,
.cart-body .amt,
.cart-body .cost {
  font-weight: 700;
  color: var(--heading);
}
/* ----------------------------------- */

/* ============================================================= */
/* AUTH PAGES — LOGIN & REGISTER (premium parity)               */
/* ============================================================= */

/* ---- Login: centered hero card ---- */
.login-form {
  max-width: 540px;
  margin: 28px auto;
}
.login-form .card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.login-form h6.h3,
.login-form .card-title {
  font-family: var(--primary-font);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--heading);
}
/* Full-width, prominent sign-in button + clean remember-me row */
.login-form .float-left {
  float: none !important;
  width: 100%;
}
.login-form #login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  font-weight: 700;
  letter-spacing: .02em;
}
.login-form .text-right {
  margin-top: 14px;
  text-align: left !important;
}
.login-form .text-right label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.login-form .card-footer {
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
}
.login-form .card-footer a.font-weight-bold {
  color: var(--primary) !important;
}

/* ---- Merged input groups (icon + field) ---- */
.input-group-merge .input-group-text {
  background-color: transparent;
  border-right: 0;
  color: var(--muted);
}
.input-group-merge .form-control {
  border-left: 0;
  padding-left: 4px;
}
.input-group-merge .form-control:focus {
  box-shadow: none !important;
}
/* Keep the focus ring on the whole merged group, not just the field */
.input-group-merge:focus-within {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px rgba(251, 90, 7, .15);
}
.input-group-merge:focus-within .input-group-text,
.input-group-merge:focus-within .form-control,
.input-group-merge:focus-within .btn {
  border-color: var(--primary) !important;
}
.btn-reveal-pw {
  border-left: 0;
  color: var(--muted);
}
.btn-reveal-pw:hover {
  color: var(--primary);
}

/* ---- Register: sectioned cards ---- */
#frmCheckout .card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
#frmCheckout .card-title {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 18px;
}
#frmCheckout .card-title small {
  font-weight: 400;
  color: var(--muted);
}
/* Prominent create-account submit */
#frmCheckout > .text-center input.theme-btn[type="submit"],
.using-password-strength input.theme-btn[type="submit"] {
  min-width: 260px;
  padding: 14px 28px;
  font-weight: 700;
  letter-spacing: .02em;
}
@media (max-width: 575.98px) {
  #frmCheckout > .text-center input.theme-btn[type="submit"],
  .using-password-strength input.theme-btn[type="submit"] {
    width: 100%;
    min-width: 0;
  }
}
/* ----------------------------------- */

/* ============================================================= */
/* PRODUCT DETAILS — service overview, meta, tabs, addons       */
/* ============================================================= */

/* ---- Status hero block ---- */
.product-details .product-status {
  padding: 28px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  text-align: center;
}
body.dark-theme .product-details .product-status,
html.dark-theme body .product-details .product-status {
  background-color: rgba(255, 255, 255, .03);
}
.product-details .product-icon .fa-stack {
  margin-bottom: 6px;
  font-size: 1.5em;
}
.product-details .product-icon .fa-circle {
  color: rgba(251, 90, 7, .12);
}
.product-details .product-icon .fa-inverse {
  color: var(--primary);
}
.product-details .product-icon h3 {
  margin-top: 8px;
  margin-bottom: 2px;
  font-family: var(--primary-font);
  font-weight: 800;
  color: var(--heading);
}
.product-details .product-icon h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.product-details .product-status-text {
  display: inline-block;
  margin-top: 16px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  background-color: rgba(120, 130, 135, .14);
  color: var(--muted);
}
/* status-coloured icon + chip */
.product-status-active .product-icon .fa-circle {
  color: rgba(31, 157, 87, .15);
}
.product-status-active .product-icon .fa-inverse {
  color: #1f9d57;
}
.product-status-active .product-status-text {
  background-color: rgba(31, 157, 87, .16);
  color: #1f9d57;
}
.product-status-pending .product-icon .fa-circle {
  color: rgba(255, 140, 68, .18);
}
.product-status-pending .product-icon .fa-inverse {
  color: #d98324;
}
.product-status-pending .product-status-text {
  background-color: rgba(255, 140, 68, .18);
  color: #c0700f;
}
.product-status-suspended .product-icon .fa-circle,
.product-status-terminated .product-icon .fa-circle,
.product-status-cancelled .product-icon .fa-circle,
.product-status-fraud .product-icon .fa-circle {
  color: rgba(217, 74, 50, .15);
}
.product-status-suspended .product-icon .fa-inverse,
.product-status-terminated .product-icon .fa-inverse,
.product-status-cancelled .product-icon .fa-inverse,
.product-status-fraud .product-icon .fa-inverse {
  color: var(--red);
}
.product-status-suspended .product-status-text,
.product-status-terminated .product-status-text,
.product-status-cancelled .product-status-text,
.product-status-fraud .product-status-text {
  background-color: rgba(217, 74, 50, .16);
  color: #d04a30;
}

/* ---- Action buttons stack ---- */
.product-actions-wrapper {
  margin-top: 4px;
}
.product-actions-wrapper .btn-block {
  margin-bottom: 10px;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-align: center;
}

/* ---- Right-column meta as a quiet definition list ---- */
.product-details .col-md-6.text-center h4 {
  margin-top: 16px;
  margin-bottom: 2px;
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.product-details .col-md-6.text-center > h4:first-of-type {
  margin-top: 0;
}

/* ---- Detail tabs ---- */
.nav-tabs.responsive-tabs-sm {
  border-bottom: 1px solid var(--border);
}
.nav-tabs.responsive-tabs-sm .nav-link {
  padding: 12px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  background: transparent;
}
.nav-tabs.responsive-tabs-sm .nav-link:hover {
  color: var(--heading);
}
.nav-tabs.responsive-tabs-sm .nav-link.active {
  color: var(--primary);
  background: transparent;
  border-bottom-color: var(--primary);
}
/* tab body: keep dark mode from forcing a white panel */
body.dark-theme .product-details-tab-container.bg-white,
html.dark-theme body .product-details-tab-container.bg-white {
  background-color: var(--card) !important;
}
/* info rows → tidy two-column dividers */
.product-details-tab-container > .tab-pane > .row {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.product-details-tab-container > .tab-pane > .row:last-of-type {
  border-bottom: 0;
}

/* ---- Addon cards: pill badge (single-class .label.status-*) ---- */
#tabAddons .card-header .label[class*="status-"] {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  background-color: rgba(120, 130, 135, .14);
  color: var(--muted);
}
#tabAddons .card-header .label.status-active {
  color: #1f9d57;
  background-color: rgba(31, 157, 87, .16);
  border-color: rgba(31, 157, 87, .32);
}
#tabAddons .card-header .label.status-pending {
  color: #c0700f;
  background-color: rgba(255, 140, 68, .18);
  border-color: rgba(255, 140, 68, .32);
}
#tabAddons .card-header .label.status-suspended,
#tabAddons .card-header .label.status-terminated,
#tabAddons .card-header .label.status-cancelled {
  color: #d04a30;
  background-color: rgba(217, 74, 50, .16);
  border-color: rgba(217, 74, 50, .32);
}
/* ----------------------------------- */

/* ============================================================= */
/* INVOICE VIEW (standalone page — custom.css linked in its head) */
/* ============================================================= */

.invoice-container {
  max-width: 900px;
  margin: 28px auto;
  padding: 38px 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-lg);
}
.invoice-container hr {
  border-color: var(--border);
}
.invoice-header h2 {
  font-family: var(--primary-font);
  font-weight: 800;
  color: var(--heading);
}
.invoice-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
}
.invoice-col strong {
  color: var(--heading);
}
.invoice-container address.small-text,
.invoice-container .small-text {
  color: var(--muted);
}

/* Status badge → premium pill */
.invoice-status span {
  display: inline-block;
  padding: 8px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.invoice-status span.paid {
  color: #157347;
  background-color: rgba(31, 157, 87, .14);
  border-color: rgba(31, 157, 87, .30);
}
.invoice-status span.unpaid,
.invoice-status span.cancelled {
  color: #c5371d;
  background-color: rgba(217, 74, 50, .14);
  border-color: rgba(217, 74, 50, .30);
}
.invoice-status span.collections {
  color: #b06000;
  background-color: rgba(255, 140, 68, .16);
  border-color: rgba(255, 140, 68, .30);
}
.invoice-status span.draft,
.invoice-status span.refunded {
  color: var(--muted);
  background-color: rgba(120, 130, 135, .14);
  border-color: var(--border);
}

/* Line items + totals card */
.invoice-container .card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.invoice-container .card .card-header {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}
.invoice-container .card .card-title {
  font-family: var(--primary-font);
  color: var(--heading);
}
.invoice-container table.table thead td,
.invoice-container table.table thead strong {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.invoice-container table.table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-color: var(--border);
  color: var(--text);
}
.invoice-container .total-row {
  background-color: var(--surface);
}
.invoice-container tbody tr:last-child .total-row {
  font-size: 16px;
}
.invoice-container tbody tr:last-child .total-row strong {
  color: var(--primary);
}

/* Payment button + actions */
.payment-btn-container {
  margin-top: 14px;
}
.invoice-container .btn-default {
  border-radius: var(--radius-sm);
  font-weight: 600;
}
/* ----------------------------------- */

/* ============================================================= */
/* DASHBOARD — QUICK ACTION CARDS                                */
/* ============================================================= */

.ca-section-label {
  margin: 0 0 12px;
  font-family: var(--secondary-font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--muted);
}

.ca-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ca-action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ca-action-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 90, 7, .30);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.ca-action-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--primary);
  background-color: rgba(251, 90, 7, .10);
}
.ca-action-card__icon svg {
  width: 22px;
  height: 22px;
}
.ca-action-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.ca-action-card__title {
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading);
}
.ca-action-card__sub {
  font-size: 13px;
  color: var(--muted);
}
.ca-action-card__arrow {
  flex: 0 0 auto;
  color: var(--muted);
  opacity: .7;
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
}
.ca-action-card__arrow svg {
  width: 18px;
  height: 18px;
}
.ca-action-card:hover .ca-action-card__arrow {
  color: var(--primary);
  opacity: 1;
  transform: translateX(3px);
}

/* Responsive: 4 → 2 → 1 columns */
@media (max-width: 991.98px) {
  .ca-quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .ca-quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Overview stats - aligned to quick action card language */
.ca-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.ca-stat-card {
  --ca-stat-accent: var(--primary);
  --ca-stat-accent-bg: rgba(251, 90, 7, .10);
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 124px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ca-stat-card::before {
  position: absolute;
  content: '';
  inset: 0 auto 0 0;
  width: 4px;
  background-color: var(--ca-stat-accent);
}
.ca-stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 90, 7, .30);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.ca-stat-card--services {
  --ca-stat-accent: #2b8a9e;
  --ca-stat-accent-bg: rgba(43, 138, 158, .12);
}
.ca-stat-card--domains {
  --ca-stat-accent: #1f9d57;
  --ca-stat-accent-bg: rgba(31, 157, 87, .12);
}
.ca-stat-card--tickets {
  --ca-stat-accent: var(--red);
  --ca-stat-accent-bg: rgba(217, 74, 50, .12);
}
.ca-stat-card--invoices {
  --ca-stat-accent: var(--primary);
  --ca-stat-accent-bg: rgba(251, 90, 7, .10);
}
.ca-stat-card__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--ca-stat-accent);
  background-color: var(--ca-stat-accent-bg);
}
.ca-stat-card__icon svg {
  width: 23px;
  height: 23px;
}
.ca-stat-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-right: auto;
}
.ca-stat-card__value {
  font-family: var(--primary-font);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: var(--heading);
}
.ca-stat-card__label {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--muted);
}
.ca-stat-card__arrow {
  flex: 0 0 auto;
  color: var(--muted);
  opacity: .65;
  transition: transform .2s ease, color .2s ease, opacity .2s ease;
}
.ca-stat-card__arrow svg {
  width: 18px;
  height: 18px;
}
.ca-stat-card:hover .ca-stat-card__arrow {
  color: var(--ca-stat-accent);
  opacity: 1;
  transform: translateX(3px);
}
html.dark-theme body .ca-stat-card,
body.dark-theme .ca-stat-card {
  background-color: var(--card);
  border-color: var(--border);
}
body.light-theme .ca-stat-card,
html.light-theme body .ca-stat-card {
  background-color: var(--card);
  border-color: var(--border);
}
@media (max-width: 1199.98px) {
  .ca-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .ca-stats-grid {
    grid-template-columns: 1fr;
  }
  .ca-dashboard-head__title {
    font-size: 28px;
  }
  .ca-stat-card {
    min-height: 108px;
    padding: 18px;
  }
  .ca-stat-card__value {
    font-size: 34px;
  }
}

/* Homepage panels - active services, support tickets, domain search, news */
.ca-home-panels .row {
  margin-left: -10px;
  margin-right: -10px;
}
.ca-home-panels .row > [class*="col-"] {
  padding-left: 10px;
  padding-right: 10px;
}
.client-home-cards .ca-home-panel {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.client-home-cards .ca-home-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 90, 7, .20);
  box-shadow: var(--shadow-md);
}
.ca-home-panel__head {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background-color: var(--card) !important;
}
.ca-home-panel__title {
  width: 100%;
  font-family: var(--primary-font);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--heading) !important;
}
.ca-home-panel__title-icon,
.ca-home-panel__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 10px;
  border-radius: 10px;
  color: var(--primary);
  background-color: rgba(251, 90, 7, .10);
  vertical-align: middle;
}
.ca-home-panel__actions {
  margin-left: 16px;
}
.ca-home-panel__action,
.ca-home-panel .card-header .btn,
.ca-home-panel__body .btn,
.ca-home-panel__body button[type="submit"],
.ca-home-panel__body input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 14px;
  color: #fff !important;
  background-color: var(--primary) !important;
  line-height: 1;
  box-shadow: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ca-home-panel__action:hover,
.ca-home-panel .card-header .btn:hover,
.ca-home-panel__body .btn:hover,
.ca-home-panel__body button[type="submit"]:hover,
.ca-home-panel__body input[type="submit"]:hover {
  transform: translateY(-1px);
  border-color: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.ca-home-panel__body {
  padding: 20px;
  color: var(--text);
}
.ca-home-panel__body p,
.ca-home-panel__body .text-muted,
.ca-home-panel__body small {
  color: var(--muted) !important;
}
.ca-home-panel__body a:not(.btn):not(.theme-btn),
.ca-home-panel__item a:not(.btn):not(.theme-btn),
.ca-home-panel__footer a:not(.btn):not(.theme-btn) {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.ca-home-panel__body a:not(.btn):not(.theme-btn):hover,
.ca-home-panel__item a:not(.btn):not(.theme-btn):hover,
.ca-home-panel__footer a:not(.btn):not(.theme-btn):hover {
  color: var(--primary-hover);
  text-decoration: underline;
}
.ca-home-panel__list {
  border-top: 0;
}
.ca-home-panel__item {
  position: relative;
  padding: 16px 20px;
  border-left: 0;
  border-right: 0;
  border-color: var(--border);
  background-color: var(--card) !important;
  color: var(--text) !important;
  font-size: 13px;
  line-height: 1.5;
  transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}
.ca-home-panel__item:hover {
  padding-left: 24px;
  background-color: rgba(251, 90, 7, .04) !important;
  color: var(--heading) !important;
  text-decoration: none;
}
.ca-home-panel__item:first-child {
  border-top: 0;
}
.ca-home-panel__badge,
.ca-home-panel__item .badge,
.ca-home-panel__item .label {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
.ca-home-panel__footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background-color: var(--surface) !important;
  color: var(--muted);
  font-size: 13px;
}
.ca-home-panel__footer--empty {
  display: none;
}
body.light-theme .client-home-cards .ca-home-panel,
html.light-theme body .client-home-cards .ca-home-panel,
body.dark-theme .client-home-cards .ca-home-panel,
html.dark-theme body .client-home-cards .ca-home-panel {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}
body.light-theme .client-home-cards .ca-home-panel {
  box-shadow: var(--shadow-sm);
}
body.light-theme .client-home-cards .ca-home-panel:hover {
  box-shadow: var(--shadow-md);
}
body.light-theme .ca-home-panel__head,
html.light-theme body .ca-home-panel__head,
body.dark-theme .ca-home-panel__head,
html.dark-theme body .ca-home-panel__head,
body.light-theme .ca-home-panel__item,
html.light-theme body .ca-home-panel__item,
body.dark-theme .ca-home-panel__item,
html.dark-theme body .ca-home-panel__item {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
body.light-theme .ca-home-panel__footer,
html.light-theme body .ca-home-panel__footer,
body.dark-theme .ca-home-panel__footer,
html.dark-theme body .ca-home-panel__footer {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* Active products/services panel */
.ca-home-panel .div-service-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--surface);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ca-home-panel .div-service-item + .div-service-item {
  margin-top: 12px;
}
.ca-home-panel .div-service-item:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 90, 7, .28);
  box-shadow: var(--shadow-sm);
}
.ca-home-panel .div-service-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ca-home-panel .div-service-name {
  min-width: 0;
  color: var(--heading);
}
.ca-home-panel .div-service-name .font-weight-bold {
  display: block;
  margin-bottom: 3px;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 800 !important;
  color: var(--heading);
}
.ca-home-panel .div-service-name .text-domain {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-home-panel .div-service-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.ca-home-panel .div-service-buttons .btn {
  border-radius: var(--radius-pill) !important;
  font-weight: 800;
}

/* Domain registration panel */
.ca-home-panel__body form[action*="cart.php"] .input-group,
.ca-home-panel__body form .input-group {
  gap: 10px;
}
.ca-home-panel__body .input-group .form-control,
.ca-home-panel__body input[type="text"],
.ca-home-panel__body input[type="search"] {
  min-height: 48px;
  border-radius: var(--radius) !important;
  border-color: var(--border) !important;
  background-color: var(--card) !important;
  color: var(--text) !important;
  font-size: 15px;
  font-weight: 600;
}
.ca-home-panel__body .input-group .input-group-append,
.ca-home-panel__body .input-group .input-group-prepend {
  gap: 8px;
}
.ca-home-panel__body .input-group .btn {
  min-height: 48px;
  padding-left: 18px;
  padding-right: 18px;
}

/* Recent news and ticket rows */
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item,
.ca-home-panel[menuItemName="Recent Support Tickets"] .ca-home-panel__item {
  padding-top: 18px;
  padding-bottom: 18px;
}
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item::before {
  position: absolute;
  content: '';
  left: 20px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
}
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item {
  padding-left: 42px;
}
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item:hover {
  padding-left: 46px;
}
.ca-home-panel[menuItemName="Recent Support Tickets"] .label.status,
.ca-home-panel[menuItemName="Recent Support Tickets"] span.label.status,
.ca-home-panel .label.status.status-open {
  border-radius: var(--radius-pill);
}
html.dark-theme body .ca-home-panel,
body.dark-theme .ca-home-panel,
html.dark-theme body .ca-home-panel__head,
body.dark-theme .ca-home-panel__head,
html.dark-theme body .ca-home-panel__item,
body.dark-theme .ca-home-panel__item {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html.dark-theme body .ca-home-panel__item:hover,
body.dark-theme .ca-home-panel__item:hover {
  background-color: rgba(251, 90, 7, .08) !important;
}
html.dark-theme body .ca-home-panel__footer,
body.dark-theme .ca-home-panel__footer,
html.dark-theme body .ca-home-panel .div-service-item,
body.dark-theme .ca-home-panel .div-service-item {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}
@media (max-width: 767.98px) {
  .ca-home-panel__head {
    padding: 16px;
  }
  .ca-home-panel__title {
    font-size: 16px;
  }
  .ca-home-panel__actions {
    float: none !important;
    display: block;
    margin: 12px 0 0;
  }
  .ca-home-panel__body,
  .ca-home-panel__item,
  .ca-home-panel__footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ca-home-panel .div-service-item {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .ca-home-panel .div-service-buttons {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .ca-home-panel__body form .input-group {
    display: flex;
    flex-direction: column;
  }
  .ca-home-panel__body form .input-group > .form-control,
  .ca-home-panel__body form .input-group > .input-group-append,
  .ca-home-panel__body form .input-group > .input-group-prepend,
  .ca-home-panel__body form .input-group .btn {
    width: 100%;
  }
}

/* Dashboard panel tables stay readable on small screens */
@media (max-width: 575.98px) {
  .client-home-cards .card .table-responsive,
  .client-home-cards .card .table {
    overflow-x: auto;
  }
}
/* ----------------------------------- */

/* ============================================================= */
/* CLIENT AREA REFINEMENTS - SIDEBAR, HEADER, BREADCRUMB        */
/* ============================================================= */

/* Premium left sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidebar .custom-sidebar.card-sidebar {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sidebar .custom-sidebar.card-sidebar:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 90, 7, .20);
  box-shadow: var(--shadow-md);
}
.sidebar .custom-sidebar.card-sidebar .card-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background-color: var(--card) !important;
}
.sidebar .custom-sidebar.card-sidebar .card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--heading) !important;
}
.sidebar .custom-sidebar.card-sidebar .card-title > i:not(.card-minimise) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 2px;
  border-radius: 10px;
  color: var(--primary);
  background-color: rgba(251, 90, 7, .10);
}
.sidebar .custom-sidebar.card-sidebar .card-minimise {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.sidebar .custom-sidebar.card-sidebar .card-body {
  padding: 24px;
  color: var(--text);
}
.sidebar .custom-sidebar.card-sidebar .card-body strong,
.sidebar .custom-sidebar.card-sidebar .card-body b,
.sidebar .custom-sidebar.card-sidebar .card-body .h1,
.sidebar .custom-sidebar.card-sidebar .card-body .h2,
.sidebar .custom-sidebar.card-sidebar .card-body .h3,
.sidebar .custom-sidebar.card-sidebar .card-body .h4,
.sidebar .custom-sidebar.card-sidebar .card-body .h5,
.sidebar .custom-sidebar.card-sidebar .card-body .h6 {
  font-family: var(--primary-font);
  font-weight: 800;
  line-height: 1.35;
  color: var(--heading);
}
.sidebar .custom-sidebar.card-sidebar .card-body,
.sidebar .custom-sidebar.card-sidebar .card-body p,
.sidebar .custom-sidebar.card-sidebar address {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted) !important;
}
.sidebar .custom-sidebar.card-sidebar .card-body p:last-child,
.sidebar .custom-sidebar.card-sidebar address:last-child {
  margin-bottom: 0;
}
.sidebar .custom-sidebar.card-sidebar .card-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  background-color: var(--surface) !important;
}
.sidebar .custom-sidebar.card-sidebar .btn,
.sidebar .custom-sidebar.card-sidebar button,
.sidebar .custom-sidebar.card-sidebar input[type="submit"],
.sidebar .custom-sidebar.card-sidebar a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--primary) !important;
  color: #fff !important;
  background-color: var(--primary) !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sidebar .custom-sidebar.card-sidebar .btn:hover,
.sidebar .custom-sidebar.card-sidebar button:hover,
.sidebar .custom-sidebar.card-sidebar input[type="submit"]:hover,
.sidebar .custom-sidebar.card-sidebar a.btn:hover {
  transform: translateY(-1px);
  border-color: var(--primary-hover) !important;
  background-color: var(--primary-hover) !important;
  box-shadow: var(--shadow-sm);
}
.sidebar .custom-sidebar.card-sidebar .list-group {
  padding: 10px 12px 14px;
  background-color: var(--card);
}
.sidebar .custom-sidebar.card-sidebar .list-group-item {
  margin: 4px 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius) !important;
  background-color: transparent !important;
  color: var(--text) !important;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sidebar .custom-sidebar.card-sidebar .list-group-item:hover,
.sidebar .custom-sidebar.card-sidebar .list-group-item:focus {
  transform: translateX(2px);
  border-color: rgba(251, 90, 7, .20);
  background-color: rgba(251, 90, 7, .06) !important;
  color: var(--heading) !important;
  text-decoration: none;
}
.sidebar .custom-sidebar.card-sidebar .list-group-item.active,
.sidebar .custom-sidebar.card-sidebar .list-group-item.active:hover,
.sidebar .custom-sidebar.card-sidebar .list-group-item.active:focus {
  border-color: rgba(251, 90, 7, .30) !important;
  background-color: rgba(251, 90, 7, .12) !important;
  color: var(--primary) !important;
}
.sidebar .custom-sidebar[menuItemName*="Contact"] .list-group-item:last-child {
  margin-top: 10px;
  border-color: rgba(251, 90, 7, .24);
  background-color: rgba(251, 90, 7, .08) !important;
  color: var(--primary) !important;
}
.sidebar .custom-sidebar[menuItemName*="Contact"] .list-group-item:last-child .sidebar-menu-item-icon-wrapper {
  color: #fff;
  background-color: var(--primary);
}
.sidebar-menu-item-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 28px;
}
.sidebar-menu-item-icon-wrapper {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--primary);
  background-color: rgba(251, 90, 7, .10);
}
.sidebar-menu-item-icon {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1;
}
.sidebar-menu-item-label {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.sidebar-menu-item-badge .badge,
.sidebar .custom-sidebar.card-sidebar .badge {
  border-radius: var(--radius-pill);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  background-color: rgba(251, 90, 7, .12);
  color: var(--primary);
}
html.dark-theme body .sidebar .custom-sidebar.card-sidebar,
body.dark-theme .sidebar .custom-sidebar.card-sidebar,
html.dark-theme body .sidebar .custom-sidebar.card-sidebar .card-header,
body.dark-theme .sidebar .custom-sidebar.card-sidebar .card-header,
html.dark-theme body .sidebar .custom-sidebar.card-sidebar .list-group,
body.dark-theme .sidebar .custom-sidebar.card-sidebar .list-group {
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}
html.dark-theme body .sidebar .custom-sidebar.card-sidebar .card-footer,
body.dark-theme .sidebar .custom-sidebar.card-sidebar .card-footer {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Header/nav polish */
header.header {
  position: relative;
  z-index: 20;
}
header.header .topbar {
  padding: 12px 0;
  background-color: var(--primary);
  box-shadow: none;
}
header.header .topbar .container-fluid {
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
}
header.header .topbar .btn,
header.header .topbar .active-client .btn,
header.header .topbar .active-client .input-group-text {
  min-height: 34px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
header.header .topbar .btn i {
  width: 28px;
  height: 28px;
  margin-right: 8px;
}
header.header .topbar .active-client .btn-group {
  gap: 10px;
}
header.header .topbar .btn-active-client span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, .14);
}
body.light-theme:not(.dark-theme) header.header .topbar,
html.light-theme body header.header .topbar {
  background-color: var(--card) !important;
  border-bottom: 1px solid var(--border);
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(16, 40, 47, .05);
}
body.light-theme:not(.dark-theme) header.header .topbar .d-flex,
html.light-theme body header.header .topbar .d-flex {
  align-items: center;
  gap: 16px;
}
body.light-theme:not(.dark-theme) header.header .topbar .btn,
body.light-theme:not(.dark-theme) header.header .topbar .input-group-text,
html.light-theme body header.header .topbar .btn,
html.light-theme body header.header .topbar .input-group-text {
  color: var(--text) !important;
}
body.light-theme:not(.dark-theme) header.header .topbar #accountNotifications,
html.light-theme body header.header .topbar #accountNotifications {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
body.light-theme:not(.dark-theme) header.header .topbar #accountNotifications:hover,
html.light-theme body header.header .topbar #accountNotifications:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 90, 7, .30);
  background-color: rgba(251, 90, 7, .06);
  box-shadow: var(--shadow-md);
}
body.light-theme:not(.dark-theme) header.header .topbar .btn i,
html.light-theme body header.header .topbar .btn i {
  background-color: rgba(251, 90, 7, .10) !important;
  color: var(--primary) !important;
}
body.light-theme:not(.dark-theme) header.header .topbar .active-client,
html.light-theme body header.header .topbar .active-client {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  box-shadow: var(--shadow-sm);
}
body.light-theme:not(.dark-theme) header.header .topbar .active-client .input-group-text,
html.light-theme body header.header .topbar .active-client .input-group-text {
  padding: 0 10px 0 12px;
  color: var(--muted) !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}
body.light-theme:not(.dark-theme) header.header .topbar .active-client .btn,
html.light-theme body header.header .topbar .active-client .btn {
  margin-right: 0;
}
body.light-theme:not(.dark-theme) header.header .topbar .btn-active-client span,
html.light-theme body header.header .topbar .btn-active-client span {
  min-height: 32px;
  padding: 0 14px;
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--heading) !important;
  font-family: var(--primary-font);
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(16, 40, 47, .04);
}
body.light-theme:not(.dark-theme) header.header .topbar .btn-active-client:hover span,
html.light-theme body header.header .topbar .btn-active-client:hover span {
  border-color: rgba(251, 90, 7, .30);
  color: var(--primary) !important;
  text-decoration: none;
}
body.light-theme:not(.dark-theme) header.header .topbar .active-client .btn:not(.btn-active-client),
html.light-theme body header.header .topbar .active-client .btn:not(.btn-active-client) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  border-radius: var(--radius-pill);
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--primary) !important;
}
body.light-theme:not(.dark-theme) header.header .topbar .active-client .btn:not(.btn-active-client):hover,
html.light-theme body header.header .topbar .active-client .btn:not(.btn-active-client):hover {
  border-color: rgba(251, 90, 7, .30);
  background-color: rgba(251, 90, 7, .06);
}
html.dark-theme body header.header .topbar,
body.dark-theme header.header .topbar {
  background-color: var(--card) !important;
  border-bottom: 1px solid var(--border);
  color: var(--text) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
html.dark-theme body header.header .topbar .btn,
html.dark-theme body header.header .topbar .input-group-text,
body.dark-theme header.header .topbar .btn,
body.dark-theme header.header .topbar .input-group-text {
  color: var(--text) !important;
}
html.dark-theme body header.header .topbar #accountNotifications,
body.dark-theme header.header .topbar #accountNotifications,
html.dark-theme body header.header .topbar .active-client,
body.dark-theme header.header .topbar .active-client {
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--surface);
}
html.dark-theme body header.header .topbar #accountNotifications,
body.dark-theme header.header .topbar #accountNotifications {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
}
html.dark-theme body header.header .topbar .btn i,
body.dark-theme header.header .topbar .btn i {
  background-color: rgba(251, 90, 7, .14) !important;
  color: var(--primary) !important;
}
html.dark-theme body header.header .topbar .btn-active-client span,
body.dark-theme header.header .topbar .btn-active-client span {
  background-color: var(--card);
  color: var(--heading) !important;
  border: 1px solid var(--border);
}
html.dark-theme body header.header .topbar .active-client .input-group-text,
body.dark-theme header.header .topbar .active-client .input-group-text {
  color: var(--muted) !important;
}
@media (max-width: 767.98px) {
  header.header .topbar .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
  header.header .topbar > .container-fluid > .d-flex {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  header.header .topbar .mr-auto,
  header.header .topbar .ml-auto {
    width: 100%;
  }
  header.header .topbar #accountNotifications,
  header.header .topbar .active-client {
    width: 100%;
    justify-content: center;
  }
  header.header .topbar .active-client .btn-group {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.theme-navbar {
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(16, 40, 47, .06);
}
.theme-navbar > .container {
  padding-left: 24px;
  padding-right: 24px;
}
.theme-navbar .nav-top {
  min-height: 76px;
  padding: 18px 0;
  gap: 20px;
}
.theme-navbar .nav-top .brand {
  min-height: 42px;
  padding: 4px 0;
  font-family: var(--primary-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--heading);
}
.theme-navbar .nav-top .brand img {
  height: 38px;
  max-width: 190px;
  object-fit: contain;
}
.theme-navbar .options {
  gap: 18px;
}
.theme-navbar .options .c-link {
  min-height: 42px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  gap: 8px;
}
.theme-navbar .options .c-link:not(:last-of-type) {
  margin-right: 0;
}
.theme-navbar .options .c-link .icon {
  margin-right: 0;
}
.theme-navbar .buttons {
  margin-left: 4px;
  gap: 10px;
}
.theme-navbar .buttons .theme-btn,
.theme-navbar .theme-mode-toggle {
  min-height: 44px;
}
.theme-navbar .lang {
  margin-left: 0;
}
.theme-navbar .lang .current {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background-color: var(--card);
  font-size: 13px;
}
.theme-navbar .nav-bottom {
  min-height: 60px;
  padding: 14px 0;
  gap: 18px;
}
.theme-navbar .nav-bottom .info .item {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(251, 90, 7, .24);
  border-radius: var(--radius-pill);
  background-color: rgba(251, 90, 7, .08);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.theme-navbar .nav-bottom .info .item:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 90, 7, .36);
  background-color: rgba(251, 90, 7, .12);
  text-decoration: none;
}
.theme-navbar .nav-bottom .info .item img {
  width: 16px;
  min-width: 16px;
  margin-right: 8px;
}
.theme-navbar .nav-bottom .links {
  gap: 6px;
}
.theme-navbar .nav-bottom .links .link:not(:last-of-type) {
  margin-right: 0;
}
.theme-navbar .nav-bottom .links .link > a {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  line-height: 1;
}
html.light-theme body .theme-navbar,
body.light-theme:not(.dark-theme) .theme-navbar {
  box-shadow: 0 10px 28px rgba(16, 40, 47, .06);
}
html.light-theme body .theme-navbar .lang .current,
body.light-theme:not(.dark-theme) .theme-navbar .lang .current {
  background-color: #fff !important;
}
html.dark-theme body .theme-navbar,
body.dark-theme .theme-navbar {
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}
html.dark-theme body .theme-navbar .lang .current,
body.dark-theme .theme-navbar .lang .current {
  background-color: var(--semi-dark) !important;
  border-color: var(--border);
}
@media only screen and (max-width: 1199.98px) {
  .theme-navbar .nav-bottom .links {
    gap: 0;
    padding-top: 72px;
  }
  .theme-navbar .nav-bottom .links .link > a {
    min-height: 46px;
    border-radius: 0;
  }
}
@media only screen and (max-width: 767.98px) {
  header.header .topbar .container-fluid,
  .theme-navbar > .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .theme-navbar .nav-top {
    min-height: 66px;
    padding: 14px 0;
  }
  .theme-navbar .nav-top .brand img {
    height: 32px;
    max-width: 150px;
  }
  .theme-navbar .second-options {
    gap: 8px;
  }
  .theme-navbar .second-options .o-link {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background-color: var(--card);
  }
}

/* Breadcrumb */
.master-breadcrumb {
  padding: 14px 0;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}
.master-breadcrumb .container {
  padding-left: 24px;
  padding-right: 24px;
}
.master-breadcrumb .breadcrumb {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--card);
  box-shadow: var(--shadow-sm);
}
.master-breadcrumb .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 10px;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  padding-right: 10px;
  color: var(--muted);
  opacity: .65;
}
.master-breadcrumb .breadcrumb-item a {
  color: var(--muted) !important;
  text-decoration: none;
  transition: color .18s ease;
}
.master-breadcrumb .breadcrumb-item a:hover {
  color: var(--primary) !important;
}
.master-breadcrumb .breadcrumb-item.active {
  color: var(--heading) !important;
}
html.dark-theme body .master-breadcrumb,
body.dark-theme .master-breadcrumb {
  background-color: var(--surface);
  border-bottom-color: var(--border);
}
html.dark-theme body .master-breadcrumb .breadcrumb,
body.dark-theme .master-breadcrumb .breadcrumb {
  background-color: var(--card);
  border-color: var(--border);
}
@media (max-width: 767.98px) {
  .master-breadcrumb {
    padding: 10px 0;
  }
  .master-breadcrumb .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .master-breadcrumb .breadcrumb {
    min-height: 38px;
    padding: 9px 12px;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Dashboard spacing refinements outside Quick Actions */
.ca-dashboard-head {
  margin-bottom: 32px;
}
.ca-stats-grid {
  gap: 18px;
  margin-bottom: 32px !important;
}
.ca-stat-card {
  min-height: 144px;
  padding: 28px 24px;
  gap: 20px;
  box-shadow: var(--shadow-sm);
}
.ca-stat-card__icon {
  width: 54px;
  height: 54px;
  margin-right: 2px;
  border-radius: 14px;
}
.ca-stat-card__value {
  margin-bottom: 10px;
}
.ca-stat-card__label {
  margin-top: 0;
  line-height: 1.35;
}
.ca-stat-card__arrow {
  margin-left: 12px;
}
.ca-home-panels {
  margin-top: 8px;
}
.client-home-cards .ca-home-panel {
  margin-bottom: 28px;
}
.ca-home-panel__head {
  min-height: 72px;
  padding: 20px 24px;
}
.ca-home-panel__actions {
  margin-left: 20px;
  margin-right: 0;
}
.ca-home-panel__action,
.ca-home-panel .card-header .btn {
  font-size: 13px;
}
.ca-home-panel__body {
  padding: 28px 24px;
}
.ca-home-panel__body p {
  margin-bottom: 0;
  line-height: 1.7;
}
.ca-home-panel__body p + p {
  margin-top: 12px;
}
.ca-home-panel__body p a:not(.btn):not(.theme-btn) {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(251, 90, 7, .28);
  border-radius: var(--radius-pill);
  background-color: rgba(251, 90, 7, .08);
}
.ca-home-panel__item {
  padding: 18px 24px;
}
.ca-home-panel__item:hover {
  padding-left: 28px;
}
.ca-home-panel__footer {
  padding: 18px 24px;
}

/* Domain search panel spacing */
.ca-home-panel__body form {
  margin-bottom: 0;
}
.ca-home-panel__body form .input-group {
  align-items: stretch;
  gap: 14px;
  margin: 4px 0;
}

.ca-home-panel__body .input-group .btn,
.ca-home-panel__body button[type="submit"],
.ca-home-panel__body input[type="submit"] {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 13px;
}
.ca-home-panel__body .input-group .input-group-append,
.ca-home-panel__body .input-group .input-group-prepend {
  gap: 10px;
}
.ca-home-panel__action i,
.ca-home-panel__body .btn i,
.sidebar .custom-sidebar.card-sidebar .btn i,
.sidebar .custom-sidebar.card-sidebar button i {
  margin-right: 7px;
}

.ca-home-panel[menuItemName="Register a New Domain"] .ca-home-panel__body form .input-group,
.ca-home-panel[menuItemName="Register New Domain"] .ca-home-panel__body form .input-group {
  margin-top: 14px;
  padding: 10px;
}
.ca-home-panel[menuItemName="Register a New Domain"] .ca-home-panel__body .input-group .btn,
.ca-home-panel[menuItemName="Register New Domain"] .ca-home-panel__body .input-group .btn,
.ca-home-panel[menuItemName="Register a New Domain"] .ca-home-panel__body button[type="submit"],
.ca-home-panel[menuItemName="Register New Domain"] .ca-home-panel__body button[type="submit"],
.ca-home-panel[menuItemName="Register a New Domain"] .ca-home-panel__body input[type="submit"],
.ca-home-panel[menuItemName="Register New Domain"] .ca-home-panel__body input[type="submit"] {
  min-height: 42px;
  padding: 10px 18px;
  font-size: 13px;
}
.ca-home-panel[menuItemName="Register a New Domain"] .ca-home-panel__body .input-group .input-group-append,
.ca-home-panel[menuItemName="Register New Domain"] .ca-home-panel__body .input-group .input-group-append,
.ca-home-panel[menuItemName="Register a New Domain"] .ca-home-panel__body .input-group .input-group-prepend,
.ca-home-panel[menuItemName="Register New Domain"] .ca-home-panel__body .input-group .input-group-prepend {
  align-items: center;
}

/* Recent ticket/news row spacing */
.ca-home-panel[menuItemName="Recent Support Tickets"] .ca-home-panel__item,
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item {
  padding-top: 20px;
  padding-bottom: 20px;
}
.ca-home-panel[menuItemName="Recent Support Tickets"] .label.status,
.ca-home-panel[menuItemName="Recent Support Tickets"] span.label.status {
  padding: 7px 12px;
  margin-left: 8px;
}
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item {
  padding-left: 46px;
}
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item::before {
  left: 24px;
  top: 25px;
}
.ca-home-panel[menuItemName="Recent News"] .ca-home-panel__item:hover {
  padding-left: 50px;
}
@media (max-width: 767.98px) {
  .ca-stats-grid {
    gap: 14px;
    margin-bottom: 28px !important;
  }
  .ca-stat-card {
    min-height: 126px;
    padding: 24px 20px;
  }
  .ca-home-panel__head,
  .ca-home-panel__body,
  .ca-home-panel__item,
  .ca-home-panel__footer {
    padding-left: 20px;
    padding-right: 20px;
  }
  .ca-home-panel__actions {
    margin-left: 0;
  }
  .ca-home-panel__body form .input-group {
    gap: 12px;
  }
}
/* ----------------------------------- */

/* ============================================================= */
/* INVOICES LIST — per-row actions + invoice Pay button         */
/* ============================================================= */

.ca-inv-actions {
  white-space: nowrap;
}
.ca-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.ca-row-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.ca-row-btn--pay {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}
.ca-row-btn--pay:hover {
  color: #fff;
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}
.ca-row-btn--pdf {
  margin-left: 6px;
  color: var(--text);
  background-color: transparent;
  border-color: var(--border);
}
.ca-row-btn--pdf:hover {
  color: var(--primary);
  border-color: var(--primary);
}
body.dark-theme .ca-row-btn--pdf,
html.dark-theme body .ca-row-btn--pdf {
  color: var(--muted);
}
body.dark-theme .ca-row-btn--pdf:hover,
html.dark-theme body .ca-row-btn--pdf:hover {
  color: var(--primary);
}
/* Icon-only PDF button on small screens */
@media (max-width: 575.98px) {
  .ca-row-btn__label {
    display: none;
  }
}

/* Single invoice — make the gateway Pay button prominent + on-brand */
.payment-btn-container .btn,
.payment-btn-container input[type="submit"],
.payment-btn-container button[type="submit"] {
  padding: 13px 32px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-md);
}
.payment-btn-container .btn:hover,
.payment-btn-container input[type="submit"]:hover,
.payment-btn-container button[type="submit"]:hover {
  background-color: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
/* ----------------------------------- */

/* ============================================================= */
/* SUPPORT & TICKETS — conversation thread + submit form        */
/* ============================================================= */

/* ---- View ticket: chat/email thread ---- */
.card.view-ticket .card-body {
  border-bottom: 0 !important;
  padding: 10px 16px;
}
.card.view-ticket > .card-body:first-child {
  padding: 22px 24px 8px;
}
.ticket-reply {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
}
.ticket-reply.staff {
  border-left: 3px solid var(--primary);
  background-color: rgba(251, 90, 7, .05);
}
body.dark-theme .ticket-reply.staff,
html.dark-theme body .ticket-reply.staff {
  background-color: rgba(251, 90, 7, .09);
}
/* Avatar (icon placeholder) on the posted-by header */
.ticket-reply .posted-by {
  position: relative;
  min-height: 40px;
  padding-left: 52px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.ticket-reply .posted-by::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted);
  background-color: rgba(120, 130, 135, .14);
}
.ticket-reply.staff .posted-by::before {
  content: "\f590";
  color: var(--primary);
  background-color: rgba(251, 90, 7, .12);
  border-color: rgba(251, 90, 7, .30);
}
.ticket-reply .message.p-3 {
  padding: 4px 0 0 !important;
}
.ticket-reply .attachments {
  margin-top: 14px;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--border);
}

/* Reply box at the bottom */
#ticketReplyContainer .card-title {
  font-family: var(--primary-font);
  font-weight: 700;
}
#frmReply textarea.form-control,
#inputMessage {
  min-height: 180px;
  line-height: 1.6;
}

/* ---- Premium custom selects (Department / Priority / etc.) ---- */
select.form-control:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
body.dark-theme select.form-control:not([multiple]):not([size]),
html.dark-theme body select.form-control:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239fb2b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ---- Submit-ticket form polish ---- */
.card-body.extra-padding {
  padding: 32px 34px;
}
.card-body.extra-padding > .card-title {
  font-family: var(--primary-font);
  font-weight: 700;
  margin-bottom: 22px;
}
/* Attachment file picker */
.custom-file-label {
  border-radius: var(--radius-sm) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
.custom-file-label::after {
  color: var(--text) !important;
  background-color: var(--surface) !important;
  border-left: 1px solid var(--border) !important;
}
.attachment-group .input-group-append .btn {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
}
/* ----------------------------------- */

/* ============================================================= */
/* DOMAINS LIST + ACCOUNT DETAILS                               */
/* ============================================================= */

/* Auto-renew badge */
.ca-autorenew {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}
.ca-autorenew i {
  font-size: 11px;
}
.ca-autorenew.is-on {
  color: #1f9d57;
  background-color: rgba(31, 157, 87, .14);
  border-color: rgba(31, 157, 87, .30);
}
.ca-autorenew.is-off {
  color: var(--muted);
  background-color: rgba(120, 130, 135, .14);
  border-color: var(--border);
}

/* Unified premium card headings (account details & elsewhere) */
.card .card-title {
  font-family: var(--primary-font);
  font-weight: 700;
}

/* Account details: clear gaps between the grouped setting cards */
form[action="?action=details"] .card,
form[action="?action=details"] .card + .card {
  margin-bottom: 22px;
}
form[action="?action=details"] .card-title {
  margin-bottom: 20px;
}
/* ----------------------------------- */

/* ============================================================= */
/* ACCESSIBILITY + SCALE NORMALIZATION                           */
/* ============================================================= */

body.light-theme,
html.light-theme body {
  color: var(--text-primary) !important;
}

body.light-theme p,
body.light-theme label,
body.light-theme li,
body.light-theme td,
body.light-theme th,
body.light-theme .card,
body.light-theme .panel,
body.light-theme .list-group-item,
body.light-theme .primary-content,
body.light-theme .tab-content,
body.light-theme .product-details-tab-container {
  color: var(--text-primary) !important;
}

body.light-theme .text-muted,
body.light-theme .small,
body.light-theme small,
body.light-theme .help-block,
body.light-theme .field-error-msg,
body.light-theme .ca-action-card__sub,
body.light-theme .ca-stat-card__label,
body.light-theme .ca-home-panel__body p,
body.light-theme .product-details .product-icon h4 {
  color: var(--text-secondary) !important;
}

#main-body h1,
#main-body .header-lined h1,
#main-body .ca-dashboard-head__title,
#main-body .se-head .se-title-2,
#main-body .products-headline .title-1 {
  font-size: 1.875rem !important;
  line-height: 1.25;
  letter-spacing: 0;
}

#main-body h2,
#main-body .font-size-30 {
  font-size: 1.5rem !important;
  line-height: 1.3;
  letter-spacing: 0;
}

#main-body h3,
#main-body .font-size-24,
#main-body .font-size-22,
#main-body .card-title {
  font-size: 0.9rem !important;
  line-height: 1;
  letter-spacing: 0;
}

#main-body h4,
#main-body .title-4 {
  font-size: 1rem !important;
  line-height: 1.4;
  letter-spacing: 0;
}

#main-body .btn,
#main-body .theme-btn,
#main-body button,
#main-body input[type="submit"] {
  font-weight: 600;
  letter-spacing: 0;
}

#main-body > .container > .row {
  margin-left: -10px;
  margin-right: -10px;
}

#main-body > .container > .row > [class*="col-"],
#main-body > .container > .row > .primary-content {
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar {
  gap: 16px;
}

.sidebar .custom-sidebar.card-sidebar .card-header {
  padding: 8px 20px;
}

.sidebar .custom-sidebar.card-sidebar .card-body {
  padding: 18px 20px;
}

.sidebar .custom-sidebar.card-sidebar .card-footer {
  padding: 14px 20px;
}

.sidebar .custom-sidebar.card-sidebar .list-group {
  padding: 8px 10px 12px;
}

.sidebar .custom-sidebar.card-sidebar .list-group-item {
  padding: 6px 12px;
}

.ca-dashboard-head {
  margin-bottom: 22px;
}

.ca-stats-grid {
  gap: 14px !important;
  margin-bottom: 24px !important;
}

.ca-stat-card {
  min-height: 118px;
  padding: 20px;
  gap: 16px;
}

.ca-stat-card__icon {
  width: 46px;
  height: 46px;
}

.ca-stat-card__value {
  margin-bottom: 6px;
  font-size: 1.875rem !important;
}

.client-home-cards .ca-home-panel {
  margin-bottom: 20px;
}

.ca-home-panel__head {
  min-height: 62px;
  padding: 16px 20px;
}

.ca-home-panel__body {
  padding: 20px;
}

.ca-home-panel__item {
  padding: 14px 20px;
}

.ca-home-panel__item:hover {
  padding-left: 22px;
}

.ca-home-panel__footer {
  padding: 14px 20px;
}

body.light-theme .product-details .card,
body.light-theme .product-details .product-status,
body.light-theme .product-details-tab-container,
body.light-theme .tab-content.bg-white,
html.light-theme body .product-details .card,
html.light-theme body .product-details-tab-container {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.light-theme .product-details-tab-container > .tab-pane > .row,
html.light-theme body .product-details-tab-container > .tab-pane > .row {
  border-color: var(--border-color) !important;
}

body.light-theme .product-details .col-md-6.text-center h4,
html.light-theme body .product-details .col-md-6.text-center h4 {
  color: var(--text-secondary) !important;
}

.domain-pricing .tld-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.domain-pricing .tld-filters .badge,
.domain-pricing .tld-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-pill);
  color: var(--text-primary) !important;
  background-color: var(--card-bg) !important;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
}

.domain-pricing .tld-filters .badge:hover,
.domain-pricing .tld-filters a:hover,
.domain-pricing .tld-filters .badge-success,
.domain-pricing .tld-filters a.badge-success {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.domain-pricing .table-container {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background-color: var(--card-bg);
}

.domain-pricing table.table-list thead th,
.domain-pricing #tableDomainPricing thead th {
  padding: 12px 16px !important;
  font-size: .875rem !important;
  font-weight: 700;
  color: var(--text-secondary) !important;
  background-color: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.domain-pricing table.table-list tbody td,
.domain-pricing #tableDomainPricing tbody td {
  padding: 10px 16px !important;
  font-size: .9375rem !important;
  color: var(--text-primary) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.domain-pricing table.table-list tbody tr:last-child td,
.domain-pricing #tableDomainPricing tbody tr:last-child td {
  border-bottom: 0 !important;
}

body.dark-theme .domain-pricing .tld-filters .badge,
body.dark-theme .domain-pricing .tld-filters a,
html.dark-theme body .domain-pricing .tld-filters .badge,
html.dark-theme body .domain-pricing .tld-filters a {
  color: var(--text) !important;
  background-color: var(--card) !important;
}

@media (max-width: 575.98px) {
  #main-body h1,
  #main-body .header-lined h1,
  #main-body .ca-dashboard-head__title,
  #main-body .se-head .se-title-2,
  #main-body .products-headline .title-1 {
    font-size: 1.5rem !important;
  }

  .ca-stat-card {
    min-height: 104px;
    padding: 16px;
  }

  .ca-stat-card__value {
    font-size: 1.625rem !important;
  }
}



body.light-theme .cart-panel *,
body.light-theme .domain-picker-card *,
body.light-theme .domain-selection-card *,
body.light-theme .product-configuration-panel *,
body.light-theme #order-standard_cart .domain-selection-options .option *,
body.light-theme #order-standard_cart .product-info *,
body.light-theme #order-standard_cart .order-summary *,
body.light-theme #order-standard_cart .summary-container *,
body:not(.dark-mode):not(.dark-theme) .cart-panel *,
body:not(.dark-mode):not(.dark-theme) .domain-picker-card *,
body:not(.dark-mode):not(.dark-theme) .domain-selection-card *,
body:not(.dark-mode):not(.dark-theme) .product-configuration-panel *,
body:not(.dark-mode):not(.dark-theme) #order-standard_cart .domain-selection-options .option *,
body:not(.dark-mode):not(.dark-theme) #order-standard_cart .product-info *,
body:not(.dark-mode):not(.dark-theme) #order-standard_cart .order-summary *,
body:not(.dark-mode):not(.dark-theme) #order-standard_cart .summary-container * {
  color: #1f2937 !important;
}

body.light-theme .cart-panel input,
body.light-theme .domain-picker-card input,
body.light-theme .domain-selection-card input,
body.light-theme #order-standard_cart .domain-selection-options input,
body:not(.dark-mode):not(.dark-theme) .cart-panel input,
body:not(.dark-mode):not(.dark-theme) .domain-picker-card input,
body:not(.dark-mode):not(.dark-theme) .domain-selection-card input,
body:not(.dark-mode):not(.dark-theme) #order-standard_cart .domain-selection-options input {
  background-color: #ffffff !important;
  color: #1f2937 !important;
  border-color: #d1d5db !important;
}

body.light-theme .cart-panel .btn-primary,
body.light-theme .domain-picker-card .btn-primary,
body:not(.dark-mode):not(.dark-theme) .cart-panel .btn-primary,
body:not(.dark-mode):not(.dark-theme) .domain-picker-card .btn-primary {
  background-color: #fb5920 !important;
  color: #ffffff !important;
}

body.dark-mode .cart-panel,
body.dark-mode .domain-picker-card,
body.dark-mode .domain-selection-card,
body.dark-theme .cart-panel,
body.dark-theme .domain-picker-card,
body.dark-theme .domain-selection-card {
  background-color: #1f2937 !important;
}

body.dark-mode .cart-panel *,
body.dark-mode .domain-picker-card *,
body.dark-theme .cart-panel *,
body.dark-theme .domain-picker-card * {
  color: #f9fafb !important;
}

/* =====================================================================
   STEP 4 — Typography scale + 8px spacing rhythm (portal-wide).
   Scoped to #main-body so the marketing homepage hero (rendered BEFORE
   #main-body opens) keeps its display sizes. No !important: #main-body's
   id specificity beats theme.css base element rules but still yields to
   intentional component classes (.font-size-*, .se-title-2, etc.).
   ===================================================================== */
#main-body h1,
#main-body .header-lined h1 {
  font-size: 1.875rem;          /* 30px — within 28–32 */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--heading);
}

#main-body h2 {
  font-size: 1.4375rem;          /* 23px — within 22–24 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--heading);
}

#main-body h3 {
  font-size: 1.1875rem;          /* 19px — within 18–20 */
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading);
}

#main-body h4 {
  font-size: 1rem;               /* 16px */
  font-weight: 500;
  line-height: 1.4;
  color: var(--heading);
}

#main-body h5 {
  font-size: .9375rem;           /* 15px */
  font-weight: 600;
  line-height: 1.45;
  color: var(--heading);
}

#main-body h6 {
  font-size: .8125rem;           /* 13px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Vertical rhythm — multiples of 8px */
#main-body h1,
#main-body h2,
#main-body h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

#main-body h4,
#main-body h5,
#main-body h6 {
  margin-top: 0;
  margin-bottom: 8px;
}

#main-body p,
#main-body ul,
#main-body ol {
  margin-bottom: 16px;
}

#main-body p:last-child,
#main-body ul:last-child,
#main-body ol:last-child {
  margin-bottom: 0;
}

/* Breathing room — content never hugs the footer, container never hugs
   the viewport edges on small screens. */
#main-body {
  padding-bottom: 56px;
}

@media (min-width: 992px) {
  #main-body {
    padding-bottom: 80px;
  }
}

@media (max-width: 575.98px) {
  #main-body h1,
  #main-body .header-lined h1 {
    font-size: 1.625rem;         /* 26px on phones — still authoritative */
  }

  #main-body h2 {
    font-size: 1.3125rem;        /* 21px */
  }

  #main-body > .container,
  #main-body > .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
  }
}