/* ===== Manzil777 - Responsive ===== */

/* Bade screens (Full HD / 2K) */
@media (min-width: 1600px) {
  .grid { --per: 8; }
  .main { padding-left: 28px; padding-right: 28px; }
}

/* Laptop */
@media (max-width: 1300px) {
  .grid { --per: 6; }
}

/* Tablet landscape / iPad: sidebar off-canvas ho jata hai */
@media (max-width: 1199px) {
  .menu-toggle { display: flex; }
  .top-tabs { left: 0; }
  .sidebar {
    top: 0; z-index: 80; width: 280px;
    transform: translateX(-100%); transition: transform .3s;
  }
  .side-head { display: flex; }
  .overlay {
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .3s;
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .sidebar { transform: none; }
  body.menu-open .overlay { opacity: 1; visibility: visible; }
  .main { margin-left: 0; }
}

/* Tablet portrait */
@media (max-width: 900px) {
  :root { --header-h: 58px; }
  .logo-text { font-size: 20px; }
  .top-actions { margin-left: auto; }
  .top-actions .btn { padding: 7px 12px; font-size: 13px; }

  /* search: icon dabane pe header ke neeche bar khulta hai */
  .search-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; margin-left: auto;
    background: var(--grad-grey); border: 1px solid var(--line); color: var(--gold);
  }
  .search-toggle + .top-actions { margin-left: 0; }
  .search-box {
    display: none; position: fixed; z-index: 45;
    top: var(--header-h); left: 0; right: 0; max-width: none; margin: 0;
    border-radius: 0; border-width: 0 0 1px; padding: 0 16px; height: var(--tabs-h);
    background: #1a1e24;
  }
  body.search-open .search-box { display: flex; }

  .grid { --per: 4.5; }
  .main { padding: calc(var(--header-h) + var(--tabs-h) + 12px) 16px 90px; }

  .hero-arrow { width: 34px; height: 34px; font-size: 13px; }
  .welcome { padding: 18px; }
  .welcome h1 { font-size: 24px; }

  .quick-cats { grid-template-columns: repeat(4, 1fr); }
  .promo-grid { grid-template-columns: 1fr; gap: 10px; }
  .steps, .features { grid-template-columns: repeat(2, 1fr); }
  .contact-wrap { grid-template-columns: 1fr; padding: 18px; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }

  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    background: linear-gradient(180deg, #1b2230, #15181d); border-top: 2px solid var(--gold);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 11px; font-weight: 700; color: #d5dae1;
  }
  .bottom-nav img { width: 24px; height: 24px; object-fit: contain; }
  .wa-float { bottom: 80px; right: 14px; width: 52px; height: 52px; }
  .toast { bottom: 150px; }
}

/* Mobile */
@media (max-width: 600px) {
  .grid { --per: 3.4; }
  .quick-cats { gap: 8px; }
  .hero { border-radius: 12px; }
  .hero-arrow { display: none; }
  .dots { bottom: 8px; }
  .dots button { width: 8px; height: 8px; }
  .dots button.active { width: 20px; }

  .welcome { flex-direction: column; align-items: stretch; text-align: center; }
  .welcome-actions { justify-content: center; }
  .welcome-actions .btn { flex: 1; padding: 11px 14px; font-size: 14.5px; }

  .promo-card { padding: 14px; gap: 12px; }
  .p-img { width: 72px; height: 72px; }
  .promo-card h3 { font-size: 16px; }
  .promo-card p { font-size: 13px; margin-bottom: 8px; }

  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-bottom { justify-content: center; text-align: center; }
  .payments { overflow-x: auto; scrollbar-width: none; }
  .payments img { width: 760px; max-width: none; }
}

@media (max-width: 520px) {
  .top-actions .btn-blue { display: none; }
  .qc { font-size: 11.5px; padding: 10px 4px; }
  .qc img { width: 36px; height: 36px; }
  .grid { --per: 2.4; --gap: 10px; }
  .arrow { width: 34px; height: 34px; font-size: 13px; border-radius: 8px; }
  .block-head h2 { font-size: 19px; }
  .block-head h2 img { width: 24px; height: 24px; }
  .thumb .players { top: 6px; left: 6px; font-size: 10px; padding: 1px 6px 1px 4px; }
  .thumb .players svg { width: 10px; height: 10px; }
  .thumb .tag { top: 6px; right: 6px; font-size: 9px; padding: 1px 6px; }
  .sport-thumb b { font-size: 14px; }
  .promo-strip { padding: 18px; text-align: center; justify-content: center; }
  .promo-strip h3 { font-size: 18px; }
  .steps, .features { gap: 10px; }
  .step, .feature { padding: 16px 12px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-info h3 { font-size: 20px; }
  .welcome h1 { font-size: 22px; }
}

/* Chhote phones (320-360px) */
@media (max-width: 360px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .logo-text { font-size: 18px; }
  .top-actions .btn { padding: 6px 10px; font-size: 12px; }
  .search-toggle { width: 34px; height: 34px; }
  .main { padding-left: 12px; padding-right: 12px; }
  .qc { font-size: 10.5px; }
  .qc img { width: 32px; height: 32px; }
  .block-head h2 { font-size: 17px; }
  .arrow { width: 30px; height: 30px; }
  .welcome-actions { flex-direction: column; }
}