`, па копија ја носи `::after` преку `background: inherit` и само таа
се скалира. `isolation` + `z-index:-1` ја држат копијата под превезот
(`::before`) и под текстот; аглите ги сече `overflow:hidden`. */
a.sv-rec-card { isolation: isolate; }
a.sv-rec-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: inherit;
transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
a.sv-rec-card:hover::after,
.sv-rec-slot:hover > a.sv-rec-card::after { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
a.sv-rec-card, a.sv-rec-card::after { transition: none; }
a.sv-rec-card:hover, a.sv-rec-card:hover::after,
.sv-rec-slot:hover > a.sv-rec-card,
.sv-rec-slot:hover > a.sv-rec-card::after { transform: none; }
}
/* Препорачана без фотографија — истата илустрација како во листата
(`sv-noimg.svg`, bookinglook.css), наместо празна обоена плочка. */
a.sv-rec-card:not([style*="background-image"]) { background-image: url("sv-noimg.svg"); }
.sv-rec-card > * { position: relative; text-shadow: 0 1px 2px rgba(0,0,0,0.45); }
.sv-rec-name { color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.sv-rec-sub { color: rgba(255, 255, 255, 0.88); font-size: 0.78rem; margin-top: 3px; }
.sv-rec-price { color: #fff; font-weight: 800; font-size: 1rem; margin-top: 8px; }
.sv-rec-price span { font-weight: 500; font-size: 0.75rem; opacity: 0.85; }
.sv-rec-badges {
/* Во токот, не absolute: на тесна картичка (отворена мапа → 3 колони во
стисната колона) апсолутниот ред „НАШ ОБЈЕКТ" го газеше текстот под себе
(скриншот 30.08, битка 20260830-07). `margin-bottom:auto` ги држи
беџовите горе, а текстот на дното — без преклоп на која било ширина.
`position:relative` доаѓа од `.sv-rec-card > *` и мора да остане за да
се цртаат НАД ::before превезот. */
margin-bottom: auto;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.sv-rec-badge {
font-weight: 800;
font-size: 0.72rem;
letter-spacing: 0.02em;
padding: 5px 9px;
border-radius: 999px;
background: #e11d48;
color: #fff;
}
.sv-rec-badge.sv-own { background: var(--brand-accent, #f97316); }
.sv-rec-badge.sv-here { background: #0f766e; }
.sv-rec-skeleton {
min-height: 200px;
border-radius: 20px;
background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.09) 37%, rgba(0,0,0,0.05) 63%);
background-size: 400% 100%;
animation: sv-shimmer 1.3s ease infinite;
}
@keyframes sv-shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
@media (max-width: 640px) {
a.sv-rec-card { min-height: 168px; }
.sv-rec-name { font-size: 1.05rem; }
}
/* ── Една лента што тече (30.08.2026) ──────────────────────────────────────
Андреј: „vo 2 reda e too much treba da animira ne radi reda". Наместо
мрежа во редови — еден ред што сам се лизга (marquee). JS-от ја удвојува
содржината во две идентични `.sv-rec-half`; поместување за −50% од
`.sv-rec-track` е точно една половина, па јамката нема шев. Размакот меѓу
половините го дава padding-right НА половината — gap меѓу нив би го
растурил порамнувањето.
Пауза на hover/фокус/допир: подвижна цел не се кликнува. */
/* Простор за подигањето (11.09.2026): `overflow:hidden` ја сечеше
картичката кревната 4px — горните заоблени агли излегуваа рамни, а сенката
одсечена (мерено: врв на картичката y=346,4, врв на лентата 350,4).
Подлогата го дава просторот, негативната маргина го враќа распоредот. */
.sv-rec-strip {
--sv-rec-w: min(78vw, 300px);
overflow: hidden;
padding: 12px 0 28px;
margin: -12px 0 -28px;
}
.sv-rec-track {
display: flex;
width: max-content;
animation: sv-rec-flow var(--sv-rec-dur, 54s) linear infinite;
will-change: transform;
}
.sv-rec-track.sv-rec-static { animation: none; }
.sv-rec-half { display: flex; gap: 16px; padding-right: 16px; }
/* `width` покрај `flex-basis` (11.09.2026): во Safari и Firefox половината
беше потесна од содржината (975 наспроти 1068px на 1440), па шевот на
јамката легнуваше врз картичка — чекори 364,364,247,364. Со ширина
половината е точно колку содржината во сите три мотори. */
.sv-rec-half > * { flex: 0 0 var(--sv-rec-w); width: var(--sv-rec-w); }
@media (min-width: 900px) {
.sv-rec-strip { --sv-rec-w: 340px; }
.sv-rec-half { gap: 24px; padding-right: 24px; }
}
@keyframes sv-rec-flow { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.sv-rec-strip:hover .sv-rec-track,
.sv-rec-strip:focus-within .sv-rec-track,
.sv-rec-strip:active .sv-rec-track { animation-play-state: paused; }
/* Кој побарал помалку движење — добива мирна лента со рачно лизгање. */
@media (prefers-reduced-motion: reduce) {
.sv-rec-track { animation: none; }
.sv-rec-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sv-rec-half[aria-hidden="true"] { display: none; }
}
/* Старата мрежа останува САМО за прозорецот на кешот (max-age 300): HTML со
стар ?v= уште 5 минути може да го носи стариот JS што црта `.sv-rec-grid`.
По 30.08.2026+5мин слободно се брише. */
.sv-rec-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .sv-rec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sv-rec-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* ── Структуриран опис во нивниот дијалог на хотел (12.09.2026) ──────────────
Андреј: „koga ke se otvorat kartickite na hotelite da ima strukturiran opis ne
haos" · „od telefon dobro izgleda a tekstot zalepen cudno". Нивниот дијалог
(`.sv-details-dialog`, класа од закрпа) го црта описот со dangerouslySetInnerHTML,
значи HTML од нашата рута излегува како што е: параграфи,
секции (Локација · Сместување · Исхрана · Плажа · За деца), чипови
за содржините. Ништо не се вметнува во нивното дрво — само стил врз јазли што
ТИЕ ги цртаат од нашиот текст. Mobile-first: чиповите се ознаки (не копчиња),
0 хоризонтален скрол (flex-wrap). */
.sv-details-dialog p { margin: 0 0 .7em; }
.sv-details-dialog p:last-child { margin-bottom: 0; }
.sv-details-dialog .sv-opis-kratko { font-size: .95rem; line-height: 1.5; margin-bottom: .9em; }
.sv-details-dialog .sv-opis-kratko b { font-weight: 700; color: var(--brand-text, #111); }
.sv-details-dialog h4.sv-opis-h {
margin: 1.1em 0 .35em; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--brand-accent, #f26a21);
}
.sv-details-dialog ul.sv-amen {
list-style: none; margin: .2em 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.sv-details-dialog ul.sv-amen li {
display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px;
border: 1px solid var(--brand-border, #e3e6ea); border-radius: 999px;
background: rgba(var(--brand-accent-rgb, 242,106,33), .06);
font-size: .8rem; line-height: 1.3; color: var(--brand-text, #111); white-space: nowrap;
}
@media (min-width: 640px) {
.sv-details-dialog .sv-opis-kratko { font-size: 1rem; }
.sv-details-dialog ul.sv-amen li { font-size: .82rem; }
}