/* === Dato-bånd: 2 korte linjer på hver side (som referencen) =============== */
/* Slå gamle midterlinjer fra hvis de findes */
.edge-label.left::after,
.edge-label.right::before { display: none !important; }
.date-core::before { display: none !important; }

/* Længde og afstand til tekst */
:root{
    --date-rule-len: clamp(150px, 30vw, 300px);
    --date-rule-gap: .75rem;
    /* RSVP accent color variants */
    --accent-blush-hover: rgba(215, 162, 154, 0.08);
    --accent-blush-selected: rgba(215, 162, 154, 0.15);
    --accent-blush-border: rgba(215, 162, 154, 0.3);
}

.invite-main{
    margin-bottom: 0.4em;
}


/* Label-tekst som anker for stregerne */
.edge-label .label{
    position: relative;
    display: inline-block;
    padding: .55rem 5px;                  /* luft til stregerne */
    font-variant-caps: all-small-caps;
    letter-spacing: .3em;
    z-index: 1;
}

/* De to korte streger */
.edge-label .label::before,
.edge-label .label::after{
    content:"";
    position:absolute;
    height:1px;
    width: var(--date-rule-len);
    background: rgba(0,0,0,.28);
    pointer-events:none;
}

/* Placering – én oppe, én nede */
.edge-label .label::before{ top:0;    transform: translateY(-50%); }
.edge-label .label::after { bottom:0; transform: translateY( 50%); }

/* Venstre side: stregerne ligger til venstre for teksten */
.edge-label.left .label::before,
.edge-label.left .label::after{
    right: calc(10% + var(--date-rule-gap));
}

/* Højre side: stregerne ligger til højre for tiden */
.edge-label.right .label::before,
.edge-label.right .label::after{
    left: calc(10% + var(--date-rule-gap));
}

/* --- RSVP table look to match invite-sheet --- */
/* (Base styles - overridden by later rules for transparent look) */
.rsvp-table thead th {
    background: var(--accent-blush);
    border-bottom: 1px solid var(--accent-blush-ink);
    font-weight: 700;
    letter-spacing: .02em;
    vertical-align: middle;
}

.rsvp-name { font-weight: 600; }

/* Make dietary input visually consistent */
.rsvp-dietary {
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    border-radius: .6rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.02);
}

/* --- Mobile layout: rows become "cards" --- */
@media (max-width: 640px) {
    .rsvp-table thead { display: none; }

    .rsvp-table, .rsvp-table tbody, .rsvp-table tr, .rsvp-table td {
        display: block;
        width: 100%;
    }

    /* Show column labels above each cell */
    .rsvp-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .76rem;
        letter-spacing: .08em;
        color: var(--ink-strong);
        margin-bottom: .25rem;
        text-transform: uppercase;
    }
}


/* Countdown footer base (always visible, fixed) */
.invite-countdown{
    position: fixed;
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom);
    width: 100vw; min-height: var(--countdown-h);
    z-index: 999;
    pointer-events: none;

    display:flex; justify-content:center; gap: clamp(18px, 6vw, 48px);
    padding: .6rem clamp(10px, 4vw, 24px) calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(0,0,0,.08);
}
.invite-countdown *{ pointer-events:none; }

.invite-countdown .cd-box{ text-align:center; min-width:74px; }
.invite-countdown .num{
    font-family:"Playfair Display", serif;
    font-size: clamp(20px, 6vw, 36px);
    line-height:1.05;
}
.invite-countdown .lbl{ letter-spacing:.12em; font-size:.8rem; }

.invite-sheet .navbar { overflow: visible; }

/* Body copy */
.invite-body{ text-align:center; }
.invite-body .greeting{
    font-family:"Playfair Display", serif;
    font-size: clamp(18px, 2.6vw, 24px);
    margin: .6rem 0 .8rem;
}
.invite-body p{ font-family:"Lora", serif; font-size: 1.02rem; line-height:1.6; }
.invite-body .subtle{ opacity:.85; }

.rsvp-q{
    margin: 1.2rem 0 .7rem; font-size: 1.2rem;
    font-family: "Lora", serif; font-weight:600;
}
.invite-btn{
    padding:.65rem 1.1rem; border-radius: .8rem;
    border-width:2px; background:#fff;
    border-color: var(--accent-blush);
    color: var(--accent-blush-ink);
    box-shadow: 0 0 0 3px rgba(231,195,189,.18);
}
.invite-btn:hover{
    background: #fff0ef;
    border-color: #d7a39b;
}

/* SU + closing */
.su{ margin: 1.2rem 0 .2rem; font-family:"Lora", serif; font-style:italic; color:#3c3c3c; text-transform: uppercase; }
.closing{ font-family:"Lora", serif; font-style:italic; margin:0; color:#3c3c3c; font-size: .92rem;}

/* Date band */
.invite-dategrid{
    display: grid; grid-template-columns: 1fr auto 1fr;
    justify-content: center;
    gap: clamp(10px, 3vw, 28px);
    margin: 1.2rem 0 1.5rem;
}

.edge-label{ position:relative; padding:.35rem 0; }
.edge-label.left{ padding-right: 1rem; text-align:left; }
.edge-label.right{ padding-left:  1rem; text-align:right; }
.edge-label .label{
    font-family: "Lora", serif;
    font-variant-caps: all-small-caps;
    letter-spacing:.18em;
    font-size: .92rem;
    color:#3f3f3f;
}

.date-core{ text-align:center; }
.day-number{
    font-family: "Playfair Display", serif;
    font-weight:600;
    font-size: clamp(42px, 10vw, 68px);
    line-height:1; letter-spacing:.01em; position:relative;
}
/* thin underline below the big day number */
.day-number::after{
    content:""; display:block; width:56px; max-width:38vw; height:1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.30), transparent);
    margin:.35rem auto 0;
    opacity:.85;
}
.month-year{
    font-family: "Lora", serif;
    font-size: .95rem; letter-spacing:.22em;
    margin-top:.15rem; color:#5a5a5a;
}

/* Dagens Program – to kolonner med midterstreg */
.program-board{
    --rule: rgba(0,0,0,.28);
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 36px);
    position: relative;
    padding: clamp(8px, 1.5vw, 12px) 0;
}
.program-board::before{
    content:"";
    position:absolute;
    inset: 0 auto 0 50%;
    width:1px;
    transform: translateX(-.5px);
    background: var(--rule);
    opacity:.7;
}

/* Hvert punkt */
.program-item{
    text-align: center;
    display: grid;
    grid-template-rows: auto auto;
    align-items: start;
    gap: .35rem;
    padding: .25rem 0 .75rem;
}
.program-item .meta{ line-height:1.1; }
.program-time{
    font-family:"Playfair Display", serif;
    font-weight:600;
    font-size: clamp(18px, 3.2vw, 22px);
    letter-spacing:.08em;
    position:relative;
}
.program-time::after{
    content:"";
    display:block;
    width: clamp(68px, 14vw, 100px);
    height:1px;
    margin:.3rem auto .5rem;
    background: var(--rule);
}
.program-label{
    font-family:"Lora", serif;
    font-variant-caps: all-small-caps;
    letter-spacing:.22em;
    font-size: .9rem;
    color:#444;
}

.program-item .icon{
    display:flex; 
    justify-content:center;
    min-height: 60px;
    margin-top: -.5rem;
}
.program-item .icon svg{
    width: clamp(44px, 9vw, 70px);
    height: auto;
    opacity:.65;
}

/* Placering i venstre/højre kolonne (kun for tydelighed) */
.program-item[data-col="left"]{ grid-column: 1; }
.program-item[data-col="right"]{ grid-column: 2; }

/* Note under boardet */
.program-note{
    text-align:center;
    margin-top: .8rem;
    opacity:.75;
    font-size:.95rem;
}

/* Mobil: 1 kolonne, ingen midterstreg */
@media (max-width: 640px){
    .program-board{
        grid-template-columns: 1fr;
    }
    .program-board::before{ display:none; }
    .program-item{ padding-bottom: .5rem; }
}


/* Sørg for at pynt ikke skaber scroll */
.invite-sheet{ position:relative; overflow: clip; }      /* du har allerede overflow:hidden – det er fint */
.program-board{ position:relative; }

/* Blomster: klik-gennemsigtige og inde i kortet */
.program-flower{
    position:absolute; z-index:0; pointer-events:none; user-select:none;
    width: clamp(90px, 22vw, 160px); height:auto;
    opacity:.92;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
    mix-blend-mode: multiply; /* giver papir-agtig indblanding */
}

/* Placering / let rotation for liv */
.flower-top-right{ top:-6px; right:-6px; transform: rotate(2deg); }
.flower-bottom-left{ bottom:-6px; left:-6px; transform: rotate(-2deg); }

/* Mobil: lidt mindre pynt, så det ikke “fylder” for meget */
@media (max-width:640px){
    .program-flower{ width: clamp(70px, 28vw, 120px); opacity:.85; }
    .flower-top-right{ top:-4px; right:-4px; }
    .flower-bottom-left{ bottom:-4px; left:-4px; }
}

/* Klip pynt inden i kortet */
.invite-sheet{ position:relative; overflow: clip; }
@supports not (overflow: clip){ .invite-sheet{ overflow:hidden; } }

.program-board{ position:relative; z-index:1; }     /* indhold over pynten */

.program-flower{
    position:absolute; pointer-events:none; user-select:none; z-index:0;
    width: clamp(120px, 28vw, 200px); height:auto;
    opacity:.95;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
    mix-blend-mode: multiply;          /* papiret får farverne til at smelte ind */
}

/* placeringer */
.flower-top-right{ top:-6px; right:-6px; transform: rotate(2deg); }
.flower-bottom-left{ bottom:-6px; left:-6px; transform: rotate(-2deg); }

/* mindre pynt på mobil */
@media (max-width:640px){
    .program-flower{ width: clamp(90px, 32vw, 140px); opacity:.88; }
    .flower-top-right{ top:-4px; right:-4px; }
    .flower-bottom-left{ bottom:-4px; left:-4px; }
}


/* === RSVP Form Styles === */

/* Make inner RSVP surface transparent so outer card is visible */
.rsvp-table {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible;
    margin-bottom: 1rem;
}

/* Slightly reduce cell padding for compact look */
.rsvp-table th,
.rsvp-table td {
    padding: .55rem .6rem;
    background: transparent;
    border: none;
}

/* RSVP Options container - remove excess margin/padding */
.rsvp-options {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.rsvp-options .form-check,
.rsvp-options .form-check-inline {
    margin: 0 !important;
    padding: 0 !important;
}

.rsvp-options .form-check-input,
.rsvp-options .form-check-label {
    margin: 0 !important;
    padding: 0 !important;
}

/* Icon radio styles - clickable labels with SVG icons */
.icon-radio {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    border-radius: .6rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    color: var(--ink-strong, #2A2A2A);
    border: 1px solid transparent;
}

.icon-radio:hover {
    background: var(--accent-blush-hover);
}

.icon-radio svg {
    flex-shrink: 0;
}

.icon-radio .label-text {
    font-size: .9rem;
    font-weight: 500;
}

/* Checked state for icon radio using adjacent sibling selector */
.rsvp-radio:checked + .icon-radio {
    background: var(--accent-blush-selected);
    color: var(--accent-blush-ink, #7b4e49);
    border-color: var(--accent-blush-border);
}

.rsvp-radio:checked + .icon-radio svg {
    stroke: var(--accent-blush-ink, #7b4e49);
}

/* Plus-one row layout */
.rsvp-plusone-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Plus-one input/button layout tweaks */
#rsvpPartial .rsvp-plusone-row .form-control,
#rsvpPartial .rsvp-options .form-control {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: .6rem;
    padding: .38rem .55rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.02);
    color: #222;
    min-width: 0; /* allow flex shrink on small screens */
}

#rsvpPartial .rsvp-plusone-row .form-control {
    flex: 1 1 auto;
    min-width: 120px;
}

/* Divider styling */
.rsvp-divider {
    padding: 0 !important;
}

.rsvp-divider .rsvp-hr {
    height: 1px;
    /* thin fade so it never feels harsh */
    background: linear-gradient(90deg, transparent, rgba(191,64,64,0.28), transparent);
    width: calc(100% - 2rem);
    margin: .5rem auto;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .icon-radio {
        padding: .3rem .5rem;
    }
    
    .icon-radio .label-text {
        font-size: .85rem;
    }
    
    .rsvp-plusone-row {
        flex-wrap: wrap;
        gap: .5rem;
    }
    
    .rsvp-plusone-row .form-control {
        flex: 1 0 100%;
    }
    
    .rsvp-plusone-row .btn {
        margin-left: auto;
    }
}