/* ---------- Topbar ---------- */
.mfl-topbar{ background: var(--mfl-primary-dark); color:#fff; font-size:13px; }
.mfl-topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px; gap:16px; flex-wrap:wrap; }
.mfl-topbar a{ color:#fff; text-decoration:none; margin-right:12px; opacity:.9; }
.mfl-topbar-welcome{ opacity:.9; }
.mfl-topbar-nomargin{ margin-right:0 !important; }
.mfl-topbar-sep{ display:inline-block; margin:0 8px; color:#fff; opacity:.5; }
.mfl-topbar a:hover{ opacity:1; color: var(--mfl-accent-light); }
.mfl-topbar-social a{ display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; background:rgba(255,255,255,.12); margin-right:6px; font-size:11px; }

/* ---------- Header ---------- */
.mfl-header{ background: var(--mfl-bg); border-bottom:1px solid var(--mfl-border); position:sticky; top:0; z-index:100; }
.mfl-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:24px; }
.mfl-logo{ text-decoration:none; flex-shrink:0; }
.mfl-nav{ display:flex; align-items:center; gap:38px; flex:1; justify-content:center; }
.mfl-nav a{ text-decoration:none; color: var(--mfl-ink); font-weight:400; font-size:22px; line-height:1; display:inline-flex; align-items:center; }
.mfl-nav a:hover{ color: var(--mfl-primary); }
.mfl-header-cta{ flex-shrink:0; }
.mfl-header-spacer{ display:none; }

.mfl-nav .mfl-nav-cta{ display:none; }

.mfl-mobile-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:38px; height:38px; padding:0; background:none; border:none; cursor:pointer; flex-shrink:0;
}
.mfl-mobile-toggle span{ display:block; height:3px; width:100%; background:var(--mfl-primary); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.mfl-mobile-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.mfl-mobile-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.mfl-mobile-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width:900px){
    .mfl-header{ position:relative; }
    .mfl-header-cta{ display:none; }
    .mfl-mobile-toggle{ display:flex; }
    .mfl-topbar-inner{ justify-content:center; text-align:center; }

    .mfl-header-inner{ justify-content:space-between; }
    .mfl-header-spacer{ display:block; width:38px; flex-shrink:0; order:1; }
    .mfl-logo{ order:2; flex:1; text-align:center; }
    .mfl-logo a{ display:inline-block; }
    .mfl-logo img{ display:inline-block !important; margin-left:auto; margin-right:auto; }
    .mfl-mobile-toggle{ order:3; }

    .mfl-nav{ display:none; }
    body.mfl-nav-open .mfl-nav{
        display:flex; flex-direction:column; align-items:center; gap:0;
        position:absolute; top:100%; left:0; right:0;
        background:var(--mfl-bg); border-top:1px solid var(--mfl-border);
        box-shadow:0 14px 28px rgba(43,33,26,.14);
        padding:6px 24px 20px; z-index:200; max-height:calc(100vh - 60px); overflow-y:auto;
    }
    body.mfl-nav-open .mfl-nav a{
        width:100%; padding:14px 0; border-bottom:1px solid var(--mfl-border);
        justify-content:center; text-align:center; gap:10px;
    }
    body.mfl-nav-open .mfl-nav .mfl-nav-cta{ display:inline-flex; margin-top:16px; justify-content:center; border-bottom:none; }
}

/* ---------- Footer ---------- */
.mfl-footer{ background: var(--mfl-primary-dark); color:#EFE7DA; margin-top:60px; }
.mfl-footer-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; padding:50px 24px; }
.mfl-footer-brand{ font-family:var(--mfl-font-head); font-size:22px; margin-bottom:8px; color:#fff; }
.mfl-footer h4{ color:#fff; font-size:15px; margin-bottom:12px; }
.mfl-footer a{ color:#D9CBB8; text-decoration:none; }
.mfl-footer a:hover{ color:var(--mfl-accent-light); }
.mfl-footer ul{ list-style:none; padding:0; margin:0; }
.mfl-footer ul li{ margin-bottom:8px; }
.mfl-footer-social a{ margin-right:12px; }
.mfl-footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:16px 24px; font-size:13px; text-align:center; color:#C7B79E; }
@media (max-width:782px){ .mfl-footer-inner{ grid-template-columns:1fr; } }

/* ---------- Hero (homepage) ---------- */
.mfl-hero{ position:relative; background: var(--mfl-primary-dark) center/cover no-repeat; padding:100px 0; color:#fff; overflow:hidden; min-height:500px; display:flex; align-items:center; }
@media (max-width:600px){ .mfl-hero{ padding:64px 0; } }
.mfl-hero-overlay{ position:absolute; inset:0; background: var(--mfl-primary-dark); }
.mfl-hero-inner{ position:relative; text-align:center; max-width:700px; margin:0 auto; }
.mfl-hero h1{ color:#fff; font-size:clamp(32px,5vw,52px); }
.mfl-hero p{ font-size:18px; opacity:.95; margin-bottom:28px; }

.mfl-page-hero{ padding:60px 0 30px; text-align:center; border-bottom:1px solid var(--mfl-border); margin-bottom:40px; }

/* ---------- Sections ---------- */
.mfl-section-title{ text-align:center; margin-bottom:36px; }
.mfl-how-it-works, .mfl-pricing-teaser, .mfl-faq-teaser{ padding:60px 0; }
.mfl-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.mfl-step{ text-align:center; }
.mfl-step-num{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:var(--mfl-accent); color:#fff; font-weight:700; margin-bottom:12px; }
@media (max-width:900px){ .mfl-steps{ grid-template-columns:1fr; } }

/* ---------- Pricing ---------- */
.mfl-pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.mfl-plan-card{
    text-align:center;
    position:relative;
    background: var(--mfl-primary);
    color:#fff;
}
.mfl-plan-card::after{ border-color: rgba(255,255,255,.25); }
.mfl-plan-card h3{ color:#fff; }
.mfl-plan-price{ font-family:var(--mfl-font-head); font-size:32px; color:var(--mfl-accent-light); margin:10px 0 18px; }
.mfl-plan-card ul{ list-style:none; padding:0; text-align:left; margin-bottom:24px; }
.mfl-plan-card ul li{ padding:6px 0; border-bottom:1px solid rgba(255,255,255,.18); font-size:14px; color:#F3E9DA; }
.mfl-plan-card .mfl-btn-outline{ color:#fff; border-color:#fff; }
.mfl-plan-card .mfl-btn-outline:hover{ background:#fff; color:var(--mfl-primary); }
.mfl-plan-featured{ background: var(--mfl-primary-dark); border:2px solid var(--mfl-accent); }
.mfl-plan-badge{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--mfl-accent); color:#fff; padding:4px 14px; border-radius:999px; font-size:12px; font-weight:700; }
@media (max-width:1100px){ .mfl-pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mfl-pricing-grid{ grid-template-columns:1fr; } }

.mfl-comparison{ padding:60px 0; }
.mfl-table-wrap{ overflow-x:auto; }
.mfl-comparison-table{ width:100%; border-collapse:collapse; background:var(--mfl-card); border-radius:var(--mfl-radius); overflow:hidden; }
.mfl-comparison-table th, .mfl-comparison-table td{ padding:14px 16px; border-bottom:1px solid var(--mfl-border); text-align:center; }
.mfl-comparison-table th{ background:var(--mfl-primary); color:#fff; }
.mfl-comparison-table td:first-child, .mfl-comparison-table th:first-child{ text-align:left; }
.mfl-check{ color:var(--mfl-success); font-weight:700; }
.mfl-cross{ color:#bbb; }

/* ---------- Register / forms ---------- */
.mfl-register-section{ padding:60px 0 80px; scroll-margin-top:110px; }
.mfl-register-narrow{ max-width:560px; }
.mfl-form label{ display:block; font-weight:600; margin:16px 0 6px; font-size:14px; }
.mfl-form input[type=text], .mfl-form input[type=email], .mfl-form input[type=password], .mfl-form input[type=file], .mfl-form input[type=search], .mfl-form textarea, .mfl-form select{
    width:100%; padding:11px 14px; border-radius:8px; border:1px solid var(--mfl-border); font-family:var(--mfl-font-body); font-size:16px; background:#fff;
}
.mfl-form button{ margin-top:20px; }
.mfl-notice{ padding:12px 16px; border-radius:8px; margin-bottom:16px; font-size:14px; }
.mfl-notice-error{ background:#FBEAE7; color:var(--mfl-danger); }
.mfl-notice-success{ background:#E9F3EA; color:var(--mfl-success); }
.mfl-portal-msg{ font-size:14px; margin-top:10px; min-height:1em; }
.mfl-portal-msg.is-error{ color:var(--mfl-danger); }
.mfl-portal-msg.is-success{ color:var(--mfl-success); }

/* ---------- Accordion ---------- */
.mfl-accordion-box{
    background: var(--mfl-card);
    border: 1px solid var(--mfl-border);
    border-radius: var(--mfl-radius);
    box-shadow: var(--mfl-shadow);
    padding: 12px 32px;
}
.mfl-accordion-item{ border-bottom:1px solid var(--mfl-border); }
.mfl-accordion-item:last-child{ border-bottom:none; }
.mfl-accordion-trigger{
    width:100%; text-align:left; background:none; border:none; padding:16px 0; font-size:16px; font-weight:600;
    display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--mfl-ink); gap:10px;
}
.mfl-accordion-icon{ font-size:20px; color:var(--mfl-accent); transition:transform .2s; flex-shrink:0; }
.mfl-accordion-trigger[aria-expanded="true"] .mfl-accordion-icon{ transform:rotate(45deg); }
.mfl-accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0; }
.mfl-accordion-panel p{ margin:0 0 16px; color:var(--mfl-ink-soft); }
.mfl-accordion-panel ul, .mfl-accordion-panel ol{ margin:0 0 16px; padding-left:22px; color:var(--mfl-ink-soft); }
.mfl-accordion-panel li{ margin-bottom:8px; line-height:1.5; }
.mfl-accordion-panel li:last-child{ margin-bottom:0; }

/* ---------- Portal ---------- */
.mfl-portal{ padding:40px 0 80px; }
.mfl-portal-inner{ display:grid; grid-template-columns:220px 1fr; gap:32px; align-items:start; }

.mfl-portal-nav-toggle{ display:none; }

.mfl-portal-sidebar nav{ display:flex; flex-direction:column; background:var(--mfl-card); border:1px solid var(--mfl-border); border-radius:var(--mfl-radius); overflow:hidden; position:sticky; top:90px; }

/* Every clickable nav item -- top-level, sub-item, and logout -- shares the
   same base type size and font so the sidebar reads as one consistent list. */
.mfl-portal-sidebar a{
    padding:13px 18px; text-decoration:none; color:var(--mfl-ink);
    border-bottom:1px solid var(--mfl-border); font-weight:600; font-size:15px; line-height:1.3;
}
.mfl-portal-sidebar a.mfl-portal-nav-logout{ color:var(--mfl-danger); border-bottom:none; }
.mfl-portal-sidebar a.is-active, .mfl-portal-sidebar a:hover{ background:var(--mfl-bg); color:var(--mfl-primary); }

/* Section heading -- deliberately distinct (small, uppercase, muted) since it's
   a label, not a link, but padding is kept in the same rhythm as the links
   around it so it doesn't sit off-center. */
.mfl-portal-nav-heading{
    display:block; padding:13px 18px; font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--mfl-ink-soft); border-bottom:1px solid var(--mfl-border);
    line-height:1.3;
}

/* Sub-items: same size/weight family as top-level links, just indented and a
   touch lighter so the hierarchy reads without looking like a different nav. */
.mfl-portal-sidebar a.mfl-portal-nav-sub{ padding-left:30px; font-weight:500; font-size:14px; }

@media (max-width:900px){
    .mfl-portal-inner{ grid-template-columns:1fr; }

    .mfl-portal-nav-toggle{
        display:flex; align-items:center; justify-content:space-between; width:100%;
        padding:14px 18px; background:var(--mfl-card); border:1px solid var(--mfl-border);
        border-radius:var(--mfl-radius); font-weight:600; font-size:15px; color:var(--mfl-ink);
        cursor:pointer;
    }
    .mfl-portal-nav-toggle svg{ transition:transform .2s ease; flex-shrink:0; }
    .mfl-portal-nav-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

    .mfl-portal-sidebar nav{
        display:none; position:static; margin-top:8px;
    }
    .mfl-portal-sidebar nav.is-open{ display:flex; }

    .mfl-portal-sidebar a{ padding:14px 18px; }
    .mfl-portal-sidebar a.mfl-portal-nav-sub{ padding-left:30px; }

    .mfl-portal-content > h1{ text-align:center; }
    .mfl-portal-content > h1 + p{ text-align:center; }
    .mfl-page-title-row{ flex-direction:column; text-align:center; }
    .mfl-page-title-row + p{ text-align:center; }
}

.mfl-news-banner{ background:var(--mfl-accent-light); margin-bottom:24px; }
.mfl-stat-grid-heading{ font-size:20px; margin:0 0 4px; color:var(--mfl-primary); }
@media (max-width:600px){ .mfl-stat-grid-heading{ text-align:center; } }
.mfl-stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 30px; }
.mfl-stat-card{ text-align:center; padding:20px 12px; text-decoration:none; color:inherit; display:block; transition:box-shadow .15s ease, transform .15s ease; }
.mfl-stat-card:hover{ box-shadow:0 8px 24px rgba(43,33,26,0.16); transform:translateY(-2px); color:inherit; }
.mfl-stat-card:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(43,33,26,0.14); }
.mfl-stat-icon{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin:0 auto 10px; color:#487075; }
.mfl-stat-icon svg{ width:100%; height:100%; }
.mfl-stat-label{ display:block; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:#487075; margin-bottom:2px; }
.mfl-stat-value{ display:block; font-family:var(--mfl-font-head); font-size:22px; color:#487075; }
@media (max-width:600px){ .mfl-stat-grid{ grid-template-columns:repeat(2,1fr); } }

.mfl-plan-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }
.mfl-plan-actions select{ padding:9px 12px; border-radius:8px; border:1px solid var(--mfl-border); }
@media (max-width:600px){
    .mfl-plan-actions{ flex-direction:column; align-items:stretch; }
    .mfl-plan-actions select, .mfl-plan-actions button{ width:100%; }
}

.mfl-item-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin-top:20px; }
.mfl-item-card{ text-decoration:none; color:var(--mfl-ink); display:block; }
.mfl-item-card h3{ margin-bottom:6px; }
.mfl-item-card-add{ display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed var(--mfl-border); box-shadow:none; text-align:center; color:var(--mfl-ink-soft); }
.mfl-add-icon{ font-size:30px; color:var(--mfl-accent); }
.mfl-item-card-locked{ text-align:center; box-shadow:none; border:1px dashed var(--mfl-border); }

.mfl-gallery-preview{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.mfl-gallery-preview img{ width:80px; height:80px; object-fit:cover; border-radius:6px; }

.mfl-variation-list{ margin:16px 0; }
.mfl-variation-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--mfl-border); flex-wrap:wrap; gap:10px; }
.mfl-variation-meta{ display:block; font-size:12px; color:var(--mfl-ink-soft); margin-top:2px; }
.mfl-variation-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.mfl-status-badge{ font-size:11px; padding:3px 10px; border-radius:999px; font-weight:700; text-transform:uppercase; }
.mfl-status-badge-open{ background:#FDE7C8; color:#8A5A00; }
.mfl-status-badge-in_progress{ background:#D9E8FB; color:#1D4E89; }
.mfl-status-badge-resolved{ background:#c2d6d2; color:var(--mfl-success); }
.mfl-status-badge-revoked{ background:#F6DEDA; color:var(--mfl-danger); }

.mfl-family-detail-header{ text-align:center; }
.mfl-family-detail-header h1{ margin:6px 0; }
.mfl-avatar-photo{ object-fit:cover; display:block; }

.mfl-family-detail-avatar{ margin:0 auto 10px; width:88px; height:88px; font-size:32px; }
.mfl-ticket-card{ background:#fff; border-radius:8px; margin-bottom:8px; padding:0 12px; border:1px solid var(--mfl-border); }
.mfl-ticket-title{ font-weight:600; }
.mfl-ticket-date{ font-size:12px; color:var(--mfl-ink-soft); }

.mfl-orders-table{ width:100%; min-width:480px; border-collapse:collapse; }
.mfl-doc-pages{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.mfl-doc-page-links{ font-size:13px; color:var(--mfl-ink-soft); }
.mfl-doc-page-links a{ margin-left:6px; }
.mfl-orders-table th, .mfl-orders-table td{ padding:10px; border-bottom:1px solid var(--mfl-border); text-align:left; font-size:14px; }

/* ---------- Field checklist / mini editor ---------- */
.mfl-field-checklist{ max-height:220px; overflow-y:auto; border:1px solid var(--mfl-border); border-radius:8px; padding:12px; margin-bottom:8px; }
.mfl-checkbox-row{ display:flex; align-items:center; gap:8px; font-weight:400; margin:6px 0; }
.mfl-field-section-tag{ font-size:11px; color:var(--mfl-ink-soft); margin-left:auto; }

/* ---------- Combined view+upload row layout (album Edit Sharing) ---------- */
.mfl-share-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:9px 0; border-bottom:1px solid var(--mfl-border);
}
.mfl-share-row:last-child{ border-bottom:none; }
.mfl-share-row-name{ flex:1 1 auto; min-width:110px; display:flex; align-items:center; gap:8px; }
.mfl-share-row-checks{ display:flex; gap:16px; flex-shrink:0; }
.mfl-share-row-check{ display:flex; align-items:center; gap:5px; font-weight:400; font-size:13px; cursor:pointer; white-space:nowrap; }
.mfl-share-row-check-label{ color:var(--mfl-ink-soft); }
.mfl-share-row-check-empty{ display:inline-block; width:48px; }
.mfl-instr-body-label-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:16px; }
.mfl-instr-body-label-row label{ margin:0; }
.mfl-mini-editor-toolbar{ display:flex; gap:6px; margin-top:6px; }
.mfl-mini-editor-toolbar button{ padding:4px 10px; border:1px solid var(--mfl-border); background:#fff; border-radius:6px; cursor:pointer; }
.mfl-mini-editor{ min-height:90px; border:1px solid var(--mfl-border); border-radius:8px; padding:10px 14px; margin-top:6px; background:#fff; }
.mfl-mini-editor p{ margin:0 0 .6em; }
.mfl-mini-editor hr, .mfl-viewer-instr-body hr{
    border:none; border-top:1px solid var(--mfl-border); margin:2px 0 14px;
}

/* ---------- Modal ---------- */
.mfl-modal{ position:fixed; inset:0; background:rgba(43,33,26,.55); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; }
.mfl-modal[hidden]{ display:none; }
.mfl-modal-inner{ max-width:640px; width:100%; max-height:88vh; overflow-y:auto; position:relative; }
.mfl-modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:26px; cursor:pointer; color:var(--mfl-ink-soft); }

/* ---------- My Family tab ---------- */
.mfl-page-title-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.mfl-page-title-row h1{ margin:0; }
.mfl-btn-group{ display:flex; gap:10px; flex-wrap:wrap; }

.mfl-family-card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:16px; }
.mfl-family-card{ text-align:center; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--mfl-ink); cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; }
.mfl-family-card:hover{ box-shadow:0 8px 24px rgba(43,33,26,0.16); transform:translateY(-2px); color:var(--mfl-ink); }
.mfl-family-card-avatar{
    width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--mfl-accent-light); color:#fff; font-family:var(--mfl-font-head); font-size:24px; font-weight:700;
    margin-bottom:10px;
}
.mfl-family-card-name{ margin:0 0 4px; font-size:17px; }
.mfl-family-card-type{
    display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
    color:var(--mfl-accent); margin-bottom:6px;
}
.mfl-family-card .mfl-status-badge{ margin-bottom:6px; }
.mfl-family-card .mfl-variation-meta{ display:block; margin-bottom:6px; }
.mfl-family-card .mfl-tag-pills{ justify-content:center; margin-bottom:10px; }

.mfl-family-card-self{ cursor:default; border-color:var(--mfl-accent); background:var(--mfl-bg); }
.mfl-family-row-avatar{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--mfl-accent-light); color:#fff; font-family:var(--mfl-font-head); font-size:17px; font-weight:700;
    flex-shrink:0;
}
.mfl-family-card-self:hover{ transform:none; box-shadow:var(--mfl-shadow); }
.mfl-family-card-self .mfl-family-card-type{ color:var(--mfl-primary); }
div.mfl-family-card{ cursor:default; }
div.mfl-family-card:hover{ transform:none; box-shadow:var(--mfl-shadow); }

@media (max-width:1100px){ .mfl-family-card-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .mfl-family-card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .mfl-family-card-grid{ grid-template-columns:1fr; } }

.mfl-subtabs{ display:flex; gap:8px; margin:20px 0 24px; flex-wrap:wrap; }
.mfl-subtabs a{
    padding:9px 18px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14px;
    background:var(--mfl-card); border:1px solid var(--mfl-border); color:var(--mfl-ink);
}
.mfl-subtabs a.is-active, .mfl-subtabs a:hover{ background:var(--mfl-primary); color:#fff; border-color:var(--mfl-primary); }

.mfl-file-input-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mfl-file-input-row input[type=file]{ flex:1; min-width:180px; }
.mfl-camera-btn{ flex-shrink:0; white-space:nowrap; }
.mfl-file-count{ display:block; font-size:13px; color:var(--mfl-success); margin-top:4px; font-weight:600; }
.mfl-upload-hint{ font-size:13px; margin-top:8px; }

@media (max-width:600px){
    .mfl-file-input-row{ flex-direction:column; align-items:stretch; }
    .mfl-camera-btn{ width:100%; justify-content:center; }
}

.mfl-upgrade-notice{ border-color:var(--mfl-accent); }
.mfl-upgrade-notice h3{ color:var(--mfl-accent); }

.mfl-flash-banner{
    display:flex; align-items:center; gap:12px; padding:16px 20px; margin-bottom:24px;
    border-radius:var(--mfl-radius); font-size:16px; font-weight:600;
    animation: mflFlashIn .25s ease;
    box-shadow: var(--mfl-shadow);
}
.mfl-flash-success{ background:#E9F3EA; color:#2F5C33; border:1px solid #B9DABC; }
.mfl-flash-error{ background:#FBEAE7; color:var(--mfl-danger); border:1px solid #F0C9C2; }
.mfl-flash-icon{ font-size:20px; flex-shrink:0; }
.mfl-flash-text{ flex:1; }
.mfl-flash-close{
    background:none; border:none; font-size:22px; line-height:1; cursor:pointer;
    color:inherit; opacity:.55; padding:0 0 0 8px; flex-shrink:0;
}
.mfl-flash-close:hover{ opacity:1; }
@keyframes mflFlashIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:translateY(0); } }

.mfl-billing-upsell{ border-color:var(--mfl-accent); text-align:center; }
.mfl-billing-upsell > p{ max-width:640px; margin:0 auto 24px; }
.mfl-billing-upsell-grid.mfl-pricing-grid{ grid-template-columns:repeat(3,1fr); text-align:left; }
@media (max-width:900px){ .mfl-billing-upsell-grid.mfl-pricing-grid{ grid-template-columns:1fr; } }

.mfl-search-input{
    width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--mfl-border);
    font-size:16px; margin-bottom:16px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B5D4F' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size:15px;
}
.mfl-tag-pills{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.mfl-tag-pill{
    display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600;
    background:var(--mfl-bg); border:1px solid var(--mfl-accent-light); color:var(--mfl-primary);
}

.mfl-family-member-list, .mfl-doc-list{ margin-top:12px; }
.mfl-family-group{ margin-bottom:22px; }
.mfl-family-group:last-child{ margin-bottom:0; }
.mfl-family-group-title{
    font-family:var(--mfl-font-body); font-size:13px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--mfl-accent); margin:0 0 6px; padding-bottom:6px; border-bottom:1px solid var(--mfl-border);
}
.mfl-family-group-count{ color:var(--mfl-ink-soft); font-weight:400; text-transform:none; letter-spacing:normal; }
.mfl-change-group{ padding:8px 10px; border-radius:6px; border:1px solid var(--mfl-border); font-size:16px; background:#fff; }
.mfl-checklist-group-label{
    font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--mfl-accent);
    font-weight:700; margin:12px 0 4px;
}
.mfl-checklist-group-label:first-child{ margin-top:0; }
.mfl-family-member-row, .mfl-doc-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:14px 0; border-bottom:1px solid var(--mfl-border);
}
.mfl-family-member-row:last-child, .mfl-doc-row:last-child{ border-bottom:none; }
a.mfl-doc-row{ text-decoration:none; color:inherit; cursor:pointer; transition:background .15s ease; }
a.mfl-doc-row:hover{ background:var(--mfl-bg); }

/* ---------- List / Grid view toggle ---------- */
.mfl-view-toggle{ display:inline-flex; border:1px solid var(--mfl-border); border-radius:8px; overflow:hidden; flex-shrink:0; }
.mfl-view-toggle-btn{
    display:flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; border:none;
    cursor:pointer; font-family:var(--mfl-font-body); font-size:13px; font-weight:600; color:var(--mfl-ink-soft);
    transition:background .15s ease, color .15s ease;
}
.mfl-view-toggle-btn + .mfl-view-toggle-btn{ border-left:1px solid var(--mfl-border); }
.mfl-view-toggle-btn svg{ width:14px; height:14px; flex-shrink:0; }
.mfl-view-toggle-btn.is-active{ background:var(--mfl-bg); color:var(--mfl-primary); }
.mfl-view-toggle-btn:hover{ color:var(--mfl-primary); }

.mfl-doc-list.is-grid-view{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:12px; }
.mfl-doc-list.is-grid-view .mfl-doc-row{
    flex-direction:column; align-items:flex-start; gap:8px;
    padding:16px; margin:0; border:1px solid var(--mfl-border); border-radius:var(--mfl-radius);
    background:var(--mfl-card); box-shadow:var(--mfl-shadow);
}
.mfl-doc-list.is-grid-view .mfl-doc-row > div:first-child{ width:100%; }
.mfl-doc-list.is-grid-view .mfl-variation-actions{ width:100%; margin-top:2px; }
@media (max-width:1100px){ .mfl-doc-list.is-grid-view{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mfl-doc-list.is-grid-view{ grid-template-columns:1fr; } }

/* On phones, a long title next to the action buttons on the same row got
   cramped -- stack title, sharing meta, and buttons as their own
   full-width, centered rows instead. Scoped to Documents and Instructions
   specifically (not Family Members, which shares the same base row
   classes) since that's where this was reported. */
@media (max-width:600px){
    .mfl-doc-list[data-toggle-group="documents"] .mfl-doc-row{
        flex-direction:column;
        text-align:center;
    }
    .mfl-doc-list[data-toggle-group="documents"] .mfl-doc-row .mfl-variation-actions{
        justify-content:center;
    }
    .mfl-doc-list[data-toggle-group="instructions"] .mfl-doc-row{
        flex-direction:column;
        text-align:center;
    }
    .mfl-doc-list[data-toggle-group="instructions"] .mfl-doc-row .mfl-variation-actions{
        justify-content:center;
    }
}

.mfl-album-card{ padding:0; overflow:hidden; text-align:center; }
.mfl-album-card-link{ text-decoration:none; color:inherit; display:block; }
.mfl-album-card h3, .mfl-album-card p{ padding:0 20px; }
.mfl-album-card h3{ margin-top:14px; margin-bottom:2px; }
.mfl-album-card p{ margin-top:0; padding-bottom:8px; }
.mfl-album-card .mfl-tag-pills{ padding:0 20px 16px; margin-top:-6px; justify-content:center; }
.mfl-view-album-btn{ margin:0; }
.mfl-album-card .mfl-view-album-btn{ margin:0 0 20px; }

.mfl-album-row-main{ display:flex; align-items:center; gap:12px; min-width:0; }
.mfl-album-row-thumb{ width:48px; height:48px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.mfl-album-cover{ width:100%; height:150px; object-fit:cover; border-radius:var(--mfl-radius) var(--mfl-radius) 0 0; }
@media (max-width:600px){ .mfl-album-cover{ height:auto; aspect-ratio:1/1; } }

/* ---------- Slideshow / lightbox ---------- */
.mfl-slideshow-modal{
    position:fixed; inset:0; background:rgba(20,15,10,.94); z-index:2000;
    display:flex; align-items:center; justify-content:center;
}
.mfl-slideshow-modal[hidden]{ display:none; }
.mfl-slideshow-stage{ max-width:82vw; max-height:82vh; display:flex; align-items:center; justify-content:center; }
.mfl-slideshow-stage img{ max-width:82vw; max-height:82vh; object-fit:contain; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.5); transition:transform .15s ease; }
.mfl-slideshow-stage img.mfl-rotate-90, .mfl-slideshow-stage img.mfl-rotate-270{ max-width:82vh; max-height:82vw; }
.mfl-slideshow-stage img.mfl-rotate-90{ transform:rotate(90deg); }
.mfl-slideshow-stage img.mfl-rotate-180{ transform:rotate(180deg); }
.mfl-slideshow-stage img.mfl-rotate-270{ transform:rotate(270deg); }
.mfl-slideshow-rotate-save{
    position:absolute; top:16px; left:56px; background:rgba(255,255,255,.12);
    border:none; color:#fff; padding:6px 14px; border-radius:999px; font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s ease;
}
.mfl-slideshow-rotate-save:hover{ background:rgba(255,255,255,.25); }
.mfl-slideshow-rotate-save:disabled{ opacity:.6; cursor:default; }
.mfl-slideshow-rotate-save[hidden]{ display:none; }
.mfl-slideshow-title{
    position:absolute; top:20px; left:50%; transform:translateX(-50%);
    color:#fff; font-family:var(--mfl-font-head); font-size:18px; text-align:center; max-width:70vw;
}
.mfl-slideshow-counter{
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
    color:rgba(255,255,255,.7); font-size:13px;
}
.mfl-slideshow-play{
    position:absolute; bottom:20px; right:24px; background:rgba(255,255,255,.12);
    border:none; color:#fff; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600;
    cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .15s ease;
}
.mfl-slideshow-play:hover{ background:rgba(255,255,255,.25); }
.mfl-slideshow-save{
    position:absolute; bottom:20px; left:24px; background:rgba(255,255,255,.12);
    border:none; color:#fff; padding:8px 16px; border-radius:999px; font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s ease;
}
.mfl-slideshow-save:hover{ background:rgba(255,255,255,.25); }
.mfl-slideshow-save:disabled{ opacity:.6; cursor:default; }
.mfl-slideshow-save[hidden]{ display:none; }
.mfl-slideshow-save-msg{
    position:absolute; bottom:54px; left:24px; color:rgba(255,255,255,.85); font-size:12px; max-width:220px;
}
.mfl-slideshow-enhance-confirm{
    position:absolute; bottom:20px; left:24px; display:flex; gap:8px;
}
.mfl-slideshow-enhance-confirm[hidden]{ display:none; }
.mfl-slideshow-enhance-confirm .mfl-slideshow-save{ position:static; }
.mfl-slideshow-enhance-discard{ background:rgba(162,59,46,.75); }
.mfl-slideshow-enhance-discard:hover{ background:rgba(162,59,46,.9); }
.mfl-slideshow-close{
    position:absolute; top:16px; right:20px; background:none; border:none; color:#fff;
    font-size:32px; line-height:1; cursor:pointer; opacity:.8;
}
.mfl-slideshow-close:hover{ opacity:1; }
.mfl-slideshow-rotate{
    position:absolute; top:16px; left:20px; background:none; border:none; color:#fff;
    cursor:pointer; opacity:.8; width:26px; height:26px; padding:0;
}
.mfl-slideshow-rotate svg{ width:100%; height:100%; }
.mfl-slideshow-rotate:hover{ opacity:1; }
.mfl-slideshow-rotate:disabled{ opacity:.4; cursor:default; }
.mfl-slideshow-rotate[hidden]{ display:none; }
.mfl-slideshow-nav{
    position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12);
    border:none; color:#fff; width:48px; height:48px; border-radius:50%; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.mfl-slideshow-nav:hover{ background:rgba(255,255,255,.25); }
.mfl-slideshow-prev{ left:20px; }
.mfl-slideshow-next{ right:20px; }
@media (max-width:600px){
    .mfl-slideshow-nav{ width:40px; height:40px; }
    .mfl-slideshow-prev{ left:8px; }
    .mfl-slideshow-next{ right:8px; }
    .mfl-slideshow-title{ font-size:15px; top:12px; }
}
.mfl-album-meta-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; align-items:start; }
@media (max-width:700px){ .mfl-album-meta-row{ grid-template-columns:1fr; } }

.mfl-photo-thumb-wrap{ position:relative; }
.mfl-photo-thumb-wrap img{ width:80px; height:80px; object-fit:cover; border-radius:6px; }
.mfl-gallery-photo-trigger{ display:block; width:100%; padding:0; margin:0; border:none; background:none; cursor:pointer; }
.mfl-gallery-photo-trigger img{ display:block; }
.mfl-photo-thumb-share, .mfl-photo-thumb-delete{
    position:absolute; top:2px; width:20px; height:20px; border-radius:50%; border:none;
    background:rgba(43,33,26,.75); color:#fff; font-size:11px; cursor:pointer; line-height:20px; padding:0;
}
.mfl-photo-thumb-share{ right:2px; }
.mfl-photo-thumb-delete{ left:2px; background:rgba(162,59,46,.85); font-size:14px; }

/* ---------- Family Viewer (invited member, standalone-ish but uses site chrome) ---------- */
.mfl-family-viewer-section{ padding:30px 0; }
.mfl-viewer-doc-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.mfl-viewer-doc-card{ text-align:left; }
.mfl-viewer-instr-category{ margin:20px 0 10px; font-size:16px; color:var(--mfl-primary); }
.mfl-viewer-instr-category:first-child{ margin-top:0; }
.mfl-viewer-instr-body p{ margin:0 0 .6em; font-size:14px; }
.mfl-empty-state{ text-align:center; color:var(--mfl-ink-soft); font-style:italic; padding:20px 0; }
.mfl-viewer-album-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; }
.mfl-viewer-album-card{ text-decoration:none; color:var(--mfl-ink); padding:0; overflow:hidden; display:block; }
.mfl-viewer-album-card img{ width:100%; height:150px; object-fit:cover; }
.mfl-viewer-album-card h3, .mfl-viewer-album-card p{ padding:0 18px; }
.mfl-viewer-album-card h3{ margin-top:14px; }
.mfl-viewer-album-card p{ padding-bottom:16px; color:var(--mfl-ink-soft); }
.mfl-viewer-photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.mfl-viewer-photo-grid img{ width:100%; height:160px; object-fit:cover; border-radius:8px; }

/* Larger 3-per-row gallery cards, used on the shared-album "Photo Gallery" page */
.mfl-viewer-photo-grid-large{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mfl-viewer-photo-grid-large img{ width:100%; height:240px; object-fit:cover; border-radius:8px; }
@media (max-width:700px){ .mfl-viewer-photo-grid-large{ grid-template-columns:repeat(2,1fr); } .mfl-viewer-photo-grid-large img{ height:180px; } }
@media (max-width:480px){ .mfl-viewer-photo-grid-large{ grid-template-columns:1fr; } .mfl-viewer-photo-grid-large img{ height:220px; } }

.mfl-profile-photo-card{ margin-bottom:20px; }
.mfl-profile-photo-row{ display:flex; align-items:center; gap:20px; margin-top:12px; flex-wrap:wrap; }
.mfl-profile-photo-preview, .mfl-profile-photo-placeholder{
    width:88px; height:88px; border-radius:50%; object-fit:cover; flex-shrink:0;
}
.mfl-profile-photo-placeholder{
    display:flex; align-items:center; justify-content:center;
    background:var(--mfl-accent-light); color:#fff; font-family:var(--mfl-font-head);
    font-size:32px; font-weight:700;
}
.mfl-profile-photo-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Generic page ---------- */
.mfl-generic-page{ padding:60px 24px; }
.mfl-page-title{ text-align:center; }

/* ---------- Phone-width centering pass ----------
   On phones specifically, everything reads better centered: headings, body
   copy, standalone buttons, and media, rather than left-aligned. This relies
   on a deliberate distinction: text-align only affects inline-level content
   (text, links, inline-block buttons/images), never block-level elements like
   full-width form inputs or flex/grid layouts -- so this is safe to apply
   broadly to card/content containers without breaking form usability or
   existing flex/grid alignment. Button *groups* and media *groups* are
   centered separately via justify-content, since text-align doesn't apply to
   flex children directly. */
@media (max-width:600px){
    /* General content: marketing pages, generic pages, and card text */
    .mfl-generic-page, .mfl-page-content,
    .mfl-locket-card > h3, .mfl-locket-card > h4, .mfl-locket-card > p,
    .mfl-locket-card > .mfl-variation-meta, .mfl-locket-card > .mfl-notice{
        text-align:center;
    }
    .mfl-page-content img{ margin-left:auto; margin-right:auto; }

    /* Forms: centers the (inline-block) submit button and any standalone
       text/links without affecting block-level, full-width inputs/textareas
       or flex-based rows (checklists, file-input rows), which aren't
       inline-level and so aren't touched by text-align at all. */
    .mfl-form{ text-align:center; }
    .mfl-form label{ text-align:left; } /* labels stay left-aligned above their field for readability */

    /* Button and media groups: these are flex containers, so they need
       justify-content rather than text-align to center as a unit. */
    .mfl-variation-actions, .mfl-plan-actions, .mfl-family-card-actions,
    .mfl-gallery-preview{
        justify-content:center;
    }

    /* Footer: center each stacked column's text, and turn the social links
       into a centered row instead of left-aligned inline icons. */
    .mfl-footer-col{ text-align:center; }
    .mfl-footer-social{ display:flex; justify-content:center; flex-wrap:wrap; }

    /* Profile photo row: avatar + action buttons, centered as a unit */
    .mfl-profile-photo-row{ justify-content:center; }

    /* Standalone media (avatars, covers, thumbnails already centered via
       flex/grid elsewhere) -- this covers any plain content image that isn't
       part of one of those existing layouts. */
    .mfl-locket-card > img{ display:block; margin-left:auto; margin-right:auto; }
}

/* ---------- Print (Family Instructions "Print" button -> browser print/save-as-PDF) ---------- */
@media print{
    .mfl-print-hide, .mfl-header, .mfl-footer, .mfl-portal-sidebar, .mfl-portal-nav-toggle,
    #wpadminbar{ display:none !important; }
    .mfl-portal-inner{ display:block !important; }
    .mfl-portal-content{ max-width:100% !important; margin:0 !important; padding:0 !important; }
    body{ background:#fff !important; }
    .mfl-instr-body-card{ border:none !important; box-shadow:none !important; padding:0 !important; background:transparent !important; }
    .mfl-viewer-instr-body{ font-size:13pt; line-height:1.6; color:#000; }
}

/* ---------- Directory groups (Documents / Instructions / Albums organization) ---------- */
.mfl-directory-group{ margin-bottom:24px; }
.mfl-directory-group:last-child{ margin-bottom:0; }
.mfl-directory-group-header{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.mfl-directory-group-header h4{ margin:0; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--mfl-accent); }
.mfl-directory-toggle{
    display:flex; align-items:center; gap:6px; background:none; border:none; padding:0;
    cursor:pointer; flex:1; min-width:0; text-align:left;
}
.mfl-directory-toggle-icon{
    width:14px; height:14px; flex-shrink:0; color:var(--mfl-accent);
    transition:transform .15s ease; transform:rotate(-90deg);
}
.mfl-directory-toggle[aria-expanded="true"] .mfl-directory-toggle-icon{ transform:rotate(0deg); }
.mfl-directory-group-content[hidden]{ display:none; }
.mfl-show-more-wrap{ text-align:center; margin-top:12px; grid-column:1 / -1; }
.mfl-directory-delete{
    background:none; border:none; color:var(--mfl-ink-soft); font-size:16px; line-height:1;
    cursor:pointer; padding:0 4px; opacity:.6;
}
.mfl-directory-delete:hover{ opacity:1; color:#a23b2e; }
.mfl-directory-rename{
    background:none; border:none; color:var(--mfl-ink-soft); font-size:13px; line-height:1;
    cursor:pointer; padding:0 4px; opacity:.6;
}
.mfl-directory-rename:hover{ opacity:1; color:var(--mfl-accent); }