:root {
    /* COLORS */
    --White: 247, 239, 233;              /* #F7EFE9 */
    --offWhite: 244, 234, 226;           /* #F4EAE2 */
    --brown: 56, 29, 16;                 /* #381D10 */
    --black: 24, 18, 14;                 /* #18120E */
    --primary-color: 200, 107, 62;       /* #C86B3E */
    --dark-primary-color: 165, 79, 38;   /* #A54F26 */
    --accent: 200, 107, 62;              /* #C86B3E */
  
    --danger-color: 217, 83, 79;
    --warning-color: 240, 173, 78;
    --success-color: 92, 184, 92;
  
    /* OPACITY */
    --op-100: 1;
    --op-90: 0.9;
    --op-85: 0.85;
    --op-80: 0.8;
    --op-70: 0.7;
    --op-60: 0.6;
    --op-50: 0.5;
    --op-40: 0.4;
    --op-30: 0.3;
    --op-20: 0.2;
    --op-10: 0.1;
    --op-05: 0.05;
  
    /* FONTS */
    --font-body: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Chlora", Georgia, serif;
  
    /* TYPOGRAPHY */
    --fs-h1: clamp(13px, 0.9vw, 18px);
    --fs-xxs: clamp(12px, 0.9vw, 17px);
    --fs-xs: clamp(12px, 1.9vw, 24px);
    --fs-sm: clamp(14px, 4.1vw, 20px);
    --fs-md: clamp(18px, 1.3vw, 24px);
    --fs-lg: clamp(20px, 2vw, 32px);
    --fs-xl: clamp(32px, 3vw, 56px);
    --fs-xl-Amiral: clamp(32px, 3vw, 64px);
    --fs-xxl: clamp(48px, 15vw, 120px);
    --fs-xxl-s: clamp(56px, 7vw, 120px);
    --fs-xxl-intro: clamp(28px, 9vw, 88px);
    --fs-xxxl: clamp(56px, 10vw, 140px);
    --fs-vb: clamp(40px, 7.1vw, 120px);
    --fs-Header: clamp(44px, 10vw, 120px);
    --fs-content: clamp(14px, 3vw, 24px);
    --fs-footer: clamp(28px, 3vw, 56px);
  
    /* LINE HEIGHT */
    --lh-tight: 0.9;
    --lh-heading: 1;
    --lh-body: 1.25;
  
    /* SPACING */
    --space-xs: clamp(4px, 0.6vw, 12px);
    --space-sm: clamp(12px, 1vw, 16px);
    --space-md: clamp(16px, 1.5vw, 24px);
    --space-lg: clamp(24px, 2.5vw, 40px);
    --space-xl: clamp(40px, 4vw, 72px);
    --space-xxl: clamp(64px, 8vw, 140px);
  
    /* BORDER RADIUS */
    --radius-sm: clamp(8px, 1vw, 12px);
    --radius-md: clamp(10px, 1.4vw, 18px);
    --radius-lg: clamp(18px, 2vw, 28px);
    --radius-xl: clamp(24px, 3vw, 40px);
    --radius-arc: 200px;
    --radius-full: 999px;
  
    /* BUTTON SYSTEM */
    --btn-fs: clamp(12px, 1.2vw, 17px);
    --btn-py: clamp(12px, 2vw, 20px);
    --btn-py-nav: clamp(12px, 2vw, 32px);
    --btn-px: clamp(12px, 4.5vw, 16px);
    --btn-radius: clamp(6px, 1.2vw, 12px);
    --btn-arrow: clamp(12px, 4.2vw, 52px);
  
    /* GRID SYSTEM */
    --grid-gap: clamp(12px, 1.5vw, 24px);
    --section-px: clamp(12px, 3vw, 64px);
    --section-py: clamp(44px, 4vw, 82px);
    --section-py-large: clamp(80px, 12vw, 180px);
  
    /* BORDERS */
    --border-light: 1px solid rgb(var(--brown), var(--op-10));
    --border-light-dark: 1px solid rgb(var(--brown), var(--op-40));
    --border-soft: 1px solid rgb(var(--White), var(--op-20));
    --border-strong: 2px solid rgb(var(--White), var(--op-20));
    --border-primary: 1px solid rgb(var(--primary-color), var(--op-40));
  
    /* SHADOWS */
    --shadow-sm: 0 4px 12px rgba(56, 29, 16, 0.05);
    --shadow-md: 0 8px 30px rgba(56, 29, 16, 0.08);
    --shadow-lg: 0 20px 60px rgba(56, 29, 16, 0.14);
    --shadow-dark: 0 30px 90px rgba(24, 18, 14, 0.35);
  
    /* BLUR */
    --blur-sm: blur(8px);
    --blur-md: blur(12px);
    --blur-lg: blur(20px);
  
    /* TRANSITIONS */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-main: cubic-bezier(.22, 1, .36, 1);
    --transition-fast: 0.2s var(--ease);
    --transition: 0.35s var(--ease);
    --transition-slow: 0.5s var(--ease);
    --transition-super-slow: 5s var(--ease);
  
    /* VISUAL SYSTEM */
    --circle-size: 80%;
    --img-size: clamp(60px, 8vw, 100px);
    --header-height: clamp(72px, 7vw, 96px);
    --z-header: 100;
    --z-menu: 200;
    --z-modal: 500;
  
    /* GATE TOKENS */
    --gate-count: 3;
    --gate-direction: row;
    --gate-gap: var(--space-xs);
    --gate-wrap-padding: var(--space-xs);
    --gate-radius: var(--radius-lg);
    --gate-side-basis: 0%;
    --gate-side-flex-grow: 1;
    --gate-side-height: 100%;
  
    --gate-content-padding: var(--space-xl) var(--space-lg) var(--space-lg);
  
    --gate-badge-fs: var(--fs-xs);
    --gate-badge-py: var(--space-xs);
    --gate-badge-px: var(--space-md);
    --gate-badge-mb: 2vh;
  
    --gate-title-fs: var(--fs-xxl-intro);
  
    --gate-desc-fs: var(--fs-sm);
    --gate-desc-max: 400px;
    --gate-desc-display: block;
  
    --gate-btn-max: 320px;
    --gate-btn-py: var(--btn-py);
    --gate-btn-px: var(--btn-px);
    --gate-btn-fs: var(--btn-fs);
  
    --gate-features-gap: var(--space-md);
    --gate-feature-fs: var(--fs-xs);
    --gate-feature-padding: var(--space-md);
    --gate-feature-icon: 32px;
    --gate-feature-divider-h: 24px;
  
    --marquee-bg: rgb(var(--primary-color));
    --marquee-text: rgb(var(--White));
    --marquee-height: clamp(56px, 4vw, 80px);
    --marquee-gap: clamp(48px, 10vw, 224px);
    --marquee-px: clamp(40px, 5vw, 72px);
    --marquee-fs: clamp(20px, 4vw, 40px);
    --marquee-dot: 5px;
    --marquee-duration: 12s;
  
    /* BOOKING */
    --booking-card-size: 100%;
    --booking-card-gap: clamp(8px, 0.8vw, 12px);
  }
  
  /* ============================================================
     BOOKING PAGE
  ============================================================ */
  
  .BookingPage {
    width: 100%;
    overflow: visible;
    background: rgb(var(--White));
    color: rgb(var(--brown));
  }
  
  .BookingSystemSection {
    width: 100%;
    min-height: 100svh;
    position: relative;
    overflow: visible;
    padding: var(--gate-wrap-padding);
    background: rgb(var(--White));
  }
  
  .bookingShell {
    width: 100%;
    min-height: calc(100svh - (var(--gate-wrap-padding) * 2));
    display: grid;
    margin-top: 10vh;
    grid-template-columns: minmax(0, 1fr) clamp(330px, 28vw, 430px);
    gap: var(--gate-wrap-padding);
  }
  
  .bookingMain {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: visible;
    overflow-anchor: none;
    padding: clamp(18px, 2.4vw, 52px);
    border-radius: var(--radius-xl);
    background: rgb(var(--offWhite));
    border: 1px solid rgb(var(--brown), var(--op-10));
  }
  
  .bookingAside {
    width: 100%;
    height: calc(100svh - (var(--gate-wrap-padding) * 2));
    position: sticky;
    top: var(--gate-wrap-padding);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2vw, 34px);
    border-radius: var(--radius-xl);
    background: rgb(var(--brown));
    color: rgb(var(--White));
    box-shadow: var(--shadow-md);
  }
  
  /* ============================================================
     BOOKING INTRO
  ============================================================ */
  
  .BookingIntroSection {
    width: 100%;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
    padding: var(--gate-wrap-padding);
    background: rgb(var(--White));
    color: rgb(var(--brown));
  }
  
  .bookingIntroInner {
    width: 100%;
    min-height: calc(100svh - (var(--gate-wrap-padding) * 2));
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 4vw, 72px);
    border-radius: var(--radius-xl);
    background:
      radial-gradient(
        circle at 78% 12%,
        rgb(var(--primary-color), var(--op-20)) 0%,
        rgb(var(--White)) 42%,
        rgb(var(--offWhite)) 100%
      );
    border: 1px solid rgb(var(--brown), var(--op-10));
  }
  
  .bookingIntroTop {
    width: 100%;
  }
  
  .bookingIntroEyebrow {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--fs-xxs);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgb(var(--primary-color));
  }
  
  .bookingIntroTitle {
    margin: 0;
    max-width: 980px;
    font-family: var(--font-heading);
    font-size: clamp(72px, 10.5vw, 190px);
    font-weight: 400;
    line-height: 0.78;
    letter-spacing: -0.085em;
    color: rgb(var(--brown));
  }
  
  .bookingIntroLine {
    display: block;
    overflow: hidden;
    padding-top: 0.08em;
    padding-bottom: 0.22em;
    margin-top: -0.08em;
    margin-bottom: -0.16em;
  }
  
  .bookingIntroLine > span {
    display: block;
  }
  
  .bookingIntroBottom {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  
  .bookingIntroText {
    margin: 0;
    max-width: 560px;
    font-family: var(--font-body);
    font-size: clamp(17px, 1.45vw, 26px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.06em;
    color: rgb(var(--brown), var(--op-80));
  }
  
  /* ============================================================
     PROGRESS
  ============================================================ */
  
  .bookingProgress,
  .progress {
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: clamp(24px, 3vw, 42px);
  }
  
  .p-step {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .p-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 17px;
    left: calc(50% + 19px);
    right: calc(-50% + 19px);
    height: 1px;
    background: rgb(var(--brown), var(--op-10));
    transition: background var(--transition);
  }
  
  .p-step.done:not(:last-child)::after {
    background: rgb(var(--primary-color));
  }
  
  .p-dot {
    width: 34px;
    height: 34px;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--brown), var(--op-20));
    background: rgb(var(--White));
    color: rgb(var(--brown), var(--op-40));
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      box-shadow var(--transition);
  }
  
  .p-step.active .p-dot {
    background: rgb(var(--brown));
    color: rgb(var(--White));
    border-color: rgb(var(--brown));
    box-shadow: 0 0 0 5px rgb(var(--brown), var(--op-10));
  }
  
  .p-step.done .p-dot {
    background: rgb(var(--primary-color));
    color: rgb(var(--White));
    border-color: rgb(var(--primary-color));
  }
  
  .p-label {
    max-width: 86px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.035em;
    text-align: center;
    text-transform: uppercase;
    color: rgb(var(--brown), var(--op-40));
  }
  
  .p-step.active .p-label {
    color: rgb(var(--brown));
  }
  
  .p-step.done .p-label {
    color: rgb(var(--primary-color));
  }
  
  /* ============================================================
     STEP GENERAL
  ============================================================ */
  
  .bookingStepWrap,
  #stepWrap {
    width: 100%;
    overflow-anchor: none;
  }
  
  .step-panel {
    width: 100%;
  }
  
  .eyebrow {
    margin: 0 0 var(--space-xs);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: var(--radius-full);
    background: currentColor;
  }
  
  .s-title {
    margin: 0 0 var(--space-xs);
    max-width: 760px;
    font-family: var(--font-heading);
    font-size: clamp(44px, 5vw, 86px);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.075em;
    color: rgb(var(--brown));
  }
  
  .s-desc {
    margin: 0 0 clamp(20px, 2.4vw, 34px);
    max-width: 610px;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.2vw, 20px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.055em;
    color: rgb(var(--brown), var(--op-70));
  }
  
  .social-proof,
  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: rgb(var(--primary-color));
    background: rgb(var(--primary-color), var(--op-10));
    border: 1px solid rgb(var(--primary-color), var(--op-20));
  }
  
  .social-proof {
    margin-bottom: var(--space-sm);
  }
  
  .trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
  }
  
  /* ============================================================
     GRIDS — MULTIPLE CHOICE 3 PER LINE
  ============================================================ */
  
  .exp-grid,
  .pkg-gallery-grid,
  .activity-gallery-grid,
  .addon-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--booking-card-size)));
    justify-content: start;
    align-items: start;
    gap: var(--booking-card-gap);
  }
  
  .exp-grid {
    margin-bottom: clamp(22px, 2.6vw, 38px);
  }
  
  .pickup-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--booking-card-size)));
    justify-content: start;
    align-items: start;
    gap: var(--booking-card-gap);
  }
  
  .pkg-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, var(--booking-card-size)));
    justify-content: start;
    align-items: start;
    gap: var(--booking-card-gap);
  }
  
  .review-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }
  
  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }
  
  /* ============================================================
     CHOICE CARDS
  ============================================================ */
  
  .exp-card,
  .pkg-card,
  .pickup-card,
  .addon-card,
  .pkg-gallery-card,
  .act-gallery-card {
    padding:0;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
    color: rgb(var(--brown));
    transition:
      transform var(--transition),
      border-color var(--transition),
      box-shadow var(--transition),
      background var(--transition);
  }
  
  .exp-card,
  .pickup-card,
  .addon-card,
  .pkg-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: clamp(12px, 1.1vw, 17px);
  }
  
  .exp-card:hover,
  .pkg-card:hover,
  .pickup-card:hover,
  .addon-card:hover,
  .pkg-gallery-card:hover,
  .act-gallery-card:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--primary-color), var(--op-40));
    box-shadow: var(--shadow-sm);
  }
  
  .exp-card.selected,
  .pkg-card.selected,
  .pickup-card.selected,
  .addon-card.selected,
  .pkg-gallery-card.selected,
  .act-gallery-card.selected {
    border-color: rgb(var(--primary-color));
    box-shadow:
      0 0 0 3px rgb(var(--primary-color), var(--op-10)),
      var(--shadow-sm);
  }
  
  .exp-icon {
    width: clamp(36px, 3.2vw, 80px);
    height: clamp(36px, 3.2vw, 80px);
    display: grid;
    place-items: center;
    margin-bottom: 10px;
    border-radius: var(--radius-full);
    background: rgb(var(--offWhite));
    color: rgb(var(--brown));
    font-size: clamp(18px, 1.8vw, 22px);
    transition: background var(--transition);
    position: relative;
    border:var(--border-light);
  }
  .exp-icon svg{
    width: clamp(24px, 3.2vw, 44px);
  }
  
  .exp-card.selected .exp-icon {
    background: rgb(var(--primary-color));
  }
  
  .exp-name,
  .pkg-name,
  .pickup-city,
  .addon-card-name,
  .pkg-gallery-hero-name,
  .act-gallery-name {
    margin: 0 0 7px;
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.06em;
    color: rgb(var(--brown));
  }
  
  .exp-desc,
  .pkg-desc,
  .pickup-desc,
  .addon-card-desc,
  .pkg-gallery-desc,
  .act-gallery-price {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-body);
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.045em;
    color: rgb(var(--brown), var(--op-70));
  }
  .pkg-gallery-desc{
    color: rgb(var(--White)) !important;
  }
  
  .exp-desc,
  .pkg-desc,
  .pickup-desc,
  .addon-card-desc,
  .pkg-gallery-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .exp-tag,
  .pkg-price,
  .pickup-price-item,
  .addon-card-price,
  .pkg-gallery-hero-price {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgb(var(--primary-color));
  }
  .pickup-price-item,
  .pkg-gallery-hero-price {
    font-size: var(--fs-sm);
    font-weight: 400;
  }
  .exp-popular,
  .pkg-popular-badge {
    position: absolute;
    top: 0;
    right: 12px;
    z-index: 3;
    padding: 5px 9px;
    border-radius: 0 0 8px 8px;
    font-family: var(--font-body);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--White));
    background: rgb(var(--brown));
  }
  
  .exp-check,
  .pickup-check,
  .addon-check,
  .pkg-gallery-check,
  .act-gallery-check {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 4;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: rgb(var(--primary-color));
    color: rgb(var(--White));
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: scale(0.5);
    transition:
      opacity var(--transition),
      transform var(--transition);
  }
  
  .exp-card.selected .exp-check,
  .pickup-card.selected .pickup-check,
  .addon-card.selected .addon-check,
  .pkg-gallery-card.selected .pkg-gallery-check,
  .act-gallery-card.selected .act-gallery-check {
    opacity: 1;
    transform: scale(1);
  }
  
  /* ============================================================
     PACKAGE GALLERY CARDS
  ============================================================ */
  .pkg-gallery-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--brown), var(--op-16));
    background: rgb(var(--brown));
    padding: 0;
    text-align: left;
    cursor: pointer;
  }
  
  .pkg-gallery-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform .8s ease, filter .8s ease;
  }
  
  .pkg-gallery-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(
        180deg,
        rgb(var(--brown), var(--op-10)) 0%,
        rgb(var(--brown), var(--op-35)) 42%,
        rgb(var(--brown), var(--op-88)) 100%
      );
  }
  
  .pkg-gallery-card::after {
    content: "";
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    position: absolute;
    inset: 0px;
    z-index: -1;
    border: 1px solid rgb(var(--White), var(--op-22));
    background: linear-gradient(
      to bottom,
      rgb(var(--brown), var(--op-40)) 0%,
      rgb(var(--brown), 0) 30%,
      rgb(var(--brown), var(--op-70)) 70%,
      rgb(var(--brown), var(--op-100)) 100%
    );
    border-radius: calc(var(--radius-lg) - 10px);
    pointer-events: none;
  }
  
  .pkg-gallery-card:hover .pkg-gallery-bg {
    transform: scale(1.08);
    filter: saturate(1.05) contrast(1.05);
  }
  
  .pkg-gallery-card.selected {
    border-color: rgb(var(--primary-color));
    box-shadow: 0 22px 60px rgb(var(--brown), var(--op-20));
  }
  
  .pkg-gallery-body {
    position: relative;
    z-index: 2;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(22px, 3vw, 34px);
  }
  
  .pkg-gallery-hero-name {
    color: rgb(var(--White));
  }
  
  .pkg-gallery-hero-price {
    color: rgb(var(--primary-color));
  }
  
  .pkg-gallery-desc {
    color: rgb(var(--White), var(--op-78));
  }
  
  .pkg-gallery-tag {
    color: rgb(var(--White));
    background: rgb(var(--White), var(--op-12));
    border: 1px solid rgb(var(--White), var(--op-18));
    backdrop-filter: blur(10px);
  }
  
  .pkg-popular-badge,
  .pkg-gallery-check {
    z-index: 5;
  }
  .pkg-gallery-card {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  
  .pkg-gallery-swatch {
    width: 100%;
    min-height: 0;
    height: 36%;
    flex: 0 0 36%;
    display: grid;
    place-items: center;
    font-size: clamp(26px, 2.8vw, 40px);
    background: rgb(var(--brown));
  }
  
  .pkg-gallery-body {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(11px, 1vw, 15px);
  }
  
  .pkg-gallery-hero-name {
    margin-bottom: 4px;
  }
  
  .pkg-gallery-hero-price {
    margin-top: 0;
  }
  
  .pkg-gallery-desc {
    margin: 7px 0 0;
  }
  
  .pkg-gallery-tags {
    display: none;
  }
  
  .pkg-gallery-tag,
  .pkg-tag,
  .inc-item,
  .para-info-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: rgb(var(--brown), var(--op-70));
    background: rgb(var(--brown), var(--op-05));
  }
  
  .pkg-includes,
  .includes-list,
  .para-info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  
  /* ============================================================
     PICKUP CARDS
  ============================================================ */
  
  .pickup-card {
    justify-content: flex-end;
    aspect-ratio: 3/2 !important;
  }
  
  .pickup-icon {
    margin-bottom: 10px;
    font-size: clamp(24px, 2.8vw, 36px);
  }
  
  .pickup-price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
  }
  
  .pickup-price-item small {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    color: rgb(var(--brown), var(--op-50));
  }
  
  /* ============================================================
     PACKAGE COMPARE
  ============================================================ */
  
  .pkg-compare-wrap {
    margin-bottom: var(--space-md);
  }
  
  .pkg-compare-wrap h4 {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .cmp-scroll-hint {
    display: none;
  }
  
  .pkg-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 13px;
  }
  
  .pkg-compare-table th {
    padding: 13px 14px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--White));
    background: rgb(var(--brown));
  }
  
  .pkg-compare-table td {
    padding: 12px 14px;
    text-align: center;
    background: rgb(var(--White));
    border-bottom: 1px solid rgb(var(--brown), var(--op-05));
    color: rgb(var(--brown), var(--op-70));
  }
  
  .pkg-compare-table td:first-child,
  .pkg-compare-table th:first-child {
    text-align: left;
  }
  
  .pkg-compare-table td:first-child {
    background: rgb(var(--brown), var(--op-05));
    font-weight: 800;
  }
  
  .cmp-yes,
  .cmp-val {
    color: rgb(var(--primary-color));
    font-weight: 900;
  }
  
  .cmp-no {
    color: rgb(var(--brown), var(--op-20));
  }
  
  /* ============================================================
     CALENDAR
  ============================================================ */
  
  .cal-wrap {
    padding: clamp(16px, 2vw, 28px);
    margin-bottom: var(--space-md);
    background: rgb(var(--White));
    border: 1px solid rgb(var(--brown), var(--op-10));
    border-radius: var(--radius-lg);
  }
  
  .cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
  }
  
  .cal-title {
    font-family: var(--font-heading);
    font-size: clamp(22px, 1.8vw, 34px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: rgb(var(--brown));
  }
  
  .cal-nav {
    display: flex;
    gap: 6px;
  }
  
  .cal-btn,
  .cnt-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--brown), var(--op-20));
    background: transparent;
    color: rgb(var(--brown));
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition);
  }
  
  .cal-btn:hover,
  .cnt-btn:hover:not(:disabled) {
    background: rgb(var(--primary-color));
    color: rgb(var(--White));
    border-color: rgb(var(--primary-color));
  }
  
  .cnt-btn:disabled {
    opacity: var(--op-30);
    cursor: not-allowed;
  }
  
  .cal-months {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 38px);
  }
  
  .cal-month-name {
    margin-bottom: var(--space-xs);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.035em;
    text-align: center;
    color: rgb(var(--brown));
  }
  
  .cal-dow,
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }
  
  .cal-dow {
    margin-bottom: 6px;
  }
  
  .cal-dow span {
    padding: 5px 0;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: rgb(var(--brown), var(--op-30));
  }
  
  .cal-day {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: rgb(var(--brown));
    background: transparent;
    transition:
      background var(--transition),
      color var(--transition),
      border-radius var(--transition),
      border-color var(--transition);
  }
  
  .cal-day:not(.disabled):not(.empty):hover {
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--primary-color));
  }
  
  .cal-day.disabled {
    opacity: var(--op-30);
    cursor: not-allowed;
    pointer-events: none;
    color: rgb(var(--brown), var(--op-30));
  }
  
  .cal-day.empty {
    pointer-events: none;
  }
  
  .cal-day.today {
    color: rgb(var(--primary-color));
  }
  
  .cal-day.in-range {
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--brown));
    border-color: rgb(var(--primary-color), var(--op-20));
    border-radius: 0;
  }
  
  .cal-day.start,
  .cal-day.end,
  .cal-day.session-picked {
    background: rgb(var(--brown)) !important;
    color: rgb(var(--White)) !important;
    border-color: rgb(var(--brown)) !important;
  }
  
  .cal-day.start {
    border-radius: 10px 0 0 10px;
  }
  
  .cal-day.end {
    border-radius: 0 10px 10px 0;
  }
  
  .cal-day.start.end {
    border-radius: 10px;
  }
  
  .cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgb(var(--brown), var(--op-10));
  }
  
  .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: rgb(var(--brown), var(--op-60));
  }
  
  .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }
  
  .night-display {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: var(--space-sm);
    padding: 12px 16px;
    border-radius: var(--radius-full);
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--primary-color));
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
  }
  
  .night-display strong {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.06em;
  }
  
  /* ============================================================
     FORMS
  ============================================================ */
  
  .form-section {
    margin-bottom: clamp(24px, 3vw, 42px);
  }
  
  .sec-title,
  .addon-cat-label {
    margin: 0 0 var(--space-xs);
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(var(--primary-color), var(--op-20));
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .addon-cat-label {
    border-bottom: none;
    color: rgb(var(--brown), var(--op-50));
  }
  
  .fg {
    position: relative;
    margin-bottom: var(--space-xs);
  }
  
  .fg label {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 5px;
    pointer-events: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgb(var(--brown), var(--op-40));
    transition:
      top var(--transition),
      transform var(--transition),
      font-size var(--transition),
      color var(--transition),
      background var(--transition);
  }
  
  .fg.focused label,
  .fg.filled label {
    top: 0;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 900;
    color: rgb(var(--brown));
    background: rgb(var(--White));
  }
  
  .fg.focused label {
    color: rgb(var(--primary-color));
  }
  
  .fg.err label {
    color: rgb(var(--danger-color));
  }
  
  .fg.ok label {
    color: rgb(var(--success-color));
  }
  
  .fg input,
  .fg select,
  .fg textarea,
  .c-search {
    width: 100%;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
    color: rgb(var(--brown));
    outline: none;
    appearance: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    transition:
      border-color var(--transition),
      box-shadow var(--transition);
  }
  
  .fg textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.15;
    padding-top: 22px;
  }
  
  .fg input:focus,
  .fg select:focus,
  .fg textarea:focus {
    border-color: rgb(var(--primary-color));
    box-shadow: 0 0 0 4px rgb(var(--primary-color), var(--op-10));
  }
  
  .fg.err input,
  .fg.err select,
  .fg.err textarea {
    border-color: rgb(var(--danger-color));
    box-shadow: 0 0 0 4px rgb(var(--danger-color), var(--op-10));
  }
  
  .fg.ok input,
  .fg.ok select,
  .fg.ok textarea {
    border-color: rgb(var(--success-color));
    box-shadow: 0 0 0 4px rgb(var(--success-color), var(--op-10));
  }
  
  .fg .msg {
    display: none;
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
  }
  
  .fg.err .msg,
  .fg.ok .msg {
    display: block;
  }
  
  .fg.err .msg {
    color: rgb(var(--danger-color));
  }
  
  .fg.ok .msg {
    color: rgb(var(--success-color));
  }
  
  .fg .icon,
  .fg .sel-arrow {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgb(var(--brown), var(--op-40));
  }
  
  .char-counter {
    text-align: right;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: rgb(var(--brown), var(--op-40));
  }
  
  /* ============================================================
     PHONE / COUNTRY / DOB
  ============================================================ */
  
  .phone-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
  }
  
  .dial-wrap {
    position: relative;
    flex-shrink: 0;
  }
  
  .dial-btn {
    width: 110px;
    height: 54px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--brown), var(--op-20));
    background: rgb(var(--White));
    color: rgb(var(--brown));
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    transition:
      border-color var(--transition),
      box-shadow var(--transition);
  }
  
  .dial-btn:hover,
  .dial-btn.open {
    border-color: rgb(var(--primary-color));
    box-shadow: 0 0 0 4px rgb(var(--primary-color), var(--op-10));
  }
  
  .dial-flag {
    font-size: 18px;
  }
  
  .dial-code {
    color: rgb(var(--brown), var(--op-70));
  }
  
  .dial-chevron {
    margin-left: auto;
    font-size: 10px;
  }
  
  .phone-wrap {
    flex: 1;
    min-width: 0;
  }
  
  .phone-input {
    padding-left: 58px !important;
  }
  
  .country-dd,
  .dob-cal-popup {
    position: absolute;
    z-index: 200;
    display: none;
    min-width: 280px;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
    box-shadow: var(--shadow-lg);
  }
  
  .country-dd {
    top: calc(100% + 8px);
    left: 0;
  }
  
  .dob-cal-popup {
    top: calc(100% + 8px);
    left: 0;
  }
  
  .country-dd.open,
  .dob-cal-popup.open {
    display: block;
    animation: bookingDropdownIn 0.18s ease both;
  }
  
  @keyframes bookingDropdownIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .c-search {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--offWhite));
  }
  
  .c-list {
    max-height: 230px;
    overflow-y: auto;
  }
  
  .c-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.035em;
    color: rgb(var(--brown));
    transition: background var(--transition);
  }
  
  .c-item:hover {
    background: rgb(var(--primary-color), var(--op-10));
  }
  
  .cf {
    font-size: 17px;
  }
  
  .cn {
    flex: 1;
    text-align: left;
  }
  
  .cd {
    color: rgb(var(--brown), var(--op-50));
  }
  
  .dob-cal-top,
  .dob-cal-body {
    padding: 14px;
  }
  
  .dob-cal-top {
    border-bottom: 1px solid rgb(var(--brown), var(--op-10));
  }
  
  .dob-ym-sel {
    display: flex;
    gap: 8px;
  }
  
  .dob-ym-sel select {
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
    color: rgb(var(--brown));
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
  }
  
  .dob-dow,
  .dob-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }
  
  .dob-dow {
    margin-bottom: 6px;
  }
  
  .dob-dow span {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    color: rgb(var(--brown), var(--op-40));
  }
  
  .dob-day {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    background: transparent;
    color: rgb(var(--brown));
  }
  
  .dob-day:not(.dis):hover {
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--primary-color));
  }
  
  .dob-day.dis {
    opacity: var(--op-30);
    pointer-events: none;
  }
  
  .dob-day.empty {
    pointer-events: none;
  }
  
  .dob-day.sel {
    background: rgb(var(--brown));
    color: rgb(var(--White));
  }
  
  /* ============================================================
     GUESTS / ROOMS
  ============================================================ */
  
  .counter-row,
  .guest-room-row,
  .yoga-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: rgb(var(--White));
    border: 1px solid rgb(var(--brown), var(--op-10));
  }
  
  .counter-label,
  .yoga-name,
  .guest-name-label,
  .addon-included-name {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    color: rgb(var(--brown));
  }
  
  .counter-sublabel,
  .yoga-sub,
  .addon-included-desc,
  .room-assign-footer {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.035em;
    color: rgb(var(--brown), var(--op-50));
  }
  .room-assign-footer {
    padding: 12px;
  }
  
  .counter-ctrl,
  .yoga-ctrl {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .cnt-val,
  .yoga-val {
    min-width: 30px;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-align: center;
    color: rgb(var(--brown));
  }
  
  .room-assign {
    overflow: hidden;
    background: rgb(var(--White));
    border: 1px solid rgb(var(--brown), var(--op-10));
    border-radius: var(--radius-md);
  }
  
  .room-assign-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: 14px 16px;
    background: rgb(var(--brown), var(--op-05));
    border-bottom: 1px solid rgb(var(--brown), var(--op-10));
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .room-assign-header span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.035em;
    text-transform: none;
    color: rgb(var(--brown), var(--op-50));
  }
  
  .guest-room-row {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid rgb(var(--brown), var(--op-05));
  }
  
  .guest-room-row:last-child {
    border-bottom: none;
  }
  
  .guest-room-label {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .guest-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: rgb(var(--brown));
    color: rgb(var(--White));
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }
  
  .guest-room-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
  }
  
  .room-pill {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--brown), var(--op-20));
    background: transparent;
    color: rgb(var(--brown), var(--op-70));
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition);
  }
  .room-pill span{
    display: block;
  }
  .room-pill svg {
    width: 32px;
    fill: rgb(var(--brown));
  }
  .room-pill:hover,
  .room-pill.active,
  .room-pill:hover svg,
  .room-pill.active svg 
  {
    background: rgb(var(--primary-color));
    color: rgb(var(--White));
    border-color: rgb(var(--primary-color));
    fill: rgb(var(--White)) !important;
  }
  
  .room-pill small {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    opacity: var(--op-70);
  }
  
  /* ============================================================
     GUEST DETAIL CARDS
  ============================================================ */
  
  .guest-detail-card {
    overflow: visible;
    margin-bottom: var(--space-xs);
    background: rgb(var(--White));
    border: 1px solid rgb(var(--brown), var(--op-10));
    border-radius: var(--radius-lg);
  }
  
  .gdc-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    user-select: none;
    background: rgb(var(--brown), var(--op-05));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  
  .gdc-head.collapsed {
    border-radius: var(--radius-lg);
  }
  
  .gdc-head-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgb(var(--brown));
  }
  
  .gdc-head-sub {
    margin-top: 4px;
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.035em;
    color: rgb(var(--brown), var(--op-60));
  }
  
  .gdc-head-badge,
  .gdc-complete-badge {
    margin-left: auto;
    padding: 6px 10px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--primary-color));
  }
  
  .gdc-complete-badge {
    background: rgb(var(--success-color), var(--op-10));
    color: rgb(var(--success-color));
  }
  
  .gdc-head-chevron {
    color: rgb(var(--brown), var(--op-40));
    transition: transform var(--transition);
  }
  
  .gdc-head-chevron.open {
    transform: rotate(180deg);
  }
  
  .gdc-body {
    display: none;
    padding: 18px;
  }
  
  .gdc-body.open {
    display: block;
  }
  
  .autosave-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    color: rgb(var(--brown), var(--op-60));
  }
  
  .autosave-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: rgb(var(--success-color));
  }
  
  /* ============================================================
     INCLUDES / INFO BOXES
  ============================================================ */
  
  .includes-box,
  .para-info-box {
    padding: clamp(16px, 1.7vw, 24px);
    margin: var(--space-md) 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
  }
  
  .includes-title {
    margin-bottom: var(--space-xs);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .para-price-note {
    margin: var(--space-sm) 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.035em;
    color: rgb(var(--brown), var(--op-60));
  }
  
  /* ============================================================
     ACTIVITIES / ADDONS
  ============================================================ */
  
  .addon-cat-section {
    margin-bottom: var(--space-sm);
  }
  
  .act-gallery-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    font-size: 46px;
  }
  
  .act-gallery-img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(
        to top,
        rgb(var(--brown), var(--op-90)) 0%,
        rgb(var(--brown), var(--op-40)) 55%,
        rgb(var(--brown), var(--op-10)) 100%
      );
  }
  
  .act-gallery-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: clamp(11px, 1vw, 15px);
  }
  
  .act-gallery-name {
    display: block;
    margin-bottom: 4px;
    color: rgb(var(--White));
  }
  
  .act-gallery-price {
    display: block;
    color: rgb(var(--White), var(--op-70));
  }
  
  .yoga-price {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 900;
    color: rgb(var(--primary-color));
  }
  
  .addon-included {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--primary-color), var(--op-20));
    background: rgb(var(--primary-color), var(--op-10));
  }
  
  .addon-included-icon {
    font-size: 24px;
  }
  
  .addon-included-badge {
    margin-left: auto;
    padding: 7px 12px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    color: rgb(var(--primary-color));
    background: rgb(var(--primary-color), var(--op-10));
  }
  
  /* ============================================================
     REVIEW / BREAKDOWN
  ============================================================ */
  
  .r-card,
  .breakdown,
  .price-hint,
  .next-step {
    padding: clamp(16px, 1.7vw, 24px);
    background: rgb(var(--White));
    border: 1px solid rgb(var(--brown), var(--op-10));
    border-radius: var(--radius-lg);
  }
  
  .r-card-title {
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .r-card-edit {
    padding: 6px 10px;
    border-radius: var(--radius-full);
    border: none;
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--primary-color));
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
  }
  
  .r-row,
  .bd-row,
  .sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 8px 0;
    border-bottom: 1px solid rgb(var(--brown), var(--op-05));
  }
  
  .r-row:last-child,
  .bd-row:last-child,
  .sum-row:last-child {
    border-bottom: none;
  }
  
  .r-key,
  .sum-k {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    color: rgb(var(--brown), var(--op-40));
  }
  
  .r-val,
  .sum-v {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-align: right;
    color: rgb(var(--brown));
  }
  
  .sum-v.empty {
    color: rgb(var(--White), var(--op-40));
    font-weight: 500;
  }
  
  .bd-row {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.045em;
    color: rgb(var(--brown), var(--op-70));
  }
  
  .bd-row:last-child {
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px solid rgb(var(--brown), var(--op-20));
    font-size: 18px;
    font-weight: 900;
    color: rgb(var(--brown));
  }
  
  /* ============================================================
     NAV BUTTONS
  ============================================================ */
  
  .nav-btns {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-top: clamp(32px, 4vw, 60px);
    padding-top: var(--space-md);
    border-top: 1px solid rgb(var(--brown), var(--op-10));
  }
  
  .nav-btns .am-bk-btn:disabled,
  .am-bk-btn:disabled {
    opacity: var(--op-40);
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 var(--space-md);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.045em;
    transition:
      transform var(--transition),
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      opacity var(--transition);
  }
  
  .btn-primary,
  .btn-submit {
    background: rgb(var(--primary-color));
    color: rgb(var(--White));
  }
  
  .btn-primary:hover:not(:disabled),
  .btn-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    background: rgb(var(--brown));
  }
  
  .btn-back {
    background: transparent;
    color: rgb(var(--brown), var(--op-70));
    border-color: rgb(var(--brown), var(--op-20));
  }
  
  .btn-back:hover {
    color: rgb(var(--brown));
    border-color: rgb(var(--brown));
  }
  
  .btn:disabled {
    opacity: var(--op-40);
    cursor: not-allowed;
  }
  
  /* ============================================================
     ASIDE SUMMARY
  ============================================================ */
  
  .bookingAsideTop {
    width: 100%;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
    margin-bottom: clamp(26px, 4vw, 58px);
  }
  
  .bookingAsideBrand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    color: inherit;
  }
  
  .bookingAsideLogo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full);
    background: rgb(var(--White));
  }
  
  .bookingAsideLogo img {
    width: 58%;
    height: 58%;
    object-fit: contain;
  }
  
  .bookingAsideBrand span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .bookingAsideName {
    font-family: var(--font-heading);
    font-size: clamp(17px, 1.3vw, 23px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: rgb(var(--White));
  }
  
  .bookingAsideTagline {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--White), var(--op-50));
  }
  
  .bookingAsideHeading h2 {
    margin: 0 0 6px;
    font-family: var(--font-heading);
    font-size: clamp(34px, 3.2vw, 54px);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.07em;
    color: rgb(var(--White));
  }
  
  .bookingAsideHeading p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: rgb(var(--White), var(--op-50));
  }
  
  .bookingSummaryContent,
  #sumContent {
    width: 100%;
  }
  
  .sum-block {
    margin-bottom: var(--space-xs);
  }
  
  .sum-divider {
    height: 1px;
    margin: var(--space-sm) 0;
    background: rgb(var(--White), var(--op-10));
  }
  
  .bookingAside .sum-row {
    border-color: rgb(var(--White), var(--op-10));
  }
  
  .bookingAside .sum-k {
    color: rgb(var(--White), var(--op-40));
  }
  
  .bookingAside .sum-v {
    color: rgb(var(--White));
  }
  
  .bookingAsideSpacer {
    flex: 1;
    min-height: var(--space-md);
  }
  
  .bookingTotalBlock,
  .total-block {
    margin-top: var(--space-sm);
    padding: clamp(16px, 1.7vw, 24px);
    border-radius: var(--radius-lg);
    background: rgb(var(--White));
    color: rgb(var(--brown));
  }
  
  .bookingTotalLabel,
  .total-lbl {
    margin: 0 0 5px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .bookingTotalAmount,
  .total-amt {
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(44px, 4vw, 70px);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.075em;
    color: rgb(var(--brown));
  }
  
  .bookingTotalNote,
  .total-note {
    margin: 8px 0 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: rgb(var(--brown), var(--op-50));
  }
  
  .bookingWhatsappCta,
  .whatsapp-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--White), var(--op-20));
    text-decoration: none;
    color: rgb(var(--White));
    background: rgb(var(--White), var(--op-10));
    transition:
      background var(--transition),
      border-color var(--transition);
  }
  
  .bookingWhatsappCta:hover,
  .whatsapp-cta:hover {
    background: rgb(var(--primary-color));
    border-color: rgb(var(--primary-color));
  }
  
  .bookingWhatsappIcon,
  .whatsapp-icon {
    font-size: 22px;
  }
  
  .bookingWhatsappLabel,
  .wt-label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgb(var(--White));
  }
  
  .bookingWhatsappSub,
  .wt-sub {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: rgb(var(--White), var(--op-60));
  }
  
  /* ============================================================
     CURRENCY
  ============================================================ */
  
  .currency-toggle {
    display: inline-flex;
    overflow: hidden;
    margin-bottom: var(--space-md);
    border: 1px solid rgb(var(--brown), var(--op-20));
    border-radius: var(--radius-full);
  }
  
  .cur-btn {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: rgb(var(--brown), var(--op-60));
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.035em;
  }
  
  .cur-btn.active {
    background: rgb(var(--brown));
    color: rgb(var(--White));
  }
  
  /* ============================================================
     TOAST
  ============================================================ */
  
  .bookingToast,
  .toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px;
    border-radius: var(--radius-full);
    background: rgb(var(--brown));
    color: rgb(var(--White));
    box-shadow: var(--shadow-lg);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity var(--transition),
      transform var(--transition);
  }
  
  .bookingToast.show,
  .toast.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* ============================================================
     SUCCESS
  ============================================================ */
  
  .success {
    min-height: 62svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .success-icon {
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-full);
    background: rgb(var(--primary-color));
    color: rgb(var(--White));
    font-size: 34px;
  }
  
  .success h1 {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-heading);
    font-size: clamp(48px, 5vw, 86px);
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -0.075em;
    color: rgb(var(--brown));
  }
  
  .success p {
    margin: 0 0 var(--space-md);
    max-width: 520px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.05em;
    color: rgb(var(--brown), var(--op-70));
  }
  
  .success-ref {
    padding: 18px 26px;
    border-radius: var(--radius-md);
    background: rgb(var(--brown), var(--op-05));
  }
  
  .ref-lbl {
    margin-bottom: 6px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .ref-code {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgb(var(--brown));
  }
  
  .next-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-md);
  }
  
  .next-step {
    max-width: 220px;
    text-align: left;
  }
  
  .ns-icon {
    font-size: 22px;
    margin-bottom: 8px;
  }
  
  .ns-title {
    margin-bottom: 4px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 900;
    color: rgb(var(--brown));
  }
  
  .ns-desc {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    color: rgb(var(--brown), var(--op-60));
  }
  
  .success-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
  }
  
  /* ============================================================
     MOBILE SUMMARY
  ============================================================ */
  
  .bookingMobileBar,
  .mbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding: 12px var(--space-sm);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgb(var(--brown));
    color: rgb(var(--White));
  }
  
  .bookingMobileTotal,
  .mbar-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .bookingMobileLabel,
  .mbar-lbl {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--White), var(--op-50));
  }
  
  .bookingMobileAmount,
  .mbar-total {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: rgb(var(--White));
  }
  
  .bookingMobileOverlay,
  .m-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: none;
    flex-direction: column;
    background: rgb(var(--White));
    color: rgb(var(--brown));
  }
  
  .bookingMobileOverlay.open,
  .m-overlay.open {
    display: flex;
  }
  
  .bookingMobileOverlayHead,
  .m-overlay-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: rgb(var(--brown));
    color: rgb(var(--White));
  }
  
  .bookingMobileOverlayHead h2,
  .m-overlay-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.065em;
  }
  
  .bookingMobileOverlayHead p,
  .m-overlay-sub {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--White), var(--op-50));
  }
  
  .bookingMobileOverlayBody,
  .m-overlay-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
  }
  
  .bookingMobileOverlayFoot,
  .m-overlay-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm);
    padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
    border-top: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--offWhite));
  }
  
  .bookingMobileOverlayTotalLabel,
  .m-total-label {
    margin: 0 0 4px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
  }
  
  .bookingMobileOverlayTotalAmount,
  .m-total-amt {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 44px;
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -0.07em;
    color: rgb(var(--brown));
  }
  
  .bookingMobileOverlayTotalNote,
  .m-total-note {
    margin: 5px 0 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: rgb(var(--brown), var(--op-50));
  }
  
  /* ============================================================
     PRICE ANIMATION
  ============================================================ */
  
  .total-amt.bump,
  .bookingTotalAmount.bump,
  .m-total-amt.bump,
  .bookingMobileOverlayTotalAmount.bump,
  .mbar-total.bump,
  .bookingMobileAmount.bump {
    animation: bookingPriceBump 0.28s ease both;
  }
  
  @keyframes bookingPriceBump {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* ============================================================
     RESPONSIVE
  ============================================================ */
  
  @media (max-width: 1280px) {
    :root {
      --booking-card-size: clamp(150px, 16vw, 190px);
    }
  }
  
  @media (max-width: 1100px) {
    :root {
      --booking-card-size: clamp(160px, 24vw, 210px);
    }
  
    .bookingShell {
      grid-template-columns: 1fr;
    }
  
    .bookingAside {
      display: none;
    }
  
    .bookingMobileBar,
    .mbar {
      display: flex;
    }
  
    .BookingSystemSection {
      padding-bottom: calc(var(--gate-wrap-padding) + 76px);
    }
  
    .exp-grid,
    .pkg-gallery-grid,
    .activity-gallery-grid,
    .addon-grid {
      grid-template-columns: repeat(3, minmax(0, var(--booking-card-size)));
    }
  
    .bookingMain {
      padding: clamp(18px, 3vw, 42px);
    }
  }
  
  @media (max-width: 900px) {
    .bookingIntroBottom {
      align-items: flex-start;
      flex-direction: column;
    }
  
    .exp-grid,
    .pkg-gallery-grid,
    .activity-gallery-grid,
    .addon-grid,
    .pickup-grid,
    .pkg-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .review-grid,
    .cal-months,
    .grid-2 {
      grid-template-columns: 1fr;
    }
  
    .p-label {
      display: none;
    }
  
    .bookingMainTop {
      align-items: flex-start;
      flex-direction: column;
    }
  }
  
  @media (max-width: 620px) {
    .BookingIntroSection,
    .BookingSystemSection {
      padding: var(--space-xs);
    }
  
    .bookingIntroInner,
    .bookingMain {
      border-radius: var(--radius-lg);
    }
  
    .bookingIntroTitle {
      font-size: clamp(58px, 17vw, 88px);
    }
  
    .s-title {
      font-size: clamp(46px, 14vw, 70px);
    }
  
    .bookingMain {
      padding: var(--space-sm);
    }
  
    .bookingProgress,
    .progress {
      margin-bottom: var(--space-lg);
    }
  
    .p-dot {
      width: 30px;
      height: 30px;
    }
  
    .p-step:not(:last-child)::after {
      top: 15px;
      left: calc(50% + 16px);
      right: calc(-50% + 16px);
    }
  
    .exp-grid,
    .pkg-gallery-grid,
    .activity-gallery-grid,
    .addon-grid,
    .pickup-grid,
    .pkg-grid {
      grid-template-columns: 1fr;
    }
  
    .exp-card,
    .pkg-card,
    .pickup-card,
    .addon-card,
    .pkg-gallery-card,
    .act-gallery-card {
      aspect-ratio: 1 / 0.78;
    }
  
    .nav-btns {
      align-items: stretch;
      flex-direction: column;
    }
  
    .btn,
    .nav-btns .am-bk-btn {
      width: 100%;
      justify-content: center;
    }
  
    .phone-row {
      flex-direction: column;
    }
  
    .dial-wrap,
    .dial-btn {
      width: 100%;
    }
  
    .country-dd,
    .dob-cal-popup {
      width: 100%;
      min-width: 0;
    }
  
    .guest-room-row {
      align-items: flex-start;
      flex-direction: column;
    }
  
    .guest-room-pills {
      justify-content: flex-start;
    }
  
    .bookingMobileOverlayFoot,
    .m-overlay-foot {
      align-items: stretch;
      flex-direction: column;
    }
  }


  .booking-submit-error {
    width: 100%;
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
  
    margin-top: var(--space-md);
    padding: var(--space-sm);
  
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--danger-color), var(--op-20));
  
    background: rgb(var(--danger-color), var(--op-10));
    color: rgb(var(--brown));
  
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.035em;
  }
  
  .booking-submit-error a {
    flex-shrink: 0;
    color: rgb(var(--primary-color));
    text-decoration: none;
    font-weight: 900;
  }
  
  @media (max-width: 620px) {
    .booking-submit-error {
      flex-direction: column;
    }
  }

  .custom-select-field {
    position: relative;
  }
  
  .custom-select-btn {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
    color: rgb(var(--brown));
    cursor: pointer;
    outline: none;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.045em;
    text-align: left;
    transition:
      border-color var(--transition),
      box-shadow var(--transition),
      background var(--transition);
  }
  
  .custom-select-field.focused .custom-select-btn {
    border-color: rgb(var(--primary-color));
    box-shadow: 0 0 0 4px rgb(var(--primary-color), var(--op-10));
  }
  
  .custom-select-arrow {
    margin-left: auto;
    color: rgb(var(--brown), var(--op-40));
    transition: transform var(--transition);
  }
  
  .custom-select-field.focused .custom-select-arrow {
    transform: rotate(180deg);
    color: rgb(var(--primary-color));
  }
  
  .custom-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 400;
    display: none;
    max-height: fit-content;
    overflow-y: auto;
    padding: 7px;
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--White));
    box-shadow: var(--shadow-lg);
  }
  
  .custom-select-menu.open {
    display: block;
    animation: bookingDropdownIn 0.18s ease both;
  }
  
  .custom-select-option {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: rgb(var(--brown));
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: left;
    transition:
      background var(--transition),
      color var(--transition);
  }
  
  .custom-select-option:hover {
    background: rgb(var(--primary-color), var(--op-10));
    color: rgb(var(--primary-color));
  }
  
  .custom-select-option.active {
    background: rgb(var(--brown));
    color: rgb(var(--White));
  }
  
  .custom-select-check {
    color: currentColor;
    font-weight: 900;
  }

  .wetsuit-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    margin-top: 6px;
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-md);
    border: 1px solid rgb(var(--brown), var(--op-10));
    background: rgb(var(--brown), var(--op-05));
  }
  
  .wetsuit-result.ready {
    border-color: rgb(var(--primary-color), var(--op-20));
    background: rgb(var(--primary-color), var(--op-10));
  }
  
  .wetsuit-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgb(var(--White));
    color: rgb(var(--primary-color));
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 900;
  }
  
  .wetsuit-size {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: rgb(var(--primary-color));
  }
  
  .wetsuit-note {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
    color: rgb(var(--brown), var(--op-55));
  }

  .bookingResumeOverlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgb(var(--brown), var(--op-70));
    backdrop-filter: var(--blur-md);
    opacity: 0;
    transition: opacity var(--transition);
  }
  
  .bookingResumeOverlay.open {
    opacity: 1;
  }
  
  .bookingResumeCard {
    width: 100%;
    max-width: 420px;
    text-align: center;
    padding: clamp(28px, 3vw, 44px);
    border-radius: var(--radius-xl);
    background: rgb(var(--White));
    box-shadow: var(--shadow-dark);
    transform: translateY(14px) scale(0.97);
    transition:
      transform var(--transition),
      opacity var(--transition);
    opacity: 0;
  }
  
  .bookingResumeOverlay.open .bookingResumeCard {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  
  .bookingResumeIcon {
    font-size: 34px;
    margin-bottom: var(--space-xs);
  }
  
  .bookingResumeCard h2 {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: rgb(var(--brown));
  }
  
  .bookingResumeCard p {
    margin: 0 0 var(--space-md);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.03em;
    color: rgb(var(--brown), var(--op-70));
  }
  
  .bookingResumeActions {
    display: flex;
    gap: var(--space-xs);
  }
  
  .bookingResumeActions .am-bk-btn {
    flex: 1;
  }