/* Responsive helpers for legacy inline styles
   This file uses selective !important overrides to adapt inline layouts
   for smaller viewports without rewriting the entire HTML.
*/

/* Base */
img, svg { max-width: 100%; height: auto; display: block; }
* { box-sizing: border-box; }
input, button, a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* allow inputs to shrink inside flex containers */
input { min-width: 0; }

/* Buttons & links to wrap on small screens */
a[style] { word-break: keep-all; }

/* Utility: target elements that use grid-template-columns inline and force single column on smaller screens */
@media (max-width: 900px) {
  /* Convert most multi-column grids to single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 18px !important; }
  /* Reduce 4-column lists to 2 columns */
  [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  [style*="repeat(3,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

  /* Header: mobile layout with logo + hamburger aligned */
  header > div { position: relative !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
  header > div > a:first-child { position: static !important; left: auto !important; }
  #mobile-menu-btn { position: static !important; left: auto !important; right: 0 !important; transform: none !important; z-index: 80 !important; }
  header nav { display: none !important; }
  header a.desktop-cta { display: none !important; }

  /* Hero adjustments */
  section[id="home"] { padding: 36px 18px 48px !important; }
  section[id="home"] h1 { font-size: 32px !important; line-height: 1.08 !important; }
  [style*="height:440px"] { height: 260px !important; }

  /* Cek Resi: stack input + button */
  [style*="Cek Resi Pengiriman"] + div, [style*="display:flex;gap:10px;"] { flex-direction: column !important; }
  [style*="Cek Resi Pengiriman"] input, [style*="display:flex;gap:10px;"] input { width: 100% !important; }
  [style*="Cek Resi Pengiriman"] button, [style*="display:flex;gap:10px;"] button { width: 100% !important; }

  /* Footer: stack columns */
  footer > div[style*="display:grid;grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* General paddings */
  [style*="padding:84px 24px"] { padding: 40px 18px !important; }
  [style*="padding:64px 24px"] { padding: 28px 18px !important; }
}

@media (max-width: 480px) {
  [style*="repeat(2,1fr)"] { grid-template-columns: 1fr !important; }
  nav[style*="display:flex"] { gap: 12px !important; font-size: 14px !important; }
  header > div img { height: 46px !important; }
  h1 { font-size: 28px !important; }
  [style*="padding:40px 18px"] { padding: 28px 14px !important; }
}

/* Small fixes */
[style*="overflow-x:hidden"] { overflow-x: hidden !important; }

/* Make inline SVGs scale correctly inside their containers */
svg[viewBox] { width: 100% !important; height: auto !important; }

/* Ensure interactive elements have comfortable tap targets on mobile */
button, a[style*="padding"] { padding-top: 10px !important; padding-bottom: 10px !important; }

/* Prevent large shadows from overflowing on small screens */
[style*="box-shadow"] { overflow: visible; }

/* Mobile navigation (hamburger) */
#mobile-menu-btn { 
  display: none; 
  background: transparent; 
  border: none; 
  color: #10254a; 
  font-size: 24px; 
  padding: 8px 10px; 
  border-radius: 8px; 
  cursor: pointer; 
  z-index: 85; 
  position: relative;
  pointer-events: auto;
}
#mobile-menu-btn:hover { background: rgba(43,124,211,.1); }
#mobile-nav { 
  display: none; 
  position: fixed; 
  top: 0; 
  right: 0; 
  width: 320px; 
  max-width: 90%; 
  height: 100vh; 
  background: linear-gradient(180deg,#08263f, #0c2a46); 
  color: #fff; 
  transform: translateX(100%); 
  transition: transform .28s cubic-bezier(.2,.9,.3,1); 
  z-index: 9998; 
  padding: 28px 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 18px; 
  pointer-events: auto;
  overflow-y: auto; 
}
#mobile-nav.open { 
  transform: translateX(0); 
  pointer-events: auto; 
}
#mobile-nav header { display:flex; align-items:center; justify-content:space-between; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.08); }
#mobile-nav .close { background:rgba(255,255,255,.08); border:none; color:#fff; padding:10px 12px; border-radius:8px; font-size:20px; transition:background .18s ease; cursor:pointer; }
#mobile-nav .close:hover { background:rgba(255,255,255,.15); }
#mobile-nav nav { display:flex; flex-direction:column; gap:18px; margin-top:24px; margin-bottom:24px; flex:1; }
#mobile-nav a { color:#fff; font-weight:700; font-size:16px; padding:8px 0; transition:color .18s ease; }
#mobile-nav a:not(.cta):hover { color:#f2922a; }
#mobile-nav .cta { margin-top:auto; display:block; background:linear-gradient(135deg,#F2922A,#e07c12); color:#fff; padding:14px 20px; border-radius:12px; text-align:center; font-weight:800; font-size:16px; transition:box-shadow .18s ease; box-shadow:0 6px 16px rgba(242,146,42,.3); }

body.mobile-nav-open { overflow: hidden; }
body.mobile-nav-open #mobile-nav { transform: translateX(0); }

@media (max-width: 900px) {
  #mobile-menu-btn { display: block !important; }
  /* hide desktop nav and header CTA on small screens to avoid duplication */
  header nav { display: none !important; }
  header > div a[style*="Let's Talk"], header a[style*="Let's Talk"] { display: none !important; }
  /* show mobile overlay */
  #mobile-nav { display: flex !important; }
}

@media (max-width: 480px) {
  #mobile-nav { width: 88%; }
  #mobile-nav a { font-size: 16px; }
}

/* Sticky header shrink */
header { transition: box-shadow .18s ease, background .18s ease; }
header > div { transition: padding .18s ease, align-items .18s ease; }
header.header--shrink { box-shadow: 0 6px 18px rgba(16,58,115,.12); }
header.header--shrink > div { padding: 6px 18px !important; }
header.header--shrink img { height: 42px !important; }
header.header--shrink nav { font-size: 14px !important; }

/* Back to top button */
#back-to-top { position: fixed; right: 18px; bottom: 20px; width:44px; height:44px; border-radius:22px; background:linear-gradient(135deg,#F2922A,#e07c12); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(242,146,42,.25); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s, transform .18s, visibility .18s; z-index:99999; }
#back-to-top.show { opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:focus { outline:2px solid rgba(255,255,255,.18); }

@media (max-width: 480px) {
  #back-to-top { right: 12px; bottom: 16px; width:48px; height:48px; border-radius:24px; }
}