/*
   The modern footer (Views/Shared/_ModernFooter.cshtml), on every public page once the modern
   design is switched on in the site settings, and on the administrators' preview of it.

   Light and cheerful rather than dark: a blush-to-peach-to-lilac panel with a ribbon of colour
   along its top edge, soft coloured blooms in the corners, icons on bright little tiles, and
   dark plum text that stays easy to read. The same rose family as the modern home page, with
   peach and orange added for warmth.
*/

.mf {
    --mf-ink: #3b1f40;
    --mf-text: #6a5670;
    --mf-faint: #9a88a0;
    --mf-line: rgba(123, 42, 107, 0.12);
    --mf-rose: #e0487f;
    --mf-peach: #ff9a62;
    --mf-violet: #9b5de5;
    --mf-ribbon: linear-gradient(90deg, #ff7eb3 0%, #ffab73 35%, #ffd36e 55%, #b38cff 80%, #ff7eb3 100%);

    position: relative;
    z-index: 1;
    margin-top: 40px;
    font-family: Vazirmatn, Tahoma, sans-serif;
    color: var(--mf-text);
    line-height: 1.9;
}

.mf *,
.mf *::before,
.mf *::after { box-sizing: border-box; }

.mf a { text-decoration: none; }
.mf ul { list-style: none; margin: 0; padding: 0; }
.mf p { margin: 0; }

.mf svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mf-wrap {
    max-width: 1248px;
    margin-inline: auto;
    padding-inline: 24px;
}

.mf-panel {
    position: relative;
    overflow: hidden;
    padding: 60px 56px 0;
    border-radius: 40px 40px 0 0;
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 126, 179, 0.28), rgba(255, 126, 179, 0) 38%),
        radial-gradient(circle at 55% 0%, rgba(255, 211, 110, 0.22), rgba(255, 211, 110, 0) 35%),
        radial-gradient(circle at 96% 95%, rgba(179, 140, 255, 0.28), rgba(179, 140, 255, 0) 40%),
        linear-gradient(135deg, #fff0f6 0%, #fff4ec 45%, #f5eeff 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-bottom: 0;
    box-shadow: 0 -24px 60px -36px rgba(224, 72, 127, 0.45);
}

/* A ribbon of colour along the top edge. */
.mf-panel::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 6px;
    background: var(--mf-ribbon);
}

.mf-watermark {
    position: absolute;
    width: 340px;
    height: 340px;
    inset-block-end: -70px;
    inset-inline-end: -60px;
    opacity: 0.07;
    pointer-events: none;
}

.mf-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 1.2fr;
    gap: 48px;
    padding-bottom: 44px;
}

/* ── the school ── */

.mf-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--mf-ink);
}

.mf-brand:hover { color: var(--mf-ink); }

.mf-crest {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 26px -12px rgba(224, 72, 127, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.7);
}

.mf-crest img { width: 50px; height: 50px; object-fit: contain; }

.mf-brand strong { display: block; font-size: 19px; font-weight: 900; line-height: 1.6; }

.mf-brand small {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    background: linear-gradient(90deg, var(--mf-rose), var(--mf-peach));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mf-about p {
    margin-top: 18px;
    font-size: 14px;
    line-height: 2.1;
    max-width: 420px;
}

.mf-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

/* Each network in its own bright colour, the way families recognise it. */
.mf-socials a {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    background: linear-gradient(135deg, #ff7eb3, #e0487f);
    box-shadow: 0 10px 20px -10px rgba(224, 72, 127, 0.8);
    transition: transform .2s ease, box-shadow .2s ease;
}

.mf-socials a[href*="instagram"] { background: linear-gradient(135deg, #feda75 0%, #fa7e1e 30%, #d62976 65%, #962fbf 100%); }
.mf-socials a[href*="t.me"],
.mf-socials a[href*="telegram"] { background: linear-gradient(135deg, #4fc3f7, #229ed9); box-shadow: 0 10px 20px -10px rgba(34, 158, 217, 0.8); }
.mf-socials a[href*="wa.me"],
.mf-socials a[href*="whatsapp"] { background: linear-gradient(135deg, #5be584, #25b35a); box-shadow: 0 10px 20px -10px rgba(37, 179, 90, 0.8); }
.mf-socials a[href*="ble.ir"],
.mf-socials a[href*="bale"] { background: linear-gradient(135deg, #4dd8b0, #16a37f); box-shadow: 0 10px 20px -10px rgba(22, 163, 127, 0.8); }
.mf-socials a[href*="eitaa"] { background: linear-gradient(135deg, #ffb45c, #f07b1a); box-shadow: 0 10px 20px -10px rgba(240, 123, 26, 0.8); }

.mf-socials a:hover { transform: translateY(-3px) scale(1.04); color: #fff; }

/* ── the columns ── */

.mf h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 20px;
    color: var(--mf-ink);
    font-size: 16px;
    font-weight: 900;
}

/* A little coloured bead before each heading. */
.mf h2::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mf-rose), var(--mf-peach));
    box-shadow: 0 0 0 4px rgba(224, 72, 127, 0.12);
}

.mf-links li + li { margin-top: 6px; }

.mf-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mf-text);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s ease, gap .2s ease;
}

.mf-links a svg { width: 14px; height: 14px; color: var(--mf-peach); }
.mf-links a:hover { color: var(--mf-rose); gap: 10px; }

.mf-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}

.mf-contact li + li { margin-top: 14px; }

.mf-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, #ff7eb3, #e0487f);
    box-shadow: 0 8px 16px -8px rgba(224, 72, 127, 0.8);
}

.mf-contact li:nth-child(2) .mf-icon { background: linear-gradient(135deg, #ffc27a, #ff8a4c); box-shadow: 0 8px 16px -8px rgba(255, 138, 76, 0.8); }
.mf-contact li:nth-child(3) .mf-icon { background: linear-gradient(135deg, #c3a1ff, #9b5de5); box-shadow: 0 8px 16px -8px rgba(155, 93, 229, 0.8); }

.mf-contact li > span:not(.mf-icon),
.mf-contact li > a { padding-top: 7px; }

.mf-contact a { color: var(--mf-text); font-weight: 600; transition: color .2s ease; }
.mf-contact a:hover { color: var(--mf-rose); }

.mf-phones { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mf-sep { color: var(--mf-faint); }

.mf-routes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.mf-routes a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(224, 72, 127, 0.2);
    color: var(--mf-ink);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 18px -12px rgba(224, 72, 127, 0.6);
    transition: transform .2s ease, border-color .2s ease;
}

.mf-routes a svg { width: 15px; height: 15px; color: var(--mf-rose); }
.mf-routes a:hover { transform: translateY(-2px); border-color: rgba(224, 72, 127, 0.5); color: var(--mf-rose); }

/* ── the last line ── */

.mf-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 22px;
    border-top: 1px dashed rgba(224, 72, 127, 0.25);
    font-size: 13px;
    color: var(--mf-faint);
}

.mf-top {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff7eb3, #ff9a62);
    color: #fff;
    box-shadow: 0 10px 22px -10px rgba(224, 72, 127, 0.9);
    transition: transform .2s ease;
}

.mf-top:hover { transform: translateY(-3px); color: #fff; }

/* ── narrower screens ── */

@media (max-width: 900px) {
    .mf-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .mf-about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .mf { margin-top: 24px; }
    .mf-wrap { padding-inline: 0; }
    .mf-panel { padding: 44px 22px 0; border-radius: 32px 32px 0 0; }
    .mf-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
    .mf-bottom { font-size: 12px; }
    .mf-watermark { width: 220px; height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .mf * { transition: none !important; }
}