/* RSU Customer Toolkit reskin — design tokens & global overrides.
   Loaded AFTER App_Themes/default/StyleSheet.css so it can override the
   CMS's bare default styling without editing that vendor file in place.
   Values pulled from the approved mockup's live CSS:
   https://rightsideup-customer-toolkit.jamiedylan2006.chatgpt.site/ */

:root {
  /* Core palette */
  --rsu-background: #080d12;
  --rsu-foreground: #f7f9fb;
  --rsu-brand-red: #df1728;
  --rsu-brand-red-bright: #ff3443;
  --rsu-brand-red-hover: #fb2b3d;
  --rsu-brand-deep-red: #8f1018;

  /* Greys / muted text */
  --rsu-muted: #b8c0c8;
  --rsu-muted-dim: #8f99a2;
  --rsu-muted-light: #dbe0e4;

  /* Surfaces */
  --rsu-panel: #181f26c2;
  --rsu-panel-solid: #12181f;
  --rsu-panel-soft: #ffffff13;
  --rsu-line: #ffffff38;

  /* Type */
  --rsu-font-headline: "Barlow Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --rsu-font-body: "Segoe UI", Arial, Helvetica, sans-serif;

  /* Shape */
  --rsu-radius-pill: 999px;
  --rsu-radius-card: 14px;
}

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&display=swap");

html, body {
  background: var(--rsu-background) !important;
  color: var(--rsu-foreground) !important;
  font-family: var(--rsu-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.is-title-lite {
  font-family: var(--rsu-font-headline) !important;
  font-weight: 300;
  color: var(--rsu-foreground) !important;
}

a {
  color: var(--rsu-foreground);
}

a:hover,
a:focus {
  color: var(--rsu-brand-red-bright);
}

/* Header — floating pill bar, matching the approved mockup's
   site-header: logo left, nav center, CTA right, over a dark
   translucent glass background. */
#topbar.is-topbar,
#ctl00_topbar.is-topbar {
  /* topbar.js sets style="display:table" via jQuery on load — an
     inline style, which beats any stylesheet rule unless we use
     !important here too. display:table shrink-wraps to content width,
     which is why the bar wasn't stretching to fill the page. */
  display: block !important;
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  height: auto !important;
  background: var(--rsu-panel-solid) !important;
  border: 1px solid var(--rsu-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px #0006;
}

#topbar.is-topbar.shrink,
#ctl00_topbar.is-topbar.shrink {
  background: var(--rsu-panel-solid) !important;
}

.is-topbar-container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 6px 18px !important;
  gap: 20px;
}

.is-topbar-logo {
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
  margin: 0 !important;
  position: static !important;
  flex: 0 0 auto;
}

.is-topbar-logo img {
  max-height: 64px;
  width: auto;
  display: block;
}

.is-topbar-menu {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* The vendor's own nav plugin already switches from an off-canvas
   mobile menu (position:fixed, slid off-screen) to an inline desktop
   menu at exactly this breakpoint (see topbar2.css ~L107-121) — only
   restyle the desktop layout here so the mobile slide-in menu (which
   depends on position:fixed + right:-1000px) keeps working untouched. */
@media all and (min-width: 1025px) {
  .is-topbar-menu .is-menu {
    display: flex !important;
    align-items: center !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    background: none !important;
    padding: 0 !important;
  }

  .is-topbar-menu .is-menu > ul {
    display: flex !important;
    align-items: center;
    gap: clamp(10px, 1.3vw, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .is-topbar-menu .is-menu > ul > li {
    float: none !important;
  }
}

.is-topbar-menu .is-menu ul li a {
  color: var(--rsu-foreground) !important;
  font-family: var(--rsu-font-body);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media all and (min-width: 1025px) {
  .is-topbar-menu .is-menu ul li a {
    font-size: 14px;
    padding: 8px 6px !important;
    line-height: normal !important;
  }
}

/* Dropdown submenus (e.g. Quick Track > Waybill Search / Waybill) —
   the vendor CSS only sets a box-shadow on the dropdown panel, no
   background, so it was showing through to whatever's behind it
   (nearly-invisible dark text with no contrast). It also has a more
   specific rule painting each row near-white on hover
   (".is-menu li:hover li {background:rgba(247,247,247,0.95)}"), which
   the panel-level fix alone didn't catch. */
.is-menu li ul {
  background: var(--rsu-panel-solid) !important;
  border: 1px solid var(--rsu-line);
  border-radius: 10px !important;
  padding: 6px 0 !important;
  overflow: hidden;
}

.is-menu li:hover li,
.is-menu li ul li {
  background: transparent !important;
}

.is-menu ul ul li a {
  color: var(--rsu-foreground) !important;
  background: transparent !important;
  font-size: 13px !important;
}

.is-menu ul ul li a:hover {
  color: var(--rsu-brand-red-bright) !important;
  background: var(--rsu-panel-soft) !important;
}

.is-topbar-menu .is-menu ul li a:hover {
  color: var(--rsu-brand-red-bright) !important;
}

/* Style the Quote link as the header's CTA button, mirroring the
   mockup's separate "Get a quote" pill — the CMS's nav is rendered
   entirely server-side (systems/menu control), so we can't add a new
   nav item without touching code-behind; re-skinning the existing
   Quote link achieves the same effect. */
.is-topbar-menu .is-menu ul li a[href$="quote.aspx"] {
  background: none;
  border: 2px solid var(--rsu-line) !important;
  border-radius: var(--rsu-radius-pill) !important;
  padding: 10px 20px !important;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.is-topbar-menu .is-menu ul li a[href$="quote.aspx"]:hover {
  background: var(--rsu-brand-red) !important;
  border-color: var(--rsu-brand-red) !important;
  color: var(--rsu-foreground) !important;
}

#is-menu-toggle .line {
  background: var(--rsu-foreground) !important;
}

/* Mobile slide-in menu panel — the vendor's default is a plain white
   panel; dark-theme it to match. Desktop uses .is-menu {background:none}
   (set above) since there the menu bar itself IS the header pill. */
@media all and (max-width: 1024px) {
  .is-menu {
    background: var(--rsu-panel-solid) !important;
    height: 100vh !important;
  }

  .is-menu ul li a {
    color: var(--rsu-foreground) !important;
    border-bottom: 1px solid var(--rsu-line);
  }

  .is-menu-close {
    color: var(--rsu-foreground) !important;
  }
}

/* Push page content below the floating header on every page (the
   header is position:fixed and no longer takes up flow space) */
.is-wrapper {
  padding-top: 110px;
}

/* Buttons — covers both the CMS's own .cl-button controls and the
   Bootstrap-classed buttons used by the Quick Track / Quote form modules */
.cl-button,
.btn,
input[type="submit"],
input[type="button"],
button {
  background: var(--rsu-brand-red) !important;
  color: var(--rsu-foreground) !important;
  border-radius: var(--rsu-radius-pill) !important;
  border: none !important;
  font-family: var(--rsu-font-body) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.cl-button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: var(--rsu-brand-red-hover) !important;
}

/* Site-wide dark rebuild: the CMS's page-builder section colors
   (.is-bg-grey/.is-bg-light + .is-dark-text) are stored per-section in
   the database, not in files, so individual sections can't be switched
   to the CMS's own .is-bg-dark/.is-light-text pairing without admin
   access. Since the whole site is going dark, flip the light variants
   globally instead. */
.is-bg-grey, .is-wrapper > div.is-bg-grey,
.is-bg-light, .is-wrapper > div.is-bg-light {
  background-color: var(--rsu-background) !important;
}

.is-dark-text, .is-dark-text h1, .is-dark-text h2, .is-dark-text h3,
.is-dark-text h4, .is-dark-text h5, .is-dark-text h6,
.is-dark-text p, .is-dark-text li {
  color: var(--rsu-foreground) !important;
}

/* Inner pages (Route Guide/Quick Track/Quote/Contact Us) author each
   content section with its own inline background-color/text color
   (set per-instance in the CMS editor, e.g. "background-color:
   rgb(211,211,211)") rather than the is-bg-grey/is-bg-light classes
   above — catch those generically so every page's sections come out
   dark regardless of what the original author picked. Excludes the
   hero/hero-photo overlay sections' own .is-overlay-bg, which is a
   separate child element and keeps its background photo. */
.is-section {
  background-color: var(--rsu-background) !important;
}

.is-section h1, .is-section h2, .is-section h3,
.is-section h4, .is-section h5, .is-section h6,
.is-section p, .is-section li {
  color: var(--rsu-foreground) !important;
}

/* Footer / login CTA band */
#footer.is-section,
.is-section.is-section-auto {
  background: var(--rsu-background) !important;
  color: var(--rsu-foreground) !important;
}

a.login {
  color: var(--rsu-brand-red-bright) !important;
  text-decoration: none;
}

a.login:hover {
  color: var(--rsu-foreground) !important;
}

/* Login modal (public-facing chrome — the CMS admin entry point, not a
   customer account login) */
.cl-modal .cl-content {
  background: var(--rsu-panel-solid) !important;
  color: var(--rsu-foreground) !important;
}

.cl-modal label {
  color: var(--rsu-foreground) !important;
}

.cl-modal input[type="text"],
.cl-modal input[type="password"] {
  background: var(--rsu-panel-soft) !important;
  border: 1px solid var(--rsu-line) !important;
  color: var(--rsu-foreground) !important;
}

/* Card grid (Route Guide / Quick Track / Quote) */
.is-box .column .padding-20 {
  background: var(--rsu-panel);
  border-radius: var(--rsu-radius-card);
}

.is-box .icon {
  color: var(--rsu-brand-red-bright) !important;
}

/* AjaxControlToolkit CalendarExtender popup (Collection Date fields on
   Waybill Search etc.) — default light widget theme, dark-themed here. */
.ajax__calendar_container {
  background: var(--rsu-panel-solid) !important;
  border: 1px solid var(--rsu-line) !important;
  border-radius: 10px !important;
  color: var(--rsu-foreground) !important;
}

.ajax__calendar_header,
.ajax__calendar_title,
.ajax__calendar_days,
.ajax__calendar_day,
.ajax__calendar_dayname,
.ajax__calendar_month,
.ajax__calendar_year,
.ajax__calendar_footer,
.ajax__calendar_body {
  background: transparent !important;
  color: var(--rsu-foreground) !important;
  border-color: var(--rsu-line) !important;
}

.ajax__calendar_day:hover,
.ajax__calendar_month:hover,
.ajax__calendar_year:hover {
  background: var(--rsu-brand-red) !important;
  color: var(--rsu-foreground) !important;
  cursor: pointer;
}

.ajax__calendar_active {
  background: var(--rsu-brand-red-bright) !important;
  color: var(--rsu-foreground) !important;
}

.ajax__calendar_today {
  border: 1px solid var(--rsu-brand-red-bright) !important;
  border-radius: 4px;
}

.ajax__calendar_other {
  color: var(--rsu-muted-dim) !important;
}

/* jQuery UI datepicker (used elsewhere, e.g. Route Guide's suburb
   combobox tooltips) — the default theme is a plain light widget,
   unstyled for the dark site. */
.ui-datepicker {
  background: var(--rsu-panel-solid) !important;
  border: 1px solid var(--rsu-line) !important;
  color: var(--rsu-foreground) !important;
  font-family: var(--rsu-font-body);
  border-radius: 10px;
  padding: 8px;
}

.ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  color: var(--rsu-foreground) !important;
  border: none;
}

.ui-datepicker .ui-datepicker-title,
.ui-datepicker-prev,
.ui-datepicker-next {
  color: var(--rsu-foreground) !important;
}

.ui-datepicker table {
  color: var(--rsu-foreground);
}

.ui-datepicker td a,
.ui-datepicker td span {
  background: transparent !important;
  color: var(--rsu-foreground) !important;
  border-color: var(--rsu-line) !important;
}

.ui-datepicker td a:hover {
  background: var(--rsu-brand-red) !important;
  color: var(--rsu-foreground) !important;
}

.ui-datepicker .ui-datepicker-today a {
  background: var(--rsu-panel-soft) !important;
  border-color: var(--rsu-brand-red-bright) !important;
}

.ui-datepicker-calendar .ui-state-active {
  background: var(--rsu-brand-red) !important;
  color: var(--rsu-foreground) !important;
}

/* Native <select> dropdown lists (Waybill Search's "recent waybills"
   picker, Route Guide's hub/suburb pickers, Quote's suburb pickers,
   etc.) -- the page's global white text color was cascading into the
   browser's native option-list popup, which keeps its own white
   background (most browsers don't let a page recolor that popup's
   background), making unselected options nearly invisible. The select
   box itself already matches the page's other white input fields, so
   only fix the option text color -- don't change the select's own
   background and create an inconsistency with its sibling inputs. */
select option {
  color: #1a1a1a !important;
  background-color: #fff !important;
}

select option:checked,
select option:hover {
  background-color: var(--rsu-brand-red) !important;
  color: var(--rsu-foreground) !important;
}

/* Default GridView skin (App_Themes/default/SkinFile.skin applies
   CssClass="GridView" to every <asp:GridView> site-wide unless a
   module overrides it explicitly) -- white background, no text color
   set, so cells were inheriting the page's global white text color:
   invisible. Individual modules that already set their own explicit
   RowStyle/HeaderStyle colors (e.g. Waybill Search's results grid,
   Quick Track) aren't affected since those inline styles win over
   this class rule. This is the fallback for every other GridView
   (Your Quotes, etc.) that never had its own colors set. */
.GridView {
  background: #fff !important;
  color: #1a1a1a !important;
}

.GridViewHeader th {
  background: var(--rsu-brand-red) !important;
  color: #fff !important;
}

.GridViewRow td,
.GridViewAlternatingRow td {
  color: #1a1a1a !important;
}

.GridViewAlternatingRow td {
  background-color: #f8f8f8 !important;
}