/* Chatbot styles */
.chat-launcher{
  position:fixed;
  right:18px;
  /* keep the launcher slightly lower visually so it doesn't overlap taller hero content */
  bottom:50px;
  z-index:1200;
}

.chat-launcher .chat-brand{display:flex;align-items:center;justify-content:center;margin-bottom:-45px;pointer-events:none}
.chat-launcher .chat-brand img{width:140px;max-width:48vw;height:auto;display:block;border-radius:10px;margin-top:0;position:relative;z-index:1190;opacity:0.98}
/* make sure the chat button sits above the logo */
.chat-launcher .chat-btn{position:relative;z-index:1205}

/* Minimal overlay fix: do NOT change logo position; just ensure button sits above it */
.chat-launcher .chat-brand{pointer-events:none}
.chat-launcher .chat-brand img{position:relative;z-index:100}
.chat-launcher .chat-btn{position:relative;z-index:200}
.chat-btn{
  /* width:64px;
  height:64px; */
  border-radius:20px;
  padding: 6px 15px;
  border:0;cursor:pointer;
  background:#FF8B13;color:#fff;
  display:flex;
  /* flex-direction: column; */
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  font-size:15px;
}
.chat-btn:focus{outline:2px solid rgba(217,83,83,0.3)}

.chat-panel{
  position:fixed;right:18px;top:18px;bottom:0;z-index:1250;
  width:400px;max-width:92vw;height:95vh;border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,0.2);
  background-color: #ADD8E6;
  /* background: linear-gradient(
  0deg,
  rgba(255, 255, 255, 1) 0%,
  rgba(173, 216, 230, 0.35) 100%
); */

  transform:translateY(0) translateX(8px) scale(1);
  opacity:0;
  pointer-events:none;
  transition:transform 260ms ease,opacity 240ms ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* font-family:inherit; */
}
.chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.chat-header{display:flex;align-items:center;justify-content:flex-end;padding:14px 16px;
  /* background:linear-gradient(90deg,#dff6ff,#cdeef9); */
  border-bottom:1px solid rgba(0,0,0,0.04);position:relative}
.chat-header .chat-title-inline{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:700;color:#0a3b56}
.chat-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer}

.chat-body{flex:1;position:relative;
  /* background:linear-gradient(180deg,#fff,#fff); */
  background: linear-gradient(
  0deg,
  rgba(255, 255, 255, 1) 0%,
  rgba(173, 216, 230, 0.35) 100%
);
  display:flex;
  flex-direction: column;
  align-items:center;justify-content:center;padding:8px}
.chat-track{display:flex;height:100%;width:100%;transition:transform 1000ms cubic-bezier(.2,.9,.2,1)}
.chatTitle-main{
  padding: 20px;
  text-align: center;
}
.chatTitle{
  font-size:24px;
  line-height: 36px;
  font-weight:600;
  margin-bottom:12px;
  text-align: center;
}

/* Mascot */
.chat-mascot{display:flex;align-items:center;justify-content:center;padding:0px}
.chat-mascot img{
  width:84px;
  /* height:84px; */
  object-fit:contain;
}

/* Search box */
.chat-search{display:flex;align-items:center;gap:8px;width:100%;padding:0px 16px;justify-content:center;position:relative}
.chat-search input{width:100%;padding:10px 44px 10px 14px;border-radius:28px;border:1px solid #e7e7e7;font-size:14px;box-sizing:border-box}
.chat-search .chat-mic{position:absolute;right:28px;background:transparent;border:0;font-size:18px;cursor:pointer;color:#FF8B13}

/* Ratings */
.chat-ratings{display:flex;gap:12px;align-items:center;padding:26px 16px;color:#555;font-size:13px}
.chat-ratings .rating{display:flex;align-items:center;gap:8px}
.chat-ratings .g{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1px solid #eee;color:#FF8B13;font-weight:700}

/* Carousel (horizontal card slides) */
.chat-carousel{padding:10px 10px 12px 10px}
.chat-track{display:flex;flex-direction:row;gap:12px;height:220px;width:100%;transition:transform 900ms cubic-bezier(.2,.9,.2,1);align-items:flex-start;overflow:hidden;padding-left:6px}
.chat-card{flex:0 0 240px;max-width:240px;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,0.08);transform-origin:center center;transition:transform 420ms cubic-bezier(.2,.9,.2,1),filter 420ms,opacity 420ms}
.chat-card img{width:100%;height:140px;object-fit:cover;display:block}
.chat-card .card-body{padding:10px}
.card-title{font-size:13px;font-weight:700;margin-bottom:6px;color:#222}
.card-meta{font-size:12px;color:#777;margin-bottom:8px}
.card-price{font-size:13px;color:#111}

/* default side card look: slightly blurred and tilted */
.chat-card{filter: blur(1px) saturate(0.95);opacity:0.88;transform:scale(0.98) rotate(0.5deg)}
.chat-card.prev{transform: rotate(-6deg) translateY(6px) scale(0.96);filter: blur(2px) saturate(0.9);opacity:0.7}
.chat-card.next{transform: rotate(6deg) translateY(6px) scale(0.96);filter: blur(2px) saturate(0.9);opacity:0.7}
.chat-card.active{transform: translateY(0px) scale(1.02) rotate(0deg);filter: none;opacity:1;box-shadow:0 18px 36px rgba(0,0,0,0.18)}

/* show a subtle peek of adjacent cards on the right */
.chat-track::after{content:'';flex:0 0 8px}


.chat-footer{display:flex;gap:8px;align-items:center;justify-content:center;padding:10px;border-top:1px solid #f0f0f0}
.chat-prev,.chat-next{background:#f6f6f6;border:0;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:18px}
.chat-prev:disabled,.chat-next:disabled{opacity:0.45;cursor:default}

/* Small screens - make panel full width above launcher */
@media (max-width:520px){
  /* Force full-viewport panel on narrow screens to remove right-gap behavior */
  .chat-panel{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    border-radius:0 !important;
    margin:0 !important;
    transform:none !important;
  }
  /* Ensure open state also respects full-viewport layout */
  .chat-panel.open{left:0 !important;right:0 !important;top:0 !important;bottom:0 !important}
  .chat-btn{width:fit-content;height:fit-content;font-size:22px; padding: 4px 15px;font-size: 15px;}
  /* ensure body area can scroll behind header */
  .chat-body{padding-top:12px}
}

/* reduce panel size on very small mobile */
@media (max-width:360px){
  .chat-panel{height:380px}
}

/* make images look slightly elevated */
.chat-slide img{box-shadow:0 6px 20px rgba(0,0,0,0.12)}

/* accessibility: focus rings */
.chat-prev:focus,.chat-next:focus,.chat-close:focus{outline:2px solid rgba(217,83,83,0.25)}

/* Backdrop shown when chat panel open */
.chat-backdrop{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.48);z-index:100;opacity:0;pointer-events:none;transition:opacity 200ms ease}
.chat-backdrop.visible{opacity:1;pointer-events:auto}

/* Conversation overlay (appears when user starts chat) */
.chat-conversation{
  position:absolute;left:0;top:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#fbf7ef);padding:12px;overflow:hidden;
}
.conv-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(0,0,0,0.04);margin-bottom:8px}
.conv-header .title{font-size:18px;font-weight:700;color:#111}
.conv-messages{flex:1;overflow-y:auto;padding:8px 6px;display:flex;flex-direction:column;gap:12px}
.message{max-width:78%;padding:10px 14px;border-radius:16px;line-height:1.4;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.message.user{align-self:flex-end;background:#e6fff2;color:#0a6a3a;border-radius:16px 16px 8px 16px}
.message.bot{align-self:flex-start;background:#ffffff;border:2px solid #d7f2d5;color:#112;}
.typing-dots{width:44px;height:28px;border-radius:10px;background:#fff;border:1px solid #d7f2d5;display:flex;align-items:center;justify-content:center}
.conv-footer{display:flex;gap:8px;align-items:center;padding:10px;border-top:1px solid rgba(0,0,0,0.04);background:transparent}
.conv-input-wrapper{position:relative;flex:1;margin:0;display:flex;align-items:center}
.conv-input{width:100%;padding:10px 44px 10px 14px;border-radius:28px;border:1px solid #e7e7e7;font-size:14px;box-sizing:border-box}
.conv-mic{position:absolute;right:18px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#2aa65b;font-size:18px;cursor:pointer}
.conv-send{display:none}

/* ensure conversation overlay covers carousel area on small screens too */
@media (max-width:520px){
  .chat-conversation{padding:10px}
}

/* --- Added styles for guided chat options and booking form --- */
.options-area{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.option-btn{background:#fbf0e9;color:#6b2f1a;border:0;padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:600;font-size:14px;box-shadow:0 8px 20px rgba(107,47,26,0.06);transition:transform 160ms ease,box-shadow 160ms ease,opacity 160ms}
.option-btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(107,47,26,0.12)}
.option-btn:active{transform:translateY(0)}
.option-btn.secondary{background:#fff;color:#6b2f1a;border:1px solid #fdeee3}
.option-btn.small{padding:6px 10px;font-size:13px}
.options-area .option-btn{flex:0 0 auto}

.date-area{display:flex;gap:8px;align-items:center;margin-top:10px}
.conv-date{padding:8px;border-radius:8px;border:1px solid #e7e7e7;background:#fff}
.continue-btn{background:#fbf0e9;color:#6b2f1a;padding:8px 12px;border-radius:8px}

.booking-form-wrap{padding:12px;background:linear-gradient(180deg,#ffffff,#f7fff8);border-radius:12px;box-shadow:0 10px 30px rgba(10,58,86,0.06);max-width:100%}
.booking-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.booking-form input[type="text"],.booking-form input[type="email"],.booking-form input[type="tel"]{padding:10px 12px;border-radius:8px;border:1px solid #e7e7e7;font-size:14px}
.booking-form .option-btn{align-self:flex-start}
.booking-success{padding:16px;border-radius:10px;background:linear-gradient(90deg,#e9fff0,#f0fff8);color:#0a6a3a;font-weight:700;text-align:center}

/* inline input area for 'Other' selections */
.inline-input-area{display:flex;gap:8px;align-items:center;margin-top:10px}
.inline-input{flex:1;padding:9px 12px;border-radius:8px;border:1px solid #e7e7e7;font-size:14px;background:#fff;box-shadow:0 6px 18px rgba(10,58,86,0.04)}
.inline-input-area .option-btn{flex:0 0 auto}

/* responsive tweaks */
@media (max-width:520px){
  .option-btn{flex:1 1 calc(50% - 8px);text-align:center}
  .date-area{flex-direction:column;align-items:stretch}
  .continue-btn{width:100%}
}

/* small polish for accessibility focus */
.option-btn:focus,.continue-btn:focus,.conv-date:focus,.booking-form input:focus{outline:3px solid rgba(42,166,91,0.12);outline-offset:2px}


/* Prevent FOUC: hide the small inline search box until JS initializes.  */
.ai-search-box{display:none}

/* No-JS fallback: if JS is disabled the <noscript> in the head will force visibility */

/* Inline expanded panel shown under the hero search strip */
.ai-inline-suggestions{margin-top:18px;display:block;max-width:900px;margin-left:auto;margin-right:auto}
.ai-expanded-panel{background:#fafafa;border:3px solid #ff8b13;border-radius:20px;min-width:500px;padding:12px;display:flex;align-items:center;gap:16px;box-shadow:0 16px 40px rgba(0,0,0,0.08); margin-bottom: 50px; height:58px;}
.ai-expanded-textarea{flex:1;border:0;background:transparent;resize:none;font-size:18px;color:#6b6b6b;padding:6px 8px;outline:none; max-height: 40px;}
.ai-expanded-icons{display:flex;flex-direction:column;gap:10px;align-items:center}
.ai-expanded-icons button{background:transparent;border:0;cursor:pointer;color:#ff8b13;font-size:20px}
.ai-expanded-mic{color:#ff8b13}
.ai-expanded-submit{color:#0a2230}

@media (max-width:720px){
  .ai-inline-suggestions{max-width:95vw}
  .ai-expanded-panel{flex-direction:row;gap:10px;padding:12px;border-radius:12px;min-width: 300px;}
  .ai-expanded-textarea{font-size:16px}
}

  /* Small repeating orange doodle pattern for the Pick-your-Crew section */
  /* .pick-who-join-main{position:relative} */
  /* .pick-who-join-main::before{
    content: "";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    opacity:0.16;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><g fill='none' stroke='%23FF8B13' stroke-linecap='round' stroke-width='1.6'><line x1='1' y1='6' x2='11' y2='6' transform='rotate(-25 6 6)'/></g></svg>");
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 48px 48px;
  } */

  /*.pick-who-join-main::after{*/
  /*  content: "";*/
  /*  position:absolute;*/
  /*  inset:0;*/
  /*  pointer-events:none;*/
  /*  z-index:0;*/
  /*  opacity:0.08;*/
  /*  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'><circle cx='3' cy='3' r='1.2' fill='%23FF8B13'/></svg>");*/
  /*  background-repeat: repeat;*/
  /*  background-size: 36px 36px;*/
  /*} */

  /* keep content above the doodles */
  .pick-who-join-main > *{z-index:1}

  .plan-doodles{position:absolute;inset:0;pointer-events:none;z-index:0}
  .plan-doodles svg{position:absolute;opacity:0.98;fill:none;stroke:#FF8B13;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.06))}

  .doodle-plan-1{left:6%;top:6%;width:110px;height:110px;transform:rotate(-6deg)}
  .doodle-plan-2{right:6%;top:8%;width:92px;height:92px;transform:rotate(8deg)}
  .doodle-plan-3{left:8%;bottom:14%;width:72px;height:72px;transform:rotate(-12deg)}
  .doodle-plan-4{right:5%;bottom:18%;width:88px;height:88px;transform:rotate(6deg)}
  .doodle-plan-5{left:46%;top:0%;width:64px;height:64px;transform:translateX(-50%)}
  .doodle-plan-6{left:66%;top:18%;width:80px;height:80px;transform:rotate(-4deg)}
  .doodle-plan-8{left:72%;top:6%;width:96px;height:96px;transform:rotate(-8deg)}

  @keyframes doodleFloatA{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
  @keyframes doodleFloatB{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
  .doodle-plan-1,.doodle-plan-3,.doodle-plan-5{animation:doodleFloatA 6s ease-in-out infinite}
  .doodle-plan-2,.doodle-plan-4,.doodle-plan-6{animation:doodleFloatB 7s ease-in-out infinite}
  
  /* sun+cloud uses a  stroke and a gentle float */
  .plan-doodles svg.doodle-plan-8{stroke:#FF8B13;fill:none;stroke-width:2}
  .doodle-plan-8{animation:doodleFloatA 6.6s ease-in-out infinite}
  
  /* hot-air balloon (user-provided) */
  .doodle-balloon{left:18%;top:6%;width:120px;height:170px;transform:rotate(-6deg)}
  .plan-doodles svg.doodle-balloon{stroke:#FF8B13 !important;fill:none!important;stroke-width:2!important}
  .doodle-balloon{animation:doodleFloatB 6.2s ease-in-out infinite}
  
  /* hat doodle (user-provided) */
  .doodle-hat{left:52%;top:14%;width:72px;height:56px;transform:rotate(-4deg)}
  .plan-doodles svg.doodle-hat{stroke:#FF8B13 !important;fill:none!important;stroke-width:2!important}
  .doodle-hat{animation:doodleFloatA 6.4s ease-in-out infinite}
  
  /* signpost doodle (user-provided) */
  .doodle-signpost{left:70%;top:28%;width:120px;height:120px;transform:rotate(4deg)}
  .plan-doodles svg.doodle-signpost{stroke:#FF8B13!important;fill:none!important;stroke-width:3!important}
  .doodle-signpost{animation:doodleFloatB 6.8s ease-in-out infinite}
  
  /* compass doodle (user-provided) */
  .doodle-compass{left:8%;top:30%;width:88px;height:110px;transform:rotate(6deg)}
  .plan-doodles svg.doodle-compass{stroke:#FF8B13!important;fill:none!important;stroke-width:4!important}
  .doodle-compass{animation:doodleFloatA 6.4s ease-in-out infinite}

  /* airplane uses the same float but slightly faster for a playful glide */

  @media (max-width:1024px){
    .doodle-plan-1{left:6%;top:4%;width:84px;height:84px}
    .doodle-plan-2{right:6%;top:6%;width:72px;height:72px}
    .doodle-plan-3{left:6%;bottom:8%;width:64px;height:64px}
    .doodle-plan-4{right:8%;bottom:10%;width:72px;height:72px}
    .doodle-plan-5{left:50%;top:2%;width:56px;height:56px}
    .doodle-plan-6{left:66%;top:18%;width:64px;height:64px}
    .doodle-plan-7{left:18%;top:8%;width:72px;height:72px}
    .doodle-plan-8{left:70%;top:6%;width:72px;height:72px}
    .doodle-balloon{left:16%;top:6%;width:96px;height:140px}
    .doodle-hat{left:50%;top:12%;width:56px;height:44px}
    .doodle-signpost{left:68%;top:26%;width:84px;height:84px}
    .doodle-compass{left:6%;top:8%;width:72px;height:90px}
  }