:root{
    --brand:#581540;
    --accent:#bea23e;
    --text:#111;
    --muted:#6b7280;
    --bg:#ffffff;
}

/* Reset basics (scoped to this page by file inclusion order) */
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:"ge-ss-two-medium","Tahoma",sans-serif; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.rtl{ direction:rtl; }

/* Header */
#header_Main{
    position:sticky; top:0; z-index:1000;
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(1.2) blur(6px);
    border-bottom:1px solid rgba(0,0,0,.06);
}
.logo{
    display:flex; align-items:center; justify-content:center;
    height:86px; padding:8px 12px;
}
.logo img{ height:64px; width:auto; }

/* Nav (off-canvas from template main.js) */
#menu .links{ list-style:none; padding:12px; margin:0; }
#menu .links li{ margin:8px 0; }
#menu img{ margin-top:12px; border-radius:8px; }

/* Banner */
.banner.full article{ position:relative; }
.banner .inner{
    position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
    padding:24px; text-align:center;
    background:linear-gradient(to top, rgba(0,0,0,.45) 20%, rgba(0,0,0,0) 60%);
}
.banner .inner header h3{
    color:var(--accent);
    background:rgba(0,0,0,.35);
    display:inline-block;
    padding:12px 16px;
    border-radius:10px;
    line-height:1.7;
}
.banner .inner header a{ text-decoration:underline; text-underline-offset:3px; }

/* Section: خطوات */
.wrapper.style2{ background:#fafafa; padding:40px 0; }
.inner{ width:min(1200px, 94vw); margin-inline:auto; }
/* Default grid (kept), enhanced for Index page below */
.grid-style{
    display:grid; gap:20px;
    grid-template-columns: repeat(3, 1fr);
}
.box{ background:#fff; border:1px solid #eee; border-radius:16px; overflow:hidden; box-shadow:0 1px 8px rgba(0,0,0,.05); }
.box .image.fitt img{ width:100%; height:220px; object-fit:cover; }
.box .content{ padding:16px; }
.box h2{ font-size:20px; margin:0; line-height:1.7; color:#222; }

/* Index page: make grid professional and responsive */
body.index-page .grid-style{
    gap:24px;
    grid-template-columns: repeat(2, 1fr);
    align-items:stretch;
}
@media (max-width: 991.98px){
  body.index-page .grid-style{ grid-template-columns: 1fr; }
}
body.index-page .box{
    display:flex; flex-direction:column; height:420px;
    border:1px solid #eaeaea; border-radius:16px; background:#fff;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    transition:transform .2s ease, box-shadow .2s ease;
}
body.index-page .box:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}
body.index-page .box .image.fitt{ position:relative; overflow:hidden; height:220px; display:flex; align-items:center; justify-content:center; background:#fff; }
body.index-page .box .image.fitt img{
    max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;
    transition:transform .4s ease;
}
body.index-page .box:hover .image.fitt img{ transform:scale(1.03); }
body.index-page .box .content{ padding:18px 20px; display:flex; align-items:center; justify-content:center; text-align:center; flex:1; }
/* Multi-line clamp: keep -webkit fallback, add standard property + fallback max-height */
body.index-page .box h2{
  font-size:18px; margin:0; line-height:1.6; color:#222;
  /* Fallback for non-supporting browsers: cap height to 3 lines */
  max-height: calc(1.6em * 3);
  overflow:hidden; text-overflow:ellipsis;
  /* WebKit-based multi-line clamp */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  /* Standard (may be ignored by some browsers, OK for linter compatibility) */
  line-clamp: 3;
}

/* Section: ملاحظات عامة (اتركها للستايل العام من القالب لضمان التطابق مع اللاي أوت) */
/* (محذوف أي override لـ .wrapper.style3 لضمان التطابق البصري) */
/* Footer: لا نغيّر تنسيقه كي يبقى مطابقًا للاي أوت */

/* Countdown (اختياري، مُعطل افتراضيًا) */
.counterr{ background:var(--brand); color:var(--accent); }
#countdown-wrap{
    display:flex; align-items:center; justify-content:center; gap:10px; padding:18px 0;
}
.boxCount{
    width:70px; height:70px; border:2px solid var(--accent);
    background:var(--brand); color:var(--accent);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    border-radius:10px;
    font-weight:600;
}
.boxCount .lbl{ font-size:12px; opacity:.9; margin-top:4px; }

/* Buttons (للاستخدام لاحقًا) */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:10px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600;
}
.btn-primary{ background:var(--brand); color:var(--accent); border-color:var(--accent); }
.btn-primary:hover{ filter:brightness(.96); }

/* ====== Responsive ====== */

/* Tablet: 481px–991px */
@media (min-width:481px) and (max-width:991.98px){
    .logo{ height:90px; }
    .logo img{ height:68px; }
    .banner .inner header h3{ font-size:16px; padding:12px 14px; }
    .grid-style{ grid-template-columns: repeat(2, 1fr); }
    .box .image.fitt img{ height:200px; }
}

/* Mobile: ≤480px */
@media (max-width:480px){
    .logo{ height:76px; }
    .logo img{ height:56px; }
    .banner .inner{ padding:16px; }
    .banner .inner header h3{
        font-size:14px; padding:10px 12px; border-radius:8px;
        line-height:1.9;
    }
    .grid-style{ grid-template-columns: 1fr; }
    .box .image.fitt img{ height:180px; }
    .wrapper.style3 h3{ font-size:14px; }
}

/* Desktop: ≥992px */
@media (min-width:992px){
    .banner .inner header h3{ font-size:18px; }
}

/* إصلاح منتقي التاريخ في كروم إن رغبت بإخفائه */

/* ====== Index page specific sizing tweaks ====== */
body.index-page .wrapper.style3 h3{ font-size:16px; }
@media (max-width:480px){ body.index-page .wrapper.style3 h3{ font-size:13px; } }

body.index-page .box h2{ font-size:18px; }
@media (max-width:480px){ body.index-page .box h2{ font-size:16px; } }

/* Index header: center logo and match sizing with _Layout_New */
body.index-page #header_Main { display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; padding:10px 16px; height:100px; min-height:100px; z-index:10000; background:transparent; border:none; backdrop-filter:none; }
body.index-page #header_Main .logo { position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%) !important; margin:0 !important; }
body.index-page #header_Main .logo img { display:block; height:auto; width:auto; max-height:80px; }
@media (max-width: 992px) { body.index-page #header_Main .logo img { max-height: 56px; } }
@media (max-width: 576px) { body.index-page #header_Main .logo img { max-height: 48px; } }

/* Menu toggle: show SVG icon and ensure visibility without Font Awesome */
body.index-page .menu-toggle { position:absolute; right:20px; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; color:#111; background:rgba(0,0,0,0.04); text-decoration:none; z-index:12000; }
body.index-page .menu-toggle:hover, body.index-page .menu-toggle:focus { background:rgba(0,0,0,0.08); }
body.index-page .menu-toggle { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:22px 22px;
}
body.index-page .menu-toggle .fas, body.index-page .menu-toggle .fa { display:none !important; }
/* Remove any theme pseudo icons to avoid double hamburger */
body.index-page .menu-toggle:before,
body.index-page .menu-toggle:after { content:none !important; }