/* =========================================================
   CHRISTMAS
   Shared public + admin styling
   ========================================================= */

:root {
    --xmas-dark: #312e2a;
    --xmas-cream: #efe7c6;
    --xmas-red: #ff0000;
    --xmas-card: rgba(0, 0, 0, 0.18);
    --xmas-card-strong: rgba(0, 0, 0, 0.22);
    --xmas-border: rgba(239, 231, 198, 0.22);
    --xmas-border-strong: rgba(239, 231, 198, 0.35);
}

/* Fonts */

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel/Cinzel-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/cinzel/Cinzel-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cinzel Decorative";
    src: url("../fonts/cinzel-decorative/CinzelDecorative-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cinzel Decorative";
    src: url("../fonts/cinzel-decorative/CinzelDecorative-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   SHARED TYPOGRAPHY
   ========================================================= */

.christmas-public,
.christmas-admin-body,
.christmas-admin-shell,
.christmas-admin,
.christmas-group,
.christmas-group-edit,
.christmas-admin-login {
    font-family: "Metropolis", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.christmas-public,
.christmas-admin-body {
    color: var(--xmas-cream);
}

.christmas-public h1,
.christmas-public h2,
.christmas-public h3,
.christmas-public h4,
.christmas-admin h1,
.christmas-admin h2,
.christmas-admin h3,
.christmas-admin h4,
.christmas-group h1,
.christmas-group h2,
.christmas-group h3,
.christmas-group h4,
.christmas-group-edit h1,
.christmas-admin-login h1 {
    text-transform: none;
    color: var(--xmas-cream);
}

.christmas-public h1,
.christmas-public .christmas-display,
.christmas-admin > h1,
.christmas-group > h1,
.christmas-group-edit > h1,
.christmas-admin-login h1 {
    font-family: "Cinzel Decorative", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.christmas-public h2,
.christmas-public h3,
.christmas-public h4,
.christmas-public .christmas-heading,
.christmas-public .christmas-group-name,
.christmas-admin > h2,
.christmas-admin > h3,
.christmas-admin > h4,
.christmas-group > h2,
.christmas-group > h3,
.christmas-group > h4,
.christmas-group-card h3 {
    font-family: "Cinzel", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.02em;
}


/* =========================================================
   PUBLIC PAGES - BASE
   ========================================================= */

.christmas-public .christmas-wrap {
    width: min(1050px, 92vw);
    margin: 0 auto;
    padding: 3rem 0 4rem;
}

.christmas-public .christmas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.christmas-public .christmas-card {
    padding: clamp(1.4rem, 4vw, 2.2rem);
    background: var(--xmas-card-strong);
    border: 1px solid rgba(239, 231, 198, 0.15);
    border-radius: 16px;
}

.christmas-public .christmas-display {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.15;
}

.christmas-public .christmas-heading {
    margin: 0 0 1rem;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.christmas-public .christmas-intro {
    margin: 0 0 1.5rem;
    font-size: 1.05rem;
    line-height: 1.65;
}

.christmas-public .christmas-notice,
.christmas-public .christmas-booking-details {
    background: rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--xmas-red);
    border-radius: 0 10px 10px 0;
}

.christmas-public .christmas-notice {
    margin: 1.75rem 0;
    padding: 1rem 1.2rem;
    line-height: 1.5;
}

.christmas-public .christmas-contact {
    margin-top: 2rem;
    line-height: 1.6;
}

.christmas-public .christmas-phone {
    display: inline-block;
    margin-top: 0.4rem;
    color: var(--xmas-cream);
    font-size: 1.15rem;
    font-weight: 700;
    text-decoration: none;
}

.christmas-public .christmas-phone:hover,
.christmas-public .christmas-phone:focus {
    color: var(--xmas-red);
}


/* Public forms */

.christmas-public .christmas-form {
    display: grid;
    gap: 1.25rem;
}

.christmas-public .form-group {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.christmas-public form label {
    font-family: "Metropolis", sans-serif;
    color: var(--xmas-cream);
}

.christmas-public .form-group label {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.christmas-public form input,
.christmas-public form select,
.christmas-public form textarea {
    width: 100%;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--xmas-border-strong);
    border-radius: 8px;
    background: var(--xmas-cream);
    color: var(--xmas-dark);
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.christmas-public form input:focus,
.christmas-public form select:focus,
.christmas-public form textarea:focus {
    outline: none;
    border-color: var(--xmas-red);
    box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.25);
}

.christmas-public form textarea {
    resize: none;
    overflow-y: hidden;
}

.christmas-public .christmas-button,
.christmas-public form button[type="submit"],
.christmas-allergy-modal .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.8rem;
    border: 1px solid var(--xmas-border-strong);
    border-radius: 999px;
    background: var(--xmas-cream);
    color: var(--xmas-dark);
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.christmas-public a.christmas-button:visited {
    color: var(--xmas-dark);
}

.christmas-public .christmas-button:hover,
.christmas-public .christmas-button:focus-visible,
.christmas-public form button[type="submit"]:hover,
.christmas-public form button[type="submit"]:focus-visible,
.christmas-allergy-modal .modal-footer .btn:hover,
.christmas-allergy-modal .modal-footer .btn:focus-visible {
    background: var(--xmas-red);
    border-color: var(--xmas-red);
    color: #fff;
}

.christmas-public .form-actions {
    margin-top: 0.5rem;
    text-align: center;
}

.christmas-public .form-actions p {
    margin: 1.2rem 0 0;
    line-height: 1.5;
}


/* =========================================================
   PUBLIC FESTIVE MENU
   ========================================================= */

.christmas-menu-public-wrap {
    max-width: 900px;
}

.christmas-menu-header {
    margin-bottom: 3rem;
    text-align: center;
}

.christmas-menu-header .christmas-display {
    margin-bottom: 0.8rem;
}

.christmas-menu-season {
    max-width: 620px;
    margin: 0 auto;
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.5;
}

.christmas-menu-course {
    margin: 0 0 3.5rem;
}

.christmas-menu-course-title {
    margin: 0 0 1.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(239, 231, 198, 0.3);
    color: var(--xmas-cream);
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
}

.christmas-dishes {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 680px;
    margin: 0 auto;
}

.christmas-dish {
    padding: 1.25rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(239, 231, 198, 0.14);
}

.christmas-dish h3 {
    margin: 0 0 0.45rem;
    color: var(--xmas-cream);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    letter-spacing: 0.02em;
}

.christmas-dish p {
    margin: 0.25rem 0;
    color: var(--xmas-cream);
    font-family: "Metropolis", sans-serif;
    font-size: 0.98rem;
    line-height: 1.55;
}

.christmas-dietary {
    white-space: nowrap;
    font-weight: 700;
}

.christmas-fizz {
    max-width: 580px;
    margin: 0 auto 3.5rem;
    padding: 1.6rem 2rem;
    background: var(--xmas-card-strong);
    border: 1px solid rgba(239, 231, 198, 0.25);
    border-radius: 14px;
    text-align: center;
}

.christmas-fizz h2 {
    margin: 0 0 0.6rem;
    color: var(--xmas-cream);
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 700;
    text-transform: none;
}

.christmas-fizz p {
    margin: 0.25rem 0;
}

.christmas-fizz-price,
.christmas-dessert-intro {
    font-family: "Cinzel", Georgia, serif;
    font-weight: 700;
}

.christmas-fizz-price {
    font-size: 1.15rem;
}

.christmas-dessert-intro {
    margin: -0.5rem 0 1rem;
    font-size: 1.15rem;
    text-align: center;
}

.christmas-dessert-intro span {
    display: block;
    margin-top: 0.25rem;
    font-family: "Metropolis", sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
}

.christmas-dish .christmas-supplement {
    margin-top: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.christmas-menu-pricing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 650px;
    margin: 1rem auto 3.5rem;
    border-top: 1px solid rgba(239, 231, 198, 0.3);
    border-bottom: 1px solid rgba(239, 231, 198, 0.3);
}

.christmas-menu-pricing p {
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
}

.christmas-menu-pricing p + p {
    border-left: 1px solid rgba(239, 231, 198, 0.3);
}

.christmas-menu-pricing strong {
    display: block;
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
}

.christmas-menu-pricing span {
    display: block;
    margin-top: 0.4rem;
    font-family: "Cinzel", Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
}

.christmas-menu-booking {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem;
    background: var(--xmas-card-strong);
    border: 1px solid rgba(239, 231, 198, 0.2);
    border-radius: 16px;
    text-align: center;
}

.christmas-menu-booking .christmas-heading {
    margin-bottom: 1rem;
}

.christmas-menu-booking p {
    line-height: 1.6;
}


/* =========================================================
   MENU CHOICES / AMEND
   ========================================================= */

.christmas-menu-wrap {
    max-width: 780px;
}

.christmas-menu-wrap > .christmas-display {
    margin-bottom: 0.75rem;
    text-align: center;
}

.christmas-public .christmas-group-name {
    margin: 0 0 2rem;
    font-size: clamp(1.25rem, 4vw, 1.8rem);
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.03em;
}

.christmas-public .christmas-booking-details {
    margin: 0 0 2rem;
    padding: 1.2rem 1.4rem;
}

.christmas-public .christmas-booking-details p {
    margin: 0.35rem 0;
    line-height: 1.5;
}

.christmas-public .christmas-menu-form {
    margin-top: 2rem;
}

.christmas-public .christmas-menu-form .form-group {
    margin-bottom: 2rem;
}

.christmas-public .christmas-menu-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: "Metropolis", sans-serif;
    font-weight: 700;
}

.christmas-public .christmas-menu-form .form-group input[type="text"] {
    width: 100%;
}

.christmas-public .christmas-menu-form fieldset {
    margin: 0 0 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--xmas-border);
    border-radius: 14px;
    background: var(--xmas-card);
}

.christmas-public .christmas-menu-form legend {
    padding: 0 0.7rem;
    color: var(--xmas-cream);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    text-transform: none;
}

.christmas-public .form-option {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid rgba(239, 231, 198, 0.12);
}

.christmas-public .form-option:last-child {
    border-bottom: 0;
}

.christmas-public .form-option input[type="radio"],
.christmas-public .christmas-allergies input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    padding: 0;
    accent-color: var(--xmas-red);
    cursor: pointer;
}

.christmas-public .form-option input[type="radio"] {
    margin: 0;
}

.christmas-public .form-option label {
    margin: 0;
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}

.christmas-public .christmas-allergies {
    border-color: rgba(255, 0, 0, 0.35);
}

.christmas-public .christmas-allergies > label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.5rem 0;
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
}

.christmas-public .christmas-allergies input[type="checkbox"] {
    margin: 0.15rem 0 0;
}

.christmas-public #allergen-options {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(239, 231, 198, 0.18);
}

.christmas-public #allergen-options > p:first-child {
    margin-top: 0;
    margin-bottom: 1rem;
}

.christmas-public #allergen-options > label {
    display: flex !important;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0;
    padding: 0.45rem 0;
    font-family: "Metropolis", sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
}

.christmas-public #allergen-options p label {
    line-height: 1.5;
}

.christmas-public #dietary_requirements {
    width: 100%;
    margin-top: 0.4rem;
}

.christmas-public .christmas-dessert-note {
    margin: 2rem 0;
    padding: 1rem 1.2rem;
    border-top: 1px solid rgba(239, 231, 198, 0.2);
    border-bottom: 1px solid rgba(239, 231, 198, 0.2);
    font-family: "Cinzel", Georgia, serif;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

.christmas-public .christmas-submit-choices {
    display: flex;
    width: fit-content;
    margin: 2rem auto 0;
}


/* Allergy modal */

.christmas-allergy-modal .modal {
    width: min(92vw, 620px);
    background: var(--xmas-dark);
    color: var(--xmas-cream);
    border: 1px solid rgba(239, 231, 198, 0.3);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}

.christmas-allergy-modal .modal-header {
    padding: 1.5rem 1.5rem 0;
}

.christmas-allergy-modal .modal-header h2 {
    margin: 0;
    color: var(--xmas-cream);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
}

.christmas-allergy-modal .modal-body {
    padding: 1.25rem 1.5rem;
}

.christmas-allergy-modal .modal-body p {
    margin: 0 0 1rem;
    color: var(--xmas-cream);
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.christmas-allergy-modal .modal-body p:last-child {
    margin-bottom: 0;
}

.christmas-allergy-modal .modal-body .text-warning {
    padding-left: 1rem;
    border-left: 4px solid var(--xmas-red);
    color: var(--xmas-cream);
}

.christmas-allergy-modal .modal-footer {
    padding: 0 1.5rem 1.5rem;
    text-align: center;
}


/* =========================================================
   CONFIRMATION
   ========================================================= */

.christmas-confirmation-wrap {
    max-width: 760px;
}

.christmas-confirmation-header {
    margin-bottom: 2rem;
    text-align: center;
}

.christmas-confirmation-header .christmas-display {
    margin-bottom: 0.75rem;
}

.christmas-confirmation-header p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}

.christmas-confirmation-card {
    margin: 2rem 0;
    padding: clamp(1.25rem, 4vw, 2rem);
    background: var(--xmas-card-strong);
    border: 1px solid rgba(239, 231, 198, 0.2);
    border-radius: 16px;
}

.christmas-confirmation-name {
    margin: 0 0 1.4rem;
    color: var(--xmas-cream);
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.christmas-confirmation-card p {
    line-height: 1.6;
}

.christmas-dietary-confirmation {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(239, 231, 198, 0.18);
}

.christmas-confirmation-actions {
    margin: 2rem 0 1.5rem;
    text-align: center;
}

.christmas-confirmation-actions + p {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
    opacity: 0.85;
}


/* =========================================================
   ADMIN - SHARED
   ========================================================= */

.christmas-admin-body {
    margin: 0;
    min-height: 100vh;
    background: var(--xmas-dark);
}

.christmas-admin-shell {
    min-height: 100vh;
}

.christmas-admin,
.christmas-group,
.christmas-group-edit {
    width: min(100% - 2rem, 1100px);
    margin: 0 auto;
    padding: 3rem 0 5rem;
}

.christmas-admin > h1 {
    margin: 0 0 1rem;
    text-align: center;
}

.christmas-group > h1,
.christmas-group-edit > h1 {
    margin: 1.5rem 0 2rem;
}

.christmas-admin > h2 {
    margin: 3rem 0 1.5rem;
}

.christmas-group > h2 {
    margin: 2.5rem 0 1rem;
}

.christmas-admin > h3 {
    margin-top: 2rem;
}

.christmas-admin a,
.christmas-group a {
    color: var(--xmas-cream);
}

.christmas-admin a:hover,
.christmas-admin a:focus-visible,
.christmas-group a:hover,
.christmas-group a:focus-visible {
    color: var(--xmas-red);
}

.christmas-admin > hr,
.christmas-group > hr {
    margin: 3rem 0;
    border: 0;
    border-top: 1px solid rgba(239, 231, 198, 0.25);
}


/* Admin forms */

.christmas-admin > form,
.christmas-group-edit > form,
.christmas-admin-login form {
    background: var(--xmas-card);
    border: 1px solid var(--xmas-border);
    border-radius: 8px;
}

.christmas-admin > form,
.christmas-group-edit > form {
    max-width: 700px;
    padding: 2rem;
}

.christmas-admin .form-group {
    margin-bottom: 1.25rem;
}

.christmas-admin label,
.christmas-group-edit label,
.christmas-admin-login label {
    display: block;
    color: var(--xmas-cream);
    font-family: "Metropolis", sans-serif;
    font-weight: 700;
}

.christmas-admin .form-group label {
    margin-bottom: 0.45rem;
}

.christmas-admin input,
.christmas-admin select,
.christmas-admin textarea,
.christmas-group-edit input,
.christmas-group-edit select,
.christmas-group-edit textarea,
.christmas-admin-login input,
.christmas-admin-login select,
.christmas-admin-login textarea {
    box-sizing: border-box;
    font-family: "Metropolis", sans-serif;
}

.christmas-admin .form-group input,
.christmas-group-edit input[type="text"],
.christmas-group-edit input[type="email"],
.christmas-group-edit input[type="tel"],
.christmas-group-edit input[type="date"],
.christmas-group-edit input[type="time"],
.christmas-group-edit input[type="number"],
.christmas-admin-login input[type="password"],
.christmas-admin input[readonly],
.christmas-group input[readonly] {
    display: block;
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(239, 231, 198, 0.45);
    border-radius: 4px;
    background: var(--xmas-cream);
    color: var(--xmas-dark);
    font-family: "Metropolis", sans-serif;
}

.christmas-group-edit input[type="text"],
.christmas-group-edit input[type="email"],
.christmas-group-edit input[type="tel"],
.christmas-group-edit input[type="date"],
.christmas-group-edit input[type="time"],
.christmas-group-edit input[type="number"] {
    margin-top: 0.45rem;
    font-weight: 400;
}

.christmas-admin input[readonly] {
    border-width: 2px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.christmas-admin input:focus,
.christmas-group-edit input:focus,
.christmas-admin-login input:focus {
    outline: 2px solid var(--xmas-red);
    outline-offset: 2px;
}

.christmas-admin button,
.christmas-group button,
.christmas-group-edit button,
.christmas-admin-login button {
    display: inline-block;
    padding: 0.8rem 1.1rem;
    border: 2px solid var(--xmas-cream);
    border-radius: 4px;
    background: var(--xmas-cream);
    color: var(--xmas-dark);
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

.christmas-admin button:hover,
.christmas-admin button:focus-visible,
.christmas-group button:hover,
.christmas-group button:focus-visible,
.christmas-group-edit button:hover,
.christmas-group-edit button:focus-visible,
.christmas-admin-login button:hover,
.christmas-admin-login button:focus-visible {
    background: var(--xmas-red);
    border-color: var(--xmas-red);
    color: #fff;
}


/* Admin login */

.christmas-admin-login {
    width: min(100% - 2rem, 480px);
    margin: 0 auto;
    padding: 5rem 0;
}

.christmas-admin-login h1 {
    margin: 0 0 2rem;
    text-align: center;
}

.christmas-admin-login form {
    padding: 2rem;
}

.christmas-admin-login .form-group {
    margin-bottom: 1.5rem;
}

.christmas-admin-login label {
    margin-bottom: 0.5rem;
}

.christmas-admin-login input[type="password"] {
    padding: 0.85rem 1rem;
}

.christmas-admin-login button[type="submit"] {
    width: 100%;
    padding: 0.9rem 1.25rem;
}


/* Dashboard */

.christmas-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.christmas-group-card {
    padding: 1.5rem;
    background: var(--xmas-card);
    border: 1px solid var(--xmas-border);
    border-radius: 8px;
}

.christmas-group-card h3 {
    margin: 0 0 1rem;
}

.christmas-group-card p {
    margin: 0.5rem 0;
}

.christmas-group-card p:last-child {
    margin-top: 1.25rem;
}

.christmas-group-card p:last-child a {
    display: inline-block;
    padding: 0.65rem 1rem;
    border: 1px solid var(--xmas-cream);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
}

.christmas-group-card p:last-child a:hover,
.christmas-group-card p:last-child a:focus-visible {
    background: var(--xmas-cream);
    color: var(--xmas-dark);
}


/* Group created */

.christmas-admin > p {
    font-family: "Metropolis", sans-serif;
}

.christmas-admin > p > a {
    display: inline-block;
    padding: 0.75rem 1.1rem;
    border: 2px solid var(--xmas-cream);
    border-radius: 4px;
    background: var(--xmas-cream);
    color: var(--xmas-dark);
    font-family: "Metropolis", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.christmas-admin > p > a:visited {
    color: var(--xmas-dark);
}

.christmas-admin > p > a:hover,
.christmas-admin > p > a:focus-visible {
    border-color: var(--xmas-red);
    background: var(--xmas-red);
    color: #fff;
}


/* Group view */

.christmas-group-details {
    max-width: 700px;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--xmas-card);
    border: 1px solid var(--xmas-border);
    border-left: 4px solid var(--xmas-red);
    border-radius: 8px;
}

.christmas-group-details p,
.christmas-group .christmas-dietary-item p {
    margin: 0.45rem 0;
}

#christmas-group-qr {
    width: fit-content;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
}

#christmas-group-qr img,
#christmas-group-qr canvas {
    display: block;
}

.christmas-group table {
    width: 100%;
    margin: 1rem 0 2rem;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.12);
}

.christmas-group th,
.christmas-group td {
    padding: 0.8rem;
    border: 1px solid var(--xmas-border);
    text-align: left;
    vertical-align: top;
}

.christmas-group th {
    background: rgba(0, 0, 0, 0.25);
    color: var(--xmas-cream);
    font-family: "Cinzel", Georgia, serif;
    font-weight: 700;
}

.christmas-group .christmas-dietary-item {
    max-width: 700px;
    margin: 1rem 0;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255, 0, 0, 0.35);
    border-radius: 8px;
}


/* Edit group */

.christmas-group-edit > form > p {
    margin: 0 0 1.25rem;
}

.christmas-group-edit > form > p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 800px) {
    .christmas-public .christmas-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        align-items: start;
    }

    .christmas-public .christmas-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .christmas-public .christmas-form .form-group,
    .christmas-public .christmas-form .form-actions {
        grid-column: span 2;
    }

    .christmas-public .christmas-form .form-group--half {
        grid-column: span 1;
    }
}

@media (max-width: 700px) {
    .christmas-admin,
    .christmas-group,
    .christmas-group-edit {
        padding-top: 2rem;
    }

    .christmas-groups {
        grid-template-columns: 1fr;
    }

    .christmas-admin > form,
    .christmas-group-edit > form {
        padding: 1.5rem;
    }

    .christmas-admin > form > button[type="submit"],
    .christmas-group-edit button[type="submit"] {
        width: 100%;
    }

    .christmas-group {
        overflow-x: hidden;
    }

    .christmas-group table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .christmas-group th,
    .christmas-group td {
        min-width: 130px;
    }
}

@media (max-width: 600px) {
    .christmas-public .christmas-wrap {
        width: min(92vw, 620px);
        padding: 1.5rem 0 3rem;
    }

    .christmas-public .christmas-card {
        padding: 1.2rem;
    }

    .christmas-public .christmas-display {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    .christmas-public .christmas-button,
    .christmas-public .christmas-submit-choices,
    .christmas-confirmation-actions .christmas-button,
    .christmas-allergy-modal .modal-footer .btn {
        width: 100%;
    }

    .christmas-public .christmas-menu-form fieldset {
        padding: 1rem;
    }

    .christmas-public .form-option {
        padding: 0.8rem 0;
    }

    .christmas-allergy-modal .modal-header {
        padding: 1.2rem 1.1rem 0;
    }

    .christmas-allergy-modal .modal-body {
        padding: 1rem 1.1rem;
    }

    .christmas-allergy-modal .modal-footer {
        padding: 0 1.1rem 1.2rem;
    }

    .christmas-admin-login {
        padding: 3rem 0;
    }

    .christmas-admin-login form {
        padding: 1.5rem;
    }
}