html {
    font-size: 16px;
}

/* Outfit (self-hosted, variable font - one 32KB file covers every weight, no
   Google Fonts CDN request) gives headings/buttons/nav a distinct, modern
   geometric character; body copy stays on the fast, familiar system stack for
   readability. Same self-hosting approach as wwwroot/lib/flatpickr. */
@font-face {
    font-family: 'Outfit';
    src: url('/fonts/outfit-variable.woff2') format('woff2-variations'),
         url('/fonts/outfit-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Belt-and-suspenders against any element briefly overflowing the viewport width
   making the page horizontally scrollable/"wobbly" on mobile - same reasoning as
   the rest of the XMM family. */
body {
    overflow-x: hidden;
}

:root {
    --bg: #f6f5fb;
    --bg-elevated: #ffffff;
    --text: #221f33;
    --text-muted: #635e7a;
    --border: rgba(76, 64, 140, 0.14);
    --accent: #5b45d6;
    --accent-hover: #4a37bd;
    --accent-text: #ffffff;
    --shadow: 0 14px 34px rgba(34, 24, 90, 0.10);
    --shadow-hover: 0 20px 42px rgba(34, 24, 90, 0.16);
    /* Very low-opacity accent washes for the hero background only - never used
       as a text/border color, so they don't need to meet any contrast ratio. */
    --hero-glow-1: rgba(91, 69, 214, 0.10);
    --hero-glow-2: rgba(214, 69, 136, 0.07);
}

:root[data-theme="dark"] {
    --bg: #17152a;
    --bg-elevated: #211f38;
    --text: #ece9f7;
    --text-muted: #a6a0c2;
    --border: rgba(185, 173, 240, 0.16);
    --accent: #8c7bf0;
    --accent-hover: #a391f5;
    --accent-text: #171229;
    --shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 22px 46px rgba(0, 0, 0, 0.45);
    --hero-glow-1: rgba(140, 123, 240, 0.16);
    --hero-glow-2: rgba(230, 82, 122, 0.10);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #17152a;
        --bg-elevated: #211f38;
        --text: #ece9f7;
        --text-muted: #a6a0c2;
        --border: rgba(185, 173, 240, 0.16);
        --accent: #8c7bf0;
        --accent-hover: #a391f5;
        --accent-text: #171229;
        --shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
        --shadow-hover: 0 22px 46px rgba(0, 0, 0, 0.45);
        --hero-glow-1: rgba(140, 123, 240, 0.16);
        --hero-glow-2: rgba(230, 82, 122, 0.10);
    }
}

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

/* Headings and UI chrome (buttons, nav, badges) get the display font; running
   text, labels and form inputs stay on the system stack. */
h1, h2, h3, h4,
.plan-brand,
.plan-button,
.plan-wizard-tab,
.plan-badge,
.plan-card-title {
    font-family: var(--font-display);
}

main {
    flex: 1 0 auto;
}

html[dir="rtl"] body {
    text-align: right;
}

a {
    color: var(--accent);
}

/* ---- Header ---- */

.plan-header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.plan-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
    text-decoration: none;
}

.plan-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 1rem;
    font-weight: 800;
}

.plan-brand-mark svg {
    width: 19px;
    height: 19px;
}

.plan-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    text-decoration: none;
}

.nav-icon-button:hover {
    border-color: var(--accent);
}

.nav-favicon-icon {
    width: 20px;
    height: 20px;
    display: block;
}

/* ---- Language picker ---- */

.language-picker {
    position: relative;
}

.language-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
}

.language-picker-trigger:hover {
    border-color: var(--accent);
}

.language-dropdown-list[hidden] {
    display: none;
}

.language-dropdown-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    max-height: 360px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
}

html[dir="rtl"] .language-dropdown-list {
    right: auto;
    left: 0;
}

.language-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

html[dir="rtl"] .language-dropdown-item {
    text-align: right;
}

.language-dropdown-item:hover {
    background: var(--bg);
}

.language-flag {
    flex: 0 0 auto;
    width: 1.4em;
    aspect-ratio: 4 / 3;
    border-radius: 2px;
}

/* ---- Page content ---- */

.plan-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 24px 40px;
}

.plan-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    padding: 44px 36px;
    border: 1px solid var(--border);
    border-radius: 28px;
    /* Two very soft, low-opacity accent washes in opposite corners - just
       enough depth to feel designed, never loud enough to fight the content
       on top of it. Both stops are theme tokens, so they stay correct in
       dark mode too. */
    background:
        radial-gradient(640px circle at 12% -20%, var(--hero-glow-1), transparent 60%),
        radial-gradient(520px circle at 108% 115%, var(--hero-glow-2), transparent 60%),
        var(--bg-elevated);
    box-shadow: var(--shadow);
    text-align: center;
}

.plan-hero-title {
    position: relative;
    margin: 0 0 14px;
    font-size: clamp(1.9rem, 4.2vw, 2.75rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.plan-hero-subtitle {
    position: relative;
    margin: 0 auto;
    max-width: 560px;
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.6;
}

.plan-foundation-notice {
    margin-top: 28px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ---- Developer modal (same pattern as xmm.at/ai.xmm.at) ---- */

.developer-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 8, 24, 0.55);
}

.developer-modal-overlay[hidden] {
    display: none;
}

.developer-modal {
    width: 100%;
    max-width: 360px;
    padding: 28px 24px;
    border-radius: 20px;
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow);
    text-align: center;
    position: relative;
}

.developer-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

html[dir="rtl"] .developer-modal-close {
    right: auto;
    left: 14px;
}

.developer-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.developer-modal-title {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.developer-modal-name {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
}

.developer-modal-location {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.developer-email {
    display: inline-block;
    margin-top: 10px;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.developer-email:hover,
.developer-email:focus-visible {
    text-decoration: underline;
}

.plan-confirm-text {
    margin: 0 0 20px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
}

.plan-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.plan-guest-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-guest-summary-row .plan-note {
    margin: 0;
}

.plan-guest-overview-button {
    flex: 0 0 auto;
}

.plan-guest-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-resend-invite-trigger {
    padding: 8px;
    border-radius: 10px;
}

.plan-guest-overview-modal {
    max-width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}

html[dir="rtl"] .plan-guest-overview-modal {
    text-align: right;
}

.plan-guest-overview-title {
    text-align: center;
    margin-bottom: 18px;
}

.plan-guest-overview-section {
    margin-bottom: 18px;
}

.plan-guest-overview-section:last-child {
    margin-bottom: 0;
}

.plan-guest-overview-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.plan-guest-status-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.plan-guest-status-icon-yes circle {
    fill: #2fa85a;
}

.plan-guest-status-icon-no circle {
    fill: #d64545;
}

.plan-guest-status-icon-maybe circle {
    fill: #d6a545;
}

.plan-guest-status-icon-pending circle {
    stroke: var(--text-muted);
}

.plan-guest-overview-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-guest-overview-list li {
    padding: 7px 0 7px 28px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.plan-guest-overview-list li:last-child {
    border-bottom: none;
}

html[dir="rtl"] .plan-guest-overview-list li {
    padding: 7px 28px 7px 0;
}

.plan-guest-overview-empty {
    margin: 0 0 0 28px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

html[dir="rtl"] .plan-guest-overview-empty {
    margin: 0 28px 0 0;
}

.user-info-modal {
    max-width: 420px;
    text-align: left;
}

html[dir="rtl"] .user-info-modal {
    text-align: right;
}

.user-info-modal .developer-modal-title {
    text-align: center;
    margin-bottom: 18px;
}

.user-info-section {
    margin-top: 16px;
}

.user-info-section:first-of-type {
    margin-top: 0;
}

.user-info-heading {
    margin: 0 0 4px;
    font-weight: 700;
    font-size: 0.96rem;
}

.user-info-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* ---- Phase 2b: event creation / management (login-free token model) ---- */

.plan-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.plan-card-title {
    margin: 0 0 18px;
    font-size: 1.3rem;
    font-weight: 700;
}

.plan-field {
    margin-bottom: 16px;
}

.plan-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}

.plan-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
}

.plan-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.plan-field-error {
    margin-top: 6px;
    color: #d64545;
    font-size: 0.85rem;
}

.plan-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border-radius: 12px;
    border: none;
    background: var(--accent);
    color: var(--accent-text);
    font-size: 0.96rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.plan-button:hover,
.plan-button:focus-visible {
    background: var(--accent-hover);
    color: var(--accent-text);
    text-decoration: none;
}

.plan-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.plan-button-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.plan-button-secondary:hover,
.plan-button-secondary:focus-visible {
    background: var(--bg);
    color: var(--text);
    border-color: var(--accent);
}

.plan-button-danger {
    background: transparent;
    border: 1px solid rgba(214, 69, 69, 0.4);
    color: #d64545;
}

.plan-qr-frame {
    display: inline-flex;
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: #ffffff;
    box-shadow: var(--shadow);
}

.plan-qr-frame img {
    display: block;
    border-radius: 4px;
}

.plan-link-box {
    display: block;
    width: 100%;
    padding: 12px 14px;
    margin: 8px 0 4px;
    border-radius: 12px;
    border: 1px dashed var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
    word-break: break-all;
}

/* ---- Invite sharing - same mechanics as xmm.at/chess.xmm.at (Telegram/
   WhatsApp/Viber/Signal + copy-link), re-skinned with PLAN's own tokens
   instead of the card-game family's dark panel look. ---- */
.plan-share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
}

.plan-share-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.88rem;
}

.plan-copy-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.plan-copy-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.plan-copy-toast {
    margin: 2px 0 10px;
    font-size: 0.85rem;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.plan-copy-toast.show {
    opacity: 1;
}

.plan-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.plan-share-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.plan-share-button:hover {
    border-color: var(--accent);
    background: var(--bg-elevated);
    transform: translateY(-1px);
    text-decoration: none;
}

.plan-share-button img,
.plan-share-button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.plan-warning {
    margin: 10px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(214, 69, 69, 0.12);
    color: #d64545;
    font-size: 0.86rem;
}

.plan-note {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.plan-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.plan-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.plan-list-item:last-child {
    border-bottom: none;
}

.plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(91, 69, 214, 0.12);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.plan-badge-warn {
    background: rgba(214, 69, 69, 0.14);
    color: #d64545;
}

.plan-manage-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 20px;
    padding: 6px;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.plan-manage-nav-link {
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.plan-manage-nav-link:hover,
.plan-manage-nav-link:focus-visible {
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
}

.plan-manage-nav-link--active {
    background: var(--accent);
    color: var(--accent-text);
}

.plan-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
    margin: 8px 0 4px;
}

.plan-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.plan-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.92rem;
}

.plan-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}


.plan-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.plan-event-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    margin-bottom: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.plan-event-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .plan-event-card:hover {
        transform: none;
    }
}

.plan-event-card-thumb {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    border: 1px solid var(--border);
}

.plan-event-card-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 220px;
}

.plan-event-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.plan-event-card-title-row strong {
    font-family: var(--font-display);
    font-size: 1.02rem;
}

.plan-event-card-date {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.plan-event-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-event-card-action {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-muted);
}

.plan-event-card-action svg {
    width: 20px;
    height: 20px;
}

.plan-event-card:hover .plan-event-card-action {
    color: var(--accent);
}

/* Dev-only reset bar (see _Layout.cshtml) - deliberately plain/striped so it
   reads as "tooling", never mistaken for a real app feature. */
.plan-dev-reset-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 24px;
    background: repeating-linear-gradient(135deg, rgba(214, 69, 69, 0.08), rgba(214, 69, 69, 0.08) 10px, rgba(214, 69, 69, 0.03) 10px, rgba(214, 69, 69, 0.03) 20px);
    border-top: 1px dashed rgba(214, 69, 69, 0.4);
}

.plan-dev-reset-badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #d64545;
    border: 1px solid #d64545;
    border-radius: 6px;
    padding: 2px 6px;
}

.plan-dev-reset-button {
    padding: 6px 14px;
    font-size: 0.82rem;
}

/* ---- Homepage: three main features ---- */

.plan-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin-top: 36px;
}

.plan-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.plan-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(91, 69, 214, 0.35);
}

:root[data-theme="dark"] .plan-feature-card:hover {
    border-color: rgba(140, 123, 240, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .plan-feature-card:hover {
        border-color: rgba(140, 123, 240, 0.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .plan-feature-card {
        transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .plan-feature-card:hover {
        transform: none;
    }
}

.plan-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: rgba(91, 69, 214, 0.12);
    color: var(--accent);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

:root[data-theme="dark"] .plan-feature-icon {
    background: rgba(140, 123, 240, 0.16);
}

.plan-feature-card:hover .plan-feature-icon {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .plan-feature-card:hover .plan-feature-icon {
        transform: none;
    }
}

.plan-feature-icon svg {
    width: 28px;
    height: 28px;
}

.plan-feature-title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.plan-feature-description {
    flex-grow: 1;
    margin: 0 0 22px;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.plan-feature-card .plan-button {
    width: 100%;
}

.plan-feature-card--soon {
    opacity: 0.92;
}

.plan-feature-card--soon .plan-feature-icon {
    background: var(--bg);
    color: var(--text-muted);
}

.plan-feature-soon-badge {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(91, 69, 214, 0.12);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.plan-button-disabled {
    display: flex;
    width: 100%;
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Narrow phone screens ----
   Everything above already avoids horizontal overflow via flex-wrap and fluid
   widths, but the dense Tasks/Budget edit rows (title + several selects/inputs +
   a button, all auto-width) just wrap into many narrow, cramped controls on a
   phone instead of breaking - readable, but fiddly to tap. Below this width,
   every direct child of an inline form takes the full row width and stacks
   instead, same as a normal mobile form. */
@media (max-width: 640px) {
    .plan-inline-form > input,
    .plan-inline-form > select,
    .plan-inline-form > button,
    .plan-inline-form > a.plan-button,
    .plan-inline-form > a.plan-button-secondary {
        flex: 1 1 100%;
        width: 100%;
    }

    .plan-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}

/* Narrow phones (iPhone etc.): brand + all header-action icons no longer fit
   side by side at the default sizes, which forces the 640px wrap above to
   kick in and drop the icons onto their own row. Shrinking the icons and
   tightening the gaps here reclaims just enough width to keep everything on
   one row instead. */
@media (max-width: 420px) {
    .plan-header {
        padding-left: 16px;
        padding-right: 16px;
    }

    .plan-header-actions {
        gap: 4px;
    }

    .nav-icon-button {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    .language-picker-trigger {
        height: 34px;
        padding: 0 8px;
        font-size: 0.85rem;
    }
}

/* ---- Homepage: template style preview ----
   A small, secondary teaser below the three main feature cards - never
   competes with them for attention (smaller type, muted section label, no
   buttons of its own). Each chip's gradient comes straight from
   EventTemplateCatalog, so this always matches the real template colors. */
.plan-template-strip {
    margin-top: 40px;
    text-align: center;
}

.plan-template-strip-title {
    margin: 0 0 16px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.plan-template-chips {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
}

.plan-template-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.plan-template-chip-swatch {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-template-chip:hover .plan-template-chip-swatch {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .plan-template-chip:hover .plan-template-chip-swatch {
        transform: none;
    }
}

/* ---- UX/UI quality pass: friendly notices + public/secret link cards ----
   .plan-notice is for advisory information (e.g. "save this link") that is
   NOT an error - calm, accent-tinted, with an icon, as opposed to the red
   .plan-warning reserved for actual errors/limits (deadline passed, access
   denied, budget exceeded). Never swap one for the other based on styling
   preference alone - only when the underlying message really isn't a
   problem. */
.plan-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 10px 0 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(91, 69, 214, 0.08);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

:root[data-theme="dark"] .plan-notice {
    background: rgba(140, 123, 240, 0.14);
}

.plan-notice svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--accent);
}

.plan-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(45, 158, 74, 0.14);
    color: #2e9e4a;
}

.plan-success-icon svg {
    width: 32px;
    height: 32px;
}

/* ---- Public vs. secret link cards - the one visual distinction that
   matters most: a secret management link must never look interchangeable
   with the public invite link. ---- */
.plan-link-card {
    margin: 14px 0;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.plan-link-card--secret {
    border: 1px dashed rgba(214, 69, 69, 0.35);
    background: rgba(214, 69, 69, 0.04);
}

:root[data-theme="dark"] .plan-link-card--secret {
    background: rgba(214, 69, 69, 0.08);
}

.plan-link-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 0.95rem;
}

.plan-link-card-header svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--accent);
}

.plan-link-badge {
    display: inline-flex;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan-link-badge--public {
    background: rgba(45, 158, 74, 0.16);
    color: #2e9e4a;
}

.plan-link-badge--secret {
    background: rgba(214, 69, 69, 0.14);
    color: #d64545;
}

.plan-link-card-explainer {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* ---- Section header icons - same stroke style as the homepage feature
   icons, just smaller, so every card title across the app reads as one
   consistent system instead of homepage-only polish. ---- */
.plan-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plan-card-title svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--accent);
}

/* ---- Event wizard: compact edit view ----
   Desktop: form left, a live preview that stays in view while scrolling the
   (now much shorter) form. Mobile: the preview collapses above the form in
   normal document order (CSS grid reorders it there, not JS), single column. */
.plan-wizard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

.plan-wizard-form {
    min-width: 0;
}

.plan-wizard-preview-col {
    position: sticky;
    top: 20px;
}

@media (max-width: 680px) {
    .plan-wizard-layout {
        grid-template-columns: 1fr;
    }

    .plan-wizard-preview-col {
        position: static;
        order: -1;
    }
}

.plan-wizard-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 6px;
    border-radius: 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.plan-wizard-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    font-family: inherit;
}

.plan-wizard-tab svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.plan-wizard-tab.active {
    background: var(--accent);
    color: var(--accent-text);
}

.plan-wizard-panel {
    display: none;
}

.plan-wizard-panel.active {
    display: block;
}

.plan-field-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-field-row .plan-field {
    flex: 1;
    min-width: 140px;
}

.plan-wizard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-elevated);
    box-shadow: var(--shadow);
    /* A floating dock, not a divider line on the page background: Save stays
       reachable while scrolling a long form, but still reads as its own
       elevated panel instead of looking detached from the card above it. */
    position: sticky;
    bottom: 12px;
    z-index: 2;
}

/* ---- Unified date+time control ----
   A native <input type="date"> and <input type="time"> each carry the
   browser's own calendar/clock icon, which looks visually foreign next to
   the rest of the custom-styled form. This merges a date+time pair into one
   bordered pill with our own icons, while the native inputs (and therefore
   locale-correct formatting + the real OS picker) still do all the work -
   their own icon is just made invisible-but-still-clickable so the whole
   field opens the picker. */
.plan-datetime-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    overflow: hidden;
}

.plan-datetime-group:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.plan-datetime-field {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    position: relative;
}

.plan-datetime-field svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: var(--text-muted);
}

.plan-datetime-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.96rem;
    padding: 11px 0;
    font-family: inherit;
}

.plan-datetime-field input:focus {
    outline: none;
}

.plan-datetime-field input[type="date"]::-webkit-calendar-picker-indicator,
.plan-datetime-field input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.plan-datetime-divider {
    width: 1px;
    flex: 0 0 auto;
    margin: 8px 0;
    background: var(--border);
}

@media (max-width: 480px) {
    .plan-datetime-group {
        flex-direction: column;
    }

    .plan-datetime-divider {
        width: auto;
        height: 1px;
        margin: 0 12px;
    }
}

/* ---- Live invitation preview ---- */
.plan-wizard-preview {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 20px;
    border-radius: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: var(--shadow);
    transition: background 0.2s ease;
}

.plan-wizard-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 60%);
}

.plan-wizard-preview-badge {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    margin-bottom: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan-wizard-preview-title {
    position: relative;
    z-index: 1;
    margin: 0 0 4px;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    word-break: break-word;
}

.plan-wizard-preview-meta {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.82rem;
    opacity: 0.92;
}

.plan-wizard-preview-label {
    margin: 12px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* ---- Template picker: real image cards ----
   Each card shows the actual generated template artwork (see
   EventTemplateCatalog.DefaultBackgroundImagePath) instead of an abstract
   color dot, so picking a template looks like choosing a real invitation
   design, not a paint swatch. */
.plan-template-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

@media (min-width: 420px) {
    .plan-template-picker {
        grid-template-columns: repeat(3, 1fr);
    }
}

.plan-template-card-option {
    display: flex;
    padding: 4px;
    border-radius: 14px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.plan-template-card-option:has(input:checked) {
    border-color: var(--accent);
}

.plan-template-card-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.plan-template-card-option:focus-within .plan-template-card-thumb {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.plan-template-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 11px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;
}

.plan-template-card-option:hover .plan-template-card-thumb {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .plan-template-card-option:hover .plan-template-card-thumb {
        transform: none;
    }
}

/* ---- Accent color picker: plain swatches, independent of the
   background photo picker above - picking a color never changes the
   photo and picking a photo never changes the color. ---- */
.plan-color-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.plan-color-swatch-option {
    display: inline-flex;
    padding: 3px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.plan-color-swatch-option:has(input:checked) {
    border-color: var(--text);
}

.plan-color-swatch-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.plan-color-swatch-option:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.plan-color-swatch {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Free-pick color input, always shown next to the presets: picking any
   color (not just the 6 presets) only actually shows up once "Kein Foto"
   is selected below, but the control itself doesn't need to hide/reveal
   itself for that - it just sits there, rectangular like the very first
   native color input this app had, instead of forced into a circle. */
.plan-color-custom {
    width: 48px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elevated);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.plan-color-custom:hover {
    border-color: var(--accent);
}

.plan-color-custom::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
}

.plan-color-custom::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.plan-color-custom::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

/* ---- Flatpickr theme: bigger, matches the app instead of the plain
   OS calendar/clock popup (desktop only - see the pointer:fine check in
   Wizard.cshtml; phones/tablets keep their native pickers). Overrides
   wwwroot/lib/flatpickr/flatpickr.min.css, loaded earlier in <head> so plain
   source order (not specificity tricks) is enough to win here. ---- */
.flatpickr-calendar {
    width: 320px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-hover);
    font-family: inherit;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none;
}

.flatpickr-months {
    padding: 14px 14px 4px;
}

.flatpickr-current-month {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    padding: 0;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-weight: 700;
    color: var(--text);
}

.flatpickr-prev-month,
.flatpickr-next-month {
    padding: 10px !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--text-muted);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--accent);
}

.flatpickr-weekdays {
    margin-top: 6px;
}

span.flatpickr-weekday {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.78rem;
}

.flatpickr-days {
    padding: 4px 10px 12px;
}

.dayContainer {
    width: 100%;
    min-width: 100%;
}

.flatpickr-day {
    height: 40px;
    line-height: 40px;
    border-radius: 12px;
    color: var(--text);
    font-size: 0.92rem;
}

.flatpickr-day.today {
    border-color: var(--accent);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--bg);
    border-color: var(--bg);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--text-muted);
    opacity: 0.5;
}

.flatpickr-day.flatpickr-disabled {
    color: var(--text-muted);
    opacity: 0.3;
}

.flatpickr-time {
    border-top: 1px solid var(--border);
    height: 56px;
}

.flatpickr-time input {
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 700;
}

.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowDown:after {
    color: var(--text-muted);
}

.flatpickr-time .numInputWrapper:hover {
    background: var(--bg);
}

/* ---- SlimSelect theme: matches the app instead of the plain OS dropdown
   (desktop only - see the pointer:fine check in Wizard.cshtml; phones/tablets
   keep their native <select>, which already renders well there). SlimSelect
   themes entirely through CSS custom properties on :root, redefined here so
   plain source order (wwwroot/lib/slimselect loaded earlier in <head>) is
   enough to win, no specificity tricks needed. ---- */
:root {
    --ss-primary-color: var(--accent);
    --ss-bg-color: var(--bg-elevated);
    --ss-font-color: var(--text);
    --ss-font-placeholder-color: var(--text-muted);
    --ss-disabled-color: var(--border);
    --ss-border-color: var(--border);
    --ss-focus-color: var(--accent);
    --ss-main-height: 44px;
    --ss-border-radius: 12px;
}

.ss-main {
    font-size: 1rem;
    font-family: var(--font-body);
    box-shadow: none;
}

.ss-main:hover {
    border-color: var(--accent);
}

.ss-content {
    border-radius: 14px;
    border-color: var(--border);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
}

.ss-content .ss-search input {
    border-radius: 10px;
    border-color: var(--border);
    background: var(--bg);
    color: var(--text);
}

.ss-content .ss-list .ss-option {
    color: var(--text);
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:hover {
    background: var(--bg);
    color: var(--text);
}

.ss-content .ss-list .ss-option.ss-option-selected {
    background: var(--accent);
    color: var(--accent-text);
}