/* cena2: преглед на новата палитра. Зарежда се след site.css и само пренарежда цветовете и логото. */
:root {
  --teal: #004B49; --teal-dark: #073735; --beige: #CBB49A; --cream: #F5F0E7;
  --gold: #C6A46A; --gold-d: #9F7F45;
  --ink: #073735; --ink-2: #004B49; --sand: #F5F0E7; --amber: var(--gold); --amber-d: var(--gold-d);
  --mint: #E9DFCF; --muted: #4f6764; --line: #e5dccd; --warn: #6b4a12;
}
body { background: var(--cream); }
.hero { background: linear-gradient(180deg, #ece3d2 0%, var(--cream) 100%); }
header.top { background: rgba(245, 240, 231, .94); }

/* лого: квадрат на втора */
.logo { gap: 8px; font-weight: 800; font-size: 21px; letter-spacing: -.01em; text-transform: none; color: var(--teal-dark); }
.logo .mark { width: 42px; height: 38px; flex: none; }
.logo .mark .sq { fill: var(--teal); }
.logo .mark .b { fill: var(--beige); }
.logo .mark .two { fill: var(--gold-d); font: 800 19px/1 system-ui, Arial, sans-serif; }
.logo b { color: var(--gold-d); font-weight: 800; }
footer .logo, .on-dark .logo { color: #fff; }
footer .logo .mark .sq { fill: #fff; }
footer .logo .mark .two { fill: var(--gold); }
footer .logo b { color: var(--beige); }

/* бутони и избрани състояния */
.btn { color: var(--teal-dark); }
.btn.dark { background: var(--teal); box-shadow: 0 6px 0 #00302f; color: #fff; }
.dock .btn.dark { box-shadow: 0 4px 0 #00302f; }
.call-btn { background: var(--teal); }
.call-btn:hover { background: var(--teal-dark); }
.chip[aria-pressed="true"], .seg button[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip:hover { border-color: var(--teal); }
dialog .chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--teal-dark); }
.seg { background: #ece3d2; }
.badge, .soon { background: #f1e6d0; color: var(--warn); }
.eyebrow { background: #e9dfcf; color: var(--teal); }

/* тъмни повърхности */
.offer { background: var(--teal); }
footer { background: var(--teal-dark); }
.final { background: linear-gradient(135deg, #CBB49A 0%, #dccab4 100%); }
.tag { background: var(--gold); color: var(--teal-dark); }
dialog { background: var(--teal); }
.offer li svg, .perks svg { color: var(--gold); }
.perks svg { color: var(--teal); }

/* светли карти */
.why li, .kv div { background: #f4eee3; }
.compare { background: var(--mint); }
.card .ico { background: var(--mint); }
.step::before { background: var(--gold); color: var(--teal-dark); }
.quick button:hover { background: var(--mint); border-color: var(--teal); }
.range .mid { color: var(--teal-dark); }
.pct.up { color: #1d6b53; }

/* карта */
.pin .pn { fill: var(--gold); stroke: var(--teal-dark); }
.pin .pulse { stroke: var(--gold); }
.pin .pl rect { fill: var(--teal-dark); }
.legend i { background: linear-gradient(90deg, #cfe3dc, #004B49); }
.skyline { display: none; }

/* калкулатор: бутонът стига до дъното на картата на десктоп */
.calc-info { display: none; list-style: none; margin: 14px 0 16px; padding: 0; gap: 8px; }
.calc-info li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; color: var(--teal-dark); background: #f4eee3; border-radius: 12px; padding: 9px 12px; }
.calc-info b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--teal-dark); display: grid; place-items: center; font-size: 13px; }
@media (min-width: 1100px) {
  .stage .calc:not(.result) { display: flex; flex-direction: column; }
  .stage .calc:not(.result) form { flex: 1; display: flex; flex-direction: column; }
  .stage .calc:not(.result) #go { margin-top: auto; }
  .stage .calc:not(.result) .calc-info { display: grid; }
}

/* лого: оценка² */
.logo sup.two { font-size: .58em; font-weight: 800; color: var(--gold-d); vertical-align: baseline; position: relative; top: -.62em; margin-left: 2px; line-height: 0; }
footer .logo sup.two, .on-dark .logo sup.two { color: var(--gold); }

/* лого: стълбчета + cena² */
.logo { gap: 9px; text-transform: none; letter-spacing: -.02em; }
.logo .mark { width: 38px; height: 32px; }
.logo .mark .b1 { fill: var(--teal); }
.logo .mark .b2 { fill: var(--beige); }
footer .logo .mark .b1, .on-dark .logo .mark .b1 { fill: #fff; }

/* основни бутони: светло жълто + пулсиране */
.btn:not(.dark) { background: #FFE27A; box-shadow: 0 6px 0 #E3BE45; position: relative; isolation: isolate; }
.btn:not(.dark):hover { box-shadow: 0 8px 0 #E3BE45; }
.btn:not(.dark):active { box-shadow: 0 2px 0 #E3BE45; transform: translateY(4px) scale(.985); }
.dock .btn:not(.dark) { box-shadow: 0 4px 0 #E3BE45; }
.btn:not(.dark)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; box-shadow: 0 0 0 0 rgba(255, 214, 70, .75); animation: ctaPulse 2s ease-out infinite; pointer-events: none; }
.btn:not(.dark):hover::after, .btn:not(.dark):active::after { animation: none; }
@keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 70, .75); } 70% { box-shadow: 0 0 0 16px rgba(255, 214, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 214, 70, 0); } }
.btn:not(.dark):active svg.arrow { transform: translateX(8px); }
@media (prefers-reduced-motion: reduce) { .btn:not(.dark)::after { animation: none; } }

/* бутон "Обади се" горе: по-малък на мобилно */
@media (max-width: 640px) {
  .call-btn { padding: 6px 12px; font-size: 13.5px; gap: 6px; font-weight: 700; }
  .call-btn svg { width: 15px; height: 15px; }
}

/* "Кога да ти се обадим": светло жълти бутони */
dialog .whenset .chip { background: #FFF4C2; color: var(--teal-dark); border-color: #F0D878; }
dialog .whenset .chip:hover { border-color: #E3BE45; }
dialog .whenset .chip[aria-pressed="true"] { background: #FFE27A; border-color: #E3BE45; box-shadow: 0 3px 0 #E3BE45; color: var(--teal-dark); }
dialog .whenset .chip small { opacity: .75; }

.sale-only[hidden], .rent-only[hidden] { display: none !important; }

/* финална лента: по-светла и ярка, жълтият бутон се вижда добре */
.final { background: linear-gradient(135deg, #EAD3AA 0%, #F8EBD2 100%); }
.final .btn:not(.dark) { background: #FFE27A; box-shadow: 0 6px 0 #E3BE45; }

/* "Промоция": ярък жълт етикет */
.tag { background: #FFE27A; color: var(--teal-dark); box-shadow: 0 3px 0 #E3BE45; font-size: 14px; padding: 6px 14px; }

/* ярък жълт вместо тъмно бежавото във всички акценти */
:root { --amber: #FFE27A; --amber-d: #E3BE45; }
.step::before { background: #FFE27A; color: var(--teal-dark); box-shadow: 0 3px 0 #E3BE45; }
dialog .chip[aria-pressed="true"] { background: #FFE27A; border-color: #E3BE45; color: var(--teal-dark); }
.offer li svg { color: #FFE27A; }
.pin .pn { fill: #FFD43B; }
.pin .pulse { stroke: #FFD43B; }
.calc-info b { background: #FFE27A; color: var(--teal-dark); box-shadow: 0 2px 0 #E3BE45; }

/* най-горе: София · продажба и наем - жълт фон, тъмнозелен текст */
.eyebrow { background: #FFE27A; color: var(--teal-dark); padding: 7px 16px; font-size: 13px; font-weight: 900; letter-spacing: .1em; box-shadow: 0 3px 0 #E3BE45; }
@media (max-width: 640px) { .eyebrow { margin-bottom: 8px; font-size: 12px; } }

/* превключвател Продавам / Давам под наем */
.seg { background: var(--teal); padding: 5px; }
.seg button { color: #e9dfcf; font-weight: 800; }
.seg button[aria-pressed="true"] { background: #FFE27A; border-color: #FFE27A; color: var(--teal-dark); box-shadow: 0 3px 0 #E3BE45; }