@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500;1,9..144,600&family=Archivo:wght@400;500;600;700&family=Petit+Formal+Script&display=swap");
/* ^ KLLD-FONTLOAD — @import inside a data-no-optimize stylesheet survives LiteSpeed's
   Google-Fonts replacement optimizer (a bare <link> to fonts.googleapis.com is stripped
   even with data-no-optimize on the tag). Same escape hatch as klld-tour-hero.css. */

/* =========================================================================
   KLLD Tour Search Result — cinematic "Andaman reel" results page.
   Ported from _proto/tour-cinematic-route. Everything is scoped under .kdtsr
   so nothing leaks into the Traveler theme. Brand green #099024, sun #ffcc00,
   Fraunces display + Archivo UI + Petit Formal Script flourish.
   ========================================================================= */
.kdtsr{
  --stage-bg:#0c1411;
  --desk:#eae5d7;
  --desk-2:#dcd6c5;
  --desk-3:#cfc8b6;
  --paper:247,243,234;
  --text:#15241d;
  --text-dim:rgba(21,36,29,.74);
  --text-faint:rgba(21,36,29,.46);
  --onphoto:#f6f2e8;
  --green:#099024;
  --green-hi:#0aa82a;
  --gold:#ffcc00;
  --rule:rgba(21,36,29,.18);
  --rule-soft:rgba(21,36,29,.1);
  --card-line:#ece7dc;
  --disp:"Fraunces",Georgia,"Times New Roman",serif;
  --script:"Petit Formal Script",cursive;
  --ui:"Archivo",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:var(--ui);
  color:var(--text);
  background:radial-gradient(120% 80% at 50% 0%, var(--desk) 0%, var(--desk-2) 55%, var(--desk-3) 100%);
  -webkit-font-smoothing:antialiased;
  padding:26px;
  overflow-x:hidden;
}
@media(max-width:820px){ .kdtsr{padding:12px} }
@media(max-width:560px){ .kdtsr{padding:8px} }
.kdtsr *{box-sizing:border-box}
.kdtsr a{color:inherit;text-decoration:none}
.kdtsr img{display:block;max-width:100%}
.kdtsr button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---- stage: lighter cinematic hero (crossfading flagship film-stills) ---- */
.kdtsr .stage{
  /* KLLD-FULLBLEED 2026 - .kdtsr-bg is now a TRUE fullscreen backdrop.
     The stage breaks out of .kdtsr's padding to a full 100vw x 100svh cinematic
     frame; .bg stays position:absolute;inset:0 (out of flow, decorative -> no CLS)
     so it covers the whole viewport with background-size:cover (no letterboxing).
     .kdtsr has overflow-x:hidden which clips the 100vw full-bleed sliver -> no
     horizontal scrollbar. grade/grain/copy/ghost/chrome keep layering above the
     bg unchanged; isolation:isolate confines them BELOW the theme header. The
     crossfade JS (toggles .kdtsr-bg .layer.on) is untouched. */
  position:relative;width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-top:0;
  height:100vh;height:100svh;min-height:480px;border-radius:0;overflow:hidden;background:var(--stage-bg);
  isolation:isolate;
}
@media(max-width:820px){ .kdtsr .stage{margin-top:0;height:100svh;min-height:520px} }
@media(max-width:560px){ .kdtsr .stage{margin-top:0;height:100svh;min-height:480px} }

.kdtsr .bg{position:absolute;inset:0;z-index:0}
.kdtsr .bg .layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.08);
  transition:opacity 1.2s var(--ease), transform 9s linear}
.kdtsr .bg .layer.on{opacity:1;transform:scale(1.0)}
.kdtsr .grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(var(--paper),.72) 0%, rgba(var(--paper),.52) 30%, rgba(var(--paper),.06) 58%, rgba(var(--paper),.3) 100%),
    linear-gradient(0deg, rgba(var(--paper),.58) 0%, rgba(var(--paper),.04) 44%, rgba(var(--paper),.3) 100%)}
.kdtsr .grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.kdtsr .chrome{position:absolute;inset:0;z-index:6;pointer-events:none}
.kdtsr .tick{position:absolute;top:0;left:50%;width:1px;height:26px;background:var(--rule);transform:translateX(-50%)}
.kdtsr .tick::after{content:"";position:absolute;top:26px;left:50%;width:5px;height:5px;border-radius:50%;background:var(--gold);transform:translate(-50%,-2px);box-shadow:0 0 8px rgba(255,204,0,.85),0 0 0 1px rgba(21,36,29,.2)}
.kdtsr .corner{position:absolute;width:20px;height:20px;border:1px solid var(--rule-soft)}
.kdtsr .corner.tl{top:22px;left:22px;border-right:0;border-bottom:0}
.kdtsr .corner.tr{top:22px;right:22px;border-left:0;border-bottom:0}
.kdtsr .corner.bl{bottom:22px;left:22px;border-right:0;border-top:0}
.kdtsr .corner.br{bottom:22px;right:22px;border-left:0;border-top:0}
@media(max-width:820px){.kdtsr .corner{display:none}}

.kdtsr .ghost{position:absolute;z-index:3;right:-10px;bottom:-6px;font-family:var(--disp);font-weight:900;
  font-size:clamp(7rem,16vw,15rem);line-height:.8;color:transparent;-webkit-text-stroke:1.4px rgba(21,36,29,.14);
  letter-spacing:-.02em;pointer-events:none;user-select:none}
@media(max-width:820px){.kdtsr .ghost{-webkit-text-stroke-width:1px;bottom:auto;top:10px;right:16px}}

.kdtsr .copy{position:absolute;z-index:5;left:56px;bottom:52px;max-width:min(56%,600px)}
@media(max-width:1080px){.kdtsr .copy{max-width:70%}}
@media(max-width:820px){.kdtsr .copy{left:24px;right:24px;bottom:34px;max-width:none}}
.kdtsr .over{font-family:var(--script);font-size:clamp(1.3rem,2.2vw,1.9rem);color:var(--green);line-height:1;margin-bottom:4px;text-shadow:0 1px 10px rgba(var(--paper),.6)}
.kdtsr .ttl{font-family:var(--disp);font-weight:600;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.98;letter-spacing:-.015em;color:var(--text);margin:0;text-shadow:0 1px 26px rgba(var(--paper),.72),0 1px 2px rgba(var(--paper),.6)}
.kdtsr .lede{font-family:var(--ui);font-weight:400;font-size:clamp(.9rem,1.2vw,1rem);line-height:1.62;color:var(--text-dim);margin-top:14px;max-width:48ch;text-shadow:0 1px 3px rgba(var(--paper),.55)}
.kdtsr .kick{display:flex;align-items:center;gap:12px;margin-top:16px;font-family:var(--ui);font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--text-dim);text-shadow:0 1px 6px rgba(var(--paper),.6)}
.kdtsr .kick .dot{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(9,144,36,.55)}

.kdtsr .explore{position:absolute;z-index:5;left:56px;bottom:18px;display:inline-flex;align-items:center;gap:12px;font-family:var(--ui);font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--text);transition:gap .3s;text-shadow:0 1px 8px rgba(var(--paper),.65)}
@media(max-width:820px){.kdtsr .explore{display:none}}
.kdtsr .explore .chev{display:flex;color:var(--green);animation:kdtsr-bob 2s var(--ease) infinite}
@keyframes kdtsr-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.kdtsr .explore:hover{gap:18px}

.kdtsr .prog{position:absolute;left:0;bottom:0;z-index:6;height:3px;width:100%;background:rgba(21,36,29,.1)}
.kdtsr .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-hi));box-shadow:0 0 12px rgba(9,144,36,.65)}
.kdtsr .prog i.run{animation:kdtsr-fill var(--dwell,6s) linear forwards}
@keyframes kdtsr-fill{from{width:0}to{width:100%}}

/* =========================================================================
   RESULTS LIBRARY — real st_tours carousel + 5-place destination filter.
   ========================================================================= */
.kdtsr .lib{max-width:1360px;margin:34px auto 6px;padding:0 8px}
.kdtsr .lib-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.kdtsr .lib-h .htxt{max-width:640px}
.kdtsr .lib-over{font-family:var(--script);font-size:1.5rem;color:var(--green);line-height:1;margin-bottom:2px}
.kdtsr .lib-ttl{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.02;letter-spacing:-.015em;color:var(--text);margin:0}
.kdtsr .lib-sub{font-family:var(--ui);font-size:.9rem;color:var(--text-dim);margin-top:8px}

.kdtsr .lib-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kdtsr .kdtsr-search{position:relative;display:flex;align-items:center}
.kdtsr .kdtsr-search .ic{position:absolute;left:14px;width:15px;height:15px;color:var(--text-faint);pointer-events:none}
.kdtsr .kdtsr-search input{font-family:var(--ui);font-size:.86rem;font-weight:500;color:var(--text);
  width:min(300px,64vw);padding:11px 14px 11px 38px;border-radius:999px;border:1px solid var(--rule);
  background:rgba(255,255,255,.6);transition:border-color .25s,box-shadow .25s,background .25s;-webkit-appearance:none}
.kdtsr .kdtsr-search input::placeholder{color:var(--text-faint);font-weight:400}
.kdtsr .kdtsr-search input:focus{outline:none;border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(9,144,36,.14)}
.kdtsr .kdtsr-search .clr{position:absolute;right:8px;width:26px;height:26px;border-radius:50%;display:none;align-items:center;justify-content:center;color:var(--text-faint);background:rgba(21,36,29,.06);transition:color .2s,background .2s}
.kdtsr .kdtsr-search.has-val .clr{display:flex}
.kdtsr .kdtsr-search .clr:hover{color:var(--text);background:rgba(21,36,29,.12)}
.kdtsr .kdtsr-search .clr svg{width:12px;height:12px}

.kdtsr .lib-count{font-family:var(--ui);font-size:.6rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.kdtsr .lib-count b{color:var(--green);font-weight:700}
.kdtsr .lib-arrows{display:flex;gap:8px}
.kdtsr .lib-arrows button{width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:rgba(255,255,255,.5);color:var(--text);
  display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s,color .3s,transform .3s,opacity .3s}
.kdtsr .lib-arrows button:hover{background:var(--green);border-color:var(--green);color:var(--onphoto);transform:scale(1.06)}
.kdtsr .lib-arrows button:disabled{opacity:.32;cursor:not-allowed;transform:none;background:rgba(255,255,255,.5);color:var(--text);border-color:var(--rule)}
.kdtsr .lib-arrows button svg{width:16px;height:16px}
@media(max-width:600px){.kdtsr .lib-arrows{display:none}}

.kdtsr .lib-body{display:grid;grid-template-columns:1fr 216px;gap:26px;align-items:start}
@media(max-width:900px){.kdtsr .lib-body{grid-template-columns:1fr}}

/* ---- destination filter (the 5 places + All) ---- */
.kdtsr .lib-filter{order:2;position:sticky;top:22px;display:flex;flex-direction:column;gap:6px;
  background:rgba(255,255,255,.46);border:1px solid var(--rule-soft);border-radius:16px;padding:18px 16px;backdrop-filter:blur(3px)}
@media(max-width:900px){.kdtsr .lib-filter{order:0;position:static;flex-direction:row;flex-wrap:wrap;background:none;border:0;padding:0;backdrop-filter:none;margin-bottom:4px}}
.kdtsr .lf-h{font-family:var(--ui);font-size:.56rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;padding:0 4px}
@media(max-width:900px){.kdtsr .lf-h{width:100%;margin-bottom:4px}}
.kdtsr .lf{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  font-family:var(--ui);font-size:.82rem;font-weight:600;letter-spacing:.01em;color:var(--text-dim);
  padding:9px 12px;border-radius:10px;border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.kdtsr .lf:hover{background:rgba(9,144,36,.08);color:var(--text)}
.kdtsr .lf .c{font-family:var(--ui);font-size:.66rem;font-weight:700;letter-spacing:.04em;color:var(--text-faint);
  background:rgba(21,36,29,.07);border-radius:20px;padding:2px 8px;min-width:26px;text-align:center;transition:background .25s,color .25s;font-variant-numeric:tabular-nums}
.kdtsr .lf[aria-pressed="true"]{background:var(--green);color:var(--onphoto);border-color:var(--green);box-shadow:0 8px 20px -12px rgba(9,144,36,.7)}
.kdtsr .lf[aria-pressed="true"] .c{background:var(--gold);color:#1a1400}
.kdtsr .lf:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---- CENTER-MODE INFINITE-LOOP carousel (KLLD 2026) ----
   The centred card takes ~60% of the carousel column; the neighbours peek ~20%
   on each side (scroll-snap centres each card). klld-tour-search.js clones cards
   at both ends so the loop is seamless (no dead-end at the last tour). The native
   scrollbar is hidden — arrows + drag/touch/trackpad drive it. On ≤900px it eases
   to a single-card swipe (wider card, smaller peek); ≤560px is a full swipe deck. */
.kdtsr .lib-carousel{order:1;position:relative;overflow:hidden}
.kdtsr .lib-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:8px 0 22px;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-x}
.kdtsr .lib-track::-webkit-scrollbar{display:none;width:0;height:0}

/* card surface — LIGHT warm-paper "Andaman Ledger" gradient + hairline (#ece7dc).
   A gentle ivory sheen, never a spotlight; title + ฿price stay crisp on top. */
.kdtsr .tcard{flex:0 0 60%;scroll-snap-align:center;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:linear-gradient(157deg,#faf8f2 0%,#f4eee2 54%,#f2ece0 100%);
  border:1px solid var(--card-line);box-shadow:0 16px 34px -22px rgba(40,45,30,.5);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .35s,opacity .5s var(--ease)}
/* the peeked neighbours recede; the centred card is the hero */
.kdtsr .tcard:not(.is-active){opacity:.46;transform:scale(.9)}
.kdtsr .tcard.is-active{opacity:1;transform:none;box-shadow:0 30px 60px -26px rgba(40,45,30,.62)}
@media(max-width:900px){.kdtsr .tcard{flex-basis:74%}}
@media(max-width:560px){.kdtsr .tcard{flex-basis:86%}}
.kdtsr .tcard.is-active:hover{transform:translateY(-6px);box-shadow:0 34px 66px -26px rgba(40,45,30,.66);border-color:#e2dccd}
.kdtsr .tcard .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:#efe9dc}
@media(max-width:560px){.kdtsr .tcard .pic{aspect-ratio:4/3}}
.kdtsr .tcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.kdtsr .tcard:hover .pic img{transform:scale(1.07)}
.kdtsr .tcard .pic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg, rgba(250,248,242,.72) 0%, rgba(250,248,242,.04) 42%, rgba(250,248,242,0) 68%)}
.kdtsr .tcard .loc{position:absolute;z-index:2;left:12px;top:12px;font-family:var(--ui);font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);background:rgba(255,204,0,.92);padding:4px 9px;border-radius:20px;box-shadow:0 4px 10px -4px rgba(40,45,30,.4)}
.kdtsr .tcard .rate{position:absolute;z-index:2;right:12px;top:12px;display:flex;align-items:center;gap:4px;
  font-family:var(--ui);font-size:.62rem;font-weight:700;color:var(--text);background:rgba(255,255,255,.9);
  padding:3px 8px;border-radius:20px;box-shadow:0 4px 10px -5px rgba(40,45,30,.4)}
.kdtsr .tcard .rate svg{width:11px;height:11px;color:var(--gold)}
.kdtsr .tcard .cbody{padding:13px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.kdtsr .tcard h3{font-family:var(--disp);font-weight:600;font-size:1.02rem;line-height:1.16;letter-spacing:-.005em;color:var(--text);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kdtsr .tcard .dur{font-family:var(--ui);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:7px}
.kdtsr .tcard .dur::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--green)}
.kdtsr .tcard .row{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:6px}
.kdtsr .tcard .price{font-family:var(--ui);font-weight:400;font-size:.62rem;letter-spacing:.02em;text-transform:uppercase;color:var(--text-faint)}
.kdtsr .tcard .price b{display:block;font-family:var(--disp);font-weight:700;font-size:1.18rem;letter-spacing:0;text-transform:none;color:var(--green);margin-top:1px}
.kdtsr .tcard .go{font-family:var(--ui);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:5px;transition:gap .3s}
.kdtsr .tcard:hover .go{gap:9px}
.kdtsr .tcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.kdtsr .tcard[hidden]{display:none}

.kdtsr .lib-empty{font-family:var(--ui);font-size:.95rem;color:var(--text-dim);padding:44px 6px;display:none}
.kdtsr .lib-empty.on{display:block}

@media(prefers-reduced-motion:reduce){
  .kdtsr *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .kdtsr .bg .layer{transform:none!important}
  .kdtsr .explore .chev{animation:none}
  .kdtsr .lib-track{scroll-behavior:auto}
  .kdtsr .tcard:hover .pic img{transform:none}
  /* keep the center-mode dim gentle and drop the scale so nothing shifts */
  .kdtsr .tcard:not(.is-active){opacity:.72;transform:none}
}

/* ---- stretched link: whole card clickable, while the schema anchor's text
        content stays the title ONLY (so klld-tour-itemlist-schema.php reads a
        clean TouristTrip name). data-price / data-thumb live on this anchor. ---- */
.kdtsr .tcard{position:relative}
.kdtsr .tcard .tlink{color:inherit;text-decoration:none;outline:none}
.kdtsr .tcard .tlink::after{content:"";position:absolute;inset:0;z-index:4}
.kdtsr .tcard:focus-within{outline:2px solid var(--gold);outline-offset:3px}