/**
 * Register.rw — Six theme brand layer
 * Built on the proven prior structure; palette swapped to the official
 * Register.rw Brand Guide. Readability prioritised (no dark-on-dark).
 *   pine #0E2A1B  mint #EAF7EF  leaf #1FA35C  lime #B6E24D
 *   line #DCEFE1  paper #FFFFFF  — font: Plus Jakarta Sans
 */

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

:root {
  --rw-ink: #0E2A1B;          /* pine — dark bands, footer, nav */
  --rw-ink-soft: #17402A;     /* pine lifted — dropdowns */
  --rw-lake: #1FA35C;         /* leaf — primary action */
  --rw-lake-bright: #25C06E;  /* leaf hover */
  --rw-sky: #EAF7EF;          /* mint — light tint */
  --rw-paper: #FFFFFF;        /* paper */
  --rw-line: #DCEFE1;         /* line — borders */
  --rw-gold: #B6E24D;         /* lime — accent underline */
  --rw-danger: #ef4444;
  --rw-radius: 12px;
  --rw-shadow: 0 12px 40px rgba(14, 42, 27, 0.07);

  --primary: var(--rw-lake);
  --primary-hover: var(--rw-lake-bright);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font);
  color: var(--rw-ink);
  background: var(--rw-paper);
  letter-spacing: -0.015em;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings default to pine ON LIGHT backgrounds only.
   Anything on a dark band is handled explicitly below. */
h1, h2, h3, h4, h5,
.card-title {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--rw-ink);
  line-height: 1.2;
}

a { color: var(--rw-lake); }
a:hover { color: var(--rw-lake-bright); }

/* ---------- Top navbar (Six uses #header / .navbar) ---------- */
#header,
.navbar,
.navbar-default,
#main-menu,
.header {
  background: var(--rw-ink) !important;
  border: 0 !important;
}

#header a,
.navbar a,
.navbar .nav-link,
.navbar-default .navbar-nav > li > a,
#main-menu a,
.navbar-brand,
.navbar .dropdown-toggle {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 500;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar .nav-link:hover,
#main-menu a:hover {
  color: #ffffff !important;
  box-shadow: inset 0 -2px 0 var(--rw-gold);
}

.navbar-default .navbar-nav > .active > a,
.navbar .nav-link.active {
  color: #ffffff !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--rw-gold);
}

/* "Hello, name" / account pill */
.navbar .loggedin,
#account-notifications-menu,
.navbar .btn-primary {
  background: rgba(255,255,255,0.08) !important;
}

/* Dropdowns: pine panel, white text */
.navbar .dropdown-menu,
#main-menu .dropdown-menu {
  background: var(--rw-ink-soft) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.navbar .dropdown-menu > li > a,
.navbar .dropdown-menu a {
  color: #ffffff !important;
}
.navbar .dropdown-menu > li > a:hover {
  background: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
}

/* ---------- Domain-search HERO band (Six: #domainSearch / .primary-content jumbotron) ----------
   Keep it as the theme's own band but force WHITE text so it's always readable,
   regardless of whether the band is pine or the theme's default. */
#domainSearch,
#domainSearch h1, #domainSearch h2, #domainSearch h3,
#domainSearch p, #domainSearch label,
.primary-content .jumbotron h1,
.primary-content .jumbotron h2,
.homepage-domain-search h1,
.homepage-domain-search h2,
.header-lined h1, .header-lined h2 {
  color: #ffffff !important;
}
#domainSearch, .homepage-domain-search, .jumbotron.primary {
  background: var(--rw-ink) !important;
}

/* Secondary help strip stays the theme's light band; make its text pine for contrast */
.btn-block-band, .card-tabs { color: var(--rw-ink); }

/* ---------- Buttons ---------- */
.btn-primary,
a.btn-primary,
input.btn-primary,
button.btn-primary {
  background: var(--rw-lake) !important;
  border-color: var(--rw-lake) !important;
  border-radius: 999px !important;
  font-weight: 600;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  box-shadow: none !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--rw-lake-bright) !important;
  border-color: var(--rw-lake-bright) !important;
}

.btn-default, .btn-secondary, .btn-light {
  border-radius: 999px !important;
  border-color: var(--rw-line) !important;
  background: #fff !important;
  color: var(--rw-ink) !important;
  font-weight: 600;
}

.btn-success {
  background: #fff !important;
  border: 1.5px solid var(--rw-lake) !important;
  color: var(--rw-lake) !important;
  border-radius: 999px !important;
  font-weight: 600;
}
.btn-success:hover {
  background: var(--rw-sky) !important;
  color: var(--rw-ink) !important;
}

/* ---------- Cards / panels (light, on light page) ---------- */
.card, .panel {
  border-radius: var(--rw-radius) !important;
  border: 1px solid var(--rw-line) !important;
  background: #fff !important;
  box-shadow: none;
}
.panel-heading, .card-header {
  background: #fff !important;
  border-bottom: 1px solid var(--rw-line) !important;
  font-weight: 600;
  color: var(--rw-ink) !important;
}
.card .fa, .card .fas, .feature-icon { color: var(--rw-lake); }

/* stat tiles keep their coloured underlines; just ensure numbers are pine */
.number-highlight, .card-body h3 { color: var(--rw-ink) !important; }

/* ---------- Tables ---------- */
.table thead th {
  border-top: 0;
  border-bottom: 2px solid var(--rw-ink);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--rw-ink);
  background: transparent;
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(31,163,92,0.05); }
.label-success, .badge-success { background: var(--rw-lake) !important; }

/* ---------- Inputs ---------- */
.form-control:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--rw-lake) !important;
  box-shadow: 0 0 0 0.15rem rgba(31,163,92,0.2) !important;
}

/* ---------- Footer (pine, readable) ---------- */
.footer, #footer, div.footer {
  background: var(--rw-ink) !important;
  color: rgba(234,247,239,0.82) !important;
  border-top: 3px solid var(--rw-gold);
  margin-top: 3rem;
}
.footer a, #footer a { color: #cdeed9 !important; }
.footer a:hover { color: #fff !important; }
.copyright { color: rgba(234,247,239,0.6) !important; }

/* ---------- Alerts ---------- */
.alert-success { border-left: 4px solid var(--rw-lake); background: var(--rw-sky); color: var(--rw-ink); }
.alert-danger { border-left: 4px solid var(--rw-danger); }

/* ---------- Guard: never let the page body go dark ---------- */
body, #main-body, .main-content, #content-wrapper, section.primary-content {
  background-color: #FFFFFF;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===== HERO readability fix (final) ===== */
/* Make the domain-search band pine and ALL its text white */
.jumbotron,
#order-standard_cart .jumbotron,
.primary-content .jumbotron,
section.primary-content > .jumbotron,
#domainSearch,
.domain-search,
.home-banner,
[class*="domain"] .jumbotron {
  background: var(--rw-ink) !important;
}
.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4,
.jumbotron p, .jumbotron label, .jumbotron .text-center,
#domainSearch h1, #domainSearch h2, #domainSearch h3,
.home-banner h1, .home-banner h2 {
  color: #ffffff !important;
}

/* ============================================================
   HERO FIX — real selectors from page source (#home-banner)
   ============================================================ */
#home-banner {
  background: var(--rw-ink) !important;
}
#home-banner h2,
#home-banner .container,
#home-banner label,
#home-banner p {
  color: #ffffff !important;
}
#home-banner h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
#home-banner .btn-primary,
#frmDomainHomepage .btn-primary {
  background: var(--rw-lake) !important;
  border-color: var(--rw-lake) !important;
  color: #fff !important;
}
#home-banner .form-control {
  border-color: var(--rw-line) !important;
}

/* ============================================================
   HEADER: white logo bar + dark-green account buttons
   ============================================================ */
/* White band behind the logo + top-right links */
#header .navbar-header,
#header-inner,
.header-top,
header .logo-container,
#logo,
.navbar-brand {
  background: #ffffff !important;
}

/* Put a white strip across the whole top logo row.
   Six wraps logo + login/register in the first .navbar area. */
#header > .container,
#header .navbar > .container {
  background: #ffffff !important;
}

/* Top-right auth links -> dark green text on the white bar */
#header .loginbar a,
.header-top a,
#account-menu > a,
a[href*="login"],
a[href*="register"] {
  color: var(--rw-ink) !important;
}
#header .loginbar a:hover,
a[href*="login"]:hover,
a[href*="register"]:hover {
  color: var(--rw-lake) !important;
}

/* View Cart button -> dark green fill, white text */
a[href*="cart"].btn,
.btn-view-cart,
#viewCart,
.cart-btn,
a.btn-primary[href*="cart"] {
  background: var(--rw-ink) !important;
  border-color: var(--rw-ink) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}
a[href*="cart"].btn:hover {
  background: var(--rw-lake) !important;
  border-color: var(--rw-lake) !important;
  color:#fff !important;
}

/* Account / logged-in menu button -> dark green to match */
.navbar .loggedin > a,
#account-menu.btn,
.account-btn {
  background: var(--rw-ink) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
}

/* ============================================================
   HEADER (real selectors from source): white logo bar,
   dark-green account buttons/links
   ============================================================ */

/* 1. Logo bar -> white so the dark logo is visible */
#header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--rw-line) !important;
}

/* 2. Login / Register text -> dark green on the white bar */
#header .top-nav > li > a {
  color: var(--rw-ink) !important;
  font-weight: 600;
}
#header .top-nav > li > a:hover {
  color: var(--rw-lake) !important;
}

/* 3. View Cart -> dark green fill, white text */
#header .top-nav .primary-action > a.btn,
#header .top-nav a[href*="cart.php"].btn {
  background: var(--rw-ink) !important;
  border-color: var(--rw-ink) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-weight: 600;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
#header .top-nav .primary-action > a.btn:hover {
  background: var(--rw-lake) !important;
  border-color: var(--rw-lake) !important;
  color: #ffffff !important;
}

/* 4. "Logged in as admin" button -> subtle, on-brand (dark green outline) */
#header .btn-logged-in-admin,
.btn-logged-in-admin {
  background: #ffffff !important;
  border: 1.5px solid var(--rw-ink) !important;
  color: var(--rw-ink) !important;
  border-radius: 999px !important;
}
.btn-logged-in-admin:hover {
  background: var(--rw-ink) !important;
  color: #ffffff !important;
}

/* 5. The little logout arrow icon next to it -> dark green so it shows on white */
#header .top-nav .fa,
#header .top-nav i {
  color: var(--rw-ink) !important;
}

/* ============================================================
   "How can we help today?" shortcuts band (real selectors)
   Brand it: mint band + pine label, leaf icons, pine dividers,
   dark-green hover fill.
   ============================================================ */
.home-shortcuts {
  background: var(--rw-sky) !important;   /* mint, not stock blue */
  border-top: 3px solid var(--rw-gold);   /* lime accent line */
}

/* "How can we help today?" label -> pine */
.home-shortcuts .lead {
  color: var(--rw-ink) !important;
  font-weight: 700;
}

/* Each shortcut cell */
.home-shortcuts ul > li > a {
  color: var(--rw-ink) !important;
  transition: background .15s ease, color .15s ease;
}
.home-shortcuts ul > li > a p { color: var(--rw-ink) !important; font-weight: 600; }

/* Icons -> leaf green */
.home-shortcuts ul > li > a i,
#btnBuyADomain i, #btnOrderHosting i,
#btnMakePayment i, #btnGetSupport i {
  color: var(--rw-lake) !important;
}

/* Hover: fill dark green, text + icon white */
.home-shortcuts ul > li > a:hover {
  background: var(--rw-ink) !important;
}
.home-shortcuts ul > li > a:hover p,
.home-shortcuts ul > li > a:hover i,
.home-shortcuts ul > li > a:hover span {
  color: #ffffff !important;
}

/* Vertical dividers between cells -> soft line color */
.home-shortcuts ul > li {
  border-color: var(--rw-line) !important;
}