/* Contacts page (page-contact.php). html is 10px, so 1rem = 10px. */

.contacts-page {
    --contacts-radius: 8px;
    --contacts-soft: #f7f3f6;
    --contacts-band: #f6f6f6;
    --contacts-error: #b3261e;
    padding-bottom: 4rem;
    color: #333;
}

.contacts-icon {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
}
/* An icon picked in the page settings: shown as uploaded, fitted into the SVG's box. */
.contacts-icon--img {
    object-fit: contain;
}

.contacts-section-title {
    margin: 0 0 2rem;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.3;
    color: #000;
}

/* ── Intro ───────────────────────────────────────────── */

.contacts-intro {
    padding-bottom: 4rem;
}
.contacts-intro__title {
    margin: 0;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #000;
}
.contacts-intro__text {
    max-width: 72rem;
    margin: .6rem 0 0;
    font-size: 1.6rem;
    line-height: 1.6;
}

/* ── Contacts + form ─────────────────────────────────── */

/* Desktop: H1 + intro above the contacts on the left; the form spans both rows on the right, so
   its top is level with the H1 and it is on screen without scrolling. Narrower screens stack the
   three in source order. */
.contacts-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "intro form"
        "info  form";
    column-gap: 5rem;
    align-items: start;
}
.contacts-intro {
    grid-area: intro;
}
.contacts-info {
    grid-area: info;
}
.contacts-form-box {
    grid-area: form;
}

.contacts-info__group {
    margin-bottom: 2.6rem;
}
.contacts-info__label {
    margin: 0 0 .6rem;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #000;
}
.contacts-info__label::after {
    content: ":";
}
.contacts-info__value {
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
    overflow-wrap: anywhere;
}
.contacts-info__value:hover,
.contacts-info__value:focus {
    color: var(--svarga-accent);
}
.contacts-info__hours {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.6rem;
    line-height: 1.6;
}
.contacts-info__note {
    margin: .4rem 0 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #777;
}

/* Brand mark: phones only (see the phone block). */
.contacts-mark {
    display: none;
}

.contacts-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 3.2rem;
    padding-top: .4rem;
}
.contacts-messenger {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.6rem;
    color: #000;
}
.contacts-messenger .contacts-icon {
    color: #555;
}
.contacts-messenger__name {
    text-decoration: underline;
    text-underline-offset: .3rem;
}
.contacts-messenger:hover,
.contacts-messenger:focus,
.contacts-messenger:hover .contacts-icon,
.contacts-messenger:focus .contacts-icon {
    color: var(--svarga-accent);
}

/* ── Buttons ─────────────────────────────────────────── */

.contacts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    min-height: 4.8rem;
    padding: 1.2rem 2.8rem;
    border: 1px solid var(--svarga-accent);
    border-radius: var(--contacts-radius);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}
.contacts-btn--primary {
    background: var(--svarga-accent);
    color: #fff;
}
.contacts-btn--primary:hover,
.contacts-btn--primary:focus {
    background: #5c3a52;
    border-color: #5c3a52;
    color: #fff;
}
.contacts-btn--primary[disabled] {
    opacity: .6;
    cursor: progress;
}

/* The theme removes every outline (global.css), so keyboard focus is drawn here. */
.contacts-page a:focus-visible,
.contacts-page button:focus-visible {
    box-shadow: 0 0 0 3px rgba(115, 72, 102, .35);
}

/* ── Form ────────────────────────────────────────────── */

.contacts-form-box {
    position: relative;
    padding: 3.2rem;
    border-radius: var(--contacts-radius);
    background: var(--contacts-soft);
    scroll-margin-top: 12rem;
}
.contacts-form[hidden],
.contacts-form__done[hidden] {
    display: none;
}
.contacts-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.6rem;
}
.contacts-field {
    margin-bottom: 1.6rem;
}
.contacts-field__label {
    display: block;
    margin: 0 0 .6rem;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    color: #000;
}
.contacts-field__req {
    color: var(--svarga-accent);
}
.contacts-field__optional {
    font-weight: 400;
    color: #777;
}
.contacts-field__input {
    display: block;
    width: 100%;
    min-height: 4.8rem;
    margin: 0;
    padding: 1rem 1.4rem;
    border: 1px solid #d6cbd2;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #000;
    box-shadow: none;
}
.contacts-field__input::placeholder {
    color: #8a8a8a;
    opacity: 1;
}
.contacts-field__input:focus {
    border-color: var(--svarga-accent);
    box-shadow: 0 0 0 3px rgba(115, 72, 102, .18);
}
.contacts-field__select {
    padding-right: 4rem;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23734866' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1.4rem center;
    cursor: pointer;
}
.contacts-field__textarea {
    min-height: 14rem;
    resize: vertical;
}
.contacts-field.has-error .contacts-field__input {
    border-color: var(--contacts-error);
}
.contacts-field__error {
    margin: .6rem 0 0;
    font-size: 1.6rem;
    line-height: 1.4;
    color: var(--contacts-error);
}
.contacts-field__error:empty {
    display: none;
}

.contacts-field--check {
    margin-top: .4rem;
}
.contacts-consent {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.5;
    cursor: pointer;
}
.contacts-consent__input {
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    margin: .1rem 0 0;
    accent-color: var(--svarga-accent);
    cursor: pointer;
}
.contacts-consent__input:focus-visible {
    box-shadow: 0 0 0 3px rgba(115, 72, 102, .35);
}
.contacts-consent a {
    color: var(--svarga-accent);
    text-decoration: underline !important;
}

/* Off-screen rather than display:none: bots skip fields that are plainly hidden. */
.contacts-form__hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Turnstile's widget is 65px tall; the space is reserved so nothing jumps when it loads. */
.contacts-form__captcha {
    min-height: 65px;
    margin-bottom: 1.6rem;
}

.contacts-form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem 2rem;
    margin-top: .8rem;
}
.contacts-form__note {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #777;
}

.contacts-form__status {
    margin: 0 0 2rem;
    padding: 1.2rem 1.6rem;
    border-left: 3px solid var(--contacts-error);
    background: #fff;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--contacts-error);
}
.contacts-form__status:empty {
    display: none;
}

.contacts-form__done {
    padding: 2.4rem 0;
    text-align: center;
}
.contacts-form__done-icon {
    color: var(--svarga-accent);
}
.contacts-form__done-text {
    max-width: 48rem;
    margin: 1.4rem auto 2rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #000;
}
.contacts-form__again {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--svarga-accent);
    text-decoration: underline !important;
}

/* ── Email check ─────────────────────────────────────── */

/* After the first submit the script swaps the fields for the code step, inside the same form. */
.contacts-form.is-verifying > :not(.contacts-verify) {
    display: none;
}
/* The script pins the block to the height the fields had (min-height) while the code step and the
   confirmation replace them; this centres what is shown, so the block neither shrinks nor jumps. */
.contacts-form-box.is-locked {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contacts-verify[hidden] {
    display: none;
}
.contacts-verify__title {
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.3;
    color: #000;
}
.contacts-verify__text {
    margin: 0 0 2rem;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #000;
    overflow-wrap: anywhere;
}
.contacts-verify__hint {
    display: block;
    margin-top: .6rem;
    font-size: 1.6rem;
    color: #777;
}
/* text-indent offsets the letter-spacing after the last digit, which would push the code off centre. */
.contacts-field__input--code {
    max-width: 22rem;
    font-size: 2.4rem;
    letter-spacing: .5em;
    text-indent: .5em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.contacts-verify__info {
    margin: 1.6rem 0 0;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--svarga-accent);
}
.contacts-verify__info:empty {
    display: none;
}
.contacts-verify__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.4rem;
    margin: 1.6rem 0 0;
}
.contacts-verify__link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--svarga-accent);
    text-decoration: underline;
    cursor: pointer;
}
.contacts-verify__link[disabled] {
    color: #777;
    text-decoration: none;
    cursor: default;
}

/* ── Social ──────────────────────────────────────────── */

.contacts-social {
    padding: 8rem 0 7rem;
    text-align: center;
}
.contacts-social .contacts-section-title,
.contacts-links .contacts-section-title {
    margin-bottom: 2.6rem;
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
}
.contacts-social__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem 4.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.contacts-social__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    font-size: 1.6rem;
    color: #000;
}
.contacts-social__link .contacts-icon {
    width: 4rem;
    height: 4rem;
    color: var(--svarga-accent);
}
.contacts-social__link:hover,
.contacts-social__link:focus {
    color: var(--svarga-accent);
}

/* ── Useful links ────────────────────────────────────── */

.contacts-links {
    padding: 5rem 0 6rem;
}
/* Flex, not a 4-column grid: the columns share the row whether there are 3 or 4 of them (the
   reviews card shows only once a page is picked). */
.contacts-links__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.contacts-link {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}
.contacts-link__title {
    margin: 0 0 1rem;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--svarga-accent);
}
.contacts-link__text {
    margin: 0 0 2rem;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #333;
}
.contacts-link__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    max-width: 26rem;
    min-height: 4.4rem;
    margin-top: auto;
    padding: 1rem 1.6rem;
    border-radius: 2px;
    background: var(--svarga-accent);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    color: #fff;
}
.contacts-link__btn .contacts-icon {
    width: 1.6rem;
    height: 1.6rem;
    transition: transform .3s;
}
.contacts-link__btn:hover,
.contacts-link__btn:focus {
    background: #5c3a52;
    color: #fff;
}
.contacts-link__btn:hover .contacts-icon,
.contacts-link__btn:focus .contacts-icon {
    transform: translateX(.3rem);
}

/* ── Tablet ──────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .contacts-main__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "intro"
            "info"
            "form";
    }
    .contacts-form-box {
        margin-top: 4rem;
    }
    .contacts-link {
        flex-basis: calc(50% - 1.6rem);
    }
}

/* ── Phone ───────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .contacts-intro {
        padding-bottom: 3rem;
    }
    .contacts-intro__title {
        font-size: 2.6rem;
    }
    .contacts-intro__text {
        font-size: 1.6rem;
        line-height: 1.5;
    }
    .contacts-section-title {
        margin-bottom: 1.6rem;
        font-size: 2.1rem;
    }
    /* clip-path below only hides the mark's overhang; this keeps it out of the page width. */
    .contacts-page {
        overflow-x: clip;
    }
    /* The contacts on a full-width grey band. The mark rises a little above the band and hangs
       off its right edge, about 30% cut: clip-path cuts the right side only (overflow would cut
       the top too), with room above for the raised part. */
    .contacts-info {
        position: relative;
        margin: 0 -15px;
        padding: 2.8rem 15px .6rem;
        background: var(--contacts-band);
        clip-path: inset(-4rem 0 0 0);
    }
    .contacts-mark {
        position: absolute;
        top: -1.6rem;
        right: -3.4rem;
        display: block;
        width: 12rem;
        line-height: 0;
        pointer-events: none;
    }
    .contacts-mark--builtin {
        color: var(--svarga-accent);
        opacity: .45;
    }
    .contacts-mark__img,
    .contacts-mark__svg {
        display: block;
        width: 100%;
        height: auto;
    }
    .contacts-info__group {
        position: relative;
        z-index: 1;
        margin-bottom: 2.2rem;
    }
    .contacts-info__label {
        margin-bottom: .4rem;
        font-size: 1.6rem;
        color: var(--svarga-accent);
    }
    .contacts-info__value,
    .contacts-info__hours {
        font-size: 1.6rem;
        color: #000;
    }
    /* Phones: no box; the fields carry its tint instead (desktop keeps box + white fields).
       background-color only, so the select keeps its arrow image. Focus and error borders
       still show: those rules are more specific. */
    .contacts-form-box {
        margin-top: 3.2rem;
        padding: 0;
        border-radius: 0;
        background: none;
    }
    .contacts-field__input {
        border-color: transparent;
        background-color: var(--contacts-soft);
    }
    .contacts-form__status {
        background: #fdf2f1;
    }
    .contacts-form__row {
        grid-template-columns: minmax(0, 1fr);
    }
    .contacts-form__submit .contacts-btn {
        width: 100%;
    }
    .contacts-social {
        padding: 12rem 0 12rem;
    }
    .contacts-social__list {
        gap: 2rem 3.2rem;
    }
    .contacts-social__link .contacts-icon {
        width: 3.6rem;
        height: 3.6rem;
    }
    .contacts-links {
        padding: 0 0 4.4rem;
    }
}

@media (max-width: 575.98px) {
    .contacts-links__grid {
        gap: 2.8rem;
    }
    .contacts-link {
        flex-basis: 100%;
    }
    .contacts-link__text {
        margin-bottom: 1.4rem;
    }
    .contacts-link__btn {
        max-width: none;
    }
}