/* ======================================================================
   zimmer-compare.css — страница сравнения циммеров. RTL, иврит.
   Токены — BRAND.md (единая система с каталогом).
   ====================================================================== */
:root{
    --celadon: #B6FECC; --malachite: #00DE71; --brunswick: #01453E; --dark-green: #012824;
    --jonquil: #F9C801;
    --accent: var(--malachite); --accent-hover: var(--ColorGreen, #00B85F);
    --text: var(--dark-green); --text-soft: rgba(1,40,36,.82); --text-faint: rgba(1,40,36,.62);
    --bg-page: #f2fbf5; --bg-dark: var(--dark-green); --bg-dark-2: var(--brunswick);
    --bg-soft: rgba(182,254,204,.16); --bg-tint: rgba(182,254,204,.34);
    --line: rgba(1,40,36,.10); --line-strong: rgba(1,40,36,.16);
    --shadow-soft: 0 18px 40px -24px rgba(1,40,36,.4);
    --font-main: 'Segoe UI', 'SegoeUI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.zc-page{ background: var(--bg-page); }
.zc-page .header{ position: static; }
.zc{ color: var(--text); font-family: var(--font-main); padding-block: 28px 56px; }
.zc bdi{ unicode-bidi: isolate; }
.zc-page [hidden]{ display: none !important; }
.zc-page button:focus-visible, .zc-page a:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.zc-page .site-btn.light{ background-color: var(--accent); border-color: var(--accent); color: var(--dark-green); }
@media (hover:hover){ .zc-page .site-btn.light:hover{ background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--dark-green); } }
.zc-page .site-btn.border{ background: transparent; border: 1px solid var(--brunswick); color: var(--brunswick); }
@media (hover:hover){ .zc-page .site-btn.border:hover{ background: rgba(182,254,204,.2); } }

.zc-head{ margin-bottom: 20px; }
.zc-title{ margin: 0 0 8px; font-size: clamp(28px, 2.6vw + 14px, 42px); font-weight: bold; color: var(--brunswick); line-height: 1.12; }
.zc-sub{ margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-soft); }

/* баннер рекомендации */
.zc-reco{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px;
    padding: 16px 18px; border-radius: 18px; background: var(--bg-dark); color: var(--celadon); box-shadow: var(--shadow-soft); }
.zc-reco__badge{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
    border-radius: 999px; background: var(--accent); color: var(--dark-green); font-size: 13.5px; font-weight: 900; }
.zc-reco__badge svg{ width: 15px; height: 15px; }
.zc-reco__txt{ flex: 1 1 260px; min-width: 0; font-size: 14.5px; line-height: 1.55; }
.zc-reco__txt b{ color: #fff; }
/* призыв для гостя */
.zc-reco--guest{ background: var(--bg-tint); color: var(--brunswick); box-shadow: none; border: 1px solid rgba(1,40,36,.06); }
.zc-reco--guest .zc-reco__txt b{ color: var(--brunswick); }

/* таблица */
/* П2: таблица растёт естественно — единственный вертикальный скролл у страницы */
.zc-wrap{ border-radius: 20px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-soft); }
@media only screen and (max-width: 1023px){
    /* узкие экраны: горизонтальный скролл таблицы (sticky-шапка тогда не липнет — trade-off) */
    .zc-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.zc-tbl{ width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; table-layout: fixed;}
/* Левая колонка с названиями характеристик */
.zc-tbl th:first-child,
.zc-tbl td:first-child{
    width: 135px;
}
/* Колонки объектов делят оставшееся место поровну */
.zc-tbl th:not(:first-child),
.zc-tbl td:not(:first-child){
    width: auto;
}
/* П3: все ячейки строки — по одной линии (top) с равными отступами */
.zc-tbl th, .zc-tbl td{ padding: 12px 14px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--line);
    vertical-align: top; }
.zc-tbl td > *{ vertical-align: top; }
.zc-tbl td:first-child, .zc-tbl th:first-child{ text-align: start; font-weight: 800; color: var(--text-faint);
    white-space: nowrap; font-size: 13px; }
/* П2: липкая шапка — полный и компактный режимы */
.zc-tbl thead th{ position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--line-strong); }
.zc-headcell{ position: relative; display: block; width: 100%; min-width: 0; padding: 4px 2px; }
/* П1: единая сетка полного режима — фото (16:10) → название → город */
.zc-headcell__full{ display: flex; flex-direction: column; align-items: center; gap: 7px;
    max-height: 220px; opacity: 1; overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease; }
.zc-headcell__imgwrap{ position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; }
.zc-headcell__imgwrap img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.zc-headcell__ph{ display: block; width: 100%; height: 100%;
    background: linear-gradient(160deg, var(--bg-dark), var(--bg-dark-2)); }
.zc-headcell b{ font-size: 15px; color: var(--brunswick); line-height: 1.25; }
.zc-headcell__reg{ font-size: 12px; font-weight: 600; color: var(--text-faint); }
/* бейдж победителя — поверх фото, структуру не меняет (П1) */
.zc-bestflag{ position: absolute; z-index: 2; bottom: 8px; inset-inline-start: 8px;
    display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px;
    background: var(--accent); color: var(--dark-green); font-size: 11px; font-weight: 900;
    box-shadow: 0 6px 16px -6px rgba(1,40,36,.45); }
/* компактный режим (виден при скролле) */
.zc-headcell__mini{ display: flex; align-items: center; gap: 8px; justify-content: center;
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease; }
.zc-headcell__thumb{ width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.zc-headcell__thumb--ph{ display: inline-block; background: linear-gradient(160deg, var(--bg-dark), var(--bg-dark-2)); }
.zc-headcell__mtxt{ min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.zc-headcell__mtxt b{ font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.zc-headcell__mtxt i{ font-style: normal; font-size: 11px; color: var(--text-faint); }
/* прилипшее состояние: полный прячется, компактный виден */
.zc-wrap.is-stuck .zc-headcell__full{ max-height: 0; opacity: 0; }
.zc-wrap.is-stuck .zc-headcell__mini{ max-height: 56px; opacity: 1; }
.zc-wrap.is-stuck .zc-headcell__x{ top: 50%; transform: translateY(-50%); }
.zc-wrap.is-stuck .zc-headcell__x:hover, .zc-wrap.is-stuck .zc-headcell__x:focus-visible{ transform: translateY(-50%) rotate(90deg) scale(1.08); }
@media (prefers-reduced-motion: reduce){ .zc-headcell__full, .zc-headcell__mini{ transition: none; } }
.zc-sentinel{ display: block; height: 1px; }
/* П4: крестик — фирменный ховер (celadon-кружок + поворот) */
.zc-headcell__x{ position: absolute; top: 6px; inset-inline-end: 2px; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: rgba(255,255,255,.94); border: 1px solid var(--line); color: var(--brunswick); cursor: pointer;
    transition: background-color .25s ease, transform .25s ease, border-color .25s ease; }
.zc-headcell__x svg{ width: 14px; height: 14px; }
.zc-headcell__x:hover, .zc-headcell__x:focus-visible{
    background: var(--celadon); border-color: transparent; transform: rotate(90deg) scale(1.08); }
@media (prefers-reduced-motion: reduce){ .zc-headcell__x{ transform: none !important; } }
/* рекомендованная колонка — только цвет (П1) */
.zc-tbl .is-best{ background: rgba(182,254,204,.14); }
/* в sticky-шапке фон должен быть НЕПРОЗРАЧНЫМ — иначе контент просвечивает */
.zc-tbl thead th.is-best{ background: #f1fdf6; }   /* П1: без зелёной полосы */
/* значения */
.zc-price b{ font-size: 17px; color: var(--brunswick); }
.zc-check{ color: var(--accent-hover); font-weight: 900; }
.zc-dash{ color: rgba(1,40,36,.3); }
.zc-score{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 10px 10px 10px 3px;
    background: var(--bg-dark); color: var(--celadon); font-size: 13px; font-weight: 800; }
.zc-score svg{ width: 14px; height: 14px; color: var(--jonquil); }
.zc-verified{ display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11.5px; font-weight: 800; color: var(--accent-hover); }
.zc-verified svg{ width: 13px; height: 13px; }
.zc-verdict{ display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); max-width: 22ch; margin-inline: auto; }
.zc-match{ display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 900; color: var(--dark-green); }
.zc-why{ display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--text-faint); max-width: 24ch; margin-inline: auto; }
.zc-pts{ display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.zc-pts svg{ width: 14px; height: 14px; color: var(--accent-hover); }
.zc-amen{ font-size: 12.5px; line-height: 1.6; color: var(--text-soft); }
.zc-more{ display: inline-flex; padding: 8px 16px; min-height: 38px; align-items: center; border-radius: 999px;
    border: 1px solid rgba(1,69,62,.4); color: var(--brunswick); font-size: 13px; font-weight: 800;
    text-decoration: none; transition: background-color .2s ease; }
@media (hover:hover){ .zc-more:hover{ background: var(--bg-tint); } }

/* пустой стейт и действия */
.zc-empty{ text-align: center; padding: 60px 20px; border-radius: 22px; background: var(--bg-soft);
    border: 1px dashed rgba(1,40,36,.18); }
.zc-empty__ic{ display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center;
    border-radius: 16px; background: var(--bg-tint); color: var(--brunswick); margin-bottom: 14px; }
.zc-empty__ic svg{ width: 28px; height: 28px; }
.zc-empty h2{ margin: 0 0 8px; font-size: 22px; font-weight: bold; color: var(--brunswick); }
.zc-empty p{ margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--text-soft); }
.zc-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.zc-clear{ background: none; border: 0; padding: 10px; min-height: 44px; font-family: inherit;
    font-size: 14px; font-weight: 700; color: var(--text-faint); cursor: pointer; transition: color .2s ease; }
@media (hover:hover){ .zc-clear:hover{ color: var(--brunswick); text-decoration: underline; } }

@media only screen and (max-width: 767px){
    .zc-tbl{ min-width: 760px; }
    .zc-tbl th:first-child,
    .zc-tbl td:first-child{
        width: 115px;
    }

    .zc-headcell{
        width: 100%;
        min-width: 0;
    }
}

/* ====================================================================== */
/* Единый компонент «ביקורות אורחים» (демо помечено)                       */
/* ====================================================================== */
.cz-grate{ display: inline-flex; align-items: center; gap: 9px; padding: 4px 0; background: none; border: 0;
    cursor: pointer; font-family: inherit; text-align: start; }
span.cz-grate{ cursor: default; }
.cz-grate__num{ display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 32px;
    padding: 0 8px; border-radius: 10px 10px 10px 3px; background: var(--brunswick); color: #fff;
    font-size: 14px; font-weight: 900; }
.cz-grate__info{ display: flex; flex-direction: column; line-height: 1.2; align-items: flex-start; }
.cz-grate__info i{ font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--brunswick); }
.cz-grate__info small{ font-size: 11px; color: var(--text-faint); }
.cz-grate__demo{ display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
    background: rgba(1,40,36,.07); color: var(--text-faint); font-size: 10px; font-weight: 800; }
.zc-tbl .cz-grate{ flex-direction: column; gap: 5px; align-items: center; }
.zc-tbl .cz-grate__info{ align-items: center; }
/* поповер цитат */
.zc-pop2{ position: fixed; z-index: 100085; width: 270px; max-width: calc(100vw - 16px);
    padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line);
    box-shadow: 0 22px 50px -20px rgba(1,40,36,.5); font-family: var(--font-main);
    opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.zc-pop2.is-show{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .zc-pop2{ transition: none; transform: none; } }
.zc-pop2__ttl{ display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    font-size: 14px; font-weight: 800; color: var(--brunswick); }
.zc-pop2__ttl svg{ width: 15px; height: 15px; color: var(--jonquil); flex: 0 0 auto; }
.zc-pop2__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.zc-pop2__list li{ font-size: 13px; line-height: 1.55; color: var(--text-soft); }
.zc-pop2__list li i{ font-style: normal; color: var(--text-faint); }

/* ====================================================================== */
/* П3a: «צימרים שאולי תאהבו» — карусель                                    */
/* ====================================================================== */
.zc-h2{ margin: 0 0 14px; font-size: clamp(20px, 1.4vw + 13px, 26px); font-weight: bold; color: var(--brunswick); }
.zc-sim{ margin-top: 36px; }
.zc-sim__scroll{ display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zc-sim__scroll::-webkit-scrollbar{ height: 0; }
.zc-simc{ flex: 0 0 230px; scroll-snap-align: start; border-radius: 16px; overflow: hidden;
    background: #fff; border: 1px solid var(--line); text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease; }
@media (hover:hover){ .zc-simc:hover{ transform: translateY(-4px); box-shadow: var(--shadow-soft); } }
.zc-simc img{ width: 100%; height: 130px; object-fit: cover; display: block; }
.zc-simc__body{ display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 13px; }
.zc-simc__body > b{ font-size: 14.5px; color: var(--brunswick); }
.zc-simc__body > i{ font-style: normal; font-size: 12px; color: var(--text-faint); }
.zc-simc__foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px;
    font-size: 12.5px; color: var(--text-faint); }
.zc-simc__foot b{ font-size: 14px; color: var(--brunswick); }
.zc-simc__score{ display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px 8px 8px 3px;
    background: var(--bg-dark); color: var(--celadon); font-size: 11.5px; font-weight: 800; }
.zc-simc__score svg{ width: 12px; height: 12px; color: var(--jonquil); }
@media (prefers-reduced-motion: reduce){ .zc-simc{ transition: none; } }

/* ====================================================================== */
/* П3a: форма «נתאים לכם צימר»                                             */
/* ====================================================================== */
.zc-pick{ position: relative; overflow: hidden; isolation: isolate; margin-top: 36px;
    border-radius: 22px; background: var(--bg-dark-2); }
.zc-pick__bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.zc-pick::after{ content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(1,40,36,.92) 0%, rgba(1,40,36,.7) 55%, rgba(1,40,36,.45) 100%); }
.zc-pick__in{ position: relative; z-index: 2; padding: 28px 22px; max-width: 640px; }
.zc-pick__title{ color: #fff; }
.zc-pick__sub{ margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.88); }
.zc-pick__grid{ display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.zc-pfield{ display: block; }
.zc-pfield > span{ display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: rgba(182,254,204,.9); }
.zc-pfield > span i{ color: var(--accent); font-style: normal; }
.zc-pfield input, .zc-pfield textarea{
    width: 100%; box-sizing: border-box; padding: 11px 13px; min-height: 46px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.94);
    font-family: inherit; font-size: 15px; color: var(--text); transition: border-color .25s ease, box-shadow .25s ease; }
.zc-pfield textarea{ resize: vertical; }
.zc-pfield input:focus, .zc-pfield textarea:focus{
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,222,113,.22); }
.zc-perr{ display: none; margin-top: 5px; font-size: 12px; font-style: normal; font-weight: 700; color: #FFC7CC; }
.zc-pfield:has(.is-invalid) input{ border-color: #E03C48; }
.zc-pfield:has(.is-invalid) .zc-perr{ display: block; }
.zc-pick__done{ display: flex; flex-direction: column; gap: 4px; padding: 18px;
    border-radius: 16px; background: rgba(182,254,204,.14); border: 1px solid rgba(182,254,204,.35); color: var(--celadon); }
.zc-pick__done b{ font-size: 17px; color: #fff; }
@media only screen and (min-width: 768px){
    .zc-pick__in{ padding: 36px 34px; }
    .zc-pick__grid{ grid-template-columns: repeat(3, 1fr); }
    .zc-pfield--full{ grid-column: 1 / -1; }
}