/* ========== GLOBAL ========== */
  *{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,Inter,system-ui;}
  body{
    background:#F7F7F3;
    overflow-x:hidden;
    min-height:200vh;
    -webkit-font-smoothing:antialiased;
    color:#111;
  }

  /* ========== HERO (top page) ========== */
  .hero-wrap{
    position:fixed;
    inset:0;
    height:100vh;
    width:100%;
    z-index:10;
    overflow:hidden;
    pointer-events:auto;
  }
  .hero-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.25) 40%,rgba(0,0,0,0.7) 90%);
    pointer-events:none;
    z-index:5;
  }
  .heroSwiper{
    width:100%;
    height:100%;
    position:relative;
    z-index:1;
  }
  .heroSwiper img{width:100%;height:100%;object-fit:cover;display:block;}
  .heroSwiper .swiper-slide{
    opacity:0.55;
    transition:opacity .6s ease-out, transform .6s ease-out;
  }
  .heroSwiper .swiper-slide-active{
    opacity:1;
    transform:scale(1.02);
  }

  .hero-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:110px;
    padding:0 18px 8px;
    z-index:8;
    pointer-events:none;
  }
  .hero-chip{
    display:inline-flex;
    align-items:center;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(17,17,17,0.7);
    color:#f8f8f8;
    font-size:12px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-bottom:10px;
    backdrop-filter:blur(10px);
  }
  .hero-main-title{
    font-size:26px;
    line-height:1.2;
    font-weight:800;
    color:#fff;
    text-shadow:0 10px 30px rgba(0,0,0,0.55);
  }
  .hero-price{
    margin-top:6px;
    font-size:15px;
    font-weight:600;
    color:#f8f8f8;
    opacity:.92;
    text-shadow:0 6px 18px rgba(0,0,0,0.6);
  }

  .hero-scroll{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:26px;
    z-index:9;
    pointer-events:none;
    font-size:12px;
    color:#f5f5f5;
    display:flex;
    align-items:center;
    gap:8px;
    opacity:.9;
  }
  .hero-scroll::before{
    content:"";
    width:26px;
    height:26px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.6);
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .hero-scroll::after{
    content:"";
    position:absolute;
    width:2px;
    height:8px;
    border-radius:999px;
    background:#fff;
    top:-4px;
    left:50%;
    transform:translateX(-50%);
    animation:scrollDot 1.4s infinite ease-in-out;
  }
  @keyframes scrollDot{
    0%{transform:translate(-50%,0);opacity:1;}
    70%{transform:translate(-50%,10px);opacity:0;}
    100%{transform:translate(-50%,0);opacity:0;}
  }

  /* ========== DETAILS ========== */
  .details{
    position:absolute;
    top:100vh;
    left:0;
    width:100%;
    background:#fff;
    z-index:5;
    padding:20px 20px 220px;
    border-radius:22px 22px 0 0;
    opacity:0;
    transform:translateY(40px) scale(.98);
  }
  .details-gallery{
    width:100%;
    height:260px;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:18px;
  }
  .detailsSwiper{width:100%;height:100%;touch-action:pan-y;}
  .detailsSwiper .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;}

  h1{font-size:28px;font-weight:800;margin-bottom:6px;opacity:0;transform:translateY(26px);}
  .tag{color:#777;font-size:15px;margin-bottom:12px;opacity:0;transform:translateY(26px);}
  .meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
  .pill{
    background:#EFEFEA;
    padding:7px 12px;
    border-radius:999px;
    font-size:13px;
    opacity:0;
    transform:translateY(26px);
  }

  .section{
    background:#FAFAF6;
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:10px;
    transition:background .32s ease,box-shadow .32s ease,transform .22s ease;
    cursor:pointer;
    opacity:0;
    transform:translateY(26px);
  }
  .section:active{transform:scale(.98);}
  .section.open{
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,0.04);
  }
  .head{display:flex;justify-content:space-between;align-items:center;font-weight:700;pointer-events:none;}
  .icon{font-size:18px;transition:transform .35s,color .35s;}
  .section.open .icon{transform:rotate(180deg);color:#999;}
  .body{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .4s ease,opacity .3s ease;
  }
  .section.open .body{opacity:1;}
  .body ul{padding-left:18px;margin-top:8px;}
  .body li{margin-bottom:4px;font-size:14px;color:#444;}

  .book-btn{
    position:fixed;
    left:16px;
    right:16px;
    bottom:20px;
    height:56px;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:17px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:40;
    opacity:0;
    transform:translateY(28px);
    transition:transform .24s ease,box-shadow .24s ease,opacity .24s ease;
    box-shadow:0 8px 24px rgba(0,0,0,0.28);
  }
  .book-btn:active{
    transform:translateY(28px) scale(.96);
    box-shadow:0 5px 16px rgba(0,0,0,0.32);
  }

  .details-pages .swiper-pagination-bullet{background:rgba(255,255,255,.45);}
  .details-pages .swiper-pagination-bullet-active{background:#fff;width:18px;border-radius:8px;}

  /* ========== HIDDEN BOOKING WIZARD (Mode A: replace page) ========== */
  .booking-wrap{
    position:fixed;
    inset:0;
    z-index:60;
    background:#f6fafc;
    display:none;
    overflow:hidden;
  }

  .app-wrap{position:relative;height:100%;width:100%;}
  .topbar{
    position:fixed;top:0;left:0;right:0;z-index:80;
    background:white;padding:14px 18px 12px;
    display:flex;justify-content:space-between;align-items:center;
    border-bottom:1px solid #e5e5e5;
  }
  .topbar-main{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .top-title{font-size:18px;font-weight:700;color:#111}
  .top-step{font-size:14px;color:#6b6b6b}

  .top-nav{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .top-btn{
    padding:6px 12px;
    border-radius:999px;
    border:none;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    background:#f2f4f6;
    color:#333;
  }
  .top-btn.primary{
    background:#0073c8;
    color:#fff;
  }

  .booking-swiper{height:100%;padding-top:70px;}
  .booking-swiper .swiper-slide{
    height:100%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:140px;
    padding-top:40px;
  }
  .slide-inner{padding:30px 22px 40px;display:flex;flex-direction:column;gap:20px;}

  .card{
    background:#ffffffee;
    border-radius:18px;
    padding:18px;
    box-shadow:0 6px 16px rgba(0,0,0,.04);
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .label{font-size:15px;font-weight:600;color:#111;margin-bottom:4px}
  .input{
    background:#f1f4f6;
    padding:12px 14px;
    border-radius:12px;
    border:none;
    outline:none;
    font-size:16px;
  }

  .row{
    background:#f1f4f6;
    border-radius:12px;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .counter{display:flex;align-items:center;gap:12px}
  .circle-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    background:white;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
  }
  .num{font-size:18px;font-weight:700;width:34px;text-align:center}

  .chips{display:flex;flex-wrap:wrap;gap:10px}
  .chip{
    padding:8px 12px;
    border-radius:999px;
    background:#eef3f6;
    font-size:14px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .chip.on{
    background:#d0e7ff;
    color:#0073c8;
    transform:scale(1.02);
    box-shadow:none;
  }

  .bottom{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:85;
    padding:14px 22px;
    background:white;
    border-top:1px solid #e6e6e6;
    display:flex;
    justify-content:space-between;
  }
  .btn{
    padding:12px 18px;
    border-radius:12px;
    border:none;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
  }
  .prev{background:#f1f4f6;color:#333}
  .next{background:#0073c8;color:white}

  .review-card{
    background:white;
    border-radius:18px;
    padding:18px;
    box-shadow:0 6px 16px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .rev-title{font-size:20px;font-weight:800;text-align:center}
  .rev-row{display:flex;align-items:center;gap:12px}
  .rev-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    background:#eef3f6;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
  }
  .rev-label{font-size:14px;color:#6b6b6b}
  .rev-value{font-size:16px;font-weight:600;color:#111}

  .confirm-box{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:86;
    padding:18px 22px 20px;
    background:white;
    border-top:1px solid #e5e5e6;
    display:none;
  }
  .price-line{font-size:18px;font-weight:800;margin-bottom:6px}
  .note{font-size:13px;color:#6b6b6b;margin-bottom:10px}
  .confirm-btn{
    width:100%;
    padding:12px;
    border-radius:12px;
    border:none;
    background:#0073c8;
    color:white;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
  }

  .mini-price{
    margin-top:8px;
    font-size:13px;
    color:#555;
    font-weight:600;
  }

  .hidden{display:none}