/* public/css/styles.css (only full file included to ensure hero styles load) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;700&display=swap');
:root{
  --light-blue: #6b95b2;
  --main-blue: #004e9d;
  --white:#F2F3F4;
  --dark-grey:#393a3a;
  --light-grey:#6a6b6b;
  --accent:#004e9d;
}

/* background */
body {
  margin:0;
  min-height:100vh;
  font-family: "Noto Sans 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;
}
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 */
.rtl{ direction:rtl; }
/* new language button start */
/* .switch {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}

.switch > span {
  position: absolute;
  top: 14px;
  pointer-events: none;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  width: 50%;
  text-align: center;
}

input.check-toggle-round-flat:checked ~ .off {
  color: #F36F25;
}

input.check-toggle-round-flat:checked ~ .on {
  color: #fff;
}

.switch > span.on {
  left: 0;
  padding-left: 2px;
  color: #F36F25;
}

.switch > span.off {
  right: 0;
  padding-right: 4px;
  color: #fff;
}

.check-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.check-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input.check-toggle-round-flat + label {
  padding: 2px;
  width: 97px;
  height: 35px;
  background-color: #F36F25;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}
input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}

input.check-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #F36F25;
  -moz-border-radius: 60px;
  -ms-border-radius: 60px;
  -o-border-radius: 60px;
  border-radius: 60px;
}
input.check-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 48px;
  background-color: #fff;
  -webkit-border-radius: 52px;
  -moz-border-radius: 52px;
  -ms-border-radius: 52px;
  -o-border-radius: 52px;
  border-radius: 52px;
  -webkit-transition: margin 0.2s;
  -moz-transition: margin 0.2s;
  -o-transition: margin 0.2s;
  transition: margin 0.2s;
}

input.check-toggle-round-flat:checked + label {
}

input.check-toggle-round-flat:checked + label:after {
  margin-left: 44px;
} */
/* new language button end */