/* =========================================================
   HOME PAGE / الصفحة الرئيسية
========================================================= */

/* ========================= HERO / الهيرو الرئيسي ========================= */
.home-hero{background:var(--navy-850);color:#fff;min-height:610px;display:flex;align-items:center;overflow:hidden;position:relative}
.home-hero:before{content:"";position:absolute;width:660px;height:660px;left:-160px;top:-140px;border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 0 110px rgba(255,255,255,.025),0 0 0 220px rgba(255,255,255,.018)}
.home-hero__grid{display:grid;grid-template-columns:1.08fr .92fr;grid-template-areas:"visual content";align-items:center;gap:72px;direction:ltr}
.home-hero__content{grid-area:content;direction:rtl;position:relative;z-index:2}
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border:1px solid rgba(255,255,255,.15);border-radius:999px;color:var(--cyan-2);margin-bottom:16px}
.home-hero h1{font-size:clamp(48px,5.2vw,74px);line-height:1.08;margin-bottom:18px;font-weight:800}
.home-hero h1 span{display:block;color:var(--cyan)}
.home-hero p{font-size:17px;color:#d8e9ec;max-width:650px}
.hero-actions{display:flex;gap:14px;margin-top:26px}
.hero-badges{display:flex;gap:22px;margin-top:26px;color:#c8e3e8;font-size:13px}
.hero-badges i{margin-inline-end:4px}
.hero-outline{color:#fff;border-color:rgba(255,255,255,.35)}
.home-hero__visual{grid-area:visual;position:relative;align-self:end;height:565px}
.doctor-arch{height:100%;width:100%;overflow:hidden;border-radius:320px 320px 0 0;background:#fff;border:1px solid rgba(255,255,255,.16)}
.doctor-arch img{width:100%;height:100%;object-fit:contain;object-position:center bottom}

/* ========================= TRUST FEATURES / شريط المميزات ========================= */
.trust-strip{background:#fff;border-bottom:1px solid var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-grid>div{padding:24px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;border-inline-start:1px solid var(--line)}
.trust-grid>div:first-child{border-inline-start:0}
.trust-icon{font-size:22px;color:#079bb7;margin-bottom:8px}
.trust-grid b{color:var(--ink);font-size:15px}
.trust-grid span{color:#7a9399;font-size:12px}

/* ========================= SERVICES PREVIEW / معاينة الخدمات ========================= */
.services-preview{background:#fff}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:32px}
.expand-services{height:420px;display:flex;gap:12px;direction:rtl}
.expand-card{flex:1;min-width:130px;position:relative;overflow:hidden;border-radius:18px;background-image:linear-gradient(180deg,rgba(1,38,48,.04),rgba(1,38,48,.88)),var(--bg);background-size:cover;background-position:center;transition:flex .35s ease,transform .25s;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff}
.expand-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(1,38,48,.82));z-index:0}
.expand-card span,.expand-card small{position:relative;z-index:1}
.expand-card span{font-size:19px;font-weight:800}
.expand-card small{color:#c8e3e8;opacity:0;max-width:280px;transition:.25s}
.expand-card:hover,.expand-card.active{flex:2.6;transform:translateY(-4px)}
.expand-card:hover small,.expand-card.active small{opacity:1}

/* ========================= BEFORE / AFTER / قبل وبعد ========================= */
/* =========================
   BEFORE / AFTER
========================= */

.vision-section {
    background: #fff;
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.vision-copy p {
    color: var(--muted);
    font-size: 17px;
}

.text-link {
    display: inline-block;
    margin-top: 18px;
    color: #079bb7;
    font-weight: 800;
}


/* =========================
   COMPARE BOX
========================= */

.compare {
    --compare-pos: 50%;

    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;

    border-radius: 26px;
    overflow: hidden;

    box-shadow: var(--shadow);

    background: #fff;
    direction: ltr;
}


/* الصورة AFTER */

.compare > img {
    position: absolute !important;
    top: 0;
    left: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    display: block;
}


/* طبقة BEFORE */

.compare__before {
    position: absolute !important;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    clip-path: inset(
        0
        calc(100% - var(--compare-pos))
        0
        0
    );

    z-index: 2;
}


/* صورة BEFORE */

.compare__before img {
    position: absolute !important;
    top: 0;
    left: 0;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    display: block;
}


/* =========================
   RANGE
========================= */

.compare input[type="range"] {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: ew-resize;

    z-index: 10;
}


/* =========================
   DIVIDER LINE
========================= */

.compare::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    left: var(--compare-pos);

    width: 2px;

    background: rgba(255,255,255,.65);

    transform: translateX(-50%);

    pointer-events: none;

    z-index: 3;
}


/* =========================
   HANDLE
========================= */

.compare__handle {
    position: absolute;

    left: var(--compare-pos);
    top: 50%;

    width: 56px;
    height: 56px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #fff;

    color: #079bb7;

    border: 2px solid #079bb7;

    box-shadow: 0 5px 18px rgba(0,0,0,.18);

    pointer-events: none;

    z-index: 6;

    transform: translate(-50%, -50%);

   
}

.compare__handle i {
    font-size: 22px;
}




/* وقف الحركة بعد استخدام السلايدر */
.compare__handle {
    position: absolute;
    left: var(--compare-pos);
    top: 50%;

    width: 56px;
    height: 56px;

    border-radius: 50%;
    display: grid;
    place-items: center;

    background: #fff;
    color: #079bb7;
    border: 2px solid #079bb7;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);

    pointer-events: none;
    z-index: 6;

    transform: translate(-50%, -50%);
}

.compare__handle i {
    font-size: 22px;
}


/* =========================
   LABELS
========================= */

.compare__label {
    position: absolute;

    bottom: 18px;

    padding: 8px 15px;

    background: rgba(1,38,48,.78);

    color: #fff;

    border-radius: 10px;

    font-size: 12px;

    z-index: 5;

    pointer-events: none;
}

.before-label {
    left: 18px;
}

.after-label {
    right: 18px;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .compare {
        width: 100%;
        aspect-ratio: 4 / 3;
    }

}
/* ========================= ARTICLES + MEDIA / المقالات والميديا ========================= */
.content-duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.content-panel{
    min-height:340px;
    padding:42px;
    border-radius:28px;
    position:relative;
    overflow:hidden;
    transition:.25s;
}

.content-panel:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}


/* ===== كارت المقال ===== */

.content-panel--article{
    display:grid;

    /* الصورة أكبر من جزء الكلام */
    grid-template-columns:1.25fr .75fr;

    min-height:360px;
    padding:0;
    background:#fff;
    border:1px solid var(--line);
}


/* ===== صورة المقال ===== */

.home-article__media{
    min-height:360px;
    overflow:hidden;
}

.home-article__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .18s ease;
}


/* ===== محتوى المقال ===== */

.home-article__copy{
    padding:28px 26px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-article__copy span{
    font-size:16px;
}


/* تصغير عنوان المقال */

.content-panel--article h3{
    font-size:25px;
    line-height:1.35;
    margin:20px 0 10px;
}


/* تصغير وصف المقال */

.content-panel--article p{
    font-size:16px;
    line-height:1.8;
    color:#6e8790;
    margin:0;
}


/* قراءة المقالات */

.home-article__copy > b{
    position:static;
    display:block;
    margin-top:22px;
    font-size:16px;
}


/* ===== كارت الميديا ===== */

.content-panel--dark{
    background:var(--navy-900);
    color:#fff;
}

.content-panel span{
    color:#069db9;
    font-weight:800;
}

.content-panel--dark h3{
    font-size:30px;
    line-height:1.3;
    margin:26px 0 12px;
}

.content-panel--dark p{
    color:#bdd5da;
}


/* نخلي التثبيت أسفل الكارت للميديا فقط */

.content-panel--dark > b{
    position:absolute;
    bottom:30px;
    right:36px;
}

.mini-video{
    position:absolute;
    left:28px;
    bottom:28px;
    width:180px;
    height:105px;
    border-radius:14px;
    overflow:hidden;
    background:#000;
}

.mini-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* ========================= REVIEWS / آراء المرضى ========================= */
.testimonials{background:#fff;border-top:1px solid var(--line)}
.center-head{text-align:center;max-width:760px;margin:0 auto 32px}
.center-head .eyebrow{justify-content:center}
.center-head p{color:var(--muted)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(1,38,48,.05)}
.stars{color:#f0ac20;letter-spacing:3px}
.review-card p{color:#5e7880;margin:12px 0}

/* ========================= APPOINTMENT / الحجز ========================= */
/* =========================================
   APPOINTMENT SECTION
========================================= */

.appointment-band{
    background:#fff;
    border-top:1px solid var(--line);
}

.appointment-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
}


/* =========================================
   CONTACT INFO
========================================= */

.contact-stack{
    display:grid;
    gap:12px;
    margin-top:28px;
}

.contact-stack a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    padding:15px 18px;
    border-radius:14px;
    border:1px solid #d4eaee;
    transition:.2s;
}

.contact-stack a:hover{
    background:var(--cyan);
    color:var(--navy-950);
    transform:translateX(-4px);
}

.contact-stack span{
    color:#658088;
    font-size:12px;
}


/* =========================================
   APPOINTMENT FORM CARD
========================================= */

.form-card{
    max-width:680px;
    width:100%;
    padding:28px 30px;
    margin-inline:auto;
}

.form-card h3{
    font-size:25px;
    line-height:1.3;
    margin:0 0 18px;
}


/* =========================================
   FORM GRID
========================================= */

.form-card .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 20px;
}


/* =========================================
   FORM FIELD
========================================= */

.form-card .field{
    display:flex;
    flex-direction:column;
}

.form-card .field--full{
    grid-column:1 / -1;
}

.form-card .field label{
    font-size:14px;
    font-weight:700;
    margin-bottom:7px;
}


/* =========================================
   INPUTS + SELECT
========================================= */

.form-card input,
.form-card select{
    width:100%;
    height:56px;
    padding:0 18px;
    font-size:15px;
    border:1px solid #cfe3e8;
    border-radius:14px;
    background:#fff;
    color:var(--navy-950);
    outline:none;
    transition:.2s;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(6,157,185,.10);
}


/* =========================================
   TEXTAREA
========================================= */

.form-card textarea{
    width:100%;
    min-height:100px;
    padding:16px 18px;
    font-size:15px;
    line-height:1.7;
    border:1px solid #cfe3e8;
    border-radius:14px;
    background:#fff;
    color:var(--navy-950);
    outline:none;
    resize:vertical;
    transition:.2s;
}


/* =========================================
   PLACEHOLDER
========================================= */

.form-card input::placeholder,
.form-card textarea::placeholder{
    color:#a18f83;
}


/* =========================================
   SUBMIT BUTTON
========================================= */

.form-card .btn{
    width:100%;
    min-height:54px;
    padding:13px 22px;
    border-radius:14px;
    font-size:15px;
    font-weight:800;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:950px){

    .appointment-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .form-card{
        max-width:720px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width:650px){

    .appointment-grid{
        gap:24px;
    }

    .form-card{
        max-width:100%;
        padding:22px 18px;
    }

    .form-card h3{
        font-size:22px;
        margin-bottom:16px;
    }

    .form-card .form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .form-card .field--full{
        grid-column:auto;
    }

    .form-card input,
    .form-card select{
        height:52px;
        font-size:14px;
    }

    .form-card textarea{
        min-height:90px;
        font-size:14px;
    }

    .form-card .btn{
        min-height:52px;
        font-size:14px;
    }
}
/* ========================= TABLET / تابلت ========================= */
@media(max-width:950px){
  .home-hero{padding-top:24px;padding-bottom:40px}
  .home-hero__grid{grid-template-columns:1fr;grid-template-areas:"visual" "content";gap:24px}
  .home-hero__visual{width:min(520px,96%);height:420px;justify-self:center;align-self:auto}
  .doctor-arch{border-radius:220px 220px 0 0}
  .home-hero__content{text-align:center}
  .home-hero__content p{margin-inline:auto}
  .hero-actions,.hero-badges{justify-content:center}
  .trust-grid{grid-template-columns:1fr 1fr}
  .section-head{align-items:start;flex-direction:column}
  .expand-services{height:auto;display:grid;grid-template-columns:1fr 1fr}
  .expand-card{min-height:260px}
  .expand-card:hover,.expand-card.active{transform:none}
  .vision-grid,.appointment-grid{grid-template-columns:1fr}
  .content-duo{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
}

/* ========================= MOBILE / موبايل ========================= */
@media(max-width:600px){
  .home-hero{min-height:auto;padding-top:18px}
  .home-hero__grid{gap:20px}
  .home-hero__visual{height:330px;width:min(360px,100%);order:-1}
  .doctor-arch{border-radius:170px 170px 0 0}
  .home-hero h1{font-size:38px;line-height:1.08;margin-bottom:14px}
  .home-hero p{font-size:14px;line-height:1.9}
  .hero-chip{font-size:12px}
  .hero-actions{flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%}
  .hero-badges{display:grid;grid-template-columns:1fr;gap:7px;margin-top:18px;font-size:11px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid>div{padding:20px 10px;min-height:128px;justify-content:center}
  .trust-grid>div:nth-child(odd){border-inline-start:0}
  .trust-grid b{font-size:13px}.trust-grid span{font-size:10px}
  .expand-services{grid-template-columns:1fr}
  .expand-card{min-height:250px}
  .vision-grid{gap:34px}
  .compare{width:100%;max-height:none}
  .content-panel{padding:28px}
  .content-panel--article{grid-template-columns:1fr;padding:0}
  .home-article__media{min-height:210px}
  .home-article__copy{padding:26px;min-height:230px}
  .content-panel h3{font-size:25px}
}