/* ==========================================================================
   Тема tur: сумісність Contact Form 7 з версткою.
   CF7 обгортає поля в span.wpcf7-form-control-wrap, тож селектори верстки
   на кшталт .input-group > .form-control повторюємо для обгортки.
   ========================================================================== */

.wpcf7-form-control-wrap { display: block; position: relative; }

/* Службове з CSS плагіна (його стилі вимкнено в inc/cf7.php) */
.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="url"] { direction: ltr; }

/* Поле з іконкою */
.input-icon > .wpcf7-form-control-wrap > .form-control { padding-left: 44px; }

/* Телефон з префіксом +380 */
.input-group > .wpcf7-form-control-wrap { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group > .wpcf7-form-control-wrap > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* У верстці третім дочірнім був .invalid-feedback; з CF7 їх два — прибираємо заокруглення префікса вручну */
.input-group > .phone-prefix:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lead-form .input-group > .wpcf7-form-control-wrap > .form-control { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group > .wpcf7-form-control-wrap .wpcf7-not-valid-tip { position: absolute; left: 0; top: 100%; }

/* Згода: чекбокс CF7 як .form-check */
.form-check .wpcf7-form-control-wrap,
.form-check .wpcf7-list-item { display: block; margin: 0; }
.form-check .wpcf7-list-item label { display: block; cursor: pointer; }
.form-check .wpcf7-list-item-label { font-size: .875rem; }

/* Спінер CF7 не вміщається поруч із кнопкою на всю ширину — показуємо стан на самій кнопці */
.wpcf7-form .btn + .wpcf7-spinner { display: none; }
.wpcf7-form.submitting .btn[type="submit"] { opacity: .7; pointer-events: none; cursor: progress; }

/* Згода на розсилку в темному блоці lead-form (section-subscribe.php) */
.lead-form__check { margin: 4px 0 0; }
.lead-form__check .form-check-label, .lead-form__check .wpcf7-list-item-label { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.lead-form__check a { color: #fff; }
.lead-form__check .form-check-input { border-color: rgba(255, 255, 255, .6); }
.lead-form__check .wpcf7-not-valid-tip { color: #ffc2b3; font-size: .85rem; margin-top: 4px; }

/* Відповідь форми підписки (assets/js/subscribe.js) */
.subscribe-output[hidden] { display: none; }
.subscribe-output.is-success { background: #e6f6ea; border-color: #b6e2c0; color: #1f6b2c; }
.subscribe-output.is-error { background: #fdecea; border-color: #f5c2bd; color: #a3281c; }
.js-subscribe.submitting .btn[type="submit"] { opacity: .8; }
/* Підказка під полем збільшує висоту колонки — іконка тримається середини поля (54px), а не колонки */
.js-subscribe .input-icon > .bi { top: 27px; }

/* Відповідь CF7 у темному блоці lead-form */
.lead-form .wpcf7-response-output { color: #1f2a37; background: #fff; }
.wpcf7 form.sent .wpcf7-response-output { background: #e6f6ea; border-color: #b6e2c0; color: #1f6b2c; }

/* ==========================================================================
   Шапка: пункти 1-го рівня головного меню — великими літерами
   (підменю не чіпаємо). Кегль 14px на всіх ширинах (перекриває .95rem / .9rem зі style.css).
   ========================================================================== */
.site-header .navbar-nav > .nav-item > .nav-link { text-transform: uppercase; font-size: 14px; }

/* ==========================================================================
   Прапор України в префіксі телефону. Емодзі 🇺🇦 Windows показує літерами «UA» — малюємо CSS.
   ========================================================================== */
.flag-ua {
  display: inline-block; flex: 0 0 auto; width: 22px; height: 15px; border-radius: 2px;
  background: linear-gradient(#0057b7 50%, #ffd700 50%);
  box-shadow: inset 0 0 0 1px rgba(15, 42, 74, .12);
}
.phone-prefix { display: inline-flex; align-items: center; }

/* ==========================================================================
   Вхід / реєстрація (template-parts/modals.php, assets/js/account.js)
   ========================================================================== */
.auth-modal__eye { border: var(--bs-border-width) solid var(--bs-border-color); border-left: 0; background: #fff; color: var(--text-muted); }
.auth-modal__eye:hover, .auth-modal__eye:focus-visible { color: var(--brand-navy); background: #fff; }
.input-group .form-control.is-invalid + .auth-modal__eye { border-color: var(--bs-form-invalid-border-color); }
.auth-modal__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-check .invalid-feedback { margin-left: 0; }

/* ==========================================================================
   Кабінет (page-templates/account.php, template-parts/account/)
   ========================================================================== */
.account-alert { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius); margin-bottom: 20px; }
.account-alert > .bi { font-size: 1.25rem; line-height: 1.3; }
.account-guest { max-width: 560px; text-align: center; padding: 40px 28px; }
.account-guest__icon { display: block; font-size: 3rem; color: var(--brand-orange); margin-bottom: 8px; }
.account-cta { display: flex; gap: 18px; align-items: flex-start; }
.account-cta__icon { font-size: 2.2rem; color: var(--brand-orange); line-height: 1; }
.account-cta .btn { display: inline-flex; align-items: center; gap: 8px; }
.request-card__links { align-items: center; }
.request-card__links .request-card__toggle { margin: 0 0 0 auto; }
.request-card .trip-details { margin-bottom: 0; }
.input-group:has(.is-invalid) + .form-text { display: none; }

/* Мої подорожі: фото квадратні */
.account-trips .trip-card__media { aspect-ratio: 1 / 1; min-height: 0; }
@media (min-width: 768px) { .account-trips .trip-card { align-items: start; } }
.account-trips .past-trip__img { aspect-ratio: 1 / 1; }
.past-trip__done--pending { color: var(--text-muted); }

/* Відгук: оцінка й фото */
.review-photo { display: flex; align-items: center; gap: 12px; }
.review-photo__preview { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; }

/* ==========================================================================
   Сторінка «Відгуки туристів» (page-templates/reviews.php)
   ========================================================================== */
.reviews-page { padding-top: 32px; }
.reviews-page .btn { display: inline-flex; align-items: center; gap: 8px; }
.reviews-empty { max-width: 560px; padding: 40px 28px; }
.reviews-empty__icon { display: block; font-size: 3rem; color: var(--brand-orange); margin-bottom: 8px; }

.reviews-summary { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
@media (min-width: 992px) { .reviews-summary { position: sticky; top: 100px; } }
.reviews-summary__score { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.reviews-summary__score > b { font-size: 3rem; line-height: 1; font-weight: 800; color: var(--brand-navy); }
.reviews-summary__score > div { display: grid; gap: 2px; }
.reviews-summary__score small { color: var(--text-muted); }
.reviews-summary__bars { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; font-size: .85rem; }
.reviews-summary__bars li { display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px; }
.reviews-summary__bar { height: 8px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.reviews-summary__bar > span { display: block; height: 100%; background: #f5a623; border-radius: 4px; }
.reviews-summary__n { text-align: right; color: var(--text-muted); }

.reviews-page .chip-filter__btn { text-decoration: none; }
.reviews-list { columns: 2 320px; column-gap: 24px; }
.review-item {
  break-inside: avoid; margin: 0 0 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; scroll-margin-top: 110px;
}
.review-item:target { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(238, 93, 28, .15); }
.review-item__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.review-item__avatar {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-sand-soft); color: var(--brand-navy); font-weight: 700; font-size: 1.1rem;
}
.review-item__who { flex: 1; min-width: 0; }
.review-item__name { font-size: 1.02rem; font-weight: 700; margin: 0; }
.review-item__meta { font-size: .8rem; color: var(--text-muted); margin: 0; }
.review-item__stars { color: #f5a623; letter-spacing: 1px; white-space: nowrap; }
.review-item__stars-off { color: var(--border); }
.review-item__trip { display: flex; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--brand-navy); margin: 0 0 10px; }
.review-item__trip .bi { color: var(--brand-orange); }
.review-item__text { font-size: .95rem; }
.review-item__text p:last-child { margin-bottom: 0; }
.review-item__photo { display: block; margin-top: 14px; border-radius: var(--radius-sm); overflow: hidden; }
.review-item__photo img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; transition: transform .3s; }
.review-item__photo:hover img { transform: scale(1.03); }

/* Відгук без фото й без фото країни — брендова заглушка (template-parts/card-review.php) */
.review-card__media--empty {
  display: grid; place-items: center; min-height: 180px;
  background: radial-gradient(circle at 30% 20%, rgba(238, 93, 28, .35), transparent 55%), var(--brand-navy);
}
.review-card__media--empty span { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--brand-sand); }
div.review-item__photo:hover img { transform: none; }
.review-item__photo img { aspect-ratio: 16 / 9; }
.review-item__photo--empty {
  display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 360px;
  background: radial-gradient(circle at 30% 20%, rgba(238, 93, 28, .35), transparent 55%), var(--brand-navy);
}
.review-item__photo--empty span { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--brand-sand); }

/* ==========================================================================
   Сторінка 404 (404.php)
   ========================================================================== */
/* Блоки йдуть один за одним з однаковим відступом var(--section-py): у блока посилань немає нижнього padding, щоб не подвоювати його з «Типами турів». */
.error-404 { padding-block: 28px var(--section-py); }
@media (min-width: 992px) { .error-404 { padding-top: 40px; } }
.error-404__inner { text-align: center; max-width: 680px; margin: 0 auto; }
.error-404 .page-hero__title, .error-404 .page-hero__lead { margin-inline: auto; }
.error-404 .btn { display: inline-flex; align-items: center; gap: 8px; }
.error-404__code {
  display: flex; justify-content: center; align-items: center; gap: .04em; margin: 8px 0 12px;
  font-size: clamp(5.5rem, 3.5rem + 9vw, 10rem); font-weight: 800; line-height: 1; color: var(--brand-navy);
}
.error-404__code .bi { font-size: .82em; color: var(--brand-orange); animation: error-404-spin 18s linear infinite; }
@keyframes error-404-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .error-404__code .bi { animation: none; } }

.error-404-links { padding-bottom: 0; }
.error-404-links .section__title { text-align: center; margin-bottom: 32px; }
@media (min-width: 992px) { .error-404-links .section__title { margin-bottom: 48px; } }
.error-404-links .section__title b { font-weight: 700; }
.error-404-links__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.error-404-link {
  display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 20px; text-decoration: none; color: var(--text);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); transition: box-shadow .25s var(--ease), border-color .25s, transform .25s var(--ease);
}
.error-404-link:hover, .error-404-link:focus-visible { color: var(--text); border-color: transparent; box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.error-404-link__icon {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-sand-soft); color: var(--brand-orange); font-size: 1.35rem;
}
.error-404-link__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.error-404-link__title { font-weight: 700; color: var(--brand-navy); }
.error-404-link__text { font-size: .85rem; color: var(--text-muted); }
.error-404-link__arrow { color: var(--brand-orange); transition: transform .25s var(--ease); }
.error-404-link:hover .error-404-link__arrow { transform: translateX(4px); }