/* ═══════════════════════════════════════════════════
   TANUR GRAPHICS PRO — mobile.css v6.3 (FINAL CLEAN)
   Single source of truth. No duplicate blocks.
   ═══════════════════════════════════════════════════ */

/* ── Mobile bottom nav (always hidden on desktop) ── */
#mobileBottomNav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  z-index:990;background:#0b0f1a;
  border-top:1px solid rgba(139,92,246,.2);
  padding:6px 0 max(6px,env(safe-area-inset-bottom));
}
.mbn-inner{display:flex;align-items:center;justify-content:space-around;max-width:500px;margin:0 auto;padding:0 4px}
.mbn-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 10px;border-radius:10px;text-decoration:none;cursor:pointer;background:none;border:none;-webkit-tap-highlight-color:transparent;min-width:48px;color:inherit}
.mbn-icon{font-size:1.2rem;line-height:1;opacity:.55;transition:opacity .15s}
.mbn-label{font-size:9px;font-weight:600;letter-spacing:.04em;color:#6b7280;text-transform:uppercase;font-family:var(--font-body,inherit)}
.mbn-item.active .mbn-icon{opacity:1}
.mbn-item.active .mbn-label{color:#A78BFA}
.mbn-item.active{background:rgba(139,92,246,.1)}
.mbn-cta{background:linear-gradient(135deg,#8B5CF6,#3B82F6)!important;border-radius:14px!important;padding:8px 14px!important}
.mbn-cta .mbn-icon,.mbn-cta .mbn-label{opacity:1!important;color:#fff!important}

/* ═══════════════════════════════════════
   ≤900px — HAMBURGER + MOBILE DRAWER
   ═══════════════════════════════════════ */
@media(max-width:900px){

  /* ── Desktop items hidden ── */
  .header-cta{display:none!important}
  .header-cart{display:flex!important}

  /* ── Hamburger button ── */
  .menu-toggle{
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:44px;height:44px;
    background:rgba(139,92,246,.12);
    border:1.5px solid rgba(139,92,246,.3);
    border-radius:10px;
    cursor:pointer;padding:0;
    z-index:10001;position:relative;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s,border-color .2s;
  }
  .menu-toggle:hover{
    background:rgba(139,92,246,.22);
    border-color:rgba(139,92,246,.5);
  }
  .menu-toggle span{
    display:block;
    width:20px;height:2px;
    background:#ffffff;
    border-radius:2px;
    transition:transform .28s ease,opacity .2s ease;
    transform-origin:center;
    pointer-events:none;
  }
  .menu-toggle.is-active span:nth-child(1),
  .menu-toggle.active   span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle.is-active span:nth-child(2),
  .menu-toggle.active   span:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu-toggle.is-active span:nth-child(3),
  .menu-toggle.active   span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ── Nav overlay scrim ── */
  .nav-overlay{
    display:none;
    position:fixed;inset:0;
    background:rgba(0,0,0,.80);
    z-index:9985;
  }

  /* ── Mobile nav DRAWER ── */
  #site-navigation,
  .main-navigation{
    position:fixed!important;
    top:0;right:-100%;bottom:0;
    width:min(300px,82vw);
    /* DARK SOLID — no backdrop-filter, no white */
    background:#0e1527!important;
    opacity:1!important;
    border-left:1px solid rgba(139,92,246,.2);
    padding:0;
    z-index:9995;
    transition:right .3s cubic-bezier(.4,0,.2,1);
    display:flex!important;
    flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
    box-shadow:-8px 0 32px rgba(0,0,0,.5);
  }
  /* Open state */
  #site-navigation.is-open,
  .main-navigation.is-open,
  .main-navigation.toggled{right:0!important}

  /* Drawer top label */
  #site-navigation::before,
  .main-navigation::before{
    content:'MENU';
    display:block;
    font-size:.68rem;font-weight:700;
    letter-spacing:.18em;
    color:rgba(139,92,246,.6);
    padding:22px 20px 14px;
    border-bottom:1px solid rgba(139,92,246,.1);
    flex-shrink:0;
  }

  /* Nav UL */
  .main-navigation ul,
  #site-navigation ul{
    display:flex!important;
    flex-direction:column!important;
    list-style:none;
    margin:0;padding:8px 0;
    width:100%;gap:0;
  }

  /* Nav LI */
  .main-navigation>ul>li,
  #site-navigation>ul>li{
    width:100%;
    border-bottom:1px solid rgba(139,92,246,.07);
  }

  /* Nav LINKS — must be clickable, full area */
  .main-navigation>ul>li>a,
  #site-navigation>ul>li>a{
    display:flex!important;
    align-items:center;
    padding:15px 20px;
    font-size:1rem;font-weight:600;
    color:#F8FAFC!important;  /* bright white - max contrast */
    text-decoration:none!important;
    cursor:pointer!important;
    pointer-events:all!important;
    position:relative;z-index:9999;  /* highest inside drawer */
    transition:background .15s,padding-left .15s;
    letter-spacing:.01em;
    opacity:1!important;  /* never dim */
  }
  .main-navigation>ul>li>a:hover,
  #site-navigation>ul>li>a:hover{
    background:rgba(139,92,246,.1);
    color:#A78BFA!important;
    padding-left:26px;
  }
  .main-navigation>ul>li.current-menu-item>a,
  #site-navigation>ul>li.current-menu-item>a{
    color:#A78BFA!important;
    background:rgba(139,92,246,.1);
    border-left:3px solid #8B5CF6;
    padding-left:17px;
  }

  /* Submenu */
  .main-navigation .sub-menu,
  #site-navigation .sub-menu{
    display:none;
    background:rgba(139,92,246,.04);
    padding:4px 0 4px 16px;
  }
  .main-navigation .sub-menu a,
  #site-navigation .sub-menu a{
    font-size:.88rem;
    padding:10px 16px;
    color:rgba(248,250,252,.7)!important;
  }
  .main-navigation .sub-menu a:hover{color:#A78BFA!important}
}

/* ═══════════════════════════════════════
   ≤768px — MOBILE SPECIFICS
   ═══════════════════════════════════════ */
@media(max-width:768px){
  #mobileBottomNav{display:block}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .site-wrapper{overflow-x:clip}
  .container{padding-left:16px!important;padding-right:16px!important}

  /* Hero */
  .hero-section{min-height:auto!important;height:auto!important;padding:88px 0 40px!important}
  .hero-grid{grid-template-columns:1fr!important;gap:24px}
  .hero-visual{display:none!important}
  .hero-title{font-size:clamp(1.8rem,7vw,2.4rem)!important;line-height:1.1}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-trust{flex-direction:column;gap:8px;align-items:flex-start}
  .trust-divider{display:none}

  /* All sections — consistent 52px rhythm */
  .services-section,.service-pricing-section,
  .portfolio-section,.process-section,
  .testi-section,.blog-section,.cta-section{padding:52px 0!important}
  .clients-section{padding:28px 0!important}

  /* Section titles */
  .section-title{font-size:clamp(1.5rem,6vw,2rem)!important;margin-bottom:12px!important}
  .section-sub{font-size:.88rem!important;margin-bottom:28px!important}

  /* Grids → single column */
  .services-grid,.testi-grid,.blog-grid,.values-grid,.footer-top{grid-template-columns:1fr!important}
  .process-grid{grid-template-columns:1fr 1fr!important}
  .about-stats-row{grid-template-columns:repeat(3,1fr)!important}

  /* All inline-style 2-col grids → 1 col */
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns:1fr 360px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 3fr 2fr"],
  [style*="grid-template-columns:3fr 2fr"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1.15fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"]{
    grid-template-columns:1fr!important;gap:20px!important
  }

  /* Single service page */
  .single-service-grid{display:block!important}
  .service-pricing-box{position:static!important;top:auto!important}
  .single-service-page-content{padding-bottom:80px!important}
  .compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare-table-wrap table{min-width:380px}
  .svc-quick-stats{display:none!important}
  .svc-plan-panel .btn-full{
    width:calc(50% - 5px)!important;
    display:inline-flex!important;
    justify-content:center!important;
    margin-bottom:0!important
  }
  .svc-plan-panel .btn-full+.btn-full{margin-left:10px!important}

  /* Single product */
  .sp-grid,.tgp-product-grid{display:flex!important;flex-direction:column!important;gap:28px}
  .sp-right,.tgp-summary{width:100%!important}
  .sp-card,.tgp-summary-card{position:static!important;top:auto!important}

  /* Single blog */
  .tgp-single-grid{grid-template-columns:1fr!important}
  .tgp-sidebar{display:none}

  /* Footer */
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .footer-bottom-links{justify-content:center}

  /* Popup */
  .popup-overlay{padding:0!important;align-items:flex-end!important}
  .popup-box{
    margin:0!important;padding:24px 18px 32px!important;
    border-radius:20px 20px 0 0!important;
    max-width:100%!important;width:100%!important;
    max-height:90svh!important;max-height:90vh!important;
    overflow-y:auto!important;
  }
  .form-row-2{grid-template-columns:1fr!important}
  input,select,textarea{font-size:16px!important}

  /* CTA */
  .cta-actions{flex-direction:column;gap:10px}
  .cta-actions .btn{width:100%;justify-content:center}
  .cta-box{padding:32px 18px}

  /* Tap targets */
  button,a,.btn{min-height:44px}
  .btn-sm{min-height:36px}
}

/* ═══════════════════════════════════════
   ≤400px — SMALL PHONES
   ═══════════════════════════════════════ */
@media(max-width:400px){
  .container{padding-left:12px!important;padding-right:12px!important}
  #portfolioGrid{grid-template-columns:1fr!important}
  .process-grid{grid-template-columns:1fr!important}
  .svc-plan-panel .btn-full{width:100%!important;display:flex!important;margin-left:0!important;margin-bottom:8px!important}
}

/* ═══════════════════════════════════════
   POPUP MOBILE SPECIFICS
   ═══════════════════════════════════════ */
@media(max-width:768px){
  .popup-form input,.popup-form select,.popup-form textarea{font-size:16px!important;padding:13px 14px!important}
  .popup-form input[type="submit"]{font-size:1rem!important;padding:14px!important}
}

/* ═══════════════════════════════════════
   WC SHOP MOBILE
   ═══════════════════════════════════════ */
@media(max-width:768px){
  ul.products.columns-3,ul.products.columns-4{grid-template-columns:1fr 1fr!important;gap:12px!important}
}

/* ═══════════════════════════════════════════════
   CHECKOUT & CART MOBILE — v6.5
   ═══════════════════════════════════════════════ */
@media(max-width:768px){

  /* WC wrapper top padding */
  .wc-page-wrapper{padding-top:70px!important}

  /* Cart top padding */
  .woocommerce-cart .wc-page-wrapper > div,
  .woocommerce-cart [style*="padding:24px 0 80px"]{
    padding:16px 0 60px!important;
  }

  /* Checkout form — stack vertically */
  .checkout.woocommerce-checkout,
  form.checkout{
    display:block!important;
  }
  .woocommerce-checkout form.checkout{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  /* Checkout billing/notes cards */
  .woocommerce-checkout [style*="border-radius:var(--radius-xl)"][style*="padding:32px"]{
    padding:18px 16px!important;
    border-radius:12px!important;
  }

  /* Order summary on mobile — show on top */
  .woocommerce-checkout form.checkout > div > div:last-child{
    order:-1!important;
  }

  /* Place order button */
  #place_order{
    font-size:.95rem!important;
    padding:14px 24px!important;
    margin-top:16px!important;
  }

  /* Cart layout */
  .woocommerce-cart .woocommerce{
    padding:0 16px!important;
  }

  /* Cart item grid */
  .woocommerce-cart [style*="display:grid"]{
    display:flex!important;flex-direction:column!important;gap:12px!important;
  }

  /* Trust badges - 2 col on mobile */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:8px"]{
    grid-template-columns:1fr 1fr!important;
  }

  /* Progress steps */
  [style*="max-width:440px"][style*="margin:0 auto 44px"]{
    margin-bottom:24px!important;max-width:100%!important;
  }

  /* Checkout title */
  [style*="text-align:center;margin-bottom:44px"]{
    margin-bottom:24px!important;
  }
  [style*="text-align:center;margin-bottom:44px"] h1{
    font-size:1.4rem!important;
  }
}

@media(max-width:480px){
  /* Cart item - stack image and text */
  .woocommerce-cart [style*="display:flex;align-items:center;gap:16px"]{
    flex-wrap:wrap!important;gap:10px!important;
  }
}


/* ── About page hero — stack to 1 column on mobile ── */
@media(max-width:768px){
  .about-hero-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .founder-card{
    max-width:100%!important;
    width:100%!important;
  }
  .about-stats-row{
    justify-content:center!important;
  }
}