@charset "UTF-8";

/*
Site-specific styles for sweidone.com.

Kept out of style.css so theme updates do not clobber them, and out of the
rehomes-core plugin because these are site styles, not plugin styles.

Enqueued from functions.php (handle 'sweidone-custom') with 'rehomes-style'
as a dependency, so it loads after the theme stylesheet and site rules win
on source order.

--------------------------------------------------------------
TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Retail & Dining Slider Arrows
--------------------------------------------------------------
*/

/*--------------------------------------------------------------
1.0 Retail & Dining Slider Arrows
--------------------------------------------------------------*/

/* Matches the owl-carousel arrows used by the "Modern features for a
   world-class workplace" amenities slider: same 55x55 box, same 1px #0c0d0d
   border, square corners, and the same opal-icon chevron glyphs (\e00c /
   \e00d) at 16px. Built from the icon font rather than an inline SVG, which
   also avoids the iOS Safari bug where the old arrows' huge SVG coordinate
   space (viewBox 0 0 5244179 5244179) failed to rasterise and the next arrow
   vanished entirely.

   Hover behaviour is matched to the amenities arrows too -- see the note on
   the :hover rule below.

   .slick-arrow is paired with .slick-prev/.slick-next on purpose: the rules
   these override sit in the Customizer/Elementor CSS, which prints inline
   AFTER this stylesheet, so they must win on specificity, not source order.

   Arrow markup lives in functions.php (slick prevArrow / nextArrow). */
.retail-and-dining-slider .slick-arrow.slick-prev, .retail-and-dining-slider .slick-arrow.slick-next {
	width: 55px;
	height: 55px;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0;
	-webkit-tap-highlight-color: transparent;
}

.retail-and-dining-slider .slick-arrow.slick-prev::before, .retail-and-dining-slider .slick-arrow.slick-next::before {
	display: block !important;
	font-family: "opal-icon" !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	width: 55px;
	height: 55px;
	line-height: 53px;
	text-align: center;
	color: #000;
	background: #fff;
	border: 1px solid #0c0d0d;
	border-radius: 0;
	transition: all .3s ease;
	opacity: 1;
}

.retail-and-dining-slider .slick-arrow.slick-prev::before {
	content: "";
}

.retail-and-dining-slider .slick-arrow.slick-next::before {
	content: "";
}

/* Deliberately a plain, unguarded :hover so these behave exactly like the
   amenities arrows, including on iOS: Safari applies :hover on tap and keeps
   it applied until you tap another interactive element, so the arrow stays
   tan. That is the same behaviour as the rest of the site's carousels and is
   intentional here. It is safe because the hover state stays legible (tan box,
   white glyph, dark border) -- unlike the old SVG arrows, whose hover state
   painted a white chevron onto a white button and so vanished. */
.retail-and-dining-slider .slick-arrow.slick-prev:hover::before, .retail-and-dining-slider .slick-arrow.slick-next:hover::before {
	color: #fff;
	background: #bda588;
}