/* ═════════ الفوتر الموحّد — تصميم V3 المرجعيّ
   • خلفيّة داكنة نظيفة #131c1b
   • حدّ علويّ مقوّس + توهّج زاويّ برتقاليّ + خطّ برتقاليّ رفيع فوق الحدّ
   • ٤ أعمدة: عن(1.5fr) + خدمات + صفحات + تواصل
   • شريط سفليّ بحقوق النشر وشارة «صُنع بشغف»
   يُحمَّل من layouts/app ليظهر موحّداً في صفحات front-cmp. */

/* ═ لوحة الفوتر ═ */
.hv3-foot{
    position:relative; overflow:hidden;
    background:#131c1b; color:rgba(255,255,255,.66);
    padding-block:66px 0;
    margin-top:-1px;
    /* حدّ علويّ ملتفّ (rounded) */
    border-top-left-radius:36px;
    border-top-right-radius:36px;
    z-index:2;
}
/* توهّج زاويّ برتقاليّ */
.hv3-foot::before{
    content:''; position:absolute;
    inset-block-start:-160px; inset-inline-start:-120px;
    width:460px; height:460px; border-radius:50%;
    background:radial-gradient(circle, rgba(212,110,42,.22), transparent 68%);
    pointer-events:none;
}
/* خطّ برتقاليّ رفيع تحت الحدّ العلوي مباشرةً */
.hv3-foot::after{
    content:''; position:absolute;
    inset-block-start:0; inset-inline:36px; height:1px;
    background:linear-gradient(90deg, transparent, #D46E2A, transparent);
    opacity:.55;
    pointer-events:none;
}
.hv3-foot .wrap{
    width:min(1240px,92vw);
    margin-inline:auto;
    position:relative;
    z-index:1;
}
@media (max-width: 768px){ .hv3-foot .wrap{ width:min(1240px,94vw); } }

/* ═ الشبكة ═ */
.hv3-foot-grid{
    display:grid; grid-template-columns: minmax(260px,1.5fr) repeat(auto-fit,minmax(150px,1fr));
    gap:36px; padding-block-end:44px;
}
@media (max-width: 860px){ .hv3-foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width: 520px){ .hv3-foot-grid{ grid-template-columns:1fr; } }

/* ═ عمود «عن» ═ */
.hv3-foot-logo img{ height:72px; width:auto; display:block; }
@media (max-width: 520px){ .hv3-foot-logo img{ height:60px; } }

.hv3-foot-about p{
    font-size:15px; margin:18px 0 0; max-width:34ch; line-height:1.9;
    color:rgba(255,255,255,.66);
}

/* ═ الأعمدة ═ */
.hv3-foot-col h4{
    color:#fff; font-size:17px; margin:0 0 18px;
    display:flex; align-items:center; gap:9px; font-weight:700;
}
.hv3-foot-col h4::before{
    content:''; width:16px; height:2.5px; border-radius:2px; background:#D46E2A;
}
.hv3-foot-col a{
    display:block; padding-block:7px; font-size:15px;
    color:rgba(255,255,255,.62);
    text-decoration:none;
    transition:color .2s, transform .2s;
}
.hv3-foot-col a:hover{ color:#F59E0B; transform:translateX(-4px); }

.hv3-foot-lead{
    font-size:14px; line-height:1.75; color:rgba(255,255,255,.62);
    margin:0 0 14px;
}

/* ═ روابط اجتماعيّة — مصقولة ═
   • مربّعات زجاجيّة 44×44 بحواف 14px + توهّج داخليّ خفيف.
   • تفاعل: رفع 3px + مقياس 1.08 + دوران 2° + توهّج علامة تجاريّة.
   • كل شبكة تأخذ لونها الأصليّ عند التحويم مع ظلّ متطابق بلونها. */
/* شبكة أفقيّة صارمة — لا التفاف، الأيقونات الخمس دائماً في صفّ واحد */
.hv3-foot-social{
    display:flex; flex-wrap:nowrap; gap:6px;
    margin-top:4px;
}

/* ⚠️ نستخدم a.hv3-foot-social-link (0,1,1) وليس .hv3-foot-social-link (0,1,0)
   لأنّ `.hv3-foot-col a` أعلاه بنفس الخصوصيّة يفرض display:block + padding-block:7px،
   فيلغي grid ويكسر التوسيط. رفع الخصوصيّة يضمن أنّ قواعد الأزرار تفوز. */
a.hv3-foot-social-link{
    position:relative;
    width:36px; height:36px; border-radius:11px;
    flex:0 0 auto;                        /* لا تتقلّص خلافاً لطبيعتها flex */
    padding:0 !important;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    line-height:1;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.82) !important;
    text-decoration:none !important;
    overflow:hidden;
    transition:transform .22s cubic-bezier(.4,0,.2,1),
               background .22s ease,
               border-color .22s ease,
               color .22s ease,
               box-shadow .22s ease;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
/* إبطال الانزياح 4px الموروث من `.hv3-foot-col a:hover{ transform:translateX(-4px) }` */
a.hv3-foot-social-link:hover{ transform:translateY(-3px) scale(1.06) !important; }
/* لمعة زجاجيّة خفيفة أعلى الأيقونة (تُبرَز عند التحويم) */
.hv3-foot-social-link::before{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,.10) 0%, transparent 55%);
    opacity:0; transition:opacity .22s ease;
    pointer-events:none;
}
.hv3-foot-social-link .ti{
    font-size:16px; line-height:1;
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    position:relative; z-index:1;
}
.hv3-foot-social-link:hover{
    transform:translateY(-3px) scale(1.06);
    color:#F59E0B !important;
    background:rgba(212,110,42,.16);
    border-color:rgba(212,110,42,.35);
    box-shadow:0 10px 22px rgba(212,110,42,.28);
}
.hv3-foot-social-link:hover::before{ opacity:1; }
.hv3-foot-social-link:hover .ti{ transform:rotate(-6deg) scale(1.1); }
.hv3-foot-social-link:focus-visible{
    outline:2px solid #F59E0B; outline-offset:2px;
}

/* ألوان علامة كل شبكة — تُطبَّق على :hover و:focus معاً بظلال متطابقة */
.hv3-foot-social-link[data-social="whatsapp"]:hover,
.hv3-foot-social-link[data-social="whatsapp"]:focus-visible{
    background:linear-gradient(135deg,#25D366,#128C7E); border-color:transparent;
    color:#fff !important; box-shadow:0 12px 24px rgba(37,211,102,.35);
}
.hv3-foot-social-link[data-social="x"]:hover,
.hv3-foot-social-link[data-social="x"]:focus-visible{
    background:linear-gradient(135deg,#2A2A2A,#000); border-color:transparent;
    color:#fff !important; box-shadow:0 12px 24px rgba(0,0,0,.55);
}
.hv3-foot-social-link[data-social="instagram"]:hover,
.hv3-foot-social-link[data-social="instagram"]:focus-visible{
    background:linear-gradient(135deg,#F58529 0%,#DD2A7B 55%,#8134AF 100%); border-color:transparent;
    color:#fff !important; box-shadow:0 12px 24px rgba(221,42,123,.38);
}
.hv3-foot-social-link[data-social="youtube"]:hover,
.hv3-foot-social-link[data-social="youtube"]:focus-visible{
    background:linear-gradient(135deg,#FF3D3D,#C4302B); border-color:transparent;
    color:#fff !important; box-shadow:0 12px 24px rgba(196,48,43,.38);
}
.hv3-foot-social-link[data-social="telegram"]:hover,
.hv3-foot-social-link[data-social="telegram"]:focus-visible{
    background:linear-gradient(135deg,#37BBFE,#007DBB); border-color:transparent;
    color:#fff !important; box-shadow:0 12px 24px rgba(34,158,217,.38);
}

/* حركة أقلّ لمن يفضّلها */
@media (prefers-reduced-motion: reduce){
    .hv3-foot-social-link,
    .hv3-foot-social-link .ti{ transition:none; }
    .hv3-foot-social-link:hover{ transform:none; }
    .hv3-foot-social-link:hover .ti{ transform:none; }
}

/* ═ الشريط السفليّ ═ */
.hv3-foot-bottom{
    border-top:1px solid rgba(255,255,255,.09);
    padding-block:22px;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap;
    font-size:14px; color:rgba(255,255,255,.5);
}
.hv3-foot-copy{ display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hv3-foot-copy b{ color:#fff; font-weight:700; }
.hv3-foot-dot{ color:rgba(255,255,255,.25); }

/* ═ الشارة (Live pill) ═ */
.hv3-foot-badge{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 15px; border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.11);
    font-size:13px; color:rgba(255,255,255,.72);
}
.hv3-foot-badge i{
    width:7px; height:7px; border-radius:50%;
    background:#3FD68C;
    box-shadow:0 0 0 4px rgba(63,214,140,.2);
}

/* ═ استجابة ═ */
@media (max-width: 520px){
    .hv3-foot{ padding-block:48px 0; border-top-left-radius:28px; border-top-right-radius:28px; }
    .hv3-foot-bottom{ justify-content:center; text-align:center; }
    .hv3-foot-copy{ justify-content:center; }
}

/* Refined unified footer */
.hv3-foot {
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 24%),
        linear-gradient(115deg, rgba(201,121,36,.075) 0%, rgba(201,121,36,.025) 24%, transparent 48%),
        linear-gradient(245deg, rgba(78,109,106,.13) 0%, rgba(78,109,106,.045) 36%, transparent 64%),
        linear-gradient(180deg, #17211f 0%, #101918 46%, #0b1211 100%);
    color: rgba(255,255,255,.72);
    padding-block-start: clamp(54px, 6vw, 76px);
    border-top-left-radius: clamp(24px, 3vw, 34px);
    border-top-right-radius: clamp(24px, 3vw, 34px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        inset 0 72px 120px rgba(255,255,255,.018),
        0 -14px 42px rgba(59, 47, 33, .055); /* ظل علوي دافئ — كان كحلياً بارداً ينشز على الأرضية الدافئة */
}

.hv3-foot::before {
    inset-block: 0;
    inset-inline: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background:
        linear-gradient(90deg, rgba(201,121,36,.08), transparent 30%, transparent 70%, rgba(78,109,106,.08)),
        linear-gradient(180deg, rgba(255,255,255,.04), transparent 36%, rgba(0,0,0,.1) 100%);
    opacity: .72;
    z-index: 0;
}

.hv3-foot::after {
    inset-inline: clamp(24px, 6vw, 84px);
    /* خيط الحافة كله في العائلة الدافئة — كان ينتهي بمقطع أزرق مخضرّ بارد على الأرضية الدافئة */
    background: linear-gradient(90deg, transparent, rgba(217,148,74,.62), rgba(201,121,36,.30), transparent);
    opacity: .55;
}

/* ═ الوضع الداكن: خياطة اللوحة مع أرضية Vuexy الداكنة (#14161B) ═
   الظل العلوي غير مرئي على أرضية داكنة، فنعتمد على خيط داخلي أوضح
   وخط الحافة النحاسي الأقوى كي لا تذوب اللوحة في الصفحة. */
html.dark-style .hv3-foot {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 72px 120px rgba(255, 255, 255, .018);
}
html.dark-style .hv3-foot::after { opacity: .75; }

.hv3-foot-grid {
    grid-template-columns: minmax(280px, 1.45fr) repeat(auto-fit, minmax(142px, 1fr));
    gap: clamp(24px, 3vw, 42px);
    align-items: start;
    padding-block-end: clamp(34px, 4vw, 48px);
}

.hv3-foot-about {
    max-width: 390px;
}

.hv3-foot-logo {
    display: inline-flex;
    align-items: center;
}

.hv3-foot-logo img {
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
}

.hv3-foot-about p,
.hv3-foot-lead {
    color: rgba(255,255,255,.70);
}

.hv3-foot-about p {
    margin-top: 16px;
    font-size: 14.5px;
    line-height: 1.9;
}

.hv3-foot-col h4 {
    margin-bottom: 14px;
    font-size: 15.5px;
    letter-spacing: 0;
}

.hv3-foot-col h4::before {
    width: 14px;
    height: 2px;
    opacity: .95;
}

.hv3-foot-col > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding-block: 6px;
    color: rgba(255,255,255,.68);
    line-height: 1.55;
}

.hv3-foot-col > a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(212,110,42,.55);
    box-shadow: 0 0 0 4px rgba(212,110,42,.08);
    opacity: .72;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.hv3-foot-col > a:hover {
    color: #f7b267;
    transform: translateX(-3px);
}

.hv3-foot-col > a:hover::before {
    opacity: 1;
    transform: scale(1.12);
    background: #f59e0b;
}

.hv3-foot-social {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

a.hv3-foot-social-link {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.105);
}

.hv3-foot-social-link .ti {
    font-size: 17px;
}

a.hv3-foot-social-link:hover,
.hv3-foot-social-link:hover {
    transform: translateY(-2px) scale(1.04) !important;
}

.hv3-foot-social-link:hover .ti {
    transform: scale(1.08);
}

.hv3-foot-bottom {
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.05));
    border-top-color: rgba(255,255,255,.105);
    padding-block: 19px 21px;
    color: rgba(255,255,255,.56);
}

.hv3-foot-badge {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: rgba(255,255,255,.76);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 860px) {
    .hv3-foot-about {
        grid-column: 1 / -1;
        max-width: 620px;
    }
}

@media (max-width: 520px) {
    .hv3-foot-grid {
        gap: 26px;
    }

    .hv3-foot-about,
    .hv3-foot-col {
        text-align: center;
    }

    .hv3-foot-logo,
    .hv3-foot-col h4,
    .hv3-foot-social,
    .hv3-foot-copy {
        justify-content: center;
    }

    .hv3-foot-about p {
        margin-inline: auto;
    }

    .hv3-foot-col > a {
        margin-inline: auto;
    }
}

/* Responsive footer fit */
@media (max-width: 980px) {
    .hv3-foot {
        padding-block-start: clamp(46px, 7vw, 60px);
    }

    .hv3-foot .wrap {
        width: min(100% - 36px, 1240px);
    }

    .hv3-foot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(24px, 4vw, 34px);
    }

    .hv3-foot-about {
        grid-column: 1 / -1;
        max-width: min(620px, 100%);
    }

    .hv3-foot-bottom {
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .hv3-foot {
        padding-block-start: 44px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
    }

    .hv3-foot .wrap {
        width: min(100% - 28px, 1240px);
    }

    .hv3-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-block-end: 30px;
    }

    .hv3-foot-about,
    .hv3-foot-col {
        grid-column: auto;
        max-width: 100%;
        min-width: 0;
        text-align: center;
    }

    .hv3-foot-logo,
    .hv3-foot-col h4,
    .hv3-foot-social,
    .hv3-foot-copy {
        justify-content: center;
    }

    .hv3-foot-about p,
    .hv3-foot-lead {
        max-width: 34ch;
        margin-inline: auto;
    }

    .hv3-foot-col > a {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
        justify-content: center;
        text-align: center;
    }

    .hv3-foot-bottom {
        flex-direction: column;
        justify-content: center;
        padding-block: 16px 18px;
        text-align: center;
    }

    .hv3-foot-badge {
        max-width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }
}