/* ═══════════════════════════════════════════
   GrabInstaPro — Shared Mobile Styles
   Loaded by all pages. Overrides inline CSS.
═══════════════════════════════════════════ */

/* ── Base ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;-webkit-overflow-scrolling:touch}

/* ── Prevent iOS zoom on ALL inputs ─────── */
input,select,textarea,button{font-size:16px!important;-webkit-appearance:none;border-radius:0}
input[type="text"],input[type="url"],input[type="email"],input[type="search"]{font-size:16px!important}

/* ── Touch targets min 44×44px ──────────── */
button,.btn-dl,.btn-download,.btn-grad,.gip-btn,.result-btn,.btn-submit,.btn-white,.btn-sm{
  min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.chip,.q-opt,.toggle-btn,.album-chip,.cat-tag{
  min-height:40px;touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.nav-links a,.footer-links a,.mobile-menu a{
  -webkit-tap-highlight-color:transparent;touch-action:manipulation
}

/* ── Nav ────────────────────────────────── */
nav{height:60px;padding:0 4%!important}
.logo{font-size:1.25rem!important}

@media(max-width:768px){
  .nav-links{display:none!important}
  .hamburger{display:flex!important}
  .mobile-menu a{min-height:52px;display:flex;align-items:center;justify-content:center}
}

/* ── Hero sections ──────────────────────── */
@media(max-width:768px){
  .hero,.page-hero{padding:48px 4% 40px!important}
  h1{letter-spacing:-1px!important;line-height:1.15!important}
  .hero-sub,.section-sub{font-size:.95rem!important}
}

/* ── Download box (index.html) ──────────── */
@media(max-width:768px){
  .download-box{padding:0 4%}
  .input-wrap{flex-direction:column!important;padding:10px!important;gap:10px!important;border-radius:16px!important}
  .input-wrap input{width:100%!important;padding:.6rem .4rem!important;font-size:16px!important}
  .btn-download,.btn-dl{width:100%!important;justify-content:center!important;padding:1rem!important;font-size:1rem!important;border-radius:12px!important}
  .type-chips{gap:.4rem}
  .chip{font-size:.8rem!important;padding:.4rem .7rem!important}
}

/* ── Downloader card (tool pages) ───────── */
@media(max-width:768px){
  .downloader{padding:1.5rem 1.2rem!important;border-radius:18px!important;margin:0 4%}
  .quality-opts,.type-toggle,.steps-row{gap:.6rem}
  .q-opt,.toggle-btn{padding:.7rem .5rem!important;font-size:.85rem!important}
}

/* ── Sections & grids ───────────────────── */
@media(max-width:768px){
  section{padding:48px 4%!important}
  .grid-3,.tools-grid,.values-grid,.team-grid{grid-template-columns:1fr!important;gap:1rem!important}
  .steps{flex-direction:column!important}
  .step{padding:1.2rem 0!important;border-bottom:1px solid var(--border)}
  .step:last-child{border-bottom:none}
  .step:not(:last-child)::after{display:none!important}
  .steps-row{flex-direction:column!important}
  .step-box{min-width:unset!important}
  .feat-card,.card,.value-card,.feature-card{padding:1.4rem!important}
}

/* ── Stats row ──────────────────────────── */
@media(max-width:768px){
  .stats{gap:1.2rem!important;padding:1.8rem 4%!important;flex-wrap:wrap}
  .stat-num{font-size:1.6rem!important}
  .stats-row{flex-direction:column!important}
  .stat-box{border-right:none!important;border-bottom:1px solid var(--border);padding:1.5rem!important}
  .stat-box:last-child{border-bottom:none!important}
}

/* ── Blog layout ────────────────────────── */
@media(max-width:900px){
  .blog-layout{grid-template-columns:1fr!important;padding-left:4%!important;padding-right:4%!important}
  .posts-grid{grid-template-columns:1fr!important}
  .featured-thumb{height:180px!important}
}

/* ── Contact form ───────────────────────── */
@media(max-width:768px){
  .contact-layout{grid-template-columns:1fr!important;padding:0 4%!important}
  .form-row{grid-template-columns:1fr!important}
  .form-card{padding:1.5rem 1.2rem!important}
  .contact-card{padding:1.2rem!important}
  .cc-icon{width:40px!important;height:40px!important;min-width:40px!important;font-size:1rem!important}
}

/* ── Stories how-to ─────────────────────── */
@media(max-width:768px){
  .howto{grid-template-columns:1fr!important;gap:.6rem}
  .dl-wrap{padding:0 4% 50px!important}
}

/* ── Highlights ─────────────────────────── */
@media(max-width:768px){
  .highlight-albums{gap:.5rem}
  .album-chip{font-size:.8rem!important;padding:.4rem .8rem!important}
  .result-btns{flex-direction:column!important}
  .result-btn{width:100%!important;justify-content:center!important;text-align:center!important}
}

/* ── Profile DP preview ─────────────────── */
@media(max-width:480px){
  .dp-preview{width:130px!important;height:130px!important}
}

/* ── Footer ─────────────────────────────── */
@media(max-width:768px){
  footer{flex-direction:column!important;text-align:center!important;padding:2rem 4%!important}
  .footer-links{justify-content:center!important;gap:1rem!important}
  .footer-grid{grid-template-columns:1fr!important;gap:1.5rem!important}
  .footer-brand{display:none}
  .footer-bottom{flex-direction:column!important;text-align:center!important}
}

/* ── CTA banner ─────────────────────────── */
@media(max-width:768px){
  .cta-banner{margin:0 3% 50px!important;padding:36px 4%!important;border-radius:18px!important}
  .cta-banner h2{font-size:1.6rem!important}
  .btn-white,.btn-grad{padding:.9rem 1.8rem!important;font-size:.92rem!important;min-height:48px}
}

/* ── API result buttons ─────────────────── */
@media(max-width:600px){
  .gip-buttons{flex-direction:column!important}
  .gip-btn{width:100%!important;justify-content:center!important;padding:.85rem 1rem!important}
  .gip-thumb-wrap{max-height:240px!important}
  .gip-thumb-img{max-height:240px!important}
}

/* ── Blog articles ──────────────────────── */
@media(max-width:768px){
  .article-wrap{padding:40px 4% 60px!important}
  .related-grid{grid-template-columns:1fr!important}
  .step-block{padding:1.2rem!important}
  .cta-inline{padding:1.5rem 1.2rem!important}
}

/* ── Doc/legal pages ────────────────────── */
@media(max-width:768px){
  .page-wrap{padding:40px 4% 60px!important}
  .toc{padding:1.2rem!important}
  h1{font-size:1.8rem!important}
}

/* ── About page ─────────────────────────── */
@media(max-width:768px){
  .mission-block{max-width:100%!important}
}

/* ── Safe area insets (iPhone notch/home bar) */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .mobile-menu{padding-bottom:calc(1rem + env(safe-area-inset-bottom))!important}
  footer{padding-bottom:calc(2rem + env(safe-area-inset-bottom))!important}
  nav{padding-top:env(safe-area-inset-top)}
}

/* ── Tap highlight removal ──────────────── */
a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}

/* ── Smooth scrolling & momentum ─────────── */
html{scroll-behavior:smooth}
.mobile-menu{-webkit-overflow-scrolling:touch;overflow-y:auto}

/* ── Small phone (360px and below) ─────── */
@media(max-width:360px){
  .logo{font-size:1.1rem!important}
  h1{font-size:1.7rem!important}
  .downloader{padding:1.2rem 1rem!important}
  section{padding:40px 3.5%!important}
}