/* components.css — navbar, footer, cart, wizard, modals (shared) */
/* ════ NAVIGATION ════ */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:900;
  width:100%;max-width:100vw;box-sizing:border-box;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5%;
  transition:background .35s,box-shadow .35s;
}
#navbar.solid{background:rgba(4,40,58,.97);box-shadow:0 2px 24px rgba(0,0,0,.22);backdrop-filter:blur(16px)}
#navbar.light-mode{background:rgba(255,255,255,.98);box-shadow:var(--shadow-sm)}
#navbar.light-mode .nav-link{color:var(--gray-5)}
#navbar.light-mode .nav-link:hover{color:var(--sea)}
#navbar.light-mode .logo-text{color:var(--deep)}
#navbar.light-mode .logo-text span{color:var(--sea)}
#navbar.light-mode .hamburger span{background:var(--ink)!important}
.logo{display:flex;align-items:center;gap:.75rem;cursor:pointer;text-decoration:none}
.logo-icon{
  width:44px;height:44px;flex-shrink:0;
  background:linear-gradient(135deg,var(--sea),var(--teal));
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;box-shadow:0 4px 14px rgba(0,196,212,.35);
  overflow:hidden;
}
.logo-icon img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.logo-icon.has-img{background:transparent;box-shadow:none}
.logo-text{
  font-family:var(--ff-display);font-size:1.35rem;font-weight:700;
  color:var(--white);letter-spacing:.1px;line-height:1.1;
}
.logo-text span{color:var(--teal);display:block;font-size:.95rem;font-weight:600;letter-spacing:.3px}
#navbar.light-mode .logo-text{color:var(--deep)}
.nav-menu{display:flex;align-items:center;gap:.15rem}
.nav-link{padding:.5rem 1rem;border-radius:8px;font-size:.87rem;font-weight:500;color:rgba(255,255,255,.82);transition:var(--transition);cursor:pointer}
.nav-link:hover{color:var(--teal);background:rgba(255,255,255,.07)}
.nav-lang-btn{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem .85rem;border-radius:8px;border:1.5px solid rgba(255,255,255,.25);
  background:transparent;color:rgba(255,255,255,.82);
  font-size:.82rem;font-weight:600;margin-left:.3rem;
  transition:var(--transition);cursor:pointer;
}
.nav-lang-btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,196,212,.08)}
#navbar.light-mode .nav-lang-btn{border-color:var(--gray-2);color:var(--gray-5)}
#navbar.light-mode .nav-lang-btn:hover{border-color:var(--sea);color:var(--sea)}
.nav-book{
  background:var(--coral);color:var(--white);
  padding:.55rem 1.5rem;border-radius:50px;
  font-size:.87rem;font-weight:700;margin-left:.8rem;border:none;
  transition:var(--transition);
  box-shadow:0 4px 16px rgba(224,92,56,.35);
}
.nav-book:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(224,92,56,.48);background:#cb4f2a}
.nav-divider{width:1px;height:20px;background:rgba(255,255,255,.15);margin:0 .3rem}
#navbar.light-mode .nav-divider{background:var(--gray-2)}
/* Cart button in navbar */
.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;transition:var(--transition);flex-shrink:0}
.nav-cart svg{width:21px;height:21px}
.nav-cart:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
#navbar.light-mode .nav-cart{border-color:var(--gray-2);color:var(--ink)}
#navbar.light-mode .nav-cart:hover{background:var(--gray-1)}
.nav-cart.mobile{width:40px;height:40px}
.nav-cart-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:50px;background:var(--coral);color:#fff;font-size:.68rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(224,92,56,.5);border:2px solid var(--deep)}
#navbar.light-mode .nav-cart-badge{border-color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:.5rem;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:.3s}
#navbar.light-mode .hamburger span{background:var(--ink)}
.nav-right-mobile{display:none;align-items:center;gap:.6rem}
.mobile-nav{
  display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:899;
  background:rgba(4,40,58,.99);backdrop-filter:blur(24px);
  flex-direction:column;padding:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav-section{padding:1.2rem 5% .6rem;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-link{
  display:block;padding:.85rem 1rem;
  color:rgba(255,255,255,.82);font-size:.95rem;font-weight:500;
  border-radius:10px;cursor:pointer;transition:background .2s;
  letter-spacing:.01em;
}
.mobile-link:hover{background:rgba(255,255,255,.07);color:var(--teal)}
.mobile-nav-footer{padding:1.2rem 5% 1.8rem;display:flex;flex-direction:column;gap:1rem}
.mobile-book-btn{
  width:100%;padding:.9rem 1.5rem;border-radius:50px;
  background:var(--coral);color:#fff;border:none;
  font-size:.95rem;font-weight:700;cursor:pointer;
  transition:var(--transition);letter-spacing:.02em;
}
.mobile-book-btn:hover{background:#cb4f2a}
.mobile-lang-row{display:flex;gap:.6rem}
.mobile-lang-btn{
  flex:1;padding:.55rem;border-radius:8px;border:1.5px solid rgba(255,255,255,.2);
  background:transparent;color:rgba(255,255,255,.7);font-size:.85rem;font-weight:600;
  cursor:pointer;transition:var(--transition);
}
.mobile-lang-btn.active{background:var(--teal);border-color:var(--teal);color:var(--ink)}


/* ════ FOOTER ════ */
.footer-wrap{background:var(--ink);color:rgba(255,255,255,.55);padding:5.5rem 0 2rem}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:3rem;max-width:1200px;margin:0 auto;padding:0 5% 3rem}
.footer-brand p{font-size:.84rem;color:rgba(255,255,255,.48);line-height:1.72;margin-top:.6rem}
.footer-col h5{color:var(--white);font-size:.83rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:1rem}
.footer-col ul li{margin-bottom:.5rem}
.footer-col ul li a{font-size:.84rem;color:rgba(255,255,255,.48);cursor:pointer;transition:color .2s}
.footer-col ul li a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.08);padding:2rem 5% 0;max-width:1200px;margin:0 auto;font-size:.79rem;color:rgba(255,255,255,.3);flex-wrap:wrap;gap:1rem}
.footer-bottom-links{display:flex;gap:1.5rem}
.footer-bottom-links a{color:rgba(255,255,255,.3);cursor:pointer;transition:color .2s}
.footer-bottom-links a:hover{color:var(--teal)}
.footer-socials{display:flex;gap:.6rem;margin-top:1.1rem}
.soc{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:.82rem;cursor:pointer;transition:var(--transition)}
.soc:hover{background:var(--teal);color:var(--ink)}


/* ════ CATEGORY SECTION HEADERS ════ */
.cat-section-title{display:flex;align-items:center;gap:1rem;margin:3rem 0 1.5rem;padding-bottom:.8rem;border-bottom:2px solid var(--gray-2)}
.cat-section-title h3{font-family:var(--ff-display);font-size:1.55rem;font-weight:700;color:var(--ink)}
.cat-section-title .cat-icon{font-size:1.5rem}
.cat-section-title .cat-count{font-size:.8rem;color:var(--gray-3);background:var(--gray-1);padding:.2rem .75rem;border-radius:50px}


/* ════ WHATSAPP FLOAT BTN ════ */
.wa-float{
  position:fixed;bottom:2rem;right:2rem;z-index:800;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;box-shadow:0 8px 24px rgba(37,211,102,.4);
  cursor:pointer;transition:var(--transition);text-decoration:none;border:none;
}
.wa-float:hover{transform:scale(1.12);box-shadow:0 12px 36px rgba(37,211,102,.5)}


/* ════ SHOPPING CART (Amazon-style) ════ */
.cart-empty{text-align:center;padding:2.5rem 1rem;color:var(--gray-4)}
.cart-empty .ce-ico{width:72px;height:72px;border-radius:50%;background:var(--gray-1);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;color:var(--gray-3)}
.cart-empty .ce-ico svg{width:34px;height:34px}
.cart-empty h3{font-family:var(--ff-display);font-size:1.3rem;color:var(--ink);margin-bottom:.4rem}
.cart-empty p{font-size:.9rem;margin-bottom:1.4rem}
.cart-item{display:flex;gap:1rem;background:var(--white);border:1.5px solid var(--gray-2);border-radius:var(--radius);padding:1rem;margin-bottom:1rem;position:relative;transition:var(--transition)}
.cart-item:hover{border-color:var(--sea);box-shadow:var(--shadow-sm)}
.cart-item-thumb{width:96px;height:96px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--gray-1)}
.cart-item-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.cart-item-main{flex:1;min-width:0;display:flex;flex-direction:column}
.cart-item-name{font-family:var(--ff-display);font-size:1.08rem;font-weight:700;color:var(--ink);line-height:1.25;padding-right:1.8rem}
.cart-item-pp{font-size:.82rem;color:var(--gray-4);margin:.15rem 0 .7rem}
.cart-item-controls{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:auto}
.cart-date{border:1.5px solid var(--gray-2);border-radius:10px;padding:.45rem .6rem;font-size:.82rem;font-family:var(--ff-body);color:var(--ink);background:var(--white)}
.cart-date:focus{outline:none;border-color:var(--sea)}
.qty-stepper{display:inline-flex;align-items:center;border:1.5px solid var(--gray-2);border-radius:50px;overflow:hidden}
.qty-stepper button{width:34px;height:34px;border:none;background:var(--gray-1);color:var(--ocean);font-size:1.1rem;font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center}
.qty-stepper button:hover{background:var(--sea);color:#fff}
.qty-stepper .qty-val{min-width:40px;text-align:center;font-weight:700;color:var(--ink);font-size:.92rem}
.qty-stepper.is-group .qty-val{font-size:.78rem;padding:0 .5rem}
.cart-item-line{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex-shrink:0}
.cart-item-subtotal{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--ocean);white-space:nowrap}
.cart-item-remove{position:absolute;top:.7rem;right:.7rem;width:30px;height:30px;border-radius:50%;border:none;background:var(--gray-1);color:var(--gray-4);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.cart-item-remove:hover{background:#fde8e2;color:var(--coral)}
.cart-totals{background:var(--white);border-radius:var(--radius);padding:1.2rem 1.4rem;margin-top:.3rem;border:1.5px solid var(--gray-2)}
.cart-totals .ct-line{display:flex;justify-content:space-between;font-size:.9rem;color:var(--gray-5);padding:.3rem 0}
.cart-totals .ct-line.total{border-top:1.5px solid var(--gray-2);margin-top:.5rem;padding-top:.7rem;font-family:var(--ff-display);font-size:1.3rem;font-weight:700;color:var(--ink)}
.cart-totals .ct-line.total span:last-child{color:var(--ocean)}
.pay-items-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.2rem}
.pay-item-row{display:flex;align-items:center;gap:.8rem;background:linear-gradient(135deg,#f0fbfd,#e6f7fa);border-radius:12px;padding:.7rem .85rem}
.pay-item-row .pir-thumb{width:46px;height:46px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--gray-1)}
.pay-item-row .pir-thumb img{width:100%;height:100%;object-fit:cover}
.pay-item-row .pir-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.pay-item-row .pir-info{flex:1;min-width:0}
.pay-item-row .pir-name{font-weight:700;color:var(--ink);font-size:.88rem;line-height:1.2}
.pay-item-row .pir-meta{font-size:.74rem;color:var(--gray-4);margin-top:.1rem}
.pay-item-row .pir-amt{font-weight:700;color:var(--ocean);font-size:.95rem;white-space:nowrap}
@media(max-width:560px){
  .cart-item{flex-wrap:wrap}
  .cart-item-thumb{width:68px;height:68px}
  .cart-item-line{width:100%;flex-direction:row;align-items:center;border-top:1px dashed var(--gray-2);padding-top:.7rem;margin-top:.2rem}
}


.tour-modal{display:none;position:fixed;inset:0;z-index:9998;background:rgba(4,40,58,.55);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:1.5rem}
.tour-modal.open{display:flex;animation:fadeIn .25s ease}
.tour-modal-inner{background:var(--gray-1);width:100%;max-width:860px;max-height:86vh;border-radius:24px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .32s cubic-bezier(.22,1,.36,1)}
@keyframes slideUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tour-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 1.5rem 1rem;background:var(--white);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--gray-2)}
.tour-modal-head h3{font-family:var(--ff-display);font-size:1.4rem;font-weight:700;color:var(--ink);margin-top:.15rem}
.tour-modal-close{width:40px;height:40px;border-radius:50%;border:none;background:var(--gray-1);color:var(--gray-5);font-size:1.1rem;cursor:pointer;flex-shrink:0;transition:var(--transition)}
.tour-modal-close:hover{background:var(--gray-2);color:var(--ink)}
.tour-pick-tabs{display:flex;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;padding:1rem 1.5rem .4rem;background:var(--white);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tour-pick-tabs::-webkit-scrollbar{display:none}
.tpt-btn{padding:.45rem 1.05rem;border-radius:50px;border:1.5px solid var(--gray-2);background:var(--white);font-size:.8rem;font-weight:600;color:var(--gray-4);cursor:pointer;transition:var(--transition);white-space:nowrap;flex-shrink:0}
.tpt-btn.active{background:var(--sea);color:#fff;border-color:var(--sea);box-shadow:0 3px 12px rgba(26,143,168,.3)}
.tour-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:1.2rem 1.5rem 1.8rem;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tour-pick-card{border:2.5px solid var(--gray-2);border-radius:var(--radius);padding:.9rem;cursor:pointer;transition:var(--transition);background:var(--white);position:relative}
.tour-pick-card:hover{border-color:var(--sea);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.tour-pick-card.selected{border-color:var(--sea);background:#f0fbfd;box-shadow:0 0 0 4px rgba(26,143,168,.12)}
.tpc-check{position:absolute;top:.7rem;right:.7rem;width:24px;height:24px;border-radius:50%;background:var(--sea);color:#fff;display:none;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;z-index:2;box-shadow:0 2px 8px rgba(26,143,168,.4)}
.tour-pick-card.selected .tpc-check{display:flex}
.tpc-img{height:96px;border-radius:10px;overflow:hidden;margin-bottom:.7rem;background:var(--gray-1)}
.tpc-img img{width:100%;height:100%;object-fit:cover}
.tpc-emoji-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.8rem}
.tpc-badge{display:inline-block;font-size:.64rem;font-weight:700;padding:.18rem .55rem;border-radius:50px;margin-bottom:.35rem}
.tpc-name{font-family:var(--ff-display);font-size:.98rem;font-weight:700;color:var(--ink);margin-bottom:.25rem;line-height:1.25}
.tpc-price{font-family:var(--ff-display);font-size:1.18rem;font-weight:700;color:var(--ocean)}
.tpc-price small{font-family:var(--ff-body);font-size:.7rem;color:var(--gray-3);font-weight:400}
/* Date & guests row */
.wiz-details-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.5rem;background:var(--white);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
/* Step 2 form */
.wiz-form-card{background:var(--white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-sm)}

/* ════ CHECKOUT WIZARD ════ */
.checkout-wizard{max-width:900px;margin:0 auto;padding:calc(var(--nav-h) + 2rem) 5% 4rem}
.wizard-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2.5rem;background:var(--white);border-radius:var(--radius-lg);padding:1rem 1.5rem;box-shadow:var(--shadow-sm)}
.wiz-step{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-radius:10px;transition:var(--transition);flex:1;justify-content:center}
.wiz-step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:800;flex-shrink:0;background:var(--gray-2);color:var(--gray-4);transition:var(--transition)}
.wiz-step-label{font-size:.82rem;font-weight:600;color:var(--gray-3);transition:var(--transition)}
.wiz-step.active .wiz-step-num{background:var(--sea);color:#fff;box-shadow:0 4px 14px rgba(26,143,168,.35)}
.wiz-step.active .wiz-step-label{color:var(--sea)}
.wiz-step.done .wiz-step-num{background:var(--moss);color:#fff}
.wiz-step.done .wiz-step-label{color:var(--moss)}
.wiz-sep{width:40px;height:2px;background:var(--gray-2);border-radius:2px;flex-shrink:0}
.wiz-sep.done{background:var(--moss)}
.wizard-panel{display:none;animation:fadeUp .35s ease both}
.wizard-panel.active{display:block}

/* ════ COMPACT SELECTED-TOUR ROW (step 1) ════ */
.selected-tour-row{display:flex;gap:1rem;align-items:stretch;margin-bottom:.5rem;flex-wrap:wrap}
.sel-tour-card{flex:1;min-width:0;display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,#f0fbfd,#e3f6f9);border:2px solid var(--sea);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:0 4px 18px rgba(26,143,168,.14);position:relative;overflow:hidden}
.sel-tour-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--sea)}
.sel-tour-thumb{width:74px;height:74px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--gray-1);box-shadow:0 3px 10px rgba(0,0,0,.12)}
.sel-tour-thumb img{width:100%;height:100%;object-fit:cover}
.sel-tour-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2rem}
.sel-tour-info{flex:1;min-width:0}
.sel-tour-badge{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:.15rem .5rem;border-radius:50px;margin-bottom:.25rem}
.sel-tour-name{font-family:var(--ff-display);font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-tour-price{font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--ocean)}
.sel-tour-price small{font-family:var(--ff-body);font-size:.7rem;color:var(--gray-3);font-weight:400}
.sel-tour-change{align-self:flex-start;margin-left:.5rem;background:transparent;border:none;color:var(--sea);font-weight:700;font-size:.8rem;cursor:pointer;padding:.2rem .4rem;white-space:nowrap}
.sel-tour-change:hover{text-decoration:underline}
.add-tour-btn{flex-shrink:0;min-width:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;background:var(--white);border:2.5px dashed var(--sea);border-radius:var(--radius);color:var(--sea);font-weight:700;font-size:.85rem;cursor:pointer;transition:var(--transition);padding:1rem}
.add-tour-btn:hover{background:#f0fbfd;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.add-tour-btn .plus{font-size:1.7rem;line-height:1;font-weight:300}
/* Empty prompt (no tour chosen yet) */
.pick-prompt{flex:1;display:flex;align-items:center;gap:1.1rem;background:var(--white);border:2.5px dashed var(--gray-2);border-radius:var(--radius);padding:1.4rem 1.3rem;cursor:pointer;transition:var(--transition)}
.pick-prompt:hover{border-color:var(--sea);background:#f7fdfe}
.pick-prompt .pp-ico{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;font-weight:300}
.pick-prompt .pp-txt strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.15rem}
.pick-prompt .pp-txt span{color:var(--gray-4);font-size:.83rem}


/* ════ STEP 3 — PREMIUM PAYMENT CARD ════ */
.payment-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:0 18px 50px rgba(4,40,58,.12);overflow:hidden}
.pay-hero{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,var(--deep),var(--ocean));padding:1.7rem 2rem}
.pay-hero-ico{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;backdrop-filter:blur(4px)}
.pay-hero-title{font-family:var(--ff-display);font-size:clamp(1.4rem,4vw,1.85rem);color:#fff;font-weight:700;line-height:1.1;margin-top:.2rem}
.pay-body{padding:1.8rem 2rem 2rem}
.pay-tour-banner{display:flex;align-items:center;gap:.9rem;background:linear-gradient(135deg,#f0fbfd,#e6f7fa);border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:1.4rem}
.pay-tour-banner .ptb-thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--gray-1)}
.pay-tour-banner .ptb-thumb img{width:100%;height:100%;object-fit:cover}
.pay-tour-banner .ptb-thumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.pay-tour-banner .ptb-name{font-family:var(--ff-display);font-weight:700;color:var(--ink);font-size:1.05rem;line-height:1.2}
.pay-tour-banner .ptb-meta{font-size:.8rem;color:var(--gray-4);margin-top:.15rem}
.pay-summary-box{background:var(--gray-1);border-radius:var(--radius);padding:1.4rem;margin-bottom:1.4rem;border:1px solid var(--gray-2)}
.pay-line{display:flex;justify-content:space-between;font-size:.9rem;color:var(--gray-5);padding:.4rem 0}
.pay-line.total{font-weight:800;color:var(--ink);font-size:1.35rem;font-family:var(--ff-display);border-top:2px dashed var(--gray-2);padding-top:.85rem;margin-top:.5rem}
.pay-line.total span:last-child{color:var(--ocean)}
.pay-recap{background:var(--foam);border-radius:var(--radius);padding:1rem 1.3rem;margin-bottom:1.4rem;font-size:.87rem;color:var(--gray-5);line-height:1.75}
.pay-terms{display:flex;gap:.9rem;align-items:flex-start;font-size:.87rem;color:var(--gray-5);cursor:pointer;padding:1rem;background:var(--gray-1);border-radius:var(--radius-sm);border:1.5px solid var(--gray-2);margin-bottom:1.5rem;transition:var(--transition)}
.pay-terms:hover{border-color:var(--sea)}
.pay-terms input[type="checkbox"]{margin-top:.15rem;width:20px;height:20px;flex-shrink:0;accent-color:var(--sea);cursor:pointer}
.pay-link{color:var(--sea);cursor:pointer;font-weight:600}
.pay-link:hover{text-decoration:underline}
.pay-divider{text-align:center;color:var(--gray-4);font-size:.78rem;font-weight:600;letter-spacing:.3px;margin:1.3rem 0 1.1rem;display:flex;align-items:center;gap:.8rem}
.pay-divider::before,.pay-divider::after{content:'';flex:1;height:1px;background:var(--gray-2)}
.pay-methods-note{text-align:center;margin-top:1.1rem;font-size:.78rem;color:var(--gray-4)}
.pay-card-icons{display:flex;justify-content:center;gap:.45rem;margin-top:.55rem;flex-wrap:wrap}
.pay-cc{font-size:.66rem;font-weight:800;letter-spacing:.5px;padding:.32rem .6rem;border-radius:7px;background:var(--white);border:1px solid var(--gray-2);color:var(--gray-5);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.pay-cc.visa{color:#1a1f71;border-color:#1a1f71}
.pay-cc.mc{color:#eb001b;border-color:#ff5f00;letter-spacing:2px}
.pay-cc.amex{color:#2671b9;border-color:#2671b9}
.pay-cc.pp{color:#003087;border-color:#0070ba}
.pay-security{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem}
.pay-badge{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--gray-4);background:var(--gray-1);padding:.4rem .85rem;border-radius:50px;font-weight:600}
.pay-redirect-note{font-size:.72rem;color:var(--gray-3);text-align:center;margin-top:.9rem;line-height:1.6}
/* Wizard nav */
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;gap:1rem}
.wiz-btn-back{background:transparent;border:2px solid var(--gray-2);color:var(--gray-5);padding:.8rem 1.8rem;border-radius:50px;font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);font-family:var(--ff-body)}
.wiz-btn-back:hover{border-color:var(--gray-4);color:var(--ink)}
.wiz-btn-next{background:var(--sea);color:#fff;padding:.85rem 2.2rem;border-radius:50px;font-size:.95rem;font-weight:700;border:none;cursor:pointer;transition:var(--transition);font-family:var(--ff-body);box-shadow:0 4px 16px rgba(26,143,168,.3);display:flex;align-items:center;gap:.5rem}
.wiz-btn-next:hover{background:var(--ocean);transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,143,168,.45)}
.wiz-section-label{font-size:.75rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray-4);margin-bottom:1.2rem}
@media(max-width:680px){
  .checkout-wizard{padding:calc(var(--nav-h) + 1.2rem) 4% 4rem}
  .tour-modal{align-items:flex-end;padding:0}
  .tour-modal-inner{max-height:92vh;border-radius:24px 24px 0 0}
  .tour-modal-head{border-radius:24px 24px 0 0}
  .tour-picker-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.7rem;padding:1rem .9rem 1.6rem}
  .tour-modal-head{padding:1.1rem 1.1rem .8rem}
  .tour-pick-tabs{padding:.8rem 1.1rem .3rem}
  .wiz-details-row{grid-template-columns:1fr}
  .wizard-steps{padding:.6rem .8rem}
  .wiz-step-label{display:none}
  .wiz-sep{width:16px}
  .wiz-step{padding:.4rem .4rem;flex:none}
  .wiz-form-card{padding:1.3rem}
  .pay-hero{padding:1.3rem 1.3rem}
  .pay-body{padding:1.3rem 1.3rem 1.6rem}
  .wiz-btn-next,.wiz-btn-back{padding:.75rem 1.4rem;font-size:.88rem}
  .selected-tour-row{flex-direction:column}
  .add-tour-btn{flex-direction:row;min-width:0;width:100%;padding:.85rem;gap:.6rem}
  .add-tour-btn .plus{font-size:1.3rem}
  .sel-tour-name{white-space:normal}
}
@media(max-width:360px){
  .tour-picker-grid{grid-template-columns:1fr;gap:.8rem}
}


/* ════════════════════════════════════════
   NEW COMPONENT STYLES (image-based)
════════════════════════════════════════ */
/* Hero visual showcase (replaces floating text cards) */
.hero-visual{position:relative;width:100%;aspect-ratio:1/1;max-width:460px;margin-left:auto}
.hero-visual-main{position:absolute;inset:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35);background:var(--gray-1)}
.hero-visual-badge{position:absolute;top:-14px;left:-14px;z-index:3;background:var(--white);border-radius:16px;padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem;box-shadow:0 14px 36px rgba(0,0,0,.25)}
.hero-visual-badge strong{display:block;font-family:var(--ff-display);font-size:1rem;color:var(--ink);line-height:1}
.hero-visual-badge span{font-size:.68rem;color:var(--gray-4)}
.hero-visual-mini{position:absolute;width:42%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.3);background:var(--gray-1)}
.hero-visual-mini-1{bottom:-18px;right:-16px;z-index:4;animation:floaty 6s ease-in-out infinite}
.hero-visual-mini-2{top:18%;right:-28px;width:34%;z-index:2;animation:floaty 7s ease-in-out infinite .8s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Tour detail book card thumbnail */
.td-book-thumb{width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin-bottom:1.2rem;background:var(--gray-1);position:relative}

/* Selected-tour thumb / pay banner thumb / testimonial avatar must clip placeholders */
.sel-tour-thumb,.ptb-thumb,.tcard-avatar{position:relative}
.sel-tour-thumb .imgph,.ptb-thumb .imgph,.tcard-avatar .imgph{position:absolute;inset:0}
.tcard-avatar{overflow:hidden;background:var(--gray-1)}
.tcard-avatar .imgph::before{width:18px;height:18px}
.tcard-avatar .imgph .imgph-name{display:none}

/* Tour picker card image clip */
.tpc-img{position:relative}
.tpc-img .imgph{position:absolute;inset:0}

/* Footer socials as icon links */
.footer-socials .soc{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);cursor:pointer;transition:var(--transition);font-size:1.05rem;text-decoration:none}
.footer-socials .soc:hover{background:var(--teal);color:var(--ink);transform:translateY(-2px)}
.footer-contact-col ul li a{display:flex;align-items:flex-start;gap:.55rem}
.footer-contact-col .ico{margin-top:.1rem;flex-shrink:0;opacity:.8}

/* Icon sizing inside feature / value / contact circles */
.feat-ico .ico,.value-ico .ico,.cdetail-ico .ico,.about-check .ico{font-size:1.4rem}
.about-check .ico{font-size:.85rem}

/* Lightbox close as svg fits */
.lightbox-close .ico,.lightbox-arrow .ico{font-size:1.1rem}


/* ════ MOBILE: header & footer solidity ════ */
@media(max-width:680px){
  :root{--nav-h:62px}
  #navbar{padding:0 4%}
  #navbar:not(.light-mode):not(.solid){background:rgba(4,40,58,.55);backdrop-filter:blur(10px)}
  .logo-icon{width:38px;height:38px}
  .logo-text{font-size:1.12rem}
  .logo-text span{font-size:.72rem}
  .hero-visual{display:none}
  /* Footer: clean stacked, centered brand, 2-col link groups */
  .footer-inner{grid-template-columns:1fr 1fr!important;gap:1.8rem 1.2rem!important;text-align:left}
  .footer-brand{grid-column:1/-1;text-align:center}
  .footer-socials{justify-content:center}
  .footer-contact-col{grid-column:1/-1}
  .footer-col h5{font-size:.82rem}
  .footer-bottom{flex-direction:column;gap:.7rem;text-align:center}
}
@media(max-width:400px){
  .footer-inner{grid-template-columns:1fr!important;text-align:center}
  .footer-contact-col ul li a{justify-content:center}
  .footer-socials{justify-content:center}
}

/* ════ RESPONSIVE ════ */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-right{display:none}
  .hero-desc{max-width:100%}
  .about-home,.about-story{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
  .booking-inner{grid-template-columns:1fr 360px}
  .td-inner{grid-template-columns:1fr}
  .features-inner{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .tours-home-grid{grid-template-columns:repeat(2,1fr)}
  .tours-full-grid{grid-template-columns:repeat(2,1fr)}
  .tes-grid{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .awards-strip{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2.2rem}
  .td-book-card{position:static}
  .order-card{position:static}
}
@media(max-width:680px){
  .nav-menu{display:none}
  .nav-right-mobile{display:flex}
  .hamburger{display:flex}
  .features-inner{grid-template-columns:1fr}
  .tours-home-grid{grid-template-columns:1fr}
  .tours-full-grid{grid-template-columns:1fr}
  .tes-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .values-grid{grid-template-columns:1fr}
  .awards-strip{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .cta-banner{padding:2.8rem 1.8rem}
  .hero-trust{gap:.8rem}
  .trust-divider{display:none}
  .td-include-grid{grid-template-columns:1fr}
  .td-detail-sections .tcard-grid{grid-template-columns:1fr!important}
  .form-row{grid-template-columns:1fr}
  .wa-float{bottom:1.5rem;right:1.5rem}
  /* Booking form full-width on mobile */
  .booking-form-card{padding:1.6rem 1.1rem}
  .booking-page{padding-bottom:6rem!important}
  #order-side{display:none}
  .mobile-payment-section{display:block!important}
  .order-mobile-bar{display:none!important}
  .bk-steps .bk-step span:last-child{display:none}
  .booking-inner{gap:0}
  /* Hero section padding fix */
  .hero-inner{padding:1.2rem 5%;padding-top:calc(var(--nav-h) + 1.5rem)}
  .hero-actions{justify-content:center}
  /* Tour detail card */
  .td-inner{padding:0 4%}
  .td-specs{gap:.8rem}
  .td-spec{padding:.7rem .9rem}
  /* Tours filter wrap */
  .tours-filter{border-radius:var(--radius-lg);padding:.5rem}
  .filter-btn{padding:.5rem .9rem;font-size:.82rem}
  /* Section padding reduction */
  .sec{padding:4rem 0}
  .sec-sm{padding:2.5rem 0}
  /* About badge positioning fix */
  .about-img-badge{left:.5rem;min-width:120px}
  /* CTA buttons full-width on mobile */
  .cta-btns{flex-direction:column;align-items:center}
  .cta-btns .btn{width:100%;max-width:320px;justify-content:center}
  /* Footer bottom stacked */
  .footer-bottom{flex-direction:column;text-align:center;gap:.6rem}
  .footer-bottom-links{justify-content:center;flex-wrap:wrap;gap:1rem}
  /* Team grid single on very small */
  .tcard{padding:1.6rem}
  /* Secure badges wrap better */
  .secure-badges{gap:.4rem}
  /* Toast full-width on mobile */
  .toast{left:1rem;right:1rem;transform:translateY(200%);width:auto}
  .toast.show{transform:translateY(0)}
}
@media(max-width:400px){
  .team-grid{grid-template-columns:1fr}
  .awards-strip{grid-template-columns:1fr}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-actions{flex-direction:column;align-items:center}
  .booking-form-card{padding:1.2rem 1rem}
  .logo-text{font-size:1.25rem}
}


/* ════ RESPONSIVE EXTRAS ════ */
@media(max-width:680px){
  .reviews-grid{grid-template-columns:1fr!important}
  .td-book-card{border-radius:var(--radius-lg)!important}
  .bk-steps{display:none}
  .order-card-body,.order-action-area{padding-left:1.4rem;padding-right:1.4rem}
  .order-card-header{padding:1.4rem}
  .transport-toggle{flex-wrap:wrap}
  .transport-toggle-price{width:100%;text-align:right;margin-top:.3rem}
  .booking-inner{grid-template-columns:1fr;padding-bottom:0}
  .booking-page{padding:calc(var(--nav-h) + 1.8rem) 0 2rem!important}
  .booking-form-card h2{font-size:1.6rem}
  .tfc-body{padding:1.3rem}
  .tfc-name{font-size:1.2rem}
  .hcf-card{padding:1.5rem}
  .tours-filter{overflow-x:auto;flex-wrap:nowrap;padding:.5rem;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .filter-btn{white-space:nowrap}
  /* ── Explore Our Tours: mobile optimization ── */
  .tours-hero{padding:calc(var(--nav-h) + 1.8rem) 0 2.4rem}
  .tours-hero h1{font-size:clamp(1.8rem,7vw,2.4rem);margin-bottom:.6rem}
  .tours-hero p{font-size:.92rem;padding:0 1rem}
  .tours-full-grid{grid-template-columns:repeat(2,1fr);gap:.9rem;margin-top:1.6rem}
  .tfc-img{height:140px}
  .tfc-body{padding:.9rem}
  .tfc-name{font-size:1rem;margin-bottom:.3rem}
  .tfc-desc{font-size:.78rem;line-height:1.5;margin-bottom:.8rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tfc-foot{padding-top:.8rem;flex-wrap:wrap;gap:.5rem}
  .tfc-price{font-size:1.2rem}
  .tfc-foot .btn{padding:.45rem .8rem!important;font-size:.75rem!important}
  .cat-section-title{margin:2rem 0 1rem;flex-wrap:wrap;gap:.5rem}
  .cat-section-title h3{font-size:1.15rem}
  .cat-section-title .cat-icon{font-size:1.2rem}
  .cat-section-title .cat-count{font-size:.7rem;padding:.15rem .55rem}
}
@media(max-width:400px){
  .booking-form-card{padding:1.2rem .9rem}
  .form-section-title{font-size:.76rem}
  .fs-num{width:22px;height:22px;font-size:.68rem}
}


/* ════════════════════════════════════════════════════
   Image utilities (shared by ALL pages, not only tours)
   — these make photos fill their container with cover.
════════════════════════════════════════════════════ */
.imgph{position:relative;width:100%;height:100%;background:repeating-linear-gradient(135deg,#e8edf0,#e8edf0 14px,#eef2f5 14px,#eef2f5 28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--gray-4);overflow:hidden}
.imgph::before{content:'';width:34px;height:34px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.8'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.8'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.5;flex-shrink:0}
.imgph .imgph-name{font-size:.66rem;font-weight:600;letter-spacing:.3px;padding:.2rem .6rem;background:rgba(255,255,255,.75);border-radius:50px;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.imgph.sm::before{width:22px;height:22px}
.imgph.sm .imgph-name{font-size:.58rem}
.imgph.round{border-radius:50%}
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.img-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* When a real <img> sits inside the placeholder name span, make sure it
   covers the whole frame (hero collage, cards, avatars, etc.) */
.imgph .imgph-name img.img-fill,.imgph-name > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ════════════════════════════════════════════════════
   FIX: imágenes siempre llenan su caja, SIN bordes blancos
   ════════════════════════════════════════════════════ */
.hero-visual-main img,.hero-visual-mini img,.about-img-main img,.thc-bg img,.td-book-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0
}
/* la caja de imagen del hero/about ya no muestra fondo si hay foto */
.hero-visual-main,.hero-visual-mini,.about-img-main,.thc-bg{background:var(--gray-1)}
img{border:0}


/* ══════════════════════════════════════════════════════════
   BARRA FIJA DE RESERVA (solo móvil) — aparece al hacer scroll
   Es lo que más sube las reservas en un sitio de turismo.
   ══════════════════════════════════════════════════════════ */
.mobile-cta-bar{display:none}

@media(max-width:760px){
  .mobile-cta-bar{
    display:flex;align-items:center;gap:.8rem;
    position:fixed;left:0;right:0;bottom:0;z-index:850;
    padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.93);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(4,40,58,.1);
    box-shadow:0 -8px 30px -12px rgba(4,40,58,.28);
    transform:translateY(120%);
    transition:transform .38s cubic-bezier(.16,1,.3,1);
    pointer-events:none
  }
  .mobile-cta-bar.show{transform:translateY(0);pointer-events:auto}

  .mcta-info{flex:1;min-width:0;line-height:1.25}
  .mcta-label{
    font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;
    color:var(--gray-4);font-weight:600
  }
  .mcta-price{
    font-size:1.02rem;font-weight:800;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .mcta-price span{font-size:.72rem;font-weight:500;color:var(--gray-4)}
  .mobile-cta-bar .btn{
    padding:.85rem 1.5rem;font-size:.86rem;border-radius:12px;
    white-space:nowrap;flex:0 0 auto
  }

  /* Subir el WhatsApp para que no lo tape la barra */
  .wa-float{
    bottom:calc(4.9rem + env(safe-area-inset-bottom,0px));
    right:1rem;width:48px;height:48px
  }
  /* Espacio al final para que la barra no tape el footer */
  body{padding-bottom:0}
  footer{padding-bottom:4.5rem}
}

/* ══ Formularios globales (antes solo en booking.css — el contacto se veía roto) ══ */
.fg{display:flex;flex-direction:column;margin-bottom:.95rem}
.fg label{font-size:.78rem;font-weight:600;color:var(--gray-5);margin-bottom:.4rem;letter-spacing:.3px}
.fg input,.fg select,.fg textarea{
  border:1.5px solid var(--gray-2);border-radius:var(--radius-sm);
  padding:.85rem 1rem;font-family:var(--ff-body);font-size:.93rem;
  color:var(--ink);transition:var(--transition);outline:none;background:var(--gray-1);
  -webkit-appearance:none;width:100%
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--sea);box-shadow:0 0 0 3px rgba(26,143,168,.1);background:var(--white)
}
.fg select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239fbcc1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.fg textarea{min-height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}