/* public/css/styles.css (replace entire file) */

/* load Arabic UI font and English display font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;700&display=swap');

@font-face {
  font-family: 'FrenchpressFree';
  src: url('./fonts/Frenchpress freefont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* color tokens */
:root{
  --light-blue: #6b95b2;
  --main-blue: #004e9d;
  --white:#F2F3F4;
  --dark-grey:#393a3a;
  --light-grey:#6a6b6b;
  --accent:#004e9d;
}

/* background & base typography
   - default: Arabic-friendly font (keeps your Arabic rendering as-is)
   - when .lang-en is applied to <body>, Frenchpress will be used */
body {
  margin:0;
  min-height:100vh;
  font-family: "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif;
  font-weight: 600;
  color:#333;
  background: linear-gradient(135deg, #dbe9f6 0%, #f4f1f8 50%, #fce4ec 100%);
  background-attachment: scroll;
  -webkit-font-smoothing:antialiased;
}

/* When English is chosen we add .lang-en to <body>.
   Use Frenchpress for English UI (fall back to system fonts). */
.lang-en {
  font-family: 'FrenchpressFree', "Noto Sans", Arial, sans-serif;
  /* optional: reduce weight if Frenchpress looks too bold */
  font-weight: 400;
}

/* Keep Arabic class if you need fine-grained overrides later */
.lang-ar {
  font-family: "Noto Sans Arabic", "Noto Kufi Arabic", sans-serif;
  font-weight: 600;
}

/* reset headings and paragraphs */
h3, p { margin: 0; }

/* header */
.site-header { padding:12px 0; }
.site-logo { height:150px; width:auto; }
.brand-text { font-weight:700; color:var(--main-blue); font-size:1.1rem; text-decoration:none; }

/* hero */
.hero-large { padding:40px 10px 20px; text-align:center; }
.hero-inner { max-width:900px; margin:0 auto; }
.hero-title { font-size:2.2rem; margin:10px 0; color:var(--main-blue); }
.hero-sub { color:var(--light-grey); margin:0 0 18px 0; font-size:1.05rem; }

/* hero logo */
.hero-logo-wrap { display:flex; justify-content:center; margin-bottom:12px; }
.hero-logo { width:220px; height:220px; object-fit:contain; border-radius:100px; box-shadow:0 10px 30px rgba(0,0,0,0.08); }

/* layout */
.container{ max-width:1100px; margin:0 auto; padding:10px; display:flex; flex-direction:column; gap:18px;}
.header-inner{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
.lang-switch { 
    display: flex;
    background: var(--accent);
    padding: 2px;
    border-radius: 50px;
    border: 1px solid #6b95b250;
    font-size: 13px;
    transition: all 0.5s;
  }
.lang-btn { border: 0;
    padding: 7px;
    border-radius: 30px;
    cursor: pointer;
    background: #004e9d;
    font-weight: 600;
    color: #bfd8f3;
    width: 50px;
    text-align: center;
    transition: all 0.5s;
   }
.lang-btn.active {     
    border: 0;
    padding: 7px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    background: #bfd8f3;
    color: #004e9d;
   }

/* center categories */
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; }
.cat-container{ width:100%; display:flex; gap:12px; justify-content:center; align-items:center; overflow:auto; padding:10px 0; -webkit-overflow-scrolling:touch; }
.category{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; width:80px; text-align:center; cursor:pointer; padding:6px; border-radius:8px; transition:transform .12s, box-shadow .12s; }
.category img{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--light-blue); background:#fff; }
.category .cat-title{ font-size:0.9rem; color:var(--dark-grey); }
.category.active img { transform: translateY(-6px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); border: 4px solid var(--main-blue); background:rgba(0,78,157,0.03); }
.category.active .cat-title {
  color: var(--main-blue);
  font-weight: 800;
}

/* subcategories */
.subcat-row { padding: 6px 0; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.subcat-btn { padding:20px 20px; border-radius:10px; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:0.95rem;
transition: all 0.5s; font-weight: 600;
    color: var(--dark-grey);}
.subcat-btn.active { background:var(--main-blue); color:white; border-color:var(--main-blue); }

/* items */
.all-product-card-container{ display:flex; flex-direction:column; gap:12px; width:100%; }
.product-card-container{ border:1px solid rgba(107,149,178,0.15); border-radius:8px; background:var(--white); display:flex; gap:12px; align-items:center; padding:10px; }
.product-card-container img{ width:90px; height:90px; object-fit:cover; border-radius:6px; }
.col{ flex:1; display:flex; flex-direction:column; gap:6px; }
.price h3{ color:var(--accent); margin:0; font-size:1.05rem; }

/* responsive */
@media (max-width:900px){
  .hero-logo { width:160px; height:160px; }
  .hero-title { font-size:1.8rem; }
}
@media (max-width:600px){
  .category img{ width:54px; height:54px; }
  .product-card-container img{ width:80px; height:80px; }
  .hero-title{ font-size:1.4rem; }
  .brand-text{ font-size:1rem; }
}
footer {
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

footer a {
  text-decoration: none;
  font-weight: bold;
  color: var(--dark-grey);
  transition: all 0.3s;
}
footer a:hover {
  color: var(--accent);
}

/* rtl support - applied when Arabic is chosen */
.rtl{ direction:rtl; }

/* small helper to force some English-specific controls to use display font if needed */
/* .lang-en .hero-title, .lang-en h3, .lang-en .brand-text { font-family: 'FrenchpressFree', Arial, sans-serif; } */

--
.lang-en,
.lang-en p,
.lang-en span,
.lang-en a,
.lang-en button,
.lang-en input,
.lang-en select {
  font-size: 16px;       /* choose 15px / 16px / 17px etc */
  line-height: 1.45;
}

/* Slightly larger headings in English */
.lang-en h1, .lang-en h2, .lang-en h3 {
  line-height: 1.15;
}

--
/* === English-only*/
.lang-en .brand-text { font-size: 1.15rem; }          /* brand */
.lang-en .hero-title { font-size: 2.6rem; }           /* hero title */
.lang-en .hero-sub { font-size: 1.35rem; }            /* hero subtitle */

.lang-en .category .cat-title { font-size: 2rem; }    /* category labels */
.lang-en .subcat-btn { font-size: 1rem; padding:18px 22px; } /* subcategory buttons */

.lang-en .product-card-container .name { font-size: 1.5rem; } /* product name */
.lang-en .product-card-container .dis  { font-size: 0.95rem; } /* product desc */
.lang-en .price h3 { font-size: 1.5rem; }                 /* price */