/* =========================================================================
   Mosque Finder — design system (Phase 1: shared chrome + homepage)
   Loaded AFTER public/New/css/style.css so these rules take over cleanly.
   Concept: "Quiet Wayfinding" — the job of this page is helping someone
   find a place to pray, right now. Calm paper background, one confident
   green, gold used only where it means something (Jummah / today),
   generous space, a warm serif for voice, a clean sans for doing things.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
    --mf-paper: #FBF8F2;
    --mf-paper-raised: #FFFFFF;
    --mf-ink: #201F1B;
    --mf-ink-soft: #5B584F;
    --mf-ink-faint: #8A8678;
    --mf-green: #1F4D3D;
    --mf-green-strong: #163A2D;
    --mf-green-tint: #E9F0EA;
    /* Always-dark brand green for the hero/footer — deliberately does NOT
       flip in dark mode, since it's a fixed brand surface, not adaptive UI. */
    --mf-brand-dark: #163A2D;
    --mf-brand-dark-deep: #0F2A20;
    --mf-gold: #A9761E;
    --mf-gold-tint: #F6EAD2;
    --mf-line: #E7E1D2;
    --mf-shadow: 0 1px 2px rgba(32,31,27,.04), 0 8px 24px rgba(32,31,27,.06);
    --mf-radius: 14px;
    --mf-radius-sm: 10px;
    --mf-font-display: 'Fraunces', Georgia, serif;
    --mf-font-body: 'Work Sans', -apple-system, Segoe UI, sans-serif;
}

/* Light is the site default regardless of the visitor's OS setting — there's
   no theme toggle yet, so we don't want dark to switch on automatically out
   from under people. Dark tokens stay defined and only activate behind an
   explicit [data-theme="dark"] stamp, ready for a real toggle later. */
:root[data-theme="dark"] {
    --mf-paper: #14201B;
    --mf-paper-raised: #1B2822;
    --mf-ink: #F1EEE5;
    --mf-ink-soft: #C0C6BE;
    --mf-ink-faint: #8B958D;
    --mf-green: #6FBE9B;
    --mf-green-strong: #8ED4B2;
    --mf-green-tint: #1E2E27;
    --mf-gold: #E0B15E;
    --mf-gold-tint: #2B2519;
    --mf-line: #35473C;
    --mf-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
}

/* ---------- base ---------- */
body {
    background: var(--mf-paper) !important;
    color: var(--mf-ink) !important;
    font-family: var(--mf-font-body) !important;
    -webkit-font-smoothing: antialiased;
}
.mf-display, h1.mf-display, h2.mf-display, h3.mf-display {
    font-family: var(--mf-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mf-ink);
    text-wrap: balance;
}
a { text-decoration: none; }

/* ---------- header ---------- */
header {
    background: var(--mf-paper-raised) !important;
    border-bottom: 1px solid var(--mf-line);
}
header .row { padding: 10px 0; align-items: center; }
header .logo img { max-height: 40px; width: auto; }
@media (min-width: 768px) {
    header .logo img { max-height: 58px; }
}
/* Mobile: the logo/profile-icon/menu-toggle row was overflowing past the
   viewport edge — Bootstrap's default container/column gutters left too
   little room for the right-hand cluster. Bootstrap's .row/.col padding
   is a matched pair (row's negative margin must equal the column's own
   padding) so both have to shrink together, not just the column. */
@media (max-width: 767px) {
    header .container { padding-left: 14px; padding-right: 14px; }
    header .row { flex-wrap: nowrap; margin-left: 0; margin-right: 0; }
    /* Size each column to its own content instead of a fixed 8/12 + 4/12
       split — the logo column shrinks if it must (min-width:0 lets a long
       wordmark image actually shrink instead of forcing the row wider than
       the viewport), and the nav cluster takes exactly what it needs so the
       menu toggle can never be pushed past the edge. */
    header .col-8 { flex: 1 1 auto; min-width: 0; padding-left: 0; padding-right: 8px; }
    header .col-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    header .navbar-toggler { padding: 6px 9px; margin: 0; }
    /* The login/profile icon and the menu toggle are siblings in the same
       flex nav — give them matching boxed treatment and real spacing so
       they read as a deliberate pair instead of one bare icon crowding
       a bordered button. */
    header nav.navbar { display: flex; align-items: center; gap: 8px; }
    header .mf-mobile-nav-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--mf-line);
        border-radius: 8px;
        flex: 0 0 auto;
    }
    header .mf-mobile-nav-icon i { color: var(--mf-green); font-size: 15px; }
    header .navbar-toggler { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
}
header nav .nav-link {
    font-family: var(--mf-font-body) !important;
    font-weight: 500;
    color: var(--mf-ink-soft) !important;
    font-size: 13.5px;
    white-space: nowrap;
    padding: 8px 12px !important;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
header nav .nav-link:hover,
header nav .nav-link:focus {
    color: var(--mf-green) !important;
    background: var(--mf-green-tint);
}
header nav .nav-link i { color: var(--mf-green) !important; margin-right: 2px; }
header .navbar-toggler { border: 1px solid var(--mf-line); border-radius: 8px; }
header .navbar-toggler .fa-bars { color: var(--mf-green); }

/* ---------- hero ---------- */
.mf-hero {
    position: relative;
    background: var(--mf-brand-dark);
    /* No overflow:hidden here on purpose — the search autocomplete dropdown
       is positioned relative to the search box and must be able to extend
       below the hero without being clipped by it. */
}
.mf-hero::before {
    /* faint geometric star motif — restrained, not literal */
    content: '';
    position: absolute; inset: 0;
    opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23FBF8F2' stroke-width='1'%3E%3Cpath d='M42 4 L54 30 L80 30 L59 46 L67 72 L42 56 L17 72 L25 46 L4 30 L30 30 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 168px 168px;
    pointer-events: none;
}
.mf-hero .mf-hero-inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 56px 20px 64px;
    text-align: center;
}
.mf-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mf-gold-tint);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .03em;
    margin-bottom: 18px;
}
.mf-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: #E0B15E; }
.mf-hero h1 {
    font-family: var(--mf-font-display);
    font-weight: 600;
    color: #FBF8F2;
    font-size: 26px;
    line-height: 1.2;
    margin: 0 0 22px;
    text-wrap: balance;
}
.mf-hero-search {
    background: var(--mf-paper-raised);
    border-radius: var(--mf-radius);
    padding: 8px;
    box-shadow: var(--mf-shadow);
    display: flex;
    gap: 6px;
}
.mf-hero-search input,
.mf-hero-search .twitter-typeahead {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}
.mf-hero-search input {
    border: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 15px;
    font-family: var(--mf-font-body);
    color: var(--mf-ink);
    outline: none;
    box-sizing: border-box;
}
.mf-hero-search input::placeholder { color: var(--mf-ink-faint); }
.mf-hero-search button {
    flex: 0 0 auto;
    background: var(--mf-green);
    color: #fff;
    border: none;
    border-radius: var(--mf-radius-sm);
    padding: 0 20px;
    font-family: var(--mf-font-body);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .15s ease;
}
.mf-hero-search button:hover { background: var(--mf-green-strong); }
.mf-hero-nearme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: rgba(251,248,242,.85);
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 1px solid rgba(251,248,242,.35);
    padding-bottom: 1px;
}
.mf-hero-nearme:hover { color: #fff; border-color: #fff; }

/* ---------- layout / sections ---------- */
/* Deliberately no custom max-width here — it must match the plain Bootstrap
   .container width the header and footer already use, or the homepage
   content drifts out of alignment with them at wider viewports. */
.mf-section { margin: 28px 0; }
.mf-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.mf-section-head h2, .mf-section-head h3, .mf-section-head h4, .mf-section-head h6 {
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
    color: var(--mf-ink) !important;
    font-size: 19px;
    margin: 0 !important;
    text-align: left !important;
}
.mf-section-head .mf-eyebrow-icon {
    color: var(--mf-gold);
    margin-right: 6px;
}

/* ---------- promo tiles (Watch Live Makkah/Madina, Al-Quran, 99 Names) ---------- */
.mf-promo-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.mf-promo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    /* Light, faintly-green translucent surface — the same idea as the
       "UK's mosque & prayer time directory" pill on the hero, just adapted
       for a light page background instead of a dark one. */
    background: rgba(31,77,61,.05);
    border: 1px solid rgb(31 77 61);
    color: var(--mf-ink);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    padding: 26px 14px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mf-promo-tile::before {
    content: '';
    position: absolute; inset: 0;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%231F4D3D' stroke-width='1'%3E%3Cpath d='M42 4 L54 30 L80 30 L59 46 L67 72 L42 56 L17 72 L25 46 L4 30 L30 30 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 120px;
    pointer-events: none;
}
.mf-promo-tile:hover {
    transform: translateY(-2px);
    background: rgba(31,77,61,.09);
    box-shadow: 0 4px 8px rgba(32,31,27,.06), 0 14px 28px rgba(32,31,27,.1);
    color: var(--mf-ink);
}
.mf-promo-tile i {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(31,77,61,.08);
    border: 1px solid rgba(31,77,61,.2);
    font-size: 18px;
    color: var(--mf-green);
}
.mf-promo-tile .mf-promo-label {
    position: relative;
    font-family: var(--mf-font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.25;
    color: var(--mf-ink);
}
.mf-promo-tile .mf-promo-sub {
    position: relative;
    font-family: var(--mf-font-body);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mf-ink-soft);
}
.mf-promo-tile .mf-live-badge {
    position: absolute;
    top: 10px; right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--mf-paper-raised);
    border: 1px solid rgba(31,77,61,.22);
    border-radius: 999px;
    padding: 3px 8px 3px 6px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--mf-green);
}
.mf-promo-tile .mf-live-badge .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #D94F3D;
}

/* ---------- cards (replaces .border-green / .bgc boxes) ---------- */
.mf-card {
    background: var(--mf-paper-raised);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    padding: 18px;
}
.mf-card-quiet {
    background: var(--mf-green-tint);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    padding: 18px;
}
/* The old Bootstrap green (#28a745) clashes with our darker, quieter one —
   scoped to our own components only, so untouched pages elsewhere are
   unaffected until they're redesigned too. */
.mf-card .text-success,
.mf-card-quiet .text-success,
.mf-timetable-card .text-success { color: var(--mf-green) !important; }
.mf-card .bg-success,
.mf-card-quiet .bg-success { background-color: var(--mf-green) !important; }

/* Arabic devotional text (Dua of the Day) */
.mf-arabic {
    font-family: 'Traditional Arabic', 'Scheherazade New', var(--mf-font-display), serif;
    font-size: 22px;
    line-height: 2;
    color: var(--mf-green);
    text-align: center;
}

/* Hadith body text */
.mf-hadith-text { color: var(--mf-ink-soft); line-height: 1.7; font-size: 14.5px; }

/* Live-channel / promo tiles: keep the image, soften the frame */
.live-channe-deks {
    display: block;
    border-radius: var(--mf-radius-sm);
    overflow: hidden;
    box-shadow: var(--mf-shadow);
    transition: transform .15s ease;
}
.live-channe-deks:hover { transform: translateY(-2px); }
.live-channe-deks img { display: block; width: 100%; }

/* ---------- prayer-time table ---------- */
.mf-timetable-card {
    background: var(--mf-paper-raised);
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius);
    box-shadow: var(--mf-shadow);
    overflow: hidden;
}
.mf-timetable-card .mf-timetable-head {
    background: var(--mf-green);
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.mf-timetable-card .mf-timetable-head h4 {
    font-family: var(--mf-font-display);
    font-weight: 600;
    font-size: 17px;
    margin: 0;
    color: #fff;
}
.mf-timetable-card .mf-timetable-head span { font-size: 12.5px; opacity: .85; }
table.tw.widget-timming {
    width: 100%;
    border: none !important;
    margin: 0;
}
table.tw.widget-timming thead th {
    background: var(--mf-green-tint) !important;
    color: var(--mf-ink-soft) !important;
    font-family: var(--mf-font-body);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: none !important;
    padding: 10px 18px !important;
}
table.tw.widget-timming tbody td {
    border: none !important;
    border-bottom: 1px solid var(--mf-line) !important;
    padding: 10px 18px !important;
    font-family: var(--mf-font-body);
    color: var(--mf-ink);
    font-size: 14.5px;
}
table.tw.widget-timming tbody tr:last-child td { border-bottom: none !important; }

table.tw.spacial_days_table td {
    border: none !important;
    border-bottom: 1px solid var(--mf-line) !important;
    padding: 9px 4px !important;
    font-size: 14px;
    color: var(--mf-ink-soft);
}
table.tw.spacial_days_table tr:last-child td { border-bottom: none !important; }

/* ---------- ad containers: honest, unobtrusive framing ---------- */
.panel-display {
    background: var(--mf-paper-raised) !important;
    border: 1px dashed var(--mf-line);
    border-radius: var(--mf-radius-sm);
    padding: 20px 6px 6px;
    position: relative;
}
.panel-display::before {
    content: 'Advertisement';
    position: absolute;
    top: 4px; left: 10px;
    font-family: var(--mf-font-body);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mf-ink-faint);
}

/* ---------- footer ---------- */
footer.bgc, footer .dark-Green {
    background: var(--mf-brand-dark) !important;
}
footer .black { background: var(--mf-brand-dark-deep) !important; }
footer a.text-light, footer #footerLinks a { color: rgba(251,248,242,.82) !important; }
footer a.text-light:hover, footer #footerLinks a:hover { color: #fff !important; }
footer .btn-success {
    background: var(--mf-gold) !important;
    border-color: var(--mf-gold) !important;
}

/* Sitewide: this heading-bar class is used on every page, redesigned or
   not, so recoloring it here is a safe, low-risk win everywhere at once —
   it's a plain background/type swap, nothing structural. */
.green-heading {
    background: var(--mf-brand-dark) !important;
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
}

/* ---------- mosque listing cards ----------
   The card markup itself is built as a raw PHP string in
   controller/ProcessClass.php::mosqueListing() (both desktop and mobile
   branches), which is too fragile to safely rewrite line-by-line — a single
   misplaced quote in that string-concatenation breaks the whole listing
   page. Restyled entirely through the classes it already emits instead. */
.row.border-green.b-radius {
    background: var(--mf-paper-raised);
    border: 1px solid var(--mf-line) !important;
    border-radius: var(--mf-radius) !important;
    box-shadow: var(--mf-shadow);
    overflow: hidden;
}
.box-img, .box-img-res { position: relative; }
.box-img img, .box-img-res img { height: 100%; -o-object-fit: cover; object-fit: cover; }
.link-res, .a-text-size {
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
    color: var(--mf-ink) !important;
    font-size: 17px !important;
}
.link-res:hover { color: var(--mf-green) !important; }
.box-detail { color: var(--mf-ink-soft); font-size: 13.5px; line-height: 1.6; }
.box-detail .cityname { color: var(--mf-ink); font-weight: 600; }
.box-btn.btn-success {
    background: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
}
.box-btn.btn-success:hover { background: var(--mf-green-strong) !important; }
.box-btn.btn-outline-success {
    color: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
    background: transparent !important;
}
.box-btn.btn-outline-success:hover { background: var(--mf-green-tint) !important; }
.box-btn { border-radius: var(--mf-radius-sm) !important; font-weight: 600 !important; font-size: 12.5px !important; }

/* Mobile card — border is an inline style in the source string, so this
   needs !important to win over it (external-stylesheet !important beats a
   plain inline style, which is what makes this safe to do here). */
.shadow.mb-4.p-2 {
    border: 1px solid var(--mf-line) !important;
    border-radius: var(--mf-radius) !important;
    box-shadow: var(--mf-shadow) !important;
    background: var(--mf-paper-raised);
}
.shadow.mb-4.p-2 .link-res {
    background: var(--mf-green-tint);
    border-radius: var(--mf-radius-sm);
    padding: 8px;
    font-size: 15px !important;
}
.mobile-box-image img { border-radius: var(--mf-radius-sm); }
table.listing-namaz-table {
    border: 1px solid var(--mf-line);
    border-radius: var(--mf-radius-sm);
    overflow: hidden;
}
.listing-namaz-table th, .listing-namaz-table td {
    border-color: var(--mf-line) !important;
    color: var(--mf-ink-soft);
    font-size: 12px;
}
.listing-namaz-table th { color: var(--mf-ink); font-weight: 600; }
.mosquelisting-button.btn-success {
    background: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
    border-radius: var(--mf-radius-sm) !important;
}
/* The Subscribe/Donation pair sits in a narrow col-6 inside an already
   narrow col-7 (mobile card: image col-5 + details col-7) — at real phone
   widths the default 13px button text was spilling out past the pill
   shape. Shrink the type and padding so it actually fits its own button. */
@media (max-width: 767px) {
    .mosquelisting-button {
        font-size: 10.5px !important;
        padding: 6px 2px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }
}

/* Third-party prayer-time widget (timesprayer.com iframe) can't be
   restyled — it's cross-origin — so it gets a matching card frame instead
   of sitting bare against the page. */
.mf-widget-frame {
    background: var(--mf-brand-dark);
    border-radius: var(--mf-radius);
    padding: 10px;
    box-shadow: var(--mf-shadow);
    margin-bottom: 14px;
}
.mf-widget-frame iframe { border-radius: var(--mf-radius-sm); }
.mf-widget-frame .widget-icon { margin-bottom: 6px; }

/* ---------- pagination ---------- */
.pagination .page-link {
    border: 1px solid var(--mf-line) !important;
    color: var(--mf-ink-soft) !important;
    font-family: var(--mf-font-body);
    font-weight: 600;
}
.pagination .active .page-link {
    background: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
    color: #fff !important;
}
.pagination .side-link, .pagination .arrow { color: var(--mf-green) !important; }

/* ---------- listing filter sidebar ---------- */
.filter-title, h2.bgc-green, .bgc-green {
    background: var(--mf-brand-dark) !important;
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
}
/* These are set from plain h2/h4 tags with no font-size of their own, so
   they render at the browser's native heading size — oversized for a
   narrow sidebar card. Scoped to the sidebar column so nothing outside it
   is affected. */
.col-md-4 .filter-title,
.col-md-4 h2.bgc-green,
.col-md-4 .green-heading {
    font-size: 15px !important;
    padding: 10px !important;
    letter-spacing: .02em;
}
input[name="search"].btn.bgc-green {
    background: var(--mf-green) !important;
    border-radius: var(--mf-radius-sm) !important;
    font-family: var(--mf-font-body);
}
.col-md-4 .btn-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    width: auto !important;
    padding: 10px 24px !important;
}
.filterCard .card-link { color: var(--mf-ink) !important; font-weight: 600; }
.hyperlink.text-success { color: var(--mf-green) !important; }
.cityname { color: var(--mf-green); }
h2.heading-res {
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
    color: var(--mf-ink) !important;
}

/* ---------- mosque detail page ---------- */
.detail-mosque-title {
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
    color: var(--mf-ink) !important;
}
nav[aria-label="breadcrumb"] .breadcrumb-item a { color: var(--mf-ink-soft); }
nav[aria-label="breadcrumb"] .breadcrumb-item.active { color: var(--mf-ink-faint); }
#distanceFromMeSection {
    background: rgba(31,77,61,.05) !important;
    border-color: var(--mf-line) !important;
}
#distanceFromMeSection h6 { font-family: var(--mf-font-display); font-weight: 600; }
.nav-tabs { border-bottom-color: var(--mf-line); }
.nav-tabs .nav-link,
.nav-tabs li a {
    color: var(--mf-ink-soft) !important;
    font-weight: 600;
    border: none !important;
}
.nav-tabs li a.active,
.nav-tabs .nav-link.active {
    color: var(--mf-green) !important;
    border-bottom: 2px solid var(--mf-green) !important;
    background: transparent !important;
}
.mosque_description { color: var(--mf-ink-soft); }
.mosque_description h2, .mosque_description h3 { font-family: var(--mf-font-display); color: var(--mf-ink); }

/* ---------- collapsible mosque description (fade + show more) ---------- */
.mosque_description.para-scroll {
    height: auto !important;
    max-height: 460px;
    overflow: hidden !important;
    position: relative;
    transition: max-height .45s ease;
}
.mosque_description.para-scroll.mf-expanded {
    max-height: 9000px !important;
}
.mosque_description.para-scroll::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--mf-paper-raised) 78%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease;
    border-radius: 0 0 var(--mf-radius) var(--mf-radius);
}
.mosque_description.para-scroll.mf-expanded::after { opacity: 0; }
.mf-show-more-wrap {
    text-align: center;
    margin-top: -34px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}
.mf-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 24px;
    background: var(--mf-paper-raised);
    border: 1px solid rgba(31, 77, 61, .28);
    border-radius: 999px;
    color: var(--mf-green);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--mf-shadow);
}
.mf-show-more-btn:hover { background: var(--mf-green-tint); }
.mf-show-more-btn i { font-size: 11px; transition: transform .3s ease; }
.mf-show-more-btn.mf-expanded i { transform: rotate(180deg); }
.li-fa-ic, .li-fa-icon, .text-green { color: var(--mf-green) !important; }
.mang-pic img { border-radius: 50%; }
.prayer-slider .tw.widget-timming th.text-success { color: var(--mf-green) !important; }
.donation-box .box-heading {
    background: var(--mf-brand-dark) !important;
    font-family: var(--mf-font-display) !important;
    font-weight: 600 !important;
}
/* "Manage This Mosque" / "Get Directions" use Bootstrap's stock
   btn-danger (red) / btn-primary (blue) — jarring against this palette.
   Scoped to the detail page's own sidebar rather than overriding those
   classes everywhere, since btn-danger legitimately means "delete"
   elsewhere (e.g. the admin portal) and should stay red there. */
.col-md-4 .btn-danger {
    background: var(--mf-gold) !important;
    border-color: var(--mf-gold) !important;
}

/* Action row (Manage / Subscribe / Directions) — pulled out of the content
   tabs it used to be crammed into (that mixed real content tabs with
   action buttons, which is why "Manage" was awkwardly wrapping onto its
   own line before). Pure actions now live here; the tabs above go back to
   being just Contact / Picture / About. */
.mf-action-row { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.mf-action-btn {
    flex: 1 1 0;
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 10px;
    border-radius: var(--mf-radius-sm);
    font-family: var(--mf-font-body);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    border: 1px solid transparent;
    transition: transform .1s ease, opacity .15s ease;
}
.mf-action-btn:hover { transform: translateY(-1px); }
.mf-action-btn.mf-gold { background: var(--mf-gold); color: #fff; }
.mf-action-btn.mf-solid { background: var(--mf-green); color: #fff; }
.mf-action-btn.mf-outline { background: transparent; border-color: var(--mf-green); color: var(--mf-green); }
.mf-action-btn.mf-outline:hover { background: var(--mf-green-tint); color: var(--mf-green); }
.mf-action-btn:hover { color: #fff; }
.mf-action-btn.mf-outline:hover { color: var(--mf-green); }

/* Today's prayer-time table, promoted out of a display:none div that
   nothing ever revealed — the site's whole purpose is prayer times, this
   page was hiding its own on page load. */
.mf-timetable-card .owl-carousel .item p.text-center { color: var(--mf-ink-soft); font-size: 13px; margin-bottom: 8px; }
.col-md-4 .btn-primary {
    background: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
}

/* =========================================================================
   Sitewide — every public page inherits this automatically
   Everything up to here was scoped to specific pages/components on
   purpose, to avoid unintended side effects while this design system was
   still new and unproven. These rules are broader by design: plain color
   and card-surface swaps on Bootstrap/legacy classes used across ~20+
   pages we haven't individually rebuilt yet (about-us, islamic-calendar,
   al-quran, donate-now, salaah-timings, jummah-timings, etc). Recoloring
   a button or a box's border is low-risk regardless of which page it's
   on; it can't break a layout the way a structural change could. Pages
   with genuinely bespoke content (forms, portal) still aren't touched.
   ========================================================================= */
.border-green.b-radius {
    background: var(--mf-paper-raised);
    border: 1px solid var(--mf-line) !important;
    border-radius: var(--mf-radius) !important;
    box-shadow: var(--mf-shadow);
}
.bgc {
    background-color: var(--mf-green-tint) !important;
    border-radius: var(--mf-radius-sm);
}
.btn-success {
    background-color: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--mf-green-strong) !important;
    border-color: var(--mf-green-strong) !important;
}
.btn-outline-success {
    color: var(--mf-green) !important;
    border-color: var(--mf-green) !important;
}
.btn-outline-success:hover {
    background-color: var(--mf-green) !important;
    color: #fff !important;
}
.text-success { color: var(--mf-green) !important; }
.bg-success { background-color: var(--mf-green) !important; }
.badge-success { background-color: var(--mf-green) !important; }
.donation-box { border-color: var(--mf-line) !important; border-radius: var(--mf-radius) !important; }
.ramadan-button {
    background: var(--mf-gold) !important;
    border-radius: var(--mf-radius-sm) !important;
    font-family: var(--mf-font-body);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--mf-font-display); }

/* ---------- responsive ---------- */
@media (min-width: 768px) {
    .mf-hero .mf-hero-inner { max-width: 720px; padding: 76px 20px 84px; }
    .mf-hero h1 { font-size: 44px; }
}