/**
 * The site's one slider arrow.
 *
 * Four runs of things share this page: the offers strip, the hero slider, the
 * events carousel and the new releases carousel. Two of them are ours and two
 * are Elementor's, and left alone they looked like two different websites.
 * Elementor's was the weaker of the pair: its chevron is an icon-font glyph
 * with a heavy stroke, so beside our own 1.5 stroke it read as bold.
 *
 * So the chevron is stated once, here, as a shape rather than as a glyph, and
 * painted into whichever button needs it. It is the same path at the same
 * weight as the one the icon set draws inline, which is what makes our buttons
 * and Elementor's indistinguishable rather than merely similar.
 *
 * Loaded site-wide beside the brand tokens, because a carousel can be dropped
 * on any page and an arrow that only matches on the home page is not a fix.
 */

:root {
	/* The chevron from the icon set, as a mask. Stroke 1.5 on a 24 grid with
	   round caps and joins: regular weight, like every other icon here. The
	   colour inside the data URI is irrelevant, a mask reads only its alpha. */
	--diwan-arrow-chevron: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9.5 5 7 7-7 7%22/%3E%3C/svg%3E');

	/* One square, one size, everywhere. Square because the shelf, the banner
	   and the book are all rectangles, and a disc was the only round thing on
	   the page. */
	--diwan-arrow-size: 40px;
	--diwan-arrow-glyph: 20px;
	--diwan-arrow-bg: var(--diwan-surface, #fff);
	--diwan-arrow-color: var(--diwan-black, #000);
	--diwan-arrow-border: var(--diwan-border-strong, #d5d5d5);
	--diwan-arrow-bg-hover: var(--diwan-wood, #3b0f00);
	--diwan-arrow-color-hover: var(--diwan-canvas, #faf7db);

	/*
	 * The same four colours again, under the names Elementor's own carousel
	 * rules read. Written as variables rather than as rules over the top of
	 * Elementor's, so that anything set in the widget's Navigation panel is
	 * more specific than this and still wins: the panel keeps working, it just
	 * starts from the site's colours instead of a pale grey.
	 *
	 * --arrow-size drives the glyph rather than the button, so an editor
	 * enlarging the arrow in the panel still gets a larger chevron.
	 */
	--arrow-normal-color: var(--diwan-arrow-color);
	--arrow-hover-color: var(--diwan-arrow-color-hover);
	--arrow-normal-background-color: var(--diwan-arrow-bg);
	--arrow-hover-background-color: var(--diwan-arrow-bg-hover);
	--arrow-normal-border-type: solid;
	--arrow-hover-border-type: solid;
	--arrow-size: var(--diwan-arrow-glyph);
}

/* ------------------------------------------------------------ our own buttons */

/*
 * The frame. Opaque, because a see-through control takes its tint from whatever
 * happens to be underneath it, and the same arrow read warm over the brown
 * banner and cold over the blue one.
 */
.diwan-arrow {
	align-items: center;
	background: var(--diwan-arrow-bg);
	block-size: var(--diwan-arrow-size);
	border: 1px solid var(--diwan-arrow-border);
	border-radius: 0;
	color: var(--diwan-arrow-color);
	cursor: pointer;
	display: flex;
	inline-size: var(--diwan-arrow-size);
	justify-content: center;
	padding: 0;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, opacity 0.16s ease;
}

.diwan-arrow:hover {
	background: var(--diwan-arrow-bg-hover);
	border-color: var(--diwan-arrow-bg-hover);
	color: var(--diwan-arrow-color-hover);
}

.diwan-arrow .diwan-icon {
	block-size: var(--diwan-arrow-glyph);
	inline-size: var(--diwan-arrow-glyph);
}

/* ------------------------------------------------------- Elementor's buttons */

/*
 * Elementor draws its arrow as an icon-font glyph, or as an SVG, depending on
 * the build and the widget. Both are put away and the shape above is painted in
 * their place, so the hero slider and the two loop carousels carry the same
 * chevron as the offers strip beside them.
 *
 * The glyph is a mask filled with currentColor rather than a background image,
 * which is what lets one declaration serve both the resting state and the
 * hover: the chevron follows the button's colour the way an inline SVG would.
 *
 * Written one class deeper than Elementor writes, and not for the pleasure of
 * it. Elementor reaches the button through the swiper and paints its colour and
 * its border there, and its conditional stylesheets are enqueued while the page
 * renders, so they can arrive after ours. Matching its depth would leave which
 * arrow you see decided by load order. One class deeper settles it, and every
 * control in the Navigation panel is deeper still, so the panel keeps winning.
 */
.elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
	align-items: center;
	background: var(--arrow-normal-background-color);
	block-size: var(--diwan-arrow-size);
	border: 1px solid var(--diwan-arrow-border);
	border-radius: 0;
	color: var(--arrow-normal-color);
	display: flex;
	/* The glyph is sized in em below, so this is the arrow's Size control. */
	font-size: var(--arrow-size, 20px);
	inline-size: var(--diwan-arrow-size);
	justify-content: center;
	/* Fully opaque. At 0.9 a black chevron on a white square reads grey, which
	   on a pale slide is barely there at all. */
	opacity: 1;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next):hover,
.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next):hover {
	background: var(--arrow-hover-background-color);
	border-color: var(--arrow-hover-background-color);
	color: var(--arrow-hover-color);
	opacity: 1;
}

/* The glyph Elementor was going to draw. The screen-reader text beside it is
   left alone, which is why this names the icon rather than every child. */
.elementor-swiper-button > i,
.elementor-swiper-button > svg,
.elementor-swiper-button > [class*="eicon-"] {
	display: none;
}

.elementor-swiper-button::after {
	background-color: currentColor;
	/* 1em, so the widget's own Size control still drives the chevron. */
	block-size: 1em;
	content: "";
	display: block;
	flex: 0 0 auto;
	inline-size: 1em;
	-webkit-mask: var(--diwan-arrow-chevron) center / contain no-repeat;
	mask: var(--diwan-arrow-chevron) center / contain no-repeat;
}

/* ------------------------------------------------------- beside, not over */

/*
 * An arrow sitting on top of the first card hides half a book cover, which is
 * the one thing the card is there to show. With the widget's Position set to
 * Outside, the room for the pair is taken out of the run instead: the track
 * gives up an arrow and a gap at each end, and the cards that are left are
 * whole.
 *
 * Elementor's own outside rule takes a flat 60 pixels and leaves the track
 * against the left edge, which puts both arrows on the same side of it. This
 * takes the real width of the arrow, centres what is left, and is written a
 * class deeper so it lands whichever stylesheet loads last.
 */
.elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside {
	--diwan-arrow-outside: calc(var(--diwan-arrow-size) + 12px);
}

.elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside :is(.swiper, .swiper-container) {
	inline-size: calc(100% - 2 * var(--diwan-arrow-outside));
	margin-inline: auto;
}

/*
 * On a phone there is no room to give up: two arrows and their gaps would take
 * a third of the screen. The run takes the whole width and is swiped instead,
 * which is what the offers strip above already does at the same width.
 */
@media (max-width: 767px) {
	.elementor-element.elementor-widget-loop-carousel.elementor-arrows-position-outside :is(.swiper, .swiper-container) {
		inline-size: 100%;
	}

	.elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
	.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
		display: none;
	}
}

/* ------------------------------------------------------------ which way round */

/*
 * The chevron is drawn pointing one way, so the other button turns it over.
 *
 * Our buttons and Elementor's need opposite treatment in Arabic, and the reason
 * is where each of them sits. Ours are placed with logical properties, so in a
 * right-to-left page the previous button moves to the right of the strip and
 * has to point right: the pair is a mirror of itself. Elementor's stay where
 * they are, prev on the left and next on the right whichever way the page
 * reads, because Swiper reverses the run behind them instead. Pressing the
 * left-hand one in Arabic moves the shelf forwards, and it should point left to
 * say so, which is exactly what it does in English.
 *
 * So the Elementor pair is stated once and not flipped. Flipping it, which
 * looked like the obvious thing to do, left both chevrons pointing away from
 * the way they move.
 */
.diwan-arrow--prev .diwan-icon,
.elementor-swiper-button-prev::after {
	transform: scaleX(-1);
}

.diwan-arrow--next .diwan-icon,
.elementor-swiper-button-next::after {
	transform: none;
}

[dir="rtl"] .diwan-arrow--prev .diwan-icon {
	transform: none;
}

[dir="rtl"] .diwan-arrow--next .diwan-icon {
	transform: scaleX(-1);
}

/*
 * The one Elementor widget that does move its arrows. The slides widget swaps
 * them itself in a right-to-left page, putting previous on the right and next
 * on the left, so its pair mirrors like ours does. The loop carousels above
 * leave theirs where they are, which is why this is stated for the slides
 * widget by name rather than for everything.
 *
 * The rule underneath it all is the same in every case and worth saying once:
 * the chevron points the way the shelf moves, which is outwards from the run.
 * Press the arrow on the left and things go left.
 */
[dir="rtl"] .elementor-widget-slides .elementor-swiper-button-prev::after {
	transform: none;
}

[dir="rtl"] .elementor-widget-slides .elementor-swiper-button-next::after {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------- nothing to do */

/* An arrow at the end of a run has nothing to do, so it goes rather than
   sitting there greyed out and inviting a press. One class deeper than
   Elementor's own 0.3, which names the button and the disabled state and would
   otherwise settle the tie by whichever stylesheet loaded last. */
.elementor-element :is(.swiper, .swiper-container) .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next).swiper-button-disabled,
.elementor-element :is(.swiper, .swiper-container) ~ .elementor-swiper-button:is(.elementor-swiper-button-prev, .elementor-swiper-button-next).swiper-button-disabled,
.diwan-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/*
 * A slider's dots (Elementor's, drawn by Swiper): the same dots, set far
 * enough apart that a finger aimed at one cannot land on the next. Each is
 * 6 px here; 18 px between them puts their centres 24 px apart, the room
 * WCAG 2.2 asks around a target that small. Their colours stay the widget's own.
 */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
	--swiper-pagination-bullet-horizontal-gap: 9px;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
	margin-inline: 9px !important;
}

/*
 * A run that shows one card at a time on a phone (Upcoming Events, Book
 * Clubs) says there are more with a row of dots under it, there and only
 * there: a wider screen shows several cards and its arrows (Diwan,
 * 5 October 2026). Black on the page's grey, the current one solid.
 */
.diwan-run--dots .swiper-pagination-bullet {
	background-color: var(--diwan-text, #000000);
	opacity: 0.25;
}

.diwan-run--dots .swiper-pagination-bullet-active {
	opacity: 1;
}

@media (min-width: 768px) {
	.diwan-run--dots .swiper-pagination {
		display: none;
	}
}

/*
 * Forced colours (Windows contrast themes): the system paints every
 * background in its own colours, which took away whatever this site draws as
 * a coloured shape rather than as text, and the dark black logo with it.
 * Each is given the system's own colours back (WCAG 1.4.11, non-text
 * contrast): the arrows' chevrons and the dots in its text colour, the dot
 * that is current in its highlight, and the logo a light plate to stand on.
 */
@media (forced-colors: active) {
	.elementor-swiper-button::after,
	.diwan-offers__arrow::after,
	.diwan-offers__arrow::before {
		background-color: ButtonText;
		forced-color-adjust: none;
	}

	/* !important here only: the dots' own colours come later (offers.css) or
	   stronger (the widget's CSS), and in a contrast theme the system's win. */
	.swiper-pagination-bullet,
	.diwan-offers__dot::before {
		background-color: ButtonText !important;
		forced-color-adjust: none;
		opacity: 1 !important;
	}

	.swiper-pagination-bullet-active,
	.diwan-offers__dot.is-current::before {
		background-color: Highlight !important;
	}

	.diwan-logo,
	.diwan-topbar__icon {
		background-color: #ffffff;
		border-radius: 4px;
		forced-color-adjust: none;
		padding: 4px;
	}
}