var {useState,useEffect,useRef} = React;

/* ============================================================
   SERVICES / JOURNEYS
   ============================================================ */
function ServicesHero(){
  return (
    <section className="srv-hero">
      <div className="wrap">
        <h1 className="display srv-hero-title">
          <span className="tline"><span style={{transitionDelay:'.1s'}}>Explore India</span></span>
          <span className="tline"><span style={{transitionDelay:'.2s'}}><em className="serif-it tcolor">& beyond,</em> with us.</span></span>
        </h1>
        <window.Reveal variant="fade" delay={200} className="srv-hero-sub">
          <p className="lead col-moss">From sacred pilgrimages and royal heritage trails to tropical escapes, corporate offsites, team-building retreats, destination events and wellness journeys: we curate unforgettable experiences designed for comfort, convenience and lasting memories.</p>
        </window.Reveal>
      </div>
    </section>
  );
}

const PACKAGES=[
  {cat:"Spiritual",n:"Spiritual Journeys",tone:"t-himalaya",src:"varanasi",d:"6 days · Varanasi · Prayagraj · Ayodhya",
   tags:["Ganga Aarti","Guided","Family"],
   desc:"Experience the soul of India through its most revered spiritual destinations: a journey of faith, culture and awakening.",
   incl:["Mesmerising Ganga Aarti in Varanasi","Sacred Triveni Sangam at Prayagraj","Ram Janmabhoomi darshan in Ayodhya","Comfortable transport & guided sightseeing","Custom packages for families & groups"]},
  {cat:"Spiritual",n:"Temples of the South",tone:"t-emerald",src:"temple",d:"6 days · Madurai · Rameswaram · Kanyakumari",
   tags:["Temples","Pilgrimage","Coast"],
   desc:"A soul-stirring journey through Tamil Nadu's grandest temples to the very tip of India, where three seas meet.",
   incl:["Towering Meenakshi Temple, Madurai","Ramanathaswamy Temple, Rameswaram","Sunrise & sunset at Kanyakumari","Vivekananda Rock Memorial","Guided darshan & comfortable transfers"]},
  {cat:"Spiritual",n:"Gujarat Heritage & Spiritual Circuit",tone:"t-desert",src:"whiteRann",d:"7 days · Somnath · Dwarka · Bhuj · Kutch",
   tags:["Jyotirlinga","White Rann","Culture"],
   desc:"Ancient temples, vibrant culture and breathtaking landscapes: a blend of spirituality, heritage and natural beauty.",
   incl:["Sacred Jyotirlinga at Somnath","Blessings at the holy city of Dwarka","Rich heritage of Bhuj","The stunning White Rann of Kutch","Local handicrafts, culture & cuisine"]},
  {cat:"Heritage",n:"Royal Rajasthan Tour",tone:"t-desert",src:"rajasthan",d:"9 days · Udaipur · Jaipur · Jodhpur · Jaisalmer",
   tags:["Forts & palaces","Desert safari","Heritage stays"],
   desc:"Step into the land of kings: magnificent forts, timeless traditions and four storied cities, from the City of Lakes to the Golden City.",
   incl:["Grand palaces & majestic forts","Desert safari & cultural performances","Vibrant local bazaars","Heritage-property stays","Udaipur, Jaipur, Jodhpur & Jaisalmer"]},
  {cat:"India Escapes",n:"God's Own Country",tone:"t-ocean",src:"houseboat",d:"7 days · Kerala",
   tags:["Backwaters","Hill stations","Beaches"],
   desc:"Serene backwaters, misty hill stations, pristine beaches and warm hospitality: tranquillity, beauty and unforgettable charm.",
   incl:["Houseboat cruise through the backwaters","Tea plantations & misty hills","Relaxed days on beautiful beaches","Authentic Kerala cuisine","Ideal for honeymooners, families & nature lovers"]},
  {cat:"India Escapes",n:"Mysuru, Ooty & Coorg",tone:"t-emerald",src:"greenHills",d:"6 days · Mysuru · Ooty · Coorg",
   tags:["Palaces","Hill stations","Coffee"],
   desc:"Royal palaces, misty Nilgiri hills and the coffee country of Karnataka: a relaxed, scenic southern hill escape.",
   incl:["Illuminated Mysore Palace","Toy-train ride through the Nilgiris","Coffee-estate walks in Coorg","Waterfalls & spice plantations","Comfortable hill-resort stays"]},
  {cat:"India Escapes",n:"Goa & the Beaches",tone:"t-ocean",src:"beachAerial",d:"5 days · North & South Goa",
   tags:["Beaches","Heritage","Leisure"],
   desc:"Sun, sand and Portuguese charm, from the lively northern beaches to the quiet, golden shores of the south.",
   incl:["North Goa beaches & vibrant evenings","Old Goa churches & heritage quarters","Relaxed south-Goa shores","Spice farms & river cruises","Boutique & beachfront stays"]},
  {cat:"India Escapes",n:"North East India",tone:"t-himalaya",src:"valleyMist",d:"8 days · Darjeeling · Gangtok · Sikkim",
   tags:["Tea gardens","Toy train","Mountains"],
   desc:"Rolling tea gardens, Himalayan views and warm hill towns across India's enchanting, untouched North East.",
   incl:["Toy-train ride in Darjeeling","Sunrise over Kanchenjunga at Tiger Hill","Monasteries around Gangtok","Tea-estate stays & tastings","Easy-paced mountain itinerary"]},
  {cat:"India Escapes",n:"Andaman & Nicobar Islands",tone:"t-ocean",src:"lagoon",d:"6 days · Port Blair · Havelock · Neil",
   tags:["Beaches","Snorkelling","Islands"],
   desc:"Powder-white sands, coral reefs and turquoise water: India's most pristine tropical island escape.",
   incl:["Radhanagar Beach, Havelock","Snorkelling & scuba over coral reefs","Cellular Jail light & sound show","Glass-bottom boat at Neil Island","Island-hopping by comfortable ferry"]},
  {cat:"Himalayas",n:"Kashmir, Manali & Spiti Valley",tone:"t-himalaya",src:"spiti",d:"8 days · Srinagar · Manali · Spiti",
   tags:["Valleys","Mountains","Adventure"],
   desc:"Snow-capped peaks, alpine meadows and high-desert monasteries: the most spectacular stretch of the Indian Himalaya.",
   incl:["Shikara ride on Dal Lake, Srinagar","Apple orchards & meadows of Manali","Dramatic high-desert drive into Spiti","Ancient cliffside monasteries","Comfortable stays & experienced mountain drivers"]},
  {cat:"Himalayas",n:"Leh & Ladakh",tone:"t-himalaya",src:"zanskar",d:"7 days · Leh · Nubra · Pangong",
   tags:["High passes","Lakes","Monasteries"],
   desc:"The Land of High Passes: turquoise lakes, Buddhist monasteries and some of the most surreal landscapes on earth.",
   incl:["Sunrise at Pangong Tso lake","Nubra Valley & its sand dunes","Khardung La, among the world's highest roads","Thiksey & Diskit monasteries","Acclimatised, well-paced itinerary"]},
  {cat:"International",n:"International Getaways",tone:"t-ocean",src:"singapore",d:"6 days · Singapore & Malaysia",
   tags:["City tours","Theme parks","Family"],
   desc:"The best of South East Asia in one exciting journey: iconic landmarks, theme parks and world-class dining.",
   incl:["Modern city attractions & landmarks","Family-friendly entertainment","Shopping, nightlife & culture","Theme parks & fine dining","Seamless end-to-end arrangements"]},
  {cat:"International",n:"South East Asia",tone:"t-emerald",src:"overwater",d:"7 days · Thailand · Bali · Vietnam",
   tags:["Beaches","Temples","Culture"],
   desc:"Islands, temples and street-food capitals: the very best of South East Asia, tailored to your pace.",
   incl:["Thailand's islands & Grand Palace","Beaches & rice terraces of Bali","Halong Bay cruise, Vietnam","World-famous street food","Seamless multi-country routing"]},
  {cat:"International",n:"Dubai, Qatar, Bahrain & UAE",tone:"t-sunset",src:"dubai",d:"7 days · Dubai · Abu Dhabi · Doha · Manama",
   tags:["Desert safari","Luxury","Skylines"],
   desc:"Where modern luxury meets Arabian hospitality: soaring Gulf skylines, desert adventures and world-class attractions.",
   incl:["Thrilling desert safari adventures","Iconic skyscrapers & city tours","Doha & Manama Gulf highlights","Luxury shopping & entertainment","Cultural & heritage experiences"]},
  {cat:"International",n:"Europe",tone:"t-sunset",src:"tuscany",d:"10 days · Custom multi-country",
   tags:["Cities","Heritage","Scenery"],
   desc:"From Alpine villages to Mediterranean coasts: bespoke European itineraries across the cities and countryside you choose.",
   incl:["Iconic cities & landmarks","Scenic train journeys & countryside","Art, history & local cuisine","Handpicked central hotels","Visa guidance & full support"]},
  {cat:"International",n:"Africa",tone:"t-desert",src:"desert",d:"8 days · Safari & wilderness",
   tags:["Safari","Wildlife","Wilderness"],
   desc:"Big-game safaris and breathtaking wilderness: unforgettable African adventures, planned end to end.",
   incl:["Game drives in iconic reserves","The Big Five & great migrations","Sundowners over the savannah","Lodge & tented-camp stays","Expert local guides"]},
];

function Packages(){
  const cats=["All","Spiritual","Heritage","India Escapes","Himalayas","International"];
  const [cat,setCat]=useState("All");
  const [open,setOpen]=useState(null);
  const list=cat==="All"?PACKAGES:PACKAGES.filter(p=>p.cat===cat);
  return (
    <section className="section tight" id="packages">
      <div className="wrap">
        <div className="tabs-row">
          <div className="tabs">
            {cats.map(c=>(
              <button key={c} className={`tab ${cat===c?'on':''}`} onClick={()=>{setCat(c);setOpen(null);}}>
                {c}{cat===c && <span className="tab-pill"></span>}
              </button>
            ))}
          </div>
          <span className="mono tabs-count">{String(list.length).padStart(2,'0')} journeys</span>
        </div>

        <div className="pkg-list">
          {list.map((p,i)=>{
            const isOpen=open===p.n;
            return (
              <div key={p.n} className={`pkg ${isOpen?'open':''}`}>
                <button className="pkg-head" onClick={()=>setOpen(isOpen?null:p.n)}>
                  <window.Frame tone={p.tone} src={p.src} className="pkg-thumb" label={p.n}/>
                  <div className="pkg-main">
                    <span className="mono pkg-cat">{p.cat}</span>
                    <h3 className="h3 pkg-name">{p.n}</h3>
                    <span className="col-moss pkg-d">{p.d}</span>
                  </div>
                  <div className="pkg-tags">
                    {p.tags.map(t=><span key={t} className="pkg-tag">{t}</span>)}
                  </div>
                  <span className="pkg-toggle"><window.Icon name={isOpen?"minus":"plus"} size={20}/></span>
                </button>
                <div className="pkg-exp" style={{gridTemplateRows:isOpen?'1fr':'0fr'}}>
                  <div className="pkg-exp-in">
                    <div className="pkg-exp-grid">
                      <p className="pkg-desc">{p.desc}</p>
                      <div className="pkg-incl">
                        <span className="mono pkg-incl-h">What's included</span>
                        <ul>
                          {p.incl.map(x=>(
                            <li key={x}><window.Icon name="check" size={15}/> {x}</li>
                          ))}
                        </ul>
                        <button className="btn terra btn-sm" style={{marginTop:18}}
                          onClick={()=>window.openWA(`Hi LaLaLand! I'd like to enquire about the "${p.n}" (${p.d}). Could you share the details?`)}>
                          <span>Enquire now <window.Icon name="arrow" size={15} className="arrow"/></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="pkg-more">
          <div className="pkg-more-txt">
            <strong>Beyond holidays: events, teams &amp; retreats</strong>
            <span>Corporate offsites, team-building, destination weddings, Yoga &amp; Ayurveda retreats and fully bespoke trips worldwide: tell us your idea and we'll craft it.</span>
          </div>
          <button className="pkg-more-btn" onClick={()=>window.openWA("Hi LaLaLand! I'd like to know about more journey plans beyond the ones listed. Can you help?")}>
            <window.SocialIcon name="wa" size={18}/> Enquire with us
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---- enquiry / trip-details form ---- */
function BField({label,value,onChange,placeholder,type="text",textarea,min,max}){
  return (
    <div className="bfield">
      <label>{label}</label>
      {textarea ? (
        <textarea value={value} placeholder={placeholder} rows="3" onChange={e=>onChange(e.target.value)}/>
      ) : (
        <input type={type} value={value} placeholder={placeholder} min={min} max={max} onChange={e=>onChange(e.target.value)}/>
      )}
    </div>
  );
}

function Builder(){
  const [f,setF]=useState({name:"",dest:"",dates:"",days:"",travellers:"",notes:""});
  const set=(k)=>(v)=>setF(p=>({...p,[k]:v}));
  const fmtDate=(d)=> d ? d.split('-').reverse().join('/') : 'Flexible';
  const today=new Date().toISOString().split('T')[0];

  const message =
    `Hi LaLaLand\n\n`+
    `I'd like to plan a journey.\n\n`+
    `Name: ${f.name.trim()||'Not specified'}\n`+
    `Destination: ${f.dest.trim()||'Not specified'}\n`+
    `Travel Dates: ${fmtDate(f.dates)}\n`+
    `Duration: ${f.days.trim()? f.days.trim()+' days' : 'Flexible'}\n`+
    `No. of Travellers: ${f.travellers.trim()||'Not specified'}\n`+
    `Interests / Notes: ${f.notes.trim()||'Not specified'}\n\n`+
    `Please share the available options and pricing.\n\n`+
    `Thank you.`;

  return (
    <section className="section dark builder" id="builder">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal as="h2" className="h2" delay={60}>Tell us your<br/>travel details.</window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead" style={{color:'rgba(238,244,250,.72)'}}>Fill in what you have in mind below. When you hit send, your details go straight to our team on WhatsApp: we'll take it from there.</p>
          </window.Reveal>
        </div>

        <div className="builder-grid">
          <div className="builder-controls">
            <div className="bform">
              <BField label="Your name" value={f.name} onChange={set('name')} placeholder="e.g. Priya Sharma"/>
              <div className="bform-row">
                <BField label="Destination" value={f.dest} onChange={set('dest')} placeholder="Where would you like to go?"/>
                <BField label="Travel dates" type="date" value={f.dates} onChange={v=>set('dates')(window.clampDate(v, today, "2099-12-31"))} min={today} max="2099-12-31"/>
              </div>
              <div className="bform-row">
                <BField label="Duration (days)" type="number" value={f.days} onChange={set('days')} placeholder="e.g. 7"/>
                <BField label="No. of travellers" type="number" value={f.travellers} onChange={set('travellers')} placeholder="e.g. 2"/>
              </div>
              <BField label="Interests / anything else" textarea value={f.notes} onChange={set('notes')} placeholder="Temples, beaches, honeymoon, budget in mind…"/>
            </div>
            <button className="btn terra builder-send" onClick={()=>window.openWA(message)}>
              <span>Send to us <window.Icon name="arrow" size={16} className="arrow"/></span>
            </button>
          </div>

          <div className="builder-preview">
            <div className="bp-head">
              <span className="mono">MESSAGE PREVIEW</span>
              <span className="bp-live"><i></i> ready to send</span>
            </div>
            <pre className="bp-msg">{message}</pre>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ServicesPage = function({navigate}){
  return (
    <div className="page-pad services">
      <ServicesHero/>
      <Packages/>
      <WhyTravel/>
      <Builder/>
      <ClosingCTA navigate={navigate}/>
    </div>
  );
};

/* ---- why travel with us ---- */
function WhyTravel(){
  const items=[
    {ic:"route",t:"Customised tour packages"},
    {ic:"shield",t:"Comfortable accommodation"},
    {ic:"compass",t:"Flight, train & bus bookings"},
    {ic:"users",t:"Experienced tour coordination"},
    {ic:"globe",t:"Family, group & corporate tours"},
    {ic:"star",t:"Affordable, transparent pricing"},
    {ic:"check",t:"Trusted service & support"},
    {ic:"pin",t:"End-to-end travel assistance"},
  ];
  return (
    <section className="section whytravel">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <window.Reveal as="h2" className="h2" delay={60}>Why travel<br/>with us?</window.Reveal>
          </div>
          <window.Reveal variant="fade" delay={120} className="sec-head-side">
            <p className="lead col-moss">Whether you're seeking spiritual fulfilment, cultural exploration, family vacations or international adventures, every trip is planned with care, comfort and attention to detail.</p>
          </window.Reveal>
        </div>
        <div className="wt-grid">
          {items.map((it,i)=>(
            <window.Reveal key={it.t} delay={i*60} className="wt-card">
              <span className="wt-ico"><window.Icon name={it.ic} size={20}/></span>
              <span className="wt-t">{it.t}</span>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- closing CTA band ---- */
function ClosingCTA({navigate}){
  return (
    <section className="closing-cta">
      <window.Frame src="taj" tone="t-night" className="cc-bg" parallax={0.1}/>
      <div className="cc-scrim"></div>
      <div className="wrap cc-inner">
        <window.Reveal as="h2" className="h1" style={{maxWidth:'18ch'}}>
          Start your next journey<br/>with <span className="tcolor">confidence.</span>
        </window.Reveal>
        <window.Reveal variant="fade" delay={120} style={{marginTop:22}}>
          <p className="lead" style={{color:'rgba(238,244,250,.82)',maxWidth:'52ch'}}>Your journey. Our expertise. Memories for a lifetime.</p>
        </window.Reveal>
        <window.Reveal variant="fade" delay={220} style={{marginTop:36,display:'flex',gap:16,flexWrap:'wrap'}}>
          <button className="btn on-dark" onClick={()=>window.openWA("Hi LaLaLand! I'd like to plan my trip. Where do we start?")}>
            <span>Plan my trip <window.Icon name="arrow" size={17} className="arrow"/></span>
          </button>
          <button className="btn on-dark ghost" onClick={()=>navigate('gallery')}>
            <span>See the gallery</span>
          </button>
        </window.Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES STYLES
   ============================================================ */
(function(){
  if(document.getElementById('srv-style'))return;
  const s=document.createElement('style');s.id='srv-style';
  s.textContent=`
.srv-hero{padding:clamp(40px,7vw,90px) 0 clamp(30px,4vw,50px)}
.srv-hero-title{margin-top:20px}
.srv-hero-sub{max-width:60ch;margin-top:26px}
/* no caption overlays on the Journeys page imagery */
.services .ph-label,.services .ph-tag{display:none!important}

/* why travel with us */
.whytravel{background:var(--paper-2)}
.wt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.wt-card{display:flex;align-items:center;gap:14px;padding:22px;background:var(--cream);border:1px solid var(--line);
  border-radius:16px;transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s}
.wt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.wt-ico{width:46px;height:46px;border-radius:12px;background:var(--paper-2);color:var(--terra);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background .4s,color .4s}
.wt-card:hover .wt-ico{background:var(--terra);color:#fff}
.wt-t{font-weight:600;font-size:15px;line-height:1.25}
@media(max-width:900px){.wt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wt-grid{grid-template-columns:1fr}}

/* closing CTA */
.closing-cta{position:relative;overflow:hidden;color:var(--cream);padding:clamp(80px,12vw,150px) 0}
.cc-bg{position:absolute!important;inset:-6% 0;z-index:0;border-radius:0!important;will-change:transform}
.cc-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(16,27,72,.93) 0%,rgba(16,27,72,.66) 55%,rgba(16,27,72,.34) 100%)}
.cc-inner{position:relative;z-index:2}

/* tabs */
.tabs-row{display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:14px;flex-wrap:wrap}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{position:relative;padding:10px 20px;border-radius:100px;font-weight:600;font-size:15px;color:var(--moss);
  transition:color .35s,background .35s}
.tab:hover{color:var(--ink);background:var(--paper-2)}
.tab.on{color:#fff}
.tab-pill{position:absolute;inset:0;z-index:-1;border-radius:100px;background:var(--grad-dark)}
.tabs-count{color:var(--moss);font-size:12px;letter-spacing:.1em}

/* package accordion */
.pkg-list{display:flex;flex-direction:column}
.pkg-more{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:34px;padding:26px 30px;border-radius:18px;background:var(--grad-dark);color:var(--cream)}
.pkg-more-txt{display:flex;flex-direction:column;gap:4px}
.pkg-more-txt strong{font-size:19px;letter-spacing:-.02em}
.pkg-more-txt span{font-size:14.5px;color:rgba(202,222,251,.8);max-width:52ch}
.pkg-more-btn{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:13px 22px;border-radius:100px;
  font-weight:700;font-size:14.5px;color:#fff;background:linear-gradient(135deg,#25b85a,#15914a);
  box-shadow:0 12px 26px -14px rgba(20,150,74,.9);transition:transform .35s var(--ease-out)}
.pkg-more-btn:hover{transform:translateY(-2px)}
@media(max-width:600px){.pkg-more{padding:22px}.pkg-more-btn{width:100%;justify-content:center}}
.pkg{border-bottom:1px solid var(--line)}
.pkg-head{display:grid;grid-template-columns:96px 1.5fr 1.8fr 44px;align-items:center;gap:26px;
  width:100%;text-align:left;padding:22px 6px;transition:background .4s}
.pkg-head:hover{background:var(--paper-2)}
.pkg-thumb{width:96px;aspect-ratio:1;border-radius:12px}
.pkg-cat{font-size:11px;color:var(--terra);letter-spacing:.1em;text-transform:uppercase}
.pkg-name{margin-top:5px}
.pkg-d{font-size:14px;display:block;margin-top:4px}
.pkg-tags{display:flex;gap:8px;flex-wrap:wrap}
.pkg-tag{font-size:12px;font-weight:500;padding:6px 12px;border-radius:100px;background:var(--paper-2);
  border:1px solid var(--line);color:var(--ink-soft)}
.pkg-toggle{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;transition:all .4s var(--ease-out)}
.pkg.open .pkg-toggle{background:var(--terra);border-color:var(--terra);color:#fff;transform:rotate(90deg)}
.pkg-exp{display:grid;transition:grid-template-rows .55s var(--ease)}
.pkg-exp-in{overflow:hidden}
.pkg-exp-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:6px 6px 36px 122px}
.pkg-desc{font-size:18px;line-height:1.5;color:var(--ink-soft);max-width:50ch}
.pkg-incl-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.pkg-incl ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.pkg-incl li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.pkg-incl li svg{color:var(--terra);flex:0 0 auto}
@media(max-width:920px){
  .pkg-head{grid-template-columns:72px 1fr 44px;gap:16px}
  .pkg-tags{display:none}
  .pkg-thumb{width:72px}
  .pkg-exp-grid{grid-template-columns:1fr;gap:22px;padding:6px 6px 30px 6px}
}

/* builder */
.builder-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:start}
.builder-controls{background:rgba(238,244,250,.04);border:1px solid var(--line-light);border-radius:22px;padding:30px}
/* trip-details form */
.bform{display:flex;flex-direction:column;gap:6px}
.bform-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.bform-row{grid-template-columns:1fr;gap:6px}}
.bfield{display:flex;flex-direction:column;gap:9px;padding:12px 0}
.bfield label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,244,250,.6)}
.bfield input,.bfield textarea{width:100%;background:rgba(238,244,250,.05);border:1px solid var(--line-light);
  border-radius:12px;padding:13px 15px;color:var(--cream);font-family:inherit;font-size:15px;font-weight:500;
  outline:none;transition:border-color .35s,background .35s}
.bfield input::placeholder,.bfield textarea::placeholder{color:rgba(238,244,250,.38)}
.bfield input:focus,.bfield textarea:focus{border-color:var(--terra);background:rgba(238,244,250,.08)}
.bfield textarea{resize:vertical;min-height:88px;line-height:1.5}
.bfield input[type=date]{cursor:pointer}
.bfield input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85);opacity:.65;cursor:pointer}
.bfield input[type=number]::-webkit-outer-spin-button,.bfield input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.builder-send{margin-top:24px;width:100%;justify-content:center}
.bp-msg{white-space:pre-wrap;word-break:break-word;font-family:'JetBrains Mono',monospace;font-size:13.5px;
  line-height:1.75;color:rgba(238,244,250,.82);margin:0;padding:6px 2px 2px}
.bc-block{padding:18px 0;border-bottom:1px solid var(--line-light)}
.bc-block:first-child{padding-top:2px}
.bc-label{display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(238,244,250,.6);margin-bottom:14px}
.bc-val{color:var(--terra-soft);letter-spacing:.04em}
.bc-chips{display:flex;flex-wrap:wrap;gap:9px}
.bc-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:100px;
  border:1px solid var(--line-light);color:rgba(238,244,250,.82);font-size:14px;font-weight:500;
  transition:all .35s var(--ease-out)}
.bc-chip.sm{padding:9px 14px;font-size:13px}
.bc-chip:hover{border-color:rgba(238,244,250,.4)}
.bc-chip.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.bc-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.bc-chip.on .bc-dot{box-shadow:0 0 0 2px rgba(13,18,64,.12)}
.bc-range{-webkit-appearance:none;width:100%;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--terra) var(--p),rgba(238,244,250,.16) var(--p));outline:none}
.bc-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cream);
  border:4px solid var(--terra);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.bc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:4px solid var(--terra);cursor:pointer}
.bc-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(238,244,250,.4);margin-top:10px}
.bc-seg{display:flex;background:rgba(238,244,250,.06);border-radius:100px;padding:4px}
.bc-seg button{flex:1;padding:10px;border-radius:100px;font-size:14px;font-weight:600;color:rgba(238,244,250,.7);transition:all .35s}
.bc-seg button.on{background:var(--terra);color:#fff}
.bc-est{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;flex-wrap:wrap}
.bc-est-l{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,244,250,.55)}
.bc-est-v{display:block;font-size:30px;font-weight:800;letter-spacing:-.03em;margin:3px 0}
.bc-est-pp{font-size:13px;color:rgba(238,244,250,.6)}

.builder-preview{background:rgba(238,244,250,.04);border:1px solid var(--line-light);border-radius:22px;padding:26px;
  position:sticky;top:90px}
.bp-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;
  border-bottom:1px solid var(--line-light);margin-bottom:8px}
.bp-head .mono{font-size:11px;letter-spacing:.1em;color:var(--terra-soft)}
.bp-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:rgba(238,244,250,.6);text-transform:uppercase;letter-spacing:.1em}
.bp-live i{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.bp-days{display:flex;flex-direction:column;max-height:440px;overflow-y:auto;padding-right:6px}
.bp-days::-webkit-scrollbar{width:5px}
.bp-days::-webkit-scrollbar-thumb{background:rgba(238,244,250,.18);border-radius:4px}
.bp-day{display:grid;grid-template-columns:42px 1fr;gap:14px;padding:14px 0;position:relative;
  animation:fadeUp .5s var(--ease-out) both}
.bp-daynum{font-size:12px;color:var(--terra-soft);padding-top:2px}
.bp-dayline{display:none}
.bp-daybody{display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--line-light);padding-left:16px;margin-left:-8px}
.bp-daybody strong{font-size:16px;font-weight:600}
.bp-daybody span{font-size:14px;color:rgba(238,244,250,.62);line-height:1.45}
@media(max-width:920px){
  .builder-grid{grid-template-columns:1fr;gap:24px}
  .builder-preview{position:static}
}
`;
  document.head.appendChild(s);
})();