/*
Theme Name: BirMobo Custom Dark Theme
Theme URI: https://birmobo.com
Author: Claude & Alireza
Description: قالب اختصاصی دارک و شیشه‌ای برای فروشگاه لوازم جانبی اپل
Version: 1.0.0
*/

:root{
  --bg-1:#020914;
  --bg-2:#071321;
  --card:#0B1726;
  --card-hi:#0F1E30;
  --border:rgba(255,255,255,0.10);
  --text-1:#FFFFFF;
  --text-2:#94A3B8;
  --blue:#1687FF;
  --blue-light:#35A7FF;
  --glow:rgba(0,132,255,0.35);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(22,135,255,0.12), transparent 60%),
    radial-gradient(700px 400px at -10% 20%, rgba(22,135,255,0.08), transparent 60%),
    var(--bg-1);
  color:var(--text-1);
  font-family:'Vazirmatn', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1280px; margin:0 auto; padding:0 28px;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
header.scrolled{
  background:rgba(2,9,20,0.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--border);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  gap:24px;
}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(145deg, var(--blue-light), #063a73);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 22px var(--glow);
  font-weight:800; font-size:16px;
}
.brand-text .name{font-weight:700; font-size:16.5px; line-height:1.3;}
.brand-text .tag{font-size:11.5px; color:var(--text-2); line-height:1.3;}

.nav-search{
  flex:1 1 auto; max-width:400px;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 16px;
  color:var(--text-2);
  font-size:13.5px;
}
.nav-search input{
  background:transparent; border:none; color:#fff; width:100%; outline:none;
}

.nav-links{display:flex; align-items:center; gap:28px; font-size:14px; color:var(--text-2); flex:0 0 auto;}
.nav-links a{position:relative; padding:6px 0; transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--text-1);}

.nav-icons{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.icon-btn{
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--text-2);
  position:relative; transition:background .2s, color .2s;
}
.cart-badge{
  position:absolute; top:-4px; left:-4px;
  background:var(--blue); color:#fff; font-size:10.5px; font-weight:700;
  min-width:17px; height:17px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
}

/* ---------- hero ---------- */
.hero{padding:64px 0 40px; position:relative;}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.badge-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(22,135,255,0.10);
  border:1px solid rgba(22,135,255,0.35);
  color:var(--blue-light);
  font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:999px;
  margin-bottom:22px;
}
.badge-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--blue-light); box-shadow:0 0 8px var(--blue-light);}
h1.hero-title{font-size:44px; line-height:1.28; font-weight:800; margin:0 0 18px;}
h1.hero-title .hl{color:var(--blue-light);}
.hero-sub{color:var(--text-2); font-size:15.5px; line-height:1.9; max-width:460px; margin:0 0 30px;}
.btn-primary{
  background:linear-gradient(135deg, var(--blue-light), var(--blue));
  color:#fff; box-shadow:0 8px 26px -6px var(--glow);
  padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:700; display:inline-block;
}

/* ---------- product grid ---------- */
.section{padding:64px 0;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.p-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  position:relative;
  transition:transform .28s ease;
}
.p-card:hover{transform:translateY(-6px); border-color:rgba(22,135,255,0.4);}
.p-media{
  position:relative; height:180px; border-radius:var(--radius-md);
  background:#061019; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; margin-bottom:16px;
}
.p-media img{max-height:100%; object-fit:contain;}
.p-title{font-size:15.5px; font-weight:700; margin:0 0 6px;}
.p-price-row{margin-bottom:14px;}
.btn-add{
  background:rgba(22,135,255,0.12); color:var(--blue-light);
  border:1px solid rgba(22,135,255,0.3);
  padding:11px; border-radius:10px; font-size:13px; font-weight:700;
  display:block; text-align:center;
}
.btn-add:hover{background:var(--blue); color:#fff;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--border); background:var(--bg-2); padding:30px 0; margin-top:40px; text-align:center; color:var(--text-2);}
/* ==========================================
   RESPONSIVE STYLES (Mobile & Tablet)
   ========================================== */

/* تبلت‌ها و صفحه‌نمایش‌های کوچک‌تر (زیر 992px) */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 32px;
  }

  .hero-ctas {
    justify-content: center;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* موبایل‌ها (زیر 600px) */
@media (max-width: 600px) {
  .nav-row {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .nav-search {
    order: 3;
    width: 100%;
    margin-top: 4px;
  }

  .nav-links {
    display: none; /* مخفی کردن منوی ساده در موبایل */
  }

  .hero {
    padding: 32px 16px;
  }

  .hero-title {
    font-size: 28px;
    line-height: 1.3;
  }

  .hero-sub {
    font-size: 14px;
  }

  .grid-3 {
    grid-template-columns: 1fr; /* کارت‌ها در موبایل تک‌ستونه می‌شوند */
    gap: 16px;
  }

  .p-card {
    padding: 14px;
  }

  .p-media {
    height: 150px;
  }
}