@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --brand: #673de6;
  --brand-dark: #5025d1;
}

body { 
    font-family: 'Inter', sans-serif; 
    background: #f4f5ff; 
    
}

.btn-primary, .btn-success {
  background: var(--brand);
  border-color: var(--brand);
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary:hover { 
    background: var(--brand-dark); 
    border-color: var(--brand-dark); 
    
}

.card, .panel, .tile {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(20, 20, 60, .06);
}

.navbar { 
    background: #fff; 
    box-shadow: 0 1px 0 #e7e8f3; 
    
}

.form-control { 
    border-radius: 8px; 
    height: 44px; 
    
}

a { 
    color: var(--brand); 
    
}

.main-navbar-wrapper {
  background: #fff;
  padding: 14px 0;
  box-shadow: 0 1px 0 #e7e8f3;
}

.navbar-brand .logo-img { 
    height: 38px; 
    width: auto; 
    
}

.main-navbar-wrapper .navbar-nav .nav-link {
  font-weight: 500;
  color: #1d1e20;
  padding: 8px 14px;
  border-radius: 8px;
}

.main-navbar-wrapper .navbar-nav .nav-link:hover {
  background: #f1ecff;
  color: #673de6;
}

.cart-btn { position: relative; }
.cart-btn .badge {
  background: #673de6;
  border-radius: 999px;
}

.master-breadcrumb { 
    background: #f4f5ff; 
    padding: 6px 0; 
    
}

.master-breadcrumb .breadcrumb { 
    background: transparent; 
    margin: 0; 
    font-size: 14px; 
    
}

body a:not(.btn):not(.nav-link) { 
    color: var(--brand); 
    
}

body a:not(.btn):not(.nav-link):hover { 
    color: var(--brand-dark); 
    
}

.btn-outline-primary,
.btn-default {
  color: var(--brand) !important;
  border-color: var(--brand) !important;
  border-radius: 8px;
  font-weight: 600;
  background: transparent;
}
.btn-outline-primary:hover,
.btn-default:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

.btn-success {
  background: #1d1e20 !important;
  border-color: #1d1e20 !important;
  color: #fff !important;
}
.btn-success:hover { 
    background: #000 !important; 
    
}

.navbar-brand .logo-img { height: 46px; }
.list-group-item.active,
.list-group-item.active:hover {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
}

.list-group-item.active,
.list-group-item.active a,
.list-group-item.active i {
  color: #fff !important;
}

.tld-filters a {
  background: #f1ecff !important;
  color: var(--brand) !important;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 500;
}
.tld-filters a:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

.btn-return-to-admin,
a[href*="returntoadmin"] {
  display: none !important;
}

.tld-filters a.badge-secondary {
  background: #f1ecff !important;
  color: var(--brand) !important;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 500;
}

.tld-filters a.badge-success {
  background: var(--brand) !important;
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 999px;
}

.section-title,
#main-body h2.text-center {
  font-weight: 700;
  font-size: 32px;
  margin: 56px 0 32px;
  color: #1d1e20;
}

/* Product cards */
.product-card {
  border: 1px solid #e7e8f3;
  border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(103, 61, 230, .15);
}
.product-card .pricing-card-title { font-size: 22px; font-weight: 700; }
.product-card p { color: #5b5d6e; }

/* "How can we help" icon tiles */
.action-icon-btns a {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: 16px;
  padding: 24px 12px;
  display: block;
  text-align: center;
  font-weight: 600;
  color: #1d1e20;
  transition: all .2s ease;
}
.action-icon-btns a:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(103, 61, 230, .12);
  text-decoration: none;
  color: var(--brand);
}
.action-icon-btns .ico-container { color: var(--brand); font-size: 28px; margin-bottom: 8px; }
/* Footer */
.footer {
  background: #1d1e20 !important;
  color: #c8c9d4;
  padding: 48px 0 32px;
  margin-top: 60px;
}
/* ===== Homepage hero ===== */
.home-domain-search.hero {
  background: linear-gradient(180deg, #f1ecff 0%, #ffffff 100%);
  padding: 72px 0 56px;
}
.hero-inner { max-width: 820px; margin: 0 auto; }

.hero-eyebrow {
  display: inline-block;
  background: #fff;
  color: var(--brand);
  border: 1px solid #e0d6ff;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hero-title {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  color: #1d1e20;
  margin-bottom: 14px;
}
.hero-sub {
  font-size: 18px;
  color: #5b5d6e;
  margin-bottom: 36px;
}

/* Search bar */
.hero-search .input-group {
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(103, 61, 230, .16);
  border: 1px solid #e7e8f3;
  flex-wrap: nowrap;
}
.hero-search .form-control {
  height: 56px;
  border: 0;
  box-shadow: none;
  font-size: 18px;
  background: transparent;
  padding-left: 18px;
}
.hero-search .input-group-append { 
    gap: 8px; 
    
}
.hero-search .input-group-append .btn {
  height: 56px;
  padding: 0 28px;
  border-radius: 12px;
  font-size: 16px;
}

/* ===== Plans / products page ===== */
.africa-products .cart-sidebar { display: none !important; }
.africa-products .cart-body {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  float: none !important;
  padding: 0 15px;
}

.plans-header { margin: 24px 0 40px; }
.plans-header h1 { font-size: 40px; font-weight: 800; color: #1d1e20; }
.plans-tagline { font-size: 18px; color: #5b5d6e; margin-top: 8px; }

.plan-card {
  position: relative;
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: 20px;
  padding: 36px 28px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(103, 61, 230, .16);
}
.plan-featured {
  border: 2px solid var(--brand);
  box-shadow: 0 18px 40px rgba(103, 61, 230, .18);
}
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.plan-name { 
    font-size: 24px; 
    font-weight: 700; 
    text-align: center; 
    margin-bottom: 8px; 
    
}

.plan-stock { 
    display: block; 
    text-align: center; 
    font-size: 13px; 
    color: #e5484d; 
    
}

.plan-desc { 
    text-align: center; 
    color: #5b5d6e; 
    font-size: 15px; 
    
}

.plan-price { 
    text-align: center; 
    margin: 20px 0 24px; 
    
}

.plan-from { 
    font-size: 14px; 
    color: #5b5d6e; 
    
}

.plan-price .price { 
    font-size: 36px; 
    font-weight: 800;
    color: #1d1e20; 
    
}

.plan-cycle { 
    display: block; 
    color: #5b5d6e; 
    font-size: 15px; 
    margin-top: 2px; 
    
}

.plan-setup { 
    font-size: 13px; 
    color: #8b8d9b; 
    margin-top: 6px; 
    
}

.plan-cta { 
    border-radius: 12px; 
    padding: 14px; 
    font-weight: 700; 
    
}

.plan-featured .plan-cta { 
    background: var(--brand); 
    border-color: var(--brand); 
    
}

.plan-card:not(.plan-featured) .plan-cta {
  background: #fff;
  color: var(--brand);
  border: 2px solid var(--brand);
}
.plan-card:not(.plan-featured) 
.plan-cta:hover { 
    background: var(--brand); 
    color: #fff; 
    
}

.plan-features { 
    list-style: none; 
    padding: 0; 
    margin: 28px 0 0; 
    flex-grow: 1; 
    
}

.plan-features li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f8;
  font-size: 15px;
  color: #3a3b4a;
}

.plan-features li:last-child { 
    border-bottom: 0; 
    
}

.plan-features i { 
    color: #00b090; 
    margin-top: 4px; 
    
}

/* Featured TLD prices */
.hero .tld-logos {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 0;
  margin: 28px 0 0;
  flex-wrap: wrap;
  font-weight: 600;
  color: #1d1e20;
}

.hero .tld-logos img { 
    height: 24px; 
    margin-right: 8px; 
    vertical-align: middle; 
    
}

/* Trust badges */
.trust-badges {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0;
  margin: 32px 0 0;
  flex-wrap: wrap;
  color: #5b5d6e;
  font-size: 15px;
}

.trust-badges i { 
    color: var(--brand); 
    margin-right: 6px; 
    
}

.hero-pricing-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 600;
}
/* ===== Cart: domain search banner ===== */
#order-standard_cart .domain-checker-container {
  background: linear-gradient(135deg, #673de6 0%, #8c6cff 100%) !important;
  background-image: linear-gradient(135deg, #673de6 0%, #8c6cff 100%) !important;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(103, 61, 230, .22);
}

#order-standard_cart .domain-checker-bg {
  background-image: none !important;
  padding: 56px 24px;
}

#order-standard_cart .domain-checker-bg .form-control,
#order-standard_cart .domain-checker-bg input[type="text"] {
  height: 56px;
  border-radius: 12px 0 0 12px;
  font-size: 18px;
}

#order-standard_cart .domain-checker-bg .btn {
  height: 56px;
  border-radius: 0 12px 12px 0;
  background: #1d1e20;
  border-color: #1d1e20;
}

/* Result messages */
#order-standard_cart .domain-checker-available { 
    color: #00b090 !important; 
    font-weight: 700; 
    
}

#order-standard_cart .domain-checker-unavailable { 
    color: #e5484d !important; 
    font-weight: 700; 
    
}

#order-standard_cart .btn-add-to-cart {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  border-radius: 10px;
  padding: 10px 22px;
  font-weight: 600;
}

/* Promo boxes under the search */
#order-standard_cart .domain-promo-box {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: 16px;
  padding: 24px;
}
#order-standard_cart .domain-promo-box .btn-warning,
#order-standard_cart .btn-warning {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
}

/* Cart sidebar */
#order-standard_cart .cart-sidebar .card,
.sidebar .card {
  border: 1px solid #e7e8f3;
  border-radius: 16px;
  overflow: hidden;
}
.sidebar .list-group-item { 
    border-color: #f0f0f8; 
    padding: 12px 18px; 
    
}
.sidebar .list-group-item:hover:not(.active) { 
    background: #f7f4ff; 
    
}

@media (max-width: 575px) {
  .hero-title { 
      font-size: 32px; 
      
  }
  
  .home-domain-search.hero { 
      padding: 48px 0 40px; 
      
  }
}

.footer .nav-link,
.footer a { 
    color: #c8c9d4; 
    
}
.footer .nav-link:hover,
.footer a:hover { 
    color: #fff; 
    
}

.footer .copyright { 
    color: #8b8d9b; 
    font-size: 14px; 
    
}

.footer .btn { 
    color: #fff; 
    
}

/* =========================================================
   CART: REVIEW & CHECKOUT
   ========================================================= */

#order-standard_cart:has(.view-cart-items-header) .cart-sidebar { 
    display: none !important; 
    
}

#order-standard_cart:has(.view-cart-items-header) .cart-body {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  float: none !important;
}

#order-standard_cart .header-lined h1 { 
    font-weight: 800; 
    font-size: 36px; 
    
}

/* Items table */
#order-standard_cart .view-cart-items-header {
  background: #f1ecff !important;
  color: var(--brand) !important;
  border: 0 !important;
  border-radius: 14px 14px 0 0;
  font-weight: 700;
  padding: 14px 8px;
}

#order-standard_cart .view-cart-items {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

#order-standard_cart .view-cart-items .item { 
    border-color: #f0f0f8; 
    padding: 18px 8px; 
    
}

/* Empty cart */
#order-standard_cart .view-cart-empty {
  text-align: center;
  padding: 56px 20px;
  color: #5b5d6e;
  font-size: 18px;
}

#order-standard_cart .view-cart-empty::before {
  content: "\f07a";
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #f1ecff;
  color: var(--brand);
  font-size: 32px;
}

/* Promo / taxes tabs */
#order-standard_cart .view-cart-tabs .nav-tabs { 
    border-bottom: 1px solid #e7e8f3; 
    
}

#order-standard_cart .view-cart-tabs .nav-link { 
    border: 0; 
    color: #5b5d6e; 
    font-weight: 600; 
    
}

#order-standard_cart .view-cart-tabs .nav-link.active {
  color: var(--brand);
  background: transparent;
  border-bottom: 3px solid var(--brand);
}

#order-standard_cart .view-cart-tabs .tab-content {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-top: 0;
  border-radius: 0 0 14px 14px;
  padding: 20px;
}

/* Order summary card */
#order-standard_cart .order-summary {
  background: #fff !important;
  border: 1px solid #e7e8f3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(103, 61, 230, .10);
}

#order-standard_cart .order-summary h2 {
  background: var(--brand) !important;
  color: #fff !important;
  margin: 0;
  padding: 18px 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: left;
}

#order-standard_cart .order-summary .summary-container { 
    background: #fff; 
    padding: 18px 20px; 
    
}

#order-standard_cart .order-summary .total-due-today .amt {
  font-size: 34px;
  font-weight: 800;
  color: #1d1e20;
}

#order-standard_cart #checkout,
#order-standard_cart .btn-checkout {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 12px;
  padding: 14px 28px;
  font-weight: 700;
  width: 100%;
}

#order-standard_cart #checkout:disabled,
#order-standard_cart #checkout.disabled { 
    opacity: .45; cursor: not-allowed; 
    
}

#order-standard_cart .btn-continue-shopping { 
    color: var(--brand); 
    font-weight: 600; 
    
}

/* =========================================================
   DOMAIN PRICING PAGE
   ========================================================= */
.domain-pricing h4 { 
    font-size: 30px; 
    font-weight: 800; 
    margin-bottom: 16px; 
    
}

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

.featured-tld {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  margin-bottom: 16px;
  transition: all .2s ease;
}

.featured-tld:hover { 
    border-color: var(--brand); 
    box-shadow: 0 10px 24px rgba(103,61,230,.12); 
    
}

.featured-tld .price { 
    font-weight: 800; 
    font-size: 20px; color: var(--brand); 
    
}

.domain-pricing .table-container {
  background: #fff;
  border: 1px solid #e7e8f3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(20,20,60,.05);
}

#tableDomainPricing { 
    margin: 0; 
    
}

#tableDomainPricing thead th {
  background: #faf9ff !important;
  color: #5b5d6e;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 16px 18px;
  border: 0 !important;
  border-bottom: 1px solid #e7e8f3 !important;
  box-shadow: none !important;
}

#tableDomainPricing thead { 
    border-bottom: 0 !important; 
    box-shadow: none !important; 
    
}

#tableDomainPricing tbody td {
  padding: 18px;
  border-top: 1px solid #f0f0f8;
  vertical-align: middle;
  color: #3a3b4a;
}

#tableDomainPricing tbody tr:hover { 
    background: #f7f4ff; 
    
}

#tableDomainPricing td:first-child { 
    font-size: 20px; 
    font-weight: 800; 
    color: #1d1e20; 
    
}

#tableDomainPricing td:first-child::before { 
    content: "."; 
    color: var(--brand); 
    
}

#tableDomainPricing td:nth-child(3) { 
    font-weight: 700; 
    color: var(--brand); 
    
}

#tableDomainPricing td small { 
    color: #8b8d9b; 
    font-weight: 400; 
    
}

/* DataTables controls */
#tableDomainPricing_wrapper .dataTables_filter input,
#tableDomainPricing_wrapper input[type="search"] {
  border-radius: 12px;
  border: 1px solid #e0d6ff;
  height: 46px;
}
#tableDomainPricing_wrapper .dataTables_info { color: #5b5d6e; font-weight: 500; }
.pagination .page-link { color: var(--brand); border-radius: 8px; margin: 0 2px; border: 1px solid #e7e8f3; }
.pagination .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* =========================================================
   HOMEPAGE: product cards + help tiles
   ========================================================= */
.product-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f1ecff, #e3d9ff);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.product-card .card-body { padding: 32px 24px 28px; }

.action-icon-btns .ico-container {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #f1ecff;
  display: flex; align-items: center; justify-content: center;
}
.action-icon-btns .ico-container i {
  color: var(--brand) !important;
  opacity: 1 !important;
  font-size: 26px;
}

.action-icon-btns a:hover .ico-container { 
    background: var(--brand); 
    
}

.action-icon-btns a:hover .ico-container i { color: #fff !important; }
/* Right-side navbar: tidy the Account dropdown */
.main-navbar-wrapper .navbar-nav.ml-auto > .nav-item > .nav-link {
  border: 1px solid #e0d6ff;
  border-radius: 10px;
  padding: 8px 18px;
  font-weight: 600;
  color: var(--brand);
}
.main-navbar-wrapper .navbar-nav.ml-auto > .nav-item > .nav-link:hover {
  background: var(--brand);
  color: #fff;
}

/* Dropdown menus */
.main-navbar-wrapper .dropdown-menu {
  border: 1px solid #e7e8f3;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(20, 20, 60, .12);
  padding: 8px;
  margin-top: 10px;
}
.main-navbar-wrapper .dropdown-item {
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 500;
}
.main-navbar-wrapper .dropdown-item:hover { background: #f1ecff; color: var(--brand); }

/* Active page indicator */
.main-navbar-wrapper .nav-item.active > .nav-link {
  color: var(--brand);
  background: #f1ecff;
}