/*
 * Subtle card surfaces.
 * Reversible: remove this stylesheet link to restore the previous flat whites.
 * Layout, vehicle header and vehicle animations are intentionally untouched.
 */

:root {
  --cp-card-surface:
    radial-gradient(circle at 100% 0%, rgba(133, 55, 196, .075) 0, rgba(133, 55, 196, 0) 43%),
    linear-gradient(145deg, #fff 0%, #fefcff 56%, #f8f2fc 100%);
}

html body .card:not(.gradient):not(.occupancy),
html body :is(
  .workspace-agenda-action,
  .workspace-appointment,
  .workspace-history-row,
  .workspace-current-plan,
  .current-plan-card,
  .billing-panel:not(.billing-product-summary):not(.billing-plan-hero),
  .billing-method,
  .billing-payment-row,
  .club-level-option,
  .price-extra,
  .price-catalog-empty
) {
  background: var(--cp-card-surface);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > :is(
  .occupancy-main,
  .occupancy-wait,
  .occupancy-arrival,
  .occupancy-reminder
),
html [data-screen="inicio"] .quick-grid > .quick,
html [data-screen="inicio"] .quick-grid > .quick:last-of-type {
  background:
    radial-gradient(circle at 100% 0%, rgba(131, 51, 198, .085) 0, rgba(131, 51, 198, 0) 46%),
    linear-gradient(145deg, #fff 0%, #fefcff 54%, #f7f0fb 100%);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-main {
  background:
    radial-gradient(circle at 0% 0%, rgba(242, 157, 25, .11) 0, rgba(242, 157, 25, 0) 43%),
    linear-gradient(145deg, #fff 0%, #fffefb 57%, #fbf4e9 100%);
}

/* Keep card outlines neutral; color belongs only to the icon and faint surface glow. */
html [data-screen="inicio"] .occupancy:not(.is-loading) > :is(
  .occupancy-main,
  .occupancy-wait,
  .occupancy-arrival,
  .occupancy-reminder
) {
  border-color: rgba(82, 53, 98, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 9px 24px rgba(48, 29, 66, .07);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-wait {
  background:
    radial-gradient(circle at 0% 0%, rgba(78, 119, 204, .105) 0, rgba(78, 119, 204, 0) 44%),
    linear-gradient(145deg, #fff 0%, #fbfcff 56%, #f0f4fc 100%);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-arrival {
  background:
    radial-gradient(circle at 0% 0%, rgba(20, 151, 132, .1) 0, rgba(20, 151, 132, 0) 44%),
    linear-gradient(145deg, #fff 0%, #fafffe 56%, #edf8f5 100%);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-reminder {
  background:
    radial-gradient(circle at 0% 0%, rgba(210, 88, 112, .095) 0, rgba(210, 88, 112, 0) 44%),
    linear-gradient(145deg, #fff 0%, #fffafb 56%, #fbf0f2 100%);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-wait .occupancy-icon {
  color: #4168bb;
  background: #edf3ff;
  box-shadow: 0 7px 16px rgba(65, 104, 187, .15);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-arrival .occupancy-icon {
  color: #128b7b;
  background: #e9f8f4;
  box-shadow: 0 7px 16px rgba(18, 139, 123, .15);
}

html [data-screen="inicio"] .occupancy:not(.is-loading) > .occupancy-reminder .occupancy-icon {
  color: #c65369;
  background: #fff0f2;
  box-shadow: 0 7px 16px rgba(198, 83, 105, .14);
}

/* Keep the fidelity benefits as one calm strip instead of three competing colors. */
html [data-screen="inicio"] .loyalty-benefits {
  gap: 0;
  padding: 0;
  border-color: rgba(107, 72, 126, .13);
  background: linear-gradient(145deg, #fff 0%, #faf8fc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

html [data-screen="inicio"] .loyalty-benefit {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html [data-screen="inicio"] .loyalty-benefit + .loyalty-benefit::before {
  display: block;
  background: #eee8f3;
}

html [data-screen="inicio"] .loyalty-benefit svg {
  color: var(--purple);
}

/* Quick actions share the white card language, with one clear accent per action. */
html [data-screen="inicio"] .quick-grid > .quick,
html [data-screen="inicio"] .quick-grid > .quick:last-of-type {
  border: 1px solid rgba(82, 53, 98, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 10px 22px rgba(48, 29, 66, .08);
}

html [data-screen="inicio"] .quick-grid > .quick:first-of-type {
  background:
    radial-gradient(circle at 0% 50%, rgba(15, 151, 145, .12) 0, rgba(15, 151, 145, 0) 48%),
    linear-gradient(145deg, #fff 0%, #f9fffe 57%, #edf9f7 100%);
}

html [data-screen="inicio"] .quick-grid > .quick:first-of-type i {
  background: linear-gradient(145deg, #087f88, #0aa59a);
  box-shadow: 0 8px 17px rgba(8, 133, 137, .22);
}

html [data-screen="inicio"] .quick-grid > .quick:first-of-type::after {
  color: #168b83;
}

html [data-screen="inicio"] .quick-grid > .quick:last-of-type {
  background:
    radial-gradient(circle at 0% 50%, rgba(225, 77, 112, .11) 0, rgba(225, 77, 112, 0) 48%),
    linear-gradient(145deg, #fff 0%, #fffafb 57%, #fff0f2 100%);
}

html [data-screen="inicio"] .quick-grid > .quick:last-of-type i {
  background: linear-gradient(145deg, #d94378, #ef7041);
  box-shadow: 0 8px 17px rgba(210, 67, 102, .21);
}

html [data-screen="inicio"] .quick-grid > .quick:last-of-type::after {
  color: #c45168;
}

html [data-screen="inicio"] .weather-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(32, 167, 103, .075) 0, rgba(32, 167, 103, 0) 43%),
    linear-gradient(145deg, #fff 0%, #fdfffe 58%, #f1faf6 100%);
}

/* Match the forecast title/card rhythm to the other labeled home sections. */
html [data-screen="inicio"] .home-weather-section.home-labeled-section {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

html [data-screen="inicio"] .home-weather-section > .home-section-label {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-height: 650px) {
  html [data-screen="inicio"] .home-weather-section.home-labeled-section {
    margin-top: 20px;
  }
}

html body .appointment-extra:not(.included) {
  background:
    radial-gradient(circle at 100% 0%, rgba(133, 55, 196, .065) 0, rgba(133, 55, 196, 0) 42%),
    linear-gradient(145deg, #fff 0%, #fdfafe 100%);
}

@media (prefers-contrast: more) {
  :root {
    --cp-card-surface: linear-gradient(145deg, #fff 0%, #f7f0fb 100%);
  }
}