/* ===================================================================
   Laundrolab — BRAND COLORS
   This is the ONLY place you need to touch to change the site's
   color theme. These CSS variables are the same ones the whole
   30,000-line style.css is built on (--cleanon-base, --cleanon-extra,
   etc.) — overriding them here changes every button, icon, heading,
   and highlight across all 4 pages, without editing style.css at all.

   --cleanon-base    -> main accent (buttons, icons, active states, "span" highlights in headings)
   --cleanon-extra    -> secondary accent (hover states, some icon backgrounds)
   --cleanon-black/--cleanon-secondary -> heading + dark-panel color (was a dark green, now a neutral dark navy so it doesn't clash with the new blue/orange)
   =================================================================== */
:root {
  --cleanon-base: #ff6600;
  --cleanon-base-rgb: 255, 102, 0;

  --cleanon-extra: #305cde;
  --cleanon-extra-rgb: 48, 92, 222;

  --cleanon-black: #16223b;
  --cleanon-black-rgb: 22, 34, 59;

  --cleanon-secondary: #16223b;
  --cleanon-secondary-rgb: 22, 34, 59;
}

/* The template hardcoded this gradient's RGB values directly (not as
   a var()), so changing --cleanon-black above doesn't touch it. This
   is the dark overlay on the "Contact Us" / "Services" / "Order"
   page-header banners — overriding it here keeps it tied to the same
   brand navy instead of the original dark green. */
.page-header__bg::before {
  background: linear-gradient(90deg, rgba(var(--cleanon-black-rgb), 0.93) 0%, rgba(var(--cleanon-black-rgb), 0.80) 60%, rgba(var(--cleanon-black-rgb), 0) 80%);
}




/* The template's contact-page__input-box rule only targeted
   text/email/number inputs. Order form needs tel + time inputs
   styled identically (same declarations, just extended selector). */
.contact-page__input-box input[type="text"],
.contact-page__input-box input[type="email"],
.contact-page__input-box input[type="number"],
.contact-page__input-box input[type="tel"],
.contact-page__input-box input[type="time"] {
  height: 57px;
  width: 100%;
  background-color: rgba(var(--cleanon-white-rgb), 0.03);
  border: 1px solid rgba(var(--cleanon-white-rgb), .10);
  padding-left: 20px;
  padding-right: 20px;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  color: rgba(var(--cleanon-primary-rgb), .60);
  display: block;
  border-radius: var(--cleanon-bdr-radius);
}

.contact-page__input-box input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.5);
  cursor: pointer;
}

/* Native browser <select> elements get instantly replaced by
   niceSelect at runtime (see script.js: select:not(.ignore)), so no
   raw <select> is ever actually visible to a user with JS enabled. */

/* Order page "Reset" button — same thm-btn family, just an outline
   variant so it doesn't visually compete with the primary "Book
   Order" action. No new button system, just a border/background
   tweak on the existing .thm-btn. */
.panda-order-form button[type="reset"].thm-btn {
  background: transparent;
}

/* Toast used by panda-laundry.js to confirm form submissions on this
   backend-less static frontend (Book Order / Send Message / Newsletter). */
.panda-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  max-width: 320px;
  background: var(--cleanon-white, #fff);
  color: var(--cleanon-black, #101e16);
  border-left: 4px solid var(--cleanon-base, #f1ab21);
  border-radius: var(--cleanon-bdr-radius, 10px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, .18);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
  transform: translateY(20px);
  opacity: 0;
  transition: all .35s ease;
  pointer-events: none;
}

.panda-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.panda-toast--error {
  border-left-color: #dc3545;
}

/* Footer "Services" / "Quick Links" / "Get In Touch" buttons — border
   changed from the orange accent to white per request. The offset
   shadow box behind each button (the template's ::before layer) is
   switched to white too, so no orange edge peeks out at the corner. */
.footer-widget__links-list li a {
  border-color: #ffffff;
}

.footer-widget__links-list li a::before {
  background-color: #ffffff;
}

/* Remove the decorative dashed lines either side of the footer logo —
   keeping just the logo, as requested. */
.footer-widget-two__logo:before,
.footer-widget-two__logo:after {
  display: none;
}

/* Services page — force every service card image to the same box size
   (matching the "Curtain Cleaning" card), regardless of the uploaded
   image's own resolution/aspect ratio. Ratio matches the actual photos
   (6:5) so the full image shows — nothing gets cropped off. */
.services-two__img {
  aspect-ratio: 6 / 5;
  flex-shrink: 0;
}

.services-two__img img {
  height: 100%;
  object-fit: cover;
}

/* Stretch every card's border-box to the full row height (Bootstrap's
   .row already equalizes the column heights — this makes the visible
   bordered card fill that column instead of hugging its own text
   length), so card bottoms line up across a row regardless of how many
   lines the description wraps to. */
.services-two__single {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}

.services-two__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}