/* =====================================================================
   R&N Data — WHMCS Client Area Theme
   Matches the official rndata.com.au brand guide
   Child theme of "Twenty-One" (Bootstrap 4)
   ---------------------------------------------------------------------
   BRAND GUIDE
     Font   : RNS Sanz (Black for headings, Light for body) — self-hosted
     Cyan   : #67CADA   CMYK 54 0 14 0
     Teal   : #228D9D   CMYK 81 29 34 2
     Charcoal: #414042  CMYK 0 0 0 90
   ---------------------------------------------------------------------
   All colours live in :root — change once, cascades everywhere.
   ===================================================================== */

/* ---- Self-hosted brand font (RNS Sanz) ----------------------------
   Place your licensed RNS Sanz webfont files in:  css/fonts/
   File names below are suggestions — rename the url() to match yours.
   Until the files are present, the theme falls back to Inter (below).
   Delete any @font-face block whose weight you don't upload to avoid
   harmless 404s in the browser console.
-------------------------------------------------------------------- */
@font-face {
  font-family: 'RNS Sanz';
  src: url('fonts/RNSSanz-Light.woff2') format('woff2'),
       url('fonts/RNSSanz-Light.woff')  format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'RNS Sanz';
  src: url('fonts/RNSSanz-Normal.woff2') format('woff2'),
       url('fonts/RNSSanz-Normal.woff')  format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'RNS Sanz';
  src: url('fonts/RNSSanz-SemiBold.woff2') format('woff2'),
       url('fonts/RNSSanz-SemiBold.woff')  format('woff');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'RNS Sanz';
  src: url('fonts/RNSSanz-Black.woff2') format('woff2'),
       url('fonts/RNSSanz-Black.woff')  format('woff');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---- Free fallback font (remove this line if you only want RNS Sanz) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --rnd-cyan:        #67CADA;   /* primary brand accent  */
  --rnd-teal:        #228D9D;   /* hover / active / dark accent */
  --rnd-teal-dark:   #1b6f7c;   /* pressed / deep accent */
  --rnd-charcoal:    #414042;   /* headings / dark sections */
  --rnd-ink:         #54565a;   /* body text  */
  --rnd-muted:       #8a8d92;   /* secondary text */
  --rnd-line:        #e4ebef;   /* borders / dividers */
  --rnd-bg:          #f6f9fb;   /* page background */
  --rnd-card:        #ffffff;   /* card / panel background */

  --rnd-font-body:    'RNS Sanz', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --rnd-font-heading: 'RNS Sanz', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rnd-radius: 8px;
  --rnd-shadow: 0 2px 10px rgba(65, 64, 66, 0.07);
}

/* =====================  BASE  ===================== */
body {
  background-color: var(--rnd-bg) !important;
  color: var(--rnd-ink);
  font-family: var(--rnd-font-body);
  font-weight: 300;            /* RNS Sanz Light for body, per brand guide */
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--rnd-font-heading);
  color: var(--rnd-charcoal);
  font-weight: 900;            /* RNS Sanz Black for headings, per brand guide */
  letter-spacing: 0.005em;
}

/* Optional: match the all-caps logo treatment on headings.
   Uncomment to enable.
h1, h2, h3, .page-header h1 {
  font-variant: small-caps;
  text-transform: lowercase;
}
*/

a        { color: var(--rnd-teal); }
a:hover,
a:focus  { color: var(--rnd-teal-dark); }

/* =====================  HEADER / NAVBAR (DARK, like the footer)  ===================== */
#header,
header.navbar,
.navbar.navbar-expand-lg,
.navbar-light,
.navbar-light.bg-white,
.navbar.bg-light {
  background-color: var(--rnd-charcoal) !important;
  border-bottom: 3px solid var(--rnd-cyan);
  box-shadow: var(--rnd-shadow);
}

/* Nav links light on the dark bar, cyan on hover/active.
   High-specificity (#header …) selectors so they outrank Twenty-One's
   own theme.min.css rules. Covers .nav-link, plain <a>, the dropdown
   toggle, and the "logged in as" text — but NOT items inside the white
   .dropdown-menu (handled separately below). */
#header .navbar .navbar-nav .nav-link,
#header .navbar-nav .nav-link,
#header .navbar-nav > li > a,
#header .navbar .navbar-nav .nav-item > .nav-link,
#header .navbar .nav-link,
#header .navbar .navbar-text,
#header .navbar .dropdown-toggle,
#header .navbar a:not(.dropdown-item):not(.btn):not(.btn-primary),
.navbar-light .navbar-nav .nav-item .nav-link {
  color: #e6e6e7 !important;
  font-weight: 600;
}
#header .navbar .navbar-nav .nav-link:hover,
#header .navbar .navbar-nav .nav-link:focus,
#header .navbar-nav > li > a:hover,
#header .navbar .navbar-nav .active > .nav-link,
#header .navbar .navbar-nav .nav-link.active,
#header .navbar a:not(.dropdown-item):not(.btn):hover {
  color: var(--rnd-cyan) !important;
}
/* Carets / icons sitting next to the menu labels */
#header .navbar .nav-link i,
#header .navbar .navbar-nav .caret {
  color: #e6e6e7 !important;
}

/* Mobile hamburger toggler -> light (no inline SVG, to avoid
   mod_security false positives; we just lighten the default icon). */
.navbar-light .navbar-toggler,
.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #e6e6e7 !important;
}
.navbar-light .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
  filter: invert(1) opacity(0.85) !important;
}

/* Dropdown menus stay light with dark text for readability */
#header .navbar .dropdown-menu,
.navbar .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--rnd-line);
}
#header .navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item {
  color: var(--rnd-charcoal) !important;
}
#header .navbar .dropdown-menu .dropdown-item:hover,
#header .navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: rgba(103, 202, 218, 0.12);
  color: var(--rnd-teal) !important;
}

#header .navbar-brand img,
.navbar-brand img {
  max-height: 46px;
  width: auto;
}
/* Company-name fallback (if no logo set) -> light text on the dark bar */
.navbar-brand,
#header .navbar-brand {
  color: #ffffff !important;
}

/* Top account / notification bar -> slightly darker so it layers over the menu */
#top-bar, .top-bar, .account-bar {
  background-color: #2c2b2d !important;
  color: #e6e6e7;
}
#top-bar a, .top-bar a, .account-bar a { color: #ffffff; }

/* Breadcrumb bar */
.breadcrumb, .breadcrumb-row {
  background-color: transparent !important;
  border-bottom: 1px solid var(--rnd-line);
}
.breadcrumb .active, .breadcrumb-item.active { color: var(--rnd-teal); }

/* =====================  BUTTONS  ===================== */
.btn-primary,
.primary-bg-color,
input[type="submit"].btn-primary {
  background-color: var(--rnd-cyan) !important;
  border-color: var(--rnd-cyan) !important;
  color: var(--rnd-charcoal) !important;
  font-weight: 600;
  border-radius: var(--rnd-radius);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: var(--rnd-teal) !important;
  border-color: var(--rnd-teal) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.2rem rgba(103, 202, 218, 0.4) !important;
}

.btn-outline-primary {
  color: var(--rnd-teal) !important;
  border-color: var(--rnd-cyan) !important;
}
.btn-outline-primary:hover {
  background-color: var(--rnd-cyan) !important;
  color: var(--rnd-charcoal) !important;
}

.btn-secondary {
  background-color: var(--rnd-charcoal) !important;
  border-color: var(--rnd-charcoal) !important;
}
.btn-secondary:hover { background-color: #2c2b2d !important; }

.btn { border-radius: var(--rnd-radius); }

/* =====================  CARDS / PANELS  ===================== */
.card, .panel {
  background-color: var(--rnd-card);
  border: 1px solid var(--rnd-line);
  border-radius: var(--rnd-radius);
  box-shadow: var(--rnd-shadow);
}
.card-header, .panel-heading {
  background-color: var(--rnd-card);
  border-bottom: 1px solid var(--rnd-line);
  font-family: var(--rnd-font-heading);
  font-weight: 900;
  color: var(--rnd-charcoal);
}

.panel-sidebar .list-group-item.active,
.list-group-item.active {
  background-color: var(--rnd-cyan) !important;
  border-color: var(--rnd-cyan) !important;
  color: var(--rnd-charcoal) !important;
}

/* =====================  TABLES  ===================== */
.table thead th {
  background-color: var(--rnd-charcoal);
  color: #ffffff;
  border-color: var(--rnd-charcoal);
  font-family: var(--rnd-font-heading);
  font-weight: 600;
}
.table-hover tbody tr:hover { background-color: rgba(103, 202, 218, 0.08); }

/* =====================  FORMS  ===================== */
.form-control:focus,
.custom-select:focus {
  border-color: var(--rnd-cyan);
  box-shadow: 0 0 0 0.2rem rgba(103, 202, 218, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--rnd-cyan);
  border-color: var(--rnd-cyan);
}

/* =====================  ALERTS / BADGES  ===================== */
.alert-info {
  background-color: rgba(103, 202, 218, 0.12);
  border-color: var(--rnd-cyan);
  color: var(--rnd-charcoal);
}
.badge-primary { background-color: var(--rnd-cyan) !important; color: var(--rnd-charcoal) !important; }

/* =====================  PROGRESS / UTILITIES  ===================== */
.progress-bar  { background-color: var(--rnd-cyan); }
.text-primary  { color: var(--rnd-teal) !important; }
.bg-primary    { background-color: var(--rnd-cyan) !important; }
.border-primary{ border-color: var(--rnd-cyan) !important; }

/* =====================  ORDER FORM ACCENTS  ===================== */
.cycle-options .btn.active,
.order-summary .cartTotal,
.product-pricing .price { color: var(--rnd-teal); }
.order-button .btn,
#btnCompleteProductConfig {
  background-color: var(--rnd-cyan) !important;
  border-color: var(--rnd-cyan) !important;
  color: var(--rnd-charcoal) !important;
}

/* =====================  ICONS — match the rest of the site  =====================
   WHMCS ships the homepage/account action icons in assorted "rainbow"
   accent colours (teal, pomegranate, sun-flower, asbestos, green,
   midnight-blue). These rules override ALL of them to the R&N Data
   cyan/charcoal so every icon matches the brand.
================================================================================= */
.action-icon-btns a,
.action-icon-btns a[class*="card-accent-"] {
  color: var(--rnd-charcoal) !important;
  font-weight: 600;
}
.action-icon-btns a .ico-container,
.action-icon-btns a[class*="card-accent-"] .ico-container {
  background-color: rgba(103, 202, 218, 0.14) !important;
  border-color: var(--rnd-cyan) !important;
  color: var(--rnd-teal) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.action-icon-btns a .ico-container i,
.action-icon-btns a[class*="card-accent-"] .ico-container i {
  color: var(--rnd-teal) !important;
}
.action-icon-btns a:hover .ico-container,
.action-icon-btns a[class*="card-accent-"]:hover .ico-container {
  background-color: var(--rnd-cyan) !important;
}
.action-icon-btns a:hover .ico-container i,
.action-icon-btns a[class*="card-accent-"]:hover .ico-container i,
.action-icon-btns a:hover {
  color: var(--rnd-charcoal) !important;
}

/* Service/product detail icons + product-group icons across the site */
.panel .ico-container i,
.service-actions i,
.client-service-actions i,
.domain-actions i,
.product-group-icon i,
.module-button i,
.btn-group .btn i.fa,
.list-group-item > i.fa {
  color: var(--rnd-teal) !important;
}

/* =====================  FOOTER  ===================== */
#footer, footer {
  background-color: var(--rnd-charcoal) !important;
  color: #cfd0d2;
  border-top: 3px solid var(--rnd-cyan);
}
#footer a, footer a { color: #ffffff; }
#footer a:hover, footer a:hover { color: var(--rnd-cyan); }

/* =====================  MISC POLISH  ===================== */
::selection { background: rgba(103, 202, 218, 0.3); }

.client-home-panels .panel,
.dashboard-tile {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.client-home-panels .panel:hover,
.dashboard-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(65, 64, 66, 0.12);
}

/* =====================  ORDER FORM — modern pricing cards (rndata_cart)  =====================
   Used by the custom "R&N Data Cart" order form template (products.tpl).
   Loads on the cart pages because they render inside this system theme.
============================================================================================ */
.rnd-store-header h1 { font-weight: 900; color: var(--rnd-charcoal); }
.rnd-store-header p  { color: var(--rnd-muted); }

.rnd-plans .row { margin-left: -10px; margin-right: -10px; }

.rnd-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--rnd-card);
  border: 1px solid var(--rnd-line);
  border-radius: 14px;
  padding: 30px 22px 24px;
  box-shadow: var(--rnd-shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rnd-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(65, 64, 66, .12);
  border-color: var(--rnd-cyan);
}
.rnd-plan-popular {
  border: 2px solid var(--rnd-cyan);
  box-shadow: 0 12px 32px rgba(103, 202, 218, .28);
}

.rnd-plan-badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--rnd-cyan);
  color: var(--rnd-charcoal);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.rnd-plan-head { text-align: center; margin-bottom: 6px; }
.rnd-plan-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: 14px;
  border-radius: 50%;
  background: rgba(103, 202, 218, .14);
  color: var(--rnd-cyan);
  font-size: 24px;
}
.rnd-plan-name { font-weight: 900; color: var(--rnd-charcoal); font-size: 20px; margin: 0; }

.rnd-plan-price { text-align: center; margin: 6px 0 14px; }
.rnd-price        { font-size: 38px; font-weight: 900; color: var(--rnd-charcoal); line-height: 1; }
.rnd-price-cycle  { font-size: 15px; color: var(--rnd-muted); font-weight: 600; }
.rnd-price-from   { display: block; font-size: 11px; color: var(--rnd-muted); text-transform: uppercase; letter-spacing: .05em; }
.rnd-setup small  { color: var(--rnd-muted); }

.rnd-plan-desc {
  color: var(--rnd-ink); font-size: 13.5px; text-align: center; margin-bottom: 14px;
}

.rnd-plan-features {
  list-style: none; padding: 16px 0 0; margin: 0 0 20px;
  border-top: 1px solid var(--rnd-line);
}
.rnd-plan-features li {
  position: relative;
  padding: 7px 0 7px 28px;
  color: var(--rnd-ink);
  font-size: 14px;
  border-bottom: 1px dashed var(--rnd-line);
}
.rnd-plan-features li:last-child { border-bottom: 0; }
.rnd-plan-features li i.fa-check {
  position: absolute; left: 0; top: 9px;
  color: var(--rnd-cyan);
}
.rnd-plan-features .feature-value { font-weight: 700; color: var(--rnd-charcoal); }

.rnd-plan-foot { margin-top: auto; }
.rnd-plan-btn  { width: 100%; font-weight: 700; padding: 11px 12px; border-radius: 8px; }
.rnd-plan-btn i { margin-right: 6px; }

@media (max-width: 575px) {
  .rnd-plan { padding: 26px 18px 22px; }
  .rnd-price { font-size: 34px; }
}

/* =====================  BRAND WATERMARK  =====================
   Large, faint R&N Data cloud mark anchored bottom-right of the
   viewport, bleeding off the edges. Sits over the page background
   colour but behind all content. Opacity is baked into the PNG
   (~10%); ask for a lighter/darker file if you want it adjusted.
============================================================== */
/* Painted on #main-body (Twenty-One's content wrapper) rather than
   <body>, because that wrapper has its own background that would
   otherwise cover it. background-attachment:fixed keeps it pinned to
   the viewport corner while scrolling. */
#main-body {
  background-color: var(--rnd-bg) !important;
  background-image: url("img/rnd-watermark.png") !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;     /* pinned to the corner */
  background-position: right -90px bottom -70px !important;
  background-size: 640px auto !important;       /* "blown up" */
}

@media (max-width: 991px) {
  #main-body {
    background-size: 420px auto !important;
    background-position: right -70px bottom -50px !important;
  }
}
@media (max-width: 575px) {
  #main-body {
    background-size: 300px auto !important;
    background-position: right -50px bottom -40px !important;
  }
}

/* =====================  FOOTER SIZE — make it compact  =====================
   Twenty-One pads the footer heavily (large py + mb-7 gaps between the
   social/links/copyright rows). Tighten all of it so the footer is slim.
========================================================================== */
#footer.footer {
  padding-top: 26px !important;
  padding-bottom: 20px !important;
}
#footer .list-inline.mb-7,
#footer .nav.mb-7 {
  margin-bottom: 12px !important;
}
#footer .copyright {
  margin-bottom: 0 !important;
  font-size: 13px;
}
#footer .nav .nav-link {
  padding-top: 2px;
  padding-bottom: 2px;
}