/* css/formy.css - настоящие формы Contact Form 7 в виде форм макета (.frm, .f, .agree, .stars из shell.css). Подключается на всех
   страницах (форма заявки есть в шапке). Только вид. Шаблоны форм на стенде уже в нашей разметке (p.f, p.agree, fieldset.stars,
   кнопка [submit class:btn class:ink class:solid]); CF7 добавляет своё: div.wpcf7 вокруг формы, span.wpcf7-form-control-wrap вокруг
   каждого поля, span.wpcf7-list-item вокруг галочки и кружков, input.wpcf7-submit вместо button, подсказки ошибок .wpcf7-not-valid-tip,
   итог .wpcf7-response-output, вертушку .wpcf7-spinner. Класса .frm на форме нет - правила ниже повторяют .frm для form.wpcf7-form,
   так что с html_class="frm" и без него вид один. Штатный styles.css CF7 остаётся: его правила перекрыты теми же селекторами. */

/* ---------- форма целиком: как .frm (лист бумаги сама по себе; в окне и на листе - без своего фона) ---------- */
.wpcf7{display:block;max-width:100%}
.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0}
.wpcf7 .hidden-fields-container{display:none}
form.wpcf7-form{display:grid;gap:12px;padding:22px 18px 22px;background:var(--paper-bg);color:var(--ink);box-shadow:0 18px 36px rgba(0,0,0,.5)}
.modal form.wpcf7-form,.paper form.wpcf7-form,form.wpcf7-form.frm.bare{background:none;padding:0;box-shadow:none}
form.wpcf7-form>p{margin:0}
@media (min-width:700px){
  form.wpcf7-form{padding:30px 32px}
  .modal form.wpcf7-form,.paper form.wpcf7-form,form.wpcf7-form.frm.bare{padding:0}
}

/* ---------- поля: обёртка CF7 вокруг поля - блок; значок слева, как в макете ---------- */
.wpcf7-form .f .wpcf7-form-control-wrap{position:relative;display:block}
.wpcf7-form .f>.ic~.wpcf7-form-control-wrap input,.wpcf7-form .f>.ic~.wpcf7-form-control-wrap textarea,.wpcf7-form .f>.ic~.wpcf7-form-control-wrap select{padding-left:42px}
.wpcf7-form .f input.wpcf7-form-control,.wpcf7-form .f textarea.wpcf7-form-control,.wpcf7-form .f select.wpcf7-form-control{width:100%;max-width:100%;margin:0}
.wpcf7-form .f input[type=url],.wpcf7-form .f input[type=email],.wpcf7-form .f input[type=tel]{direction:ltr}
/* ошибка проверки поля: красные чернила на поле и подсказка под ним (как .f.bad и .f-err макета) */
.wpcf7-form .f .wpcf7-not-valid{border-color:#8a1f16;background-color:rgba(138,31,22,.07)}
.wpcf7-form .f select.wpcf7-not-valid{background-color:rgba(138,31,22,.07)}
.wpcf7-form .wpcf7-not-valid-tip{display:block;margin:3px 0 0;font-size:.9rem;font-weight:400;line-height:1.35;color:#8a1f16}
.wpcf7-form .use-floating-validation-tip .wpcf7-not-valid-tip{position:static;width:auto;padding:0;border:0;background:none}

/* ---------- галочка согласия: обёртки CF7 - блоки, сама галочка и подпись - из .agree (shell.css) ---------- */
.wpcf7-form .agree .wpcf7-form-control-wrap,.wpcf7-form .agree .wpcf7-acceptance,.wpcf7-form .agree .wpcf7-list-item{display:block;margin:0}
.wpcf7-form .agree .wpcf7-list-item-label::before,.wpcf7-form .agree .wpcf7-list-item-label::after{content:none}
.wpcf7-form .agree .wpcf7-list-item-label{display:block}
.wpcf7-form .agree .wpcf7-acceptance.wpcf7-not-valid{outline:1px solid #8a1f16;outline-offset:5px}
.wpcf7-form .agree .wpcf7-not-valid-tip{padding-left:34px}
.wpcf7-form .agree-note{margin-top:-4px}

/* ---------- список услуг (select): стрелка макета остаётся, рамка и тон - из .f select ---------- */
.wpcf7-form .f select.wpcf7-select{cursor:pointer}
.wpcf7-form .f select.wpcf7-select:invalid{color:#6b5632}

/* ---------- звёзды оценки: кружки в ряд, как fieldset.stars макета ---------- */
.wpcf7-form .stars{display:block;border:0;margin:0;padding:0;min-width:0}
.wpcf7-form .stars legend{display:block;float:none;width:auto;margin-bottom:6px;padding:0;font-size:.98rem;line-height:1.3;color:var(--ink2)}
.wpcf7-form .stars p{margin:0}
.wpcf7-form .stars .wpcf7-form-control-wrap{display:block}
.wpcf7-form .stars .wpcf7-radio{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.wpcf7-form .stars .wpcf7-list-item{display:block;margin:0}
.wpcf7-form .stars .wpcf7-list-item-label::before,.wpcf7-form .stars .wpcf7-list-item-label::after{content:none}
.wpcf7-form .stars label{display:inline-flex;align-items:center;gap:6px;font-size:1.05rem;line-height:1.3;color:#4a2f14;cursor:pointer}
.wpcf7-form .stars input:checked+.wpcf7-list-item-label{color:#5b1d0e}
.wpcf7-form .stars .wpcf7-radio.wpcf7-not-valid{outline:1px solid #8a1f16;outline-offset:5px}

/* ---------- кнопка: input.wpcf7-submit с классами .btn.ink.solid макета (стили .btn уже на ней; здесь - то, что input не наследует) ---------- */
.wpcf7-form .wpcf7-submit{display:inline-block;margin:0;font:inherit;font-family:var(--text);font-size:.86rem;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;text-align:center;white-space:normal;cursor:pointer;border-radius:0;-webkit-appearance:none;appearance:none}
.wpcf7-form .wpcf7-submit.wide{display:block;width:100%;padding-top:16px;padding-bottom:16px}
.wpcf7-form .wpcf7-submit:focus-visible{outline:2px solid #3d2409;outline-offset:3px}
.wpcf7-form .wpcf7-submit:disabled,.wpcf7 .wpcf7-submit:disabled{opacity:.5;cursor:not-allowed}
.wpcf7-form .wpcf7-submit:disabled:hover{background:#2a1a08;border-color:#2a1a08;color:#f1e8d2}
form.wpcf7-form.submitting .wpcf7-submit{opacity:.7;cursor:progress}
/* абзац с кнопкой: кнопка и вертушка в одной строке; у широкой кнопки вертушка лежит на её правом крае */
.wpcf7-form>p:has(>.wpcf7-submit){position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px;justify-content:flex-start}
.wpcf7-form>p:has(>.wpcf7-submit.wide){display:block}
/* вертушка отправки: чернильный кружок с бегущей светлой точкой (анимация - штатная CF7, цвета наши) */
.wpcf7-form .wpcf7-spinner{display:inline-block;width:24px;height:24px;margin:0;border:0;border-radius:50%;background-color:#5a3a1e;opacity:.9;vertical-align:middle;visibility:hidden;position:relative}
.wpcf7-form .wpcf7-spinner::before{background-color:#f1e8d2}
form.wpcf7-form.submitting .wpcf7-spinner{visibility:visible}
.wpcf7-form .wpcf7-submit.wide+.wpcf7-spinner{position:absolute;right:14px;top:50%;margin:-12px 0 0}
.wpcf7-form .wpcf7-submit.wide+.wpcf7-spinner::before{background-color:#f1e8d2}

/* ---------- итог отправки: строка-пометка макета (.frm-msg); отказ и ошибки - красные чернила ---------- */
.wpcf7 form .wpcf7-response-output{margin:0;padding:10px 12px;border:1px solid var(--pline);border-radius:0;background:rgba(255,248,226,.55);font-size:1rem;line-height:1.4;color:#2a1a08}
.wpcf7 form.init .wpcf7-response-output,.wpcf7 form.resetting .wpcf7-response-output,.wpcf7 form.submitting .wpcf7-response-output{display:none}
.wpcf7 form.sent .wpcf7-response-output{border-color:#5a3a1e;color:#2a1a08}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.payment-required .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output,.wpcf7 form.aborted .wpcf7-response-output,.wpcf7 form.spam .wpcf7-response-output{border-color:#8a1f16;color:#6e160f}
.wpcf7 [inert]{opacity:.6}

/* ---------- на листе кассовой книги (если форму CF7 поставят на .paper): те же поля в рамке, без линовки ---------- */
.paper form.wpcf7-form .f input,.paper form.wpcf7-form .f textarea,.paper form.wpcf7-form .f select{background-color:rgba(255,248,226,.5)}

/* ================= СВОИ ПРАВИЛА СТРАНИЦ, ЗАВЯЗАННЫЕ НА .frm (css/kontakty.css, css/deti.css, css/otzyvy.css) ================= */
/* Контакты, «Остались вопросы?»: форма - сторона открытки для письма; в сетке открытки стоит обёртка div.wpcf7, а не сама форма */
.pg-kontakty .sec-ask form.wpcf7-form{background:none;box-shadow:none;padding:0;gap:6px}
.pg-kontakty .sec-ask .f>.ic:has(~.wpcf7-form-control-wrap textarea){top:.62em}
.pg-kontakty .sec-ask .f input.wpcf7-not-valid,.pg-kontakty .sec-ask .f textarea.wpcf7-not-valid{border-color:#8a1f16;background-color:rgba(138,31,22,.07)}
.pg-kontakty .sec-ask .wpcf7-form .wpcf7-submit{margin-top:12px}
@media (min-width:700px){
  .pg-kontakty .sec-ask .wpcf7{grid-column:2;grid-row:1/3;padding-left:clamp(24px,3.4vw,46px);border-left:1px solid var(--rule)}
  .pg-kontakty .sec-ask .wpcf7 form.wpcf7-form{padding:0}
}
/* Для детей, форма внизу страницы: бланк с тремя красками микстур */
.pg-deti .sec-form form.wpcf7-form{position:relative;padding-top:40px}
.pg-deti .sec-form form.wpcf7-form::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:10px;background:linear-gradient(90deg,#a5182e 0 33.33%,#2f7a3a 33.33% 66.66%,#2443a8 66.66% 100%)}
.pg-deti .sec-form form.wpcf7-form::after{content:"";position:absolute;inset:8px;border:1px solid rgba(74,47,20,.5);pointer-events:none}
.pg-deti .sec-form form.wpcf7-form>*{position:relative;z-index:1}
@media (min-width:700px){
  .pg-deti .sec-form form.wpcf7-form{padding-top:46px}
}
/* Отзывы, окно отзыва: поля без зазора сетки (как .frm окна), ошибка поля - те же красные чернила, что .f.bad */
.pg-otzyvy #m-otzyv form.wpcf7-form{gap:0}
.pg-otzyvy #m-otzyv .f input.wpcf7-not-valid,.pg-otzyvy #m-otzyv .f textarea.wpcf7-not-valid{border-color:#8a1f16;background-color:rgba(138,31,22,.07)}
.pg-otzyvy #m-otzyv .wpcf7-not-valid-tip{margin-top:-6px;margin-bottom:6px}
/* Отзывы, окно отзыва: пять звёзд в ряд (со скриптами; js/otzyvy.js ставит блоку data-v = выбранное число). Цифра «1 ★» остаётся
   подписью для чтения с экрана (кегль 0), звезда рисуется у подписи, прозрачный кружок выбора лежит поверх неё. */
.js .pg-otzyvy #m-otzyv .stars .wpcf7-radio{gap:0 2px}
.js .pg-otzyvy #m-otzyv .stars label{position:relative;display:inline-flex;gap:0;padding:0 3px;font-size:0;line-height:1}
.js .pg-otzyvy #m-otzyv .stars input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;background:none;opacity:0;cursor:pointer}
.js .pg-otzyvy #m-otzyv .stars input::after{display:none}
.js .pg-otzyvy #m-otzyv .stars .wpcf7-list-item-label{display:block;font-size:0}
.js .pg-otzyvy #m-otzyv .stars .wpcf7-list-item-label::before{content:none}
.js .pg-otzyvy #m-otzyv .stars .wpcf7-list-item-label::after{content:"\2605";display:block;font-family:var(--text);font-size:2.3rem;line-height:1.15;color:rgba(0,0,0,0);-webkit-text-stroke:1.2px #8a4b12;transition:color .18s}
.js .pg-otzyvy #m-otzyv .stars[data-v="1"] .wpcf7-list-item:nth-of-type(-n+1) .wpcf7-list-item-label::after,
.js .pg-otzyvy #m-otzyv .stars[data-v="2"] .wpcf7-list-item:nth-of-type(-n+2) .wpcf7-list-item-label::after,
.js .pg-otzyvy #m-otzyv .stars[data-v="3"] .wpcf7-list-item:nth-of-type(-n+3) .wpcf7-list-item-label::after,
.js .pg-otzyvy #m-otzyv .stars[data-v="4"] .wpcf7-list-item:nth-of-type(-n+4) .wpcf7-list-item-label::after,
.js .pg-otzyvy #m-otzyv .stars[data-v="5"] .wpcf7-list-item:nth-of-type(-n+5) .wpcf7-list-item-label::after{color:#8a4b12}
.js .pg-otzyvy #m-otzyv .stars input:focus-visible+.wpcf7-list-item-label::after{outline:2px solid #5a3a1e;outline-offset:2px}
.js .pg-otzyvy #m-otzyv .stars label:hover .wpcf7-list-item-label::after{-webkit-text-stroke-color:#5b1d0e}
@media not all{
  .js .pg-otzyvy #m-otzyv .stars .wpcf7-list-item-label::after{transition:none}
}

@media not all{
  .wpcf7-form .wpcf7-submit{transition:none}
}
