/* Texnika müqayisəsi (compare.js): kartdakı qutu, aşağı zolaq, "Ətraflı" pəncərəsi üslubunda sütunlar.
   Fotolar sütunun kənarına yapışıqdır: çərçivə, radius, boşluq yoxdur. */
.cx-act > .cmp-line { flex: 0 0 100%; }
.sm-mc-act > .cmp-line { grid-column: 1 / -1; }
.cmp-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; }
.cmp-see { padding: 0; border: 0; background: none; font: 600 14px "Poppins", "Segoe UI", sans-serif; color: var(--sm-ink, #1D1F1E); text-decoration: underline; text-decoration-color: var(--sm-sari, #FFC20E); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; white-space: nowrap; }
.cmp-see[hidden] { display: none; }
.cmp-chk { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1.3 "Poppins", "Segoe UI", sans-serif; color: var(--sm-text, #4B524E); cursor: pointer; user-select: none; }
.cmp-chk input { appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0; border-radius: 5px; box-shadow: inset 0 0 0 2px #B9BDB7; background: #FFFFFF; cursor: pointer; transition: background .15s, box-shadow .15s; }
.cmp-chk input:checked { background: var(--sm-sari, #FFC20E); box-shadow: inset 0 0 0 2px var(--sm-ink, #1D1F1E); }
.cmp-chk input:checked::after { content: ""; width: 5px; height: 10px; border: solid var(--sm-ink, #1D1F1E); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.cmp-chk input:disabled { cursor: not-allowed; }
.cmp-chk:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.cmp-chk:hover { color: var(--sm-ink, #1D1F1E); }
.cmp-chk input:focus-visible { outline: 2px solid var(--sm-ink, #1D1F1E); outline-offset: 2px; }

.cmp-bar { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #1D1F1E; color: #FFFFFF; transform: translateX(-50%); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); font: 600 14.5px "Poppins", "Segoe UI", sans-serif; white-space: nowrap; }
.cmp-bar[hidden] { display: none; }
.cmp-th { display: flex; }
.cmp-th i { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #1D1F1E; margin-left: -10px; background: #FFFFFF center / cover no-repeat; }
.cmp-th i:first-child { margin-left: 0; }
.cmp-bar b { font: 600 14.5px "Poppins", "Segoe UI", sans-serif; }
.cmp-bar button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; font: 600 14px "Poppins", "Segoe UI", sans-serif; cursor: pointer; white-space: nowrap; }
.cmp-go { background: var(--sm-sari, #FFC20E); color: #1D1F1E; }
.cmp-go:disabled { opacity: .5; cursor: default; }
.cmp-clear { background: transparent; color: rgba(255, 255, 255, .75); padding: 0 10px !important; }
.cmp-clear:hover { color: #FFFFFF; }
/* icarə zolağı da görünəndə müqayisə zolağı onun üstünə qalxır */
body:has(.qr-bar:not([hidden])) .cmp-bar { bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 70px); }
/* zolaqlar səhifənin sonundakı məzmunu örtməsin */
body.cmp-on .ftr { padding-bottom: 96px; }

.cmp { width: min(1180px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 16px; background: #FFFFFF; color: #1D1F1E; overflow: hidden; }
.cmp::backdrop { background: rgba(16, 15, 12, .6); }
.cmp-in { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #E3E5E1; }
.cmp-head h2 { margin: 0; font: 800 22px "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
.cmp-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F1F2EF; color: #1D1F1E; cursor: pointer; }
.cmp-x:hover { background: #E3E5E1; }
.cmp-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cmp-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(240px, 1fr)); overflow: auto; }
.cmp-col { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span var(--rows, 12); min-width: 0; }
.cmp-col + .cmp-col { border-left: 1px solid #E3E5E1; }
.cmp-ph { height: 210px; background: #F3EEE1; overflow: hidden; }
.cmp-ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cmp-ph.photo img { object-fit: cover; }
.cmp-drop { flex: none; padding: 0; border: 0; background: none; font: 500 13px "Poppins", "Segoe UI", sans-serif; color: #7A807C; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmp-drop:hover { color: #1D1F1E; }
.cmp-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 22px; background: #F6F5F0; }
.cmp-hd p { margin: 0; font: 500 13px "Poppins", "Segoe UI", sans-serif; color: #7A807C; }
.cmp-hd h3 { margin: 2px 0 0; font: 800 20px/1.25 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -0.015em; }
.cmp-dl { display: contents; }
.cmp-dl div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 22px; padding: 10px 0; border-bottom: 1px solid #ECEDEA; font: 400 14px/1.45 "Poppins", "Segoe UI", sans-serif; }
.cmp-dl dt { color: #4B524E; }
.cmp-dl dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cmp-best { text-decoration: underline; text-decoration-color: var(--sm-sari, #FFC20E); text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 800 !important; }
.cmp-act { position: sticky; bottom: 0; padding: 14px 22px 18px; background: #FFFFFF; }
.cmp-rent { width: 100%; height: 48px; border: 0; border-radius: 999px; background: var(--sm-sari, #FFC20E); color: #1D1F1E; font: 600 15px "Poppins", "Segoe UI", sans-serif; cursor: pointer; }
.cmp-rent:hover { background: #F2B500; }
.cmp button:focus-visible, .cmp-bar button:focus-visible { outline: 2px solid #1D1F1E; outline-offset: 2px; }
@media (max-width: 760px) {
  .cmp { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
  .cmp-in { max-height: 100dvh; }
  .cmp-cols { grid-template-columns: repeat(var(--n, 3), minmax(78vw, 1fr)); scroll-snap-type: x mandatory; }
  .cmp-col { scroll-snap-align: start; }
  .cmp-ph { height: 170px; }
  .cmp-bar { left: 12px; right: 12px; transform: none; justify-content: space-between; padding: 8px 8px 8px 12px; }
  .cmp-th { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cmp-chk input { transition: none; } }
/* telefonda aşağıda "Zəng et / WhatsApp" zolağı var: müqayisə zolağı onun üstündə, icarə zolağı da varsa ondan da yuxarıda */
@media (max-width: 720px) {
  .cmp-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  body:has(.qr-bar:not([hidden])) .cmp-bar { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
}

/* Ortaq aşağı zolaq (.sm-dock, compare.js yaradır): müqayisə və icarə zolaqları bir qara zolaqda, aralarında xətt.
   İçəridəki zolaqların öz mövqeyi, kölgəsi, fonu ləğv olunur; zolaq yalnız içində görünən hissə varsa çıxır. */
.sm-dock { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: stretch; transform: translateX(-50%); border-radius: 14px; background: #1D1F1E; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); }
.sm-dock:not(:has(> :not([hidden]))) { display: none; }
.sm-dock > .cmp-bar, .sm-dock > .qr-bar { position: static; left: auto; right: auto; bottom: auto !important; transform: none; box-shadow: none; border-radius: 0; background: transparent; animation: none; }
.sm-dock > :not([hidden]) ~ :not([hidden]) { border-left: 1px solid rgb(255 255 255 / .16); }
body:has(.qr-bar:not([hidden])) .sm-dock .cmp-bar { bottom: auto; }
body:has(.sm-dock > :not([hidden])) .ftr { padding-bottom: 96px; }
@media (max-width: 720px) {
  .sm-dock { left: 12px; right: 12px; transform: none; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); flex-direction: column; }
  .sm-dock > .cmp-bar, .sm-dock > .qr-bar { justify-content: space-between; }
  .sm-dock > :not([hidden]) ~ :not([hidden]) { border-left: 0; border-top: 1px solid rgb(255 255 255 / .16); }
}