/* ============================================================
   Dealer landing pages – scoped overrides (Toyota Libya theme)

   This file is ONLY enqueued on dealer landing templates (see
   functions.php → toyota_libya_dealer_assets()). Every rule
   below is scoped under .dealer-page / .dealer-mas to avoid
   leaking into the global theme. Do not add unscoped rules.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   1. Top promo bar (dealer subsites)

   Plain STATIC strip in normal document flow — no position, no
   z-index, no scoped header/mega-menu overrides. The global header
   stays `position: fixed` (main.css) and the mega-menu keeps its
   original viewport-fixed, full-width behavior untouched.

   Because the global header is fixed with a matching body offset,
   the bar (first element in the body flow) renders directly BELOW
   the header and above the page content, and scrolls away with the
   page. The bar has zero involvement in header stacking, dropdown
   positioning, or scroll behavior.
   ────────────────────────────────────────────────────────────── */
/* Figma 6635:19627 — 55px grey strip, centered 20px Univers text,
   19px close X ~150px from the right edge. `position: relative` is
   only the anchor for the absolute close button (still in flow). */
.dealer-promo-bar {
  background-color: #f0f2f4;
  color: #000;
  font-family: "Univers", Arial, sans-serif;
  font-size: 20px;
  line-height: normal;
  text-align: center;
  min-height: 55px;
  padding: 10px 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.dealer-promo-bar__text {
  margin: 0;
  font-weight: 400;
}

.dealer-promo-bar__link {
  color: #e60021;
  font-weight: 700;
  text-decoration: underline;
  margin-left: 4px;
}

.dealer-promo-bar__link:hover,
.dealer-promo-bar__link:focus {
  color: #b8001a;
}

.dealer-promo-bar__close {
  position: absolute;
  top: 50%;
  right: 150px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: #000;
  line-height: 0;
}

.dealer-promo-bar__close:hover,
.dealer-promo-bar__close:focus {
  opacity: 0.6;
}

/* Dismissed state — DOM-only, never persisted; bar returns on reload. */
.dealer-promo-bar.is-hidden {
  display: none;
}

/* RTL: keep the X mirrored to the trailing side. */
[dir="rtl"] .dealer-promo-bar__close {
  right: auto;
  left: 150px;
}

@media (max-width: 991px) {
  .dealer-promo-bar {
    font-size: 16px;
    padding: 10px 36px;
  }
  .dealer-promo-bar__close {
    right: 8px;
  }
  [dir="rtl"] .dealer-promo-bar__close {
    right: auto;
    left: 8px;
  }
}

@media (max-width: 576px) {
  .dealer-promo-bar {
    font-size: 14px;
  }
}

/* ──────────────────────────────────────────────────────────────
   1b. Hero – container-controlled horizontal, vertical padding only
   ────────────────────────────────────────────────────────────── */
.dealer-mas .dealer-mas__hero .about-banner__inner {
  padding-top: 0;
  padding-bottom: 80px;
}

.dealer-mas .dealer-mas__hero .about-banner__inner .row {
  align-items: flex-end;
  margin-left: 0;
  margin-right: 0;
}

.dealer-mas .dealer-mas__hero .about-banner__title-col {
  padding-left: 0;
}

.dealer-mas .dealer-mas__hero .about-banner__heading {
  font-size: 70px;
  line-height: 1;
  margin: 0 0 20px 0;
  text-transform: capitalize;
}

.dealer-mas .dealer-mas__hero .about-banner__underline {
  width: 154px;
  height: 5px;
}

.dealer-mas .dealer-mas__hero .about-banner__logo-col {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-right: 0;
  padding-bottom: 0;
}

.dealer-mas .dealer-mas__hero .about-banner__logo {
  width: 339px;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* ──────────────────────────────────────────────────────────────
   2. Intro section – container-controlled horizontal, vertical padding only
   Row mirrors theme .container widths (1240 @≥1250, 1620 @≥1651)
   ────────────────────────────────────────────────────────────── */
.dealer-mas .dealer-mas__intro {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 0;
  padding-right: 0;
  background: #fff;
}

.dealer-mas .dealer-mas__intro .offers-warranty__row {
  width: 100%;
  min-height: 0;
  align-items: center;
  flex-wrap: nowrap;
  gap: 40px;
}

.dealer-mas .dealer-mas__intro .offers-warranty__img-col {
  flex: 0 0 54.88%;
  max-width: 54.88%;
  padding: 0;
}

.dealer-mas .dealer-mas__intro .offers-warranty__img {
  width: 100%;
  height: 532px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.dealer-mas .dealer-mas__intro .offers-warranty__content-col {
  flex: 0 0 39.01%;
  max-width: 39.01%;
  padding: 0;
  display: flex;
  align-items: center;
}

.dealer-mas .dealer-mas__intro .offers-warranty__content {
  padding: 0;
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.dealer-mas .dealer-mas__intro .offers-warranty__heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.dealer-mas .dealer-mas__intro .offers-warranty__underline {
  width: 154px;
  height: 5px;
  background-color: #e60021;
  margin: 0;
}

.dealer-mas .dealer-mas__intro .offers-warranty__body {
  margin: 0;
  font-family: "Univers", Arial, sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: #000;
}

.dealer-mas .dealer-mas__intro .offers-warranty__body p {
  font-size: 18px;
  line-height: 30px;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   3. Offers section – section title + custom dots
   (Slick dot styling is intentionally missing from main theme
   because offers.php disables dots; dealer pages re-enable them.)
   ────────────────────────────────────────────────────────────── */
.dealer-mas .dealer-mas__section-title {
  text-align: center;
  margin-bottom: 30px;
}
section.offers-slider-section.dealer-mas__offers .offers-slide__meta {
  margin-bottom: 10px;
}
.dealer-mas .dealer-mas__section-title .section-title {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 700;
  font-size: 50px;
  color: #000;
  margin: 0 0 10px;
  line-height: 1.1;
}

.dealer-mas .dealer-mas__section-title .section-title-underline {
  width: 154px;
  height: 5px;
  background: #e60021;
  margin: 0 auto;
}
.dealer-mas .dealer-mas__offers {
  padding-bottom: 100px;
}

.dealer-mas .dealer-offers-dots {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.dealer-mas .dealer-offers-dots .slick-dots {
  display: flex !important;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dealer-mas .dealer-offers-dots .slick-dots li {
  width: 35px;
  height: 5px;
  line-height: 0;
}

.dealer-mas .dealer-offers-dots .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #dce0e4;
  border-radius: 10px;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dealer-mas .dealer-offers-dots .slick-dots li.slick-active button {
  background: #e60021;
}

/* ──────────────────────────────────────────────────────────────
   4. Services section – dark bg, Figma pixel-perfect
   ────────────────────────────────────────────────────────────── */
.dealer-mas .dealer-mas__services {
  position: relative;
  background-color: #1a1a1a;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-left: 0;
  padding-right: 0;
  color: #fff;
  overflow: hidden;
}

.dealer-mas .dealer-mas__services.has-bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 0;
}

.dealer-mas .dealer-mas__services:not(.has-bg-image)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 0;
}

.dealer-mas .dealer-mas__services > .container {
  position: relative;
  z-index: 1;
}

/* Section heading */
.dealer-mas .dealer-mas__services .ts-tabs-header {
  margin-bottom: 50px;
}

.dealer-mas .dealer-mas__services .ts-tabs-title {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 10px 0;
}

.dealer-mas .dealer-mas__services .ts-tabs-underline {
  width: 154px;
  height: 5px;
  background: #e60021;
  margin: 0 auto;
}

/* Tab nav */
.dealer-mas .dealer-mas__services .ts-tabs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
  width: 100%;
}

.dealer-mas .dealer-mas__services .ts-tabs-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  height: 70px;
  padding: 0 20px;
  margin: 0 auto;
  border: 0;
  border-bottom: 1px solid #dce0e4;
  position: relative;
  width: auto;
  max-width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.dealer-mas .dealer-mas__services .ts-tab-btn {
  background: transparent;
  border: 0;
  height: 50px;
  padding: 0 16px;
  margin: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  line-height: 1;
  outline: none;
}

.dealer-mas .dealer-mas__services .ts-tab-btn:focus-visible span::after {
  outline: 2px solid #e60021;
  outline-offset: 2px;
}

.dealer-mas .dealer-mas__services .ts-tab-btn span {
  position: relative;
  display: inline-block;
  font-family: "Univers", Arial, sans-serif;
  font-size: 18px;
  line-height: 20px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    font-weight 0.2s ease;
}

.dealer-mas .dealer-mas__services .ts-tab-btn:hover span {
  color: #e60021;
}

.dealer-mas .dealer-mas__services .ts-tab-btn.is-active span {
  color: #e60021;
  font-weight: 700;
}

/* Indicator sits on the nav border-bottom, width = text width */
.dealer-mas .dealer-mas__services .ts-tab-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -26px;
  height: 4px;
  background: #e60021;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  pointer-events: none;
}

.dealer-mas .dealer-mas__services .ts-tab-btn.is-active span::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Panels + grid */
.dealer-mas .dealer-mas__services .ts-tab-panel {
  display: none;
  width: 100%;
}

.dealer-mas .dealer-mas__services .ts-tab-panel.is-active {
  display: block;
}

.dealer-mas .dealer-mas__services .ts-boxes-row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  align-items: stretch;
  justify-content: center;
}

.dealer-mas .dealer-mas__services .ts-boxes-row--3,
.dealer-mas .dealer-mas__services .ts-boxes-row--4 {
  justify-content: center;
}

/* Figma: fixed card width 380px regardless of count */
.dealer-mas .dealer-mas__services .ts-box-col {
  display: flex;
  flex: 0 0 auto;
  /* width: 380px; */
  max-width: 100%;
}

/* Card */
.dealer-mas .dealer-mas__services .ts-box {
  background: #fff;
  color: #000;
  border-radius: 10px;
  padding: 30px 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.dealer-mas .dealer-mas__services .ts-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
}

.dealer-mas .dealer-mas__services .ts-box__title {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  text-align: start;
  margin: 0;
}

.dealer-mas .dealer-mas__services .ts-box__desc,
.dealer-mas .dealer-mas__services .ts-box__desc p {
  text-align: start;
}

.dealer-mas .dealer-mas__services .ts-box__desc,
.dealer-mas .dealer-mas__services .ts-box__desc p {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #4a4a4a;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   5. Map + Contact section — Figma node 6527:18881
   Container handles horizontal alignment. Vertical padding only.
   Figma split: branches col (flexible) + form card (846px) + 40px gap
   ────────────────────────────────────────────────────────────── */
.dealer-mas .dealer-mas__contact {
  padding: 100px 0;
  padding-left: 0;
  padding-right: 0;
  background: #fff;
}

.dealer-mas .dealer-mas__contact-row {
  align-items: stretch;
  --bs-gutter-x: 40px;
  --bs-gutter-y: 40px;
}

/* Branches column — Figma: flex-col gap 20 between map / tabs / panel
   Inner content capped to 597px to match Figma left-frame content width */
.dealer-mas .dealer-branches {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 597px;
  width: 100%;
}

.dealer-mas .dealer-branches__map {
  position: relative;
  width: 100%;
  height: 292px;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f6f6;
}

.dealer-mas .dealer-branches__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.dealer-mas .dealer-branches__map-frame.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.dealer-mas .dealer-branches__map-frame iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.dealer-mas .dealer-branches__tabs {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 70px;
  padding: 0;
  border-bottom: 1px solid #dce0e4;
  position: relative;
  flex-wrap: wrap;
}

.dealer-mas .dealer-branches__tab {
  background: transparent;
  border: 0;
  padding: 0 10px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Univers", Arial, sans-serif;
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
  color: #000;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    font-weight 0.2s ease;
}

.dealer-mas .dealer-branches__tab:first-child {
  padding-left: 0;
  padding-right: 10px;
}

.dealer-mas .dealer-branches__tab:hover {
  color: #e60021;
}

.dealer-mas .dealer-branches__tab.is-active {
  color: #e60021;
  font-weight: 700;
}

/* Underline indicator — width = text width (no horizontal padding) */
.dealer-mas .dealer-branches__tab::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -10px;
  height: 4px;
  background: #e60021;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  pointer-events: none;
}

.dealer-mas .dealer-branches__tab:first-child::after {
  left: 0;
  right: 10px;
}

.dealer-mas .dealer-branches__tab.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.dealer-mas .dealer-branches__panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.dealer-mas .dealer-branches__panel a {
  transition: 0.5s all ease;
}
.dealer-mas .dealer-branches__panel.is-active {
  display: flex;
}

.dealer-mas .dealer-branches__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dealer-mas .dealer-branches__label {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: #000;
  text-align: start;
}

.dealer-mas .dealer-branches__value {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dealer-mas .dealer-branches__icon {
  width: 45px;
  height: 45px;
  background: #e60021;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dealer-mas .dealer-branches__value p {
  margin: 0;
  color: #4a4a4a;
  font-size: 20px;
  line-height: normal;
  text-align: start;
}

.dealer-mas .dealer-branches__value a {
  color: inherit;
  text-decoration: none;
}

.dealer-mas .dealer-branches__value a:hover {
  color: #e60021;
}

/* Phone list — Figma: flex-col gap 10, label bold black + number regular #4a4a4a, 20px */
.dealer-mas .dealer-branches__phones {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.dealer-mas .dealer-branches__phone {
  margin: 0;
  font-family: "Univers", Arial, sans-serif;
  font-size: 20px;
  line-height: normal;
  color: #4a4a4a;
  text-align: start;
  white-space: nowrap;
}

.dealer-mas .dealer-branches__phone-label {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 700;
  color: #000;
  margin-inline-end: 4px;
}

.dealer-mas .dealer-branches__phone-num {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 400;
  color: #4a4a4a;
  text-decoration: none;
}

.dealer-mas .dealer-branches__phone-num:hover,
.dealer-mas .dealer-branches__phone-num:focus {
  color: #e60021;
}

/* Per-phone icon (ACF image, phone row only). Reuses .dealer-branches__icon
   but resets the shared red-circle styling — location/email icons untouched. */
.dealer-mas .dealer-branches__phone {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dealer-mas .dealer-branches__phone .dealer-branches__icon img {
  display: block;
  width: auto;
  height: 24px;
  max-width: 45px;
  object-fit: contain;
}

.dealer-mas .dealer-branches__phone-content {
  min-width: 0;
}

/* Form card — Figma: bg white, rounded-16, pad 24/40, shadow 15 55 .1 */
.dealer-mas .dealer-mas__form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 15px 55px rgba(0, 0, 0, 0.1);
  padding: 40px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
  justify-content: center;
}

.dealer-mas .dealer-mas__form-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dealer-mas .dealer-mas__form-title {
  font-family: "Univers", Arial, sans-serif;
  font-weight: 700;
  font-size: 50px;
  color: #000;
  margin: 0;
  line-height: 1.1;
  text-transform: capitalize;
}

.dealer-mas .dealer-mas__form-accent {
  width: 154px;
  height: 5px;
  background: #e60021;
}

.dealer-mas .dealer-mas__form-row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 20px;
}

/* Input — Figma: bg #f6f6f6, h:50, rounded-8, pad 12/16, 14px text #4a4a4a */
.dealer-mas .dealer-mas__input {
  width: 100%;
  background: #f6f6f6;
  border: 0;
  border-radius: 8px;
  height: 50px;
  padding: 12px 16px;
  font-family: "Univers", Arial, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: #4a4a4a;
}

.dealer-mas .dealer-mas__input:focus {
  outline: 2px solid #e60021;
  outline-offset: 1px;
}

.dealer-mas .dealer-mas__input::placeholder {
  color: #4a4a4a;
  opacity: 1;
}

.dealer-mas .dealer-mas__textarea {
  height: 90px;
  min-height: 90px;
  resize: none;
}

.dealer-mas .dealer-mas__submit-wrap {
  display: flex;
  justify-content: flex-start;
}

/* Submit — uses theme .btn-pill-red as-is (fixed width 181, font 16, hover font 17).
   No local overrides so hover behavior stays identical to site-wide buttons. */

/* Submit button loading state (theme .btn-pill-red keeps its own hover). */
.dealer-mas .dealer-mas__submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  margin-inline-start: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dealer-mas-spin 0.8s linear infinite;
}

.dealer-mas .dealer-mas__submit.is-loading .dealer-mas__submit-spinner {
  display: inline-block;
}

.dealer-mas .dealer-mas__submit.is-loading {
  opacity: 0.8;
  cursor: progress;
}

/* Disabled state — applied when form isn't valid OR OTP isn't verified yet.
   Suppresses theme .btn-pill-red:hover font-size jump while disabled. */
.dealer-mas .dealer-mas__submit:disabled,
.dealer-mas .dealer-mas__submit.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.dealer-mas .dealer-mas__submit:disabled:hover,
.dealer-mas .dealer-mas__submit.is-disabled:hover,
.dealer-mas .dealer-mas__submit:disabled:focus,
.dealer-mas .dealer-mas__submit.is-disabled:focus {
  font-size: 16px;
}

@keyframes dealer-mas-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Honeypot — must remain in the DOM but be invisible to humans. */
.dealer-mas .dealer-mas__hp {
  position: absolute !important;
  left: 0px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Per-field error span sits below the input. Empty by default so it doesn't
   take vertical space until JS writes a message into it. */
.dealer-mas .dealer-mas__error {
  display: block;
  min-height: 0;
  margin-top: 6px;
  font-family: "Univers", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #e60021;
}

.dealer-mas .dealer-mas__error:empty {
  display: none;
}

.dealer-mas .dealer-mas__input.is-invalid {
  outline: 2px solid #e60021;
  outline-offset: 1px;
}

/* Inline feedback alert (pending / success / error). */
.dealer-mas .dealer-mas__feedback {
  margin-top: 8px;
}

.dealer-mas .dealer-mas__alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-family: "Univers", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.dealer-mas .dealer-mas__alert--success {
  background: #e8f6ec;
  color: #1e7f38;
  border: 1px solid #c5e6ce;
}

.dealer-mas .dealer-mas__alert--error {
  background: #fdecee;
  color: #b8001a;
  border: 1px solid #f5c2c8;
}

.dealer-mas .dealer-mas__alert--pending {
  background: #f0f2f4;
  color: #4a4a4a;
  border: 1px solid #dce0e4;
}

/* intl-tel-input wraps the phone input in an `.iti` div; force it to fill the
   form column so the country picker aligns with the existing 50px input. */
.dealer-mas .dealer-mas__field--phone .iti {
  display: block;
  width: 100%;
}

.dealer-mas .dealer-mas__field--phone .iti input.dealer-mas__input {
  width: 100%;
}

/* OTP gate — visuals are inherited from the shared svc-request__otp-* /
   pa-report__otp-* rules in the main theme stylesheet so MAS, FAQ, Service
   Request, and Parts Request all render OTP blocks identically. The classes
   below stay as structural hooks only (no rules) for templates and tests
   that target the MAS-specific name. */
.dealer-mas .dealer-mas__otp[hidden] {
  display: none;
}
.dealer-mas__form-card .iti__selected-dial-code {
  font-size: 14px;
  color: #000;
}
/* Responsive — vertical padding only, container handles horizontal */

@media (max-width: 1650px) {
  .dealer-promo-bar {
    font-size: 16px;
  }
  .dealer-promo-bar__close svg {
    width: 16px;
    height: 16px;
  }
  .dealer-mas .dealer-branches__tabs {
    gap: 20px;
  }
}

@media (max-width: 1364px) {
}

@media (max-width: 1199px) {
  .dealer-mas .dealer-mas__intro {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .dealer-mas .dealer-mas__offers {
    padding-bottom: 60px;
  }

  .dealer-mas .dealer-mas__intro .offers-warranty__row {
    flex-wrap: wrap;
    gap: 30px;
  }

  .dealer-mas .dealer-mas__intro .offers-warranty__img-col,
  .dealer-mas .dealer-mas__intro .offers-warranty__content-col {
    flex: 0 0 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
  }

  .dealer-mas .dealer-mas__intro .offers-warranty__img {
    height: 400px;
  }
  .dealer-mas .dealer-mas__services {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .dealer-mas .dealer-mas__services .ts-tabs-title {
    font-size: 40px;
  }

  .dealer-mas .dealer-mas__services .ts-tabs-nav {
    gap: 30px;
    height: auto;
    padding: 8px 12px;
  }
  /* Hero */
  .dealer-mas .dealer-mas__hero .about-banner__heading {
    font-size: 56px;
  }
  .dealer-mas .dealer-mas__hero .about-banner__inner {
    padding-bottom: 60px;
  }
  .dealer-mas .dealer-mas__hero .about-banner__logo {
    width: 280px;
  }

  /* Map + Contact (was desktop-only — stack on tablet) */
  .dealer-mas .dealer-mas__contact {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .dealer-mas .dealer-mas__contact-row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 30px;
  }
  .dealer-mas .dealer-branches {
    max-width: 100%;
  }
  .dealer-mas .dealer-mas__form-card {
    padding: 32px 24px;
    gap: 24px;
  }
  .dealer-mas .dealer-mas__form-title {
    font-size: 40px;
  }
  .dealer-mas .dealer-branches__tabs {
    gap: 0;
  }
  .dealer-mas .dealer-branches__tab {
    font-size: 14.5px;
    padding: 0 5px;
  }
  .dealer-mas .dealer-branches__value p {
    font-size: 17px;
  }
  .dealer-mas .dealer-branches__tab::after {
    left: 5px;
    right: 5px;
  }
  .dealer-mas .dealer-branches__tab:first-child {
    padding-right: 5px;
  }
  .dealer-mas .dealer-branches__tab:first-child::after {
    right: 5px;
  }
  .dealer-mas .dealer-mas__intro .offers-warranty__content {
    text-align: center;
  }
  .dealer-mas .dealer-mas__intro .offers-warranty__underline {
    margin: auto;
  }
}

@media (max-width: 991px) {
  .dealer-mas .dealer-mas__intro .offers-warranty__img {
    height: 350px;
  }
  .dealer-mas .dealer-mas__hero .about-banner__inner {
    padding-bottom: 40px;
  }

  .dealer-mas .dealer-mas__hero .about-banner__logo {
    width: 200px;
  }

  .dealer-mas .dealer-mas__hero .about-banner__heading {
    font-size: 48px;
  }
  .dealer-mas .dealer-mas__services .ts-box-col {
    width: calc((100% - 30px) / 2);
  }

  .dealer-mas .dealer-mas__services .ts-boxes-row--3 .ts-box-col {
    width: calc((100% - 30px) / 2);
  }
  /* Hero already has rules; tighten further */
  .dealer-mas .dealer-mas__hero .about-banner__heading {
    font-size: 44px;
  }
  .dealer-mas .dealer-mas__hero .about-banner__underline {
    width: 120px;
    height: 4px;
  }

  /* Intro — stack rule already in main block; just tighten typography */
  .dealer-mas .dealer-mas__intro .offers-warranty__body,
  .dealer-mas .dealer-mas__intro .offers-warranty__body p {
    font-size: 16px;
    line-height: 26px;
  }

  /* Section titles */
  .dealer-mas .dealer-mas__section-title .section-title {
    font-size: 40px;
  }

  /* Branches/map */
  .dealer-mas .dealer-branches__map {
    height: 260px;
  }
  .dealer-mas .dealer-branches__tabs {
    gap: 24px;
    height: auto;
    padding-bottom: 8px;
  }
  .dealer-mas .dealer-branches__label {
    font-size: 16px;
  }
  .dealer-mas .dealer-branches__value p,
  .dealer-mas .dealer-branches__phone {
    font-size: 18px;
  }
  .dealer-mas .dealer-branches__tab {
    font-size: 16px;
  }
  /* Form */
  .dealer-mas .dealer-mas__form-title {
    font-size: 36px;
  }
  .dealer-mas .dealer-mas__form-accent {
    width: 120px;
    height: 4px;
  }
}

@media (max-width: 767px) {
  .dealer-mas .dealer-mas__services .ts-tabs-title {
    font-size: 32px;
  }

  .dealer-mas .dealer-mas__services .ts-tabs-nav {
    gap: 16px;
  }

  .dealer-mas .dealer-mas__services .ts-tab-btn {
    padding: 0 6px;
  }

  .dealer-mas .dealer-mas__services .ts-tab-btn span {
    font-size: 16px;
  }
  /* Hero */
  .dealer-mas .dealer-mas__hero .about-banner__heading {
    font-size: 36px;
  }
  .dealer-mas .dealer-mas__hero .about-banner__logo {
    width: 160px;
  }

  /* Intro */
  .dealer-mas .dealer-mas__intro {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .dealer-mas .dealer-mas__offers {
    padding-bottom: 50px;
  }
  .dealer-mas .dealer-mas__intro .offers-warranty__row {
    gap: 24px;
  }
  .dealer-mas .dealer-mas__intro .offers-warranty__img {
    height: auto;
  }
  .dealer-mas .dealer-mas__intro .offers-warranty__content {
    gap: 24px;
  }

  /* Section titles */
  .dealer-mas .dealer-mas__section-title {
    margin-bottom: 24px;
  }
  .dealer-mas .dealer-mas__section-title .section-title {
    font-size: 32px;
  }

  /* Services */
  .dealer-mas .dealer-mas__services {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .dealer-mas .dealer-mas__services .ts-tabs-header {
    margin-bottom: 32px;
  }

  /* Map + Contact */
  .dealer-mas .dealer-mas__contact {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .dealer-mas .dealer-branches__map {
    height: 220px;
  }
  .dealer-mas .dealer-branches__tabs {
    gap: 16px;
  }
  .dealer-mas .dealer-branches__tab {
    font-size: 16px;
    padding: 0 !important;
    flex: 0 0 auto;
  }
  .dealer-mas .dealer-branches__tab::after {
    left: 0 !important;
    right: 0 !important;
  }
  .dealer-mas .dealer-branches__value p,
  .dealer-mas .dealer-branches__phone {
    font-size: 16px;
    white-space: normal;
    word-break: break-word;
  }
  .dealer-mas .dealer-branches__icon {
    width: 38px;
    height: 38px;
  }
  .dealer-mas .dealer-mas__form-card {
    padding: 24px 18px;
    gap: 20px;
    border-radius: 12px;
  }
  .dealer-mas .dealer-mas__form-title {
    font-size: 30px;
  }
  .dealer-mas .dealer-mas__form-row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 14px;
  }
}

@media (max-width: 575px) {
  .dealer-mas .dealer-mas__services .ts-box-col,
  .dealer-mas .dealer-mas__services .ts-boxes-row--3 .ts-box-col {
    width: 100%;
  }
  /* Hero */
  .dealer-mas .dealer-mas__hero .about-banner__heading {
    font-size: 30px;
  }
  .dealer-mas .dealer-mas__hero .about-banner__logo {
    width: 130px;
  }

  /* Section titles */
  .dealer-mas .dealer-mas__section-title .section-title {
    font-size: 26px;
  }

  /* Form */
  .dealer-mas .dealer-mas__form-title {
    font-size: 26px;
  }
  .dealer-mas .dealer-mas__form-card {
    padding: 20px 14px;
  }
  .dealer-mas .dealer-mas__submit-wrap {
    justify-content: stretch;
  }
  .dealer-mas .dealer-mas__submit {
    width: 100%;
  }

  /* Branches */
  .dealer-mas .dealer-branches__map {
    height: 200px;
    border-radius: 10px;
  }
}