/**
 * light.css — Light color scheme
 * Maps semantic tokens → palette values for light mode.
 */

:root,
[data-scheme="light"] {
  color-scheme: light;

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-base: var(--color-gray-50);
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-subtle: var(--color-gray-100);
  --bg-muted: var(--color-gray-200);
  --bg-accent: var(--color-accent-200);
  --bg-accent-300: var(--color-accent-300);
  --bg-accent-350: var(--color-accent-350);
  --bg-accent-400: var(--color-accent-400);

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary: var(--color-primary-600);
  --text-secondary: var(--color-base-neutral-800);
  --text-muted: var(--color-gray-400);
  --text-inverse: #ffffff;
  --text-on-primary: #ffffff;

  /* ── Borders ───────────────────────────────────────────── */
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-focus: var(--color-primary-500);

  /* ── Brand ─────────────────────────────────────────────── */
  --color-brand: var(--color-primary-600);
  --color-brand-hover: var(--color-primary-700);
  --color-brand-light: var(--color-primary-50);
  --color-brand-ring: var(--color-primary-300);

  /* ── Components ────────────────────────────────────────── */
  --nav-bg: #ffffff;
  --nav-border: var(--color-gray-200);
  --nav-text: var(--color-gray-700);
  --nav-text-hover: var(--color-primary-600);

  --card-bg: #FCFDFF;
  --card-border: var(--color-gray-200);
  --card-shadow: var(--shadow-md);

  --input-bg: #FCFFFF;
  --input-border: var(--color-gray-300);
  --input-text: var(--color-gray-900);
  --input-placeholder: var(--color-gray-400);
  --input-focus-ring: var(--color-primary-500);

  --btn-primary-bg: var(--color-primary-600);
  --btn-primary-hover: var(--color-primary-700);
  --btn-primary-text: #ffffff;

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--color-gray-300);
  --btn-secondary-text: var(--color-gray-700);
  --btn-secondary-hover: var(--color-gray-100);

  --footer-bg: var(--color-gray-900);
  --footer-text: var(--color-gray-400);

  --hero-bg: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
  --hero-text: #ffffff;
}

/* ── Base styles ──────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-sans) !important;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-base-neutral-100);
  font-family: var(--font-family-sans) !important;
  color: var(--text-primary);
  line-height: 1.6;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

a {
  color: var(--color-brand);
  text-decoration: none;
}

a:not(.navbar-brand):not(.btn-link):hover {
  background-color: var(--color-base-secondary-200) !important;
  /* border: 2px solid transparent !important; */
}

a:hover {
  border-color: transparent !important;
}

h2 {
  color: var(--color-base-primary);
}

h4,
h5 {
  color: var(--text-secondary);
}

p {
  color: var(--text-secondary);
}

/* ── Navbar styling ───────────────────────────────────────────────────────── */
#main-navbar {
  background: var(--color-base-neutral-100);
  border-bottom: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* ── Component base (shared between themes) ──────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  padding: var(--space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-light:hover {
  color: var(--color-brand-hover);
  background-color: transparent;
  border-color: transparent;
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  color: var(--btn-primary-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border-color: var(--btn-secondary-border);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover);
}

.btn-link {
  background: var(--btn-secondary-bg);
  color: var(--text-primary);
  /* border-color: var(--btn-secondary-border); */
}

.btn-light {
  background: transparent;
  color: var(--text-primary);
}

.form-group {
  margin-bottom: var(--space-4);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  color: var(--input-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-control:focus {
  border-color: var(--input-focus-ring);
  box-shadow: 0 0 0 3px var(--color-brand-ring);
}

.form-control::placeholder {
  color: var(--input-placeholder);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  border-left: 4px solid;
}

.alert-success {
  background: var(--color-success-50);
  border-color: var(--color-success-500);
  color: var(--color-success-700);
}

.alert-error {
  background: var(--color-error-50);
  border-color: var(--color-error-500);
  color: var(--color-error-700);
}

.alert-warning {
  background: var(--color-warning-50);
  border-color: var(--color-warning-500);
  color: var(--color-warning-600);
}

.error-confirm-icon {
  width: 48px;
  height: 48px;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.badge-primary {
  background: var(--color-brand-light);
  color: var(--color-brand);
}

.bg-accent {
  background-color: var(--color-base-neutral-100);
  /* color: var(--color-brand); */
}

.bg-accent-350 {
  background-color: var(--bg-accent-350);
}

.bg-accent-step {
  background-color: var(--color-base-secondary-100);
}

.card-accent {
  background-color: var(--bg-accent-300);
  /* color: var(--color-brand); */
}

.btn-info {
  background-color: var(--color-base-secondary-200);
  color: var(--color-brand);
}

section#about-priority .card,
section#about-priority-platino .card {
  width: 100%;
}

#about-priority,
#about-priority-platino {
  background-image: url('/assets/img/ontravel/Frame_section_about.jpg');

  background-repeat: no-repeat;
  background-position: center bottom;
  min-height: 30%;
}

.text-primary {
  color: var(--text-primary) !important;
}

.text-custom-secondary {
  color: var(--color-gray-500);
}

.bi-flight::before {
  content: url(/assets/icons/ontravel/travel.svg);
}

.bi-bed::before {
  content: url(/assets/icons/bed.svg);
}

.bi-explore::before {
  content: url(/assets/icons/explore.svg);
}

.bi-directions-boat-cruise::before {
  content: url(/assets/icons/directions_boat.svg);
}

.bi-airport-shuttle::before {
  content: url(/assets/icons/airport_shuttle.svg);
}

.bi-home-work::before {
  content: url(/assets/icons/resort_stays.svg);
}

.bi-award-star::before {
  content: url(/assets/icons/award_star.svg);
}

.bi-shoppingmode::before {
  content: url(/assets/icons/shoppingmode.svg);
}

.bi-group-add::before {
  content: url(/assets/icons/group_add.svg);
}

.bi-checkbook::before {
  content: url(/assets/icons/ontravel/checkbook.svg);
}

.bi-drafts::before {
  content: url(/assets/icons/ontravel/drafts.svg);
}

.bi-lock::before {
  content: url(/assets/icons/ontravel/lock.svg);
}

/* ONTRAVEL ICONS */
.bi-license::before {
  content: url(/assets/icons/ontravel/license.svg);
}

.bi-attach_money::before {
  content: url(/assets/icons/ontravel/attach_money.svg);
}

.bi-crown::before {
  content: url(/assets/icons/ontravel/crown.svg);
}

.bi-calendar_today::before {
  content: url(/assets/icons/ontravel/calendar_today.svg);
}

.bi-headset_mic::before {
  content: url(/assets/icons/ontravel/headset_mic.svg);
}

.bi-mail::before {
  content: url(/assets/icons/ontravel/mail.svg);
}

.bi-settings::before {
  content: url(/assets/icons/ontravel/settings.svg);
}

.bi-travel::before {
  content: url(/assets/icons/ontravel/travel.svg);
}

#travel-benefits,
#gifts,
#benefits-key {
  background-color: var(--color-base-neutral-100);
}

#register {
  background-color: var(--color-gray-950);
}

#platform-ecosystem.platform-ecosystem-bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 138.86%), url('/assets/img/ontravel/platform-ecosystem.jpg');

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#platform-ecosystem.platform-ecosystem-bg h2,
#platform-ecosystem.platform-ecosystem-bg h6 {
  color: var(--color-base-neutral-50);
}

#travel-benefits.travel-platino-benefits-bg {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 48.86%), url('/assets/img/ontravel/Frame_section_benefits_ontplatino.png');

  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

#travel-benefits.travel-platino-benefits-bg h2,
#travel-benefits.travel-platino-benefits-bg h4,
#travel-benefits.travel-platino-benefits-bg h5 {
  color: var(--color-base-neutral-50);
}

#travel-benefits.travel-benefits-bg {
  background-image: url('/assets/img/ontravel/Frame_section_benefits.png');

  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: var(--color-base-secondary-100);
  /* background-size: cover; */
  min-height: 100vh;
}

#travel-benefits .card,
#about-priority-platino .card,
#about-priority .card {
  background: var(--color-primary-250);
}

#benefits-key .card {
  background: var(--color-base-secondary-100);
}

#register {
  .register-text {

    h2,
    h6 {
      color: var(--color-base-neutral-50);
    }
  }
}

.btn-custom-primary {
  border-radius: 8px !important;
  background-color: var(--color-button-primary-bg-default) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: var(--color-base-primary) !important;
  cursor: pointer !important;
  bottom: 0 !important;
  /* align-items: flex-end !important; */
  border: none !important;
  /* text-transform: inherit !important; */
}

/* STRIPE INIT */
/* Style your own wrapper div like a standard input field */
#payment-element,
#card-element {
  padding: 10px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: box-shadow 0.15s ease;
}

/* Style behavior for dynamic states applied by Stripe */
.StripeElement {
  /* gap: 15px; */
  margin-top: 20px;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
  border-color: #80bdff;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--complete {
  border-color: #4caf50;
}

.previous {
  position: absolute;
  top: 0;
  z-index: 1;
}

/* STRIPE END */

/* DESKTOP */
@media (min-width: 1200px) {

  #about-priority {
    min-height: 962px;
  }

  #about-priority-platino {
    min-height: 1100px;
  }
}

@media (min-width: 992px) {
  #about-priority-platino {
    min-height: 1100px;

  }
}

/* TABLET */
@media (max-width: 992px) {
  #travel-benefits.travel-benefits-bg {
    min-height: 100vh;
  }

  .previous {
    position: relative;
    top: 0;
  }

  #about-priority {
    background-size: 90%;
    min-height: 75vh;
  }

  #about-priority-platino {
    background-size: 90%;
    min-height: 115vh;
  }
}

@media (max-width: 768px) {
  #about-priority-platino {
    background-size: 90%;
    min-height: 150vh;
  }
}

@media (min-width: 768px) {
  section#about-priority-platino .card:not(:first-child) {
    max-width: 48%;
    min-width: 48%;
  }

  section#about-priority .card {
    max-width: 48%;
    min-width: 48%;
  }

}

/* MOBILE */
@media (max-width: 576px) {
  .navbar-brand {
    padding-left: 15px;
  }

  #travel-benefits.travel-benefits-bg {
    min-height: 100vh;
  }

  #about-priority {
    background-size: 90%;
    min-height: 126vh;
  }

  #about-priority-platino {
    background-size: 90%;
    min-height: 155vh;
  }
}

@media (max-width: 390px) {
  #about-priority-platino {
    background-size: 90%;
    min-height: 170vh;
  }
}

@media (max-width: 375px) {
  #about-priority-platino {
    background-size: 90%;
    min-height: 223vh;
  }
}