:root{
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

body{
    margin:0;
    font-family:'Montserrat', sans-serif;
    background:#111; /* ca să “iasă” cardul în evidență pe desktop */
}

/* Card centrat pe desktop, full pe mobil */
.invite-shell{
    min-height: 100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
}

.invite-card{
    width: min(420px, 100%);
    background:#fff;
    overflow:hidden;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Sus: imagine ~75% */
.hero{
    position:relative;
    height: 65svh;              /* “3 sferturi” din ecran, ca în exemplu */
    max-height: 560px;          /* să nu devină uriaș pe ecrane înalte */
    min-height: 420px;          /* să arate bine pe telefoane mici */
    overflow:hidden;
    background:#000;
}

.hero picture,
.hero img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

#mobileHeroImage {
    transition: opacity .45s ease;
}

.plan {
    position:relative;
    min-height: 420px;          /* să arate bine pe telefoane mici */
    overflow:hidden;
    background:#000;
}

.plan picture,
.plan img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.plan-image {
    width: 100%;
    height: auto;
}

/* Text sus pe imagine */
.hero-top{
    position:absolute;
    left:50%;
    top: calc(14px + var(--safe-top));
    transform: translateX(-50%);
    width: calc(100% - 64px);
    max-width: 235px;
    padding: 8px 12px;
    z-index:2;
    text-align:center;
    color:#fff;
    background: rgba(92, 92, 92, .26);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.names {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 2.1rem;      /* ajustează după gust */
    letter-spacing: 0.5px; /* foarte important pentru eleganță */
    line-height: 1.1;
}

.date{
    font-size:.55rem;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.95;
    margin-top:6px;
    text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* RSVP pe imagine, jos-centru */
.hero-rsvp{
    position:absolute;
    left:0; right:0;
    bottom: 18px;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.rsvp-btn{
    border-radius: 999px;
    padding: .55rem 1.25rem;
    border: 1px solid rgba(255,255,255,.75);
    background: rgba(0,0,0,.25);
    color:#fff;
    text-decoration:none;
    letter-spacing:1px;
    text-transform:uppercase;
    font-size:.5rem;
    backdrop-filter: blur(6px);
}

.rsvp-btn.secondary{
    background: rgba(255,255,255,.16);
}

/* Jos: zonă albă ~25% */
.info{
    padding: 10px 24px 34px;
    text-align:center;
    background:#fff;
}

.invite-title{
    font-family:'Playfair Display', serif;
    font-weight:600;
    letter-spacing:1px;
    font-size: 1rem;
    color:#6a5f56;
    margin: 2px 0 6px;
}

.invite-sub{
    font-size:.78rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#8b817a;
    margin-bottom: 10px;
}

.details{
    font-size:.8rem;
    color:#6b6b6b;
    line-height:1.7;
    margin:0;
}

.intro-details {
    margin-bottom: 15px;
}

.intro-quote-section {
    padding: 8px 0 20px;
}

.intro-quote {
    margin: 0;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    letter-spacing: .08em;
    color: #6f6259;
}

.invitation-section {
    display: none;
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 28px;
}

.invitation-image {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

.rsvp {
    width: 100%;
    margin-bottom: 34px;
}

.section-copy {
    margin-bottom: 15px;
    font-weight:400;
}

.section-copy2 {
    margin-bottom: 5px;
    font-weight:600;
}

/* Container intern pentru centrare */
.rsvp .rsvp-form {
    max-width: 520px;     /* lățime elegantă */
    margin: 0 auto;       /* centru */
}

.participant-section {
    padding: 18px 16px;
    margin-top: 4px;
    border: 1px solid #ece4de;
    border-radius: 18px;
    background: #faf7f4;
}

.participant-title {
    font-family:'Playfair Display', serif;
    font-size: 1rem;
    color:#5d5049;
    margin-bottom: 6px;
}

.participant-copy {
    color:#80756d;
    font-size:.84rem;
    line-height:1.6;
    margin-bottom: 16px;
}

.participant-actions {
    display:none;
    gap:12px;
    flex-wrap:wrap;
}

.participant-action-btn {
    border:1px solid #d6c6ba;
    background:#fffdfb;
    color:#6f6158;
    border-radius:999px;
    padding:10px 18px;
    font-size:.88rem;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.participant-action-btn:hover,
.participant-action-btn:focus {
    background:#f5ede7;
    border-color:#c7b29f;
    color:#4f443d;
}

.participant-empty {
    color:#8b817a;
    font-size:.85rem;
    margin-bottom: 16px;
}

.participant-groups {
    display:grid;
    gap:18px;
}

.participant-group {
    display:grid;
    gap:12px;
}

.participant-group-title {
    font-size:.78rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:#8b817a;
}

.participant-name-list {
    display:grid;
    gap:12px;
}

#adultNames,
#childNames {
    display:grid;
    gap:12px;
}

.participant-entry {
    display:flex;
    align-items:flex-end;
    gap:10px;
}

.participant-name-field {
    flex:1 1 auto;
}

.participant-name-field label {
    display:block;
    margin-bottom:6px;
    color:#5d5049;
    font-size:.88rem;
}

.participant-remove-btn {
    border:1px solid #e1d0c4;
    background:#fff;
    color:#8a6f61;
    border-radius:12px;
    padding:11px 14px;
    line-height:1;
    min-height:44px;
}

.participant-remove-btn:hover,
.participant-remove-btn:focus {
    background:#f8efea;
    border-color:#cfb4a5;
    color:#6d574c;
}

.plan-section {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    padding-top: 10px;
}

.countdown-section {
    position: relative;
    width: calc(100% + 48px);
    min-height: 340px;
    margin: 10px -24px 28px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(20, 14, 10, .58) 0%, rgba(20, 14, 10, .18) 42%, rgba(20, 14, 10, .06) 100%),
        url("assets/countdown.JPG") center center / cover no-repeat;
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

.countdown-panel {
    position: absolute;
    top: 11%;
    left: 7%;
    width: min(360px, 58%);
    padding: 0;
    text-align: left;
}

.countdown-title {
    font-family:'Playfair Display', serif;
    font-size: .98rem;
    line-height: 1.35;
    color:#f7f0ea;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0,0,0,.2);
}

.countdown-grid {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0;
    background: transparent;
}

.countdown-value {
    font-family:'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
    color:#ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.countdown-label {
    font-size: .54rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:rgba(255,255,255,.74);
}

.plan-image {
    width: 100%;
    height: auto;
    margin-top: 18px;
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* Puțin mai aerisit pe desktop */
@media (min-width: 992px) {
    .rsvp {
        padding-top: 28px;
        padding-bottom: 32px;
    }

    .rsvp .rsvp-form {
        max-width: 480px;   /* și mai “premium” */
    }

    .info {
        padding-left: 38px;
        padding-right: 38px;
    }

    .invitation-section {
        display: none;
    }

    .invitation-section {
        width: 75%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .plan-section {
        width: calc(100% + 76px);
        margin-left: -38px;
        margin-right: -38px;
    }

    .countdown-section {
        width: calc(100% + 76px);
        min-height: 400px;
        margin-left: -38px;
        margin-right: -38px;
    }

    .countdown-panel {
        width: 340px;
        top: 10%;
        left: 6%;
    }
}
/* Pe ecrane mari păstrează proporția “de telefon” */
@media (min-width: 992px){
    .hero{ height: 560px; }
}

@media (max-width: 575px) {
    .countdown-section {
        min-height: 300px;
        background-position: 56% center;
    }

    .countdown-panel {
        top: 8%;
        left: 5%;
        width: min(250px, 72%);
    }

    .countdown-title {
        font-size: .88rem;
    }

    .countdown-value {
        font-size: 1.14rem;
    }

    .countdown-label {
        font-size: .5rem;
    }

    .countdown-grid {
        gap: 8px;
    }

    .countdown-item {
        gap: 2px;
    }
}