/* === Tailwind helper styles from luggage site === */
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
.shadow-soft{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.glass{backdrop-filter:saturate(180%) blur(14px);background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.6)); border-radius: 1rem; padding: 1rem;}
.panel-blue{border-color:#1338be}
.panel-red{border-color:#ef4444}
.panel-green{border-color:#22c55e}
/* thicker perimeter borders */
.panel-blue,.panel-red,.panel-green{border-width:3px}
details summary::-webkit-details-marker{display:none}
details[open] summary .carem{transform:rotate(180deg)}
[data-animate]{opacity:0;transform:translateY(8px);transition:all .55s cubic-bezier(.2,.8,.2,1)}
[data-animate].in{opacity:1;transform:none}
.wa-fab{position:fixed;left:1.25rem;bottom:1.25rem;z-index:50}

/* Bilingual toggle */
.t-en{display:inline}
.t-id{display:none}
html[data-lang=id] .t-en{display:none}
html[data-lang=id] .t-id{display:inline}

/* Toggle switch */
.lang-toggle{position:relative;width:70px;height:30px;background:#0492c2;border-radius:999px;padding:3px;display:inline-flex;align-items:center}
.lang-toggle input{appearance:none;width:100%;height:100%;margin:0;outline:none}
.lang-toggle .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;border:1px solid #cbd5e1;transition:transform .25s ease}
.lang-toggle .labels{font-size:10px;font-weight:700;letter-spacing:.3px;width:100%;display:flex;justify-content:space-between;padding:0 8px;color:#334155}
.lang-toggle input:checked + .knob{transform:translateX(40px)}
.lang-toggle input:checked ~ .labels .id{opacity:.5}
.lang-toggle input:not(:checked) ~ .labels .en{opacity:.5}

/* Responsive table → cards on small screens */
@media (max-width: 640px){
  table.responsive{display:block;width:100%}
  table.responsive thead{display:none}
  table.responsive tbody{display:grid;gap:.75rem}
  table.responsive tr{display:grid;padding:.75rem;border:1px solid #e2e8f0;border-radius:.75rem;background:#fff}
  table.responsive td{display:flex;justify-content:space-between;gap:.5rem}
  table.responsive td::before{content: attr(data-label); color:#64748b; font-weight:600;}
}

/* Form helpers */
.field{display:flex;flex-direction:column;gap:.375rem}
.input{border:1px solid #cbd5e1;border-radius:.75rem;padding:.625rem .75rem}
.label{font-size:.875rem;color:#334155;font-weight:600}
.hint{font-size:.75rem;color:#64748b}
/* ==== Trim hero space further (≈50% of the current override) ==== */
main { padding-top: 0 !important; }

/* First (hero) section container */
section.relative.bg-slate-50 > .container {
  /* Mobile */
  padding-top: 0.25rem !important;   /* was ~1.25rem */
  padding-bottom: 0.25rem !important;/* was ~1.75rem */
}

@media (min-width: 640px) { /* sm: */
  section.relative.bg-slate-50 > .container {
    padding-top: 0.25rem !important;  /* was ~1.75rem */
    padding-bottom: 0.25rem !important;  /* was ~2rem */
  }
}

@media (min-width: 1024px) { /* lg: */
  section.relative.bg-slate-50 > .container {
    padding-top: 0.25rem !important;     /* was ~2rem */
    padding-bottom: 0.25rem !important;/* was ~2.25rem */
  }
}

/* Safety: header placeholder never adds extra gap */
#header-placeholder { margin: 0 !important; }