
/* ============================================================
   Mobile responsive fixes for domainregister.tpl — 2026-05-22
   Stacks TLD pricing rows cleanly + shrinks hero padding
   ============================================================ */

@media (max-width: 767px) {

  /* Hero: drastically reduce desktop padding (was px-10 py-28 = 160px / 448px) */
  .domain-registiration-hero {
    padding: 60px 16px !important;
  }
  .hero-content {
    margin-bottom: 24px !important;
  }
  .hero-content h1 {
    font-size: 24px !important;
    line-height: 1.25 !important;
  }
  .hero-content p {
    padding-right: 0 !important;
    font-size: 14px !important;
  }

  /* Top nav strip in hero (Add Hosting / Transfer / Contact) */
  .min-header-links-container {
    position: static !important;
    padding: 12px 0 !important;
  }
  .min-header-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 16px !important;
  }
  .min-header-links a {
    font-size: 13px !important;
  }

  /* Domain search form: stack input + button vertically */
  .domain-search {
    border-radius: 12px !important;
    padding: 6px !important;
  }
  .domain-search-input-header {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important; /* 16px prevents iOS auto-zoom */
    height: auto !important;
    border-radius: 8px !important;
  }
  .domain-search-button-header {
    position: static !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
  }

  /* Reduce excessive horizontal padding on cart container */
  .domain-pricing.px-15 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .row.px-lg-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* === TLD pricing rows: stack as vertical cards on mobile === */
  .tld-row .tld-box-ews {
    flex-wrap: wrap !important;
    text-align: left !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    background: #fafbfa !important;
    border-bottom: 1px solid #e7eae8 !important;
  }

  /* First col: TLD name + availability badge — full width on its own line */
  .tld-row .tld-box-ews > .col:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid #e7eae8 !important;
    margin-bottom: 10px !important;
    text-align: left !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
  .tld-row .tld-box-ews > .col:first-child > span:first-child {
    font-size: 18px !important;
    margin-right: 0 !important;
  }
  .tld-row .tld-box-ews > .col:first-child > span:last-child {
    font-size: 12px !important;
    color: #6b6e6a !important;
    text-transform: lowercase !important;
  }

  /* The 3 price columns: equal-width row below the TLD name */
  .tld-row .tld-box-ews > .col:not(:first-child) {
    flex: 0 0 33.33% !important;
    max-width: 33.33% !important;
    padding: 0 4px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .tld-row .tld-box-ews > .col:not(:first-child) > span:first-child {
    display: block !important;
    font-size: 10px !important;
    color: #8a948f !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-weight: 600 !important;
  }
  .tld-row .tld-box-ews > .col:not(:first-child) > span:last-child {
    display: block !important;
    font-size: 13px !important;
    color: #1f2a25 !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* "Why choose us" section: tighten on mobile */
  .features-box-container .features-box-sub {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
  }
  .features-box-svg-container {
    margin-bottom: 12px !important;
  }
  .features-box-svg {
    max-width: 64px !important;
    height: auto !important;
  }

  /* Captcha container: prevent overflow */
  #captchaContainer, .captcha-container {
    padding: 12px !important;
  }
  .recaptcha-container {
    transform: scale(0.85) !important;
    transform-origin: center top !important;
  }

  /* Reduce excessive vertical spacing utility classes on mobile */
  .mt-20 { margin-top: 32px !important; }
  .mt-15 { margin-top: 24px !important; }
  .mt-10 { margin-top: 20px !important; }
  .py-28 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .px-15 { padding-left: 12px !important; padding-right: 12px !important; }
  .px-10 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Tablet-only tweaks (768-991) */
@media (min-width: 768px) and (max-width: 991px) {
  .domain-registiration-hero { padding: 80px 32px !important; }
  .hero-content h1 { font-size: 32px !important; }
}


/* ============================================================
   Brand styling pass for domainregister.tpl — 2026-05-22
   Hero + filters + TLD cards + fonts. Brand teal everywhere.
   Pure cosmetic, no functional change to forms/filters/JS.
   ============================================================ */

:root {
  --wp-brand: #31473a;
  --wp-brand-700: #243530;
  --wp-brand-soft: #dfeae3;
  --wp-brand-50: #edf4ee;
  --wp-body: #3a4a44;
  --wp-muted: #6b6e6a;
  --wp-rule: #e7eae8;
  --wp-paper: #f4f6f5;
  --wp-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Global font for the domain register page */
.domain-registiration-hero,
.domain-registiration-hero h1,
.domain-registiration-hero h2,
.domain-registiration-hero h3,
.domain-registiration-hero h4,
.domain-registiration-hero h5,
.domain-registiration-hero p,
.domain-registiration-hero a,
.domain-pricing,
.domain-pricing h1, .domain-pricing h2, .domain-pricing h3, .domain-pricing h4, .domain-pricing h5,
.domain-pricing p,
.domain-pricing a,
.domain-pricing span,
.tld-filters-container,
.tld-filters-container h5,
.tld-filters-container p,
.tld-filters a,
.tld-row,
.tld-row span,
.aws-domains-ltds-prices-item,
.aws-domains-ltds-prices-item p,
.aws-domains-ltds-prices-item span,
.features-box-container,
.features-box-container h3,
.features-box-container p,
.features-box-container a {
  font-family: var(--wp-sans) !important;
  letter-spacing: -0.005em;
}

/* ===== HERO ===== */
.domain-registiration-hero {
  background: linear-gradient(180deg, var(--wp-brand-50) 0%, #ffffff 100%) !important;
  border-bottom: 1px solid var(--wp-rule) !important;
}
.domain-registiration-hero.bg-pattern,
.domain-registiration-hero.pattern-2 {
  background-image: none !important;
}
.hero-content h1 {
  font-family: var(--wp-sans) !important;
  color: var(--wp-brand-700) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
.hero-content p {
  color: var(--wp-body) !important;
  font-weight: 400 !important;
}

/* Top nav strip (Add Hosting / Transfer / Contact) */
.min-header-links-container h5 {
  color: var(--wp-brand-700) !important;
  font-weight: 600 !important;
}
.min-header-links a {
  color: var(--wp-body) !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
}
.min-header-links a:hover,
.min-header-links a.active {
  background: var(--wp-brand) !important;
  color: #fff !important;
}

/* ===== DOMAIN SEARCH FORM ===== */
.domain-search {
  background: #ffffff !important;
  border: 1px solid var(--wp-rule) !important;
  box-shadow: 0 8px 24px -12px rgba(15,22,18,0.10) !important;
  border-radius: 14px !important;
  padding: 8px !important;
}
.domain-search-input-header {
  font-family: var(--wp-sans) !important;
  font-size: 16px !important;
  color: var(--wp-brand-700) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font-weight: 500 !important;
}
.domain-search-input-header::placeholder {
  color: var(--wp-muted) !important;
  font-weight: 400 !important;
}
.domain-search-button-header,
button.domain-check-availability {
  background: var(--wp-brand) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 12px 24px !important;
  letter-spacing: 0.005em !important;
  transition: background 0.15s !important;
}
.domain-search-button-header:hover,
button.domain-check-availability:hover {
  background: var(--wp-brand-700) !important;
}

/* ===== FEATURED TLD CARDS (the cards above filter) ===== */
.aws-domains-ltds-prices-item {
  background: #ffffff !important;
  border: 1px solid var(--wp-rule) !important;
  border-radius: 14px !important;
  padding: 24px 16px !important;
  text-align: center !important;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s !important;
}
.aws-domains-ltds-prices-item:hover {
  border-color: var(--wp-brand) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px -12px rgba(49,71,58,0.18) !important;
}
.aws-domains-ltds-prices-item img {
  margin: 0 auto 12px auto !important;
  max-height: 40px !important;
  width: auto !important;
}
.aws-domains-ltds-prices-item p {
  color: var(--wp-muted) !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
}
.aws-domains-ltds-prices-item p b {
  color: var(--wp-brand-700) !important;
}
.aws-domains-ltds-price-item {
  display: block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--wp-brand) !important;
  margin-bottom: 16px !important;
}
.aws-domains-ltds-price-item small {
  font-size: 12px !important;
  color: var(--wp-muted) !important;
  font-weight: 500 !important;
}
.aws-domains-ltds-prices-item .btn-outline-black,
.aws-domains-ltds-prices-item a.btn {
  background: transparent !important;
  border: 1.5px solid var(--wp-brand) !important;
  color: var(--wp-brand) !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: all 0.15s !important;
}
.aws-domains-ltds-prices-item .btn-outline-black:hover,
.aws-domains-ltds-prices-item a.btn:hover {
  background: var(--wp-brand) !important;
  color: #fff !important;
}

/* ===== FILTER CONTAINER ===== */
.tld-filters-container {
  background: #ffffff !important;
  border: 1px solid var(--wp-rule) !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
}
.tld-filters-container h5 {
  font-family: var(--wp-sans) !important;
  color: var(--wp-brand-700) !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 8px !important;
}
.tld-filters-container > p {
  color: var(--wp-muted) !important;
  font-size: 14px !important;
  margin-bottom: 24px !important;
}

/* Filter buttons (the category pills) */
.tld-filters {
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}
.tld-filters a {
  font-family: var(--wp-sans) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: var(--wp-paper) !important;
  border: 1px solid var(--wp-rule) !important;
  color: var(--wp-body) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  margin: 0 !important;
}
.tld-filters a:hover {
  border-color: var(--wp-brand) !important;
  color: var(--wp-brand-700) !important;
  background: var(--wp-brand-50) !important;
}
.tld-filters a.active,
.tld-filters a.selected {
  background: var(--wp-brand) !important;
  border-color: var(--wp-brand) !important;
  color: #ffffff !important;
}
.tld-filters a span {
  font-size: 11px !important;
  opacity: 0.75 !important;
}
.tld-filters a.active span,
.tld-filters a.selected span {
  opacity: 0.9 !important;
}

/* ===== TLD PRICING ROWS (desktop styling) ===== */
@media (min-width: 768px) {
  .tld-row .tld-box-ews {
    background: #ffffff !important;
    border: 1px solid var(--wp-rule) !important;
    border-bottom: 1px solid var(--wp-rule) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 18px 24px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
  }
  .tld-row .tld-box-ews:hover {
    border-color: var(--wp-brand) !important;
    box-shadow: 0 4px 12px -6px rgba(49,71,58,0.12) !important;
  }
}
/* TLD label and availability badge */
.tld-row .tld-box-ews > .col:first-child > span:first-child {
  color: var(--wp-brand) !important;
  font-family: var(--wp-sans) !important;
}
.tld-row .tld-box-ews > .col:first-child > span:last-child {
  color: var(--wp-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.tld-row .tld-box-ews > .col:not(:first-child) > span:first-child {
  color: var(--wp-muted) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 11px !important;
}
.tld-row .tld-box-ews > .col:not(:first-child) > span:last-child {
  color: var(--wp-brand-700) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* "More suggestions" button */
.btn-moresuggestion {
  background: var(--wp-brand) !important;
  border-color: var(--wp-brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 10px 20px !important;
}
.btn-moresuggestion:hover {
  background: var(--wp-brand-700) !important;
  border-color: var(--wp-brand-700) !important;
}

/* ===== WHY CHOOSE US ===== */
.features-box-container .features-box-text h3.title {
  font-family: var(--wp-sans) !important;
  color: var(--wp-brand-700) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: -0.005em !important;
}
.features-box-container .features-box-text p {
  color: var(--wp-muted) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
.features-box-container .features-box-text a {
  color: var(--wp-brand) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.features-box-container .features-box-text a:hover {
  color: var(--wp-brand-700) !important;
}


/* ============================================================
   Specificity boosters — domainregister.tpl, 2026-05-22
   Beat parent theme rules that were winning over the above
   ============================================================ */

/* Search button: parent has .btn-black at same specificity */
form.domain-search-form .domain-search button.domain-search-button-header,
form.domain-search-form .domain-search button.btn-black,
form.domain-search-form .domain-search button.btn.btn-black,
form.domain-search-form .domain-search button.domain-check-availability {
  background-color: #31473a !important;
  background-image: none !important;
  border-color: #31473a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}
form.domain-search-form .domain-search button.domain-search-button-header:hover,
form.domain-search-form .domain-search button.btn-black:hover,
form.domain-search-form .domain-search button.domain-check-availability:hover {
  background-color: #243530 !important;
  border-color: #243530 !important;
}

/* Filter buttons: use container ancestor for higher specificity */
.tld-filters-container .tld-filters a.coodiv-text-9,
.tld-filters-container .tld-filters a.white-bg,
.tld-filters-container .tld-filters a.color-blackish-blue,
.tld-filters-container .tld-filters a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 9px 16px !important;
  background-color: #f4f6f5 !important;
  border: 1px solid #e7eae8 !important;
  color: #3a4a44 !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  margin: 4px !important;
}
.tld-filters-container .tld-filters a:hover {
  background-color: #edf4ee !important;
  border-color: #31473a !important;
  color: #243530 !important;
}
.tld-filters-container .tld-filters a.active,
.tld-filters-container .tld-filters a.selected {
  background-color: #31473a !important;
  border-color: #31473a !important;
  color: #ffffff !important;
}

/* Hero background: beat .bg-pattern.pattern-2 */
section.domain-registiration-hero,
div.domain-registiration-hero,
.domain-registiration-hero.bg-pattern,
.domain-registiration-hero.bg-pattern.pattern-2 {
  background: linear-gradient(180deg, #edf4ee 0%, #ffffff 100%) !important;
  background-image: linear-gradient(180deg, #edf4ee 0%, #ffffff 100%) !important;
}

/* Heading color override - beat .color-blackish-blue specificity */
.hero-content h1.color-blackish-blue,
.hero-content .col-md-7 h1,
.tld-filters-container h5.color-blackish-blue,
.tld-filters-container h5.playfair-display-font {
  color: #243530 !important;
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* "More suggestions" btn-primary -> brand teal */
.btn.btn-primary.btn-moresuggestion,
a.btn.btn-primary.btn-moresuggestion {
  background-color: #31473a !important;
  border-color: #31473a !important;
  color: #ffffff !important;
}


/* ============================================================
   Final specificity overrides — beat .tld-filters-filter-buttons-aws
   and .btn-black at higher-than-parent specificity
   ============================================================ */

/* Filter buttons — use data-category attribute selector to beat parent */
.tld-filters-container .tld-filters-filter-buttons-aws .tld-filters a[data-category],
body .tld-filters-container .tld-filters a[data-category],
html body .tld-filters a[data-category] {
  background-color: #f4f6f5 !important;
  background: #f4f6f5 !important;
  border: 1px solid #e7eae8 !important;
  color: #3a4a44 !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 4px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.tld-filters-container .tld-filters-filter-buttons-aws .tld-filters a[data-category]:hover,
body .tld-filters-container .tld-filters a[data-category]:hover {
  background-color: #edf4ee !important;
  background: #edf4ee !important;
  border-color: #31473a !important;
  color: #243530 !important;
}
.tld-filters-container .tld-filters-filter-buttons-aws .tld-filters a[data-category].active,
body .tld-filters-container .tld-filters a[data-category].active,
.tld-filters-container .tld-filters-filter-buttons-aws .tld-filters a[data-category].selected,
body .tld-filters-container .tld-filters a[data-category].selected {
  background-color: #31473a !important;
  background: #31473a !important;
  border-color: #31473a !important;
  color: #ffffff !important;
}

/* Search button — use id + chained classes to beat .btn-black !important */
form#frmDomainChecker .domain-search button#btnCheckAvailability,
form#frmDomainChecker button#btnCheckAvailability.btn-black,
form#frmDomainChecker button#btnCheckAvailability.domain-check-availability {
  background-color: #31473a !important;
  background: #31473a !important;
  border-color: #31473a !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}
form#frmDomainChecker button#btnCheckAvailability:hover {
  background-color: #243530 !important;
  background: #243530 !important;
  border-color: #243530 !important;
}


/* ============================================================
   Typography minimalism pass — domainregister.tpl, 2026-05-22
   Headings stay bold; secondary text becomes lighter / quieter.
   ============================================================ */

/* Hero subtitle: lighter weight */
.hero-content p {
  font-weight: 400 !important;
  color: #6b6e6a !important;
  letter-spacing: 0 !important;
}

/* Hero "Find a new domain" h1: slightly less heavy (700 not 800) */
.hero-content h1.color-blackish-blue,
.hero-content .col-md-7 h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Top nav strip (Add Hosting / Transfer / Contact) */
.min-header-links a {
  font-weight: 400 !important;
}
.min-header-links-container h5 {
  font-weight: 500 !important;
}

/* Filter container heading: less heavy */
.tld-filters-container h5.color-blackish-blue,
.tld-filters-container h5.playfair-display-font {
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
}
.tld-filters-container > p {
  font-weight: 400 !important;
  color: #8a948f !important;
}

/* Filter pills: lighter weight */
.tld-filters-container .tld-filters a[data-category],
body .tld-filters-container .tld-filters a[data-category] {
  font-weight: 500 !important;
}
.tld-filters-container .tld-filters a[data-category].active,
body .tld-filters-container .tld-filters a[data-category].active {
  font-weight: 600 !important;
}
.tld-filters-container .tld-filters a[data-category] span {
  font-weight: 400 !important;
}

/* TLD pricing row labels: NOT uppercase, lighter, sentence case */
.tld-row .tld-box-ews > .col:not(:first-child) > span:first-child {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: #8a948f !important;
}
.tld-row .tld-box-ews > .col:not(:first-child) > span:last-child {
  font-weight: 600 !important;
  font-size: 14px !important;
}
/* TLD name span: medium weight, not heavy */
.tld-row .tld-box-ews > .col:first-child > span:first-child {
  font-weight: 600 !important;
}
.tld-row .tld-box-ews > .col:first-child > span:last-child {
  font-weight: 400 !important;
  font-style: normal !important;
}

/* Featured TLD card details */
.aws-domains-ltds-prices-item p {
  font-weight: 400 !important;
}
.aws-domains-ltds-prices-item p b {
  font-weight: 600 !important;
}
.aws-domains-ltds-price-item {
  font-weight: 600 !important;
}
.aws-domains-ltds-price-item small {
  font-weight: 400 !important;
}
.aws-domains-ltds-prices-item .btn-outline-black,
.aws-domains-ltds-prices-item a.btn {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Search input + button: input lighter, button medium */
.domain-search-input-header {
  font-weight: 400 !important;
}
.domain-search-button-header,
button.domain-check-availability,
form#frmDomainChecker button#btnCheckAvailability {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* Why choose us titles + body */
.features-box-container .features-box-text h3.title {
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.features-box-container .features-box-text p {
  font-weight: 400 !important;
  color: #8a948f !important;
}
.features-box-container .features-box-text a {
  font-weight: 500 !important;
}

/* Lower-info help line under search */
.domain-search-form + p,
.domain-search-form ~ p.coodiv-text-11 {
  font-weight: 400 !important;
  color: #8a948f !important;
}

