/* ==========================================================================
   Mabrook — Client Portal & Auth
   Design system v5 (prototype parity): porcelain workspace, dark plum rail,
   Marcellus display type, Outfit body, wine primary, champagne accents.
   Tokens live on .mabrook-portal-wrap (and .mabrook-invitation so shared
   guest-page classes resolve). RTL-safe via logical properties.
   Doubled-class selectors (.mabrook-portal-wrap.mabrook-portal-wrap) are
   deliberate: they out-rank the !important rules in mabrook-reset.css,
   which loads after this file and still carries the previous palette.
   ========================================================================== */

.mabrook-portal-wrap,
.mabrook-invitation {
    --mb-plum: #33222e;
    --mb-plum-deep: #261821;
    --mb-plum-soft: #6e5f68;
    --mb-porcelain: #fdfcfa;
    --mb-sand: #f0e9de;
    --mb-line: #e8e2da;
    --mb-line-strong: #d9cec4;
    --mb-wine: #7e2647;
    --mb-wine-deep: #661d3a;
    --mb-wine-tint: #f6e4ea;
    --mb-champagne: #c8a468;
    --mb-champagne-tint: #f1e7d6;
    --mb-blush: #f3e0e5;
    --mb-mist: #e2e9ec;
    --mb-fig: #e9dfea;
    --mb-ok: #2f7a5b;
    --mb-ok-tint: #e7f2ec;
    --mb-wait: #986c16;
    --mb-wait-tint: #f8f0de;
    --mb-white: #fff;
    --mb-danger: #9a2d39;
    --mb-danger-tint: #f8e5e8;
    --mb-shell-bg: #f8f5f1;
    --mb-font-body: 'Outfit', sans-serif;
    --mb-font-display: 'Marcellus', serif;
    --mb-font-arabic: 'Amiri', serif;
    --mb-ease-out: cubic-bezier(.23, 1, .32, 1);
    --mb-ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --mb-shadow-soft: 0 20px 50px rgba(51, 34, 46, .08);
    --mb-shadow-small: 0 8px 24px rgba(51, 34, 46, .07);
}

/* --------------------------------------------------------------------------
   Wrapper base
   -------------------------------------------------------------------------- */

.mabrook-portal-wrap {
    font-family: var(--mb-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--mb-plum);
    background: var(--mb-porcelain);
    padding: 56px 24px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.mabrook-portal-wrap > * { width: 100%; }

.mabrook-portal-wrap *,
.mabrook-portal-wrap *::before,
.mabrook-portal-wrap *::after { box-sizing: border-box; }

.mabrook-portal-wrap ::selection { color: var(--mb-porcelain); background: var(--mb-wine); }

/* Out-rank mabrook-reset.css (old palette, !important). */
.mabrook-portal-wrap.mabrook-portal-wrap {
    color: var(--mb-plum) !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

/* App shell variant: the shell manages its own spacing. */
.mabrook-portal-wrap.mabrook-app {
    display: block;
    padding: 0;
    background: var(--mb-shell-bg);
}

/* --------------------------------------------------------------------------
   Admin-viewing-as-client banner (rendered outside the wrapper — literal
   colors, no tokens).
   -------------------------------------------------------------------------- */

.mabrook-impersonate-bar {
    position: sticky;
    top: 0;
    z-index: 10000;
    background: #261821;
    color: #fdfcfa;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    text-align: center;
    padding: 10px 16px;
}

.mabrook-impersonate-bar a {
    color: #c8a468;
    font-weight: 600;
    text-decoration: underline;
    margin-inline-start: 6px;
}

/* --------------------------------------------------------------------------
   App shell: fixed dark rail, scrim, topbar, content
   -------------------------------------------------------------------------- */

.mabrook-shell {
    min-height: 100vh;
    display: grid;
    background: var(--mb-shell-bg);
}

.mabrook-sidebar {
    position: fixed;
    z-index: 9990;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 290px);
    display: flex;
    flex-direction: column;
    padding: 24px 18px 16px;
    color: var(--mb-porcelain);
    background: var(--mb-plum-deep);
    transform: translateX(-101%);
    transition: transform 240ms var(--mb-ease-out);
}

[dir="rtl"] .mabrook-sidebar,
.rtl .mabrook-sidebar { transform: translateX(101%); }

.mabrook-shell.is-nav-open .mabrook-sidebar { transform: translateX(0); }

.mabrook-scrim {
    position: fixed;
    z-index: 9980;
    inset: 0;
    padding: 0;
    background: rgba(38, 24, 33, .58);
    border: 0;
    cursor: pointer;
}

.mabrook-scrim[hidden] { display: none; }

.mabrook-sidebar-brand {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 8px;
    flex-shrink: 0;
}

.mabrook-sidebar-brand img { width: 132px; max-width: 132px; display: block; }

.mabrook-sidebar-close {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--mb-porcelain);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.mabrook-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    margin: 23px 0 0;
    padding-block-end: 24px;
}

.mabrook-nav-label {
    margin: 0 11px 8px;
    color: rgba(253, 252, 250, .42);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.mabrook-nav a {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block: 2px;
    padding: 9px 11px;
    border-radius: 7px;
    text-align: start;
    transition: color 150ms ease, background-color 150ms ease;
}

/* Reset forces near-black nav links; the rail is dark. */
.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-nav a {
    color: rgba(253, 252, 250, .72) !important;
    font-size: 15px !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-nav a:hover {
    color: var(--mb-white) !important;
    background: rgba(255, 255, 255, .06);
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-nav a.is-active {
    color: var(--mb-white) !important;
    background: rgba(200, 164, 104, .15);
}

.mabrook-sidebar-account {
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px 10px 2px;
    border-block-start: 1px solid rgba(255, 255, 255, .1);
    flex-shrink: 0;
}

.mabrook-avatar {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--mb-plum);
    background: var(--mb-champagne);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
}

.mabrook-sidebar-account strong,
.mabrook-sidebar-account span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mabrook-sidebar-account strong { font-size: 14px; font-weight: 600; color: var(--mb-porcelain); }
.mabrook-sidebar-account span { color: rgba(253, 252, 250, .48); font-size: 12px; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-signout {
    color: rgba(253, 252, 250, .72) !important;
    font-size: 12px !important;
    font-weight: 650;
    white-space: nowrap;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-signout:hover { color: var(--mb-white) !important; }

.mabrook-workspace { min-width: 0; }

.mabrook-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 16px;
    background: rgba(253, 252, 250, .96);
    border-block-end: 1px solid var(--mb-line);
    backdrop-filter: blur(10px);
}

.mabrook-topbar > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

.mabrook-topbar span { color: var(--mb-plum-soft); font-size: 14px; }
.mabrook-topbar i { color: var(--mb-plum-soft); font-style: normal; font-size: 12px; }

.mabrook-topbar strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.mabrook-menu-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin-inline-start: -10px;
    color: var(--mb-plum);
    background: transparent;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.mabrook-menu-btn svg,
.mabrook-sidebar-close svg { display: block; }

.mabrook-content {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 28px 16px 80px;
}

/* --------------------------------------------------------------------------
   Type: headings, page heading, eyebrow, lead
   -------------------------------------------------------------------------- */

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-h1,
.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-h2,
.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-h3 {
    color: var(--mb-plum) !important;
    font-family: var(--mb-font-display) !important;
    font-weight: 400 !important;
}

.mabrook-h1 {
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}

.mabrook-h2 {
    font-size: clamp(20px, 2.2vw, 27px);
    line-height: 1.2;
    margin: 24px 0 12px;
}

.mabrook-h3 {
    font-size: 18px;
    line-height: 1.3;
    margin: 20px 0 10px;
}

.mabrook-eyebrow {
    margin: 0 0 8px;
    color: var(--mb-wine);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-lead {
    color: var(--mb-plum-soft) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

.mabrook-lead { margin: 0 0 14px; max-width: 680px; }

.mabrook-head-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-end: 24px;
}

.mabrook-head-row > div { min-width: 0; }
.mabrook-head-row .mabrook-lead { margin-block-end: 0; }

/* Editor title row (event name + status + back link) */
.mabrook-title-row { margin-block-end: 4px; }
.mabrook-title-row .mabrook-h1 { margin-block: 10px 8px; }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-out-link {
    color: var(--mb-wine) !important;
    border-bottom: 1px solid var(--mb-champagne);
    font-weight: 650;
    font-size: 14px;
    overflow-wrap: anywhere;
    padding-bottom: 1px;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-out-link:hover { color: var(--mb-wine-deep) !important; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-link-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mb-wine) !important;
    font-size: 14px !important;
    font-weight: 650;
    white-space: nowrap;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-link-back:hover { color: var(--mb-wine-deep) !important; }

.mabrook-auth-switch { margin: 22px 0 0; font-size: 13px; color: var(--mb-plum-soft); text-align: center; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-auth-switch a {
    color: var(--mb-wine) !important;
    font-weight: 650;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-auth-switch a:hover { color: var(--mb-wine-deep) !important; }

/* --------------------------------------------------------------------------
   Auth card
   -------------------------------------------------------------------------- */

.mabrook-auth-card {
    width: min(100%, 520px);
    max-width: 520px;
    margin: 0 auto;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    box-shadow: var(--mb-shadow-soft);
    padding: 28px 20px;
    text-align: center;
}

.mabrook-auth-card form { text-align: start; margin-top: 22px; }
.mabrook-auth-card .mabrook-wordmark { margin: 0 0 26px; }
.mabrook-auth-card .mabrook-wordmark img { width: 180px; margin: 0 auto; }
.mabrook-auth-card .mabrook-lead { margin: 0 auto 20px; }

.mabrook-wordmark img { max-width: 180px; height: auto; display: block; }

.mabrook-gallery-card { max-width: 900px; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.mabrook-portal-wrap label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 650;
    color: var(--mb-plum);
    margin-bottom: 16px;
}

.mabrook-portal-wrap.mabrook-portal-wrap input[type="text"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="email"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="password"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="number"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="date"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="time"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="tel"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="search"],
.mabrook-portal-wrap.mabrook-portal-wrap select,
.mabrook-portal-wrap.mabrook-portal-wrap textarea {
    width: 100%;
    min-height: 46px !important;
    padding: 10px 12px !important;
    color: var(--mb-plum) !important;
    background-color: var(--mb-porcelain) !important;
    border: 1px solid var(--mb-line-strong) !important;
    border-radius: 7px !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.4 !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap select {
    padding-block: 10px !important;
    padding-inline: 12px 36px !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap textarea { min-height: 0 !important; resize: vertical; }

.mabrook-portal-wrap.mabrook-portal-wrap input:focus,
.mabrook-portal-wrap.mabrook-portal-wrap select:focus,
.mabrook-portal-wrap.mabrook-portal-wrap textarea:focus {
    background-color: var(--mb-white) !important;
    border-color: var(--mb-wine) !important;
    box-shadow: 0 0 0 3px var(--mb-wine-tint) !important;
    outline: none !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap input[type="checkbox"],
.mabrook-portal-wrap.mabrook-portal-wrap input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 0 !important;
    accent-color: var(--mb-wine) !important;
}

.mabrook-portal-wrap .mabrook-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    color: var(--mb-plum);
}

.mabrook-field-note {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--mb-plum-soft);
    margin-top: 4px;
}

.mabrook-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2px 20px;
    margin: 20px 0 8px;
}

.mabrook-field-full { margin-top: 4px; }

.mabrook-phone-row { display: flex; gap: 8px; }
.mabrook-phone-row select { flex: 0 0 150px; width: 150px; }
.mabrook-phone-row input { flex: 1; min-width: 0; }

.mabrook-days-input { width: 80px; margin-inline-start: 8px; }

.mabrook-media-form input[type="file"] {
    border: 1px dashed var(--mb-wine);
    background: var(--mb-wine-tint);
    padding: 20px 16px;
    width: 100%;
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease;
}

.mabrook-media-form input[type="file"]:hover { background: var(--mb-champagne-tint); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn,
.mabrook-portal-wrap.mabrook-portal-wrap button.mabrook-btn,
.mabrook-portal-wrap.mabrook-portal-wrap a.mabrook-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px !important;
    width: auto;
    color: var(--mb-white) !important;
    background: var(--mb-wine) !important;
    border: 1px solid var(--mb-wine) !important;
    border-radius: 9px !important;
    padding: 10px 17px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    text-align: center;
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 120ms ease !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn:hover,
.mabrook-portal-wrap.mabrook-portal-wrap button.mabrook-btn:hover,
.mabrook-portal-wrap.mabrook-portal-wrap a.mabrook-btn:hover {
    color: var(--mb-white) !important;
    background: var(--mb-wine-deep) !important;
    border-color: var(--mb-wine-deep) !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn:active { transform: scale(.98); }

.mabrook-auth-card form .mabrook-btn { width: 100%; margin-top: 5px; }
.mabrook-auth-card > .mabrook-btn { width: 100%; }
.mabrook-btn-auto { width: auto; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn-quiet,
.mabrook-portal-wrap.mabrook-portal-wrap button.mabrook-btn-quiet,
.mabrook-portal-wrap.mabrook-portal-wrap a.mabrook-btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px !important;
    color: var(--mb-wine) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    padding: 8px 13px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: color 160ms ease, background-color 160ms ease !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn-quiet:hover,
.mabrook-portal-wrap.mabrook-portal-wrap button.mabrook-btn-quiet:hover,
.mabrook-portal-wrap.mabrook-portal-wrap a.mabrook-btn-quiet:hover {
    color: var(--mb-wine-deep) !important;
    background: var(--mb-wine-tint) !important;
    border-color: transparent !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn-wa,
.mabrook-portal-wrap.mabrook-portal-wrap a.mabrook-btn-wa {
    color: var(--mb-ok) !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-btn-wa:hover,
.mabrook-portal-wrap.mabrook-portal-wrap a.mabrook-btn-wa:hover {
    color: var(--mb-ok) !important;
    background: var(--mb-ok-tint) !important;
}

.mabrook-portal-wrap button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
}

.mabrook-btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.mabrook-upsell-row { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Alerts (prototype notice pattern: square, tinted, hairline border)
   -------------------------------------------------------------------------- */

.mabrook-alert {
    display: flex;
    align-items: baseline;
    gap: 11px;
    margin: 0 0 16px;
    padding: 13px 15px;
    background: var(--mb-sand);
    border: 1px solid var(--mb-line);
    font-size: 14px;
    text-align: start;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-alert,
.mabrook-invitation .mabrook-alert { border-radius: 0 !important; }

.mabrook-alert-ok { color: var(--mb-ok); background: var(--mb-ok-tint); border-color: #cfe5d8; }
.mabrook-alert-warn { color: var(--mb-wait); background: var(--mb-wait-tint); border-color: #ead8ae; }
.mabrook-alert-error { color: var(--mb-danger); background: var(--mb-danger-tint); border-color: #eccfd6; }

.mabrook-alert-close {
    margin-inline-start: auto;
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 18px;
    line-height: 1;
    color: inherit;
    opacity: .55;
    cursor: pointer;
}

.mabrook-alert-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Cards / sections (white panels on the porcelain workspace)
   -------------------------------------------------------------------------- */

.mabrook-panel-soft,
.mabrook-card {
    min-width: 0;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 20px;
    margin-block: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mb-plum);
}

.mabrook-panel-soft > .mabrook-h2:first-child,
.mabrook-card > .mabrook-h2:first-child { margin-top: 0; }

.mabrook-panel-soft form + form { margin-top: 14px; }

/* --------------------------------------------------------------------------
   Metrics (stat tiles)
   -------------------------------------------------------------------------- */

.mabrook-stat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 18px 0;
}

.mabrook-stat {
    min-width: 0;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 18px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 2px;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-stat-value {
    color: var(--mb-plum) !important;
    font-family: var(--mb-font-display) !important;
    font-size: 24px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-stat-label {
    color: var(--mb-plum-soft) !important;
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-stat-side-bride .mabrook-stat-value { color: var(--mb-wine) !important; }
.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-stat-side-groom .mabrook-stat-value { color: #3d5a54 !important; }

/* --------------------------------------------------------------------------
   Usage bars (package page)
   -------------------------------------------------------------------------- */

.mabrook-usage { margin: 20px 0; display: grid; gap: 20px; }
.mabrook-usage-row { display: flex; flex-direction: column; }

.mabrook-usage-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--mb-plum);
    margin-bottom: 7px;
}

.mabrook-usage-head span:last-child { color: var(--mb-plum-soft); }

.mabrook-bar {
    height: 7px;
    border-radius: 8px;
    background: var(--mb-sand);
    overflow: hidden;
}

.mabrook-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--mb-wine);
}

.mabrook-feature-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 9px;
    font-size: 13px;
}

.mabrook-feature-list li { padding-inline-start: 20px; position: relative; }

.mabrook-feature-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mabrook-feature-list li.is-on::before { background: var(--mb-ok); }
.mabrook-feature-list li.is-off { color: var(--mb-plum-soft); }
.mabrook-feature-list li.is-off::before { background: var(--mb-line-strong); }

/* --------------------------------------------------------------------------
   Event list
   -------------------------------------------------------------------------- */

.mabrook-event-list { display: grid; gap: 10px; margin-top: 8px; }

.mabrook-event-card {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 16px;
    color: var(--mb-plum);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms var(--mb-ease-out);
}

.mabrook-event-card:hover {
    border-color: var(--mb-champagne);
    box-shadow: var(--mb-shadow-small);
    transform: translateY(-2px);
}

.mabrook-event-date {
    width: 64px;
    min-width: 64px;
    height: 70px;
    display: grid;
    place-content: center;
    text-align: center;
    color: var(--mb-wine);
    background: var(--mb-wine-tint);
    border: 1px solid var(--mb-blush);
}

.mabrook-event-date span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.mabrook-event-date strong {
    display: block;
    font-family: var(--mb-font-display);
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
}

.mabrook-event-main { min-width: 0; flex: 1 1 200px; display: block; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-event-type {
    display: block;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--mb-plum-soft) !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-event-title {
    display: block;
    color: var(--mb-plum) !important;
    font-family: var(--mb-font-display) !important;
    font-size: 20px;
    font-weight: 400;
    margin: 3px 0;
    overflow-wrap: anywhere;
}

.mabrook-event-meta { display: block; font-size: 13px; color: var(--mb-plum-soft); }

/* --------------------------------------------------------------------------
   Pills / badges
   -------------------------------------------------------------------------- */

.mabrook-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 11px;
    border-radius: 20px;
    color: var(--mb-plum-soft);
    background: var(--mb-sand);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.mabrook-pill-published { background: var(--mb-ok-tint); color: var(--mb-ok); }
.mabrook-pill-draft,
.mabrook-pill-ready,
.mabrook-pill-scheduled { background: var(--mb-wait-tint); color: var(--mb-wait); }
.mabrook-pill-cancelled { background: var(--mb-danger-tint); color: var(--mb-danger); }
.mabrook-pill-invited { background: var(--mb-wine-tint); color: var(--mb-wine); }
.mabrook-pill-side-bride { background: var(--mb-blush); color: var(--mb-wine); }
.mabrook-pill-side-groom { background: var(--mb-mist); color: #3d5a54; }
.mabrook-pill-side-both { background: var(--mb-champagne-tint); color: var(--mb-wait); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.mabrook-tabs {
    display: flex;
    gap: 2px;
    max-width: 100%;
    margin: 16px 0 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border-block-end: 1px solid var(--mb-line-strong);
    -webkit-overflow-scrolling: touch;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-tabs a {
    position: relative;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 10px 13px;
    color: var(--mb-plum-soft) !important;
    border-bottom: 0 !important;
    font-size: 13px !important;
    font-weight: 650;
    white-space: nowrap;
}

.mabrook-tabs a::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline: 50%;
    height: 2px;
    background: var(--mb-wine);
    transition: inset 180ms var(--mb-ease-out);
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-tabs a:hover { color: var(--mb-plum) !important; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-tabs a.is-active {
    color: var(--mb-wine) !important;
    border-bottom: 0 !important;
}

.mabrook-tabs a.is-active::after { inset-inline: 10px; }

.mabrook-media-views { margin-block-end: 18px; }

/* --------------------------------------------------------------------------
   Theme picker
   -------------------------------------------------------------------------- */

.mabrook-theme-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0 22px;
}

.mabrook-theme-card {
    min-width: 0;
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    color: var(--mb-plum);
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    text-align: start;
    transition: border-color 160ms ease, transform 160ms var(--mb-ease-out), box-shadow 160ms ease;
}

.mabrook-theme-card:hover {
    border-color: var(--mb-champagne);
    transform: translateY(-2px);
    box-shadow: var(--mb-shadow-small);
}

.mabrook-theme-card input { position: absolute; opacity: 0; pointer-events: none; }

.mabrook-theme-card.is-selected,
.mabrook-theme-card:has(input:checked) {
    border-color: var(--mb-wine);
    box-shadow: 0 0 0 2px var(--mb-wine-tint);
}

.mabrook-theme-swatch {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-block-end: 1px solid rgba(51, 34, 46, .1);
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-theme-sample {
    font-family: var(--mb-font-display) !important;
    font-size: 29px;
}

.mabrook-theme-accent { width: 14px; height: 14px; border-radius: 50%; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-theme-name {
    display: block;
    padding: 15px 15px 0;
    color: var(--mb-plum) !important;
    font-family: var(--mb-font-body) !important;
    font-size: 15px;
    font-weight: 650;
}

.mabrook-theme-desc {
    display: block;
    padding: 4px 15px 15px;
    font-size: 12px;
    font-weight: 400;
    color: var(--mb-plum-soft);
}

/* --------------------------------------------------------------------------
   Publish tab: checklist + publish bar
   -------------------------------------------------------------------------- */

.mabrook-checklist {
    list-style: none;
    margin: 14px 0 20px;
    padding: 0;
    border-block-start: 1px solid var(--mb-line);
    font-size: 13px;
}

.mabrook-checklist li {
    position: relative;
    padding: 11px 0 11px;
    padding-inline-start: 31px;
    border-block-end: 1px solid var(--mb-line);
}

.mabrook-checklist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 11px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--mb-line-strong);
    background: var(--mb-white);
}

.mabrook-checklist li.is-done::before {
    background: var(--mb-ok);
    border-color: var(--mb-ok);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.mabrook-checklist li.is-open { color: var(--mb-plum-soft); }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-checklist li.is-open a {
    color: var(--mb-wine) !important;
    text-decoration: underline !important;
    font-weight: 650;
}

.mabrook-publish-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding: 17px;
    color: var(--mb-porcelain);
    background: var(--mb-plum);
}

.mabrook-publish-bar form { margin: 0; }

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-publish-bar .mabrook-lead {
    color: rgba(253, 252, 250, .62) !important;
    font-size: 13px !important;
    margin: 0;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-publish-bar .mabrook-btn-quiet {
    color: var(--mb-porcelain) !important;
    border: 1px solid rgba(253, 252, 250, .32) !important;
    background: transparent !important;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-publish-bar .mabrook-btn-quiet:hover {
    background: rgba(255, 255, 255, .08) !important;
}

/* --------------------------------------------------------------------------
   Guests: party list, guest rows, entry modes
   -------------------------------------------------------------------------- */

.mabrook-party-list {
    display: flex;
    flex-direction: column;
    margin: 18px 0 28px;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 2px 16px;
}

.mabrook-party {
    border-block-end: 1px solid var(--mb-line);
    padding: 16px 0;
    transition: background-color 150ms ease;
}

.mabrook-party:last-child { border-block-end: 0; }

.mabrook-party-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-party-head strong {
    font-family: var(--mb-font-body);
    font-size: 15px;
    font-weight: 650;
    color: var(--mb-plum);
}

.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-party-meta {
    display: block;
    font-size: 12px !important;
    color: var(--mb-plum-soft) !important;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

.mabrook-party-guests { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

.mabrook-party-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.mabrook-guest-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 20px;
    background: var(--mb-sand);
    color: var(--mb-plum-soft);
    white-space: nowrap;
}

.mabrook-guest-accepted { background: var(--mb-ok-tint); color: var(--mb-ok); }
.mabrook-guest-declined { background: var(--mb-danger-tint); color: var(--mb-danger); }

.mabrook-party-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mabrook-party-links input { flex: 1; min-width: 160px; }
.mabrook-portal-wrap.mabrook-portal-wrap .mabrook-party-links input {
    min-height: 40px !important;
    font-size: 12px !important;
    color: var(--mb-plum-soft) !important;
    background-color: var(--mb-white) !important;
}
.mabrook-party-links form { margin: 0; }

.mabrook-guest-rows,
.mabrook-people-rows,
.mabrook-schedule-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.mabrook-guest-row,
.mabrook-schedule-row { display: flex; gap: 10px; align-items: center; }

.mabrook-guest-row input[type="text"],
.mabrook-schedule-row input[type="text"] { flex: 1; }
.mabrook-schedule-row input[type="time"] { width: 140px; flex: 0 0 auto; }

.mabrook-guest-row .mabrook-check,
.mabrook-child-tick,
.mabrook-ind-child-tick { margin: 0; white-space: nowrap; }

.mabrook-row-remove { flex: 0 0 auto; }

.mabrook-people-row {
    display: grid;
    grid-template-columns: 1.4fr 1.4fr 1fr auto auto;
    gap: 8px;
    align-items: center;
}

.mabrook-people-row input { margin: 0; }
.mabrook-people-row .mabrook-check { margin: 0; }

@media (max-width: 43.75rem) {
    .mabrook-people-row { grid-template-columns: 1fr 1fr; }
    .mabrook-people-row .mabrook-people-remove { grid-column: 2; justify-self: end; }
}

/* Entry mode choice (household vs individuals) */
.mabrook-mode-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 4px 0 20px;
}

.mabrook-mode { margin: 0; cursor: pointer; }
.mabrook-mode input { position: absolute; opacity: 0; pointer-events: none; }

.mabrook-mode span {
    display: block;
    border: 1px solid var(--mb-line);
    background: var(--mb-porcelain);
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 650;
    color: var(--mb-plum-soft);
    transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.mabrook-mode span small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--mb-plum-soft);
    margin-top: 3px;
}

.mabrook-mode.is-active span,
.mabrook-mode input:checked + span {
    border-color: var(--mb-wine);
    background: var(--mb-wine-tint);
    color: var(--mb-wine);
}

/* --------------------------------------------------------------------------
   Questions / optional content sections
   -------------------------------------------------------------------------- */

.mabrook-question-list {
    display: flex;
    flex-direction: column;
    margin: 16px 0 24px;
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 2px 16px;
}

.mabrook-question-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-block-end: 1px solid var(--mb-line);
}

.mabrook-question-row:last-child { border-block-end: 0; }
.mabrook-question-row form { margin: 0; }
.mabrook-question-row.is-archived { opacity: .55; }

.mabrook-question-row strong { font-size: 14px; font-weight: 650; color: var(--mb-plum); }

.mabrook-section-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 20px; }

.mabrook-section-block {
    background: var(--mb-porcelain);
    border: 1px solid var(--mb-line);
    padding: 15px 18px;
}

.mabrook-section-toggle { margin: 0 0 8px; font-weight: 650; }

/* --------------------------------------------------------------------------
   Map picker
   -------------------------------------------------------------------------- */

.mabrook-map-picker {
    height: 320px;
    border: 1px solid var(--mb-line-strong);
    background: var(--mb-sand);
    margin: 8px 0 16px;
    overflow: hidden;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Invitation RSVP button (themed guest pages — uses --mbi-* theme tokens)
   -------------------------------------------------------------------------- */

.mbi-rsvp-btn {
    display: inline-block;
    background: var(--mbi-primary);
    color: var(--mbi-bg);
    border-radius: 30px;
    padding: 13px 42px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    margin: 26px 0 6px;
    transition: background 0.18s ease, transform 0.18s ease;
}

.mabrook-invitation.is-rtl .mbi-rsvp-btn { letter-spacing: 0; text-transform: none; }

.mbi-rsvp-btn:hover { background: var(--mbi-accent); color: var(--mbi-surface); transform: translateY(-1px); }

/* --------------------------------------------------------------------------
   Media: share links, QR, contributor groups, media grid, gallery
   -------------------------------------------------------------------------- */

.mabrook-share-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 14px;
}

.mabrook-share-block { min-width: 0; }
.mabrook-share-block input { margin-bottom: 10px; }

.mabrook-qr {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: var(--mb-white);
    border: 8px solid var(--mb-sand);
    width: fit-content;
    margin: 0 auto;
}

.mabrook-uploader-group {
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    padding: 18px 20px;
    margin-bottom: 12px;
}

.mabrook-uploader-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.mabrook-uploader-head strong { font-size: 14px; font-weight: 650; color: var(--mb-plum); }
.mabrook-uploader-head .mabrook-btn-row { margin-top: 0; gap: 6px; }

.mabrook-media-grid,
.mabrook-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 16px 0;
}

.mabrook-media-item,
.mabrook-gallery-item {
    background: var(--mb-white);
    border: 1px solid var(--mb-line);
    overflow: hidden;
    margin: 0;
    transition: box-shadow 160ms ease, transform 160ms var(--mb-ease-out);
}

.mabrook-media-item:hover,
.mabrook-gallery-item:hover { box-shadow: var(--mb-shadow-small); transform: translateY(-2px); }

.mabrook-media-item img,
.mabrook-media-item video,
.mabrook-gallery-item img,
.mabrook-gallery-item video {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    background: var(--mb-plum-deep);
}

.mabrook-media-item.is-rejected { opacity: .45; }
.mabrook-media-item.is-vis-private { outline: 2px solid #ead8ae; outline-offset: 2px; }

.mabrook-media-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--mb-plum-soft);
}

.mabrook-media-actions { display: flex; gap: 4px; padding: 0 8px 8px; flex-wrap: wrap; }
.mabrook-media-actions form { margin: 0; }

.mabrook-gallery-item figcaption {
    padding: 6px 10px;
    font-size: 12px;
    color: var(--mb-plum-soft);
    text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 40rem) {
    .mabrook-content { padding-inline: 24px; }
    .mabrook-head-row {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
    }
    .mabrook-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .mabrook-theme-grid { grid-template-columns: repeat(2, 1fr); }
    .mabrook-mode-row { grid-template-columns: repeat(2, 1fr); }
    .mabrook-share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mabrook-auth-card { padding: 40px; }
}

@media (min-width: 48rem) {
    .mabrook-topbar { padding-inline: 24px; }
    .mabrook-content { padding-block-start: 40px; }
    .mabrook-panel-soft,
    .mabrook-card { padding: 26px; }
}

/* Desktop: fixed rail becomes a sticky grid column (~1100px). */
@media (min-width: 68.75rem) {
    .mabrook-shell { grid-template-columns: 270px minmax(0, 1fr); }
    .mabrook-sidebar {
        position: sticky;
        inset-block-start: 0;
        inset-inline-start: auto;
        width: 270px;
        height: 100vh;
        height: 100dvh;
        transform: none;
    }
    [dir="rtl"] .mabrook-sidebar,
    .rtl .mabrook-sidebar { transform: none; }
    .mabrook-sidebar-close,
    .mabrook-menu-btn,
    .mabrook-scrim { display: none !important; }
    .mabrook-workspace { grid-column: 2; }
    .mabrook-topbar { height: 70px; }
    .mabrook-content { padding: 46px 40px 90px; }
    .mabrook-stat-grid { grid-template-columns: repeat(4, 1fr); }
    .mabrook-theme-grid { grid-template-columns: repeat(4, 1fr); }
    .mabrook-map-picker { height: 340px; }
}

@media (min-width: 90rem) {
    .mabrook-shell { grid-template-columns: 300px minmax(0, 1fr); }
    .mabrook-sidebar { width: 300px; padding-inline: 22px; }
    .mabrook-workspace { grid-column: 2; }
    .mabrook-content { padding-inline: 56px; }
    .mabrook-stat { padding: 22px; }
}

@media (max-width: 30rem) {
    .mabrook-portal-wrap { padding: 18px 10px; }
    .mabrook-portal-wrap.mabrook-app { padding: 0; }
    .mabrook-auth-card { padding: 28px 20px; }
    .mabrook-party-links { flex-wrap: wrap; }
    .mabrook-media-grid,
    .mabrook-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .mabrook-portal-wrap *,
    .mabrook-portal-wrap *::before,
    .mabrook-portal-wrap *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Print — QR sheets
   -------------------------------------------------------------------------- */

@media print {
    .mabrook-portal-wrap { background: #fff; padding: 0; display: block; }
    .mabrook-sidebar,
    .mabrook-scrim,
    .mabrook-topbar,
    .mabrook-nav,
    .mabrook-tabs,
    .mabrook-btn,
    .mabrook-btn-quiet,
    .mabrook-signout,
    .mabrook-link-back,
    .mabrook-media-form,
    .mabrook-media-actions { display: none !important; }
    .mabrook-shell { display: block; background: #fff; }
    .mabrook-workspace { min-width: 0; }
    .mabrook-content { max-width: none; padding: 0; }
    .mabrook-panel-soft,
    .mabrook-card,
    .mabrook-stat,
    .mabrook-event-card { break-inside: avoid; border-color: #aaa; box-shadow: none; }
    .mabrook-qr { border: 0; box-shadow: none; padding: 0; width: auto; }
    .mabrook-qr img, .mabrook-qr canvas, .mabrook-qr svg { width: 100% !important; height: auto !important; max-width: 480px; }
}