/* ===================== Barameg Store — Design System ===================== */

:root{
	--brmg-navy: #0B1E45;
	--brmg-blue-900: #10275C;
	--brmg-blue-700: #1D4ED8;
	--brmg-blue-600: #2F6BFF;
	--brmg-blue-500: #4D82FF;
	--brmg-purple-600: #7C3AED;
	--brmg-purple-500: #8B5CF6;
	--brmg-amber: #F5A524;
	--brmg-amber-dark: #D4870F;
	--brmg-green: #16A34A;
	--brmg-ink: #101828;
	--brmg-ink-soft: #475067;
	--brmg-border: #E3E8F2;
	--brmg-bg-soft: #F5F7FC;
	--brmg-bg: #FFFFFF;
	--brmg-radius: 16px;
	--brmg-radius-sm: 10px;
	--brmg-shadow: 0 10px 30px -12px rgba(16,39,92,.18);
	--brmg-shadow-sm: 0 4px 14px -6px rgba(16,39,92,.14);
	--brmg-font-ar: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--brmg-font-en: 'Inter', 'Segoe UI', Arial, sans-serif;
	--brmg-gradient: linear-gradient(135deg, var(--brmg-blue-700), var(--brmg-purple-600));
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
	margin:0;
	color:var(--brmg-ink);
	background:var(--brmg-bg);
	font-family:var(--brmg-font-ar);
	line-height:1.75;
	-webkit-font-smoothing:antialiased;
}
body.brmg-lang-en{font-family:var(--brmg-font-en); line-height:1.65;}
img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{line-height:1.35; margin:0 0 .6em; color:var(--brmg-navy); font-weight:800;}
h1{font-size:clamp(1.9rem, 4vw, 2.7rem);}
h2{font-size:clamp(1.4rem, 2.6vw, 1.9rem); margin-top:0;}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}
ul,ol{margin:0 0 1em; padding-inline-start:1.3em;}
li{margin-bottom:.4em;}

.brmg-container{max-width:1180px; margin-inline:auto; padding-inline:20px;}

/* ---------- Trust bar ---------- */
.brmg-trustbar{background:var(--brmg-navy); color:#fff; font-size:.82rem;}
.brmg-trustbar__row{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; padding:7px 20px; opacity:.92;}
.brmg-trustbar__row span{display:inline-flex; align-items:center; gap:6px;}
.brmg-trustbar svg{flex:none;}

/* ---------- Header ---------- */
.brmg-header{border-bottom:1px solid var(--brmg-border); background:#fff; position:sticky; top:0; z-index:50;}
.brmg-header__row{display:flex; align-items:center; gap:24px; padding-block:14px;}
.brmg-logo{display:flex; align-items:center; flex:none;}
.brmg-logo img{max-height:46px; width:auto;}
.brmg-logo__text{font-weight:800; font-size:1.35rem; color:var(--brmg-navy);}
.brmg-logo__dot{background:var(--brmg-gradient); -webkit-background-clip:text; background-clip:text; color:transparent;}
.brmg-nav{flex:1;}
.brmg-nav__list{list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap;}
.brmg-nav__list > li{position:relative;}
.brmg-nav__list > li > a{font-weight:600; font-size:.96rem; color:var(--brmg-ink); padding:8px 2px; display:inline-block;}
.brmg-nav__list > li > a:hover{color:var(--brmg-blue-700);}
.brmg-sub{list-style:none; margin:0; padding:10px; position:absolute; top:100%; inset-inline-start:0; background:#fff; border:1px solid var(--brmg-border); border-radius:var(--brmg-radius-sm); box-shadow:var(--brmg-shadow); min-width:230px; display:none; z-index:60;}
.menu-item-has-children:hover .brmg-sub,
.menu-item-has-children:focus-within .brmg-sub{display:block;}
.brmg-sub li a{display:block; padding:7px 10px; border-radius:8px; font-weight:500; font-size:.92rem;}
.brmg-sub li a:hover{background:var(--brmg-bg-soft); color:var(--brmg-blue-700);}
.brmg-header__actions{display:flex; align-items:center; gap:14px; flex:none;}
.brmg-lang-switch{display:flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; padding:8px 12px; border:1px solid var(--brmg-border); border-radius:999px;}
.brmg-lang-switch:hover{border-color:var(--brmg-blue-600); color:var(--brmg-blue-700);}
.brmg-menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px;}
.brmg-menu-toggle span{width:22px; height:2px; background:var(--brmg-navy); display:block;}

/* ---------- Breadcrumb ---------- */
.brmg-breadcrumb{background:var(--brmg-bg-soft); font-size:.84rem;}
.brmg-breadcrumb ol{list-style:none; display:flex; gap:8px; margin:0; padding:10px 0; flex-wrap:wrap; color:var(--brmg-ink-soft);}
.brmg-breadcrumb li:not(:last-child)::after{content:"/"; margin-inline-start:8px; opacity:.5;}
.brmg-breadcrumb a:hover{color:var(--brmg-blue-700);}

/* ---------- Buttons ---------- */
.brmg-btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; border-radius:999px; padding:12px 22px; font-size:.95rem; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease;}
.brmg-btn:hover{transform:translateY(-1px);}
.brmg-btn--primary{background:var(--brmg-amber); color:#2b1900; box-shadow:0 8px 18px -8px rgba(245,165,36,.55);}
.brmg-btn--primary:hover{background:var(--brmg-amber-dark);}
.brmg-btn--outline{border-color:var(--brmg-border); color:var(--brmg-navy); background:#fff;}
.brmg-btn--outline:hover{border-color:var(--brmg-blue-600); color:var(--brmg-blue-700);}
.brmg-btn--ghost{color:#fff; border-color:rgba(255,255,255,.55);}
.brmg-btn--ghost:hover{border-color:#fff;}
.brmg-btn--lg{padding:14px 26px; font-size:1.02rem;}
.brmg-btn--small{padding:8px 14px; font-size:.82rem;}

/* ---------- Hero ---------- */
.brmg-hero{background:var(--brmg-gradient); color:#fff; padding-block:56px;}
.brmg-hero__row{display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.brmg-hero__text{flex:1 1 440px;}
.brmg-hero__text h1{color:#fff;}
.brmg-hero__text p{color:rgba(255,255,255,.86); font-size:1.08rem; max-width:540px;}
.brmg-hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px;}
.brmg-hero__badges{display:flex; flex-direction:column; gap:14px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:var(--brmg-radius); padding:22px; backdrop-filter:blur(4px);}
.brmg-hero__badges div{display:flex; align-items:center; gap:10px; font-weight:600; font-size:.95rem;}

/* ---------- Category hero (inner pages) ---------- */
.brmg-cat-hero{background:var(--brmg-bg-soft); border-bottom:1px solid var(--brmg-border); padding-block:36px;}
.brmg-cat-hero__row{display:flex; align-items:center; gap:18px;}
.brmg-cat-hero__icon{flex:none; width:64px; height:64px; border-radius:18px; background:var(--brmg-gradient); color:#fff; display:flex; align-items:center; justify-content:center;}
.brmg-cat-hero__sub{color:var(--brmg-ink-soft); margin:0;}

/* ---------- Sections ---------- */
.brmg-section{padding-block:52px;}
.brmg-section--soft{background:var(--brmg-bg-soft);}
.brmg-content{padding-block:40px;}
.brmg-content--narrow{max-width:820px;}
.brmg-prose h2{margin-top:1.6em;}
.brmg-prose h2:first-child{margin-top:0;}

/* ---------- Category grid (home) ---------- */
.brmg-cat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px;}
.brmg-cat-card{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--brmg-border); border-radius:var(--brmg-radius); padding:18px; box-shadow:var(--brmg-shadow-sm);}
.brmg-cat-card:hover{border-color:var(--brmg-blue-500); transform:translateY(-2px);}
.brmg-cat-card__icon{flex:none; width:42px; height:42px; border-radius:12px; background:var(--brmg-bg-soft); color:var(--brmg-blue-700); display:flex; align-items:center; justify-content:center;}
.brmg-cat-card__name{font-weight:700; flex:1;}
.brmg-cat-card__arrow{color:var(--brmg-ink-soft); transform:scaleX(var(--brmg-flip,1));}
body.brmg-lang-ar .brmg-cat-card__arrow{transform:scaleX(-1);}

/* ---------- Product cards / comparison ---------- */
.brmg-products{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; margin-block:26px 34px;}
.brmg-products--compact{grid-template-columns:repeat(auto-fit, minmax(160px,1fr));}
.brmg-product{background:#fff; border:1px solid var(--brmg-border); border-radius:var(--brmg-radius); overflow:hidden; box-shadow:var(--brmg-shadow-sm); display:flex; flex-direction:column;}
.brmg-product__media{background:var(--brmg-bg-soft); display:flex; align-items:center; justify-content:center; padding:18px;}
.brmg-product__media img{max-height:140px; width:auto; margin-inline:auto;}
.brmg-product--mini .brmg-product__media img{max-height:100px;}
.brmg-product__body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.brmg-product__body h3{margin:0; font-size:1.02rem;}
.brmg-product__options{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.brmg-product__options li{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; font-size:.88rem; border-top:1px dashed var(--brmg-border); padding-top:8px;}
.brmg-product__options li:first-child{border-top:0; padding-top:0;}
.brmg-product__opt-label{color:var(--brmg-ink-soft);}
.brmg-product__note{display:flex; align-items:flex-start; gap:6px; font-size:.76rem; color:var(--brmg-ink-soft); margin:auto 0 0;}
.brmg-product--mini{text-align:center; align-items:center;}
.brmg-product--mini .brmg-product__body{align-items:center;}

/* ---------- FAQ ---------- */
.brmg-faq{display:flex; flex-direction:column; gap:10px; margin-block:20px 30px;}
.brmg-faq__item{background:#fff; border:1px solid var(--brmg-border); border-radius:var(--brmg-radius-sm); padding:14px 18px;}
.brmg-faq__item summary{cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:space-between; list-style:none;}
.brmg-faq__item summary::-webkit-details-marker{display:none;}
.brmg-faq__chev{transition:transform .2s ease; color:var(--brmg-ink-soft);}
.brmg-faq__item[open] .brmg-faq__chev{transform:rotate(90deg);}
.brmg-faq__a{padding-top:10px; color:var(--brmg-ink-soft);}
.brmg-faq__a p{margin:0;}

/* ---------- CTA band ---------- */
.brmg-cta-band{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--brmg-navy); color:#fff; border-radius:var(--brmg-radius); padding:26px 28px; margin-block:40px;}
.brmg-cta-band p{margin:4px 0 0; color:rgba(255,255,255,.78); font-size:.92rem;}

/* ---------- Related categories ---------- */
.brmg-related{margin-top:10px;}
.brmg-related__grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px;}
.brmg-related__card{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; background:#fff; border:1px solid var(--brmg-border); border-radius:var(--brmg-radius-sm); padding:18px 10px; font-weight:600; font-size:.88rem;}
.brmg-related__card:hover{border-color:var(--brmg-blue-500);}
.brmg-related__card svg{color:var(--brmg-blue-700);}

/* ---------- Guides / blog ---------- */
.brmg-guides{padding-block:52px; background:var(--brmg-bg-soft);}
.brmg-guides__grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:18px;}
.brmg-guide-card{background:#fff; border:1px solid var(--brmg-border); border-radius:var(--brmg-radius); overflow:hidden; box-shadow:var(--brmg-shadow-sm);}
.brmg-guide-card img{aspect-ratio:16/10; object-fit:cover;}
.brmg-guide-card h3{margin:14px 16px 16px; font-size:1rem;}
.brmg-entry-thumb{border-radius:var(--brmg-radius); margin-bottom:20px;}

/* ---------- Footer ---------- */
.brmg-footer{background:var(--brmg-navy); color:rgba(255,255,255,.85); padding-top:48px; font-size:.92rem;}
.brmg-footer__grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px; padding-bottom:30px;}
.brmg-footer__about p{color:rgba(255,255,255,.7); max-width:380px; margin-top:10px;}
.brmg-footer h4{color:#fff; font-size:.95rem; margin-bottom:14px;}
.brmg-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.brmg-footer ul a:hover{color:#fff;}
.brmg-footer__bottom{border-top:1px solid rgba(255,255,255,.14); padding-block:18px; font-size:.78rem; color:rgba(255,255,255,.55); display:flex; flex-direction:column; gap:6px;}

/* ---------- Responsive ---------- */
@media (max-width: 880px){
	.brmg-footer__grid{grid-template-columns:1fr 1fr;}
	.brmg-footer__about{grid-column:1 / -1;}
}
@media (max-width: 760px){
	.brmg-nav{position:fixed; inset-inline:0; top:calc(60px + 34px); background:#fff; border-top:1px solid var(--brmg-border); padding:16px 20px; transform:translateY(-130%); opacity:0; transition:all .2s ease; max-height:80vh; overflow:auto;}
	.brmg-nav.is-open{transform:translateY(0); opacity:1;}
	.brmg-nav__list{flex-direction:column; gap:4px;}
	.brmg-sub{position:static; display:block; box-shadow:none; border:0; padding-inline-start:12px;}
	.brmg-menu-toggle{display:flex;}
	.brmg-lang-switch span{display:none;}
	.brmg-hero__row{flex-direction:column; align-items:flex-start;}
	.brmg-hero__badges{width:100%;}
	.brmg-footer__grid{grid-template-columns:1fr;}
}

/* ---------- Dark-mode safety (keep light; most affiliate shoppers expect light UI, avoid auto-dark surprises) ---------- */
@media (prefers-color-scheme: dark){
	body{background:var(--brmg-bg); color:var(--brmg-ink);}
}