/* ============================================================
   TRIPSORB — TACTILE DEPTH design system  (site-wide, public)
   ------------------------------------------------------------
   One material everywhere: soft moulded surfaces with real light.
     • LIGHT surfaces (sand/clay sections) → dual-shadow "raised"
       cards and "carved" inset inputs.
     • DARK surfaces (ink/navy sections)   → extruded panels with
       a top highlight and a deep drop shadow.
     • Buttons you touch → glossy coral with a genuine pressed state.
   Loaded after the base styles via head_meta.php (skips /admin/).
   Everything is !important so load order never matters. Remove the
   one <link> to fully revert.
   ============================================================ */
:root{
  --tac-up:7px 7px 18px rgba(184,170,146,.5), -7px -7px 18px rgba(255,255,255,.92);
  --tac-up-h:10px 10px 28px rgba(184,170,146,.55), -9px -9px 24px #ffffff;
  --tac-up-sm:4px 4px 11px rgba(184,170,146,.45), -4px -4px 11px #ffffff;
  --tac-in:inset 4px 4px 9px rgba(184,170,146,.5), inset -4px -4px 9px #ffffff;
  --tac-clay:#f2ebde;
  --tac-coral:linear-gradient(180deg,#ff7d5e 0%,#ff5b41 58%,#ef4a30 100%);
  --tac-gloss:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(170,42,22,.30);
  --tac-press:inset 0 2px 7px rgba(150,40,20,.5);
  --tacd-up:0 14px 28px -14px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.09);
}

/* -------------------------------------------------------------
   PRESSABLE PRIMARY BUTTONS (work on any background)
   ------------------------------------------------------------- */
.btn-grad,.btn-primary,.searchform .go,.dgbox button,.go{
  background:var(--tac-coral)!important;color:#fff!important;border:none!important;
  box-shadow:var(--tac-gloss), 0 12px 26px -10px rgba(255,91,65,.7)!important;
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease!important;
}
.btn-grad:hover,.btn-primary:hover,.dgbox button:hover{transform:translateY(-2px)!important;filter:brightness(1.03)!important}
.btn-grad:active,.btn-primary:active,.searchform .go:active,.dgbox button:active{
  transform:translateY(1px) scale(.992)!important;
  box-shadow:var(--tac-press), 0 4px 10px -6px rgba(255,91,65,.5)!important;
}

/* DARK outline pill (hero "Browse experiences", "List experience") → raised dark */
.btn-line{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.20)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 10px 22px -12px rgba(0,0,0,.55)!important;
  transition:transform .14s ease, background .18s ease!important;
}
.btn-line:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07))!important;transform:translateY(-1px)!important}
.btn-line:active{transform:translateY(1px)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)!important}

/* LIGHT ghost button → soft raised clay */
.btn-ghost{
  background:linear-gradient(180deg,#ffffff,#f1ead8)!important;border:none!important;color:var(--ts-ink)!important;
  box-shadow:var(--tac-up-sm)!important;transition:transform .14s ease, box-shadow .18s ease!important;
}
.btn-ghost:hover{transform:translateY(-1px)!important}
.btn-ghost:active{transform:translateY(1px)!important;box-shadow:var(--tac-in)!important}

/* Carousel round arrows — dark on .tours, clay on .dests */
.tours .round-arrow{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(0,0,0,.5)!important;
}
.dests .round-arrow{
  background:var(--tac-clay)!important;border:none!important;color:var(--ts-ink)!important;
  box-shadow:var(--tac-up-sm)!important;
}
.round-arrow{transition:transform .14s ease!important}
.round-arrow:hover{transform:translateY(-1px)!important}
.round-arrow:active{transform:translateY(1px) scale(.96)!important}

/* -------------------------------------------------------------
   CATEGORY CIRCLES — glossy moulded discs (keep their colours)
   ------------------------------------------------------------- */
.dir .c{
  border:none!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 9px rgba(0,0,0,.22), 0 14px 28px -12px rgba(0,0,0,.6)!important;
  transition:transform .16s ease!important;
}
.dir:hover .c{transform:translateY(-3px)!important}
.dir:active .c{transform:translateY(1px)!important;box-shadow:inset 0 3px 8px rgba(0,0,0,.35), 0 6px 14px -10px rgba(0,0,0,.5)!important}

/* -------------------------------------------------------------
   STAT CARDS (dark) — extruded panels, glossy icon badge
   ------------------------------------------------------------- */
.tstat{
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:var(--tacd-up)!important;
}
.tstat .ic{box-shadow:var(--tac-gloss)!important}

/* -------------------------------------------------------------
   PHOTO CARDS (dark) — depth + lift
   ------------------------------------------------------------- */
.tcard,.bcard2{
  border-radius:22px!important;
  box-shadow:0 26px 50px -28px rgba(20,33,61,.6), inset 0 0 0 1px rgba(255,255,255,.10)!important;
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease!important;
}
.tcard:hover,.bcard2:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 44px 72px -30px rgba(20,33,61,.72), inset 0 0 0 1px rgba(255,255,255,.18)!important;
}

/* -------------------------------------------------------------
   LIGHT CARDS (destinations, why-grid, content pages) → raised clay
   ------------------------------------------------------------- */
.dcard,.wcard,.glass{
  background:var(--tac-clay)!important;border:none!important;border-radius:20px!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:var(--tac-up)!important;
  transition:transform .2s ease, box-shadow .2s ease!important;
}
.dcard:hover,.wcard:hover{transform:translateY(-5px)!important;box-shadow:var(--tac-up-h)!important}
.dcard .flag{box-shadow:var(--tac-up-sm)!important;border:3px solid var(--tac-clay)!important}

/* feature-card icon badges read as moulded */
.wcard .ic,.wcard .icon,.pg-feat .ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px -8px rgba(180,90,60,.5)!important}

/* -------------------------------------------------------------
   SEARCH PANEL (light) — raised card, carved field, glossy submit
   ------------------------------------------------------------- */
.searchcard{
  border-radius:26px!important;background:#f7f1e7!important;
  box-shadow:var(--tac-up)!important;
}
.searchform{
  border:none!important;background:#efe7d9!important;border-radius:16px!important;overflow:hidden!important;
  box-shadow:var(--tac-in)!important;
}
.searchform .f{border-right:1px solid rgba(184,170,146,.28)!important;background:transparent!important}
.searchform .go{border-radius:0!important}

/* carved text inputs across forms */
.searchform .f input,.searchform .f select,.pg-input,.dgbox input{color:var(--ts-ink)}
.pg-input{
  background:#efe7d9!important;border:none!important;
  box-shadow:var(--tac-in)!important;
}
.pg-input:focus{box-shadow:var(--tac-in), 0 0 0 3px rgba(255,91,65,.18)!important}

/* -------------------------------------------------------------
   AI PLANNER (dark) — carved field + glossy submit + tactile chips
   ------------------------------------------------------------- */
.dgbox{
  background:rgba(0,0,0,.24)!important;border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 2px 9px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.dg-chip{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 5px 11px -7px rgba(0,0,0,.55)!important;
  transition:transform .14s ease, background .16s ease!important;
}
.dg-chip:hover{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.06))!important;transform:translateY(-1px)!important}
.dg-chip:active{transform:translateY(1px)!important;box-shadow:inset 0 2px 6px rgba(0,0,0,.45)!important}

/* -------------------------------------------------------------
   Accessibility — honour reduced motion
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn-grad,.btn-primary,.btn-line,.btn-ghost,.round-arrow,.dir .c,.tcard,.bcard2,
  .dcard,.wcard,.searchform .go,.dg-chip{transition:none!important}
  .tcard:hover,.bcard2:hover,.dcard:hover,.wcard:hover,.dir:hover .c{transform:none!important}
}

/* =============================================================
   LISTINGS PAGE — search bar + filter fields → carved tactile
   (added v0.78.1)
   ============================================================= */
.sbar .grp{
  background:#efe7d9!important;border:1px solid #e7ddcd!important;border-radius:14px!important;
  box-shadow:var(--tac-in)!important;
}
.sbar .grp input,.sbar .grp select{background:transparent!important;border:none!important;box-shadow:none!important;color:var(--ts-ink)!important}
.filters{background:var(--tac-clay)!important;border:none!important;border-radius:20px!important;box-shadow:var(--tac-up)!important}
.filters .frange input,.filters .fselect,.filters input[type=number],.filters input[type=text],.filters select{
  background:#efe7d9!important;border:none!important;border-radius:11px!important;
  box-shadow:var(--tac-in)!important;color:var(--ts-ink)!important;
}
.filters .frange input:focus,.filters .fselect:focus,.filters select:focus,.filters input:focus{
  outline:none!important;box-shadow:var(--tac-in), 0 0 0 3px rgba(255,91,65,.16)!important;
}
.fbtn{background:var(--tac-clay)!important;border:none!important;color:var(--ts-ink)!important;box-shadow:var(--tac-up-sm)!important}

/* Outline buttons that sit on LIGHT backgrounds (e.g. blog "View all
   articles") must stay readable — the global .btn-line is for dark areas. */
.blog .allbtn,.btn-line.allbtn,.allbtn{
  background:var(--tac-clay)!important;color:var(--ts-ink)!important;border:none!important;
  box-shadow:var(--tac-up-sm)!important;
}
.blog .allbtn:hover,.btn-line.allbtn:hover,.allbtn:hover{transform:translateY(-1px)!important;box-shadow:var(--tac-up)!important}

/* blog index article cards → raised clay (v0.79.0) */
.art-card{background:var(--tac-clay)!important;border:none!important;border-radius:18px!important;box-shadow:var(--tac-up)!important;transition:transform .2s ease,box-shadow .2s ease!important;overflow:hidden!important}
.art-card:hover{transform:translateY(-5px)!important;box-shadow:var(--tac-up-h)!important}

/* =============================================================
   SHARED PANELS — admin / organiser / user dashboards (v0.82.0)
   .card is always a light panel; give it a subtle raised depth
   (kept near-white so dense data tables stay clean and readable).
   ============================================================= */
.card{background:#faf6ef!important;border:none!important;box-shadow:var(--tac-up-sm)!important;border-radius:16px!important}
.surface{background:#f3ecdf!important;border:none!important;box-shadow:var(--tac-in)!important}

/* =============================================================
   NATIVE <select> — match the site (custom chevron, no OS arrow)
   (v0.84.0)  The closed control is themed; the option popup stays
   OS-native (not stylable cross-browser).
   ============================================================= */
select{
  -webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  padding-right:34px!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:15px 15px!important;
}
select,.sbar .grp select,.filters select,.filters .fselect,.fselect,.sortsel select,.searchform .f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314213D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;
}

/* =============================================================
   HUB chips, sub-tiles & empty states → tactile clay  (v0.89.0)
   Covers category.php / type.php (.chip, .subtile, .lempty)
   ============================================================= */
.chip{
  border:none!important;
  background:var(--tac-clay,#f2ebde)!important;
  color:var(--ts-ink)!important;
  box-shadow:4px 4px 11px rgba(184,170,146,.45),-4px -4px 11px #fff!important;
}
.chip:hover{
  color:var(--ts-coral)!important;
  box-shadow:5px 5px 14px rgba(184,170,146,.5),-5px -5px 14px #fff!important;
  transform:translateY(-1px)!important;
}
.subtile{
  border:none!important;
  background:var(--tac-clay,#f2ebde)!important;
  box-shadow:5px 5px 13px rgba(184,170,146,.45),-5px -5px 13px #fff!important;
}
.subtile:hover{
  box-shadow:7px 7px 18px rgba(184,170,146,.5),-6px -6px 16px #fff!important;
  transform:translateY(-2px)!important;
}
.subtile .ic{
  background:linear-gradient(180deg,#fff,#f0e8d8)!important;
  box-shadow:inset 2px 2px 5px rgba(184,170,146,.4),inset -2px -2px 5px #fff!important;
}
.lempty{
  border:none!important;
  background:var(--tac-clay,#f2ebde)!important;
  box-shadow:inset 5px 5px 12px rgba(184,170,146,.4),inset -5px -5px 12px rgba(255,255,255,.85)!important;
}