/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

/*-------- About Us section: hold the artwork boxes steady --------*/
/*
   Both pictures come from Website About Us now, so their pixel size and aspect
   ratio change with every upload. Two separate things went wrong without these
   rules:

   1. The back picture carries Bootstrap's .img-fluid (max-width:100%;
      height:auto), so its height simply follows whatever ratio was uploaded.
      A landscape photo collapses the section to a fraction of its height.

   2. The front picture was sized as width:50% against .img_over, which is
      absolutely positioned with no width of its own. That box shrink-wraps to
      the image's *intrinsic* width first, so the 50% resolved against the file's
      own pixel width: the bundled 600px artwork rendered at 300px, a 1600px
      upload would render at 800px, and a small one shrinks away.

   Pinning both boxes to the ratios of the bundled artwork (home_2.jpg is
   600x750, home_1.jpg is 600x830) makes the layout independent of the upload.
   object-fit: cover crops the overflow rather than distorting the picture, so
   uploads are best cropped near those ratios; anything else loses its edges.
*/
#first_section .parallax_wrapper > img {
  width: 100%;
  aspect-ratio: 600 / 750;
  object-fit: cover;
}

/* 300px is what the bundled 600px-wide file resolved to, so the desktop layout
   is unchanged; max-width keeps it inside the column on small screens. */
#first_section .parallax_wrapper .img_over {
  width: 300px;
  max-width: 100%;
}

#first_section .parallax_wrapper .img_over img {
  width: 100%;
  aspect-ratio: 600 / 830;
  object-fit: cover;
}

/*-------- Preloader: the site icon inside a turning ring --------*/
/*
   The theme's own preloader was a bare 50px spinner on a dark panel. This puts the
   favicon in the middle of a larger ring, the way the other BlinkTech themes do it.

   `style.css` already gives #preloader its fixed full-screen box and dark background;
   these rules only centre its contents and draw the ring. The old
   `[data-loader=circle-side]` rule there is now unused — the markup no longer emits it.
*/
/* The animation is a failsafe, not the usual path: `common_functions.js` fades the panel
   on window.load and normally finishes seconds before this delay expires.

   It exists because #preloader is opaque, full-screen and at the top of the stacking
   order, and that one jQuery handler was the only thing that ever removed it — jQuery
   failing to load, or anything throwing before the handler binds, left the visitor
   looking at a dark screen with no way through.

   `forwards` holds the finished state; the keyframe's `visibility` and `pointer-events`
   stop the invisible panel from swallowing clicks. */
#preloader {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sebal-preloader-out 0.6s ease 8s forwards;
}

.loading-container,
.loading {
  width: 130px;
  height: 130px;
  position: relative;
  border-radius: 100%;
}

/* Only two of the four borders are coloured, so the ring reads as a chasing arc
   rather than a full circle. Brand gold against the panel, white opposite it. */
.loading {
  border: 2px solid transparent;
  border-color: transparent #978667 transparent #fff;
  animation: sebal-preloader-spin 1.5s linear 0s infinite normal;
  transform-origin: 50% 50%;
}

/* Kept at roughly two thirds of the ring's diameter, so the icon stays clear of it. */
#loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 86px;
  transform: translate(-50%, -50%);
}

#loading-icon img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes sebal-preloader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* A page that loads no theme JS — /login — has nothing coming to fade the panel, so it
   goes promptly rather than waiting out the failsafe. The delay still gives the icon a
   moment to show before it leaves. */
#preloader.self-hiding {
  animation-delay: 0.8s;
}

@keyframes sebal-preloader-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/*-------- Header: the language switcher --------*/
/*
   Built on the theme's own `li.submenu`, so it inherits the open/close script and most of
   the styling already in the page. These are the differences.

   The flags are real files in `public/icons/`, both 5:3, cropped to a circle by `object-fit`.

   Sized in `em`, so a flag is always a fixed proportion of whatever the surrounding text is:
   the toggle sits in the top-level nav and the options sit in a 13px dropdown, and a single
   pixel size would be wrong in one of them. Change the header's font and the flags follow.
*/
.language-switch .flag {
	width: 1.45em;
	height: 1.45em;
	flex: 0 0 auto;
	border-radius: 50%;
	/* The flags are 5:3; this crops the middle of each rather than squashing it. */
	object-fit: cover;
	/* The white edge of the UK flag against a white dropdown, and the Saudi green against a
	   dark header, both need an outline to read as a disc at all. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
	vertical-align: middle;
}

/*
   The theme sets `display: block` on both the nav link and the dropdown link, at a
   specificity these have to beat or the flag and the word stack instead of sitting together.
   Scoped to the same breakpoint the theme's own dropdown rules use, so the mobile menu — a
   different layout entirely — is left alone.
*/
@media only screen and (min-width: 992px) {
	/*
	   The toggle deliberately stays in the nav's own inline flow.

	   An `inline-flex` anchor takes its baseline from its flex line rather than from its
	   text, and every `<li>` in this nav is an inline box aligned on the baseline — so the
	   word "English" sat 6px above "About" and "Sign In". Left inline, the text keeps the
	   line's baseline and the flag is centred against it instead.
	*/
	.submenu_version .main-menu .language-switch > a {
		white-space: nowrap;
	}

	.submenu_version .main-menu .language-switch > a .flag {
		vertical-align: middle;
		/* Logical, so it is the trailing side in both directions without a second rule. */
		margin-inline-end: 0.7em;
	}

	/*
	   The dropdown is different: its rows are block-level, so there is no shared baseline to
	   disturb and flex is the simplest way to centre a tall flag against a short word.
	*/
	.submenu_version .main-menu .language-switch ul li a {
		display: flex;
		align-items: center;
		gap: 0.7em;
		white-space: nowrap;
	}

	/* The dropdown sets 13px against the nav's 15px, so the same `em` would draw a smaller
	   disc there — but the list is where you are actually choosing, and a flag is the thing
	   being chosen. Sized up so it reads at least as clearly as the one on the toggle. */
	.submenu_version .main-menu .language-switch ul .flag {
		width: 1.9em;
		height: 1.9em;
	}

	/* Softer than the theme's 3px, which the rest of the navigation uses. `overflow: hidden`
	   is what makes the corners actually cut the first and last rows — without it the radius
	   is on the box and the rows square it off again. */
	.submenu_version .main-menu .language-switch ul {
		border-radius: 12px;
		overflow: hidden;
		min-width: 168px;
	}
}

/* The current language is already named on the toggle; in the list it is worth marking so
   the two do not read as two different choices. */
.language-switch ul a[aria-current] {
	font-weight: 600;
}

/* An uploaded icon — a file URL in a card's icon field — drawn where the theme draws a font
   glyph, at the glyph's size in each band. `.box_facilities i` is 62px, the contact blocks'
   36px. `object-fit: contain` keeps a wide mark whole. The public site never had a rule
   for `.facility_icon`, so an upload drew at its natural size — a 3000px picture in a
   300px card. */
.box_facilities img.facility_icon {
	display: inline-block;
	height: 62px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.contact_info ul li img.facility_icon {
	display: inline-block;
	height: 36px;
	width: auto;
	object-fit: contain;
}
.box_item_info .facilities ul li img.facility_icon {
	display: inline-block;
	height: 30px;
	width: auto;
	margin-right: 15px;
	vertical-align: middle;
	object-fit: contain;
}
/* A room row's facility lines, in two aligned columns. The theme floats each line at its
   own width, so with more than two the second column starts wherever the first line's text
   ends. A grid gives both columns a start, and a fixed icon box lines the names up under
   each other — glyphs differ in width. Logical margins, so it holds in Arabic too. */
.box_item_info .facilities ul {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	column-gap: 25px;
	row-gap: 10px;
}
.box_item_info .facilities ul li,
.box_item_info .facilities ul li:last-child {
	float: none;
	margin: 0;
}
.box_item_info .facilities ul li i,
.box_item_info .facilities ul li img.facility_icon {
	flex: 0 0 36px;
	width: 36px;
	margin: 0;
	margin-inline-end: 12px;
	text-align: center;
}
@media (max-width: 767px) {
	.box_item_info .facilities ul {
		grid-template-columns: 1fr;
	}
}


/* The rooms heading is a link now — the header's "Rooms & Suites" item moved onto it. It
   must not look like body copy's link: same colour and weight as the heading it is, with
   the theme's accent only on hover. */
.title h2 > .heading_link {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.title h2 > .heading_link:hover {
	color: #978667;
}


/* A room card that is shown, not linked (`sebal_rooms.html`). It keeps the theme's hover —
   the picture zooms and the words lift — and only the pointer says there is nowhere to go. */
a.box_cat_rooms--static {
	cursor: default;
}
/* The theme's card ends in a "Read more" line — invisible until hover, but it takes its
   height, 15px at the theme's 1.6 line height, and that is what holds the name and price up.
   With the line gone they sat 24px low; the space it took is kept instead. */
a.box_cat_rooms--static .info {
	padding-bottom: calc(60px + 0.9375rem * 1.6);
}

/* The map band (`sebal_map.html`): Leaflet over OpenStreetMap, in the theme's embed's box —
   full width, 450px, the streets greyed as its iframe was. Only the tiles are greyed: the
   pins keep their colour, which is what makes them findable. */
.sebal-map {
	position: relative;
	margin-bottom: -10px;
}
.sebal-map__canvas {
	width: 100%;
	height: 450px;
	z-index: 0;
}
.sebal-map .leaflet-tile-pane {
	filter: grayscale(85%);
}
/* Until the script moves them onto the map, the pins are markup waiting in the band. */
.sebal-map__pins {
	display: none;
}
/* A pin: its icon and its label on a white tab, standing on its place — the point of the
   tab's arrow is the coordinate. Leaflet puts the marker's element at the point; the pin
   is lifted above it. */
.sebal-map__marker {
	background: none;
	border: 0;
}
.sebal-map__pin {
	position: absolute;
	left: 0;
	bottom: 10px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 10px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	white-space: nowrap;
	font-size: 14px;
	font-weight: 600;
	color: #24262d;
	line-height: 1;
}
.sebal-map__pin::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-bottom: 0;
	border-top-color: #fff;
}
.sebal-map__icon {
	font-size: 20px;
	color: #978667;
}
img.sebal-map__icon {
	width: 22px;
	height: 22px;
	object-fit: contain;
}
.sebal-map__pin--link {
	cursor: pointer;
}
.sebal-map__pin--link:hover .sebal-map__label {
	color: #978667;
}
.leaflet-marker-draggable .sebal-map__icon {
	cursor: move;
}

/* A social link's own icon (Hotel Website Settings > Social Links), at the size of the
   theme's glyphs beside it. */
.social ul li a img.social_icon {
	width: 21px;
	height: 21px;
	object-fit: contain;
	vertical-align: middle;
}

/* The footer newsletter's "Your email". The theme gives the box white text on a see-through
   ground over the dark footer, but never styles the placeholder, so it fell back to
   Bootstrap's dark grey and all but vanished. The send button's own soft white instead;
   `opacity: 1` because Firefox dims a placeholder on its own. */
#newsletter input[type=email]::placeholder {
	color: rgba(255, 255, 255, 0.6);
	opacity: 1;
}