/* Сторінка «Контакти» (page-contacts.php), макет Contacts / Var A.
   Токени --ndc-* визначені в main.css (блок .ndc-custom-blocks), тут свої значення, бо сторінка не в ньому. */

.main-contacts {
    /* Скидаємо відступи й градієнт глобального .main. */
    display: block;
    min-height: 0;
    height: auto;
    padding: 0;
    background: #f6f6fa;
    animation: none;
    --ct-plum: #3a0944;
    --ct-maroon: #580b40;
    --ct-red: #a21038;
    --ct-crimson: #d41a45;
    --ct-ink: #1b1b2f;
    --ct-muted: #6a6a80;
    --ct-line: #e6e6ee;
}

/* ---- Card ---- */
.ct-top { padding: 165px 0 96px; }
.ct-card {
    display: grid;
    grid-template-columns: 0.92fr 1fr;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(27, 27, 47, 0.12);
    overflow: hidden;
}

/* ---- Brand panel ---- */
.ct-panel {
    padding: 44px 40px;
    color: #fff;
    background: linear-gradient(120deg, var(--ct-plum) 0%, var(--ct-maroon) 52%, var(--ct-red) 100%);
}
.ct-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.ct-title { margin: 14px 0 32px; font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.ct-list { list-style: none; margin: 0 -12px; padding: 0; display: grid; gap: 4px; }
.ct-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
}
.ct-row__icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.2s ease, color 0.2s ease;
}
.ct-row__icon svg { width: 22px; height: 22px; }
.ct-row__body { display: flex; flex-direction: column; gap: 2px; }
.ct-row__label { font-size: 13px; color: rgba(255, 255, 255, 0.72); }
.ct-row__value { font-size: 19px; font-weight: 700; line-height: 1.25; }
a.ct-row:hover, a.ct-row:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); }
a.ct-row:hover .ct-row__icon, a.ct-row:focus-visible .ct-row__icon { background: #fff; color: var(--ct-maroon); }

.ct-schedule {
    display: grid;
    gap: 6px;
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ct-schedule__row {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    column-gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
}
.ct-schedule__row.is-work { background: rgba(255, 255, 255, 0.12); }
.ct-schedule__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.ct-schedule__row.is-work .ct-schedule__dot { background: #22c08a; box-shadow: 0 0 0 4px rgba(34, 192, 138, 0.25); }
.ct-schedule.is-off .is-work .ct-schedule__dot { background: #c9a0b4; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }
.ct-schedule__days { font-weight: 600; }
.ct-schedule__time { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ct-schedule__time--muted { font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.ct-status { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.ct-status__dot { width: 10px; height: 10px; border-radius: 50%; background: #22c08a; box-shadow: 0 0 0 4px rgba(34, 192, 138, 0.25); }
.ct-status.is-off .ct-status__dot { background: #c9a0b4; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); }

.ct-social { margin-top: 30px; }
.ct-social__title { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 14px; }
.ct-social__row { display: flex; flex-wrap: wrap; gap: 10px; }
.ct-social__link {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    transition: background 0.2s ease, transform 0.15s ease;
}
.ct-social__link svg { width: 19px; height: 19px; }
.ct-social__link svg.ct-ico--telegramm { width: 26px; height: 26px; }
.ct-social__link:hover { background: #fff; border-color: #fff; color: var(--ct-maroon); transform: translateY(-2px); }

/* ---- Form ---- */
.ct-form { padding: 44px 40px; }
.ct-form__title { margin: 0; font-size: 28px; font-weight: 800; color: var(--ct-ink); }
.ct-form__sub { margin: 8px 0 24px; font-size: 15px; line-height: 1.5; color: var(--ct-muted); }
.ct-form__note { margin: 14px 0 0; font-size: 13px; color: var(--ct-muted); }

.ct-cf7 .ct-cf7__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ct-cf7 .ct-cf7__field { display: block; margin-bottom: 18px; }
.ct-cf7 .ct-cf7__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--ct-ink); }
.ct-cf7 .ct-cf7__label i { font-style: normal; color: var(--ct-crimson); }
.ct-cf7 .wpcf7-form-control-wrap { display: block; }
.ct-cf7 input[type="text"],
.ct-cf7 input[type="tel"],
.ct-cf7 input[type="email"],
.ct-cf7 textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid #dcdce6;
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    color: var(--ct-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ct-cf7 textarea { height: 150px; resize: vertical; }
.ct-cf7 input::placeholder, .ct-cf7 textarea::placeholder { color: #9a9ab0; }
.ct-cf7 input:focus, .ct-cf7 textarea:focus { outline: none; border-color: var(--ct-crimson); box-shadow: 0 0 0 4px rgba(212, 26, 69, 0.12); }
.ct-cf7 input.wpcf7-not-valid,
.ct-cf7 textarea.wpcf7-not-valid {
    border-color: #d92b2b;
    background: #fff4f4;
    box-shadow: 0 0 0 3px rgba(217, 43, 43, 0.2);
}
.ct-cf7 input.wpcf7-not-valid:focus,
.ct-cf7 textarea.wpcf7-not-valid:focus { border-color: #d92b2b; box-shadow: 0 0 0 4px rgba(217, 43, 43, 0.28); }
.ct-cf7 .wpcf7-not-valid-tip { display: none; } /* обов'язкові поля лише підсвічуємо, без тексту */
/* Згода: підсвічуємо чекбокс і рядок тексту, а не весь блок-обгортку CF7. */
.ct-cf7 .wpcf7-acceptance.wpcf7-not-valid { border: 0; background: none; box-shadow: none; }
.ct-cf7 .ct-cf7__consent input[type="checkbox"][aria-invalid="true"] { outline: 2px solid #d92b2b; outline-offset: 2px; border-radius: 3px; animation: ct-shake 0.35s ease; }
.ct-cf7 .ct-cf7__consent:has([aria-invalid="true"]) { color: #d92b2b; }
.ct-cf7 .ct-cf7__consent:has([aria-invalid="true"]) a { color: #d92b2b; }
@keyframes ct-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ct-cf7.invalid .wpcf7-response-output { display: none; } /* без блоку «Перевірте виділені поля» */
.ct-cf7 .ct-cf7__consent { margin: 4px 0 18px; font-size: 13px; line-height: 1.5; color: var(--ct-muted); }
.ct-cf7 .ct-cf7__consent .wpcf7-list-item { margin: 0; }
.ct-cf7 .ct-cf7__consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.ct-cf7 .ct-cf7__consent input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 18px; accent-color: var(--ct-crimson); }
.ct-cf7 .ct-cf7__consent a { color: var(--ct-crimson); text-decoration: underline; }
.ct-cf7 .ct-cf7__submit-wrap { position: relative; display: inline-block; }
.ct-cf7 .wpcf7-spinner { display: none; } /* сайтовий лоадер на кнопці замість стандартного спінера CF7 */
.ct-cf7 .ct-cf7__submit-wrap::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 3-9.5 18-2.5-8-8-2.5z'/%3E%3Cpath d='m21 3-12 10'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 3-9.5 18-2.5-8-8-2.5z'/%3E%3Cpath d='m21 3-12 10'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    z-index: 2; /* над кнопкою при hover (transform створює свій шар) */
    transition: opacity 0.15s ease;
}
.ct-cf7 .ct-cf7__submit-wrap.btn-loading::before { opacity: 0; }
.ct-cf7 .ct-cf7__submit-wrap.btn-loading input.ct-cf7__submit { background: var(--ct-crimson); transform: none; }
.ct-cf7 input.ct-cf7__submit {
    padding: 11px 24px 11px 46px;
    border: 0;
    border-radius: 999px;
    background: var(--ct-crimson);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 26px -8px rgba(212, 26, 69, 0.6);
    transition: background 0.2s ease, transform 0.15s ease;
}
.ct-cf7 input.ct-cf7__submit:hover { background: #b01438; transform: translateY(-1px); }
.ct-cf7 .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 12px 16px;
    border: 1px solid #e0e0ea;
    border-radius: 12px;
    background: #f6f6fa;
    color: var(--ct-ink); /* глобальні стилі форм дають білий текст (під темну модалку), тут світлий фон */
    font-size: 14px;
    line-height: 1.5;
}
.ct-cf7.sent .wpcf7-response-output { border-color: #b9e4d3; background: #effaf5; color: #136a49; }
.ct-cf7.failed .wpcf7-response-output,
.ct-cf7.aborted .wpcf7-response-output,
.ct-cf7.spam .wpcf7-response-output,
.ct-cf7.unaccepted .wpcf7-response-output { border-color: #f2b8bf; background: #fff4f4; color: #b3163b; }

/* ---- FAQ ---- */
.ct-faq { padding: 88px 0 96px; background: #f6f6fa; border-top: 1px solid var(--ct-line); }
.ct-faq__head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.ct-faq__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ct-crimson); margin-bottom: 14px; }
.ct-faq__title { margin: 0; font-size: 38px; font-weight: 800; line-height: 1.15; color: var(--ct-ink); }
.ct-faq__sub { margin: 16px 0 0; font-size: 17px; color: var(--ct-muted); }
.ct-faq__list { max-width: 800px; margin: 0 auto; display: grid; gap: 14px; }
.ct-faq__item {
    border: 1px solid var(--ct-line);
    border-radius: 16px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}
.ct-faq__item[open] { box-shadow: 0 12px 34px rgba(27, 27, 47, 0.08); }
.ct-faq__item summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
}
.ct-faq__item summary::-webkit-details-marker { display: none; }
.ct-faq__icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: rgba(212, 26, 69, 0.1); color: var(--ct-crimson); }
.ct-faq__icon svg { width: 19px; height: 19px; }
.ct-faq__q { flex: 1; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ct-ink); }
.ct-faq__chev { color: #8a8a99; transition: transform 0.2s ease; }
.ct-faq__chev svg { width: 20px; height: 20px; display: block; }
.ct-faq__item[open] .ct-faq__chev { transform: rotate(180deg); color: var(--ct-crimson); }
.ct-faq__a { margin: 0; padding: 0 22px 22px 76px; font-size: 15px; line-height: 1.65; color: #55556a; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
    .ct-card { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .ct-top { padding: 120px 0 56px; }
    .ct-panel, .ct-form { padding: 30px 22px; }
    .ct-title { font-size: 30px; }
    .ct-row__value { font-size: 17px; }
    .ct-cf7 .ct-cf7__row { grid-template-columns: 1fr; gap: 0; }
    .ct-faq { padding: 60px 0 64px; }
    .ct-faq__title { font-size: 28px; }
    .ct-faq__a { padding-left: 22px; }
}

/* ---- Екран «заявку отримано» замість форми ---- */
.ct-form { position: relative; }
.ct-thanks { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; }
.ct-form.is-sent .ct-form__main { display: none; }
.ct-form.is-sent .ct-thanks { display: flex; animation: ct-thanks-in 0.5s ease both; }
@keyframes ct-thanks-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ct-thanks__title { margin: 0 0 12px; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ct-ink); }
.ct-thanks__text { margin: 0 0 28px; max-width: 360px; font-size: 15px; line-height: 1.55; color: var(--ct-muted); }
.ct-thanks .senk-modal__img { margin-bottom: 28px; }
.ct-thanks__msgs-title { font-size: 13px; color: var(--ct-muted); margin-bottom: 12px; }
.ct-thanks__msgs { display: flex; gap: 10px; justify-content: center; }
.ct-thanks__msgs a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #e3e3ec;
    color: var(--ct-crimson);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ct-thanks__msgs a svg { width: 19px; height: 19px; }
.ct-thanks__msgs a svg.ct-ico--telegramm { width: 26px; height: 26px; }
.ct-thanks__msgs a:hover { background: var(--ct-crimson); border-color: var(--ct-crimson); color: #fff; }
.ct-thanks__again {
    margin-top: 26px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ct-crimson);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}