/* ========================================================= 
     GLOBAL 
  ========================================================= */ 
 
  * { 
    box-sizing: border-box; 
  } 
 
  html { 
    scroll-behavior: smooth; 
  } 
 
  html, 
  body { 
    font-family: 'DM Sans', sans-serif; 
    min-height: 100%; 
  } 
 
  h1, 
  h2, 
  h3, 
  h4, 
  h5, 
  h6 { 
    font-family: 'PT Sans', sans-serif; 
  } 
 
  body { 
    margin: 0;
    transition: 
      background-color .35s ease, 
      color .35s ease; 

    background:
      radial-gradient(
        circle at 10% 10%,
        rgba(229, 152, 5, .20),
        transparent 28%
      ),
      radial-gradient(
        circle at 90% 20%,
        rgba(255, 181, 46, .14),
        transparent 25%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(229, 152, 5, .12),
        transparent 35%
      ),
      #f4f4f5;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        transparent 35%,
        rgba(229,152,5,.04)
      );
  }

  .dark body,
  body.dark {
    background:
      radial-gradient(
        circle at 10% 10%,
        rgba(229, 152, 5, .14),
        transparent 28%
      ),
      radial-gradient(
        circle at 90% 20%,
        rgba(255, 181, 46, .08),
        transparent 25%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(229, 152, 5, .08),
        transparent 35%
      ),
      #09090b;
  }
 
 
  /* ========================================================= 
     SCROLLBAR 
  ========================================================= */ 
 
  ::-webkit-scrollbar { 
    width: 6px; 
  } 
 
  ::-webkit-scrollbar-track { 
    background: transparent; 
  } 
 
  ::-webkit-scrollbar-thumb { 
    background: #E59805; 
    border-radius: 99px; 
  } 
 
  ::-webkit-scrollbar-thumb:hover { 
    background: #c97f00; 
  } 
 
 
  /* ========================================================= 
     GLASS EFFECT 
  ========================================================= */ 
 
  .glass { 
    background: 
      linear-gradient( 
        135deg, 
        rgba(255, 255, 255, 0.52), 
        rgba(255, 255, 255, 0.22) 
      ); 
 
    backdrop-filter: blur(25px) saturate(150%); 
    -webkit-backdrop-filter: blur(25px) saturate(150%); 
 
    border: 1px solid rgba(255, 255, 255, 0.62); 
 
    box-shadow: 
      0 20px 50px rgba(24, 24, 27, 0.08), 
      0 4px 12px rgba(24, 24, 27, 0.04),
      inset 0 1px 0 rgba(255,255,255,.55); 
 
    transition: 
      transform .3s ease, 
      box-shadow .3s ease, 
      border-color .3s ease, 
      background-color .3s ease; 
  } 
 
  .glass:hover { 
    box-shadow: 
      0 25px 65px rgba(24, 24, 27, 0.11), 
      0 6px 16px rgba(24, 24, 27, 0.05),
      inset 0 1px 0 rgba(255,255,255,.62); 
  } 
 
  .dark .glass { 
    background: 
      linear-gradient( 
        135deg, 
        rgba(39, 39, 42, 0.56), 
        rgba(24, 24, 27, 0.30) 
      ); 
 
    backdrop-filter: blur(25px) saturate(140%);
    -webkit-backdrop-filter: blur(25px) saturate(140%);

    border-color: rgba(255, 255, 255, 0.11); 
 
    box-shadow: 
      0 20px 55px rgba(0, 0, 0, 0.30), 
      0 4px 15px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255,255,255,.06); 
  } 
 
 
  /* ========================================================= 
     BOOKING INPUT 
  ========================================================= */ 
 
  .booking-input { 
    width: 100%; 
 
    padding: 13px 15px; 
 
    border-radius: 13px; 
 
    background: rgba(255, 255, 255, 0.38); 
 
    border: 1px solid rgba(255, 255, 255, 0.55); 
 
    color: #18181b; 
 
    outline: none; 
 
    box-shadow: 
      0 5px 20px rgba(24, 24, 27, 0.035),
      inset 0 1px 0 rgba(255,255,255,.4); 
 
    transition: 
      border-color .2s ease, 
      box-shadow .2s ease, 
      background-color .2s ease, 
      transform .2s ease; 
  } 
 
 
  .booking-input:hover { 
    background: rgba(255, 255, 255, 0.58); 
 
    border-color: rgba(229, 152, 5, 0.40); 
 
    box-shadow: 
      0 7px 22px rgba(24, 24, 27, 0.05); 
  } 
 
 
  .booking-input:focus { 
    border-color: #E59805; 
 
    background: rgba(255, 255, 255, 0.68); 
 
    box-shadow: 
      0 0 0 4px rgba(229, 152, 5, 0.10), 
      0 8px 25px rgba(229, 152, 5, 0.10); 
 
    transform: translateY(-1px); 
  } 
 
 
  .dark .booking-input { 
    background: rgba(39, 39, 42, 0.42); 
 
    border-color: rgba(255, 255, 255, .10); 
 
    color: white; 

    box-shadow:
      0 5px 20px rgba(0,0,0,.12),
      inset 0 1px 0 rgba(255,255,255,.03);
  } 
 
 
  .dark .booking-input:hover { 
    background: rgba(39, 39, 42, 0.60); 
 
    border-color: rgba(229, 152, 5, 0.45); 
  } 
 
 
  .dark .booking-input:focus { 
    background: rgba(39, 39, 42, 0.70); 
 
    border-color: #E59805; 
 
    box-shadow: 
      0 0 0 4px rgba(229, 152, 5, 0.12), 
      0 8px 25px rgba(0, 0, 0, 0.25); 
  } 
 
 
  .dark .booking-input::placeholder { 
    color: #71717a; 
  } 
 
 
  select.booking-input { 
    cursor: pointer; 
  } 
 
  select.booking-input option {
    background: #18181b;
    color: white;
  }
 
 
  /* ========================================================= 
     BUTTON 
  ========================================================= */ 
 
  .book-btn { 
    position: relative; 
    overflow: hidden; 
 
    transition: 
      transform .25s ease, 
      box-shadow .25s ease, 
      background-color .25s ease; 
  } 
 
 
  .book-btn::before { 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
    left: -100%; 
 
    width: 60%; 
    height: 100%; 
 
    background: 
      linear-gradient( 
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.35), 
        transparent 
      ); 
 
    transform: skewX(-20deg); 
 
    transition: left .6s ease; 
  } 
 
 
  .book-btn:hover::before { 
    left: 140%; 
  } 
 
 
  .book-btn:hover { 
    transform: translateY(-2px); 
 
    box-shadow: 
      0 14px 30px rgba(229, 152, 5, .25), 
      0 4px 10px rgba(229, 152, 5, .12); 
 
    background-color: #f0a00a; 
  } 
 
 
  .book-btn:active { 
    transform: translateY(0) scale(.99); 
 
    box-shadow: 
      0 6px 15px rgba(229, 152, 5, .18); 
  } 
 
 
  .book-btn:disabled { 
    transform: none !important; 
 
    box-shadow: none !important; 
 
    opacity: .4; 
  } 
 
 
  /* ========================================================= 
     PACKAGE CARD 
  ========================================================= */ 
 
  .package-card { 
    transition: 
      transform .3s ease, 
      box-shadow .3s ease, 
      border-color .3s ease, 
      background-color .3s ease; 
  } 
 
 
  .package-card:hover { 
    transform: translateY(-3px); 
 
    border-color: rgba(229, 152, 5, .35); 
 
    box-shadow: 
      0 12px 28px rgba(24, 24, 27, .06); 
  } 
 
 
  /* ========================================================= 
     SUMMARY 
  ========================================================= */ 
 
  .summary-card { 
    transition: 
      transform .3s ease, 
      box-shadow .3s ease; 
  } 
 
 
  .summary-card:hover { 
    transform: translateY(-2px); 
 
    box-shadow: 
      0 24px 55px rgba(24, 24, 27, .10); 
  } 
 
 
  /* ========================================================= 
     PHONE / DATE / SELECT 
  ========================================================= */ 
 
  input[type="date"] { 
    cursor: pointer; 
  } 
 
 
  input[type="number"] { 
    appearance: textfield; 
  } 
 
 
  input[type="number"]::-webkit-inner-spin-button, 
  input[type="number"]::-webkit-outer-spin-button { 
    opacity: .6; 
  } 
 
 
  /* ========================================================= 
     LINK HOVER 
  ========================================================= */ 
 
  a { 
    transition: 
      color .2s ease, 
      opacity .2s ease, 
      transform .2s ease; 
  } 
 
 
  /* ========================================================= 
     NAVIGATION 
  ========================================================= */ 
 
  header { 
    transition: 
      background-color .3s ease, 
      box-shadow .3s ease; 

    background:
      rgba(255,255,255,.38) !important;

    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);

    border-color: rgba(255,255,255,.45) !important;

    box-shadow:
      0 8px 30px rgba(24,24,27,.05),
      inset 0 1px 0 rgba(255,255,255,.45);
  } 
 
 
  header:hover { 
    box-shadow: 
      0 8px 30px rgba(24, 24, 27, .08),
      inset 0 1px 0 rgba(255,255,255,.55); 
  } 
 
  .dark header {
    background:
      rgba(9,9,11,.45) !important;

    border-color:
      rgba(255,255,255,.08) !important;

    box-shadow:
      0 8px 30px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.04);
  }


  /* ========================================================= 
     STATUS INDICATOR 
  ========================================================= */ 
 
  .status-dot { 
    animation: pulseDot 2s infinite; 
  } 
 
 
  @keyframes pulseDot { 
 
    0%, 
    100% { 
      opacity: 1; 
      transform: scale(1); 
    } 
 
    50% { 
      opacity: .55; 
      transform: scale(.85); 
    } 
 
  } 
 
 
  /* ========================================================= 
     FADE UP 
  ========================================================= */ 
 
  .fade-up { 
    animation: 
      fadeUp .6s cubic-bezier(.22, 1, .36, 1) both; 
  } 
 
 
  @keyframes fadeUp { 
 
    from { 
      opacity: 0; 
      transform: translateY(20px); 
    } 
 
    to { 
      opacity: 1; 
      transform: translateY(0); 
    } 
 
  } 
 
 
  /* ========================================================= 
     MODAL 
  ========================================================= */ 
 
  [x-cloak] { 
    display: none !important; 
  } 


  .glass-modal {
    background:
      linear-gradient(
        135deg,
        rgba(255,255,255,.60),
        rgba(255,255,255,.28)
      );

    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);

    border: 1px solid rgba(255,255,255,.62);

    box-shadow:
      0 30px 90px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.55);
  }

  .dark .glass-modal {
    background:
      linear-gradient(
        135deg,
        rgba(39,39,42,.68),
        rgba(24,24,27,.46)
      );

    border-color:
      rgba(255,255,255,.10);

    box-shadow:
      0 30px 90px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
 
 
  /* ========================================================= 
     MOBILE 
  ========================================================= */ 
 
  @media (max-width: 640px) { 
 
    .glass { 
      border-radius: 22px; 
 
      box-shadow: 
        0 12px 30px rgba(24, 24, 27, .07),
        inset 0 1px 0 rgba(255,255,255,.45);
    } 
 
 
    .booking-input { 
      padding: 12px 14px; 
      font-size: 14px;
    } 
 
 
    .book-btn { 
      padding-top: 14px; 
      padding-bottom: 14px; 
    } 

    main section:first-child {
      padding-top: 40px;
      padding-bottom: 28px;
    }

    main section:first-child h1 {
      font-size: 2.25rem;
      line-height: 1.1;
    }

    main section:first-child p {
      font-size: 13px;
    }

    aside {
      width: 100%;
    }

    aside .summary-card {
      width: 100%;
    }

    .grid.sm\:grid-cols-2 {
      grid-template-columns: 1fr;
    }

    footer {
      padding-bottom: 30px;
    }
 
  } 


  /* =========================================================
     TABLET
  ========================================================= */

  @media (min-width: 641px) and (max-width: 1024px) {

    .glass {
      border-radius: 24px;
    }

    aside {
      position: relative !important;
      top: auto !important;
    }

  }

  /* =========================================================
   GLASS BUTTON
========================================================= */

.glass-button{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.70);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  box-shadow:
    0 8px 25px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.65);
}

.dark .glass-button{
  background:rgba(39,39,42,.45);
  border:1px solid rgba(255,255,255,.10);
}


  /* =========================================================
     SMALL PHONE
  ========================================================= */

  @media (max-width: 400px) {

    main .px-6 {
      padding-left: 16px;
      padding-right: 16px;
    }

    main section:first-child h1 {
      font-size: 2rem;
    }

    .glass {
      border-radius: 19px;
    }

    .glass.rounded-3xl {
      padding: 18px;
    }

    .booking-input {
      padding: 11px 12px;
    }

    .book-btn {
      font-size: 13px;
    }

  }
 
/* =========================================================
   BOOKING DATE - DESKTOP & MOBILE
========================================================= */

.booking-date-input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;

    text-align: center;
    text-align-last: center;

    -webkit-appearance: auto;
    appearance: auto;

    cursor: pointer;
}

/* Center date value on Chrome */
.booking-date-input::-webkit-date-and-time-value {
    text-align: center;
    margin: 0 auto;
}

/* Preserve native calendar picker */
.booking-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 640px) {

    .booking-date-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;

        font-size: 14px;
        text-align: center;
        text-align-last: center;
    }

    .booking-date-input::-webkit-date-and-time-value {
        text-align: center;
        margin: 0 auto;
    }

}
/* FIX: MOBILE BOOKING DATE INPUT */
.booking-date-input {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-appearance: auto;
    appearance: auto;
}

.booking-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    pointer-events: auto;
}

@media (max-width: 640px) {
    .booking-date-input {
        min-height: 48px;
        width: 100%;
        max-width: 100%;
    }
}