/*
Theme Name:  BURSA
Theme URI:   https://sitedone.tech
Description: Theme for BURSA Hotel Kyiv. Bilingual (EN/UA), content driven by the
             BURSA Core plugin. No frameworks, no build step, no external assets.
Version:     0.1.0
Author:      Site Done
Author URI:  https://sitedone.tech
License:     Proprietary
Text Domain: bursa
Requires PHP: 8.1
*/

/* The recovered site stylesheet is assets/css/site.css, enqueued first and left
   untouched so it stays a faithful copy. Only additions live below. */

/* --- Logo -----------------------------------------------------------------
   In the original build each letter of BURSA was an inline SVG outline, so the
   stylesheet zeroes the font size on their container. We render the letters as
   text in the same Stratos Medium face instead: identical shapes, a fraction of
   the weight, and the per-letter hover transforms in site.css keep working
   because they act on the spans, not on the glyphs. */
/* --- Room galleries -------------------------------------------------------
   Only the selected room's gallery occupies the fixed right column. The site
   stylesheet sets display:block on these from 1025px up, which would otherwise
   beat the `hidden` attribute and stack all six on top of each other. */
.image-block__images-lift[hidden] {
	display: none;
}

/* --- Deferred listing rows ------------------------------------------------
   Rows past the first batch carry the `hidden` attribute, but the browser's
   own display:none for it loses to `.event-row { display: flex }` in the site
   stylesheet. Without this rule they show up straight away with an empty grey
   square, because their picture is still waiting in a data attribute. */
.event-row[hidden] {
	display: none;
}

/* The section label steps aside for the navigation panel: the original removed
   it from the page entirely while the menu was open. */
body.bursa-nav-open .header__content-header {
	display: none;
}

/* --- Language switcher ----------------------------------------------------
   Present in the markup at all times so it needs no JavaScript to exist, but
   only shown while the navigation panel is open, matching the original. */
.header__locale {
	display: none;
}

body.bursa-nav-open .header__locale {
	display: block;
}

/* --- Logo -----------------------------------------------------------------
   The letters are the original outlines, so the per-letter boxes and hover
   transforms in site.css apply unchanged and no overrides are needed here.
   The only addition: the partner badge is an inline SVG rather than the <img>
   the previous build used, so it needs the same height rule. */
.home__dhlogo img,
.home__dhlogo svg {
	height: 25px;
	width: auto;
	display: block;
}

/* --- Room strip -----------------------------------------------------------
   The tiles are inline-block at 50% width, so any whitespace between them in
   the markup adds a few pixels and forces one tile per row. React emitted no
   whitespace; PHP templates do. Zeroing the font size on the container removes
   it, and each tile restores its own. */
.room-preview {
	font-size: 0;
}

.room-preview__item {
	font-size: 1rem;
}

/* The slideshow.

   The original ran a slider library, and the recovered stylesheet still carries
   its class names, so the wrappers are reused and only the movement is written
   out here: a strip of pictures that slides sideways, one screen at a time. */
.home__slideshow .react-slideshow-container,
.home__slideshow .react-slideshow-wrapper.slide {
	height: 100%;
}

.home__slideshow .images-wrap {
	/* The stylesheet lets these wrap; a sliding strip must stay on one line. */
	flex-wrap: nowrap;
	height: 100%;
	will-change: transform;
}

.home__slideshow .each-slide {
	flex: 0 0 100%;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.home__slideshow .images-wrap {
		transition: none !important;
	}
}


/* The overlay is a flex container, and a display rule beats the hidden
   attribute, so it needs saying explicitly. */
.subscribe-window[hidden] { display: none; }


/* The share buttons were clickable divs on the previous site and are real links
   here, so the spacing rules written for those divs need to reach them too. */
.social-share-block > a { display: inline-block; margin-right: 5px; outline: none; }
.social-share-block > a:last-child { margin-right: 0; }

@media (min-width: 1025px) {
	.social-share-block > a { transition: transform .3s; transform: scale(1); }
	.social-share-block > a:hover { transform: scale(1.1); }
}

/* The cookie notice, the newsletter modal and the picture viewer were all given
   the same stacking level originally, so whichever came last in the markup won.
   The notice is the least urgent of the three, so it goes under them. */
.subscribe-window { z-index: 1350; }
.swipe-carousel { z-index: 1350; }

/* The phone picture viewer.

   Paging is the browser's own scroll snapping: one screen-wide slide per
   picture, swiped with a finger. The original loaded a slider library to do
   the same thing. */
.swipe-carousel[hidden] { display: none; }

/* Same reason as the checkout sheet: the visible height, not the page height. */
.swipe-carousel,
.swipe-carousel__image-container { height: 100dvh; }

.swipe-carousel__close {
	border: none;
	background: none;
	cursor: pointer;
}

.swipe-carousel__image-container {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.swipe-carousel__image-container::-webkit-scrollbar { display: none; }

.swipe-carousel__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swipe-carousel__slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}


/* ===========================================================================
   BURSA Shop, a sketch for the client.

   The arrangement is the site's own: a list on the left, and on the right the
   fixed half of the window that every other section fills with photographs,
   here holding the goods themselves. A phone has no such half, so there the
   card rises from the bottom instead.

   Nothing new is invented: the type sizes, the faces, the grey of the picture
   columns, the black hairline of the fields, blue for whatever is being touched
   and red for the one button that matters are all taken from the site.
   =========================================================================== */

.shop-note {
	font-size: 11px;
	font-family: stratos-light;
	opacity: .6;
}

/* Two across on a phone, and a single column of rows on a wide screen, which is
   how the blog and the packages list themselves. */
.shop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 20px;
	margin-top: 30px;
}

/* The picture and the name are both links, so a product has an address that can
   be opened in a new tab or sent to somebody. Neither wraps the other: buying
   has to be a button of its own.

   The underline a browser draws on links goes: the listings on this site do not
   have one either, and here it would run under the placeholder's own wording. */
.shop-item__image,
.shop-item__name {
	padding: 0;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
}

.shop-item__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	background-color: #f0f0f0;
	margin-bottom: 15px;
	transition: opacity .3s;
}

.shop-item__image:hover { opacity: .65; }

/* The line above the newsletter archive: one sentence and the subscribe
   button, set apart from the rows under it. */
.newsletter-intro {
	margin-bottom: 30px;
}

/* A photograph fills its frame the way the grey stand-in does, so a product
   with pictures and one without occupy exactly the same space. */
.shop-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.shop-item__name {
	display: block;
	margin-bottom: 0;
	font-family: stratos-medium;
	color: #000;
	transition: color .3s;
}

.shop-item__name:hover { color: #00f; }

.shop-item__price {
	display: block;
	margin-bottom: 5px;
}

.shop-item__buy {
	padding-left: 0;
	color: red;
}

/* --- The card ------------------------------------------------------------ */

/* On a phone a product is a page: the address names it, the list steps aside and
   the card takes the screen. On a wide screen the list stays where it is and the
   card fills the half of the window the site keeps its pictures in. */
.shop-cards { display: none; }

body.bursa-shop-product .shop-cards {
	display: block;
	/* The measure every page on this site keeps: clear of the top bar, and the
	   right hand fifth left alone. */
	padding: 110px 20% 0 10px;
}

body.bursa-shop-product [data-bursa-shop-listing] { display: none; }

@media (min-width: 768px) {
	body.bursa-shop-product .shop-cards { padding: 100px 40% 0 30px; }
}

.shop-card__back { margin: 0 0 15px; }

.shop-card[hidden] { display: none; }

.shop-card__strip { position: relative; }

/* The arrows belong to a mouse; a finger swipes and needs no buttons. */
.shop-card__nav { display: none; }

/* The pictures. One at a time on a phone, swiped with a finger: the browser's
   own horizontal scrolling with snap points, which is a real swipe with real
   momentum and nothing to download. */
.shop-card__gallery {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.shop-card__gallery::-webkit-scrollbar { display: none; }

.shop-card__shot {
	flex: 0 0 100%;
	aspect-ratio: 4 / 3;
	background-color: #f0f0f0;
	scroll-snap-align: center;
	padding: 0;
	border: none;
	cursor: pointer;
}

.shop-card__body {
	padding: 20px 0 40px;
}

.shop-card__name {
	margin-bottom: 10px;
}

.shop-card__specs {
	margin: 0 0 15px;
	padding-left: 20px;
}

.shop-card__specs li {
	margin-bottom: 5px;
}

.shop-card__price {
	font-family: stratos-medium;
}

/* Sizes, built like the payment choice but smaller: the radio stays reachable
   from the keyboard, the box beside it does the showing. */
.shop-sizes {
	display: flex;
	gap: 5px;
	margin: 5px 0 15px;
}

.shop-sizes__option { cursor: pointer; }

.shop-sizes__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.shop-sizes__box {
	display: block;
	min-width: 38px;
	padding: 6px 8px;
	border: 1px solid #000;
	text-align: center;
	font-size: 14px;
	transition: all .3s;
}

.shop-sizes__option input:checked + .shop-sizes__box,
.shop-sizes__option input:focus-visible + .shop-sizes__box {
	border-color: #00f;
	color: #00f;
}

.shop-card__action {
	margin: 0;
}

.shop-card__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	padding: 5px 10px;
	border: none;
	background-color: #fff;
	font-size: 20px;
	font-family: stratos-medium;
	line-height: 1;
	color: #000;
	cursor: pointer;
}

@media (min-width: 1025px) {
	/* A list rather than a grid, with the same measurements the listings use:
	   a 120px square, then the text beside it. */
	.shop-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.shop-item {
		display: flex;
		align-items: flex-start;
	}

	.shop-item__image {
		width: 120px;
		height: 120px;
		min-width: 120px;
		aspect-ratio: auto;
		margin-bottom: 0;
	}

	.shop-item__text { margin-left: 20px; }

	.shop-item__name {
		font-size: 23px;
		line-height: 1.2;
	}

	.shop-item__price { font-size: 19px; }

	/* Which one is open is only worth marking where the card is on screen; on a
	   phone nothing is open until it is tapped. */
	.shop-item[aria-current="true"] .shop-item__name { color: #00f; }
	.shop-item[aria-current="true"] .shop-item__image { opacity: .65; }

	/* Naming a product in the address puts that product on screen instead of
	   the list, but only where there is one screen. Here there are two, so the
	   list stays on the left exactly as before and the product simply opens in
	   the half beside it. */
	body.bursa-shop-product [data-bursa-shop-listing] { display: block; }
	body.bursa-shop-product .shop-cards { padding: 0; }

	/* The half of the window the site keeps its pictures in. The card lives
	   there permanently, so one product is always open and choosing another
	   costs no request. */
	.shop-cards {
		display: block;
		position: fixed;
		top: 0;
		left: auto;
		right: 0;
		width: 50%;
		height: 100%;
		overflow-y: auto;
		scrollbar-gutter: stable;
		padding-top: 0;
		background-color: #f0f0f0;
		/* Behind the booking button and the messenger icons, exactly where the
		   picture columns on every other page sit. Its own stacking level is
		   only needed on a phone, where it is a sheet over the page. */
		z-index: auto;
	}

	/* Four across, the rest by scrolling. The height comes from the window
	   rather than from the pictures' own proportions: at this width a tall
	   picture pushes the price and the buy button down under the booking disc.

	   The frames are a shade deeper than the column they sit on; white would
	   merge with the page beside it and lose the edge between the two halves. A
	   real photograph will fill each of these outright. */
	.shop-card__gallery {
		gap: 2px;
		scroll-snap-type: x proximity;
	}

	.shop-card__nav {
		position: absolute;
		top: 50%;
		z-index: 1;
		display: block;
		transform: translateY(-50%);
		padding: 10px;
		border: none;
		background-color: rgba(255, 255, 255, .75);
		cursor: pointer;
		transition: opacity .3s;
	}

	.shop-card__nav[hidden] { display: none; }

	.shop-card__nav svg {
		display: block;
		width: 12px;
	}

	.shop-card__nav svg path { fill: #000; }

	/* One arrow drawing, turned to point each way. */
	.shop-card__nav--prev { left: 0; }
	.shop-card__nav--prev svg { transform: rotate(90deg); }
	.shop-card__nav--next { right: 0; }
	.shop-card__nav--next svg { transform: rotate(-90deg); }

	.shop-card__nav:hover { opacity: .6; }

	.shop-card__shot {
		flex: 0 0 calc(25% - 1.5px);
		aspect-ratio: auto;
		height: 26vh;
		min-height: 170px;
		max-height: 300px;
		background-color: #e4e4e4;
		scroll-snap-align: start;
	}

	.shop-card__body {
		padding: 30px;
		padding-top: 30px;
		/* The booking disc sits over the bottom left of this column. Nothing of
		   the card is allowed to end underneath it, however long the copy. */
		padding-bottom: 150px;
	}

	/* The list is right there beside it, so there is nothing to go back to. */
	.shop-card__back { display: none; }
}

/* --- Checkout ------------------------------------------------------------ */

.shop-window {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1350;
	display: flex;
	width: 100%;
	height: 100vh;
	/* iOS measures vh against the page, not against what is actually on screen,
	   so a sheet held to the bottom ends up under the browser's own bar. The
	   dynamic unit measures the visible part. */
	height: 100dvh;
	background-color: rgba(0, 0, 0, .6);
	animation: appear .5s;
	/* On a phone the panel comes up from the bottom, which is where a thumb
	   already is; on a wide screen it sits in the middle. */
	align-items: flex-end;
	justify-content: center;
}

.shop-window[hidden] { display: none; }

.shop-window__panel {
	position: relative;
	z-index: 210;
	box-sizing: border-box;
	width: 100%;
	max-height: 92vh;
	max-height: 92dvh;
	overflow-y: auto;
	/* Hold the width the scrollbar would take whether or not it is there. The
	   panel grows and shrinks as the form changes, and without this the fields
	   jump sideways the moment the content stops fitting. */
	scrollbar-gutter: stable;
	padding: 20px;
	/* On a phone the sheet sits against the bottom edge, where the home
	   indicator lives, so the last button keeps clear of it. */
	padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
	background-color: #fff;
	font-size: 17px;
	font-family: stratos-light;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.shop-window { align-items: center; }
	.shop-window__panel { width: 450px; max-height: 86vh; }
}

.shop-window__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 20px;
}

.shop-window__title {
	margin: 0;
	font-family: stratos-medium;
	text-transform: uppercase;
}

.shop-window__close {
	padding: 0 5px;
	border: none;
	background-color: inherit;
	font-size: 20px;
	font-family: stratos-medium;
	line-height: 1;
	color: #000;
	cursor: pointer;
	transition: color .3s;
}

.shop-window__close:hover,
.shop-window__close:active { color: #00f; }

.shop-form__summary {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #000;
}

.shop-form__sum {
	white-space: nowrap;
	font-family: stratos-medium;
}

.shop-form__row {
	display: flex;
	gap: 20px;
}

.shop-form__field {
	display: block;
	flex: 1 1 0;
	margin-bottom: 20px;
	min-width: 0;
}

.shop-form__label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
}

/* The checkout comes up from the bottom edge rather than appearing there, and
   the confirmation rises into place when the form gives way to it. Both are
   short and eased out, so the movement reads as the sheet arriving rather than
   as an effect. */
@keyframes bursa-sheet-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes bursa-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.shop-window__panel {
	animation: bursa-sheet-up .34s cubic-bezier(.22, .61, .36, 1);
}

/* Replacing the form with the thank-you happens inside a panel that is already
   on screen, so that part only rises. */
.shop-done { animation: bursa-rise .3s ease-out; }

@media (min-width: 768px) {
	/* Centred rather than held to an edge, so there is nowhere to slide from;
	   the veil behind it already fades in. */
	.shop-window__panel { animation: bursa-rise .3s ease-out; }
}

/* Switching the product changes the contents of a column that does not move,
   which is easy to miss. The same fade the pinned gallery uses, so a change of
   product and an arriving photograph look like the same site. */
.shop-card--enter {
	animation: fadeInImg .6s cubic-bezier(.23, 1, .32, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.shop-window__panel,
	.shop-done,
	.shop-card--enter { animation: none; }
}

/* The bar itself, in the site's black rather than the system's grey. */
.shop-window__panel,
.shop-cards {
	scrollbar-width: thin;
	scrollbar-color: #000 transparent;
}

.shop-window__panel::-webkit-scrollbar,
.shop-cards::-webkit-scrollbar { width: 6px; }

.shop-window__panel::-webkit-scrollbar-thumb,
.shop-cards::-webkit-scrollbar-thumb { background-color: #000; }

.shop-window__panel::-webkit-scrollbar-track,
.shop-cards::-webkit-scrollbar-track { background-color: transparent; }

/* --- Dropdowns ------------------------------------------------------------

   A native select is drawn by the phone, not by the page, and looks like the
   phone. The real control stays underneath doing its job; what is seen is built
   from its own options and dressed in the site's own field styling. */

.bursa-select { position: relative; }

/* Out of sight and out of the way of the keyboard, but still in the form. */
.bursa-select__native {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* The same box as any other field, with room for the mark on the right. */
.bursa-select__value {
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 10px 30px 10px 10px;
	border: 1px solid #000;
	border-radius: 0;
	background-color: #fff;
	font-size: 17px;
	font-family: stratos-light;
	line-height: 1.4;
	color: #000;
	text-align: left;
	cursor: pointer;
	transition: border-color .3s;
}

.bursa-select__value::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 0;
	height: 0;
	margin-top: -2px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #000;
	transition: transform .3s;
}

.bursa-select__value:hover,
.bursa-select__value:focus-visible,
.bursa-select--open .bursa-select__value { border-color: #00f; }

.bursa-select--open .bursa-select__value::after { transform: rotate(180deg); }

.bursa-select__list {
	position: absolute;
	z-index: 5;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 240px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #fff;
	border: 1px solid #00f;
	border-top: none;
}

.bursa-select__list[hidden] { display: none; }

.bursa-select__option {
	padding: 10px;
	font-size: 17px;
	font-family: stratos-light;
	line-height: 1.4;
	cursor: pointer;
	transition: color .3s;
}

.bursa-select__option:hover { color: #00f; }

.bursa-select__option[aria-selected="true"] {
	color: #00f;
	font-family: stratos-medium;
}

/* City and branch are searched rather than picked: the field is an ordinary
   text box, and the list under it is the dropdown's own. */
.bursa-combo .input-text {
	box-sizing: border-box;
	width: 100%;
}

.bursa-combo .input-text:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.bursa-combo.bursa-select--open .input-text { border-color: #00f; }

.bursa-select__option--empty,
.bursa-select__option--empty:hover {
	color: #888;
	cursor: default;
}

/* Only one way to pay for now, so it is stated rather than offered. */
.shop-pay__box--static {
	flex: 1 1 auto;
	border-color: #00f;
	color: #00f;
	text-align: left;
}

.shop-pay {
	display: flex;
	gap: 10px;
	margin: 5px 0 20px;
}

.shop-pay__option {
	flex: 1 1 0;
	cursor: pointer;
}

/* The radio itself is taken out of the flow rather than hidden, so it can
   still be reached with the keyboard. */
.shop-pay__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.shop-pay__box {
	display: block;
	padding: 10px;
	border: 1px solid #000;
	text-align: center;
	font-size: 14px;
	transition: all .3s;
}

.shop-pay__option input:checked + .shop-pay__box {
	border-color: #00f;
	color: #00f;
}

.shop-pay__option input:focus-visible + .shop-pay__box {
	border-color: #00f;
}

.shop-form__submit {
	margin: 0;
	text-align: right;
}

.shop-form__order { color: red; }

.shop-done__number span { font-family: stratos-medium; }


/* A picture opened from the shop strip. The viewer is the site's own, which is
   built for phones and hidden on a wide screen; here it is wanted on both. */
@media (min-width: 1025px) {
	.bursa-page-shop .swipe-carousel { display: block; }
	.bursa-page-shop .swipe-carousel[hidden] { display: none; }
}

.swipe-carousel__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(86vw, 900px);
	aspect-ratio: 4 / 3;
	background-color: #f0f0f0;
}

/* --- Empty picture frames ------------------------------------------------- */

/* The hotel's own letters, faint, over the grey the site uses while a picture
   loads. The letters are the header's outlines reused at a small size; they
   carry no fill of their own, so they take the colour set here. */
.photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	color: #000;
	opacity: .28;
}

.photo-placeholder__mark {
	display: flex;
	align-items: flex-end;
	gap: 3px;
}

.photo-placeholder__mark svg {
	display: block;
	width: auto;
	height: 14px;
}

.photo-placeholder__mark svg path,
.photo-placeholder__mark svg polygon {
	fill: currentColor;
}

.photo-placeholder__note {
	font-size: 11px;
	font-family: stratos-light;
	line-height: 1;
	letter-spacing: .04em;
}

/* The card's picture is larger than a listing tile, so its mark is too. */
.shop-card__shot .photo-placeholder__mark svg { height: 20px; }
.shop-card__shot .photo-placeholder__note { font-size: 12px; }

@media (min-width: 1025px) {
	/* Four frames side by side leave little room, so the mark shrinks again. */
	.shop-card__shot .photo-placeholder__mark svg { height: 12px; }
	.shop-card__shot .photo-placeholder__note { font-size: 10px; }
}