/* =========================================================
   TABIFLOW TITANIUM LANDING SYSTEM
   File: C:\Dev\tabiflow-ai\Public\styles\styles.css
   Scope:
   - Header
   - Hero
   - Feature Row
   - Travel Tools
   - Planner Entry
   - Footer
   ========================================================= */

/* =========================
   1) ROOT TOKENS
   ========================= */
:root{
  --bg: #07111a;
  --bg-elev: rgba(255,255,255,0.05);
  --bg-elev-2: rgba(255,255,255,0.08);
  --surface: rgba(7,17,26,0.72);
  --surface-strong: rgba(10,20,31,0.88);
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.16);
  --text: #f4f7fb;
  --muted: rgba(244,247,251,0.76);
  --soft: rgba(244,247,251,0.58);
  --accent: #b8d7ff;
  --accent-strong: #d6e7ff;
  --success: #9ee6b8;
  --shadow-lg: 0 18px 46px rgba(0,0,0,0.28);
  --shadow-md: 0 10px 28px rgba(0,0,0,0.22);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --container: 1120px;
  --tf-max-width: 1200px;
  --tf-side-padding: 20px;
  --header-h: 72px;
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
}

/* =========================
   2) RESET / BASE
   ========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  margin:0;
  padding:0;
  min-height:100%;
}

body{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
   background: var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

/* =========================
   3) BACKGROUND SYSTEM
   ========================= */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(180deg, rgba(3,8,13,0.15) 0%, rgba(3,8,13,0.55) 100%),
    var(--seasonal-hero-image, url("../assets/backgrounds/seasons/spring/japan-spring.webp"));
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.03);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at top right, rgba(184,215,255,0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255,255,255,0.05), transparent 24%);
}

/* =========================
   4) LAYOUT HELPERS
   ========================= */
.page-shell,
.site-shell{
  width:min(calc(100% - 24px), var(--container));
  margin-inline:auto;
}

.section{
  padding:var(--space-6) 0;
}

.section-tight{
  padding:var(--space-5) 0;
}

.stack-sm > * + *{
  margin-top:var(--space-3);
}

.stack-md > * + *{
  margin-top:var(--space-4);
}

.stack-lg > * + *{
  margin-top:var(--space-5);
}

/* =========================
   5) HEADER
   Expected hooks:
   .site-header
   .header-inner
   .brand
   .brand-mark
   .brand-text
   .header-actions
   .menu-toggle
   [data-mobile-drawer]
   ========================= */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  min-height:var(--header-h);
  backdrop-filter:blur(16px);
  background:var(--tf-header-bg, rgba(5,12,18,0.38));
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.header-inner{
  width:min(calc(100% - 24px), var(--container));
  min-height:var(--header-h);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.brand-mark{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  flex:0 0 auto;
}

.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.brand-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
}

.brand-subtitle{
  font-size:12px;
  color:var(--soft);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.menu-toggle{
  min-width:46px;
  min-height:46px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  display:none;
  align-items:center;
  justify-content:center;
}

[data-mobile-drawer]{
  display:none;
}

/* =========================
   6) BUTTONS
   Expected hooks:
   .btn
   .btn-ghost
   .btn-block
   .btn-icon
   ========================= */
.btn{
  min-height:48px;
  border:0;
  border-radius:999px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(180deg, rgba(232,241,255,0.96), rgba(205,223,246,0.94));
  color:#07111a;
  font-weight:700;
  letter-spacing:0.01em;
  box-shadow:var(--shadow-md);
  transition:transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.btn:hover,
.btn:focus-visible{
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn-ghost{
  background:rgba(255,255,255,0.06);
  color:var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}

.btn-block{
  width:100%;
}

.btn-icon{
  width:48px;
  min-width:48px;
  padding-inline:0;
}

/* =========================
   7) HERO
   Expected hooks:
   .hero
   .hero-card
   .hero-eyebrow
   .hero-title
   .hero-subtitle
   .hero-actions
   .feature-pills
   .feature-pill
   ========================= */
.hero{
  padding:clamp(28px, 7vw, 72px) 0 24px;
}

.hero-card{
  width:min(100%, 840px);
  padding:clamp(22px, 5vw, 40px);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(8,18,28,0.44), rgba(8,18,28,0.26));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:var(--accent-strong);
  border:1px solid rgba(255,255,255,0.08);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.hero-title{
  margin:14px 0 10px;
  font-size:clamp(34px, 8vw, 56px);
  line-height:1.04;
  letter-spacing:-0.03em;
  max-width:12ch;
}

.hero-subtitle{
  margin:0;
  max-width:56ch;
  font-size:clamp(15px, 3.8vw, 18px);
  color:var(--muted);
}

.hero-actions{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.feature-pills{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.feature-pill{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:var(--text);
  font-size:13px;
  white-space:nowrap;
}

/* =========================
   8) FEATURE ROW
   Expected hooks:
   .feature-row
   .feature-grid
   .feature-card
   ========================= */
.feature-row{
  padding:10px 0 6px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.feature-card{
  min-height:96px;
  padding:16px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow-md);
}

.feature-card strong{
  display:block;
  margin-bottom:4px;
  font-size:14px;
  line-height:1.2;
}

.feature-card p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

/* =========================
   9) TRAVEL TOOLS
   Expected hooks:
   .travel-tools
   .section-heading
   .tool-list
   .tool-card
   .tool-icon
   .tool-content
   .tool-title
   .tool-sub
   .tool-arrow
   ========================= */
.travel-tools{
  padding:18px 0 8px;
}

.section-heading{
  margin:0 0 14px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.02em;
}

.tool-list{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* future-ready (tablet+) */
@media (min-width: 768px){
  .tool-list{
    grid-template-columns:1fr;
  }
}

.tool-card{
  width:100%;
  min-height:84px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.10);
  background:linear-gradient(180deg, rgba(10,20,31,0.88), rgba(9,17,27,0.74));
  box-shadow:var(--shadow-md);
  transition:transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.tool-card:hover,
.tool-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,0.22);
  background:linear-gradient(180deg, rgba(18,30,44,0.96), rgba(10,20,31,0.88));
}

.tool-card.primary{
  background:linear-gradient(180deg, rgba(18,36,54,0.98), rgba(10,20,31,0.88));
  border:1px solid rgba(184,215,255,0.25);
  box-shadow:0 12px 36px rgba(0,0,0,0.35);
}

.tool-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:21px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
}

.tool-content{
  min-width:0;
  flex:1 1 auto;
}

.tool-title{
  font-size:15px;
  font-weight:700;
  line-height:1.2;
}

.tool-sub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
  line-height:1.35;
}

.tool-arrow{
  flex:0 0 auto;
  color:var(--soft);
  font-size:18px;
}

/* =========================
   10) PLANNER ENTRY
   Expected hooks:
   .planner-entry
   .planner-entry-card
   .planner-entry-copy
   .planner-entry-actions
   ========================= */
.planner-entry{
  padding:16px 0 8px;
}

.planner-entry-card{
  padding:20px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.planner-entry-copy{
  min-width:0;
  flex:1 1 auto;
}

.planner-entry-copy h2,
.planner-entry-copy h3{
  margin:0 0 8px;
  font-size:22px;
  line-height:1.1;
  letter-spacing:-0.02em;
}

.planner-entry-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.planner-entry-actions{
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

/* =========================
   11) FOOTER
   Expected hooks:
   .site-footer
   .footer-inner
   .footer-links
   ========================= */
.site-footer{
  padding:28px 0 36px;
}

.footer-inner{
  width:min(calc(100% - 24px), var(--container));
  margin-inline:auto;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.footer-copy{
  color:var(--soft);
  font-size:13px;
}

.footer-links{
  display:flex;
  align-items:center;
  gap:10px 12px;
  flex-wrap:wrap;
}

.footer-links a{
  color:var(--muted);
  font-size:13px;
}

.footer-links a:hover,
.footer-links a:focus-visible{
  color:var(--text);
}

/* =========================
   12) MOBILE MENU / DRAWER (TITANIUM CLEAN)
   SINGLE OWNER: [data-mobile-drawer]
   ========================= */

[data-mobile-overlay]{
  position:fixed;
  inset:0;
  background:rgba(2,7,11,0.56);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 180ms ease;
  z-index:70;
}

[data-mobile-drawer]{
  position:fixed;
  top:calc(var(--header-h) + 8px);
  left:12px;
  right:12px;

  display:block;

  padding:12px;
  border-radius:22px;
  background:rgba(9,17,27,0.98);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:var(--shadow-lg);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(-10px);
  transition:opacity 180ms ease, transform 180ms ease;

  z-index:80;
  backdrop-filter:blur(10px);
}

/* NAV CONTENT */

[data-mobile-drawer] nav,
[data-mobile-drawer] .drawer-links{
  display:grid;
  gap:8px;
}

[data-mobile-drawer] a,
[data-mobile-drawer] button{
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  background:rgba(255,255,255,0.04);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

[data-mobile-drawer] .drawer-links{
  display:grid;
  gap:8px;
}

/* ACTIVE STATE */

body.nav-open{
  overflow:hidden;
  touch-action:none;
}

body.nav-open [data-mobile-overlay]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.nav-open [data-mobile-drawer]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

/* ACTIVE STATE */

body.nav-open{
  overflow:hidden;
  touch-action:none;
}

body.nav-open [data-mobile-overlay]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

body.nav-open [data-mobile-drawer]{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
/* =========================
   13) UTILITIES
   ========================= */
.hidden{
  display:none !important;
}

.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  border:0 !important;
}

.text-muted{
  color:var(--muted);
}

.center{
  text-align:center;
}

/* =========================
   14) TABLET
   ========================= */
@media (max-width: 860px){
  .feature-grid{
    grid-template-columns:1fr;
  }

  .planner-entry-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .planner-entry-actions{
    width:100%;
  }

  .planner-entry-actions .btn{
    flex:1 1 220px;
  }
}

/* =========================
   15) MOBILE
   ========================= */
@media (max-width: 640px){
  :root{
    --header-h: 66px;
  }

  .page-shell,
  .site-shell,
  .header-inner,
  .footer-inner{
    width:min(calc(100% - 16px), var(--container));
  }

  .site-header{
    min-height:var(--header-h);
  }

  .header-inner{
    min-height:var(--header-h);
  }

  .menu-toggle{
    display:inline-flex;
  }

  .header-actions .desktop-only{
    display:none !important;
  }

  .hero{
    padding:16px 0 10px;
  }

  .hero-card{
    border-radius:24px;
    padding:18px 16px;
  }

  .hero-title{
    max-width:14ch;
    font-size:clamp(26px, 7.8vw, 34px);
    line-height:1.08;
    letter-spacing:-0.02em;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:44px;
    padding:10px 14px;
    font-size:14px;
  }

  .feature-pills{
    gap:6px;
  }

  .feature-pill{
    max-width:100%;
    white-space:normal;
  }

  .feature-row{
    padding:10px 0 6px;
  }

  .tool-card{
    min-height:76px;
    padding:13px;
    border-radius:18px;
  }

  .tool-title{
    font-size:14px;
  }

  .tool-sub{
    font-size:12px;
  }

  .planner-entry{
    padding:16px 0 8px;
  }

  .planner-entry-card{
    padding:18px;
    border-radius:22px;
  }

  .planner-entry-copy h2,
  .planner-entry-copy h3{
    font-size:20px;
  }

  .footer-inner{
    padding-top:14px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  
}

  /* 🔒 TITANIUM: HERO TITLE BALANCE */
.hero-title{
  max-width:14ch;
  font-size:clamp(26px, 7.8vw, 34px);
  line-height:1.08;
}
.hero-title{
  letter-spacing:-0.02em;
}

 .hero-actions{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}

  .hero-actions .btn{
    width:100%;
    min-height:44px;
    padding:10px 14px;
    font-size:14px;
  }

  .feature-pills{
  gap:6px;
}

  .feature-pill{
    max-width:100%;
    white-space:normal;
  }

.tool-card{
  min-height:76px;
  padding:13px;
  border-radius:18px;
}

  .tool-title{
    font-size:14px;
  }

  .tool-sub{
    font-size:12px;
  }

  .planner-entry-card{
    padding:18px;
    border-radius:22px;
  }

  .planner-entry-copy h2,
  .planner-entry-copy h3{
    font-size:20px;
  }

  .footer-inner{
  padding-top:14px;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  }
}

/* =========================
   16) SMALL MOBILE
   ========================= */
@media (max-width: 430px){
  body{
    font-size:15px;
  }

  .brand-title{
    font-size:14px;
  }

  .brand-subtitle{
    font-size:11px;
  }

  .feature-card{
    padding:12px;
    min-height:unset;
    border-radius:18px;
  }

  .feature-card strong{
    display:block;
    margin-bottom:4px;
    font-size:14px;
    line-height:1.2;
  }

  .feature-card p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
  }

  .travel-tools{
    padding:18px 0 8px;
  }

  .tool-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    border-radius:14px;
    font-size:19px;
  }

  .tool-badge{
    display:inline-block;
    font-size:11px;
    padding:4px 8px;
    margin-bottom:8px;
    border-radius:999px;
    background:rgba(184,215,255,0.15);
    color:var(--accent);
    border:1px solid rgba(184,215,255,0.25);
    letter-spacing:0.3px;
  }

  .planner-entry-actions{
    width:100%;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  .planner-entry-actions .btn{
    width:100%;
    max-width:320px;
    margin:0 auto;
    min-height:44px;
    padding:10px 18px;
    font-size:14px;
    border-radius:999px;
  }

  .footer-links{
    display:flex;
    align-items:center;
    gap:10px 12px;
    flex-wrap:wrap;
  }
}
/* 🔒 TITANIUM: PLANNER BUTTON SIZE LOCK */
.planner-entry-actions .btn{
  width:100%;
  max-width:320px;
  margin:0 auto;
  min-height:44px;
  padding:10px 18px;
  font-size:14px;
  border-radius:999px;
}
/* FORCE Titanium legacy buttons — FINAL */

button.titanium-legacy-btn,
.titanium-legacy-btn.btn,
.titanium-legacy-btn.btn-ghost {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 8px 14px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;

  color: #fff !important;
  font-size: 14px;
  cursor: pointer;

  backdrop-filter: blur(8px);

  transition: all 0.2s ease;
}

button.titanium-legacy-btn:hover,
.titanium-legacy-btn.btn:hover,
.titanium-legacy-btn.btn-ghost:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: translateY(-1px);
}
/* =========================================
   TABIFLOW — PLANNER CLEAN RESET
   (Overrides legacy safely)
========================================= */

#planner,
#planner * {
  box-sizing: border-box;
}

/* kill legacy spacing conflicts */
#planner .panel-row,
#planner .panel-actions {
  all: unset;
  display: block;
}

/* normalize inputs */
#planner input,
#planner select,
#planner textarea {
  font-family: inherit;
}

/* remove any leftover ghost UI */
#planner .planner-more,
#planner [class*="more"],
#planner [class*="menu"] {
  display: none !important;
}
/* =========================================
   TABIFLOW — PLANNER BUTTON IMPROVEMENTS
========================================= */

/* top planner toolbar button */
#build-btn{
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* planner action row */
.day-card [data-add],
.day-card [data-route]{
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* add stop = secondary */
.day-card [data-add]{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
}

/* show route = primary */
.day-card [data-route]{
  background: rgba(225,236,255,0.92);
  border: 1px solid rgba(225,236,255,0.92);
  color: #10192f;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

/* remove stop button */
.day-card [data-remove]{
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  border-radius: 999px !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
}

/* button hover polish */
#build-btn:hover,
.day-card [data-add]:hover,
.day-card [data-route]:hover,
.day-card [data-remove]:hover{
  transform: translateY(-1px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

/* mobile tuning */
@media (max-width: 768px){
  #build-btn{
    min-height: 44px;
    font-size: 17px;
  }

  .day-card [data-add],
  .day-card [data-route]{
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px;
  }

  .day-card [data-remove]{
    width: 40px !important;
    min-width: 40px;
    height: 40px !important;
    font-size: 20px;
  }
}
/* =========================================
   TABIFLOW — MOBILE PLANNER TIGHTENING
========================================= */
@media (max-width: 768px){

  .container{
    padding: 12px;
  }

  #planner,
  #map,
  .planner-ai-shell{
    padding: 12px;
    margin: 10px 0;
  }

  .tf-topbar{
    gap: 8px;
    margin-bottom: 10px;
  }

  .tf-topbar .btn{
    min-height: 42px;
    padding: 0 16px;
    font-size: 14px;
  }

  .panel-title{
    font-size: 14px;
    margin-bottom: 6px;
  }

  .tf-toolbar{
    gap: 8px;
    margin-bottom: 12px;
  }

  #days-input,
  #country-select,
  #city-select{
    min-height: 42px;
    font-size: 15px;
  }

  #build-btn{
    min-height: 42px;
    font-size: 16px;
    padding: 0 18px;
  }

  .day-card{
    padding: 10px 0 6px;
    margin-bottom: 10px;
  }

  .day-card strong{
    font-size: 15px;
  }

  .day-card input,
  .day-card select,
  .day-card textarea{
    min-height: 40px;
    font-size: 14px;
  }

  .stop-row{
    gap: 8px !important;
    margin-bottom: 6px !important;
  }

  .stop-row .input.input-sm{
    width: 84px !important;
    min-width: 84px !important;
  }

  .day-card [data-remove]{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    font-size: 18px;
  }

  .day-card [data-add],
  .day-card [data-route]{
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .day-card [data-route]{
    box-shadow: none;
  }

  #map .btn{
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .planner-ai-shell h3{
    font-size: 16px;
    margin-bottom: 8px !important;
  }

  .planner-ai-shell .btn{
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }

  .planner-ai-shell textarea{
    min-height: 92px;
    font-size: 14px;
  }

  #ai-run-btn{
    min-height: 42px;
    padding: 0 18px;
    font-size: 15px;
  }
}
/* =========================================
   DAY COMPRESSION
========================================= */
.day-card{
  padding: 8px 0 4px;
  margin-bottom: 8px;
}

.day-card strong{
  margin-bottom: 6px;
  display:block;
}

/* reduce vertical gap between fields */
.day-card input{
  margin-bottom: 6px;
}

.day-card .stop-row{
  margin-bottom: 4px !important;
}
/* =========================================
   BUTTON HIERARCHY FIX
========================================= */

/* secondary action */
.day-card [data-add]{
  opacity: 0.7;
  font-size: 13px;
  padding: 0 12px;
}

/* primary action */
.day-card [data-route]{
  font-weight: 600;
}

/* spacing between buttons */
.day-card .btn{
  gap: 8px;
}
/* =========================================
   DAY HEADER IMPROVEMENT
========================================= */

.day-card strong{
  font-size: 15px;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 4px;
}

/* make title feel attached to Day */
.day-card [data-day-title]{
  margin-top: 2px;
}
/* =========================================
   STOP ACTION GROUP
========================================= */

.stop-actions{
  display: flex;
  gap: 6px;
  margin-left: 4px;
}

.stop-actions .btn{
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 999px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* pin button */
[data-pin]{
  background: rgba(255,255,255,0.06);
}

/* remove button */
[data-remove]{
  background: rgba(255,255,255,0.08);
}

/* hover */
.stop-actions .btn:hover{
  transform: translateY(-1px);
}.time-pill {
  min-width: 80px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  font-size: 13px;
  cursor: pointer;
}

.time-dropdown {
  display: none;
  position: absolute;
  background: #111;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 999;
  padding: 6px;
}

.time-option {
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
}

.time-option:hover {
  background: rgba(255,255,255,0.08);
}