
/* ============================================================
   ToUr 7 — V21.6.1 PRO UI POLISH
   Visual-only refinement: typography, spacing, controls,
   responsive behavior, cards, surfaces and accessibility.
   Existing page structure and UX are intentionally preserved.
   ============================================================ */
:root{
  --t7-green:#087A4B;
  --t7-green-dark:#005A3C;
  --t7-green-soft:#EAF7F1;
  --t7-red:#D9363E;
  --t7-red-dark:#B9252D;
  --t7-ink:#17372C;
  --t7-text:#29483C;
  --t7-muted:#687A72;
  --t7-border:#D9E8E1;
  --t7-surface:#FFFFFF;
  --t7-bg:#F7FBF9;
  --t7-gold:#F4C542;
  --t7-radius-sm:10px;
  --t7-radius:14px;
  --t7-radius-lg:18px;
  --t7-shadow:0 8px 28px rgba(20,55,40,.07);
  --t7-shadow-lg:0 16px 45px rgba(20,55,40,.10);
  --t7-focus:0 0 0 3px rgba(0,107,63,.15);
  --t7-max:1200px;
}

/* Typography */
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--t7-ink);
  background:var(--t7-bg);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  color:var(--t7-ink);
  letter-spacing:-.025em;
  line-height:1.18;
}
p,li{line-height:1.6}
small{line-height:1.45}
a{color:var(--t7-green)}
::selection{background:rgba(0,107,63,.14);color:var(--t7-ink)}
:focus-visible{outline:none;box-shadow:var(--t7-focus);border-color:var(--t7-green)!important}

/* Common page rhythm */
main,section{scroll-margin-top:84px}
.container{
  width:min(100% - 32px,var(--t7-max));
  margin-inline:auto;
}
img{max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit}
input,select,textarea{
  min-height:46px;
  border:1px solid var(--t7-border);
  color:var(--t7-ink);
  background:#fff;
  border-radius:var(--t7-radius-sm);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--t7-green);
  box-shadow:var(--t7-focus);
  outline:none;
}

/* Navigation / brand */
.navbar,.top{
  min-height:64px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(225,232,228,.9);
  box-shadow:0 2px 16px rgba(15,45,32,.045);
  backdrop-filter:blur(12px);
}
.navbar-brand,.brand{
  letter-spacing:-.035em;
  white-space:nowrap;
}
.navbar-brand .badge{
  background:var(--t7-gold)!important;
}

/* Buttons */
button,.btn,.primary,.secondary,.cta,.linkbtn,[role="button"]{
  -webkit-tap-highlight-color:transparent;
}
button,.btn,.cta{
  min-height:44px;
  font-weight:700;
  letter-spacing:-.005em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
button:hover,.btn:hover,.cta:hover{
  transform:translateY(-1px);
}
button:active,.btn:active,.cta:active{transform:translateY(0)}
.primary,.btn-primary{
  background:var(--t7-green)!important;
  border-color:var(--t7-green)!important;
  color:#fff!important;
  box-shadow:0 5px 16px rgba(0,107,63,.16);
}
.primary:hover,.btn-primary:hover{background:var(--t7-green-dark)!important}
.secondary,.btn-secondary{
  background:var(--t7-green-soft)!important;
  color:var(--t7-green)!important;
  border-color:#D5E7DD!important;
}
.btn-danger,.danger,.important-cta{
  background:var(--t7-red)!important;
  border-color:var(--t7-red)!important;
  color:#fff!important;
  box-shadow:0 5px 16px rgba(217,16,23,.14);
}
.btn-danger:hover,.danger:hover,.important-cta:hover{background:var(--t7-red-dark)!important}

/* Cards / panels */
.card,.panel,.booking-card,.trip-card,.package-card,.destination-card,.hotel-card,.result-card{
  border-color:var(--t7-border);
  box-shadow:var(--t7-shadow);
}
.card:hover,.panel:hover,.package-card:hover,.destination-card:hover,.hotel-card:hover,.result-card:hover{
  box-shadow:var(--t7-shadow-lg);
}

/* Labels / forms */
label{
  color:var(--t7-text);
  font-size:.9rem;
  font-weight:650;
}
input::placeholder,textarea::placeholder{color:#89958F;opacity:1}

/* Prices */
.price,.amount,.total,.estimate strong,[class*="price"] strong{
  font-variant-numeric:tabular-nums;
}

/* Pills / badges */
.badge,.pill,.tag,.chip{
  line-height:1.2;
  font-weight:700;
}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--t7-muted)}
td,th{padding:12px 14px;border-bottom:1px solid var(--t7-border)}
tr:last-child td{border-bottom:0}

/* Links */
a{transition:color .16s ease,opacity .16s ease}
a:hover{color:var(--t7-green-dark)}

/* Desktop comfort */
@media (min-width:1200px){
  .container{width:min(100% - 64px,var(--t7-max))}
}
@media (min-width:768px){
  .page-header h1{letter-spacing:-.035em}
}

/* Tablet */
@media (max-width:991px){
  body{font-size:15.5px}
  .container{width:min(100% - 28px,1000px)}
}

/* Mobile: generous tap targets, tighter type, no horizontal overflow */
@media (max-width:767px){
  html,body{width:100%;overflow-x:hidden}
  body{font-size:15px;line-height:1.5}
  .container{
    width:calc(100% - 24px);
    padding-left:0!important;
    padding-right:0!important;
  }
  h1{font-size:clamp(28px,8.4vw,36px)!important;line-height:1.12!important}
  h2{font-size:clamp(23px,6.5vw,30px)!important}
  h3{font-size:clamp(19px,5.2vw,23px)!important}
  p{line-height:1.55}
  .navbar,.top{min-height:58px;padding-block:8px}
  .navbar-inner,.top{
    gap:10px;
  }
  .navbar-brand,.brand{font-size:20px}
  .top-actions{gap:8px}
  .top-actions a{font-size:12px}
  .navbar-brand .badge{display:none}
  button,.btn,.cta,.primary,.secondary{
    min-height:46px;
    padding:11px 15px;
  }
  input,select,textarea{min-height:46px;font-size:16px!important}
  .card,.panel{
    border-radius:14px;
    padding:18px;
  }
  .actions{
    gap:10px;
    flex-wrap:wrap;
  }
  .actions>*{
    flex:1 1 140px;
  }
  /* prevent fixed desktop grids from squeezing */
  .grid,.choice-grid,.recommendation-grid{
    grid-template-columns:1fr!important;
  }
  .flow-note{font-size:11px;gap:6px}
  .flow-note span{padding:7px 9px}
  .progress{gap:4px}
  .progress span{height:4px}
}

/* Small phones */
@media (max-width:380px){
  .container{width:calc(100% - 20px)}
  body{font-size:14.5px}
  .navbar-brand,.brand{font-size:19px}
  button,.btn,.cta{padding-inline:12px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}
