/* ============================================================
   Barakat v2.0 — Responsive fine-tuning
   ============================================================ */

/* Small phones (≤ 360px) */
@media (max-width: 360px) {
  :root { --container-padding: 1rem; }
  .btn { padding: 0.6rem 1rem; font-size: var(--text-small); }
  .btn-lg { padding: 0.85rem 1.25rem; font-size: var(--text-body); min-height: 48px; }
  .hero { min-height: auto; padding-block: 2rem 2.5rem; }
  .section { padding-block: 3rem; }
  .pricing-card.featured { transform: none; }
  .pricing-card.featured:hover { transform: translateY(-4px); }
  .hero-mockups { max-width: 100%; padding: 0; }
  .hero-screen { border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(22,163,74,0.10), 0 2px 4px rgba(0,0,0,0.04); }
  .dash-body { grid-template-columns: 56px 1fr; min-height: auto; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-row, .dash-bottom { grid-template-columns: 1fr; }
  .hero-badge { display: none; }
  .dash-titlebar { padding: 8px 10px; }
  .dash-titlebar .url { font-size: 0.5rem; height: 22px; padding: 0 8px; }
  .dash-sidebar { padding: 10px 6px; }
  .dash-sidebar .nav-item { padding: 6px 6px; font-size: 0.5rem; }
  .dash-stat { padding: 6px; }
  .dash-stat .value { font-size: 0.7rem; }
  .dash-stat .label { font-size: 0.45rem; }
  .dash-stat .ico { width: 18px; height: 18px; font-size: 0.6rem; }
  .dash-card { padding: 8px; }
  .dash-card .card-head h3 { font-size: 0.6rem; }
  .donut { width: 72px; height: 72px; }
  .donut .donut-center span:first-child { font-size: 0.7rem; }
  .donut .donut-center span:last-child { font-size: 0.4rem; }
  .sales-table .row { font-size: 0.55rem; padding: 6px 4px; }
}

/* Tablets / small desktops */
@media (max-width: 768px) {
  .hero-badge { display: none; }
  .dash-body { grid-template-columns: 80px 1fr; min-height: 360px; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-row { grid-template-columns: 1fr; }
  .dash-bottom { grid-template-columns: 1fr; }
  .dash-main { padding: 10px; }
  .dash-sidebar { padding: 10px 6px; }
  .dash-sidebar .search { display: none; }
  .sales-table .row { grid-template-columns: 40px 1fr auto auto; font-size: 0.6rem; }
  .sales-table .row .col-client { display: none; }
  .laptop-mock .lid { padding: 10px 10px 8px; }
  .laptop-mock { transform: scale(0.85); transform-origin: center top; }
  .pos-form-row { grid-template-columns: repeat(2, 1fr); }
  .pos-product-row { grid-template-columns: 40px 1fr 70px 60px; }
  .pos-product-row .price-input { display: none; }
  .pos-totals { grid-template-columns: repeat(3, 1fr); }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .mockup-feature.reverse > .mockup-text { order: 0; }
  .mockup-feature.reverse > .laptop-mock { order: 0; }
  .hero-mockups { max-width: 100%; }
  .dash-titlebar { padding: 8px 12px; }
  .dash-titlebar .url { font-size: 0.55rem; height: 24px; }
  .dash-stat { padding: 8px; }
  .dash-stat .value { font-size: 0.75rem; }
  .dash-stat .label { font-size: 0.5rem; }
  .donut { width: 80px; height: 80px; }
}

/* Small phones */
@media (max-width: 480px) {
  .laptop-mock { transform: scale(0.78); transform-origin: center top; }
  .stat-row { grid-template-columns: 1fr; }
  .pos-form-row { grid-template-columns: 1fr; }
  .pos-totals { grid-template-columns: 1fr 1fr; }
  .data-table { font-size: 0.5rem; }
}

/* Large desktops (≥ 1280px) */
@media (min-width: 1280px) {
  :root { --container-padding: 2.5rem; }
  .hero-dashboard { transform: scale(1.04); }
}

/* Hover only on devices that support it */
@media (hover: none) {
  .card:hover, .feature-card:hover, .bento-item:hover, .testimonial-card:hover {
    transform: none;
  }
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
  .hero-dashboard { animation: hero-dashboard-enter 1s var(--ease-out) both; }
  .hero-badge { animation: none; }
}

/* Print */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }
  body { font-size: 12pt; line-height: 1.4; }
  .nav, .footer, .final-cta, .hero-ctas, .nav-actions { display: none !important; }
  .section { padding-block: 1rem; }
  @page { margin: 1.5cm; }
}

/* ============================================================
   Barakat v2.1 — Mobile-first additions (360px primary)
   ============================================================ */

/* Mobile (≤ 639px) — single source of truth for "mobile" */
@media (max-width: 639px) {
  /* Hide nav CTA buttons — they live inside the mobile menu instead */
  .nav-actions .btn { display: none; }
  /* Tighten container padding */
  :root { --container-padding: 1rem; }
  /* Hero typography scale */
  .hero h1 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.15; }
  .hero-eyebrow { font-size: 0.7rem; padding: 0.4rem 0.75rem; }
  /* Dashboard mockup: real image scales to container */
  .hero-mockups { max-width: 100%; }
  .hero-screen {
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(22,163,74,0.10), 0 2px 4px rgba(0,0,0,0.04);
  }
  .dash-body { grid-template-columns: 56px 1fr; }
  .dash-sidebar { padding: 8px 4px; }
  .dash-sidebar .brand span { display: none; }
  .dash-sidebar .search,
  .dash-sidebar .section-label,
  .dash-sidebar .profile-card { display: none; }
  .dash-sidebar .nav-item span:not(.ico):not(.badge) { display: none; }
  .dash-sidebar .nav-item { padding: 7px 4px; font-size: 0.55rem; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .dash-stat { padding: 7px; }
  .dash-stat .value { font-size: 0.72rem; }
  .dash-stat .label { font-size: 0.48rem; }
  .dash-stat .ico { width: 20px; height: 20px; font-size: 0.6rem; }
  /* Dashboard cards compact on mobile */
  .dash-main { padding: 8px; }
  .dash-card { padding: 8px; gap: 6px; }
  .dash-card .card-head h3 { font-size: 0.6rem; }
  .dash-card .card-head .badge-mini { font-size: 0.45rem; padding: 1px 5px; }
  .dash-topbar .title h2 { font-size: 0.75rem; }
  .dash-topbar .title .crumb { font-size: 0.45rem; }
  .dash-topbar { padding: 8px 10px; }
  .dash-topbar .pill-time { font-size: 0.45rem; padding: 3px 7px; }
  .donut { width: 72px; height: 72px; }
  .donut .donut-center span:first-child { font-size: 0.7rem; }
  .donut .donut-center span:last-child { font-size: 0.4rem; }
  .donut-legend .row { font-size: 0.5rem; padding: 4px 6px; }
  .donut-legend .row .pct { font-size: 0.45rem; padding: 1px 5px; }
  .donut-wrap { gap: 10px; }
  .sales-table .head, .sales-table .row { font-size: 0.55rem; padding: 6px 4px; }
  .sales-table .row { grid-template-columns: 32px 1fr auto; }
  .sales-table .row .col-qty { display: none; }
  /* Page header smaller */
  .page-header { padding-block: 2.5rem 2rem; }
  .page-header h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
  /* Pricing: full width cards, no featured scale */
  .pricing-card.featured { transform: none; border-width: 2px; }
  .pricing-card { padding: var(--space-6) var(--space-5); }
  .pricing-card .price { font-size: 2.25rem; }
  /* Footer: stack everything */
  .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
  /* Final CTA button full width */
  .final-cta .btn { width: 100%; max-width: 320px; }
  /* Disable float animation on mobile to avoid jitter */
  .hero-screen { animation: none; }
  .hero-dashboard { animation: none; }
}

/* Hero CTAs go full width on small screens */
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
}

/* ============================================================
   Mobile menu — safe area + scroll lock helpers
   ============================================================ */
.mobile-menu {
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
body.no-scroll { overflow: hidden; }

/* ============================================================
   Marquee direction — RTL should scroll opposite of LTR
   ============================================================ */
html[dir="rtl"] .marquee-track {
  animation-direction: reverse;
}

/* ============================================================
   Tables & mockup text — never overflow their container
   ============================================================ */
.data-table,
.mockup-text,
.mockup-section table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mockup-text table { table-layout: auto; }
.mockup-text { min-width: 0; }  /* allow grid item to shrink */