.appointment-section {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: clamp(26px, 5vw, 72px);
    margin: clamp(32px, 6vw, 90px) auto;
    padding: clamp(24px, 4.8vw, 68px);
    border: 1px solid #ffffffdc;
    border-radius: 40px 40px 64px 40px;
    background:
        radial-gradient(ellipse at 6% 4%, #fff 0, #ffffff00 52%),
        radial-gradient(ellipse at 87% 106%, #9bcbe9a0 0, #b9d8f500 62%),
        linear-gradient(132deg, #e7f2fc, #c9e0f1 64%, #ecf7ff);
    box-shadow: 0 18px 54px #244b6a18, inset 0 1px 1px #fff;
    color: #103b66;
    scroll-margin-top: 24px;
}

.appointment-copy h2 {
    max-width: 10ch;
    margin: 10px 0 16px;
    font-size: clamp(35px, 5vw, 65px);
    line-height: 1.02;
    letter-spacing: -.048em;
}
.appointment-copy > p:last-child {
    max-width: 30ch;
    margin: 0;
    color: #365c79;
    font-size: 16px;
    line-height: 1.65;
}

.appointment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    padding: clamp(19px, 3vw, 34px);
    border: 1px solid #ffffffeb;
    border-radius: 28px;
    background: linear-gradient(147deg, #ffffffd6, #f5fbffa1 62%, #ffffffc7);
    box-shadow: 0 18px 40px #2353731d, inset 0 1px 0 #fff;
    backdrop-filter: blur(20px) saturate(135%);
}

.appointment-field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.appointment-wide { grid-column: 1 / -1; }
.appointment-field label { color: #123e63; font-size: 14px; font-weight: 650; }
.appointment-field label small { color: #44657c; font-weight: 400; }

.appointment-field :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #729aba66;
    border-radius: 13px;
    background-color: #ffffffb5;
    box-shadow: inset 0 1px 2px #1647730b;
    color: #143f65;
    font: inherit;
    font-size: 16px;
}
.appointment-field :is(input, select, textarea):focus-visible,
.mobile-contact a:focus-visible,
.appointment-submit button:focus-visible {
    outline: 2px solid #16649a;
    outline-offset: 3px;
}
.appointment-field input::placeholder { color: #546f85; }
.appointment-field textarea { resize: vertical; }
.appointment-field select {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, #255a81 50%), linear-gradient(135deg, #255a81 50%, transparent 50%);
    background-position: right 19px center, right 14px center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

@supports (appearance: base-select) and selector(::picker(select)) {
    .appointment-field select,
    .appointment-field select::picker(select) { appearance: base-select; }

    .appointment-field select {
        align-items: center;
        gap: 8px;
        padding-right: 13px;
        background-image: none;
    }
    .appointment-field select::picker-icon { color: #255a81; }
    .appointment-field select::picker(select) {
        box-sizing: border-box;
        min-width: anchor-size(width);
        max-height: min(360px, 55dvh);
        margin: 7px 0;
        padding: 6px;
        border: 1px solid #ffffffeb;
        border-radius: 16px;
        background: linear-gradient(150deg, #ffffffef, #e8f4fdf2);
        box-shadow: 0 14px 40px #163f6733, inset 0 1px 0 #fff;
        backdrop-filter: blur(24px) saturate(140%);
        color: #143f65;
    }
    .appointment-field option {
        min-height: 42px;
        gap: 8px;
        padding: 9px 11px;
        border-radius: 10px;
        white-space: normal;
    }
    .appointment-field option:disabled { display: none; }
    .appointment-field option:checked { background: #d9ebf8; }
    .appointment-field option:is(:hover, :focus-visible) { background: #cde4f5; }
}

.appointment-phone {
    display: flex;
    min-width: 0;
    border: 1px solid #729aba66;
    border-radius: 13px;
    background: #ffffffb5;
}
.appointment-phone:focus-within { outline: 2px solid #16649a; outline-offset: 3px; }
.appointment-phone input {
    min-height: 46px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    box-shadow: none;
}
.appointment-phone input:focus-visible { outline: 0; }
.appointment-prefix {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-right: 1px solid #729aba55;
    color: #143f65;
    font-size: 14px;
    white-space: nowrap;
}
.appointment-flag {
    width: 21px;
    height: 14px;
    background: url("flag-tr.svg") center / contain no-repeat;
    border-radius: 2px;
}

.appointment-submit .button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border: 1px solid #ffffff45;
    border-radius: 13px;
    background: linear-gradient(120deg, #123e68, #17618e);
    box-shadow: 0 6px 18px #174b773b, inset 0 1px 0 #ffffff36;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}
.appointment-submit .button:hover { background: linear-gradient(120deg, #123e68, #2175a3); }
.appointment-submit .button:disabled { opacity: .6; cursor: default; }
.appointment-status { margin: 8px 0 0; color: #365c79; font-size: 13px; text-align: center; }
.appointment-status:empty { margin: 0; }
.appointment-status.is-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 14px;
    padding: 14px 12px;
    border: 1px solid #77bca4;
    border-radius: 15px;
    background: linear-gradient(130deg, #f7fffc, #d9f3e8);
    box-shadow: 0 8px 22px #17674c20, inset 0 1px 0 #fff;
    color: #155440;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    animation: appointment-confirmation-in 360ms cubic-bezier(.2, .75, .25, 1) both;
}
.appointment-status.is-success::before {
    content: "✓" / "";
    display: grid;
    flex: 0 0 30px;
    place-items: center;
    height: 30px;
    border-radius: 50%;
    background: #17674c;
    color: #fff;
    font-size: 17px;
    animation: appointment-check-in 430ms 110ms cubic-bezier(.2, .75, .25, 1.35) both;
}
@keyframes appointment-confirmation-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes appointment-check-in {
    from { opacity: 0; transform: scale(.65); }
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .appointment-status.is-success,
    .appointment-status.is-success::before { animation: none; }
}
.mobile-contact { display: none; }

@media (max-width: 950px) {
    .appointment-section { grid-template-columns: 1fr; gap: 24px; }
    .appointment-copy h2, .appointment-copy > p:last-child { max-width: none; }
}

@media (max-width: 800px) {
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .mobile-contact {
        position: fixed;
        z-index: 30;
        inset: auto 12px calc(8px + env(safe-area-inset-bottom, 0px));
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 7px;
        border: 1px solid #fff;
        border-radius: 21px;
        background: linear-gradient(135deg, #f8fcffee, #e2f2fbdc);
        box-shadow: 0 8px 30px #103b6637, inset 0 1px 0 #fff;
        backdrop-filter: blur(22px) saturate(150%);
    }
    .mobile-contact > * {
        display: grid;
        place-items: center;
        min-height: 46px;
        padding: 6px;
        border-radius: 14px;
        color: #fff;
        font-size: 14px;
        font-weight: 650;
        text-align: center;
        box-shadow: inset 0 1px 0 #ffffff66;
    }
    .mobile-whatsapp { background: linear-gradient(130deg, #16634a, #19815d); }
    .mobile-whatsapp[aria-disabled="true"] { background: linear-gradient(130deg, #f5fcf8, #d8efe5); color: #235d49; }
    .mobile-appointment { background: linear-gradient(130deg, #123e68, #17618e); }
    .appointment-field :is(input, select, textarea) { scroll-margin-bottom: 94px; }
}

@media (max-width: 540px) {
    .appointment-section { padding: 20px 14px 14px; border-radius: 26px 26px 40px 26px; }
    .appointment-copy { padding-inline: 6px; }
    .appointment-form { grid-template-columns: 1fr; padding: 16px; border-radius: 21px; }
}