/* ============================================================
   Franchise page (/Page/Blog) — "Системийн нийлүүлэлт".
   Scoped under .fr so it can't affect other pages.
   Replaces the rotating rainbow avatar ring with a clean
   indigo ring, and modernizes the whole layout.
   ============================================================ */

.fr {
    --fr-brand: #3f51b5;
    --fr-brand-d: #2c3a91;
    --fr-brand-l: #5c6bc0;
    --fr-accent: #ff7a59;
    --fr-accent-d: #f4623a;
    --fr-ink: #16225a;
    --fr-body: #5a6072;
    --fr-muted: #8a90a2;
    --fr-line: #e4e7f2;
    --fr-bg-soft: #f6f7fb;
    --fr-radius: 18px;
    --fr-shadow: 0 18px 40px -18px rgba(22, 27, 51, .28);
    --fr-shadow-sm: 0 10px 24px -14px rgba(22, 27, 51, .26);

    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    color: var(--fr-body);
    line-height: 1.7;
}
.fr * { box-sizing: border-box; }
.fr h1, .fr h2, .fr h3, .fr h4, .fr h5 {
    font-family: 'Montserrat', 'Roboto', sans-serif;
    color: var(--fr-ink);
    margin: 0;
    line-height: 1.2;
}
.fr__wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

/* ---------- Hero ---------- */
.fr-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    padding: 70px 22px 86px;
    background: linear-gradient(130deg, var(--fr-brand-d), var(--fr-brand) 55%, var(--fr-brand-l));
}
.fr-hero::before,
.fr-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}
.fr-hero::before { width: 320px; height: 320px; top: -150px; right: -80px; }
.fr-hero::after { width: 240px; height: 240px; bottom: -130px; left: -60px; background: rgba(255, 122, 89, .18); }
.fr-hero__eyebrow {
    position: relative;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.fr-hero h1 {
    position: relative;
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
}
.fr-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.fr-hero__wave svg { width: 100%; height: 60px; display: block; }

/* ---------- Body wrap pulled up over the wave ---------- */
.fr-body { position: relative; margin-top: -46px; padding-bottom: 80px; }

/* ---------- Stat chips ---------- */
.fr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 34px;
}
.fr-stat {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--fr-shadow-sm);
    padding: 22px 16px;
    text-align: center;
}
.fr-stat__num {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--fr-brand);
    line-height: 1;
}
.fr-stat__num span { color: var(--fr-accent); }
.fr-stat__label { margin-top: 7px; font-size: 13.5px; color: var(--fr-muted); }

/* ---------- Info card ---------- */
.fr-card {
    background: #fff;
    border-radius: var(--fr-radius);
    box-shadow: var(--fr-shadow);
    padding: 40px;
    margin-bottom: 30px;
}
.fr-card > p { margin: 0 0 16px; font-size: 16px; color: var(--fr-body); }
.fr-card > p:last-of-type { margin-bottom: 0; }

.fr-cta { margin-top: 26px; }
.fr-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 15px 28px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.fr-btn--primary {
    background: linear-gradient(135deg, var(--fr-brand-l), var(--fr-brand));
    color: #fff;
    box-shadow: 0 14px 26px -12px rgba(63, 81, 181, .75);
}
.fr-btn--primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 20px 34px -12px rgba(63, 81, 181, .85); }

/* ---------- Contact pills ---------- */
.fr-contact { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.fr-contact a {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    background: var(--fr-bg-soft);
    border: 1px solid var(--fr-line);
    border-radius: 12px;
    padding: 12px 18px;
    text-decoration: none;
    color: var(--fr-ink);
    font-weight: 500;
    font-size: 15px;
    transition: border-color .2s ease, transform .2s ease;
}
.fr-contact a:hover { border-color: var(--fr-brand-l); transform: translateY(-2px); }
.fr-contact i {
    width: 36px; height: 36px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 9px;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(135deg, var(--fr-brand-l), var(--fr-brand));
}

/* ---------- Section heading ---------- */
.fr-subhead {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--fr-ink);
    margin: 0 0 22px;
}
.fr-subhead::before {
    content: "";
    width: 5px; height: 24px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--fr-brand-l), var(--fr-accent));
}

/* ---------- Service list ---------- */
.fr-services {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.fr-services li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--fr-bg-soft);
    border: 1px solid var(--fr-line);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    color: var(--fr-ink);
    font-weight: 500;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.fr-services li:hover { border-color: transparent; transform: translateY(-3px); box-shadow: var(--fr-shadow-sm); }
.fr-services li i {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    background: linear-gradient(135deg, #46c9a8, #1f9e87);
}

/* ============================================================
   AUTHORS CAROUSEL  (#authors-container kept for the JS)
   ============================================================ */
.fr-authors-wrap { margin-top: 8px; }
.fr-authors {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    padding: 12px 4px 18px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fr-authors::-webkit-scrollbar { display: none; }

.fr-author {
    flex: 0 0 210px;
    min-width: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid var(--fr-line);
    border-radius: var(--fr-radius);
    padding: 24px 16px 20px;
    box-shadow: var(--fr-shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    user-select: none;
    white-space: normal;
}
.fr-author:hover { transform: translateY(-6px); box-shadow: var(--fr-shadow); border-color: transparent; }

/* Clean indigo ring instead of the rotating rainbow */
.fr-avatar {
    position: relative;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--fr-bg-soft);
    /* white gap + indigo ring + soft drop shadow */
    box-shadow: 0 0 0 4px #fff,
                0 0 0 7px rgba(63, 81, 181, .55),
                0 14px 26px -12px rgba(22, 27, 51, .45);
    transition: box-shadow .3s ease;
}
.fr-author:hover .fr-avatar {
    box-shadow: 0 0 0 4px #fff,
                0 0 0 7px var(--fr-brand),
                0 18px 30px -12px rgba(63, 81, 181, .6);
}
.fr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fr-author h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fr-ink);
    margin: 0 0 6px;
    line-height: 1.25;
}
.fr-author .author-desc {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--fr-muted);
    line-height: 1.45;
}
.fr-author .author-desc li { margin-bottom: 2px; }

/* ============================================================
   REQUEST MODAL  (#franchiseform kept for the JS)
   ============================================================ */
#franchiseform {
    display: none;
    position: fixed;
    z-index: 1000;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(16, 20, 48, .62);
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
    padding: 20px;
}
#franchiseform .modal-content {
    background: #fff;
    padding: 34px 38px;
    border-radius: 18px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 30px 60px -20px rgba(22, 27, 51, .55);
    position: relative;
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}
#franchiseform .close {
    position: absolute;
    top: 16px; right: 20px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 22px;
    color: var(--fr-muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
#franchiseform .close:hover { background: #ffe7e0; color: var(--fr-accent-d); }
#franchiseform h3 {
    margin: 0 0 22px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--fr-ink);
    text-align: center;
}
#franchiseform label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--fr-ink);
    font-size: 14px;
}
#franchiseform input[type="text"],
#franchiseform input[type="email"],
#franchiseform select,
#franchiseform textarea {
    width: 100%;
    padding: 11px 14px;
    margin-bottom: 16px;
    border: 1.5px solid var(--fr-line);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--fr-ink);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    resize: vertical;
}
#franchiseform input:focus,
#franchiseform select:focus,
#franchiseform textarea:focus {
    border-color: var(--fr-brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(63, 81, 181, .15);
}
#franchiseform button[type="submit"] {
    display: block;
    width: 100%;
    padding: 14px 0;
    margin-top: 4px;
    background: linear-gradient(135deg, var(--fr-brand-l), var(--fr-brand));
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 14px 26px -12px rgba(63, 81, 181, .8);
}
#franchiseform button[type="submit"]:hover { transform: translateY(-2px); }
#franchiseform button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Loading overlay ---------- */
#loadingScreen { display: none; position: fixed; z-index: 1001; inset: 0; background: rgba(16, 20, 48, .72); justify-content: center; align-items: center; }
.fr .spinner,
#loadingScreen .spinner {
    border: 6px solid rgba(255, 255, 255, .25);
    border-top: 6px solid #fff;
    border-radius: 50%;
    width: 56px; height: 56px;
    animation: fr-spin 1s linear infinite;
}
@keyframes fr-spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .fr-stats { grid-template-columns: repeat(2, 1fr); }
    .fr-services { grid-template-columns: 1fr; }
    .fr-card { padding: 28px 22px; }
}
@media (max-width: 520px) {
    .fr-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .fr-btn, .fr-contact a { width: 100%; justify-content: center; }
}