` priradíme aj `--rich` modifier
* (signal že obsah pochádza z `ts_render_rich_text()`). Vlastné rules pre
* bullety/headings sú v portal.css (zdielané so .cms-prose / .cms-body). */
.hotel-page__prose--rich {
font-size: 1.05rem;
line-height: 1.65;
}
.hotel-page__muted {
color: var(--ink-soft);
font-size: 15px;
}
.hotel-page__map-section {
margin: 28px 0 36px;
padding-top: 28px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.hotel-page__map-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.hotel-page__map-actions {
margin: 0;
}
.hotel-sk-map {
width: 100%;
margin: 0;
padding: 12px 14px 14px;
}
.hotel-sk-map__canvas {
position: relative;
width: 100%;
line-height: 0;
}
.hotel-sk-map__svg {
display: block;
width: 100%;
height: auto;
}
.hotel-sk-map__pin {
position: absolute;
width: 28px;
height: 28px;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.hotel-sk-map__pin-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary);
border: 3px solid rgba(172, 133, 16, 0.85);
}
.hotel-sk-map__pin:hover .hotel-sk-map__pin-dot,
.hotel-sk-map__pin:focus-visible .hotel-sk-map__pin-dot {
background: rgba(172, 133, 16, 0.85);
border-color: var(--primary);
}
.hotel-sk-map__pin:focus-visible {
outline: 2px solid rgba(172, 133, 16, 0.85);
outline-offset: 4px;
border-radius: 999px;
}
.hotel-page__h2 {
font-family: var(--font-display);
font-size: 1.45rem;
margin: 0 0 20px;
color: var(--primary);
}
.hotel-page__grid-packages {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.hotel-page__sticky {
position: sticky;
top: 88px;
}
/* Celý pravý „stĺpec“ detailu hotela → sticky len na širších obrazovkách */
.hotel-page__aside-stick {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
align-self: start;
}
@media (min-width: 980px) {
.ts-hotel-detail .hotel-page__aside-stick.hotel-page__sticky {
position: sticky;
top: 88px;
align-self: start;
max-height: max-content;
overflow-y: auto;
overscroll-behavior: contain;
}
}
@media (max-width: 979.98px) {
.ts-hotel-detail .hotel-page__aside-stick.hotel-page__sticky {
position: static;
top: auto;
max-height: none;
overflow: visible;
}
}
/* ——— Bočný formulár: zdieľané štýly polí aj pre blok hostí pod kalendárom ——— */
.hotel-book-card {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid rgba(7, 21, 50, 0.12);
box-shadow: 0 18px 50px rgba(7, 21, 50, 0.08);
padding: 22px 22px 24px;
}
.hotel-book-card__title {
font-family: var(--font-display);
font-size: 1.2rem;
margin: 0 0 8px;
color: var(--primary);
}
.hotel-book-card__lead {
margin: 0 0 16px;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.45;
}
.hotel-book-card__form {
display: flex;
flex-direction: column;
gap: 12px;
}
.hotel-book-card__field span {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
margin-bottom: 6px;
}
.hotel-book-card__field input {
width: 100%;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgba(7, 21, 50, 0.15);
padding: 11px 12px;
font-size: 15px;
font-family: var(--font-sans);
}
.hotel-book-card__field select {
width: 100%;
box-sizing: border-box;
border-radius: 10px;
border: 1px solid rgba(7, 21, 50, 0.15);
padding: 11px 12px;
font-size: 15px;
font-family: var(--font-sans);
background: var(--white);
}
.hotel-book-card__child-hint {
font-size: 12px;
margin: -4px 0 10px;
line-height: 1.35;
}
.hotel-book-card__child-ages {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
width: 100%;
margin-top: 8px;
}
@media (max-width: 520px) {
.hotel-book-card__child-ages {
grid-template-columns: 1fr;
}
}
.hotel-book-card__child-age span {
display: block;
font-weight: 500;
}
.hotel-book-card__submit {
width: 100%;
margin-top: 6px;
justify-content: center;
}
.hotel-book-card__hint {
min-height: 1.25em;
margin: 14px 0 8px;
font-size: 13px;
}
.hotel-book-card__external {
width: 100%;
margin-top: 16px;
justify-content: center;
}
/* ——— Bočný baner: doplnkové predaje ——— */
.hotel-aside-card {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid rgba(7, 21, 50, 0.12);
box-shadow: 0 18px 50px rgba(7, 21, 50, 0.08);
padding: 22px 22px 24px;
text-align: left;
}
.hotel-aside-card__title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.28;
margin: 0 0 10px;
padding: 0;
color: var(--primary);
text-align: left;
width: 100%;
box-sizing: border-box;
}
.hotel-aside-card__lead {
margin: 0 0 18px;
font-size: 14px;
color: var(--ink-soft);
line-height: 1.5;
text-align: left;
}
.hotel-aside-acc {
border-bottom: 1px solid rgba(7, 21, 50, 0.1);
padding-bottom: 2px;
}
.hotel-aside-acc:last-of-type {
border-bottom: none;
}
.hotel-aside-acc__summary {
list-style: none;
cursor: pointer;
padding: 11px 0;
font-family: var(--font-sans, system-ui, sans-serif);
font-weight: 600;
font-size: 0.95rem;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.hotel-aside-acc__summary::-webkit-details-marker {
display: none;
}
.hotel-aside-acc__label {
flex: 1 1 auto;
min-width: 0;
text-align: left;
line-height: 1.3;
}
.hotel-aside-acc__summary::after {
content: '›';
flex: 0 0 auto;
transition: transform 0.15s ease;
font-size: 1.2rem;
line-height: 1;
opacity: 0.55;
font-weight: 400;
}
details[open].hotel-aside-acc > .hotel-aside-acc__summary::after {
transform: rotate(90deg);
}
.hotel-aside-acc__count {
flex: 0 0 auto;
font-weight: 600;
opacity: 0.72;
font-size: 0.88rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.hotel-aside-acc__body {
padding: 0 0 14px;
}
.hotel-aside-thumb-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.hotel-aside-thumb {
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
color: var(--primary);
font-size: 12px;
line-height: 1.35;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(7, 21, 50, 0.12);
background: var(--bg-muted);
padding: 0 0 8px;
}
.hotel-aside-thumb__img {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: rgba(7, 21, 50, 0.06);
}
.hotel-aside-thumb__img .ts-media {
border-radius: 0;
}
.hotel-aside-thumb__label {
padding: 0 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hotel-aside-acc__more {
width: 100%;
margin-top: 10px;
justify-content: center;
}
.hotel-aside-acc__empty {
margin: 8px 0 0;
font-size: 13px;
color: var(--ink-soft);
}
.hotel-aside-card__external {
width: 100%;
margin-top: 18px;
justify-content: center;
}
.hotel-avail-results {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px;
}
.hotel-avail-results__empty {
margin: 0;
font-size: 14px;
color: var(--ink-soft);
}
/* Hint nad výsledkami — informuje o ARI obmedzeniach (CTA/CTD/min_los)
ktoré ovplyvnili dostupnosť pre zvolený termín. */
.hotel-avail-results__note {
margin: 0 0 4px;
padding: 10px 14px;
font-size: 13px;
line-height: 1.5;
color: #8a4a00;
background: #fff4e0;
border: 1px solid rgba(172, 133, 16, 0.45);
border-radius: var(--radius);
}
.hotel-rate-card {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid rgba(7, 21, 50, 0.12);
background: var(--bg-muted);
}
.hotel-rate-card--blocked {
opacity: 0.78;
border-style: dashed;
}
.hotel-rate-card--blocked .hotel-rate-card__price {
text-decoration: line-through;
color: var(--ink-soft);
}
.hotel-rate-card__restrict {
font-size: 12px;
line-height: 1.4;
color: #8a4a00;
font-weight: 600;
}
.hotel-rate-card__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.hotel-rate-card__room {
font-size: 15px;
color: var(--primary);
}
.hotel-rate-card__board {
font-size: 13px;
color: var(--ink-soft);
}
.hotel-rate-card__cancel {
font-size: 12px;
line-height: 1.35;
color: var(--primary);
}
.hotel-rate-card__price {
font-weight: 700;
font-size: 15px;
color: var(--primary);
}
.hotel-rate-card__btn {
flex-shrink: 0;
}
/* ——— Card pod hero + ghost tlačidlá na svetlom pozadí ——— */
.ts-hotel-detail .hotel-page__layout {
margin-top: -42px;
position: relative;
z-index: 4;
padding-top: 0;
}
.ts-hotel-detail .hotel-page__main {
background: var(--white);
border-radius: var(--radius-lg);
padding: clamp(22px, 3.5vw, 42px);
box-shadow: var(--shadow-soft);
border: 1px solid rgba(7, 21, 50, 0.09);
}
.ts-hotel-detail .hotel-page .btn--ghost {
border-color: rgba(7, 21, 50, 0.24);
color: var(--primary);
}
.ts-hotel-detail .hotel-page .btn--ghost:hover {
background: var(--bg-muted);
color: var(--primary);
border-color: rgba(7, 21, 50, 0.38);
}
.ts-hotel-detail .hotel-page__keywords {
padding: 14px 18px;
background: var(--bg-muted);
border-radius: var(--radius);
border: 1px solid rgba(7, 21, 50, 0.07);
}
.ts-hotel-detail .hotel-page__keywords strong {
color: var(--primary);
}
.ts-hotel-detail .hotel-page__packages {
margin-top: 8px;
padding-top: 32px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.ts-hotel-detail .hotel-page__prose {
max-width: 68ch;
}
/* Šírková stabilita v gride — min/max-width na úzkych displejoch bez ovplyvnenia sticky na desktope */
@media (max-width: 979.98px) {
#main.hotel-page,
.ts-hotel-detail .hotel-page__layout {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.ts-hotel-detail .hotel-page__main,
.ts-hotel-detail .hotel-page__aside {
max-width: 100%;
min-width: 0;
}
/*
* Pozor: overflow-x: hidden na #main na širokej obrazovke mení použitú hodnotu overflow-y
* (visible → auto) a #main sa stane scroll kontajnerom — sticky sidebar potom „pláva“
* a prekrýva hero/layout. Kontrola horizontálu iba pod max-width šablóny dvojstĺpca.
*/
#main.hotel-page {
overflow-x: hidden;
}
@supports (overflow: clip) {
#main.hotel-page {
overflow-x: clip;
}
}
}
@media (max-width: 559.98px) {
.hotel-room-teaser {
grid-template-columns: 1fr;
--hotel-room-teaser-h: clamp(152px, 46vw, 210px);
gap: 10px;
padding: 10px;
}
/* Dlhý jednoriadkový riadok tlačil minú šírku stĺpca mimo viewport */
.hotel-room-teaser__facts {
white-space: normal;
}
}
@media (max-width: 619.98px) {
.hotel-cal__months {
grid-template-columns: 1fr;
}
}
/* Galéria hotela ——— */
.ts-hotel-detail .hotel-aside-gallery {
margin: 0;
padding: 18px 18px 20px;
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid rgba(7, 21, 50, 0.12);
}
.hotel-aside-gallery__h {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.28;
margin: 0 0 8px;
padding: 0;
color: var(--primary);
}
.hotel-aside-gallery__lead {
margin: 0 0 12px;
font-size: 13px;
line-height: 1.45;
}
.hotel-property-gallery {
margin-top: 14px;
--hotel-property-gallery-h: clamp(160px, 32vw, 320px);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid rgba(7, 21, 50, 0.1);
background: rgba(255, 255, 255, 0.86);
}
.ts-hotel-detail .hotel-aside-gallery .hotel-property-gallery {
margin-top: 0;
}
.hotel-property-gallery--aside {
--hotel-property-gallery-h: clamp(108px, 18vw, 200px);
margin-top: 0;
}
@media (min-width: 980px) {
.hotel-property-gallery--aside {
--hotel-property-gallery-h: clamp(120px, 14vw, 180px);
}
}
.hotel-property-gallery__swiper .swiper-slide,
.hotel-property-gallery__swiper .swiper-wrapper,
.hotel-property-gallery__swiper {
height: var(--hotel-property-gallery-h);
max-height: var(--hotel-property-gallery-h);
}
.hotel-property-gallery-slide {
margin: 0;
}
.hotel-property-gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hotel-property-gallery__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.55);
background: rgba(7, 21, 50, 0.35);
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease;
}
.hotel-property-gallery__nav:hover {
background: rgba(7, 21, 50, 0.5);
}
.hotel-property-gallery__nav:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.hotel-property-gallery__nav--prev {
left: 8px;
}
.hotel-property-gallery__nav--next {
right: 8px;
}
.hotel-property-gallery__swiper {
position: relative;
}
.hotel-property-gallery--single .hotel-property-gallery__nav {
display: none;
}
.hotel-property-gallery__nav.swiper-button-disabled {
opacity: 0.35;
pointer-events: none;
}
/* ——— Typy izieb (kompaktný teaser + popup) ——— */
.hotel-page__rooms {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
margin-bottom: 15px;
}
.hotel-room-grid {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.hotel-room-grid--limit-teasers:not(.hotel-room-grid--expanded) .hotel-room-teaser--collapsed-extra {
display: none;
}
.hotel-room-grid__toggle-wrap {
margin: 18px 0 6px;
text-align: center;
}
/* Nenápadné rozšírenie zoznamu izieb (nad „max 3“ v collapsed stave) */
.hotel-room-grid__toggle--subtle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 auto;
padding: 7px 14px;
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.01em;
color: rgba(7, 21, 50, 0.58);
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(7, 21, 50, 0.14);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.hotel-room-grid__toggle--subtle::after {
content: "▾";
font-size: 10px;
line-height: 1;
opacity: 0.72;
}
.hotel-room-grid--expanded .hotel-room-grid__toggle--subtle::after {
content: "▴";
}
.hotel-room-grid__toggle--subtle:hover,
.hotel-room-grid__toggle--subtle:focus-visible {
color: rgba(7, 21, 50, 0.88);
border-color: rgba(7, 21, 50, 0.22);
background: rgba(255, 255, 255, 0.95);
outline: none;
}
.hotel-room-grid__toggle--subtle:focus-visible {
box-shadow: 0 0 0 2px rgba(7, 21, 50, 0.12);
}
.hotel-room-teaser {
--hotel-room-teaser-h: clamp(124px, 18vw, 168px);
display: grid;
grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
gap: 12px;
align-items: stretch;
padding: 10px 12px;
min-height: 108px;
border-radius: var(--radius-lg);
border: 1px solid rgba(7, 21, 50, 0.1);
background: rgba(255, 255, 255, 0.86);
overflow: hidden;
}
@media (max-width: 560px) {
.hotel-room-teaser {
grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
gap: 10px;
padding: 8px;
}
}
.hotel-room-teaser__carousel {
position: relative;
min-width: 0;
max-height: var(--hotel-room-teaser-h);
border-radius: var(--radius, 12px);
overflow: hidden;
background: rgba(7, 21, 50, 0.06);
}
.hotel-room-teaser-swiper .swiper-slide {
height: var(--hotel-room-teaser-h);
}
.hotel-room-teaser-swiper,
.hotel-room-teaser-swiper .swiper-wrapper {
height: var(--hotel-room-teaser-h);
max-height: var(--hotel-room-teaser-h);
}
.hotel-room-teaser-slide img {
display: block;
width: 100%;
height: 100%;
max-height: var(--hotel-room-teaser-h);
object-fit: cover;
}
.hotel-room-teaser__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--primary);
cursor: pointer;
font-size: 1.85rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.hotel-room-teaser__nav--prev {
left: 6px;
}
.hotel-room-teaser__nav--next {
right: 6px;
}
.hotel-room-teaser--single .hotel-room-teaser__nav {
display: none;
}
.hotel-room-teaser__nav.swiper-button-disabled {
opacity: 0.2;
}
.hotel-room-teaser__ph {
height: var(--hotel-room-teaser-h);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: rgba(7, 21, 50, 0.45);
}
.hotel-room-teaser__panel {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
min-height: 0;
height: 100%;
align-self: stretch;
padding: 4px 0 2px;
}
.hotel-room-teaser__title {
margin: 0;
font-size: 0.94rem;
line-height: 1.28;
color: var(--primary);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 560px) {
.hotel-room-teaser__title {
font-size: 0.92rem;
}
}
.hotel-room-teaser__facts {
margin: 0;
font-size: 11px;
line-height: 1.38;
color: var(--primary);
opacity: 0.92;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hotel-room-teaser__amenities--flat {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px 8px;
margin: 4px 0 0;
padding: 0;
list-style: none;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
@media (max-width: 560px) {
.hotel-room-teaser__amenities--flat {
grid-template-columns: 1fr;
}
.hotel-room-teaser__amenities--flat .hotel-room-teaser__amenity:nth-child(n + 4) {
display: none;
}
}
.hotel-room-teaser__amenity {
display: flex;
align-items: flex-start;
gap: 5px;
margin: 0;
padding: 0;
border: none;
background: none;
font-size: 10.5px;
line-height: 1.3;
color: var(--primary);
overflow: hidden;
}
.hotel-room-teaser__amenity-imgwrap {
flex-shrink: 0;
margin-top: 1px;
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
background: none;
}
.hotel-room-teaser__amenity-icon {
display: block;
width: 16px;
height: 16px;
object-fit: contain;
}
.hotel-room-teaser__amenity-txt {
min-width: 0;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
}
.hotel-room-teaser__amenity-val {
font-weight: 600;
}
.hotel-room-teaser__more {
align-self: flex-start;
margin-top: auto;
padding: 0;
border: none;
background: none;
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 500;
color: var(--primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.hotel-room-teaser__more:hover {
opacity: 0.88;
}
.hotel-room-teaser__more:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 3px;
}
/* Modal — plný detail */
dialog.hotel-room-dialog {
max-width: min(920px, 96vw);
width: 100%;
max-height: min(94vh, 900px);
padding: 0;
margin: auto;
border: 1px solid rgba(7, 21, 50, 0.15);
border-radius: var(--radius-lg);
background: var(--white, #fff);
color: var(--primary);
box-shadow: 0 16px 50px rgba(7, 21, 50, 0.18);
overflow: hidden;
}
dialog.hotel-room-dialog::backdrop {
background: rgba(7, 21, 50, 0.45);
backdrop-filter: blur(2px);
}
.hotel-room-dialog__inner {
display: flex;
flex-direction: column;
max-height: min(94vh, 900px);
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.hotel-room-dialog__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 14px;
padding: clamp(14px, 3vw, 22px);
padding-bottom: 12px;
border-bottom: 1px solid rgba(7, 21, 50, 0.1);
}
.hotel-room-dialog__close-form {
margin: 0;
padding: 0;
}
.hotel-room-dialog__close {
width: 40px;
height: 40px;
padding: 0;
margin: 0;
align-self: start;
border: none;
background: transparent;
color: var(--primary);
font-size: 1.85rem;
line-height: 1;
cursor: pointer;
border-radius: var(--radius, 10px);
}
.hotel-room-dialog__close:focus-visible {
outline: 2px solid var(--primary);
}
.hotel-room-dialog__close:hover {
opacity: 0.75;
}
.hotel-room-dialog__title {
margin: 0;
font-size: clamp(1.12rem, 3vw, 1.42rem);
font-family: var(--font-display, Fraunces, Georgia, serif);
color: var(--primary);
line-height: 1.26;
}
.hotel-room-dialog__carousel {
position: relative;
padding: 0 clamp(14px, 3vw, 22px);
padding-top: 10px;
background: rgba(7, 21, 50, 0.03);
}
/* Pomer strán galérie v modále ~ 16∶10 (orez cez object-fit), stabilná výška pre Swiper */
.hotel-room-dialog__carousel .hotel-room-dialog-swiper {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--radius);
overflow: hidden;
}
.hotel-room-dialog-swiper .swiper-wrapper {
height: 100%;
}
.hotel-room-dialog-swiper .swiper-slide {
height: 100%;
}
.hotel-room-dialog-slide__media {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.hotel-room-dialog-slide__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hotel-room-dialog__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: var(--primary);
cursor: pointer;
font-size: 2rem;
line-height: 1;
}
.hotel-room-dialog__nav--prev {
left: 18px;
}
.hotel-room-dialog__nav--next {
right: 18px;
}
.hotel-room-dialog--single .hotel-room-dialog__nav {
display: none;
}
.hotel-room-dialog__nav.swiper-button-disabled {
opacity: 0.25;
}
.hotel-room-dialog__prose {
padding: 14px clamp(14px, 3vw, 22px);
font-size: 14px;
line-height: 1.62;
color: var(--primary);
}
.hotel-room-dialog__short,
.hotel-room-dialog__desc {
margin: 0 0 10px;
}
.hotel-room-dialog__desc:last-child,
.hotel-room-dialog__short:last-child {
margin-bottom: 0;
}
.hotel-room-dialog__prose p {
margin: 0 0 0.8em;
}
.hotel-room-dialog__prose p:last-child {
margin-bottom: 0;
}
.hotel-room-dialog__prose ul,
.hotel-room-dialog__prose ol {
margin: 0.4em 0 0.9em;
padding-left: 1.4em;
}
.hotel-room-dialog__prose ul { list-style: disc outside; }
.hotel-room-dialog__prose ol { list-style: decimal outside; }
.hotel-room-dialog__prose li {
margin: 0.2em 0;
padding-left: 0.2em;
}
.hotel-room-dialog__prose li::marker {
color: var(--accent, #ac8510);
}
.hotel-room-dialog__prose strong,
.hotel-room-dialog__prose b {
font-weight: 700;
}
.hotel-room-dialog__facts-inline {
margin: 0 clamp(14px, 3vw, 22px) 14px;
padding: 0;
font-size: 13px;
font-weight: 600;
color: var(--primary);
opacity: 0.93;
}
.hotel-room-dialog__amen-block {
padding: 0 clamp(14px, 3vw, 26px) 22px;
}
.hotel-room-dialog__amen-h {
margin: 10px 0 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
opacity: 0.76;
}
.hotel-room-dialog__amenities--flat {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 20px;
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 520px) {
.hotel-room-dialog__amenities--flat {
grid-template-columns: 1fr;
}
}
.hotel-room-dialog__amenity {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
padding: 0;
border: none;
background: none;
font-size: 13px;
color: var(--primary);
}
.hotel-room-dialog__amenity-icon {
display: block;
width: 22px;
height: 22px;
object-fit: contain;
}
.hotel-room-dialog__amenity-txt {
line-height: 1.42;
}
.hotel-room-dialog__amenity-val {
font-weight: 600;
}
/* ——— Kalendár dostupnosti ——— */
.hotel-page__calendar-wrap {
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.hotel-cal {
padding: 0;
border-radius: 0;
background: var(--white);
box-shadow: none;
}
.hotel-cal__guests {
margin-top: 20px;
padding: 18px 18px 22px;
border-radius: 15px;
background: rgba(7, 21, 50, 0.03);
}
.hotel-cal__guests--hidden {
display: none !important;
}
.hotel-cal__guests-title {
margin: 0 0 6px;
font-size: 1.08rem;
font-family: var(--font-display, Fraunces, Georgia, serif);
color: var(--primary);
}
.hotel-cal__guests-lead {
margin: 0 0 14px;
font-size: 13px;
}
.hotel-cal__guest-form {
margin: 0;
}
.hotel-cal__guest-grid {
display: grid;
gap: 12px;
grid-template-columns: 1fr 1fr;
}
.hotel-cal__guest-field-full {
grid-column: 1 / -1;
}
.hotel-cal__guest-submit {
width: 100%;
margin-top: 10px;
}
@media (max-width: 560px) {
.hotel-cal__guest-grid {
grid-template-columns: 1fr;
}
}
.hotel-cal__pick-hint {
margin: 0 0 14px;
padding: 11px 14px;
font-size: 13px;
line-height: 1.45;
color: var(--primary);
background: rgba(7, 21, 50, 0.045);
border-radius: 0;
border-left: 3px solid rgba(7, 21, 50, 0.35);
}
.hotel-cal__results-wrap {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.hotel-cal__results-wrap--empty .hotel-cal__results-heading,
.hotel-cal__results-wrap--empty .hotel-cal__search-status,
.hotel-cal__results-wrap--empty .hotel-cal__results {
display: none;
}
.hotel-cal__results-heading {
margin: 0 0 10px;
font-size: 1.05rem;
font-family: var(--font-display, Fraunces, Georgia, serif);
color: var(--primary);
}
.hotel-cal__search-status {
margin: 0 0 12px;
font-size: 13px;
color: var(--ink-soft);
min-height: 1.2em;
}
.hotel-cal .hotel-avail-results {
margin-top: 0;
}
.hotel-cal__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.hotel-cal__heading {
margin: 0;
flex: 1;
text-align: center;
font-size: clamp(1.15rem, 2.8vw, 1.45rem);
}
.hotel-cal__nav {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 34px;
border: none;
background: #f4f5f6;
color: var(--primary);
font-size: 20px;
line-height: 1;
cursor: pointer;
}
.hotel-cal__nav:hover {
background: var(--bg-muted);
}
.hotel-cal__lead {
margin: 0 0 12px;
font-size: 14px;
}
.hotel-cal__status {
margin: 0 0 12px;
min-height: 1.25em;
font-size: 13px;
color: var(--ink-soft);
}
.hotel-cal__loader {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--primary);
margin-bottom: 14px;
}
.hotel-cal__loader--hide {
display: none;
}
.hotel-cal__spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(7, 21, 50, 0.15);
border-top-color: var(--accent, #ac8510);
border-radius: 50%;
animation: hotel-cal-spin 0.7s linear infinite;
}
@keyframes hotel-cal-spin {
to {
transform: rotate(360deg);
}
}
.hotel-cal__months {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(16px, 4vw, 28px);
}
.hotel-cal__month-title {
margin: 0 0 10px;
font-size: 1.05rem;
text-align: center;
color: var(--primary);
font-family: var(--font-display, Fraunces, Georgia, serif);
}
.hotel-cal__weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(7, 21, 50, 0.12);
font-size: 11px;
font-weight: 600;
color: rgba(7, 21, 50, 0.45);
text-align: center;
}
.hotel-cal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.hotel-cal__cell {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 54px;
padding: 8px 4px 7px;
border-radius: 0;
border: none;
background: var(--white);
cursor: default;
font: inherit;
text-align: center;
transition: background 0.12s ease, color 0.12s ease;
}
.hotel-cal__cell:focus-visible {
outline: 2px solid var(--accent, #ac8510);
outline-offset: -2px;
z-index: 2;
}
.hotel-cal__cell--pickable:not(:disabled):hover {
background: rgba(7, 21, 50, 0.04);
box-shadow: none;
z-index: 1;
}
.hotel-cal__cell--inrange {
background: rgba(26, 43, 75, 0.06) !important;
}
.hotel-cal__cell--checkin,
.hotel-cal__cell--checkout {
background: var(--primary) !important;
box-shadow: none;
}
.hotel-cal__cell--checkin .hotel-cal__daynum,
.hotel-cal__cell--checkout .hotel-cal__daynum,
.hotel-cal__cell--checkin .hotel-cal__price-line,
.hotel-cal__cell--checkout .hotel-cal__price-line {
color: var(--white) !important;
}
.hotel-cal__cell--pad {
border: none;
min-height: 54px;
pointer-events: none;
}
.hotel-cal__cell--past,
.hotel-cal__cell--muted {
background: rgba(7, 21, 50, 0.03);
color: rgba(7, 21, 50, 0.35);
}
.hotel-cal__cell--avail {
background: var(--white);
}
.hotel-cal__cell--busy {
background: rgba(255, 224, 230, 0.95);
}
.hotel-cal__daynum {
font-size: 15px;
font-weight: 700;
color: var(--primary);
line-height: 1.15;
}
.hotel-cal__cell--busy .hotel-cal__daynum {
color: rgba(200, 60, 80, 0.95);
}
.hotel-cal__daynum--strike {
text-decoration: line-through;
}
.hotel-cal__price {
margin-top: auto;
padding-top: 4px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: baseline;
white-space: nowrap;
font-size: 10px;
font-weight: 600;
color: rgba(7, 21, 50, 0.45);
line-height: 1.2;
}
.hotel-cal__price-line {
display: inline-block;
white-space: nowrap;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.hotel-cal__cell--avail .hotel-cal__price-line:not(.hotel-cal__price-line--muted):not(.hotel-cal__price-line--pending) {
font-size: 11px;
font-weight: 600;
color: rgba(7, 21, 50, 0.5);
}
.hotel-cal__price-line--pending {
color: transparent;
}
.hotel-cal__price-line--muted {
font-size: 10px;
font-weight: 600;
opacity: 0.8;
}
.hotel-cal__price--soft .hotel-cal__price-line--muted {
color: rgba(7, 21, 50, 0.42);
}
.hotel-cal__cell--busy .hotel-cal__price {
display: none;
}
/* =====================================================================
Aktivity v okolí (TOP 10) — sekcia, kartičky, badge, modal, spinner
===================================================================== */
.hotel-page__nearby-section {
margin: 28px 0 36px;
padding-top: 28px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.hotel-page__nearby-section .hotel-page__h2 small {
display: block;
font-family: var(--font-body);
font-size: 14px;
font-weight: 400;
color: var(--ink-soft);
margin-top: 6px;
}
.hotel-page__nearby-stays {
margin: 0;
padding-top: 0;
}
.hotel-page__nearby-stays--full {
width: 100%;
margin: 0;
padding-top: clamp(40px, 5vw, 64px);
padding-bottom: clamp(48px, 6vw, 80px);
background: var(--bg-muted, #f5f7f9);
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.hotel-page__nearby-stays-head {
text-align: left;
margin-bottom: 0;
}
.hotel-page__nearby-stays-pills {
justify-content: flex-start;
margin: 16px 0 22px;
}
.hotel-page__nearby-stays-grid {
margin-top: 4px;
}
.hotel-page__nearby-stays-cta {
margin: 24px 0 0;
}
.hotel-page__nearby-stays .theme-card__tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 4px;
}
.ts-nearby__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 18px;
margin-bottom: 18px;
}
.ts-nearby__loading {
display: flex;
align-items: center;
gap: 10px;
color: var(--ink-soft);
font-size: 14px;
margin-bottom: 14px;
}
.ts-nearby__spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(7, 21, 50, 0.15);
border-top-color: var(--accent, #ac8510);
border-radius: 50%;
animation: hotel-cal-spin 0.7s linear infinite;
}
.ts-nearby__empty,
.ts-nearby__error {
margin: 6px 0 14px;
color: var(--ink-soft);
font-size: 14px;
}
.ts-nearby__error {
color: #b34a2c;
}
.ts-nearby__actions {
margin-top: 6px;
}
/* Kartička aktivity */
.ts-nearby-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(7, 21, 50, 0.08);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(7, 21, 50, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ts-nearby-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(7, 21, 50, 0.08);
border-color: rgba(7, 21, 50, 0.14);
}
.ts-nearby-card__media {
position: relative;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #eef0f5 0%, #dde2ee 100%);
overflow: hidden;
}
.ts-nearby-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.ts-nearby-card:hover .ts-nearby-card__media img {
transform: scale(1.04);
}
.ts-nearby-card__placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 38px;
color: rgba(7, 21, 50, 0.25);
}
.ts-nearby-card__badges {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 6px;
z-index: 2;
}
.ts-nearby-card__badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--primary);
backdrop-filter: blur(2px);
}
.ts-nearby-card__badge--user {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #7c3a02;
}
.ts-nearby-card__body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.ts-nearby-card__title {
margin: 0;
font-family: var(--font-display);
font-size: 17px;
line-height: 1.25;
color: var(--primary);
}
.ts-nearby-card__title a {
color: inherit;
text-decoration: none;
}
.ts-nearby-card__title a:hover {
text-decoration: underline;
}
.ts-nearby-card__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
color: var(--ink-soft);
align-items: center;
}
.ts-nearby-card__rating {
display: inline-flex;
align-items: center;
gap: 3px;
color: #b8860b;
font-weight: 600;
}
.ts-nearby-card__why {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--accent, #ac8510);
line-height: 1.4;
}
.ts-nearby-card__desc {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--ink);
}
.ts-nearby-card__footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-top: 8px;
}
.ts-nearby-card__link {
font-size: 12.5px;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.ts-nearby-card__link:hover {
text-decoration: underline;
}
/* Modal (návrh aktivity) */
.ts-nearby-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.ts-nearby-modal[hidden] {
display: none;
}
.ts-nearby-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(7, 21, 50, 0.55);
backdrop-filter: blur(2px);
}
.ts-nearby-modal__panel {
position: relative;
background: #fff;
border-radius: 16px;
width: min(560px, 100%);
max-height: calc(100vh - 40px);
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
box-shadow: 0 20px 60px rgba(7, 21, 50, 0.3);
animation: ts-nearby-pop 0.18s ease-out;
}
@keyframes ts-nearby-pop {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ts-nearby-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 8px;
}
.ts-nearby-modal__head h3 {
margin: 0;
font-family: var(--font-display);
font-size: 20px;
color: var(--primary);
}
.ts-nearby-modal__close {
border: none;
background: none;
font-size: 26px;
line-height: 1;
cursor: pointer;
color: rgba(7, 21, 50, 0.5);
padding: 4px 8px;
}
.ts-nearby-modal__close:hover {
color: var(--primary);
}
.ts-nearby-form {
padding: 8px 22px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.ts-nearby-form__intro {
margin: 0;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
}
.ts-nearby-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 540px) {
.ts-nearby-form__row {
grid-template-columns: 1fr;
}
}
.ts-nearby-form__field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--primary);
}
.ts-nearby-form__field span em {
color: #b34a2c;
font-style: normal;
margin-left: 2px;
}
.ts-nearby-form__field input,
.ts-nearby-form__field select,
.ts-nearby-form__field textarea {
font: inherit;
color: var(--ink);
padding: 9px 12px;
border: 1px solid rgba(7, 21, 50, 0.15);
border-radius: 8px;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ts-nearby-form__field input:focus,
.ts-nearby-form__field select:focus,
.ts-nearby-form__field textarea:focus {
outline: none;
border-color: var(--accent, #ac8510);
box-shadow: 0 0 0 3px rgba(172, 133, 16, 0.15);
}
.ts-nearby-form__field textarea {
resize: vertical;
min-height: 80px;
font-family: var(--font-body);
}
.ts-nearby-form__honeypot {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Turnstile v návrhu tipu — rovnaký radius ako vstupy v .ts-nearby-form__field */
.ts-nearby-form__turnstile {
width: 100%;
max-width: 100%;
margin: 4px 0 0;
box-sizing: border-box;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(7, 21, 50, 0.15);
background: #fff;
}
.ts-nearby-form__turnstile .cf-turnstile {
width: 100%;
display: block;
line-height: 0;
}
.ts-nearby-form__turnstile .cf-turnstile iframe {
display: block;
width: 100% !important;
border: 0;
}
.ts-nearby-form__msg {
margin: 4px 0 0;
padding: 8px 12px;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
}
.ts-nearby-form__msg--success {
background: #ecfccb;
color: #3f6212;
border: 1px solid #bef264;
}
.ts-nearby-form__msg--error {
background: #fee2e2;
color: #b91c1c;
border: 1px solid #fca5a5;
}
.ts-nearby-modal__foot {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
}
/* HTML5 [hidden] musí prebiť explicit display:flex z .ts-nearby__loading vyššie. */
.ts-nearby__loading[hidden],
.ts-nearby__grid[hidden],
.ts-nearby__empty[hidden],
.ts-nearby__error[hidden] {
display: none;
}
/* ============================================================
* Sekcia „Hodnotenia z Google" — Place Details (rating + reviews)
* Renderuje sa len ak je v DB google_rating IS NOT NULL.
* ============================================================ */
.hotel-page__google-reviews {
margin: 48px 0;
}
.google-reviews__header {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.google-reviews__header-left {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 240px;
}
.google-reviews__header h2 {
margin: 0;
font-size: clamp(1.4rem, 1rem + 1vw, 1.85rem);
line-height: 1.15;
}
.google-reviews__summary {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
font-size: 0.95rem;
}
.google-reviews__rating-num {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-weight: 700;
font-size: 1.5rem;
color: #111827;
line-height: 1;
}
.google-reviews__rating-num small {
font-weight: 500;
font-size: 0.95rem;
color: #6b7280;
}
.google-reviews__stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: #fbbf24;
font-size: 1.05rem;
letter-spacing: 1px;
line-height: 1;
}
.google-reviews__star--empty {
color: #d1d5db;
}
.google-reviews__count {
color: #6b7280;
font-size: 0.9rem;
}
.google-reviews__see-all {
display: inline-flex;
align-items: center;
gap: 4px;
text-decoration: none;
color: #2563eb;
font-weight: 600;
font-size: 0.92rem;
white-space: nowrap;
}
.google-reviews__see-all:hover {
text-decoration: underline;
}
.google-reviews__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: 16px;
}
.google-review-card {
background: #fff;
border: 1px solid var(--c-border, #e5e7eb);
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
position: relative;
}
.google-review-card__head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.google-review-card__avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f3f4f6 url("data:image/svg+xml;utf8,
") center/65% no-repeat;
flex: 0 0 auto;
overflow: hidden;
}
.google-review-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.google-review-card__author {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.google-review-card__author-name {
font-weight: 600;
font-size: 0.95rem;
color: #111827;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.google-review-card__author-name a {
color: inherit;
text-decoration: none;
}
.google-review-card__author-name a:hover {
text-decoration: underline;
}
.google-review-card__meta {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
font-size: 0.82rem;
color: #6b7280;
}
.google-review-card__stars {
display: inline-flex;
align-items: center;
gap: 1px;
color: #fbbf24;
letter-spacing: 0.5px;
font-size: 0.92rem;
line-height: 1;
}
.google-review-card__time {
color: #6b7280;
}
.google-review-card__text {
margin: 0;
font-size: 0.94rem;
line-height: 1.55;
color: #374151;
white-space: pre-line;
word-break: break-word;
}
.google-review-card__text--collapsed {
cursor: pointer;
}
.google-review-card__translated {
font-size: 0.82rem;
color: #6b7280;
margin: -4px 0 0;
}
.google-review-card__more {
background: none;
border: 0;
color: #2563eb;
font-weight: 600;
font-size: 0.85rem;
padding: 0;
cursor: pointer;
align-self: flex-start;
}
.google-review-card__more:hover {
text-decoration: underline;
}
.google-review-card__full {
display: none;
}
.google-review-card.is-expanded .google-review-card__short {
display: none;
}
.google-review-card.is-expanded .google-review-card__full {
display: block;
}
.google-reviews__disclaimer {
margin: 18px 0 0;
font-size: 0.78rem;
color: #9ca3af;
}
/* Mini-badge .google-rating-badge je v portal.css aby fungoval aj v listingoch. */
@media (max-width: 640px) {
.google-reviews__header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.google-review-card {
padding: 14px;
}
}
/* =============================================================================
FAQ section (sql/025 — host_property_faq + portal_faq.php helper)
============================================================================= */
.hotel-faq {
margin-top: 56px;
}
.hotel-faq__list {
list-style: none;
padding: 0;
margin: 18px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.hotel-faq__item {
background: #fff;
border: 1px solid var(--ts-border, #e3e6ee);
border-radius: 12px;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.hotel-faq__item:has(.hotel-faq__details:not([open])) {
box-shadow: inset 3px 0 0 0 var(--ink);
}
.hotel-faq__item:hover {
border-color: #cbd2e2;
box-shadow: 0 2px 6px rgba(7, 21, 50, 0.04);
}
.hotel-faq__item:has(.hotel-faq__details:not([open])):hover {
box-shadow: inset 3px 0 0 0 var(--ink), 0 2px 6px rgba(7, 21, 50, 0.04);
}
.hotel-faq__details {
padding: 0;
}
.hotel-faq__question {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 20px;
font-weight: 600;
font-size: 1.02rem;
color: #071532;
user-select: none;
border-radius: 12px;
}
.hotel-faq__question::-webkit-details-marker {
display: none;
}
.hotel-faq__question:hover {
background: #f8fafc;
}
.hotel-faq__details[open] > .hotel-faq__question {
background: #f8fafc;
border-bottom: 1px solid #f0f2f8;
border-radius: 12px 12px 0 0;
}
.hotel-faq__q-text {
flex: 1 1 auto;
line-height: 1.4;
}
.hotel-faq__chevron {
flex: 0 0 auto;
width: 22px;
height: 22px;
position: relative;
}
.hotel-faq__chevron::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid #5b6280;
border-bottom: 2px solid #5b6280;
border-radius: 0 0 1px 0;
transform: translate(-50%, -60%) rotate(45deg);
transition: transform 0.2s ease;
}
.hotel-faq__details[open] > .hotel-faq__question .hotel-faq__chevron::before {
transform: translate(-50%, -35%) rotate(-135deg);
}
.hotel-faq__answer {
padding: 14px 20px 18px;
font-size: 0.96rem;
line-height: 1.6;
color: #2c3550;
}
.hotel-faq__toggle {
display: block;
margin: 18px auto 0;
background: none;
border: 1px solid var(--ts-border, #e3e6ee);
color: #ac8510;
font-weight: 600;
font-size: 0.95rem;
padding: 10px 22px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hotel-faq__toggle:hover {
background: #fff5ed;
border-color: #ac8510;
}
@media (max-width: 640px) {
.hotel-faq__question {
padding: 14px 14px;
font-size: 0.98rem;
}
.hotel-faq__answer {
padding: 12px 14px 16px;
font-size: 0.94rem;
}
}
/* ───────── Zjednotené ponuky izieb (host + MPC, horizontálny pás) ───────── */
.hotel-room-offers-unified {
display: flex;
flex-direction: column;
gap: 12px;
}
.hotel-room-offers-unified > .hotel-offer-room,
.hotel-room-offers-unified .hotel-offer-room.hotel-offer-room--unified {
margin-bottom: 0;
}
.hotel-offer-room--unified {
background: #fff;
border: 1px solid rgba(7, 21, 50, 0.1);
border-radius: var(--radius, 14px);
overflow: hidden;
transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.hotel-offer-room--unified:hover {
box-shadow: 0 6px 22px rgba(7, 21, 50, 0.07);
border-color: rgba(7, 21, 50, 0.16);
}
.hotel-offer-room--unified > summary.hotel-offer-room__strip {
list-style: none;
display: grid;
grid-template-columns: 108px minmax(0, 1fr) auto;
gap: 16px 18px;
align-items: center;
padding: 14px 16px 14px 14px;
cursor: pointer;
user-select: none;
}
.hotel-offer-room--unified > summary.hotel-offer-room__strip::-webkit-details-marker {
display: none;
}
.hotel-offer-room__media {
width: 108px;
min-height: 78px;
border-radius: 10px;
overflow: hidden;
background: #f4f6fb;
align-self: center;
}
.hotel-offer-room__swiper {
width: 100%;
height: 78px;
}
.hotel-offer-room__slide img {
width: 100%;
height: 78px;
object-fit: cover;
display: block;
}
.hotel-offer-room__ph {
display: flex;
align-items: center;
justify-content: center;
min-height: 78px;
font-size: 11px;
font-weight: 600;
color: #8b92a8;
text-align: center;
padding: 6px;
}
.hotel-offer-room__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: #071532;
font-size: 16px;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 10px rgba(7, 21, 50, 0.12);
z-index: 2;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hotel-offer-room__nav--prev {
left: 4px;
}
.hotel-offer-room__nav--next {
right: 4px;
}
.hotel-offer-room__swiper {
position: relative;
}
.hotel-offer-room__core {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.hotel-offer-room__title-text {
font-family: var(--font-serif, Georgia, serif);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.25;
color: var(--primary, #071532);
}
.hotel-offer-room__summary {
font-size: 13px;
line-height: 1.4;
color: var(--ink-soft, #6a7185);
}
.hotel-offer-room__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.hotel-offer-room__actions .hotel-offer-room__view {
white-space: nowrap;
}
.hotel-offer-room__expand-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid rgba(7, 21, 50, 0.14);
border-radius: 999px;
background: #fafbff;
font-size: 12px;
font-weight: 600;
color: var(--primary, #071532);
}
.hotel-offer-room__expand-pill .chevron {
width: 12px;
height: 12px;
transition: transform 0.2s ease;
}
.hotel-offer-room--unified[open] .hotel-offer-room__expand-pill .chevron {
transform: rotate(180deg);
}
.hotel-offer-room--unified .hotel-offer-room__list {
border-top: 1px solid rgba(7, 21, 50, 0.06);
padding: 12px 16px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.host-variants__combo-h {
margin-top: 22px;
font-size: 1.22rem;
}
/* Host rate pod-karty v zozname */
.host-offer-rate__badges {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.host-offer-rate__badge {
display: inline-block;
padding: 4px 10px;
background: #f0f2f7;
color: #2b3556;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
}
.host-offer-rate__badge--green {
background: #dcfce7;
color: #15803d;
}
.host-offer-rate__badge--orange {
background: rgba(172, 133, 16, 0.12);
color: #8a6d0d;
font-weight: 600;
}
.host-offer-rate__inclusions {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.host-offer-rate__inclusions li {
font-size: 13px;
color: #15803d;
}
.host-offer-rate__cancel {
font-size: 13px;
color: #5b6280;
margin: 8px 0 0;
}
.host-offer-rate__priceblock {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.host-offer-rate__price-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #6a7185;
}
.host-offer-rate__pernight {
font-size: 12px;
color: #6a7185;
}
@media (max-width: 720px) {
.hotel-offer-room--unified > summary.hotel-offer-room__strip {
grid-template-columns: 88px minmax(0, 1fr);
grid-template-areas:
"media core"
"media actions";
}
.hotel-offer-room__media {
grid-area: media;
width: 88px;
min-height: 72px;
}
.hotel-offer-room__swiper,
.hotel-offer-room__slide img {
height: 72px;
}
.hotel-offer-room__core {
grid-area: core;
}
.hotel-offer-room__actions {
grid-area: actions;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
}
.hotel-room-offers-unified .hotel-offer-rate {
grid-template-columns: 1fr;
}
.hotel-offer-rate__action {
justify-content: space-between;
flex-wrap: wrap;
}
}
/* ——— Google reviews (Place Details sync) — scoped na detail hotela ——— */
.ts-hotel-detail .hotel-page__google-hero {
margin: 0 0 10px;
}
.ts-hotel-detail .hotel-page__google-hero-inner {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
padding: 10px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(10px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
color: rgba(255, 255, 255, 0.98);
text-decoration: none;
max-width: 100%;
}
.ts-hotel-detail .hotel-page__google-hero-inner--link:hover {
background: rgba(255, 255, 255, 0.24);
border-color: rgba(255, 255, 255, 0.45);
}
.ts-hotel-detail .hotel-page__google-hero-inner--link:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.ts-hotel-detail .hotel-page__google-hero-score {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
letter-spacing: 0.02em;
}
.ts-hotel-detail .hotel-page__google-hero-num {
font-size: 1.35rem;
line-height: 1;
}
.ts-hotel-detail .hotel-page__google-hero-stars {
display: inline-flex;
gap: 1px;
font-size: 13px;
line-height: 1;
color: #e8c15a;
}
.ts-hotel-detail .hotel-page__google-hero-star--empty {
color: rgba(255, 255, 255, 0.35);
}
.ts-hotel-detail .hotel-page__google-hero-star--half {
opacity: 0.9;
}
.ts-hotel-detail .hotel-page__google-hero-count {
font-size: 13px;
font-weight: 600;
opacity: 0.92;
letter-spacing: 0.01em;
}
@media (max-width: 520px) {
.ts-hotel-detail .hotel-page__google-hero-inner {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
.ts-hotel-detail .hotel-page__google-reviews-block {
margin: 28px 0 8px;
padding: 24px 0 8px;
border-top: 1px solid rgba(7, 21, 50, 0.08);
}
.ts-hotel-detail .hotel-greviews {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: grid;
gap: 18px;
}
@media (min-width: 720px) {
.ts-hotel-detail .hotel-greviews {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
}
}
.ts-hotel-detail .hotel-greviews__item {
margin: 0;
padding: 16px 18px;
border-radius: 12px;
background: var(--bg-muted, #f4f6fb);
border: 1px solid rgba(7, 21, 50, 0.07);
}
.ts-hotel-detail .hotel-greviews__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 12px;
margin-bottom: 8px;
}
.ts-hotel-detail .hotel-greviews__author {
font-weight: 700;
font-size: 15px;
color: var(--ink, #071532);
}
.ts-hotel-detail .hotel-greviews__date {
font-size: 12px;
font-weight: 600;
color: var(--ink-soft, #5b6280);
white-space: nowrap;
}
.ts-hotel-detail .hotel-greviews__stars {
margin: 0 0 8px;
font-size: 14px;
line-height: 1;
letter-spacing: 1px;
color: #e8a317;
}
.ts-hotel-detail .hotel-greviews__star--on {
color: #e8a317;
}
.ts-hotel-detail .hotel-greviews__star:not(.hotel-greviews__star--on) {
color: rgba(7, 21, 50, 0.22);
}
.ts-hotel-detail .hotel-greviews__text {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink, #1a2238);
}
.ts-hotel-detail .hotel-greviews__more-wrap {
margin: 20px 0 0;
}
/* Časy pod galériou (sidebar) + prevádzkový blok pod recenziami */
.ts-hotel-detail .hotel-aside-times {
margin: 14px 0 0;
padding: 16px 18px 18px;
background: var(--white, #fff);
border-radius: var(--radius-lg, 12px);
border: 1px solid rgba(7, 21, 50, 0.12);
}
.hotel-aside-times__h {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 10px;
color: var(--primary, #071532);
}
.hotel-aside-times__dl {
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.hotel-aside-times__row {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 11px 12px;
border-radius: 10px;
background: rgba(7, 21, 50, 0.025);
border: 1px solid rgba(7, 21, 50, 0.06);
}
.hotel-aside-times__ico {
flex: 0 0 42px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
line-height: 0;
}
.hotel-aside-times__row--in .hotel-aside-times__ico {
background: rgb(219 219 223);
color: #071632;
}
.hotel-aside-times__row--out .hotel-aside-times__ico {
background: rgb(219 219 223);
color: #071632;
}
.hotel-aside-times__svg {
display: block;
width: 22px;
height: 22px;
}
.hotel-aside-times__meta {
min-width: 0;
}
.hotel-aside-times__row dt {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft, #5b6280);
}
.hotel-aside-times__row dd {
margin: 2px 0 0;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
color: #0c2d5c;
}
.hotel-operational {
margin: 10px 0 28px;
padding: 5px
}
.hotel-operational__highlights {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 640px) {
.hotel-operational__highlights {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.hotel-operational__hi {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0;
padding: 12px 14px;
border-radius: 10px;
background: rgba(7, 21, 50, 0.03);
border: 1px solid rgba(7, 21, 50, 0.06);
}
.hotel-operational__hi-ico {
flex: 0 0 auto;
line-height: 0;
color: #0c2d5c;
}
.hotel-op-ico {
display: block;
}
.hotel-operational__hi-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.hotel-operational__hi-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft, #5b6280);
}
.hotel-operational__hi-text {
font-size: 14px;
font-weight: 600;
color: var(--ink, #071532);
line-height: 1.35;
}
.hotel-operational__highlights + .hotel-operational__block--facilities {
margin-top: 18px;
}
.hotel-operational__block--facilities + .hotel-operational__details {
margin-top: 18px;
}
.hotel-operational__details {
margin-top: 16px;
}
.hotel-operational__summary {
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: #0c2d5c;
list-style: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
.hotel-operational__summary::-webkit-details-marker {
display: none;
}
.hotel-operational__summary::after {
content: '▾';
font-size: 12px;
opacity: 0.75;
}
.hotel-operational__details[open] .hotel-operational__summary::after {
content: '▴';
}
.hotel-operational__summary:focus-visible {
outline: 2px solid rgba(12, 45, 92, 0.45);
outline-offset: 3px;
border-radius: 4px;
}
.hotel-operational__panel {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed rgba(7, 21, 50, 0.12);
display: flex;
flex-direction: column;
gap: 18px;
}
.hotel-operational__h3 {
margin: 0 0 8px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-soft, #5b6280);
}
.hotel-operational__block--facilities .hotel-operational__h3 {
margin-bottom: 12px;
}
/*
* Prevádzkový blok vybavenia: masonry cez CSS multi-column (bez zarovnávania riadkov ako grid —
* kartičky sa skladajú stĺpcom ako „pinboard“).
* Zhrnutá výška (collapse) v hotel.php kontroluje cez JS; prah tu typicky ~360–420 px
* (`data-collapsed-max` na `.hotel-operational__fac-masonry-wrap`).
*/
.hotel-operational__fac-groups {
list-style: none;
margin: 0;
padding: 0;
column-gap: 20px;
column-count: 1;
}
@media (min-width: 640px) {
.hotel-operational__fac-groups {
column-count: 2;
}
}
.hotel-operational__fac-group {
display: inline-block;
vertical-align: top;
margin: 0 0 14px;
width: 100%;
box-sizing: border-box;
break-inside: avoid;
page-break-inside: avoid;
padding: 12px 14px;
min-width: 0;
}
.hotel-operational__fac-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 8px;
font-size: 14px;
font-weight: 700;
line-height: 1.25;
color: var(--ink, #071532);
letter-spacing: -0.01em;
}
.hotel-operational__fac-ico {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
color: #0c2d5c;
opacity: 0.92;
}
.hotel-operational__fac-head .hotel-op-ico--cat {
width: 20px;
height: 20px;
}
.hotel-operational__fac-title {
min-width: 0;
}
.hotel-operational__fac-list {
margin: 0;
padding: 0 0 0 1.05rem;
list-style-type: disc;
color: var(--ink, #1a2238);
font-size: 14px;
line-height: 1.5;
}
.hotel-operational__fac-list li {
margin: 0 0 4px;
padding-left: 2px;
}
.hotel-operational__fac-list li:last-child {
margin-bottom: 0;
}
/* Viacriadkové zarovnanie vnútri stĺpca nech nevytvára „mŕtve“ medzery. */
.hotel-operational__fac-masonry-inner .hotel-operational__fac-groups {
column-fill: balance;
}
.hotel-operational__fac-toggle {
cursor: pointer;
margin: 12px 0 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 14px;
font-weight: 600;
color: #0c2d5c;
display: inline-flex;
align-items: center;
gap: 6px;
text-align: left;
}
.hotel-operational__fac-toggle::after {
content: '▾';
font-size: 12px;
opacity: 0.75;
}
.hotel-operational__fac-masonry-wrap--expanded .hotel-operational__fac-toggle::after {
content: '▴';
}
.hotel-operational__fac-toggle:focus-visible {
outline: 2px solid rgba(12, 45, 92, 0.45);
outline-offset: 3px;
border-radius: 4px;
}
.hotel-operational__prose {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink, #1a2238);
}
.hotel-operational__link-row {
margin: 0;
font-size: 14px;
line-height: 1.5;
word-break: break-word;
}
.hotel-operational__link-row a {
color: #0c2d5c;
font-weight: 600;
}
/* ---------------------------------------------------------------------------
* AI sumár Google recenzií (prompt_version=v2 — krátky, pozitívny)
* ---------------------------------------------------------------------------
* Render: prvý child
v hotel.php.
* Zdroj dát: portal_property_review_summary (sql/092 + includes/host_review_summary.php).
*
* UX rozhodnutie: jednoduchá svetlá karta v existujúcich portal tokenoch (--bg-warm,
* --bg-muted, --ink, --ink-soft, --accent…). Žiadne nové farby. Bez dvoj-stĺpcového
* pros/cons layoutu — vizuál krátky a pozitívny: 2-vetový text + 3 chipy s pochvalou.
* --------------------------------------------------------------------------- */
.hotel-ai-review-summary {
margin: 0 0 22px;
padding: 16px 18px 14px;
background: var(--bg-warm, #f5f1ea);
border: 1px solid rgba(7, 21, 50, 0.06);
border-radius: var(--radius, 14px);
color: var(--ink, #071532);
}
.hotel-ai-review-summary__head {
margin: 0 0 8px;
}
.hotel-ai-review-summary__title {
margin: 0;
font-family: var(--font-display, Georgia, serif);
font-size: clamp(17px, 1.8vw, 19px);
line-height: 1.25;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--ink, #071532);
}
.hotel-ai-review-summary__meta {
margin: 4px 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
font-size: 12px;
color: var(--ink-soft, #3d4f66);
line-height: 1.4;
}
.hotel-ai-review-summary__tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent, #ac8510);
}
.hotel-ai-review-summary__meta-text {
display: inline;
}
.hotel-ai-review-summary__text {
margin: 0 0 12px;
max-width: 720px;
font-size: 15px;
line-height: 1.55;
color: var(--ink, #071532);
}
.hotel-ai-review-summary__pros-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 4px;
}
.hotel-ai-review-summary__pros-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-soft, #3d4f66);
}
.hotel-ai-review-summary__pros {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hotel-ai-review-summary__pros li {
font-size: 13px;
font-weight: 500;
line-height: 1.3;
padding: 4px 10px;
border-radius: 999px;
background: var(--bg, #fff);
border: 1px solid rgba(7, 21, 50, 0.08);
color: var(--ink, #071532);
}
.hotel-ai-review-summary__foot {
margin: 10px 0 0;
}
.hotel-ai-review-summary__foot small {
font-size: 11px;
color: var(--ink-soft, #3d4f66);
opacity: 0.75;
line-height: 1.4;
}
@media (max-width: 520px) {
.hotel-ai-review-summary {
padding: 14px 14px 12px;
}
.hotel-ai-review-summary__text {
font-size: 14px;
}
.hotel-ai-review-summary__pros-wrap {
flex-direction: column;
align-items: flex-start;
}
}
/* ---------------------------------------------------------------------------
* "Služby tohto ubytovania" — bookable host_services priamo na hotel detail
* stranicu, hneď nad sekciou „Poloha". Karta linkuje na /host-sluzba///.
*
* Vizuálny jazyk: zhodný so zvyškom portálu (.package-card / .hotel-card) —
* - --bg-warm / --white surface
* - --ink / --ink-soft typografia
* - --accent (gold) jediný highlight (top accent + tag + hover title)
* - --shadow-soft / --shadow lift
* Žiadna kategória nemá vlastnú farbu (do design systému patrí len jeden accent);
* `.hotel-service-card--` ostávajú len ako sémantické háky pre budúcu
* monochromatickú ikonografiu — vizuálne sú identické.
* --------------------------------------------------------------------------- */
.hotel-services {
margin: 32px 0 36px;
padding-top: 28px;
border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}
.hotel-services__head {
margin: 0 0 18px;
}
.hotel-services__head .hotel-page__h2 {
margin-bottom: 6px;
}
.hotel-services__subtitle {
margin: 0;
color: var(--ink-soft);
font-size: 15px;
line-height: 1.55;
max-width: 62ch;
}
.hotel-services__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: 18px;
margin: 18px 0 0;
}
/* Karta — base štýl rovnaký ako .package-card.
* Modifiery `.hotel-service-card--{wellness,dining,experience,extras}` zámerne
* NEzmenené štýly: differenciácia je len cez textový label v body. */
.hotel-service-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius-lg);
background: var(--white);
box-shadow: var(--shadow-soft);
border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
text-decoration: none;
color: var(--ink);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.hotel-service-card::before {
/* Jeden univerzálny gold-accent prúžok — rovnaký pre všetky kategórie. */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--accent);
opacity: 0.85;
}
.hotel-service-card:hover,
.hotel-service-card:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
outline: none;
}
.hotel-service-card__img {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background:
var(--bg-muted)
center / cover no-repeat;
}
.hotel-service-card__img--placeholder {
background:
linear-gradient(
135deg,
var(--bg-warm) 0%,
var(--bg-muted) 70%
);
}
.hotel-service-card__img--placeholder::after {
/* Jemné gold-accent shimmer; žiadne pinks/blues. */
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 30% 30%,
color-mix(in srgb, var(--accent) 14%, transparent),
transparent 55%
),
radial-gradient(
circle at 70% 70%,
color-mix(in srgb, var(--accent) 8%, transparent),
transparent 55%
);
pointer-events: none;
}
.hotel-service-card__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 20px;
}
.hotel-service-card__cat-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 2px;
}
.hotel-service-card__cat {
/* Match .package-card__tag — gold uppercase eyebrow, žiadny chip background. */
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
line-height: 1.2;
}
.hotel-service-card__badge {
/* Match .package-card__badge — neutrálny chip cez bg-muted. */
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 600;
line-height: 1;
padding: 4px 10px;
border-radius: 999px;
background: var(--bg-muted);
color: var(--ink-soft);
letter-spacing: 0.02em;
text-transform: lowercase;
}
.hotel-service-card__title {
margin: 2px 0 0;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
transition: color 0.15s ease;
}
.hotel-service-card:hover .hotel-service-card__title,
.hotel-service-card:focus-visible .hotel-service-card__title {
color: var(--accent);
}
.hotel-service-card__meta {
font-size: 13px;
color: var(--ink-soft);
}
.hotel-service-card__price {
margin-top: auto;
padding-top: 12px;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 10px;
border-top: 1px dashed
color-mix(in srgb, var(--ink) 12%, transparent);
}
.hotel-service-card__price strong {
font-size: 16px;
font-weight: 700;
color: var(--ink);
letter-spacing: 0.01em;
}
.hotel-service-card__price small {
font-size: 12px;
color: var(--ink-soft);
}
.hotel-service-card__cta {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.02em;
}
.hotel-service-card:hover .hotel-service-card__cta,
.hotel-service-card:focus-visible .hotel-service-card__cta {
text-decoration: underline;
text-underline-offset: 3px;
}
/* "Pozrieť všetky služby →" — match .btn--ghost override v hotel-detail.css. */
.hotel-services__foot {
margin-top: 22px;
text-align: center;
}
.hotel-services__more {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 11px 22px;
border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent);
background: transparent;
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--primary);
text-decoration: none;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.hotel-services__more:hover,
.hotel-services__more:focus-visible {
background: var(--bg-muted);
border-color: color-mix(in srgb, var(--ink) 38%, transparent);
color: var(--primary);
outline: none;
}
@media (max-width: 640px) {
.hotel-services__grid {
grid-template-columns: 1fr;
gap: 14px;
}
.hotel-service-card__body {
padding: 16px 18px 18px;
}
.hotel-service-card__title {
font-size: 1.1rem;
}
}
/* =====================================================================
Service booking modal — public/hotel.php "Sluzby tohto ubytovania"
---------------------------------------------------------------------
Klik na .hotel-service-card[data-ts-svc-modal] otvori #tsServiceModal
(natívny