:root {
    --blue: #123e66;
    --blue-2: #3f6f9f;
    --text: #31526d;
    --white-soft: rgba(255, 255, 255, .72);
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    min-height: 100%;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    background: #102f4e;
    color: var(--text);
    font-weight: 400
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    overflow: auto
}

.phone {
    position: relative;
    width: min(100vw, calc(100svh * 1152 / 2048), 512px);
    height: min(100svh, calc(100vw * 2048 / 1152), 910px);
    aspect-ratio: 1152/2048;
    overflow: hidden;
    background: #ddd;
    box-shadow: 0 0 30px rgba(0, 0, 0, .35)
}

.bg {
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-position: center;
    display: block;
    z-index: 0;
    user-select: none;
    pointer-events: none
}

.screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: none
}

.screen.active {
    display: block
}

.form {
    position: absolute;
    left: 6.8%;
    right: 6.8%;
    color: var(--text)
}

.info-form {
    top: 33.0%
}

.intro {
    text-align: center;
    font-size: clamp(13px, 2.8vw, 16px);
    line-height: 1.32;
    color: rgba(92, 102, 108, .72);
    margin: 0 0 7.2%;
    font-weight: 400
}

.field-row {
    display: grid;
    grid-template-columns:27% 1fr;
    gap: 3%;
    align-items: center;
    margin: 0 0 4.6%
}

.field-row label {
    font-weight: 700;
    font-size: clamp(11px, 2.35vw, 13.5px);
    color: #315c7c
}

.field-row input{
    height:clamp(38px,8.8vw,38px);
    border:0;
    border-radius:8px;
    background:linear-gradient(90deg,rgba(191,199,206,.74),rgba(172,192,209,.82));
    box-shadow:inset 0 2px 3px rgba(255,255,255,.35),0 4px 7px rgba(0,0,0,.18);
    text-align:left;
    color:#fff;
    font-family: 'Montserrat',Arial,Helvetica,sans-serif;
    font-size:clamp(13px,2.7vw,16px);
    font-weight:400;
    line-height:normal;
    padding:6px 12px 7px;
    outline:none;
    -webkit-appearance:none;
    appearance:none;
}

.field-row input.warm-input {
    background: linear-gradient(90deg, rgba(186, 176, 162, .78), rgba(202, 210, 217, .78))
}

.field-row input:focus {
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .45), 0 0 0 2px rgba(31, 83, 128, .55), 0 4px 7px rgba(0, 0, 0, .18)
}

.hint {
    margin: -3.4% 0 4.8% 30%;
    font-style: italic;
    color: #343434;
    font-size: clamp(9.5px, 1.95vw, 11.5px);
    line-height: 1.25
}

.primary-btn {
    position: relative;
    display: block;
    margin: 8.0% auto 0;
    width: 44%;
    height: clamp(34px, 7.7vw, 44px);
    border: 0;
    border-radius: 8px;
    background: #426b99;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    font-size: clamp(12px, 2.45vw, 14.5px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 3px 0 #0c3155, 0 6px 10px rgba(0, 0, 0, .25);
    cursor: pointer
}

.primary-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 1px 0 #0c3155, 0 3px 7px rgba(0, 0, 0, .25)
}

.attend-form {
    top: 34.8%
}

.invite-copy {
    font-size: clamp(11px, 2.35vw, 14px);
    line-height: 1.58;
    font-weight: 400
}

.invite-copy p {
    margin: 0 0 3.5%
}

.dot-name {
    display: inline-block;
    min-width: 30%;
    margin-left: 4px;
    border-bottom: 1px dotted #566b76;
    line-height: 1
}

.event-line {
    display: flex;
    align-items: center;
    gap: 3.4%;
    margin: 2.8% 0 5.5%;
    white-space: nowrap
}

.event-line strong {
    font-size: clamp(11px, 2.35vw, 14px);
    color: #274f72;
    font-weight: 800
}

.radio, .option {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(233, 238, 240, .72);
    font-size: clamp(11px, 2.35vw, 14px);
    font-weight: 400;
    cursor: pointer
}

.radio input, .option input {
    position: absolute;
    opacity: 0
}

.radio span, .option span {
    width: clamp(14px, 3.4vw, 19px);
    height: clamp(14px, 3.4vw, 19px);
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #2f628b;
    background: #e7eef2;
    box-shadow: 0 0 4px rgba(0, 0, 0, .25)
}

.radio input:checked + span, .option input:checked + span {
    background: radial-gradient(circle at center, #2c6089 0 35%, #e7eef2 38% 100%)
}

.transport-form {
    top: 33.7%;
    left: 7%;
    right: 6%
}

.transport-block {
    margin-bottom: 19%
}

.transport-head {
    display: flex;
    align-items: center;
    gap: 3.4%;
    white-space: nowrap
}

.transport-head h2 {
    font-size: clamp(12.5px, 2.7vw, 16px);
    line-height: 1.2;
    color: #2b5c82;
    margin: 0 auto 0 0;
    font-weight: 800
}

.option {
    display: flex;
    margin: 4% 0 0 1.5%;
    gap: 4.5%;
    color: #315d63;
    font-size: clamp(10.5px, 2.2vw, 13px)
}

.option span {
    flex: 0 0 auto
}

.return-block {
    margin-top: 3%
}

.transport-form .primary-btn {
    margin-top: 4%
}

.message-card {
    position: absolute;
    left: 3.7%;
    right: 3.7%;
    top: 36.8%;
    padding: 5.7% 4.3%;
    border-radius: 26px;
    background: rgba(222, 229, 231, .72);
    box-shadow: inset 0 1px 5px rgba(255, 255, 255, .55), 0 7px 13px rgba(0, 0, 0, .23);
    text-align: center;
    color: #48677d;
    font-size: clamp(10.5px, 2.2vw, 13px);
    line-height: 1.7;
    font-weight: 400
}

.message-card p {
    margin: 0 0 1.2%
}

.message-card strong {
    color: #1e5978
}

.yes-card {
    top: 36.2%
}

.no-card {
    top: 38.5%;
    padding-top: 7.5%;
    padding-bottom: 7.5%
}

@media (min-width: 700px) {
    body {
        padding: 20px
    }

    .phone {
        width: min(calc(100svh * 1152 / 2048), 512px);
        height: min(100svh, 910px)
    }
}

@media (max-width: 380px) {
    .event-line {
        gap: 2%
    }

    .radio {
        gap: 4px
    }

    .field-row {
        grid-template-columns:29% 1fr
    }

    .hint {
        margin-left: 32%
    }
}

.custom-alert {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8%;
    background: rgba(7, 32, 55, .25);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.custom-alert.show {
    opacity: 1;
    visibility: visible;
}

.custom-alert__box {
    width: min(88%, 360px);
    padding: 22px 20px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(223,235,245,.97));
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: 0 18px 42px rgba(4, 29, 52, .36), inset 0 1px 0 rgba(255,255,255,.9);
    text-align: center;
    transform: translateY(8px) scale(.96);
    transition: transform .2s ease;
}

.custom-alert.show .custom-alert__box {
    transform: translateY(0) scale(1);
}

.custom-alert__icon {
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #d9a448, #a66e22);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    box-shadow: 0 5px 12px rgba(112, 73, 20, .28);
}

.custom-alert__content h3 {
    margin: 0 0 8px;
    color: #17436a;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: clamp(16px, 3.4vw, 20px);
    font-weight: 800;
}

.custom-alert__content p {
    margin: 0;
    color: #31526d;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: clamp(13px, 2.8vw, 15px);
    line-height: 1.45;
    font-weight: 500;
}

.custom-alert__close {
    margin-top: 16px;
    min-width: 118px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #426b99;
    color: #fff;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 800;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.22), 0 3px 0 #0c3155, 0 6px 10px rgba(0,0,0,.18);
    cursor: pointer;
}

.custom-alert__close:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 1px 0 #0c3155, 0 3px 7px rgba(0,0,0,.18);
}