/* ==========================================================================
   Lootjestrekmachine — definitive theme/component layer
   Loaded after styles.css. Keep component overrides here instead of appending
   version-specific fix blocks to the base stylesheet.
   ========================================================================== */

/* The inline celebration form uses its own layout rather than modal sizing. */
.add-celebration-box .celebration-form { width:100%; min-width:0; text-align:left; }
.add-celebration-box .celebration-form .form-group { display:block; }
.add-celebration-box .celebration-form textarea { min-height:80px; }
.add-celebration-box .celebration-form input,
.add-celebration-box .celebration-form textarea,
.add-celebration-box .celebration-form select { min-width:0; max-width:100%; }
.add-celebration-box .celebration-form > .button { display:block; margin:10px auto; min-width:120px; }

/* Unread messages use the same toast component as transient feedback. */
.message-notification {
  position:fixed;
  right:18px;
  bottom:100px;
  z-index:9999;
  box-sizing:border-box;
  width:min(390px, calc(100vw - 28px));
  border-color:var(--line);
  border-left-color:var(--brand);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
  box-shadow:var(--shadow-md);
}
.message-notification[hidden] { display:none; }
.message-notification-title { display:flex; align-items:center; gap:8px; margin-bottom:6px; color:var(--brand); }
.message-notification-link { display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:var(--brand); font-weight:700; }
.message-notification-link:hover { color:var(--brand-dark); }
.message-notification .ux-toast-close { flex-shrink:0; min-width:36px; min-height:36px; color:var(--muted); }
.message-notification .ux-toast-close:hover { background:var(--brand-soft); color:var(--brand-dark); border-radius:var(--radius); }
.message-notification a:focus-visible,
.message-notification button:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
@media (max-width:600px) {
  .message-notification { right:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .message-notification { animation:none; }
}

/* Wishlist selector, FAQ/privacy, archive and public landing */
.app-nav .nav-utility .button.is-current { background:#fff; color:var(--brand); border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.18); }

/* Admin shortcut sits directly left of "Uitloggen" (right-aligned) on wide screens. */
@media (min-width:901px) {
  .app-nav #superadmin_form { order:19; margin-left:auto; }
  .app-nav:has(#superadmin_form) #logout { margin-left:0; }
}

/* Wishlist picker rebuilt as one stable layout (no horizontal browser scrollbar). */
.wishlist-selection { padding-top:12px; padding-bottom:12px; }
.wishlist-picker-heading { margin-bottom:8px; gap:10px; }
.wishlist-selection .wishlist-picker-heading h2 { font-size:1rem; line-height:1.35; }
.wishlist-picker-panel { max-width:1180px; margin:0 auto; display:grid; gap:8px; }
.wishlist-picker-panel > form { display:none; }
.wishlist-picker-row { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:14px; align-items:start; }
.wishlist-picker-self,.wishlist-picker-people { display:grid; grid-template-rows:20px auto; gap:3px; min-width:0; }
.wishlist-picker-label { margin:0!important; padding:0 2px; height:20px; display:flex; align-items:center; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.wishlist-participants { display:flex; flex-wrap:wrap; gap:6px; overflow:visible!important; padding:0!important; scrollbar-width:auto!important; }
.wishlist-choice { border:1px solid #ead8d2; border-radius:11px; background:#fff; color:var(--ink); font:inherit; font-weight:750; cursor:pointer; display:inline-flex; align-items:center; gap:6px; justify-content:center; }
.wishlist-selection .wishlist-picker-panel button.wishlist-choice[type="submit"] { min-height:38px; margin:0; max-width:100%; overflow-wrap:anywhere; padding:6px 12px; }
.wishlist-choice-self { background:#fff4f2; color:var(--brand); border-color:#e8b9bf; }
.wishlist-picker-self a.wishlist-choice { min-height:38px; padding:6px 12px; text-decoration:none; }
.wishlist-picker-self a.wishlist-choice.is-active { background:#fff; color:var(--brand-dark); border-color:var(--brand); }
.wishlist-selection .wishlist-picker-panel button.wishlist-choice.is-active[type="submit"],
.wishlist-selection .wishlist-picker-panel button.wishlist-choice.is-active[type="submit"]:hover { background:#fff; color:var(--brand-dark); border-color:var(--brand); }
.wishlist-choice.is-drawn:not(.is-active) { border-color:#d7aa63; background:#fffaf0; }
.wishlist-choice small { font-size:.68rem; font-weight:750; opacity:.78; }
.wishlist-picker-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-left:auto; }
.wishlist-group-switcher { margin:0!important; }

.wishlist-picker-heading > div:first-child { min-width:0; }
.wishlist-picker-heading .group-selection-button { min-width:0; max-width:100%; }
.wishlist-picker-heading .group-switch-copy { min-width:0; overflow-wrap:anywhere; }
@media(max-width:620px){ .wishlist-picker-heading { display:flex; flex-wrap:wrap; } }
@media(max-width:720px){ .wishlist-picker-row{grid-template-columns:1fr}.wishlist-picker-toolbar{align-items:stretch}.wishlist-picker-toolbar{width:100%;margin-left:0}.wishlist-picker-toolbar>.button,.wishlist-group-switcher{flex:1 1 auto}.wishlist-picker-toolbar .group-selection-button{width:100%}.wishlist-choice{flex:1 1 auto} }

/* Message navigation follows the wishlist buttons, with a white current page. */
.nav-links.message-navigation { padding:0; background:transparent; flex-wrap:wrap; overflow:visible; }
.nav-links.message-navigation .button { min-height:38px; padding:6px 12px; border:1px solid var(--brand); border-radius:10px; background:var(--brand); color:#fff; font-weight:650; box-shadow:0 4px 12px rgba(143,29,44,.13); }
.nav-links.message-navigation .button:hover { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; transform:translateY(-1px); }
.nav-links.message-navigation .button.active,
.nav-links.message-navigation .button.active:hover { background:#fff; border-color:var(--brand); color:var(--brand-dark); }

/* Shared content heroes */
.content-hero { max-width:900px; margin:0 auto 26px; text-align:center; }
.content-hero.compact { padding:26px 24px; border:1px solid #eadbd3; border-radius:20px; background:linear-gradient(180deg,#fff,#fffaf6); box-shadow:0 10px 28px rgba(67,37,27,.06); }
.content-hero h1 { margin:6px 0 8px; font-size:clamp(1.65rem,3vw,2.3rem); color:var(--ink); letter-spacing:-.035em; }
.content-hero p { max-width:700px; margin:0 auto; color:var(--muted); line-height:1.65; }
.page-kicker { color:var(--brand); font-size:.76rem; font-weight:850; text-transform:uppercase; letter-spacing:.09em; }

/* FAQ */
.faq-search { display:block; max-width:620px; margin:20px auto 0; text-align:left; }
.faq-search span { display:block; margin-bottom:7px; font-size:.78rem; font-weight:750; color:var(--muted); }
.faq-search input { width:100%; margin:0; background:#fff; }
.faq-navigation { position:sticky; top:8px; z-index:4; max-width:980px;  padding:8px; border:1px solid #eadbd3; border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 6px 18px rgba(67,37,27,.06); backdrop-filter:blur(8px); }
.faq-item { max-width:900px; margin:0 auto 10px; padding:0!important; overflow:hidden; border:1px solid #eadbd3!important; border-radius:14px!important; background:#fff; box-shadow:none!important; }
.faq-question { width:100%; padding:17px 19px; border:0; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:18px; text-align:left; font:inherit; font-weight:800; cursor:pointer; }
.faq-question:hover { background:#fff9f6; }
.faq-plus { width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border-radius:50%; background:#f8e9e7; color:var(--brand); font-size:1.25rem; transition:transform .18s ease; }
.faq-answer { display:none; padding:0 19px 19px; color:#4f413b; line-height:1.65; }
.faq-item.is-open .faq-answer { display:block; }
.faq-item.is-open .faq-plus { transform:rotate(45deg); }
.faq-item:not(:has(.faq-question)) { padding:18px!important; }

/* Privacy */
.privacy-updated { display:inline-block; margin-top:14px; padding:6px 10px; border-radius:999px; background:#f7ece6; color:#6e5b53; font-size:.78rem; font-weight:700; }
.section > h2[id], .section > h2:not(:first-child) { scroll-margin-top:90px; }

/* Public first visit */

.public-home-cta .page-kicker{color:#ffd6a0}.public-home-cta .button{background:#fff;color:var(--brand);border-color:#fff;}
@media(max-width:800px){.public-steps{grid-template-columns:1fr}.public-benefits{grid-template-columns:1fr 1fr}.public-home-cta{display:block}.public-home-cta .button{margin-top:18px}}
@media(max-width:520px){.public-benefits{grid-template-columns:1fr}.public-home{padding:0 12px}.public-home-intro{padding-left:6px;padding-right:6px}}

/* Past draws */
.admin-past-hero { margin-top:20px; }
.past-draw-summary,.past-draw-results { max-width:900px; margin:18px auto; padding:22px; border:1px solid #eadbd3; border-radius:17px; background:#fff; box-shadow:0 8px 24px rgba(67,37,27,.05); }
#past-draws-info-form h3,.past-draw-results h3 { margin-top:0; color:var(--ink); }
.confirmation-box { border-color:#efc7bd!important; background:#fffaf7!important; }

/* Public authentication hero */
.public-auth {
  width: min(1180px, calc(100% - 40px)); margin: 64px auto 72px;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(42px, 7vw, 92px); align-items: center;
}
.public-auth-copy { max-width: 650px; }
.public-auth-copy h1 { margin: 9px 0 18px; font-size: clamp(2.25rem, 4.7vw, 4.35rem); line-height: 1.03; letter-spacing: -.045em; }
.public-auth-lead { margin: 0 0 28px; max-width: 600px; color: #655650; font-size: 1.08rem; line-height: 1.72; }
.public-auth-benefits { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 16px; }
.public-auth-benefits li { display: flex; gap: 13px; align-items: flex-start; }
.public-auth-benefits li > span { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#f5e4dd; color:#9c1734; font-weight:900; }
.public-auth-benefits strong, .public-auth-benefits small { display:block; }
.public-auth-benefits strong { color:#302522; margin-bottom:3px; }
.public-auth-benefits small { color:#74655f; font-size:.9rem; line-height:1.5; }
.public-auth-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.login-box .public-auth-actions { justify-content:center; }
.public-auth-more { color:#941631; font-weight:800; text-decoration:none; }
.public-auth-more:hover { text-decoration:underline; }
.public-token-note { margin:0; padding:14px 16px; border-left:3px solid #d5a24c; border-radius:0 10px 10px 0; background:#fff8ec; color:#655247; font-size:.9rem; line-height:1.55; }
.public-auth-login { width:100%; }
.public-login-box { width:auto; max-width:460px; margin:0 0 0 auto; padding:32px; }
.public-login-heading { margin-bottom:24px; }
.public-login-heading h2 { margin:5px 0 7px; font-size:1.85rem; }
.public-login-heading p { margin:0; color:#74655f; line-height:1.55; }
.public-login-box form { display:grid; gap:10px; }
.public-login-box label { margin-top:4px; }
.public-login-box .cf-turnstile { margin:8px auto 4px; max-width:100%; }
.public-login-submit { width:100%; margin-top:4px; }
.public-login-links { display:flex; justify-content:center; align-items:center; gap:9px; flex-wrap:wrap; margin-top:8px; font-size:.9rem; }
.public-login-links a { color:#941631; font-weight:700; }
.login-box .login-field { position:relative; }
.login-box .login-field input {
  box-sizing:border-box; width:100%; height:58px; margin:0; padding:24px 14px 8px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface-soft);
  color:var(--ink); font:inherit;
}
.login-box .login-field label {
  position:absolute; top:50%; left:14px; margin:0; transform:translateY(-50%);
  color:var(--muted); font-size:1rem; line-height:1.2; cursor:text;
  transition:top .15s ease, font-size .15s ease, transform .15s ease;
}
.login-box .login-field input:focus + label,
.login-box .login-field input:not(:placeholder-shown) + label,
.login-box .login-field input:autofill + label {
  top:8px; transform:none; font-size:.72rem;
}
.login-box .login-field input:focus { border-color:var(--brand); }
.login-box .password-container input { padding-right:56px; }
.login-box .password-container input::-ms-reveal { display:none; }
.login-box .password-container .toggle-password {
  display:grid; place-items:center; position:absolute; top:50%; right:6px; transform:translateY(-50%);
  border:0; border-radius:8px; background:transparent; color:var(--muted);
  width:42px; height:42px; margin:0; padding:0; box-shadow:none; cursor:pointer;
}
.login-box .password-container .toggle-password:hover { background:var(--brand-soft); color:var(--brand); }
.login-box .password-container .toggle-password:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.login-box .password-container .toggle-password[aria-pressed="true"] .password-eye-slash { display:none; }
@media (prefers-reduced-motion:reduce) {
  .login-box .login-field label { transition:none; }
}
@media (max-width: 880px) {
  .public-auth { grid-template-columns:1fr; margin-top:36px; gap:32px; }
  .public-auth-copy { max-width:720px; }
  .public-auth-copy h1 { font-size:clamp(2.15rem, 9vw, 3.5rem); }
  .public-auth-login { grid-row:1; }
  .public-login-box { max-width:620px; margin:0; }
}
@media (max-width: 560px) {
  .public-auth { width:min(100% - 28px, 1180px); margin-top:26px; }
  .public-auth-copy h1 { font-size:2.3rem; }
  .public-auth-lead { font-size:1rem; }
  .public-login-box { padding:22px 18px; }
  .public-auth-actions .button { width:100%; text-align:center; }
}

/* Registration and password recovery */
.auth-single {
  width: min(100% - 40px, 520px); margin: 64px auto 76px;
}
.auth-single-card { max-width:none; margin:0; }
.auth-single-card .public-login-heading h1 { margin:5px 0 8px; font-size:1.9rem; }
.auth-single-card form { display:grid; gap:10px; }
.auth-context-note {
  display:flex; flex-direction:column; gap:3px; margin:-4px 0 20px; padding:14px 16px;
  border-radius:12px; background:#fff8ec; border:1px solid #f0dfc2; color:#655247;
  font-size:.88rem; line-height:1.5;
}
.auth-context-note strong { color:#7d1930; }
.auth-consent {
  display:flex !important; align-items:flex-start; gap:10px; margin:8px 0 2px !important;
  font-weight:500 !important; line-height:1.5;
}
.auth-consent input { width:auto !important; flex:0 0 auto; margin-top:4px; }
.auth-consent a, .auth-switch a { color:#941631; font-weight:800; }
.auth-switch { margin:9px 0 0; text-align:center; color:#6e6059; font-size:.9rem; }
@media (max-width:560px) {
  .auth-single { width:min(100% - 28px, 520px); margin:28px auto 52px; }
}

/* Shared action, status, FAQ and icon treatments */
:root {
  --positive-soft:#f4f7f3;
  --positive-ink:#4e6552;
  --info-soft:#f7f3ef;
  --info-ink:#65534c;
}
/* Legacy action classes now inherit the current design system. */
.save-button {
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:10px; box-shadow:none;
}
.save-button:hover { background:var(--brand-dark); border-color:var(--brand-dark); }
.edit-button {
  background:#fff; color:var(--brand); border:1px solid #ddc9c1;
  border-radius:10px;
}
.edit-button:hover { background:var(--brand-soft); border-color:#d5b8ad; }

/* Admin draw confirmation, scoped separately from the public draw landing page. */
.draw-section.draw-confirmation { padding:28px; text-align:left; }
.draw-confirmation h2 { margin:0 0 18px; color:var(--ink); letter-spacing:-.025em; }
.draw-confirmation form { display:block; margin-top:18px; }
.draw-confirmation .redraw-warning { padding:22px; margin-bottom:22px; background:#fff8e9; border:1px solid #efd397; border-left:4px solid #d58a24; border-radius:14px; }
.draw-confirmation .redraw-warning h3 { margin:0 0 12px; color:#85500b; font-size:1.15rem; line-height:1.4; }
.draw-confirmation .redraw-warning p { color:#674a26; }
.redraw-acknowledgement { display:flex; align-items:flex-start; gap:12px; padding-top:16px; border-top:1px solid #efd397; font-weight:650; line-height:1.5; cursor:pointer; }
.redraw-acknowledgement input[type="checkbox"] { flex:0 0 20px; width:20px; height:20px; margin:2px 0 0; accent-color:var(--brand); }
.draw-confirmation-actions, .form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:22px; }
.form-actions { justify-content:center; }
.form-actions > .button { display:inline-flex; align-items:center; justify-content:center; min-width:140px; min-height:44px; font-family:inherit; font-size:1rem; line-height:1.25; text-align:center; }
.draw-confirmation-actions .button, .form-actions .button { margin:0; width:auto; }
.draw-section.draw-confirmation .draw-confirmation-actions .edit-button, #exclusions-form .form-actions .button-secondary { background:#fff; color:var(--brand); border:1px solid #ddc9c1; box-shadow:none; }
.draw-section.draw-confirmation .draw-confirmation-actions .edit-button:hover, #exclusions-form .form-actions .button-secondary:hover { background:var(--brand-soft); border-color:#d5b8ad; }
.draw-confirmation .accept-button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; }
@media (max-width:520px) {
  .draw-section.draw-confirmation { padding:20px 16px; }
  .draw-confirmation .redraw-warning { padding:16px; }
  .draw-confirmation-actions .button, .form-actions .button { width:100%; text-align:center; }
}
.danger-outline { background:#fff; color:var(--danger); border:1px solid #e3bdc1; }
.danger-outline:hover { background:#fff3f3; color:#8f2830; }
.danger-button { background:var(--danger); color:#fff; border-color:var(--danger); }
.danger-button:hover { filter:brightness(.92); }
.celebration-primary-action { background:var(--brand); color:#fff; }
.celebration-archive-action { color:var(--brand); }
/* Statuses stay semantic, but are intentionally quieter than actions. */
.celebration-card .active-badge {
  background:#f5ebe5; color:var(--brand-dark); border:1px solid #ead5ca;
}
.celebration-card .draw-status,
.draw-status-complete {
  background:var(--positive-soft); color:var(--positive-ink); border:1px solid #dfe8df;
}
.celebration-card .draw-status.pending,
.draw-status-pending { background:#fff8ec; color:#785d31; border:1px solid #efdfbf; }
/* Other participants' wishes use the current card, action and status treatments. */
.wishlist-card-participant { gap:4px; }
.wishlist-card-participant .priority,
.wishlist-card-participant p { overflow-wrap:anywhere; }
.wishlist-card-participant > p { min-height:0; }
.wishlist-card-participant a { color:var(--brand); }
.wishlist-card-participant a:hover { color:var(--brand-dark); text-decoration:underline; }
.wishlist-card-participant form { margin:10px 0 0; }
.wishlist-card-participant form .button { max-width:100%; white-space:normal; }
.wishlist-purchase-status { display:inline-flex; align-items:center; margin-top:10px; padding:5px 10px; border-radius:999px; font-size:.82rem; font-weight:650; }
.wishlist-card-participant a:focus-visible,
.wishlist-card-participant button:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
/* Shared switches and information icons for wishlists and celebration management. */
.switch { flex-shrink:0; }
.switch .slider { background:var(--line); }
.switch input:checked + .slider { background:var(--brand); }
.switch input:focus-visible + .slider { outline:2px solid var(--brand); outline-offset:3px; }
.user-management-toggle #toggleLabel { color:var(--ink); }
.tooltip-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:20px; height:20px; border:1px solid var(--line); border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:.75rem; font-weight:750; cursor:help; }
.tooltip-icon:hover { color:var(--brand-dark); }
/* FAQ/privacy section navigation: quiet chips, not green call-to-action buttons. */
.faq-navigation {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:22px auto 30px;
}
.faq-nav-link {
  margin:0; padding:8px 12px; background:#fff; color:var(--brand);
  border:1px solid #e3d3cc; border-radius:999px; font-size:.86rem; font-weight:750;
  box-shadow:none;
}
.faq-nav-link:hover, .faq-nav-link:focus-visible {
  background:var(--brand-soft); color:var(--brand-dark); border-color:#d8bcb1;
}
/* Public FAQ no longer needs the old auth-tab shell. */
.faq-page .nav-tabs, .contact-box .nav-tabs { display:none; }
/* Consistent icon treatment when an icon actually adds meaning. */
.ui-icon, .status-icon {
  display:inline-grid; place-items:center; min-width:1.6em; color:var(--brand); font-style:normal;
}
/* Prevent old blue/green defaults leaking through common controls. */
a.button, button.button, input[type="submit"].button { text-decoration:none; }

/* Celebration action controls */
.celebration-card .button-container .button,
.celebration-card .button-container .edit-button,
.celebration-card .button-container .save-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  margin:0;
  padding:9px 14px;
  border-radius:9px;
  font-size:.84rem;
  font-weight:750;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(65,38,31,.08);
}
.celebration-card .button-container .edit-button {
  background:#fff;
  color:var(--brand);
  border:1px solid #d9bdb3;
}
.celebration-card .button-container .edit-button:hover {
  background:var(--brand-soft);
  color:var(--brand-dark);
  border-color:#cfa99d;
}
.celebration-card .button-container .celebration-primary-action {
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
}
.celebration-card .button-container .celebration-archive-action {
  background:#fff;
  color:var(--brand);
  border:1px solid #d9bdb3;
  visibility:visible;
  opacity:1;
}
.celebration-card .button-container .celebration-archive-action:hover {
  background:var(--brand-soft);
  color:var(--brand-dark);
}
.celebration-card .button-container .danger-outline,
.celebration-card .button-container .remove-button {
  background:#fff;
  color:var(--danger);
  border:1px solid #e3bdc1;
}
.celebration-card .button-container {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
}

/* Header brand mark */
.header h1 a::before {
  content:"";
  display:inline-block;
  width:30px;
  height:30px;
  margin-right:10px;
  border-radius:8px;
  background-image:url("../favicon.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 6px rgba(54,7,18,.14);
  vertical-align:-7px;
}

/* Mobile application navigation */
@media (max-width: 768px) {
  .header, header.header, body > header { z-index: 1000; }

  .hamburger {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:9px;
    top:12px;
    right:14px;
    border-radius:10px;
    background:transparent;
  }
  .hamburger:hover,
  .hamburger.active { background:rgba(255,255,255,.10); }

  .actions.app-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin:0;
    padding:12px 16px 16px;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
    background:linear-gradient(115deg,#68131f 0%,#8f1d2c 58%,#a72a38 100%);
    border-top:1px solid rgba(255,255,255,.13);
    box-shadow:0 16px 28px rgba(54,12,22,.22);
    z-index:1000;
  }
  .actions.app-nav.mobile-menu-open { display:flex; }

  .actions.app-nav form,
  .actions.app-nav .group-manage-slot,
  .actions.app-nav .group-manage-container,
  .actions.app-nav #logout { width:100%; margin:0; }

  .actions.app-nav .button,
  .actions.app-nav button,
  .actions.app-nav .group-manage-button,
  .actions.app-nav .group-selection-button {
    width:100%;
    min-height:44px;
    margin:0;
    padding:11px 13px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    box-shadow:none;
    text-align:left;
    font-size:.94rem;
    font-weight:650;
  }
  .actions.app-nav .button:hover,
  .actions.app-nav button:hover,
  .actions.app-nav .group-manage-button:hover,
  .actions.app-nav .group-selection-button:hover {
    background:rgba(255,255,255,.15);
    color:#fff;
  }
  .actions.app-nav button.is-current,
  .actions.app-nav .button.is-current,
  .actions.app-nav .group-manage-button.is-current {
    background:#fff;
    color:var(--brand);
    border-color:#fff;
  }
  .actions.app-nav .nav-logout .button {
    background:transparent;
    color:rgba(255,255,255,.88);
  }
  .actions.app-nav .group-manage-content {
    position:static;
    width:100%;
    margin-top:6px;
    box-shadow:none;
  }
  .actions.app-nav .group-manage-content button {
    background:#fff;
    color:var(--ink);
    border-color:transparent;
  }
}


/* v4.15 — dashboard wishlist CTA uses the same POST flow as the main navigation */
.dashboard-card-form {
    margin: 0;
    padding: 0;
    min-width: 0;
}
.dashboard-card-button {
    width: 100%;
    height: 100%;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.dashboard-card-button .dashboard-card-title {
    display: block;
    margin: 0 0 6px;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}
.dashboard-card-button .dashboard-card-description {
    display: block;
    margin: 0 0 18px;
    color: var(--text-muted, #756660);
    line-height: 1.55;
}
.dashboard-card-button .dashboard-card-cta {
    display: block;
    margin-top: auto;
    color: var(--brand, #A81736);
    font-weight: 750;
}
.dashboard-card-button:focus-visible {
    outline: 3px solid rgba(168, 23, 54, .22);
    outline-offset: 3px;
}


/* v4.15.1 — keep POST-based wishlist dashboard card visually identical to link cards */
.home-dashboard .dashboard-card-form .dashboard-card-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: inherit;
    background: #fff !important;
    color: var(--text, #342A27) !important;
    border: 1px solid var(--border, #EADDD7) !important;
    border-radius: inherit;
    box-shadow: inherit;
}
.home-dashboard .dashboard-card-form .dashboard-card-button:hover {
    background: #fff !important;
    color: var(--text, #342A27) !important;
    border-color: var(--border, #EADDD7) !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-icon {
    color: var(--brand, #A81736) !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-title {
    color: var(--text, #342A27) !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-description {
    color: var(--text-muted, #756660) !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-cta {
    color: var(--brand, #A81736) !important;
}


/* v4.15.2 — form is the dashboard card; button is only its transparent click surface */
.home-dashboard .dashboard-card-form {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 18px;
}
.home-dashboard .dashboard-card-form .dashboard-card-button {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
    margin: 0 !important;
    padding: 22px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-align: left !important;
    cursor: pointer;
}
.home-dashboard .dashboard-card-form .dashboard-card-button:hover,
.home-dashboard .dashboard-card-form .dashboard-card-button:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-title {
    display: block;
    margin: 0 0 8px;
    color: var(--text, #342A27) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 800 !important;
    line-height: inherit !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-description {
    display: block;
    margin: 0 0 18px;
    color: var(--text-muted, #756660) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}
.home-dashboard .dashboard-card-form .dashboard-card-button .dashboard-card-cta {
    display: block;
    margin-top: auto;
    color: var(--brand, #A81736) !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 750 !important;
    line-height: inherit !important;
}
.home-dashboard .dashboard-card-form:focus-within {
    outline: 3px solid rgba(168,23,54,.20);
    outline-offset: 3px;
}
.home-dashboard .dashboard-card-form .dashboard-card-button:focus-visible {
    outline: 0 !important;
}

.participant-management-status p {
    margin: 8px 0 0;
}
.participant-change-feedback .alert-box,
.group-delete-feedback .alert-box {
    width: 100%;
    margin: 16px 0;
}
.participant-change-feedback [data-change-confirmation]:not([hidden]),
.group-delete-feedback [data-change-confirmation] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    text-align: left;
}
.participant-change-feedback input[type="checkbox"],
.group-delete-feedback input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0.25em 0 0;
}
.group-delete-feedback .alert-box p {
    margin: 10px 0 6px;
}
.group-delete-feedback .alert-box ul {
    margin: 0;
    padding-left: 20px;
}
.group-delete-feedback [data-change-confirmation] {
    margin-bottom: 20px;
}

/* Keep the exclusions form inside the same card and action layout as participants. */
.exclusions-card #exclusions-form {
    width: 100%;
    max-width: none;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.exclusions-card .button-container {
    flex-wrap: wrap;
}
.exclusions-card .button-container button {
    flex: 1 1 220px;
    width: auto;
    margin: 0;
}
@media (max-width: 768px) {
    .exclusions-card thead {
        display: none;
    }
}