/* Кнопки и поля страниц «Расчёт смет» (calc/), «Стоимость ремонта» (estimate/) и «Дизайн-проект» (design/): скругления, медный перелив и блик
   при наведении, «нажатие» при клике. Подключается после встроенных стилей страниц — поэтому местами !important. */

/* ---------- Главные кнопки: «Перейти к оплате», «Далее», «Обсудить в чате», «Отправить» ---------- */
.calc form button[type=submit], .qe .btn.main, .dz button.main, .dz .pay2 {
    position: relative; overflow: hidden; isolation: isolate; border: 0; border-radius: 999px;
    color: #0b0c0e; background: linear-gradient(90deg, #E5BAA2, #C3917B, #8C5E4C, #C3917B, #E5BAA2); background-size: 220% 100%; background-position: 0 0;
    box-shadow: 0 6px 18px rgba(140, 94, 76, 0.22);
    transition: background-position .7s ease, transform .2s ease, box-shadow .3s ease, opacity .2s ease;
}
/* Блик, пробегающий по кнопке при наведении */
.calc form button[type=submit]::after, .qe .btn.main::after, .dz button.main::after, .dz .pay2::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transform: translateX(-130%); transition: transform .8s ease;
}
.calc form button[type=submit]:not(:disabled):hover, .qe .btn.main:not(:disabled):hover, .dz button.main:not(:disabled):hover, .dz .pay2:hover {
    background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(195, 145, 123, 0.38);
}
.calc form button[type=submit]:not(:disabled):hover::after, .qe .btn.main:not(:disabled):hover::after, .dz button.main:not(:disabled):hover::after, .dz .pay2:hover::after { transform: translateX(130%); }
.calc form button[type=submit]:not(:disabled):active, .qe .btn.main:not(:disabled):active, .dz button.main:not(:disabled):active, .dz .pay2:active {
    transform: translateY(0) scale(0.97); box-shadow: 0 0 0 6px rgba(229, 186, 162, 0.16), 0 4px 12px rgba(140, 94, 76, 0.25); transition-duration: .08s;
}
.calc form button[type=submit]:focus-visible, .qe .btn:focus-visible, .dz button.main:focus-visible, .dz .pay2:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(229, 186, 162, 0.45); }
.calc form button[type=submit]:disabled, .dz button.main:disabled { box-shadow: none; }
.qe .btn.main:disabled { box-shadow: none; background: #2a2c31; }

/* ---------- Второстепенные кнопки: «Назад», «Перезвоните мне», ссылки-кнопки ---------- */
.qe .btn:not(.main), .cross-btn {
    border-radius: 999px; border: 1px solid rgba(229, 186, 162, 0.55);
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.qe .btn:not(.main):not(:disabled):hover, .cross-btn:hover {
    background: rgba(229, 186, 162, 0.1); border-color: #E5BAA2; color: #fff !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.qe .btn:not(.main):not(:disabled):active, .cross-btn:active { transform: scale(0.97); background: rgba(229, 186, 162, 0.18); transition-duration: .08s; }
.cross-btn { padding: 11px 20px; }
/* Главная из ссылок-кнопок (медная заливка) */
.cross-btn.main {
    border-color: transparent; color: #0b0c0e !important; background: linear-gradient(90deg, #E5BAA2, #C3917B, #8C5E4C, #C3917B, #E5BAA2); background-size: 220% 100%;
    box-shadow: 0 6px 18px rgba(140, 94, 76, 0.22); transition: background-position .7s ease, transform .2s ease, box-shadow .3s ease;
}
.cross-btn.main:hover { color: #0b0c0e !important; background: linear-gradient(90deg, #E5BAA2, #C3917B, #8C5E4C, #C3917B, #E5BAA2); background-size: 220% 100%;
    background-position: 100% 0; box-shadow: 0 12px 30px rgba(195, 145, 123, 0.38); }

/* «Нет дизайн-проекта?» (calc): текст и две кнопки */
.calc .noproj { margin-top: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; }
.calc .noproj-text { flex: 1 1 380px; }
.calc .noproj-text span { color: #cacaca; }
.calc .noproj-text b { display: block; color: #fff; font-weight: 400; font-size: 19px; margin-bottom: 4px; }
.calc .noproj .cross-links { margin-top: 0; }
@media (max-width: 640px) { .calc .noproj .cross-links { width: 100%; } .calc .noproj .cross-btn { flex: 1 1 100%; text-align: center; } }

/* ---------- Варианты ответа ---------- */
.qe .chip {
    border-radius: 999px; padding: 9px 16px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.qe .chip:hover { transform: translateY(-1px); color: #fff; background: rgba(229, 186, 162, 0.06); }
.qe .chip:active { transform: scale(0.95); transition-duration: .06s; }
.qe .chip.on {
    color: #0b0c0e; border-color: transparent; background: linear-gradient(90deg, #E5BAA2, #C3917B);
    box-shadow: 0 4px 14px rgba(195, 145, 123, 0.3);
}
.qe .opt { border-radius: 14px; transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.qe .opt:hover { border-color: rgba(229, 186, 162, 0.6); background: rgba(229, 186, 162, 0.04); transform: translateY(-1px); }
.qe .opt:active { transform: scale(0.99); }
.qe .opt.on { box-shadow: inset 0 0 0 1px #E5BAA2, 0 6px 18px rgba(0, 0, 0, 0.25); }

/* ---------- Счётчики «− 1 +» ---------- */
.qe .stepper { border-radius: 999px; padding: 2px; }
.qe .stepper button { border-radius: 50%; transition: background .15s ease, transform .1s ease; }
.qe .stepper button:hover { background: rgba(229, 186, 162, 0.12); }
.qe .stepper button:active { transform: scale(0.88); background: rgba(229, 186, 162, 0.22); }
.calc .step { transition: background .15s ease, color .15s ease !important; }
.calc .step[data-step="-1"] { border-radius: 999px 0 0 999px; }
.calc .step[data-step="1"] { border-radius: 0 999px 999px 0; }
.calc .step:active { color: #fff !important; }

/* ---------- Карточки, поля, галочки, полоса шагов ---------- */
.calc .card, .qe .card, .qe .hint, .dz .card, .dz details.brief { border-radius: 16px; }
.calc input[type=text], .calc input[type=email], .calc input[type=tel], .calc textarea,
.qe input[type=text], .qe input[type=email], .qe input[type=tel], .qe select, .qe textarea,
.dz input[type=text], .dz input[type=email], .dz input[type=tel], .dz input[type=number], .dz textarea {
    border-radius: 10px; transition: border-color .2s ease, box-shadow .2s ease;
}
.calc .stepper input { border-radius: 0; }
.calc input:focus, .calc textarea:focus, .qe input:focus, .qe select:focus, .qe textarea:focus, .dz input:focus, .dz textarea:focus {
    outline: none; border-color: #E5BAA2; box-shadow: 0 0 0 3px rgba(229, 186, 162, 0.14);
}
.calc .check input, .qe .check input, .dz .check input { border-radius: 6px; }
.qe-steps button { border-radius: 3px; transition: background .3s ease, box-shadow .3s ease; }
.qe-steps button.cur { box-shadow: 0 0 10px rgba(229, 186, 162, 0.55); }
.qe-steps button:hover { background: rgba(229, 186, 162, 0.4); }

/* ---------- Подписи шагов опроса при наведении (estimate) ---------- */
.qe-steps button { position: relative; }
.qe-steps button::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none;
    padding: 6px 12px; border-radius: 999px; background: #1d2029; border: 1px solid rgba(229, 186, 162, 0.35); color: #E5BAA2;
    font-size: 12px; letter-spacing: 1px; opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 5;
}
.qe-steps button:first-child::after { left: 0; transform: translate(0, 4px); }
.qe-steps button:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
@media (hover: hover) {
    .qe-steps button:hover::after { opacity: 1; transform: translate(-50%, 0); }
    .qe-steps button:first-child:hover::after, .qe-steps button:last-child:hover::after { transform: translate(0, 0); }
}

/* ---------- Дизайнеры на выбор (design) ---------- */
.dz-designer { border-radius: 16px; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .25s ease !important; }
.dz-designer:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.dz-designer:active { transform: scale(0.99); }
.dz-designer:has(input:checked) { box-shadow: inset 0 0 0 1px #E5BAA2, 0 8px 22px rgba(0, 0, 0, 0.3); }

/* ---------- Примеры смет (calc) ---------- */
.ex-card { border-radius: 16px; }
.ex-card:active { transform: scale(0.97) !important; }

/* ---------- Загрузка файлов (calc): на широком экране — две карточки в одну строку ---------- */
.calc .drop, .dz .drop { border-radius: 16px; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease; }
.calc .drop svg, .dz .drop svg { flex: 0 0 auto; transition: transform .3s ease; }
.calc .drop:hover, .calc .drop.over, .dz .drop:hover, .dz .drop.over { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
.calc .drop:hover svg, .calc .drop.over svg, .dz .drop:hover svg, .dz .drop.over svg { transform: translateY(-3px); }
.calc .drop:active, .dz .drop:active { transform: scale(0.99); }
.calc .drop.has, .dz .drop.has { background: rgba(229, 186, 162, 0.07); animation: dropDone .5s ease; }
@keyframes dropDone { 0% { box-shadow: 0 0 0 0 rgba(229, 186, 162, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(229, 186, 162, 0); } }
.calc .uploads { display: grid; grid-template-columns: 1fr; gap: 0; }
.calc .uploads .up { display: flex; flex-direction: column; }
@media (min-width: 760px) {
    .calc .uploads { grid-template-columns: 1fr 1fr; gap: 0 18px; }
    .calc .uploads .up > label:first-child { min-height: 2.6em; display: flex !important; align-items: flex-end; }
    .calc .uploads .drop { flex: 1; flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding: 26px 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .calc form button[type=submit], .qe .btn, .cross-btn, .dz button.main, .dz .pay2, .dz .drop, .dz-designer, .qe-steps button::after, .qe .chip, .qe .opt, .qe .stepper button, .calc .drop, .calc .drop svg, .ex-card { transition: none !important; }
    .calc form button[type=submit]::after, .qe .btn.main::after, .dz button.main::after, .dz .pay2::after { display: none; }
    .calc .drop.has { animation: none; }
}