/* ══════════════════════════════════════════════════════
   PIXEL — responsive.css  (supplementary mobile fixes)
   Main responsive rules live in style.css.
   This file adds fixes for overflow, tables, modals, and
   edge-case components not fully covered in the main sheet.
   ══════════════════════════════════════════════════════ */

/* ── Global overflow guard ──────────────────────────── */
*, *::before, *::after { max-width: 100%; }
table, pre, code { max-width: none; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }

/* ── Service tabs on /services ──────────────────────── */
/* The inline grid (repeat(auto-fill, minmax(160px,1fr)))
   can overflow on small screens. Force narrower min. */
@media (max-width: 640px) {
  .svc-tabs-wrap {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 6px !important;
  }
  .cat-tab {
    padding: 8px 10px;
    font-size: 12px !important;
    border-radius: 8px;
  }
  .cat-tab span:first-child { font-size: 15px !important; }
  .cat-tab span:last-child  { font-size: 12px !important; }
}

@media (max-width: 400px) {
  .svc-tabs-wrap {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Service panel header (inline styles in services.php) ─ */
@media (max-width: 640px) {
  .svc-panel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .svc-panel-header > div:first-child {
    font-size: 18px !important;
  }
  /* "Не знайшли" CTA at bottom of each panel */
  .svc-panel > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center;
  }
}

/* ── Why-us grid (re-declared as 3-col at bottom of style.css) */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
  .why-card.featured {
    grid-column: span 1 !important;
    grid-template-columns: 1fr !important;
  }
}

/* ── Order modal — small phones ─────────────────────── */
@media (max-width: 480px) {
  .modal-overlay { padding: 8px; }
  .modal-box {
    padding: 22px 16px;
    border-radius: 16px;
    max-height: 94vh;
  }
  .modal-title { font-size: 19px; }
  .modal-subtitle { font-size: 13px; margin-bottom: 16px; }
  .modal-box .form-input {
    font-size: 16px;      /* prevent iOS zoom */
    padding: 11px 12px;
  }
  .modal-submit {
    font-size: 15px;
    padding: 13px;
  }
  .modal-close {
    top: 12px;
    right: 12px;
  }
  /* Prevent title from going under close button */
  .modal-title {
    padding-right: 44px;
  }
  /* Ensure badge doesn't overlap close btn */
  .modal-badge {
    margin-right: 40px;
  }
}

/* ── Blog CTA section — fix min 300px overflow ──────── */
@media (max-width: 640px) {
  .blog-cta-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── Repair status steps — very small screens ──────── */
@media (max-width: 400px) {
  .repair-status-steps {
    gap: 0;
  }
  .repair-status-step-name {
    font-size: 8px;
    word-break: break-word;
  }
  .repair-status-result-card {
    padding: 14px 12px;
  }
  .repair-status-result-title {
    font-size: 15px;
  }
  .repair-status-num-tag {
    font-size: 11px;
    padding: 3px 8px;
  }
  .repair-status-info-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }
}

/* ── Nova Poshta tracking rows — compact on mobile ─── */
@media (max-width: 480px) {
  .track-item {
    gap: 10px;
    padding: 10px 0;
  }
  .track-icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }
  .track-label { font-size: 13px; }
  .track-status { font-size: 10px; padding: 2px 8px; }
}

/* ── Contact items — tighter on mobile ─────────────── */
@media (max-width: 480px) {
  .contact-item {
    padding: 14px;
    gap: 12px;
  }
  .contact-item-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .contact-item-value { font-size: 14px; }

  .contact-info-card { padding: 18px 14px; }
}

/* ── Hours grid on contacts page ──────────────────── */
@media (max-width: 480px) {
  .hours-row {
    padding: 9px 14px;
    font-size: 13px;
  }
}

/* ── Brand scroll — reduce height on mobile ────────── */
@media (max-width: 768px) {
  .brand-item { height: 56px; }
  .brand-logo-img { height: 28px; }
  .brand-name-text { font-size: 13px; }
}

/* ── Reviews slider dots — bigger taps ─────────────── */
@media (max-width: 768px) {
  .slider-btn {
    width: 44px;
    height: 44px;
  }
  .slider-dot {
    width: 10px;
    height: 10px;
  }
}

/* ── Nav CTA — ensure no overflow ──────────────────── */
@media (max-width: 768px) {
  .nav-cta {
    gap: 4px;
    flex-shrink: 1;
    min-width: 0;
  }
}

/* ── Overflow-x safety for inline style grids ──────── */
@media (max-width: 640px) {
  [style*="display:grid"],
  [style*="display: grid"] {
    min-width: 0;
  }
  /* Prevent any horizontal scroll */
  .section-inner,
  .hero-inner,
  .quick-request-inner,
  .footer-inner {
    overflow-x: hidden;
  }
}

/* ── Price table on detail pages ───────────────────── */
@media (max-width: 480px) {
  .price-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }
  .price-row.header { display: none; }
  .price-cost { text-align: left; min-width: 0; }
  .price-time { text-align: left; }
}

/* ── Quick privacy checkbox on blue form ──────────── */
@media (max-width: 480px) {
  .quick-privacy {
    font-size: 11px;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE PADDING SAFETY NET — min 16px on all sides
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Core containers */
  .section-inner { padding-left: 16px !important; padding-right: 16px !important; }
  .hero { padding-left: 16px; padding-right: 16px; }
  .page-hero { padding-left: 16px; padding-right: 16px; }
  section { padding-left: 0; padding-right: 0; }

  /* Quick request form */
  .quick-request { padding-left: 16px; padding-right: 16px; }

  /* Footer */
  .footer { padding-left: 16px; padding-right: 16px; }

  /* CTA */
  .cta-banner { padding-left: 16px; padding-right: 16px; }

  /* Blog CTA */
  .blog-cta-section { padding-left: 16px; padding-right: 16px; }

  /* Nova poshta */
  .nova-poshta { padding-left: 16px; padding-right: 16px; }
  .np-cta-compact { padding-left: 16px; padding-right: 16px; }
  .np-cta-card { margin-left: 0; margin-right: 0; }

  /* Contacts */
  .contacts { padding-left: 16px; padding-right: 16px; }

  /* Repair status */
  .repair-status-shell { padding-left: 14px; padding-right: 14px; }
}

/* ── Reduce shadows & border-radius on mobile ──────── */
@media (max-width: 768px) {
  .hero-card { box-shadow: var(--shadow-sm); border-radius: 16px; }
  .nova-visual { box-shadow: var(--shadow-sm); border-radius: 12px; }
  .cta-inner { box-shadow: none; border-radius: 16px; padding: 28px 16px; }
  .map-placeholder { box-shadow: none; border-radius: 12px; height: 260px; }
  .service-card { border-radius: 12px; }
  .why-card { border-radius: 12px; }
  .review-card { border-radius: 12px; }
  .contact-item { border-radius: 10px; }
  .faq-item { border-radius: 10px; }

  /* Why-us section — flatten on mobile, no "card in card" */
  .why-us,
  #block-why {
    background: var(--bg-primary, #ffffff) !important;
    padding-top: clamp(32px, 5vw, 48px);
    padding-bottom: clamp(32px, 5vw, 48px);
  }
  .why-compact-card,
  .why-card,
  .why-item,
  .why-card-compact,
  .why-benefit-card,
  .why-3x2-card,
  .why-list-item {
    box-shadow: none;
    border-color: var(--border);
    border-radius: 12px;
  }

  /* Prevent any hover transforms on touch */
  .service-card:hover,
  .why-card:hover,
  .why-compact-card:hover,
  .review-card:hover { transform: none; box-shadow: none; }
}

@media (max-width: 390px) {
  .section-inner { padding-left: 14px !important; padding-right: 14px !important; }
  .hero, .page-hero { padding-left: 14px; padding-right: 14px; }
  .footer { padding-left: 14px; padding-right: 14px; }
}

@media(max-width:768px){
  .why-compact-card{
    background:transparent;
    border:none;
    padding:10px 0;
    border-bottom:1px solid var(--border);
    border-radius:0;
  }
  .why-compact-card:last-child{border-bottom:none;}
  .why-compact-grid{gap:0;}
}

@media(max-width:768px){
  .hero-proof-panel{
    box-shadow:none;
    border:1px solid var(--border);
    background:var(--bg-card);
    backdrop-filter:none;
  }
}