/* ============================================================
   MUSLIGO - COMPONENT LIBRARY
   File: static/css/components.css (loaded on every page)
   Shared, modern building blocks used by the homepage, search page
   and navigation. Palette: navy #1a2a4a, gold #c9a84c, cream #f5f0e8.
   Design rules: soft borders + shadows, no coloured edge stripes,
   logical properties (RTL-safe), compact type scale.
   ============================================================ */
:root {
    --mg-navy: #1a2a4a;
    --mg-navy-2: #23365d;
    --mg-navy-deep: #0f1a30;
    --mg-gold: #c9a84c;
    --mg-gold-soft: rgba(201, 168, 76, 0.14);
    --mg-cream: #f5f0e8;
    --mg-cream-2: #faf7f2;
    --mg-ink: #1f2937;
    --mg-muted: #6b7280;
    --mg-line: #ebe5da;
    --mg-white: #ffffff;
    --mg-green: #1f9d63;
    --mg-blue: #2563eb;
    --mg-amber: #d97706;
    --mg-purple: #7c3aed;
    --mg-radius: 16px;
    --mg-radius-sm: 10px;
    --mg-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.06);
    --mg-shadow-hover: 0 4px 10px rgba(16, 24, 40, 0.06), 0 14px 32px rgba(16, 24, 40, 0.12);
    --mg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Section scaffolding ---------- */
.mg-section { padding: 56px 0; }
.mg-section-sm { padding: 36px 0; }
.mg-bg-cream { background: var(--mg-cream); }
.mg-bg-soft { background: var(--mg-cream-2); }
.mg-bg-white { background: var(--mg-white); }
.mg-bg-navy { background: linear-gradient(160deg, var(--mg-navy-deep) 0%, var(--mg-navy) 55%, var(--mg-navy-2) 100%); color: #fff; }

.mg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.mg-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mg-gold); margin-bottom: 4px; }
.mg-title { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; color: var(--mg-navy); margin: 0; line-height: 1.25; }
.mg-bg-navy .mg-title { color: #fff; }
.mg-subtitle { color: var(--mg-muted); font-size: 0.92rem; margin: 4px 0 0; }
.mg-bg-navy .mg-subtitle { color: rgba(255, 255, 255, 0.65); }
.mg-head-actions { display: flex; align-items: center; gap: 8px; }

.mg-link { color: var(--mg-navy); font-weight: 600; font-size: 0.88rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mg-link:hover { color: var(--mg-gold); }
.mg-bg-navy .mg-link { color: var(--mg-gold); }

.mg-round-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--mg-line); background: #fff; color: var(--mg-navy);
    display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s var(--mg-ease); cursor: pointer; }
.mg-round-btn:hover { background: var(--mg-navy); color: #fff; border-color: var(--mg-navy); }
.mg-bg-navy .mg-round-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #fff; }
.mg-bg-navy .mg-round-btn:hover { background: var(--mg-gold); color: var(--mg-navy); border-color: var(--mg-gold); }

/* ---------- Buttons ---------- */
.mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 0.92rem;
    border-radius: 12px; padding: 11px 22px; border: 1px solid transparent; text-decoration: none; transition: all 0.2s var(--mg-ease);
    cursor: pointer; line-height: 1.2; white-space: nowrap; }
.mg-btn-gold { background: var(--mg-gold); color: var(--mg-navy); }
.mg-btn-gold:hover { background: #d7b65a; color: var(--mg-navy); transform: translateY(-1px); }
.mg-btn-navy { background: var(--mg-navy); color: #fff; }
.mg-btn-navy:hover { background: var(--mg-navy-2); color: #fff; transform: translateY(-1px); }
.mg-btn-ghost { background: transparent; color: var(--mg-navy); border-color: var(--mg-line); }
.mg-btn-ghost:hover { border-color: var(--mg-navy); color: var(--mg-navy); }
.mg-btn-glass { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); }
.mg-btn-glass:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.mg-btn-sm { padding: 7px 14px; font-size: 0.82rem; border-radius: 10px; }
.mg-btn-block { width: 100%; }

/* ---------- Chips / pills ---------- */
.mg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 0.8rem;
    font-weight: 500; color: var(--mg-navy); background: #fff; border: 1px solid var(--mg-line); text-decoration: none;
    transition: all 0.18s var(--mg-ease); white-space: nowrap; line-height: 1.2; cursor: pointer; user-select: none; }
.mg-chip i { color: var(--mg-gold); font-size: 0.78rem; }
.mg-chip:hover { border-color: var(--mg-navy); color: var(--mg-navy); background: var(--mg-cream-2); }
.mg-chip.is-active { background: var(--mg-navy); border-color: var(--mg-navy); color: #fff; }
.mg-chip.is-active i { color: var(--mg-gold); }
.mg-chip-sm { padding: 4px 10px; font-size: 0.72rem; }

.mg-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 0.7rem;
    font-weight: 600; line-height: 1.3; background: var(--mg-cream); color: var(--mg-navy); white-space: nowrap; }
.mg-tag.green { background: #e8f6ef; color: var(--mg-green); }
.mg-tag.blue { background: #eaf1fe; color: var(--mg-blue); }
.mg-tag.amber { background: #fdf3e2; color: var(--mg-amber); }
.mg-tag.purple { background: #f1ebfd; color: var(--mg-purple); }
.mg-tag.gold { background: var(--mg-gold-soft); color: #8a6d1d; }

/* ---------- Category strip ---------- */
.mg-cat-strip { background: #fff; border-bottom: 1px solid var(--mg-line); padding: 14px 0; }
.mg-cat-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mg-cat-label { font-size: 0.78rem; font-weight: 600; color: var(--mg-muted); margin-inline-end: 4px; display: inline-flex;
    align-items: center; gap: 6px; }
@media (max-width: 767.98px) {
    .mg-cat-row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
    [dir="rtl"] .mg-cat-row { -webkit-mask-image: linear-gradient(270deg, #000 88%, transparent); mask-image: linear-gradient(270deg, #000 88%, transparent); }
    .mg-cat-row::-webkit-scrollbar { display: none; }
    .mg-cat-label { display: none; }
}

/* ---------- Listing card ---------- */
.mg-card { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--mg-radius);
    border: 1px solid var(--mg-line); box-shadow: var(--mg-shadow); overflow: hidden; text-decoration: none; color: inherit;
    transition: transform 0.25s var(--mg-ease), box-shadow 0.25s var(--mg-ease); }
.mg-card:hover { transform: translateY(-3px); box-shadow: var(--mg-shadow-hover); color: inherit; }
.mg-card-media { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--mg-navy) 0%, var(--mg-navy-2) 100%); overflow: hidden; }
.mg-card-media img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s var(--mg-ease); }
.mg-card:hover .mg-card-media img { transform: scale(1.04); }
.mg-card-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; color: rgba(255, 255, 255, 0.85); background:
    radial-gradient(circle at 30% 20%, rgba(201, 168, 76, 0.28), transparent 55%),
    linear-gradient(135deg, var(--mg-navy) 0%, var(--mg-navy-2) 100%); }
.mg-card-fallback i { font-size: 1.9rem; color: var(--mg-gold); }
.mg-card-fallback span { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.mg-card-media.no-image img { display: none; }   /* fallback always sits underneath the photo */

.mg-card-badges { position: absolute; top: 10px; inset-inline: 10px; display: flex; justify-content: space-between; align-items: flex-start;
    gap: 6px; z-index: 2; pointer-events: none; }
.mg-card-badges .group { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.mg-card-badges .group.end { align-items: flex-end; }
.mg-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
    padding: 4px 9px; border-radius: 999px; line-height: 1.2; white-space: nowrap; backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.mg-badge.type { background: rgba(255, 255, 255, 0.94); color: var(--mg-navy); }
.mg-badge.type i { color: var(--mg-gold); }
.mg-badge.spotlight { background: linear-gradient(135deg, #e0c068, var(--mg-gold)); color: var(--mg-navy); }
.mg-badge.featured { background: rgba(26, 42, 74, 0.92); color: #fff; }
.mg-badge.new { background: var(--mg-green); color: #fff; }
.mg-rating-pill { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px;
    background: rgba(15, 26, 48, 0.82); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
    backdrop-filter: blur(6px); }
.mg-rating-pill i { color: var(--mg-gold); font-size: 0.68rem; }

.mg-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mg-card-cat { font-size: 0.7rem; font-weight: 600; color: var(--mg-gold); text-transform: uppercase; letter-spacing: 0.05em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-card-title { font-size: 1rem; font-weight: 700; color: var(--mg-navy); margin: 0; line-height: 1.3; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mg-card-loc { font-size: 0.8rem; color: var(--mg-muted); display: flex; align-items: center; gap: 6px; min-width: 0; }
.mg-card-loc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-card-loc i { color: var(--mg-gold); font-size: 0.75rem; }
.mg-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.mg-card-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid #f2ede4; display: flex; align-items: center;
    justify-content: space-between; gap: 8px; }
.mg-stars { display: inline-flex; align-items: center; gap: 2px; font-size: 0.72rem; color: #e5e0d6; }
.mg-stars .on { color: var(--mg-gold); }
.mg-stars small { color: var(--mg-muted); margin-inline-start: 5px; font-size: 0.72rem; }
.mg-card-cta { font-size: 0.78rem; font-weight: 600; color: var(--mg-navy); display: inline-flex; align-items: center; gap: 5px; }
.mg-card:hover .mg-card-cta { color: var(--mg-gold); }
.mg-card-compact .mg-card-body { padding: 12px 13px 13px; }
.mg-card-compact .mg-card-title { font-size: 0.92rem; }

/* ---------- Horizontal rail ---------- */
.mg-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: none; }
.mg-rail::-webkit-scrollbar { display: none; }
.mg-rail > * { scroll-snap-align: start; min-width: 0; }
.mg-rail.cols-3 { grid-auto-columns: calc((100% - 2 * 18px) / 3); }
@media (max-width: 991.98px) { .mg-rail, .mg-rail.cols-3 { grid-auto-columns: calc((100% - 18px) / 2); } }
@media (max-width: 575.98px) { .mg-rail, .mg-rail.cols-3 { grid-auto-columns: 78%; gap: 14px; } }

/* ---------- Generic panel ---------- */
.mg-panel { background: #fff; border: 1px solid var(--mg-line); border-radius: var(--mg-radius); box-shadow: var(--mg-shadow); }
.mg-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px;
    border-bottom: 1px solid #f2ede4; }
.mg-panel-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--mg-navy); font-size: 1.02rem; margin: 0; }
.mg-icon-box { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mg-gold-soft); color: #8a6d1d; flex-shrink: 0; font-size: 0.95rem; }
.mg-icon-box.blue { background: #eaf1fe; color: var(--mg-blue); }
.mg-icon-box.amber { background: #fdf3e2; color: var(--mg-amber); }

/* ---------- List rows (jobs / events) ---------- */
.mg-list { list-style: none; margin: 0; padding: 6px; }
.mg-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit;
    transition: background 0.18s var(--mg-ease); }
.mg-row:hover { background: var(--mg-cream-2); color: inherit; }
.mg-row + .mg-row { border-top: 1px solid #f4efe7; }
.mg-row:hover + .mg-row { border-top-color: transparent; }
.mg-avatar { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; background: #eaf1fe; color: var(--mg-blue); }
.mg-datebox { width: 52px; flex-shrink: 0; border-radius: 12px; overflow: hidden; text-align: center; border: 1px solid var(--mg-line); background: #fff; }
.mg-datebox .m { background: var(--mg-navy); color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 0; }
.mg-datebox .d { font-size: 1.15rem; font-weight: 700; color: var(--mg-navy); padding: 3px 0 4px; line-height: 1.2; }
.mg-row-main { min-width: 0; flex: 1; }
.mg-row-title { font-weight: 600; color: var(--mg-navy); font-size: 0.93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-row-sub { color: var(--mg-muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mg-row-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.mg-row-go { color: #c3bcae; flex-shrink: 0; transition: transform 0.2s var(--mg-ease), color 0.2s; }
.mg-row:hover .mg-row-go { color: var(--mg-navy); transform: translateX(3px); }
[dir="rtl"] .mg-row:hover .mg-row-go { transform: translateX(-3px) scaleX(-1); }
.mg-empty { text-align: center; padding: 36px 16px; color: var(--mg-muted); font-size: 0.88rem; }
.mg-empty i { font-size: 1.6rem; color: #d8cfbf; display: block; margin-bottom: 8px; }

/* ---------- Stats ---------- */
.mg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mg-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; }
.mg-stat-icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(201, 168, 76, 0.16); color: var(--mg-gold);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mg-stat-num { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mg-stat-label { font-size: 0.74rem; color: rgba(255, 255, 255, 0.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) { .mg-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .mg-stat { padding: 12px; gap: 10px; } .mg-stat-icon { width: 34px; height: 34px; } .mg-stat-num { font-size: 1.15rem; } }

/* ---------- Language switcher ---------- */
.mg-lang .mg-lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-weight: 600;
    font-size: 0.82rem; transition: all 0.2s var(--mg-ease); }
.mg-lang .mg-lang-btn:hover, .mg-lang .mg-lang-btn[aria-expanded="true"] { background: rgba(201, 168, 76, 0.16);
    border-color: rgba(201, 168, 76, 0.6); color: #fff; }
.mg-lang .mg-lang-btn .globe { color: var(--mg-gold); }
.mg-lang .mg-lang-btn .code { letter-spacing: 0.05em; }
.mg-lang .mg-lang-btn .caret { font-size: 0.62rem; opacity: 0.7; transition: transform 0.2s; }
.mg-lang .mg-lang-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mg-lang .dropdown-menu { min-width: 210px; padding: 6px; border-radius: 14px; border: 1px solid var(--mg-line);
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.18); margin-top: 8px !important; }
.mg-lang .mg-lang-head { font-size: 0.68rem; font-weight: 700; color: var(--mg-muted); text-transform: uppercase; letter-spacing: 0.08em;
    padding: 6px 10px 4px; }
.mg-lang .mg-lang-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 10px; color: var(--mg-ink);
    text-decoration: none; font-size: 0.9rem; }
.mg-lang .mg-lang-item:hover { background: var(--mg-cream-2); color: var(--mg-navy); }
.mg-lang .mg-lang-item.active { background: var(--mg-gold-soft); }
.mg-lang .mg-lang-badge { width: 34px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mg-navy); color: #fff; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; }
.mg-lang .mg-lang-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; }
.mg-lang .mg-lang-text small { color: var(--mg-muted); font-size: 0.72rem; }
.mg-lang .mg-lang-check { color: var(--mg-gold); font-size: 0.85rem; visibility: hidden; }
.mg-lang .mg-lang-item.active .mg-lang-check { visibility: visible; }
.mg-lang-footer .mg-lang-btn { background: transparent; }

/* ---------- Prayer times ---------- */
.mg-prayer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.mg-prayer-main { background: linear-gradient(160deg, var(--mg-navy-deep) 0%, var(--mg-navy) 60%, var(--mg-navy-2) 100%);
    border-radius: 20px; padding: 22px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 18px 40px rgba(15, 26, 48, 0.25); }
.mg-prayer-main::after { content: ""; position: absolute; inset-inline-end: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.22), transparent 70%); pointer-events: none; }
.mg-prayer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.mg-prayer-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; margin: 0; }
.mg-prayer-title i { color: var(--mg-gold); }
.mg-prayer-dates { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); margin-top: 4px; }
.mg-prayer-dates .hijri { color: var(--mg-gold); }
.mg-prayer-select { position: relative; }
.mg-prayer-select select { appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.08); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 8px 34px 8px 34px; font-size: 0.82rem;
    font-weight: 600; cursor: pointer; min-height: 38px; }
.mg-prayer-select select option { color: var(--mg-ink); }
.mg-prayer-select .pin, .mg-prayer-select .chev { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
    font-size: 0.75rem; color: var(--mg-gold); }
.mg-prayer-select .pin { inset-inline-start: 13px; }
.mg-prayer-select .chev { inset-inline-end: 13px; color: rgba(255, 255, 255, 0.7); font-size: 0.65rem; }
.mg-prayer-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 16px; padding: 14px 16px;
    border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 1;
    flex-wrap: wrap; }
.mg-prayer-next .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); }
.mg-prayer-next .name { font-size: 1.3rem; font-weight: 700; }
.mg-prayer-next .name span { color: var(--mg-gold); }
.mg-prayer-next .countdown { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mg-gold); line-height: 1; }
.mg-prayer-next .clock { font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); text-align: end; margin-top: 4px; }
.mg-prayer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; position: relative; z-index: 1; }
.mg-prayer-tile { text-align: center; padding: 12px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.2s; }
.mg-prayer-tile .ic { color: rgba(255, 255, 255, 0.55); font-size: 0.9rem; }
.mg-prayer-tile .nm { font-size: 0.72rem; color: rgba(255, 255, 255, 0.7); margin-top: 4px; font-weight: 500; }
.mg-prayer-tile .tm { font-size: 0.98rem; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mg-prayer-tile.is-sunrise { opacity: 0.72; }
.mg-prayer-tile.is-current { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.mg-prayer-tile.is-next { background: var(--mg-gold); border-color: var(--mg-gold); color: var(--mg-navy); }
.mg-prayer-tile.is-next .ic, .mg-prayer-tile.is-next .nm { color: var(--mg-navy); }
.mg-prayer-foot { margin-top: 12px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); position: relative; z-index: 1; display: flex;
    justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mg-prayer-foot button { background: none; border: none; color: var(--mg-gold); font-size: 0.72rem; padding: 0; cursor: pointer; }
.mg-ayah { background: #fff; border: 1px solid var(--mg-line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column;
    box-shadow: var(--mg-shadow); }
.mg-ayah .mg-eyebrow { margin-bottom: 12px; }
.mg-ayah blockquote { font-size: 1.08rem; line-height: 1.7; color: var(--mg-navy); font-weight: 500; margin: 0 0 14px; flex: 1; }
.mg-ayah blockquote.ar { font-size: 1.35rem; line-height: 2; font-family: 'Amiri', 'Cairo', serif; }
.mg-ayah cite { font-style: normal; font-size: 0.82rem; color: var(--mg-muted); display: flex; align-items: center; gap: 8px; }
.mg-ayah cite::before { content: ""; width: 18px; height: 2px; background: var(--mg-gold); border-radius: 2px; }
@media (max-width: 991.98px) { .mg-prayer { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
    .mg-prayer-grid { grid-template-columns: repeat(3, 1fr); }
    .mg-prayer-main { padding: 18px; border-radius: 18px; }
    .mg-prayer-next .countdown { font-size: 1.35rem; }
}

/* ---------- Pricing ---------- */
.mg-price { position: relative; height: 100%; background: #fff; border: 1px solid var(--mg-line); border-radius: 20px; padding: 26px 24px;
    display: flex; flex-direction: column; box-shadow: var(--mg-shadow); }
.mg-price.is-featured { background: linear-gradient(165deg, var(--mg-navy) 0%, var(--mg-navy-2) 100%); color: #fff; border-color: transparent;
    box-shadow: 0 24px 50px rgba(15, 26, 48, 0.28); }
.mg-price .ribbon { position: absolute; top: 18px; inset-inline-end: 18px; }
.mg-price .name { font-weight: 700; font-size: 1.05rem; color: var(--mg-navy); }
.mg-price.is-featured .name { color: #fff; }
.mg-price .desc { font-size: 0.82rem; color: var(--mg-muted); margin-top: 2px; }
.mg-price.is-featured .desc { color: rgba(255, 255, 255, 0.65); }
.mg-price .amount { font-size: 2.2rem; font-weight: 700; margin: 16px 0 4px; color: var(--mg-navy); line-height: 1; }
.mg-price.is-featured .amount { color: #fff; }
.mg-price .amount small { font-size: 0.85rem; font-weight: 500; color: var(--mg-muted); }
.mg-price.is-featured .amount small { color: rgba(255, 255, 255, 0.6); }
.mg-price .amount s { font-size: 1rem; font-weight: 500; opacity: 0.5; margin-inline-end: 6px; }
.mg-price ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; flex: 1; }
.mg-price li { display: flex; gap: 10px; font-size: 0.88rem; align-items: flex-start; }
.mg-price li i { margin-top: 3px; color: var(--mg-green); font-size: 0.8rem; }
.mg-price li.off { color: #a8a29a; }
.mg-price li.off i { color: #d1cbc0; }
.mg-price.is-featured li i { color: var(--mg-gold); }

/* ---------- CTA band ---------- */
.mg-cta { border-radius: 24px; padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: radial-gradient(circle at 85% 20%, rgba(201, 168, 76, 0.3), transparent 45%),
    linear-gradient(135deg, var(--mg-navy-deep), var(--mg-navy) 60%, var(--mg-navy-2)); color: #fff; }
.mg-cta h3 { margin: 0; font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.mg-cta p { margin: 6px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; }

/* ---------- Search page ---------- */
.mg-search-head { background: linear-gradient(160deg, var(--mg-navy-deep), var(--mg-navy) 70%, var(--mg-navy-2)); padding: 26px 0 70px; color: #fff; }
.mg-search-bar { display: flex; gap: 8px; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 12px 30px rgba(15, 26, 48, 0.25);
    flex-wrap: wrap; }
.mg-search-bar .field { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; padding: 0 12px; min-width: 0; }
.mg-search-bar .field + .field { border-inline-start: 1px solid var(--mg-line); }
.mg-search-bar .field i { color: var(--mg-gold); }
.mg-search-bar input { border: none; outline: none; width: 100%; min-height: 46px; font-size: 0.95rem; background: transparent; color: var(--mg-ink); }
.mg-search-body { margin-top: -46px; padding-bottom: 50px; }
.mg-filters { background: #fff; border: 1px solid var(--mg-line); border-radius: 18px; box-shadow: var(--mg-shadow); position: sticky; top: 84px; }
.mg-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #f2ede4; }
.mg-filters-head h2 { font-size: 1rem; font-weight: 700; color: var(--mg-navy); margin: 0; display: flex; gap: 8px; align-items: center; }
.mg-filters-head a { font-size: 0.78rem; color: var(--mg-muted); text-decoration: none; }
.mg-filters-head a:hover { color: var(--mg-navy); }
.mg-filters-body { padding: 4px 18px 18px; }
.mg-fgroup { padding: 14px 0; border-bottom: 1px solid #f4efe7; }
.mg-fgroup:last-child { border-bottom: none; }
.mg-flabel { font-size: 0.74rem; font-weight: 700; color: var(--mg-navy); text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.mg-flabel small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--mg-muted); }
.mg-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mg-seg button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 10px;
    border: 1px solid var(--mg-line); background: #fff; color: var(--mg-ink); font-size: 0.8rem; font-weight: 500; transition: all 0.18s; }
.mg-seg button i { color: var(--mg-gold); font-size: 0.78rem; }
.mg-seg button:hover { border-color: var(--mg-navy); }
.mg-seg button.is-active { background: var(--mg-navy); color: #fff; border-color: var(--mg-navy); }
.mg-filters .form-select, .mg-filters .form-control { border-radius: 10px; border-color: var(--mg-line); font-size: 0.86rem; min-height: 40px; }
.mg-filters .form-select:focus, .mg-filters .form-control:focus { border-color: var(--mg-gold); box-shadow: 0 0 0 3px var(--mg-gold-soft); }
.mg-rating-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-results-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff;
    border: 1px solid var(--mg-line); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--mg-shadow); }
.mg-results-head h1 { font-size: 1rem; font-weight: 700; color: var(--mg-navy); margin: 0; }
.mg-results-head .active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-filter-toggle { display: none; }
@media (max-width: 991.98px) {
    .mg-filters { position: static; }
    .mg-filters-body { max-height: none; }
    .mg-filter-toggle { display: inline-flex; }
    .mg-filters-wrap:not(.is-open) .mg-filters { display: none; }
}
.mg-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 26px; }
.mg-pagination a, .mg-pagination span { min-width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center;
    justify-content: center; padding: 0 10px; border: 1px solid var(--mg-line); background: #fff; color: var(--mg-navy);
    text-decoration: none; font-weight: 600; font-size: 0.86rem; }
.mg-pagination a:hover { border-color: var(--mg-navy); }
.mg-pagination .current { background: var(--mg-navy); color: #fff; border-color: var(--mg-navy); }
.mg-pagination .gap { border: none; background: none; }

/* ---------- Hero (home) ---------- */
.mg-hero { position: relative; min-height: 560px; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--mg-navy-deep); }
.mg-hero-media, .mg-hero-media video, .mg-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-hero-media::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 26, 48, 0.55) 0%, rgba(15, 26, 48, 0.72) 60%, rgba(15, 26, 48, 0.92) 100%); }
.mg-hero-inner { position: relative; z-index: 1; width: 100%; padding: 70px 0 60px; }
.mg-hero-greet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.85rem; backdrop-filter: blur(6px); margin-bottom: 18px; }
.mg-hero-greet strong { color: var(--mg-gold); }
.mg-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; line-height: 1.12; margin: 0 0 12px; letter-spacing: -0.01em; }
.mg-hero h1 span { color: var(--mg-gold); }
.mg-hero .lead { font-size: clamp(1rem, 1.8vw, 1.2rem); color: rgba(255, 255, 255, 0.82); margin: 0 auto 28px; max-width: 620px; }
.mg-hero-search { max-width: 760px; margin: 0 auto; }
.mg-hero-search .mg-search-bar .mg-btn { min-height: 46px; }
.mg-hero-cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.mg-hero-trust { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.mg-hero-trust i { color: var(--mg-gold); margin-inline-end: 6px; }
@media (max-width: 575.98px) {
    .mg-hero { min-height: 0; }
    .mg-hero-inner { padding: 46px 0 40px; }
    .mg-search-bar .field + .field { border-inline-start: none; border-top: 1px solid var(--mg-line); }
    .mg-search-bar .mg-btn { width: 100%; }
}

/* ---------- Recently viewed ---------- */
.mg-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--mg-line);
    text-decoration: none; color: var(--mg-navy); min-width: 0; transition: all 0.2s; }
.mg-mini:hover { border-color: var(--mg-navy); color: var(--mg-navy); }
.mg-mini .thumb { width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0; overflow: hidden; background: var(--mg-navy);
    display: inline-flex; align-items: center; justify-content: center; color: var(--mg-gold); }
.mg-mini .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mg-mini .t { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-mini small { display: block; color: var(--mg-muted); font-size: 0.7rem; font-weight: 400; }

/* ---------- Ad banner fallback ---------- */
.mg-sponsor { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 14px;
    background: #fff; border: 1px dashed #dccfb6; flex-wrap: wrap; }
.mg-sponsor .txt { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--mg-ink); }
.mg-sponsor .txt .mg-tag { flex-shrink: 0; }

/* spacing between the navbar items and the language switcher */
.navbar .mg-lang { margin-inline-start: 8px; }
@media (max-width: 991.98px) { .navbar .mg-lang { margin-inline-start: 0; } }
.mg-panel { min-width: 0; }
.mg-panel-head { flex-wrap: wrap; }

/* ============================================================
   GROWTH FEATURES (pricing, checkout, wizard, trust, inbox, map)
   ============================================================ */
.mg-page-head { background: linear-gradient(160deg, var(--mg-navy-deep), var(--mg-navy) 70%, var(--mg-navy-2)); color: #fff; padding: 34px 0 30px; }
.mg-page-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 700; margin: 4px 0 6px; }
.mg-page-head p { color: rgba(255, 255, 255, 0.72); margin: 0; font-size: 0.95rem; }
.mg-flip { display: inline-block; }
[dir="rtl"] .mg-flip { transform: scaleX(-1); }
.min-w-0 { min-width: 0; }
.mg-pre { white-space: pre-line; overflow-wrap: anywhere; }
.mg-btn:disabled, .mg-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.mg-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Pricing ---------- */
.mg-billing-switch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 14px; padding: 4px; gap: 4px; border-radius: 999px;
    background: #fff; border: 1px solid var(--mg-line); box-shadow: var(--mg-shadow); }
.mg-billing-switch button { border: 0; background: transparent; border-radius: 999px; padding: 8px 18px; font-weight: 600; font-size: 0.86rem;
    color: var(--mg-navy); display: inline-flex; align-items: center; gap: 8px; }
.mg-billing-switch button.is-active { background: var(--mg-navy); color: #fff; }
.mg-billing-switch button.is-active .mg-tag { background: rgba(255, 255, 255, 0.16); color: #fff; }
.mg-founding { text-align: center; font-size: 0.85rem; color: var(--mg-muted); margin: 0 auto 22px; max-width: 640px; }
.mg-founding i { color: var(--mg-green); margin-inline-end: 4px; }
.mg-price-note { font-size: 0.78rem; margin: 10px 0 0; text-align: center; opacity: 0.75; }
.mg-addon { height: 100%; background: #fff; border: 1px solid var(--mg-line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column;
    gap: 8px; box-shadow: var(--mg-shadow); }
.mg-addon .t { font-weight: 700; color: var(--mg-navy); }
.mg-addon .p { font-size: 1.4rem; font-weight: 700; color: var(--mg-navy); line-height: 1.1; }
.mg-addon .p small { font-size: 0.75rem; font-weight: 500; color: var(--mg-muted); }
.mg-addon ul { list-style: none; padding: 0; margin: 0 0 6px; flex: 1; font-size: 0.8rem; color: var(--mg-muted); display: grid; gap: 4px; }
.mg-pricing-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.mg-pricing-faq > div { background: #fff; border: 1px solid var(--mg-line); border-radius: 14px; padding: 14px 16px; font-size: 0.85rem; color: var(--mg-ink); }
.mg-pricing-faq i { color: var(--mg-gold); margin-inline-end: 8px; }
.mg-pricing-faq strong { margin-inline-end: 4px; color: var(--mg-navy); }
@media (max-width: 767.98px) { .mg-pricing-faq { grid-template-columns: 1fr; } }
.mg-plan-for { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.mg-plan-for label { font-weight: 600; color: var(--mg-navy); font-size: 0.88rem; }
.mg-plan-for .form-select { width: auto; min-width: 220px; border-radius: 10px; }

/* ---------- Checkout / forms ---------- */
.mg-step-label { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--mg-navy); margin-bottom: 10px; }
.mg-step-label span { width: 26px; height: 26px; border-radius: 50%; background: var(--mg-gold-soft); color: #8a6d1d; font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center; }
.mg-seg-link { display: flex; align-items: center; justify-content: center; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--mg-line);
    background: #fff; color: var(--mg-ink); font-weight: 600; font-size: 0.85rem; text-decoration: none; }
.mg-seg-link.is-active { background: var(--mg-navy); color: #fff; border-color: var(--mg-navy); }
.mg-radio-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--mg-line); border-radius: 12px; cursor: pointer;
    background: #fff; height: 100%; }
.mg-radio-card input { margin-bottom: 4px; }
.mg-radio-card:has(input:checked) { border-color: var(--mg-navy); box-shadow: 0 0 0 3px var(--mg-gold-soft); }
.mg-radio-card.is-disabled { opacity: 0.6; cursor: not-allowed; }
.mg-summary { position: sticky; top: 90px; }
.mg-check-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; font-size: 0.86rem; }
.mg-check-list li { display: flex; gap: 8px; align-items: flex-start; }
.mg-check-list i { color: var(--mg-green); margin-top: 3px; font-size: 0.78rem; }
.mg-result-icon { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.8rem;
    background: #e8f6ef; color: var(--mg-green); }
.mg-result-icon.amber { background: #fdf3e2; color: var(--mg-amber); }
.mg-result-icon.navy { background: var(--mg-gold-soft); color: var(--mg-navy); }
.mg-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mg-muted); font-weight: 700; background: var(--mg-cream-2);
    border-bottom: 1px solid var(--mg-line); padding: 10px 16px; white-space: nowrap; }
.mg-table td { padding: 12px 16px; font-size: 0.88rem; vertical-align: middle; border-color: #f2ede4; }
.mg-danger-zone { border-top: 1px solid #f4dede; padding-top: 16px; }
.mg-inline-form { background: var(--mg-cream-2); border: 1px solid var(--mg-line); border-radius: 12px; padding: 14px; }
.mg-form-section { padding: 18px 0; border-top: 1px solid #f2ede4; }
.mg-form-section:first-child { border-top: 0; padding-top: 4px; }
.mg-form-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; font-weight: 700; color: var(--mg-navy); margin: 0 0 12px; float: none; width: 100%; }
.mg-form-title > i { color: var(--mg-gold); }
.mg-form-title small { font-weight: 500; color: var(--mg-muted); font-size: 0.78rem; flex-basis: 100%; }

/* ---------- Opening hours ---------- */
.mg-hours { display: grid; gap: 6px; }
.mg-hours-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mg-hours-row .day { font-weight: 600; font-size: 0.85rem; color: var(--mg-navy); }
.mg-hours-row .sep { color: var(--mg-muted); }
@media (max-width: 575.98px) {
    .mg-hours-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .mg-hours-row .day { grid-column: 1 / -1; }
    .mg-hours-row .sep { display: none; }
}
.mg-hours-list { list-style: none; padding: 0; margin: 0 0 6px; font-size: 0.88rem; }
.mg-hours-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f5f0e8; }
.mg-hours-list li.is-today { font-weight: 700; color: var(--mg-navy); }

/* ---------- Wizard ---------- */
.mg-wizard-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.mg-wizard-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--mg-line);
    font-size: 0.82rem; font-weight: 600; color: var(--mg-muted); min-width: 0; line-height: 1.25; overflow-wrap: break-word; }
.mg-wizard-steps li span { width: 24px; height: 24px; border-radius: 50%; background: var(--mg-cream); color: var(--mg-navy); display: inline-flex;
    align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.78rem; }
.mg-wizard-steps li.is-active { color: var(--mg-navy); border-color: var(--mg-navy); }
.mg-wizard-steps li.is-active span { background: var(--mg-navy); color: #fff; }
.mg-wizard-steps li.is-done { cursor: pointer; color: var(--mg-green); }
.mg-wizard-steps li.is-done span { background: #e8f6ef; color: var(--mg-green); }
@media (max-width: 575.98px) { .mg-wizard-steps li { font-size: 0; gap: 0; justify-content: center; } .mg-wizard-steps li span { font-size: 0.78rem; } }
.mg-wizard fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.mg-wizard-pane { display: none; }
.mg-wizard-pane.is-active { display: block; animation: mgFade 0.25s var(--mg-ease); }
@keyframes mgFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mg-wizard-pane.is-active { animation: none; } }
.mg-wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #f2ede4; }
.mg-wizard-nav [data-wizard-next], .mg-wizard-nav [data-wizard-submit] { margin-inline-start: auto; }
.mg-wizard-count { font-size: 0.8rem; color: var(--mg-muted); }
.mg-type-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mg-type { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 10px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--mg-line); background: #fff; transition: all 0.18s var(--mg-ease); }
.mg-type input { position: absolute; opacity: 0; pointer-events: none; }
.mg-type i { font-size: 1.35rem; color: var(--mg-gold); }
.mg-type strong { color: var(--mg-navy); font-size: 0.92rem; }
.mg-type small { color: var(--mg-muted); font-size: 0.74rem; }
.mg-type.is-active { border-color: var(--mg-navy); box-shadow: 0 0 0 3px var(--mg-gold-soft); }
.mg-type:focus-within { outline: 2px solid var(--mg-gold); outline-offset: 2px; }
.mg-tags-tall { max-height: 260px; }
.mg-chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.mg-chip-check:has(input:checked) { background: var(--mg-navy); border-color: var(--mg-navy); color: #fff; }
.mg-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border-radius: 16px;
    border: 2px dashed #dccfb6; background: var(--mg-cream-2); cursor: pointer; text-align: center; transition: all 0.18s; }
.mg-dropzone i { font-size: 1.8rem; color: var(--mg-gold); }
.mg-dropzone small { color: var(--mg-muted); }
.mg-dropzone.is-over, .mg-dropzone:hover { border-color: var(--mg-gold); background: #fff; }
.mg-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 12px; }
.mg-preview { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--mg-line); }
.mg-preview img { width: 100%; height: 100%; object-fit: cover; }
.mg-preview .mg-tag { position: absolute; top: 6px; inset-inline-start: 6px; }
.mg-review-box { background: var(--mg-cream-2); border: 1px solid var(--mg-line); border-radius: 14px; padding: 16px; }

/* ---------- 2FA ---------- */
.mg-steps { padding-inline-start: 18px; font-size: 0.88rem; color: var(--mg-ink); display: grid; gap: 4px; }
.mg-qr { display: flex; justify-content: center; margin: 16px 0 8px; }
.mg-qr svg { width: 210px; height: 210px; border-radius: 12px; border: 1px solid var(--mg-line); background: #fff; }
.mg-secret { font-size: 0.9rem; letter-spacing: 0.08em; word-break: break-all; }
.mg-code-input { letter-spacing: 0.3em; font-weight: 700; }
.mg-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
.mg-codes code { display: block; background: var(--mg-cream-2); border: 1px solid var(--mg-line); border-radius: 8px; padding: 6px 10px; text-align: center; color: var(--mg-navy); }

/* ---------- Inbox / queues ---------- */
.mg-inbox-item { list-style: none; padding: 16px 18px; border-bottom: 1px solid #f2ede4; }
.mg-inbox-item:last-child { border-bottom: 0; }
.mg-inbox-item.is-new { background: linear-gradient(90deg, var(--mg-gold-soft), transparent 60%); }
[dir="rtl"] .mg-inbox-item.is-new { background: linear-gradient(270deg, var(--mg-gold-soft), transparent 60%); }
.mg-decide { min-width: 240px; max-width: 320px; flex: 1; }

/* ---------- Listing detail additions ---------- */
.mg-halal { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #e8f6ef; color: #145c3b; font-size: 0.9rem; }
.mg-halal > i { font-size: 1.3rem; }
.mg-jumuah { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mg-review-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.mg-review-photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--mg-line); }
.mg-owner-reply { margin: 8px 0 4px; padding: 10px 12px; border-radius: 10px; background: var(--mg-cream-2); border: 1px solid var(--mg-line); font-size: 0.86rem; }
.mg-owner-reply strong { color: var(--mg-navy); font-size: 0.8rem; }
.mg-plan-box { border-top: 1px solid #f2ede4; padding-top: 12px; }

/* ---------- Search additions ---------- */
.mg-landing-head { margin-bottom: 16px; }
.mg-landing-head h1 { font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; margin: 2px 0 0; color: #fff; }
.mg-view-toggle { display: inline-flex; border: 1px solid var(--mg-line); border-radius: 10px; overflow: hidden; }
.mg-view-toggle a { padding: 6px 12px; font-size: 0.8rem; font-weight: 600; color: var(--mg-navy); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.mg-view-toggle a.is-active { background: var(--mg-navy); color: #fff; }

/* ---------- Seasonal banner (Ramadan / Eid) ---------- */
.mg-seasonal { background: linear-gradient(90deg, #0f1a30, #23365d); color: #fff; font-size: 0.86rem; padding: 8px 0; position: relative; }
.mg-seasonal i.fa-moon { color: var(--mg-gold); }
.mg-seasonal.is-eid { background: linear-gradient(90deg, #6b4f12, #c9a84c); }
.mg-seasonal.is-eid i.fa-moon, .mg-seasonal.is-eid .mg-link { color: #fff; }
.mg-seasonal .mg-link { color: var(--mg-gold); }
.mg-seasonal-close { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: rgba(255, 255, 255, 0.7); }
.mg-prayer-season { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mg-prayer-season .mg-tag { background: rgba(201, 168, 76, 0.18); color: #fff; }

/* ============================================================
   MOBILE POLISH (navbar controls, hero search, pills, rails)
   ============================================================ */
/* Select fields inside search bars (state dropdown) */
.mg-search-bar select { border: none; outline: none; width: 100%; min-height: 46px; font-size: 0.95rem; background: transparent;
    color: var(--mg-ink); cursor: pointer; appearance: none; -webkit-appearance: none; padding-inline-end: 4px; }
.mg-search-bar .field-state { flex: 0 1 190px; }
.mg-search-bar .mg-btn span { margin-inline-start: 6px; }
.mg-search-bar .mg-btn i { display: none; }

/* Hero: translucent "glass" bar so the video stays visible */
.mg-search-glass { background: rgba(15, 26, 48, 0.38); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.mg-search-glass .field + .field { border-inline-start-color: rgba(255, 255, 255, 0.18); }
.mg-search-glass input, .mg-search-glass select { color: #fff; }
.mg-search-glass input::placeholder { color: rgba(255, 255, 255, 0.72); }
.mg-search-glass select option { color: var(--mg-ink); background: #fff; }
.mg-search-glass select:invalid, .mg-search-glass select option[value=""] { color: rgba(255, 255, 255, 0.72); }

@media (max-width: 575.98px) {
    /* Navbar: smaller hamburger and language button */
    .navbar .navbar-toggler { padding: 4px 7px; border-radius: 9px; border-color: rgba(255, 255, 255, 0.22); }
    .navbar .navbar-toggler-icon { width: 1.15em; height: 1.15em; }
    .navbar .navbar-toggler:focus { box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.45); }
    .navbar .mg-lang .mg-lang-btn { height: 30px; padding: 0 8px; gap: 5px; font-size: 0.74rem; }
    .navbar .mg-lang .mg-lang-btn .caret { font-size: 0.55rem; }
    .navbar-brand { font-size: 1.5rem !important; }

    /* Hero search: query on one row, city + state + icon button on the next */
    .mg-hero-search .mg-search-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: center; gap: 0; padding: 4px; border-radius: 14px; }
    .mg-hero-search .mg-search-bar .field { padding: 0 10px; min-width: 0; }
    .mg-hero-search .mg-search-bar .field-q { grid-column: 1 / -1; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
    .mg-hero-search .mg-search-bar .field + .field { border-top: none; }
    .mg-hero-search .mg-search-bar .field-state { border-inline-start: 1px solid rgba(255, 255, 255, 0.18); }
    .mg-hero-search .mg-search-bar input, .mg-hero-search .mg-search-bar select { min-height: 44px; font-size: 16px; }
    .mg-hero-search .mg-search-bar .mg-btn { width: 36px; height: 36px; min-height: 0 !important; padding: 0; margin: 0;
        align-self: center; justify-self: center; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
    .mg-hero-search .mg-search-bar .mg-btn i { line-height: 1; }
    .mg-hero-search .mg-search-bar .mg-btn i { display: inline; }
    .mg-hero-search .mg-search-bar .mg-btn span { display: none; }
    .mg-hero .lead { margin-bottom: 18px; }

    /* Search page header bar: state shares the row with city */
    .mg-search-head .mg-search-bar .field-state { flex: 1 1 100%; border-top: 1px solid var(--mg-line); }

    /* Category pills: show them all (wrap) instead of a cut-off scroller */
    .mg-cat-row { flex-wrap: wrap; justify-content: center; overflow: visible; gap: 6px; -webkit-mask-image: none; mask-image: none; }
    [dir="rtl"] .mg-cat-row { -webkit-mask-image: none; mask-image: none; }
    .mg-cat-row .mg-chip { padding: 5px 10px; font-size: 0.74rem; }
    .mg-cat-row .mg-chip i { font-size: 0.7rem; }

    /* Rails: exactly one card per view, auto-advancing */
    .mg-rail, .mg-rail.cols-3 { grid-auto-columns: 100%; gap: 14px; scroll-snap-type: x mandatory; }
    .mg-rail > * { scroll-snap-align: center; }
}

/* Search bars on tablet / desktop: everything on one row */
@media (min-width: 576px) {
    .mg-hero-search .mg-search-bar, .mg-search-head .mg-search-bar { flex-wrap: nowrap; align-items: center; }
    .mg-hero-search .mg-search-bar .field, .mg-search-head .mg-search-bar .field { flex: 1 1 0; min-width: 0; }
    .mg-hero-search .mg-search-bar .field-q { flex-grow: 1.6; }
    .mg-hero-search .mg-search-bar .field-state, .mg-search-head .mg-search-bar .field-state { flex: 0 1 180px; }
    .mg-hero-search .mg-search-bar .mg-btn, .mg-search-head .mg-search-bar .mg-btn { flex: 0 0 auto; min-height: 46px; }
    .mg-search-bar input, .mg-search-bar select { text-overflow: ellipsis; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .mg-search-bar .field { padding: 0 8px; gap: 8px; }
    .mg-hero-search .mg-search-bar .mg-btn, .mg-search-head .mg-search-bar .mg-btn { padding: 11px 16px; }
}

/* ============================================================
   SEARCH MAP
   ============================================================ */
.mg-map-wrap { position: relative; margin-bottom: 18px; border-radius: 18px; overflow: hidden; background: #fff;
    border: 1px solid var(--mg-line); box-shadow: var(--mg-shadow); }
.mg-map { position: relative; height: 520px; z-index: 0; background: #eef2f4; }
@media (max-width: 575.98px) { .mg-map { height: 380px; } }
.mg-map .leaflet-container, .mg-map.leaflet-container { font-family: inherit; direction: ltr; background: #eef2f4; }
.mg-map .leaflet-tile-pane { filter: saturate(0.55) brightness(1.04) contrast(0.92) hue-rotate(-8deg); }
.mg-map-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 600;
    color: var(--mg-navy); font-size: 1.4rem; background: rgba(238, 242, 244, 0.6); }
.mg-map-empty { position: absolute; inset-inline: 14px; bottom: 14px; z-index: 600; background: #fff; border-radius: 12px;
    padding: 12px 16px; font-size: 0.86rem; box-shadow: var(--mg-shadow); text-align: center; }

/* Legend strip under the map */
.mg-map-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 16px; min-height: 42px; border-top: 1px solid var(--mg-line);
    font-size: 0.78rem; color: var(--mg-muted); }
.mg-map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mg-map-count { margin-inline-start: auto; font-weight: 600; color: var(--mg-navy); }
.mg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mg-navy); box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(26, 42, 74, 0.25); }
.mg-dot.is-job { background: var(--mg-blue); }
.mg-dot.is-event { background: var(--mg-amber); }
.mg-dot.is-featured { background: var(--mg-gold); }

/* Controls */
.mg-map .leaflet-bar { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16); }
.mg-map .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; color: var(--mg-navy); border-bottom-color: var(--mg-line);
    font-size: 15px; display: flex; align-items: center; justify-content: center; }
.mg-map .leaflet-bar a:hover { background: var(--mg-cream-2); color: var(--mg-navy); }
.mg-map .mg-map-tools a.is-busy i { animation: fa-spin 1s linear infinite; }
.mg-map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.85); border-radius: 8px 0 0 0; }

/* Pins */
.mg-pin-wrap { background: none; border: none; }
.mg-pin { position: relative; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex;
    align-items: center; justify-content: center; background: var(--mg-navy); color: #fff; border: 2px solid #fff;
    box-shadow: 0 6px 14px rgba(15, 26, 48, 0.35); transition: transform 0.15s var(--mg-ease); }
.mg-pin i { transform: rotate(45deg); font-size: 0.78rem; }
.mg-pin.is-job { background: var(--mg-blue); }
.mg-pin.is-event { background: var(--mg-amber); }
.mg-pin.is-featured { background: var(--mg-gold); color: var(--mg-navy); box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.3), 0 6px 14px rgba(15, 26, 48, 0.35); }
.leaflet-marker-icon:hover .mg-pin { transform: rotate(-45deg) scale(1.12); }

/* Clusters */
.mg-cluster-wrap { background: none; border: none; }
.mg-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 0.85rem;
    color: #fff; background: var(--mg-navy); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26, 42, 74, 0.18), 0 6px 14px rgba(15, 26, 48, 0.3); }

/* Popup card */
.mg-map-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 40px rgba(16, 24, 40, 0.22); }
.mg-map-popup .leaflet-popup-content { margin: 0; width: 250px !important; line-height: 1.35; }
.mg-map-popup .leaflet-popup-close-button { z-index: 2; top: 8px !important; right: 8px !important; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.92) !important; color: var(--mg-navy) !important; font-size: 18px; line-height: 24px !important; text-align: center; }
.mg-map-card { display: block; color: inherit; text-decoration: none; }
.mg-map-card:hover { color: inherit; }
.mg-map-card .media { position: relative; height: 120px; background: linear-gradient(135deg, var(--mg-navy), var(--mg-navy-2));
    display: flex; align-items: center; justify-content: center; }
.mg-map-card .media .ph { color: var(--mg-gold); font-size: 1.6rem; }
.mg-map-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-map-card .media .flag { position: absolute; top: 8px; left: 8px; }
.mg-map-card .body { padding: 12px 14px 14px; direction: inherit; }
[dir="rtl"] .mg-map-card .body { direction: rtl; text-align: right; }
.mg-map-card .cat { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mg-gold); }
.mg-map-card .title { font-weight: 700; color: var(--mg-navy); font-size: 0.95rem; margin: 2px 0 6px; }
.mg-map-card .meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.76rem; color: var(--mg-muted); }
.mg-map-card .meta .fa-star { color: var(--mg-gold); }
.mg-map-card .meta .fa-location-dot { color: var(--mg-gold); }
.mg-map-card .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mg-map-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 0.8rem; font-weight: 600; color: var(--mg-navy); }
.mg-map-card:hover .go { color: var(--mg-gold); }

/* ============================================================
   WIDGETS: colourful icon tiles + faint tinted cards
   (replaces the old coloured edge stripes on dashboards / admin)
   Usage: <div class="mg-kpi tint-blue"><span class="mg-kpi-icon"><i ...></i></span>
            <div><div class="mg-kpi-num">12</div><div class="mg-kpi-label">Users</div></div></div>
   ============================================================ */
.tint-blue.tint-blue   { --tint: 37, 99, 235; }
.tint-gold.tint-gold   { --tint: 201, 168, 76; }
.tint-green.tint-green  { --tint: 31, 157, 99; }
.tint-purple.tint-purple { --tint: 124, 58, 237; }
.tint-amber.tint-amber  { --tint: 217, 119, 6; }
.tint-red.tint-red    { --tint: 220, 38, 38; }
.tint-teal.tint-teal   { --tint: 13, 148, 136; }
.tint-pink.tint-pink   { --tint: 219, 39, 119; }
.tint-navy.tint-navy   { --tint: 26, 42, 74; }
.tint-sky.tint-sky    { --tint: 2, 132, 199; }

.mg-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.mg-kpi { --tint: 26, 42, 74; position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--tint), 0.075) 0%, rgba(var(--tint), 0.02) 60%, #fff 100%), #fff;
    border: 1px solid rgba(var(--tint), 0.16); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); min-width: 0;
    text-decoration: none; color: inherit; transition: transform 0.2s var(--mg-ease), box-shadow 0.2s var(--mg-ease); }
a.mg-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--tint), 0.14); color: inherit; }
.mg-kpi-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; color: rgb(var(--tint)); background: rgba(var(--tint), 0.13); }
.mg-kpi-num { font-size: 1.45rem; font-weight: 700; color: var(--mg-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mg-kpi-label { font-size: 0.76rem; color: var(--mg-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-kpi-sub { font-size: 0.7rem; color: rgb(var(--tint)); font-weight: 600; margin-top: 2px; }

/* Tinted panel: a card with a faint colour wash in the top corner */
.mg-tcard { --tint: 26, 42, 74; position: relative; background: #fff; border: 1px solid var(--mg-line); border-radius: 18px;
    box-shadow: var(--mg-shadow); overflow: hidden; }
.mg-tcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
    background: radial-gradient(120% 100% at 0% 0%, rgba(var(--tint), 0.09), transparent 70%); }
[dir="rtl"] .mg-tcard::before { background: radial-gradient(120% 100% at 100% 0%, rgba(var(--tint), 0.09), transparent 70%); }
.mg-tcard > * { position: relative; }
.mg-tcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; flex-wrap: wrap; }
.mg-tcard-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--mg-navy); font-size: 1rem; margin: 0; }
.mg-tcard-title .mg-kpi-icon { width: 36px; height: 36px; border-radius: 11px; font-size: 0.9rem; }
.mg-tcard-body { padding: 0 20px 20px; }

/* Avatars & role pills */
.mg-user-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center;
    justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--mg-navy), var(--mg-navy-2)); }
.mg-user-avatar.lg { width: 72px; height: 72px; border-radius: 20px; font-size: 1.6rem; }
.mg-role { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-weight: 700;
    background: rgba(var(--tint), 0.12); color: rgb(var(--tint)); }
.mg-role.role-admin { --tint: 201, 168, 76; color: #8a6d1d; }
.mg-role.role-sub_admin { --tint: 124, 58, 237; }
.mg-role.role-user { --tint: 26, 42, 74; }
.mg-role.role-super { --tint: 220, 38, 38; }

/* Table polish for admin lists */
.mg-utable td, .mg-utable th { vertical-align: middle; }
.mg-utable tbody tr:hover { background: var(--mg-cream-2); }
.mg-utable .who { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.mg-utable .who a { font-weight: 600; color: var(--mg-navy); text-decoration: none; }
.mg-utable .who small { display: block; color: var(--mg-muted); font-size: 0.75rem; }
.mg-filterbar { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: center; }
.mg-filterbar .form-control, .mg-filterbar .form-select { border-radius: 10px; border-color: var(--mg-line); font-size: 0.86rem; min-height: 42px; }
@media (max-width: 991.98px) { .mg-filterbar { grid-template-columns: 1fr 1fr; } .mg-filterbar .grow { grid-column: 1 / -1; } }
.mg-action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mg-action-grid form { margin: 0; }
.mg-action-grid .mg-btn { width: 100%; justify-content: flex-start; }
.mg-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.mg-perm-grid label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--mg-line); border-radius: 10px;
    font-size: 0.84rem; background: #fff; cursor: pointer; }
.mg-perm-grid label:has(input:checked) { border-color: rgba(124, 58, 237, 0.45); background: rgba(124, 58, 237, 0.05); }
.mg-dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 14px; font-size: 0.87rem; margin: 0; }
.mg-dl dt { color: var(--mg-muted); font-weight: 500; }
.mg-dl dd { margin: 0; color: var(--mg-ink); overflow-wrap: anywhere; }

/* ============================================================
   HEADER
   ============================================================ */
.mg-header { background: rgba(15, 26, 48, 0.94); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); z-index: 1030; }
.mg-header-bar { display: flex; align-items: center; gap: 18px; min-height: 66px; }
.mg-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.mg-brand-mark { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #d9bb68, #b8922f); color: var(--mg-navy-deep); font-size: 1rem; box-shadow: 0 4px 12px rgba(201, 168, 76, 0.35); }
.mg-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.mg-brand-name { font-size: 1.45rem; font-weight: 700; color: #fff; letter-spacing: 0.2px; }
.mg-brand-name b { color: var(--mg-gold); font-weight: 700; }
.mg-brand-tag { font-size: 0.66rem; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.04em; margin-top: 3px; white-space: nowrap; }
.mg-nav { list-style: none; margin: 0 0 0 auto; padding: 0; gap: 4px; align-items: center; }
[dir="rtl"] .mg-nav { margin: 0 auto 0 0; }
.mg-nav a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 10px; color: rgba(255, 255, 255, 0.78);
    text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: all 0.18s var(--mg-ease); }
.mg-nav a i { font-size: 0.82rem; color: var(--mg-gold); opacity: 0.85; }
.mg-nav a:hover, .mg-nav a.is-active { color: #fff; background: rgba(255, 255, 255, 0.08); }
.mg-header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (min-width: 992px) { .mg-nav + .mg-header-actions { margin-inline-start: 6px; } }
.mg-hbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; color: #fff; font-weight: 600;
    font-size: 0.85rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); text-decoration: none; transition: all 0.18s; }
.mg-hbtn:hover, .mg-hbtn[aria-expanded="true"] { color: #fff; background: rgba(201, 168, 76, 0.16); border-color: rgba(201, 168, 76, 0.55); }
.mg-hbtn .caret { font-size: 0.6rem; opacity: 0.7; }
.mg-hbtn-user { padding-inline-start: 4px; }
.mg-hbtn .av, .mg-menu-btn .dot { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mg-gold); color: var(--mg-navy); font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.mg-hbtn .nm { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-header .mg-lang .mg-lang-btn { height: 38px; }

.mg-menu { min-width: 250px; padding: 6px; border-radius: 14px; border: 1px solid var(--mg-line); box-shadow: 0 18px 40px rgba(16, 24, 40, 0.18); margin-top: 8px !important; }
.mg-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 0.88rem; color: var(--mg-ink); }
.mg-menu .dropdown-item:hover { background: var(--mg-cream-2); color: var(--mg-navy); }
.mg-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid #f2ede4; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.mg-menu-head small { color: var(--mg-muted); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; }
.mg-menu-head .mg-role { align-self: flex-start; margin-top: 4px; }
.ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
    flex-shrink: 0; color: rgb(var(--tint, 26, 42, 74)); background: rgba(var(--tint, 26, 42, 74), 0.11); }

/* Compact mobile "Menu" button */
.mg-menu-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 6px; border-radius: 999px; color: #fff;
    background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.78rem; font-weight: 600; }
.mg-menu-btn > i { width: 24px; text-align: center; font-size: 0.85rem; }
.mg-menu-btn .dot { width: 24px; height: 24px; font-size: 0.7rem; }
.mg-menu-btn:active { transform: scale(0.97); }

/* Slide-in drawer */
.mg-drawer { width: min(340px, 88vw) !important; border: none !important; background: #fff; }
.mg-drawer-head { position: relative; padding: 22px 18px 18px; background: linear-gradient(160deg, var(--mg-navy-deep), var(--mg-navy) 70%, var(--mg-navy-2)); color: #fff; }
.mg-drawer-head .who { display: flex; align-items: center; gap: 12px; padding-inline-end: 34px; }
.mg-drawer-head .av { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mg-gold); color: var(--mg-navy); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.mg-drawer-head strong { display: block; font-size: 1rem; }
.mg-drawer-head small { display: block; color: rgba(255, 255, 255, 0.68); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }
.mg-drawer-head .mg-role { margin-top: 6px; background: rgba(255, 255, 255, 0.14); color: #fff; }
.mg-drawer-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; border-radius: 50%; border: none;
    background: rgba(255, 255, 255, 0.12); color: #fff; }
.mg-drawer-body { padding: 14px 14px 24px; }
.mg-drawer-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mg-muted); margin: 14px 6px 6px; }
.mg-drawer-links { display: grid; gap: 2px; }
.mg-drawer-links a { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 11px; color: var(--mg-ink); text-decoration: none;
    font-size: 0.92rem; font-weight: 500; }
.mg-drawer-links a:hover, .mg-drawer-links a:active { background: var(--mg-cream-2); color: var(--mg-navy); }
.mg-install-card { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 12px; border-radius: 14px; text-align: start;
    border: 1px solid rgba(201, 168, 76, 0.35); background: linear-gradient(135deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.03)); }
.mg-install-card strong { display: block; color: var(--mg-navy); font-size: 0.9rem; }
.mg-install-card small { display: block; color: var(--mg-muted); font-size: 0.75rem; }
.mg-install-card .mg-kpi-icon { width: 40px; height: 40px; }

@media (max-width: 991.98px) {
    .mg-header-bar { min-height: 58px; gap: 10px; }
    .mg-brand-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 0.9rem; }
    .mg-brand-name { font-size: 1.25rem; }
    .mg-header .mg-lang .mg-lang-btn { height: 34px; }
}
@media (max-width: 380px) {
    .mg-brand-tag { display: none; }
    .mg-menu-btn span:last-child { display: none; }
    .mg-menu-btn { padding: 0 6px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.mg-footer { margin-top: 0; background: radial-gradient(circle at 90% 0%, rgba(201, 168, 76, 0.12), transparent 40%),
    linear-gradient(170deg, var(--mg-navy-deep), var(--mg-navy) 70%); color: rgba(255, 255, 255, 0.78); padding: 52px 0 22px; }
.mg-footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.mg-footer-brand p { margin: 14px 0 16px; font-size: 0.88rem; max-width: 360px; line-height: 1.6; }
.mg-footer-col { display: flex; flex-direction: column; gap: 9px; }
.mg-footer-col h2 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mg-gold); margin: 6px 0 6px; }
.mg-footer-col a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.9rem; width: fit-content; }
.mg-footer-col a:hover { color: #fff; }
.mg-social { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mg-social a { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); text-decoration: none; transition: all 0.18s; }
.mg-social a:hover { transform: translateY(-2px); }
.mg-social .s-facebook:hover { background: #1877f2; } .mg-social .s-instagram:hover { background: #d62976; }
.mg-social .s-x:hover { background: #000; } .mg-social .s-tiktok:hover { background: #111; } .mg-social .s-youtube:hover { background: #ff0000; }
.mg-social .s-linkedin:hover { background: #0a66c2; } .mg-social .s-whatsapp:hover { background: #25d366; }
.mg-footer-apps { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 36px; padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); }
.mg-footer-bottom a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.mg-footer-bottom a:hover { color: #fff; }
@media (max-width: 991.98px) { .mg-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mg-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 575.98px) {
    .mg-footer { padding: 38px 0 90px; }
    .mg-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
    .mg-footer-bottom { justify-content: center; text-align: center; }
}
@media (max-width: 575.98px) {
    .mg-header .mg-lang .mg-lang-btn { height: 34px; padding: 0 9px; gap: 5px; font-size: 0.74rem; }
    .mg-header .mg-lang .mg-lang-btn .caret { font-size: 0.55rem; }
}
.mg-ios-install { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 26, 48, 0.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.mg-ios-install[hidden] { display: none; }
.mg-ios-install .card-in { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.mg-ios-install strong { display: block; color: var(--mg-navy); font-size: 1.05rem; margin-bottom: 8px; }
.mg-ios-install ol { padding-inline-start: 20px; margin: 0 0 14px; font-size: 0.9rem; display: grid; gap: 4px; }

/* ============================================================
   HERO v2: full video visible
   Desktop/tablet: the hero takes the video's 16:9 shape (whole frame visible,
   still filling the width). Phones: the full-width video sits on top and a
   blurred copy of its poster fills the space behind the text.
   ============================================================ */
.mg-hero { aspect-ratio: 16 / 9; min-height: 600px; max-height: 1080px; }
.mg-hero-media::after { display: none; }
.mg-hero-media .mg-hero-blur { display: none; }
.mg-hero-media .mg-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mg-hero-shade { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(15, 26, 48, 0.55) 0%, rgba(15, 26, 48, 0.25) 30%, rgba(15, 26, 48, 0.45) 62%, rgba(15, 26, 48, 0.9) 100%); }
.mg-hero-inner { padding: 60px 0 56px; }
.mg-hero h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); margin-bottom: 8px; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); }
.mg-hero h1 span { color: #fff; }
.mg-hero h1 span b { color: var(--mg-gold); font-weight: 700; }
.mg-hero-sub { font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 600; color: var(--mg-gold); margin: 0 0 8px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4); }
.mg-hero .lead { font-size: clamp(0.95rem, 1.5vw, 1.1rem); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); }

@media (max-width: 767.98px) {
    .mg-hero { aspect-ratio: auto; min-height: 0; max-height: none; display: block; }
    .mg-hero-media .mg-hero-blur { display: block; position: absolute; inset: -40px; background-size: cover; background-position: center;
        filter: blur(28px) brightness(0.5) saturate(1.25); transform: scale(1.1); }
    .mg-hero-media .mg-hero-video { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 9;
        -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
    .mg-hero-shade { background: linear-gradient(180deg, rgba(15, 26, 48, 0.15) 0%, rgba(15, 26, 48, 0.2) 40vw, rgba(15, 26, 48, 0.75) 62vw, rgba(15, 26, 48, 0.82) 100%); }
    .mg-hero-inner { padding: calc(56.25vw - 46px) 0 34px; }
    .mg-hero-greet { margin-bottom: 12px; }
}

/* ============================================================
   INFO PAGES (About, Help, Contact, Privacy, Terms, Guidelines)
   ============================================================ */
.mg-info-updated { margin-top: 10px !important; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6) !important; }
.mg-info-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.mg-info-toc { position: sticky; top: 90px; background: #fff; border: 1px solid var(--mg-line); border-radius: 16px; padding: 14px; box-shadow: var(--mg-shadow); }
.mg-info-toc strong { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mg-muted); margin: 2px 6px 8px; }
.mg-info-toc a { display: block; padding: 7px 8px; border-radius: 9px; color: var(--mg-ink); text-decoration: none; font-size: 0.86rem; }
.mg-info-toc a:hover { background: var(--mg-cream-2); color: var(--mg-navy); }
.mg-info-stack { display: grid; gap: 18px; }
.mg-prose { font-size: 0.94rem; line-height: 1.7; color: #374151; }
.mg-prose p { margin: 0 0 10px; }
.mg-prose ul { margin: 0 0 10px; padding-inline-start: 20px; }
.mg-prose li { margin-bottom: 4px; }
.mg-prose h3 { font-size: 0.95rem; font-weight: 700; color: var(--mg-navy); margin: 14px 0 6px; }
.mg-prose a { color: var(--mg-navy); font-weight: 600; }
.mg-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mg-feature { --tint: 26, 42, 74; padding: 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--tint), 0.075), rgba(var(--tint), 0.015) 60%, #fff), #fff;
    border: 1px solid rgba(var(--tint), 0.15); }
.mg-feature .mg-kpi-icon { margin-bottom: 10px; }
.mg-feature strong { display: block; color: var(--mg-navy); margin-bottom: 4px; }
.mg-feature p { margin: 0; font-size: 0.86rem; color: var(--mg-muted); line-height: 1.55; }
.mg-faq { border: 1px solid var(--mg-line); border-radius: 14px; background: #fff; overflow: hidden; }
.mg-faq + .mg-faq { margin-top: 10px; }
.mg-faq summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 600; color: var(--mg-navy); display: flex; justify-content: space-between; gap: 12px; }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75rem; color: var(--mg-gold); transition: transform 0.2s; }
.mg-faq[open] summary::after { transform: rotate(180deg); }
.mg-faq .ans { padding: 0 16px 14px; font-size: 0.9rem; line-height: 1.65; color: #374151; }
@media (max-width: 991.98px) { .mg-info-layout { grid-template-columns: 1fr; } .mg-info-toc { position: static; display: none; } }
.mg-social-light a { color: var(--mg-navy); background: var(--mg-cream-2); border-color: var(--mg-line); }
.mg-social-light a:hover { color: #fff; }
@media (max-width: 575.98px) {
    .mg-header-bar { gap: 8px; }
    .mg-header-actions { gap: 6px; }
    .mg-brand { gap: 8px; min-width: 0; }
    .mg-brand-name { font-size: 1.15rem; }
    .mg-brand-tag { font-size: 0.6rem; letter-spacing: 0; }
    .mg-menu-btn { font-size: 0.74rem; padding: 0 10px 0 5px; gap: 6px; }
}
/* Desktop hero: keep the video's pin graphic visible above the headline */
@media (min-width: 768px) {
    .mg-hero { align-items: flex-end; }
    .mg-hero-inner { padding: 40px 0 7%; }
}

/* Role pills and tags on dark page headers */
.mg-page-head .mg-role, .mg-page-head .mg-tag { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); }
.mg-page-head .mg-role.role-super { background: rgba(248, 113, 113, 0.22); }
.mg-page-head .mg-role.role-admin, .mg-page-head .mg-tag.gold { background: rgba(201, 168, 76, 0.28); color: #f5e2a8; }
.mg-page-head .mg-tag.green { background: rgba(34, 197, 94, 0.22); color: #bbf7d0; }
.mg-page-head .mg-tag.amber { background: rgba(245, 158, 11, 0.24); color: #fde68a; }

/* Sign in with Google */
.mg-google-form { display: grid; gap: 12px; }
.mg-google-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px;
    padding: 10px 16px; border-radius: 10px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-weight: 600;
    font-size: 0.95rem; transition: background 0.15s, box-shadow 0.15s; }
.mg-google-btn:hover { background: #f8f9fb; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.18); }
.mg-google-btn:focus-visible { outline: 3px solid rgba(66, 133, 244, 0.45); outline-offset: 2px; }
.mg-google-terms { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--mg-muted); line-height: 1.45; cursor: pointer; }
.mg-google-terms input { margin-top: 2px !important; flex-shrink: 0; }
.mg-google-terms a { color: #a8862f; font-weight: 600; text-decoration: none; }
.mg-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--mg-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mg-or::before, .mg-or::after { content: ""; flex: 1; height: 1px; background: var(--mg-line); }
.mg-google-who { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; background: rgba(26, 42, 74, 0.04); }

/* Footer always sits at the bottom of the window, even on short pages */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > #main-content { flex: 1 0 auto; }
body > footer, body > .mg-footer { flex-shrink: 0; }

/* Grouped admin menu */
.mg-menu-admin { min-width: 270px; max-height: calc(100vh - 90px); overflow-y: auto; }
@media (min-width: 992px) {
    .mg-menu-admin.show { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); column-gap: 6px; width: 520px; }
    .mg-menu-admin .mg-menu-group:nth-child(odd):last-child { grid-column: span 2; }
}
.mg-menu-label, .mg-drawer-sublabel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mg-muted); padding: 10px 10px 4px; }
.mg-menu-label:first-child { padding-top: 4px; }
.mg-drawer-sublabel { padding: 8px 4px 2px; }

/* Member social icons (profile) */
.mg-social-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.mg-social-row a[class^="soc-"] { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; transition: transform 0.15s; }
.mg-social-row a[class^="soc-"]:hover { transform: translateY(-2px); }
.soc-facebook { background: #1877f2; } .soc-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.soc-x { background: #111; } .soc-tiktok { background: #111; } .soc-youtube { background: #ff0000; }
.soc-linkedin { background: #0a66c2; } .soc-whatsapp { background: #25d366; }

/* Searchable picker (select[data-mg-combo], built by core.js) */
.mg-combo { position: relative; flex: 1; min-width: 0; display: flex; }
.mg-combo-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.mg-combo-btn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent;
    border: 0; padding: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; min-height: 40px; }
.mg-combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-combo-btn i { font-size: 0.72rem; opacity: 0.7; transition: transform 0.2s; }
.mg-combo.is-open .mg-combo-btn i { transform: rotate(180deg); }
.mg-combo-btn:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 4px; border-radius: 6px; }
.mg-combo-pop { position: absolute; top: calc(100% + 10px); inset-inline-start: -14px; z-index: 1060; width: max(100% + 28px, 290px);
    background: #fff; color: var(--mg-ink); border: 1px solid var(--mg-line); border-radius: 16px; box-shadow: 0 22px 48px rgba(16, 24, 40, 0.22);
    padding: 8px; animation: mgComboIn 0.14s ease-out; text-align: start; font-size: 1rem; }
.mg-combo-pop.is-floating { position: fixed; inset-inline-start: auto; display: flex; flex-direction: column; z-index: 1070; }
.mg-combo-pop.is-floating .mg-combo-list { max-height: none; flex: 1; min-height: 0; }
@keyframes mgComboIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.mg-combo-search { width: 100%; border: 1px solid var(--mg-line); border-radius: 10px; padding: 9px 12px; font-size: 16px; margin-bottom: 6px;
    color: var(--mg-ink); background: var(--mg-cream-2, #faf7f1); }
.mg-combo-search:focus { outline: none; border-color: var(--mg-gold); box-shadow: 0 0 0 3px var(--mg-gold-soft); background: #fff; }
.mg-combo-list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.mg-combo-list li[role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px;
    border-radius: 9px; cursor: pointer; font-size: 0.9rem; color: var(--mg-ink); }
.mg-combo-list li small { font-size: 0.7rem; font-weight: 700; color: var(--mg-muted); background: rgba(26, 42, 74, 0.06);
    border-radius: 6px; padding: 2px 6px; letter-spacing: 0.04em; }
.mg-combo-list li.is-all { font-weight: 600; color: var(--mg-navy); border-bottom: 1px solid #f2ede4; border-radius: 9px 9px 0 0; margin-bottom: 4px; }
.mg-combo-list li.is-active { background: var(--mg-cream-2, #f6f1e7); }
.mg-combo-list li.is-selected { color: var(--mg-navy); font-weight: 600; }
.mg-combo-list li.is-selected::after { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--mg-gold); font-size: 0.75rem; }
.mg-combo-list li.is-selected small { order: 2; }
.mg-combo-empty { padding: 10px; font-size: 0.85rem; color: var(--mg-muted); text-align: center; }
.mg-search-bar .mg-combo-btn { color: var(--mg-ink); }
.mg-search-glass .mg-combo-btn { color: #fff; }
.mg-combo-pop.is-sheet { position: fixed; inset: auto 0 0 0; top: auto; width: auto; z-index: 1080; max-height: 72vh; display: flex;
    flex-direction: column; border-radius: 20px 20px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(16, 24, 40, 0.3); animation: mgSheetIn 0.2s ease-out; }
.mg-combo-pop.is-sheet::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: #d9d3c7; margin: 0 auto 12px; }
.mg-combo-pop.is-sheet .mg-combo-list { max-height: none; flex: 1; overflow-y: auto; }
.mg-combo-pop.is-sheet .mg-combo-list li[role="option"] { padding: 12px; font-size: 1rem; }
.mg-combo-backdrop { position: fixed; inset: 0; z-index: 1075; background: rgba(15, 26, 48, 0.45); animation: mgComboIn 0.15s ease-out; }
@keyframes mgSheetIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Disk usage meter (Admin > Settings) */
.mg-disk-bar { height: 8px; border-radius: 99px; background: rgba(26, 42, 74, 0.08); overflow: hidden; margin-top: 6px; }
.mg-disk-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d9488, #22c55e); }
.mg-disk.is-warn .mg-disk-bar span { background: linear-gradient(90deg, #f59e0b, #dc2626); }
.mg-disk.is-warn p { color: #b45309; }