@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=DM+Serif+Text:ital@0;1&display=swap");

/**
 * Brand Override CSS - hostie-demo4
 * Primary:    #DB4324 (Coral Red)
 * Secondary:  #D01383 (Magenta)
 * Light BG:   #FFF6F5 (Soft Blush)
 * Headings:   'DM Serif Text', serif
 * Body Text:  'Cabin', sans-serif
 */

:root {
  --font-heading: "DM Serif Text", serif;
  --font-body: "Cabin", sans-serif;
  --brand-primary: #db4324;
  --brand-secondary: #d01383;
  --brand-light-bg: #fff6f5;
  --brand-light-2: #ffe8e3;
  --brand-light-3: #ffd5cc;
  --color-primary: #db4324;
  --color-secondary: #2d3c58;
  --color-fourth: #fff6f5;
  --blue: #db4324;
  --primary-gradient: linear-gradient(135deg, #db4324 0%, #d01383 100%);
  --secondary-gradient: linear-gradient(
    180deg,
    #fff6f5 0%,
    rgba(255, 246, 245, 0) 100%
  );
  --banner-one-bg: linear-gradient(135deg, #fff6f5 0%, #ffe8e3 100%);
  --footer-style-one: linear-gradient(
    0deg,
    #ffe8e3 0%,
    rgba(255, 246, 245, 0) 82.55%
  );
  --third-gradient: linear-gradient(180deg, #f8c5b8 0%, #f6f6f6 100%);
  --border-color: #ffd5cc;
}

/* Base Body & Text Typography -> Cabin */
body {
  font-family:
    "Cabin",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
}

p,
li,
td,
th,
label,
input,
select,
textarea,
button:not([class*="fa"]),
small,
.nav-link,
.btn:not([class*="fa"]),
.dropdown-item,
.footer-widget-inner > p,
.description,
.badge,
.table {
  font-family:
    "Cabin",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* Headings Typography -> DM Serif Text */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading,
.widget-title,
.card-title,
.pricing-card-title,
.section-title,
.rts-hero__content h1,
.rts-hero__content h2,
.home-domain-search h2,
#domain-search-section h2,
.domain-search-wrapper h2,
.howCanWeHelpSec h3,
.clientHomePanelsSec h3,
section#main-body > div > div > h3,
.modal-title,
.footer-widget .widget-title {
  font-family: "DM Serif Text", Georgia, serif !important;
  font-weight: 400 !important;
}

/* =====================================================
   FONT AWESOME ICONS FIX (Solid, Regular, Light, Brands)
   ===================================================== */
.fa,
.fas,
.fa-solid {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.far,
.fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.fal,
.fa-light,
.fat,
.fa-thin {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
  font-style: normal !important;
}

.fab,
.fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

[class*="fa-"]::before,
[class*="fa-"]::after {
  display: inline-block !important;
}

a {
  color: #db4324;
}
a:hover {
  color: #b83317;
}

.topbar {
  background: #fff !important;
  border-bottom: 1px solid #ffe8e3 !important;
}
.topbar .live__chat,
.topbar .login__link {
  color: #db4324 !important;
  font-weight: 600;
  font-size: 13px;
  transition: color 0.3s ease;
}
.topbar .live__chat:hover,
.topbar .login__link:hover {
  color: #d01383 !important;
  text-decoration: none;
}

header.header .bottombar,
header.header {
  background: #fff !important;
  box-shadow: 0 2px 20px rgba(219, 67, 36, 0.06) !important;
}

.primaryNavbar .nav-link,
.primaryNavbar > li > a {
  color: #2d3c58 !important;
  font-weight: 600;
  transition: color 0.3s ease;
}
.primaryNavbar .nav-link:hover,
.primaryNavbar > li > a:hover,
.primaryNavbar .nav-link.active {
  color: #db4324 !important;
}

.navbar-nav .dropdown-menu {
  border-top: 2px solid #db4324 !important;
  box-shadow: 0 8px 30px rgba(219, 67, 36, 0.1) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #fff6f5 !important;
  color: #db4324 !important;
}

.badge-info,
#cartItemCount {
  background-color: #db4324 !important;
}

.transparent-header {
  background: #ffffff !important;
  box-shadow: 0 2px 20px rgba(219, 67, 36, 0.06) !important;
}

.primary__btn,
a.primary__btn,
button.primary__btn {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.35s ease !important;
  box-shadow: 0 4px 15px rgba(219, 67, 36, 0.25) !important;
  text-decoration: none !important;
}
.primary__btn:hover,
a.primary__btn:hover,
button.primary__btn:hover {
  background: linear-gradient(135deg, #d01383 0%, #db4324 100%) !important;
  box-shadow: 0 6px 20px rgba(208, 19, 131, 0.3) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.rts-hero__content--group .primary__btn {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(219, 67, 36, 0.3) !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  padding: 18px 38px !important;
}
.rts-hero__content--group .primary__btn:hover {
  background: linear-gradient(135deg, #d01383 0%, #db4324 100%) !important;
  transform: translateY(-2px) !important;
}

.rts-hero__content--group .plan__btn,
.btn__zero.plan__btn {
  color: #db4324 !important;
  border: 2px solid #db4324 !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 16px 35px !important;
  transition: all 0.35s ease !important;
}
.rts-hero__content--group .plan__btn:hover,
.btn__zero.plan__btn:hover {
  background: #db4324 !important;
  color: #fff !important;
  text-decoration: none !important;
}

#btnDomainSearch {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.35s ease !important;
}
#btnDomainSearch:hover {
  background: linear-gradient(135deg, #d01383 0%, #db4324 100%) !important;
  transform: translateY(-1px) !important;
}

.btn-primary {
  background-color: #db4324 !important;
  border-color: #db4324 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #b83317 !important;
  border-color: #b83317 !important;
}

.badge-primary,
.bg-primary {
  background-color: #db4324 !important;
}

.rts-hero__one {
  background: #ffffff !important;
  padding-top: 0 !important;
  padding-bottom: 100px !important;
  position: relative;
  overflow: hidden;
}
.rts-hero__one::before {
  background: none !important;
  display: none !important;
  pointer-events: none !important;
}
.rts-hero__one::after {
  background-image: none !important;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(208, 19, 131, 0.06) 0%,
    transparent 60%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.rts-hero__blur-area {
  background: rgba(219, 67, 36, 0.15) !important;
  filter: blur(100px) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.rts-hero .container {
  position: relative !important;
  z-index: 10 !important;
}

.rts-hero__content {
  position: relative !important;
  z-index: 20 !important;
}

.rts-hero__content--group {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}

.rts-hero__content--group a,
.rts-hero__content--group .primary__btn,
.rts-hero__content--group .plan__btn,
.rts-hero__content--group .btn__zero {
  position: relative !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.rts-hero__content h1 {
  color: #1a1a2e !important;
  font-size: clamp(42px, 5.5vw, 66px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
}

.rts-hero__content h6 {
  color: #db4324 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: linear-gradient(
    135deg,
    rgba(219, 67, 36, 0.1) 0%,
    rgba(208, 19, 131, 0.1) 100%
  );
  display: inline-block !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 16px !important;
}
.rts-hero__content h6 span {
  color: #d01383 !important;
}

.rts-hero__content .description {
  color: #4a4a6a !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  max-width: 490px;
}

.rts-hero__content .feature__list .feature__item {
  color: #2d3c58 !important;
  font-weight: 500 !important;
  font-size: 15px;
}
.rts-hero__content .feature__list .feature__item span {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  box-shadow: 0 2px 8px rgba(219, 67, 36, 0.3);
}
.rts-hero__content .feature__list .feature__item svg path {
  fill: #fff !important;
}

.rts-hero__content p {
  color: #2d3c58 !important;
}
.rts-hero__content p span {
  color: #db4324 !important;
}

.action-icon-btns a,
.product-column {
  background: #fff !important;
  border: 1px solid #ffd5cc !important;
  border-radius: 14px !important;
  transition: all 0.35s ease !important;
  box-shadow: 0 2px 12px rgba(219, 67, 36, 0.05) !important;
}
.action-icon-btns a:hover,
.product-column:hover {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(219, 67, 36, 0.25) !important;
}
.action-icon-btns a .ico-container i {
  color: #db4324 !important;
  transition:
    color 0.3s ease,
    transform 0.3s ease !important;
}
.action-icon-btns a:hover .ico-container i {
  color: #fff !important;
  transform: scale(1.1) !important;
}

.card-accent-teal,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-asbestos,
.card-accent-green {
  border-top: 3px solid #db4324 !important;
}

.card-accent-midnight-blue {
  border-top: 3px solid #d01383 !important;
}

.product-column {
  padding: 40px 30px !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(219, 67, 36, 0.07) !important;
}
.product-column h3,
.product-column .pricing-card-title {
  color: #1a1a2e !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}
.product-column:hover .card-title {
  color: #fff !important;
}
.product-column:hover .primary__btn {
  background: #fff !important;
  color: #db4324 !important;
  box-shadow: none !important;
}
.service-column {
  border-left: 4px solid #db4324 !important;
  border-radius: 0 14px 14px 0 !important;
}

.howCanWeHelpSec h3,
.clientHomePanelsSec h3 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 20px !important;
}
section#main-body > div > div > h3 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 20px !important;
}
.howCanWeHelpSec h3::after,
.clientHomePanelsSec h3::after,
section#main-body > div > div > h3::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: linear-gradient(90deg, #db4324, #d01383);
  border-radius: 4px;
  margin-top: 10px;
  transition: width 0.4s ease;
}

footer.footer,
#footer {
  background: #1a1a2e !important;
  color: #ccc !important;
  border-top: none !important;
}
.footer-top {
  background: #1a1a2e !important;
  padding: 70px 0 50px !important;
}
.footer-bottom {
  background: #111128 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 20px 0 !important;
}
.footer-bottom-content p.copyright {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
}

.footer-widget .widget-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px !important;
  position: relative;
  padding-bottom: 10px;
}
.footer-widget .widget-title::after {
  content: "";
  display: block;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #db4324, #d01383);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 4px;
}

.footer-widget-inner > p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.footer-nav .nav-link,
.footer-nav a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 14px !important;
  padding: 4px 0 !important;
  transition:
    color 0.25s ease,
    padding-left 0.25s ease !important;
}
.footer-nav .nav-link:hover,
.footer-nav a:hover {
  color: #db4324 !important;
  padding-left: 6px !important;
  text-decoration: none !important;
}

.newsletter input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-radius: 8px 0 0 8px !important;
}
.newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.newsletter button[type="submit"] {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 0 8px 8px 0 !important;
  transition: all 0.3s ease !important;
}
.newsletter button[type="submit"]:hover {
  opacity: 0.85 !important;
}

/* Payment Methods — Paystack & Bank Transfer badges */
.payment__method ul {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
  list-style: none !important;
}
.payment__method ul li {
  display: inline-block !important;
  margin: 0 !important;
}
.payment__method ul li img {
  height: 36px !important;
  width: auto !important;
  border-radius: 6px !important;
  display: block !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}
.payment__method ul li img:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Footer Social Icons — Facebook, LinkedIn, Instagram */
.footer-social {
  margin-top: 15px !important;
}
.footer-social .social-icons,
.footer-social ul {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.footer-social .social-icons li,
.footer-social ul li {
  margin: 0 !important;
}
.footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}
.footer-social a i {
  color: #ffffff !important;
  font-size: 16px !important;
  transition: color 0.3s ease !important;
}
.footer-social a:hover {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 12px rgba(219, 67, 36, 0.35) !important;
}
.footer-social a:hover i {
  color: #ffffff !important;
}

.modal .btn-primary,
.modal-footer .btn-primary {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  border: none !important;
}

.form-control:focus {
  border-color: #db4324 !important;
  box-shadow: 0 0 0 0.2rem rgba(219, 67, 36, 0.15) !important;
}

.sidebar .nav-link.active,
.sidebar .list-group-item.active {
  background-color: #db4324 !important;
  border-color: #db4324 !important;
  color: #fff !important;
}
.sidebar .nav-link {
  color: #2d3c58 !important;
}
.sidebar .nav-link:hover {
  color: #db4324 !important;
  background: #fff6f5 !important;
}

.alert-info {
  background-color: #fff6f5 !important;
  border-color: #ffd5cc !important;
  color: #db4324 !important;
}

.page-item.active .page-link {
  background-color: #db4324 !important;
  border-color: #db4324 !important;
}
.page-link {
  color: #db4324 !important;
}
.page-link:hover {
  background-color: #fff6f5 !important;
  border-color: #ffd5cc !important;
  color: #db4324 !important;
}

.clientHomePanelsSec {
  background: #fafafa !important;
  padding: 40px 30px !important;
  border-radius: 16px !important;
  border: 1px solid #ffe8e3 !important;
}
section#main-body {
  background: #fff !important;
}

@keyframes brandFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.howCanWeHelpSec,
.clientHomePanelsSec {
  animation: brandFadeInUp 0.6s ease forwards;
}
.action-icon-btns .col-6:nth-child(1) a {
  animation: brandFadeInUp 0.5s ease 0.05s both;
}
.action-icon-btns .col-6:nth-child(2) a {
  animation: brandFadeInUp 0.5s ease 0.1s both;
}
.action-icon-btns .col-6:nth-child(3) a {
  animation: brandFadeInUp 0.5s ease 0.15s both;
}
.action-icon-btns .col-6:nth-child(4) a {
  animation: brandFadeInUp 0.5s ease 0.2s both;
}
.action-icon-btns .col-6:nth-child(5) a {
  animation: brandFadeInUp 0.5s ease 0.25s both;
}
.rts-hero__content h6 {
  animation: brandFadeInUp 0.6s ease 0.1s both;
}
.rts-hero__content h1 {
  animation: brandFadeInUp 0.7s ease 0.2s both;
}
.rts-hero__content .description {
  animation: brandFadeInUp 0.7s ease 0.3s both;
}
.rts-hero__content .feature {
  animation: brandFadeInUp 0.7s ease 0.4s both;
}
.rts-hero__content--group {
  animation: brandFadeInUp 0.7s ease 0.5s both;
}

@media (max-width: 991px) {
  .rts-hero__content h1 {
    font-size: clamp(32px, 8vw, 48px) !important;
  }
  .rts-hero__content .description {
    width: 100% !important;
    max-width: 100% !important;
  }
  .rts-hero__one {
    padding-top: 100px !important;
    padding-bottom: 70px !important;
  }
}
@media (max-width: 575px) {
  .rts-hero__content h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
  .rts-hero__content--group {
    gap: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .rts-hero__content--group .primary__btn,
  .rts-hero__content--group .plan__btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* =====================================================
   HEADER & NAVBAR — Seamless blend & relative positioning
   ===================================================== */
header.header,
header.header.transparent-header {
  position: relative !important;
  background: #ffffff !important;
  box-shadow: 0 2px 15px rgba(219, 67, 36, 0.06) !important;
  z-index: 100 !important;
}

header.header .bottombar {
  background: #ffffff !important;
}

header.header .logo-img {
  max-height: 44px !important;
  width: auto !important;
  display: block !important;
}

/* =====================================================
   HERO — Seamless blend with navbar & adjusted spacing
   ===================================================== */
.rts-hero__one,
section.rts-hero__one {
  background: #ffffff !important;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  position: relative;
  overflow: hidden;
}
.rts-hero__one::after {
  background-image: none !important;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(208, 19, 131, 0.04) 0%,
    transparent 60%
  ) !important;
}
.rts-hero__blur-area {
  background: rgba(219, 67, 36, 0.08) !important;
}

/* =====================================================
   DOMAIN SEARCH SECTION — Generous padding, left-aligned labels & centered buttons
   ===================================================== */
.home-domain-search,
#domain-search-section {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  padding: 60px 100px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

.domain-search-wrapper {
  max-width: 820px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.home-domain-search h2,
#domain-search-section h2,
.domain-search-wrapper h2 {
  color: #ffffff !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* Full-width search input inside the constrained box */
.ds-search-row {
  width: 100% !important;
  margin-bottom: 16px !important;
}
.ds-input {
  width: 100% !important;
  height: 54px !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  color: #333 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}
.ds-input:focus {
  outline: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
}
.ds-input::placeholder {
  color: #888 !important;
}

/* Side-by-side filter row (Include TLD) */
.ds-filters-row {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  width: 100% !important;
  margin-bottom: 24px !important;
}
.ds-filter-item {
  flex: 0 1 320px !important;
  max-width: 320px !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* Hide Maximum Length option completely */
#maxPeriod,
label[for="maxPeriod"],
.ds-filter-item:has(#maxPeriod),
.ds-filter-item:has(select[name="maxPeriod"]),
select[name="maxPeriod"] {
  display: none !important;
}
.ds-filter-label {
  display: block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.3px !important;
  text-align: left !important;
}
.ds-select {
  width: 100% !important;
  height: 48px !important;
  border-radius: 10px !important;
  border: none !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  color: #333 !important;
  background: #ffffff !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}
.ds-select:focus {
  outline: none !important;
}

/* Action buttons row — centered */
.ds-actions-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.ds-btn,
#btnDomainSearch,
.ds-btn-search,
.btn-domain-search,
.domain-search-wrapper button[type="submit"],
.domain-search-form-wrapper button[type="submit"],
#frmDomainHomepage button[type="submit"],
#frmDomainChecker button[type="submit"],
.domain-checker-container button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  white-space: nowrap !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 32px !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 0.3px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.ds-btn span,
#btnDomainSearch span,
.ds-btn-search span,
.btn-domain-search span {
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.ds-btn i,
#btnDomainSearch i,
.ds-btn-search i,
.btn-domain-search i {
  font-size: 14px !important;
  margin: 0 !important;
  display: inline-block !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.ds-btn-search {
  background: linear-gradient(135deg, #db4324 0%, #d01383 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
.ds-btn-search:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}
.ds-btn-transfer {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}
.ds-btn-transfer:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* "View all pricing" — centered & underlined */
.ds-pricing-link {
  text-align: center !important;
  margin-top: 15px !important;
}
.ds-pricing-link a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  transition: opacity 0.25s ease !important;
}
.ds-pricing-link a:hover {
  color: #ffffff !important;
  opacity: 0.85 !important;
  text-decoration: underline !important;
}
.ds-pricing-link a:hover {
  color: #ffffff !important;
  opacity: 0.85 !important;
  text-decoration: underline !important;
}
.ds-pricing-link a:hover {
  color: #ffffff !important;
  opacity: 0.85 !important;
  text-decoration: underline !important;
}

/* WHMCS default btn-link fallback */
.home-domain-search .btn-link,
.home-domain-search a.btn-link {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-align: center !important;
  display: block !important;
}

/* =====================================================
   HIDE "POWERED BY WHMCS" badge
   ===================================================== */
.powered-by-whmcs,
.whmcs-powered,
a[href*="whmcs.com"][class*="powered"],
img[src*="whmcs-badge"],
img[alt*="WHMCS"],
img[src*="powered"],
.btn-whmcs-powered,
[class*="powered-by"] {
  display: none !important;
}
/* WHMCS outputs a branded badge — hide via CSS targeting common patterns */
.footer ~ div a[href*="whmcs.com"],
#footer + * a[href*="whmcs.com"] {
  display: none !important;
}
/* Hide the entire whmcs powered badge container that appears before footer */
.whmcs-poweredby,
.poweredby,
div[style*="powered"] img,
p.powered,
.powered {
  display: none !important;
}

/* =====================================================
   FOOTER — Logo styling
   ===================================================== */
.footer-brand-logo {
  max-height: 50px !important;
  width: auto !important;
  display: block !important;
  margin-bottom: 16px !important;
  /* Invert to white for dark footer */
  filter: brightness(0) invert(1) !important;
}
.footer-logo {
  margin-bottom: 16px !important;
}

/* =====================================================
   NAVBAR — Fix caret icons & broken glyphs in Store & More
   ===================================================== */
/* Hide broken img tags inside nav links (Store, More dropdowns) */
.primaryNavbar .nav-link img[src*="icon"],
.primaryNavbar .nav-item img,
.navbar-nav .nav-link img:not([src]),
.navbar-nav .nav-link img[src=""],
.bottombar img[alt=""] {
  display: none !important;
}
/* Ensure Font Awesome icons in navbar render cleanly */
.primaryNavbar i,
.navbar-nav i,
.primaryNavbar [class*="fa-"],
.navbar-nav [class*="fa-"] {
  font-style: normal !important;
  font-size: 14px !important;
  color: #2d3c58 !important;
}
.primaryNavbar .nav-link:hover i,
.navbar-nav .nav-link:hover i {
  color: #db4324 !important;
}

/* Fix dropdown carets after Store, More, etc. */
.primaryNavbar .caret,
.primaryNavbar b.caret,
.primaryNavbar span.caret,
.navbar-nav .caret,
.navbar-nav b.caret,
.navbar-nav span.caret,
.primaryNavbar a.dropdown-toggle b,
.primaryNavbar a.dropdown-toggle span.caret,
.primaryNavbar .dropdown-toggle .caret,
.primaryNavbar .dropdown-toggle b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* Hides broken unicode glyph box ⬚ */
  line-height: 0 !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  position: relative !important;
  border: none !important;
  color: currentColor !important;
}

.primaryNavbar .caret::after,
.primaryNavbar b.caret::after,
.primaryNavbar span.caret::after,
.navbar-nav .caret::after,
.navbar-nav b.caret::after,
.navbar-nav span.caret::after,
.primaryNavbar a.dropdown-toggle b::after,
.primaryNavbar a.dropdown-toggle span.caret::after,
.primaryNavbar .dropdown-toggle .caret::after,
.primaryNavbar .dropdown-toggle b::after {
  content: "" !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid currentColor !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  border-bottom: 0 !important;
  transition: transform 0.2s ease !important;
}

.primaryNavbar .dropdown:hover .caret::after,
.primaryNavbar .dropdown.show .caret::after,
.primaryNavbar .dropdown-toggle[aria-expanded="true"] .caret::after {
  transform: rotate(180deg) !important;
}

/* =====================================================
   SYSTEM-WIDE YELLOW OVERRIDE -> MAGENTA (#D01383)
   ===================================================== */

/* System Yellow Text -> Theme Magenta */
.text-warning,
.text-yellow,
.text-gold,
span.text-warning,
p.text-warning,
small.text-warning,
a.text-warning,
.warning-text,
.yellow-text,
.domain-checker-container .tagline,
.domain-suggestions .tagline,
.panel-sidebar .tagline,
.cart-body .tagline,
[class*="text-warning"] {
  color: #d01383 !important;
}

/* Hover state for Yellow/Warning links & text -> Muted Fade Theme Magenta */
a.text-warning:hover,
a.text-warning:focus,
a.text-yellow:hover,
a.text-yellow:focus,
.text-warning a:hover,
.text-yellow a:hover {
  color: #b50f71 !important;
}

/* Yellow Buttons -> Theme Magenta Gradient */
.btn-warning,
a.btn-warning,
button.btn-warning,
.btn-yellow,
a.btn-yellow,
button.btn-yellow,
.btn-gold,
a.btn-gold,
button.btn-gold,
[class*="btn-warning"] {
  background: linear-gradient(135deg, #d01383 0%, #db4324 100%) !important;
  background-color: #d01383 !important;
  border-color: #d01383 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(208, 19, 131, 0.25) !important;
  transition: all 0.3s ease !important;
}

/* Yellow Buttons Hover State -> Slight Fade Muted Magenta */
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
a.btn-warning:hover,
a.btn-warning:focus,
button.btn-warning:hover,
button.btn-warning:focus,
.btn-yellow:hover,
.btn-yellow:focus,
a.btn-yellow:hover,
button.btn-yellow:hover,
[class*="btn-warning"]:hover,
[class*="btn-warning"]:focus {
  background: linear-gradient(135deg, #b50f71 0%, #b83317 100%) !important;
  background-color: #b50f71 !important;
  border-color: #b50f71 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(208, 19, 131, 0.35) !important;
  transform: translateY(-2px) !important;
  opacity: 0.92 !important;
}

/* Outline Yellow Buttons */
.btn-outline-warning,
a.btn-outline-warning {
  color: #d01383 !important;
  border-color: #d01383 !important;
  background-color: transparent !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
a.btn-outline-warning:hover {
  color: #ffffff !important;
  background-color: #d01383 !important;
  border-color: #d01383 !important;
  opacity: 0.9 !important;
}

/* Yellow Badges & Labels */
.badge-warning,
.label-warning,
a.badge-warning {
  background-color: #d01383 !important;
  color: #ffffff !important;
}
a.badge-warning:hover,
a.badge-warning:focus {
  background-color: #b50f71 !important;
  color: #ffffff !important;
}

/* Yellow Alerts & Cards */
.bg-warning {
  background-color: #d01383 !important;
  color: #ffffff !important;
}
a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #b50f71 !important;
  color: #ffffff !important;
}

.alert-warning {
  background-color: #fff6f5 !important;
  border-color: #ffd5cc !important;
  color: #d01383 !important;
}
.alert-warning hr {
  border-top-color: #ffd5cc !important;
}
.alert-warning .alert-link {
  color: #b50f71 !important;
  font-weight: 700;
}

/* =====================================================
   LOGGED IN DASHBOARD HEADER — Remove top whitespace
   ===================================================== */
header.header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

header.header .topbar:empty {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* =====================================================
   RESPONSIVE — Domain search on mobile
   ===================================================== */
@media (max-width: 767px) {
  .home-domain-search,
  #domain-search-section {
    padding: 20px 20px !important;
  }
  .ds-filters-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .ds-filter-item {
    width: 100% !important;
  }
  .ds-actions-row {
    flex-direction: column !important;
  }
  .ds-btn {
    width: 100% !important;
  }
}