/*
 * Custodio Park — Concept 3 visual skin
 *
 * This file is deliberately presentation-only and fully scoped to
 * html.custodio-concept-3. The vehicle header, carousel, image positioning,
 * dirt/clean effects and their animation rules are intentionally untouched.
 * Add ?ui=classic to the URL to bypass this skin immediately.
 */

html.custodio-concept-3 {
  --c3-canvas: #fbfafc;
  --c3-card: #ffffff;
  --c3-ink: #2d2433;
  --c3-muted: #7d7482;
  --c3-border: #e6dfea;
  --c3-purple: #5b16ab;
  --c3-purple-deep: #3b0d78;
  --c3-purple-soft: #f2eafa;
  --c3-shadow: 0 8px 22px rgba(49, 21, 70, 0.075);
  color: var(--c3-ink);
  background: var(--c3-canvas);
}

html.custodio-concept-3 body,
html.custodio-concept-3 .app-shell {
  background: var(--c3-canvas);
}

/* The native WKWebView can expose a few pixels around the centered web shell.
   Keep those pixels purple so the Concept 3 side rails reach the device edges. */
html.custodio-concept-3.custodio-native-ios,
html.custodio-concept-3.custodio-native-ios body,
html.custodio-concept-3.custodio-native-ios .app-shell {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  background: #5411a0;
}

html.custodio-concept-3 .card {
  border-color: var(--c3-border);
  border-radius: 15px;
  background: var(--c3-card);
  box-shadow: var(--c3-shadow);
}

/* Home: keep the complete vehicle header intact and change only its workspace. */
html.custodio-concept-3 [data-screen="inicio"].active {
  --c3-workspace-left-rail: max(18px, calc(env(safe-area-inset-left, 0px) + 12px));
  --c3-workspace-right-rail: max(18px, calc(env(safe-area-inset-right, 0px) + 12px));
  background:
    linear-gradient(180deg, var(--c3-purple-deep), #5411a0 68%, #6818bd) top / 100% 360px no-repeat,
    linear-gradient(
      90deg,
      #5411a0 0,
      #5411a0 var(--c3-workspace-left-rail),
      var(--c3-canvas) var(--c3-workspace-left-rail),
      var(--c3-canvas) calc(100% - var(--c3-workspace-right-rail)),
      #5411a0 calc(100% - var(--c3-workspace-right-rail)),
      #5411a0 100%
    );
}

html.custodio-concept-3 [data-screen="inicio"] .vehicle-workspace {
  --c3-workspace-screen-top: max(38px, calc(env(safe-area-inset-top, 0px) + 10px));
  --c3-workspace-screen-gap: 9px;
  --c3-workspace-overlap: 9px;
  --c3-workspace-nav-clearance: max(83px, calc(76px + env(safe-area-inset-bottom, 0px)));
  width: 100%;
  max-width: 100%;
  height: max-content;
  min-height: calc(
    100dvh
    - var(--c3-workspace-screen-top)
    - var(--home-topbar-height, 40px)
    - var(--home-header-gap, 20px)
    - var(--home-card-height, 235px)
    - var(--c3-workspace-screen-gap)
    + var(--c3-workspace-overlap)
    - var(--c3-workspace-nav-clearance)
  );
  align-self: start;
  margin-top: -9px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 12px 12px 24px;
  border-radius: 0;
  background: var(--c3-canvas);
}

/* WKWebView's compact native header is shorter than the browser header row.
   Pull only the native light frame up to the rendered vehicle card edge. */
html.custodio-concept-3.custodio-native-ios [data-screen="inicio"] .vehicle-workspace {
  --c3-workspace-overlap: 28px;
  margin-top: -28px;
}

html.custodio-concept-3 [data-screen="inicio"] .vehicle-workspace-track,
html.custodio-concept-3 [data-screen="inicio"] .vehicle-workspace-panel,
html.custodio-concept-3 [data-screen="inicio"] .vehicle-workspace-home-panel {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

html.custodio-concept-3 [data-screen="inicio"] .home-section-label,
html.custodio-concept-3 [data-screen="inicio"] .section-head h2 {
  color: #4b1a70;
}

html.custodio-concept-3 [data-screen="inicio"] .section-head a {
  color: #6c3987;
}

html.custodio-concept-3 [data-screen="inicio"] .home-live-heading small {
  color: #6f6674;
}

/* Give each home category its own visual pause without enlarging the cards. */
html.custodio-concept-3 [data-screen="inicio"] .stats.home-labeled-section {
  margin-top: 18px;
}

html.custodio-concept-3 [data-screen="inicio"] .stats .home-fidelity-section {
  margin-top: 20px;
}

html.custodio-concept-3 [data-screen="inicio"] .quick-grid.home-labeled-section {
  margin-top: 26px;
}

html.custodio-concept-3 [data-screen="inicio"] .home-weather-section.home-labeled-section {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

html.custodio-concept-3 [data-screen="inicio"] .occupancy,
html.custodio-concept-3 [data-screen="inicio"] .loyalty,
html.custodio-concept-3 [data-screen="inicio"] .weather-card {
  border: 1px solid var(--c3-border);
  background: var(--c3-card);
  box-shadow: var(--c3-shadow);
}

html.custodio-concept-3 [data-screen="inicio"] .quick-grid > .quick {
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(145deg, #50108f, #37105f);
  box-shadow: 0 10px 22px rgba(56, 13, 94, 0.16);
}

html.custodio-concept-3 [data-screen="inicio"] .quick-grid > .quick:last-of-type {
  background: linear-gradient(145deg, #6516b3, #3d0d78);
}

html.custodio-concept-3 [data-screen="inicio"] .weather-advice-copy small,
html.custodio-concept-3 [data-screen="inicio"] .weather-source {
  color: #817587;
}

/* Vehicle workspace panels below the protected header. */
html.custodio-concept-3 :is(.workspace-agenda-head, .workspace-plans-head, .workspace-history-head) {
  color: var(--c3-ink);
}

html.custodio-concept-3 .vehicle-workspace-plans-panel {
  padding-top: 18px;
}

html.custodio-concept-3 .vehicle-workspace-agenda-panel {
  padding-top: 18px;
}

html.custodio-concept-3 .workspace-plans-head {
  margin-bottom: 16px;
}

html.custodio-concept-3 .workspace-plan-promotions-title {
  margin-top: 26px;
  margin-bottom: 12px;
}

html.custodio-concept-3 .workspace-plan-promotions {
  gap: 16px;
}

html.custodio-concept-3 :is(.workspace-agenda-head, .workspace-plans-head, .workspace-history-head) small,
html.custodio-concept-3 .workspace-plan-promotions-title {
  color: #806e89;
}

html.custodio-concept-3 :is(.workspace-agenda-head, .workspace-history-head) > b,
html.custodio-concept-3 .workspace-plan-manage {
  border-color: #ddcfe6;
  color: #642690;
  background: #f1e8f7;
}

html.custodio-concept-3 .workspace-agenda-empty {
  border-color: #d9cfe0;
  color: #786b80;
  background: rgba(255, 255, 255, 0.56);
}

html.custodio-concept-3 .workspace-agenda-empty strong {
  color: #4b3b55;
}

html.custodio-concept-3 :is(.workspace-agenda-action, .workspace-appointment, .workspace-current-plan, .workspace-history-row) {
  border-color: var(--c3-border);
  background: #fff;
  box-shadow: var(--c3-shadow);
}

html.custodio-concept-3 .workspace-plan-promo:not(.uber) {
  border-color: var(--c3-border);
  background: #fff;
  box-shadow: var(--c3-shadow);
}

/* Standalone routes use the white/light composition from the reference. */
html.custodio-concept-3 .screen:not([data-screen="inicio"]) {
  color: var(--c3-ink);
  background: var(--c3-canvas);
}

html.custodio-concept-3 .screen:not([data-screen="inicio"]) > .page-head {
  min-height: 92px;
  margin: -22px -18px 18px;
  padding:
    max(24px, calc(env(safe-area-inset-top, 0px) + 10px))
    18px
    15px;
  color: #fff;
  background: linear-gradient(145deg, #3d0c7c, #5914a8);
  box-shadow: 0 8px 22px rgba(55, 11, 93, 0.16);
}

html.custodio-concept-3 .screen:not([data-screen="inicio"]) > .page-head h1 {
  color: #fff;
}

html.custodio-concept-3 .screen:not([data-screen="inicio"]) > .page-head p {
  color: rgba(255, 255, 255, 0.72);
}

html.custodio-concept-3 .screen:not([data-screen="inicio"]) > .page-head .back {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

html.custodio-concept-3 .screen:not([data-screen="inicio"]) :is(.section-title, .section-head h2) {
  color: #4b1a70;
}

html.custodio-concept-3 .screen:not([data-screen="inicio"]) .section-head a {
  color: #6c3987;
}

html.custodio-concept-3 .primary {
  background: linear-gradient(100deg, #4c0f98, #781fc3);
  box-shadow: 0 10px 22px rgba(77, 18, 142, 0.18);
}

html.custodio-concept-3 .outline {
  border-color: #8a47bc;
  color: #62218f;
  background: #fff;
}

/* Agenda. */
html.custodio-concept-3 :is(.appointment-section-head, .appointment-field > span) {
  color: #3e284a;
}

html.custodio-concept-3 .appointment-section-head small,
html.custodio-concept-3 .appointment-time-label,
html.custodio-concept-3 .appointment-hub-label {
  color: #826f8b;
}

html.custodio-concept-3 .appointment-section-head > b {
  border-color: #d9cde1;
  color: #725a80;
  background: #efe8f3;
}

html.custodio-concept-3 .appointment-booking-context > span,
html.custodio-concept-3 .appointment-package,
html.custodio-concept-3 .appointment-extras,
html.custodio-concept-3 .appointment-extra,
html.custodio-concept-3 :is(.date, .time),
html.custodio-concept-3 .agenda-choice.selected {
  border-color: var(--c3-border);
  background: #fff;
  box-shadow: var(--c3-shadow);
}

html.custodio-concept-3 .appointment-package {
  min-height: 0;
  border-radius: 15px;
}

html.custodio-concept-3 .appointment-package::after {
  opacity: 0.46;
}

html.custodio-concept-3 .appointment-note {
  border-color: #ded4e5;
  color: #6f6375;
  background: #f0eaf4;
}

html.custodio-concept-3 .appointment-order-summary {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, #351044, #571475);
  box-shadow: 0 10px 24px rgba(49, 13, 68, 0.18);
}

html.custodio-concept-3 .agenda-choice {
  border-color: var(--c3-border);
  color: #4d176f;
  background: #fff;
  box-shadow: var(--c3-shadow);
}

/* Plans and promotions. */
html.custodio-concept-3 :is(.promo-title, .regular-plans-title, .current-plan-heading h2) {
  color: #5c247b;
}

html.custodio-concept-3 .current-plan-heading button {
  color: #6a3187;
}

html.custodio-concept-3 .current-plan-card,
html.custodio-concept-3 .plan-card {
  border: 1px solid var(--c3-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--c3-shadow);
}

html.custodio-concept-3 .promo-packages {
  grid-template-columns: 1fr;
  gap: 10px;
}

html.custodio-concept-3 .promo-package {
  min-height: 174px;
  border: 1px solid var(--c3-border);
  border-radius: 16px;
  box-shadow: var(--c3-shadow);
}

html.custodio-concept-3 .promo-package.uber {
  border-color: #18151a;
  box-shadow: 0 10px 24px rgba(22, 15, 27, 0.15);
}

/* Supporting routes inherit the same restrained card language. */
html.custodio-concept-3 :is(
  .history-row,
  .history-vehicle,
  .profile-list,
  .service-card,
  .queue-position,
  .billing-panel,
  .club-cycle-note,
  .club-ledger
) {
  border-color: var(--c3-border);
  background: #fff;
  box-shadow: var(--c3-shadow);
}

html.custodio-concept-3 :is(.timeline .step strong, .benefit strong) {
  color: var(--c3-ink);
}

html.custodio-concept-3 :is(.timeline .step small, .benefit small) {
  color: var(--c3-muted);
}

html.custodio-concept-3 .step:not(:last-child)::after {
  background: #dcd4e1;
}

html.custodio-concept-3 [data-screen="fidelidade"] .bullet-list li {
  color: var(--c3-ink);
}

html.custodio-concept-3 .bottom-nav-bar {
  border-top-color: #e8e2eb;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -8px 24px rgba(45, 23, 61, 0.07);
}

@media (max-height: 650px) {
  html.custodio-concept-3 [data-screen="inicio"].active {
    --c3-workspace-left-rail: max(12px, calc(env(safe-area-inset-left, 0px) + 10px));
    --c3-workspace-right-rail: max(12px, calc(env(safe-area-inset-right, 0px) + 10px));
  }

  html.custodio-concept-3 [data-screen="inicio"] .vehicle-workspace {
    --c3-workspace-screen-top: max(34px, calc(env(safe-area-inset-top, 0px) + 8px));
    --c3-workspace-screen-gap: 5px;
    width: 100%;
    margin-left: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  html.custodio-concept-3 [data-screen="inicio"] .stats .home-fidelity-section {
    margin-top: 14px;
  }

  html.custodio-concept-3 [data-screen="inicio"] .stats.home-labeled-section {
    margin-top: 12px;
  }

  html.custodio-concept-3 [data-screen="inicio"] .quick-grid.home-labeled-section {
    margin-top: 20px;
  }

  html.custodio-concept-3 [data-screen="inicio"] .home-weather-section.home-labeled-section {
    margin-top: 20px;
  }

  html.custodio-concept-3 .vehicle-workspace-plans-panel {
    padding-top: 12px;
  }

  html.custodio-concept-3 .vehicle-workspace-agenda-panel {
    padding-top: 12px;
  }

  html.custodio-concept-3 .workspace-plans-head {
    margin-bottom: 12px;
  }

  html.custodio-concept-3 .workspace-plan-promotions-title {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  html.custodio-concept-3 .workspace-plan-promotions {
    gap: 13px;
  }
}