/* ============================================================================
   footer-2026.css  —  Footer rebuilt to match footer.png on 2026 tokens.
   Loaded after home-2026.css.  Palette: navy body + orange newsletter/accents.
   ========================================================================== */

.f26 {
    position: relative;
    display: flow-root;           /* establish BFC → stops margin-collapsing with the card */
    margin-top: 10rem;            /* white gap above footer */
    background: var(--navy);
    color: rgba(255, 255, 255, .72);
    padding: 0 0 2.4rem;
    font-size: 1.35rem;
}
.f26 .container { position: relative; }

/* ═════════════════  FLOATING NEWSLETTER BAR (orange)  ════════════════════ */
.f26-news {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 2rem;
    background: linear-gradient(105deg, var(--accent) 0%, var(--accent-600) 100%);
    border-radius: var(--r-xl, 2rem);
    padding: 2.2rem 3rem;
    margin-top: -6rem;            /* with flow-root parent → ~half above (white), half over navy */
    box-shadow: 0 2rem 4rem rgba(83, 125, 118, .28);
}
.f26-news-intro { display: flex; align-items: center; gap: 1.4rem; }
.f26-news-icon {
    flex-shrink: 0; width: 5.4rem; height: 5.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .18); color: #fff; font-size: 2.4rem;
}
.f26-news-icon i { line-height: 1; }
.f26-news-title { margin: 0; color: #fff; font-size: 1.9rem; font-weight: var(--fw-bold); }
.f26-news-sub   { margin: .3rem 0 0; color: rgba(255, 255, 255, .85); font-size: 1.25rem; }

.f26-news-form { flex: 1 1 34rem; max-width: 46rem; }
.f26-news-field {
    display: flex; align-items: stretch; gap: .8rem;
    background: rgba(255, 255, 255, .16); border-radius: var(--r-pill, 999px);
    padding: .5rem .5rem .5rem 1.8rem;
}
.f26-news-field input {
    flex: 1 1 auto; border: 0; background: transparent; outline: none;
    color: #fff; font-size: 1.35rem; padding: 0 1rem; font-family: inherit;
}
.f26-news-field input::placeholder { color: rgba(255, 255, 255, .8); }
.f26-news-btn {
    flex-shrink: 0; border: 0; cursor: pointer;
    background: var(--navy); color: #fff;
    font-family: inherit; font-size: 1.35rem; font-weight: var(--fw-bold);
    padding: 0 2.4rem; border-radius: var(--r-pill, 999px);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.f26-news-btn:hover { background: #000; transform: translateY(-1px); }
.f26-news-form .field-validation-error,
.f26-news-form .text-danger { color: #fff3; }
/* پیامِ سرورِ خبرنامه. :not(:empty) لازم است وگرنه کادرِ خالی هم پیش از
   ارسال یک نوارِ تیره روی بار می‌کشد. */
.f26-news-msg { margin: 0; min-height: 0; }
.f26-news-msg:not(:empty) {
    color: #fff; background: rgba(0,0,0,.25); border-radius: 1rem;
    padding: .3rem 1.2rem; margin-top: .6rem; font-size: 1.15rem; width: fit-content;
}
.f26-news-msg.is-error:not(:empty) { background: rgba(120,0,0,.45); }
.f26-news-form .text-danger:not(:empty) {
    color: #fff; background: rgba(0,0,0,.25); border-radius: 1rem;
    padding: .3rem 1.2rem; margin-top: .6rem; font-size: 1.15rem; width: fit-content;
}

/* ══════════════════════════  DARK BODY GRID  ════════════════════════════ */
.f26-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr 1.3fr 1.4fr;  /* menu | menu2 | contact | about | card */
    gap: 3.2rem;
    padding: 4.5rem 0 3.5rem;
}

.f26-col-title {
    display: flex; align-items: center; gap: .8rem;
    margin: 0 0 2rem; color: #fff;
    font-size: 1.55rem; font-weight: var(--fw-bold);
}

/* فاصلهٔ «سرِ ستون تا فهرست» با gap داده می‌شود، نه با marginِ خودِ عنوان.
   دلیلش این است که این سه ستون دقیقاً دو فرزند دارند (عنوان + فهرست)، پس gap
   همان و فقط همان فاصله است — و برخلافِ margin، هیچ قاعدهٔ دیگری روی h4
   نمی‌تواند بی‌صدا خنثایش کند (marginِ ۳٫۲ رِمی روی همین عنوان خنثا می‌شد).
   فاصلهٔ بینِ خودِ لینک‌ها 1.15rem است؛ این کمی بزرگ‌تر است تا عنوان «سرِ
   ستون» خوانده شود نه یکی از آیتم‌ها. */
.f26-col-menu,
.f26-col-menu2,
.f26-col-contact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.f26-col-menu > .f26-col-title,
.f26-col-menu2 > .f26-col-title,
.f26-col-contact > .f26-col-title { margin-bottom: 0; }
.f26-col-title i { color: var(--accent); font-size: 1.7rem; line-height: 0; }

/* menu + contact links */
.f26-menu .footer-side-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 1.15rem;
}
.f26-menu .footer-side-list li { display: block; float: none; width: 100%; margin: 0; }
.f26-menu .footer-side-list a {
    display: flex; align-items: center; gap: .7rem;
    padding: 0;
    color: rgba(255, 255, 255, .72); font-size: 1.35rem; line-height: 1.6;
    transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
.f26-menu .footer-side-list a i { color: var(--accent); font-size: 1.3rem; line-height: 1; }
.f26-menu .footer-side-list a:hover { color: var(--accent); padding-inline-start: .5rem; }

.f26-menu .footer-menu-list { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 1.15rem; }
.f26-menu .footer-menu-list li { display: block; float: none; width: 100%; margin: 0; }
.f26-menu .footer-menu-list a {
    display: flex; align-items: center; gap: .7rem; padding: 0;
    color: rgba(255, 255, 255, .72); font-size: 1.35rem; line-height: 1.6;
    transition: color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
.f26-menu .footer-menu-list a i { color: var(--accent); font-size: 1.3rem; line-height: 1; }
.f26-menu .footer-menu-list a:hover { color: var(--accent); padding-inline-start: .5rem; }

.f26-col-menu:not(:has(a)),
.f26-col-menu2:not(:has(a)) { display: none; }

.f26-contact { list-style: none; margin: 0; padding: 0; }
.f26-contact li {
    display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.25rem;
    line-height: 1.9;
}
.f26-contact li i { color: var(--accent); font-size: 1.5rem; margin-top: .2rem; line-height: 1; flex-shrink: 0; }
.f26-contact a, .f26-contact span { color: rgba(255, 255, 255, .72); }
.f26-contact a:hover { color: var(--accent); }

/* about column */
.f26-logo { display: inline-block; margin-bottom: 1.4rem; }
.f26-logo img { max-height: 5rem; width: auto; }
.f26-logo-text { color: #fff; font-size: 2rem; font-weight: 800; }
.f26-about-text { margin: 0 0 1.8rem; line-height: 2; color: rgba(255, 255, 255, .62); font-size: 1.3rem; }
.f26-badges { display: flex; gap: 1rem; flex-wrap: wrap; }
.f26-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-md, 1.2rem); padding: .8rem 1rem; min-width: 8rem; height: 7rem;
}
.f26-badge img { max-height: 5rem; max-width: 8rem; width: auto; }

/* highlight card */
.f26-card {
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-lg, 1.6rem); padding: 2.4rem 2.2rem; height: 100%;
}
.f26-card-title { margin: 0 0 1rem; color: #fff; font-size: 1.7rem; font-weight: var(--fw-bold); }
.f26-card-sub   { margin: 0 0 1.6rem; color: rgba(255, 255, 255, .6); font-size: 1.3rem; line-height: 1.9; }
.f26-card-phone {
    display: inline-block; color: var(--accent); font-weight: var(--fw-bold);
    font-size: 2.2rem; letter-spacing: .05rem; direction: ltr;
}
.f26-card-phone:hover { color: var(--accent-300); }
.f26-card-note { margin: 1rem 0 0; color: rgba(255, 255, 255, .55); font-size: 1.2rem; }

/* ═══════════════════════════  BOTTOM BAR  ═══════════════════════════════ */
.f26-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.6rem;
    padding-top: 2.6rem; border-top: 1px solid rgba(255, 255, 255, .1);
}
.f26-socials { display: flex; align-items: center; gap: 1rem; }
.f26-social {
    width: 4rem; height: 4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .8);
    font-size: 1.6rem;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.f26-social:hover { background: var(--accent-600); color: #fff; transform: translateY(-3px); }
.f26-copy { margin: 0; color: rgba(255, 255, 255, .55); font-size: 1.25rem; }

/* ══════════════════════════  RESPONSIVE  ════════════════════════════════ */
@media (max-width: 1199px) {
    .f26-body { grid-template-columns: 1fr 1fr; gap: 2.8rem 3.2rem; }
}
@media (max-width: 767px) {

    .f26-news { flex-direction: column; align-items: stretch; text-align: center; margin-top: -4.5rem; padding: 1.6rem; gap: 1.4rem; }
    /* عنوان راست‌چین می‌ماند، نه وسط: آیکن + تیتر + زیرتیتر یک بلوکِ چپ‌به‌راست
       نیستند و وسط‌چین‌کردنشان لبهٔ راستِ باکس را می‌شکند. */
    .f26-news-intro { justify-content: flex-start; gap: 1rem; text-align: right; }
    .f26-news-icon { width: 4.4rem; height: 4.4rem; font-size: 2rem; }
    .f26-news-title { font-size: 1.6rem; }
    .f26-news-form { flex: 0 0 auto; max-width: 100%; }
    .f26-body { grid-template-columns: 1fr; gap: 3rem; padding: 3.5rem 0 2.5rem; }
    .f26-bottom { flex-direction: column-reverse; text-align: center; }
    .f26-socials { justify-content: center; }
}