/**
 * Doctor Banoo theme styles: what every page shares.
 *
 * Colours, type sizes and spacing come from theme.json as --wp--preset-- variables and follow the
 * product design system (product-spec/06). The styles are split in three so a page downloads only
 * what it can show:
 *
 * - base.css (this file) loads everywhere: tokens, type, buttons, the header, the shared form parts,
 *   the menu drawer and search dialog, the phone tab bar, the footer, motion and the parts the
 *   home page and the inner pages both use (the concern search, cards, chips).
 * - home.css adds the home page sections and the hero; it loads only on the front page.
 * - inner.css adds the content templates (concerns, stages, services, magazine, doctors), the
 *   request and booking forms, login, account and the coming-soon screen; it loads everywhere else.
 *
 * Both halves load after this file, so a rule there wins over a base rule of equal weight. A new
 * rule goes in the file of the templates that print its markup; when both kinds of page print it,
 * it goes here. The site is RTL, so only logical properties are used.
 *
 * The site is light only. Dark surfaces appear as deliberate banners (the booking-steps band and
 * the footer), never as a whole-page scheme.
 */

:root {
	--drb-radius-sm: 8px;
	--drb-radius-md: 12px;
	--drb-radius-lg: 20px;
	--drb-radius-xl: 28px;
	--drb-radius-full: 999px;
	--drb-shadow-sm: 0 1px 2px rgba(27, 36, 32, 0.06);
	--drb-shadow-md: 0 4px 16px rgba(27, 36, 32, 0.08);
	--drb-shadow-lg: 0 12px 32px rgba(27, 36, 32, 0.1);
	--drb-ease: 200ms ease-out;
	--drb-wrap: 1120px;
	--drb-gutter: var(--wp--preset--spacing--4);
	--drb-tile-pink: #ffeef4;
	--drb-tile-green: #e8f7f0;
	--drb-tile-cream: #fdf7f0;
	--drb-footer-bg: #1f5d4c;
	--drb-footer-ink: #f3f7f5;
	--drb-footer-muted: rgba(243, 247, 245, 0.72);
	--drb-footer-line: rgba(243, 247, 245, 0.16);
	--drb-tabbar-height: 64px;
}

@media (min-width: 900px) {
	:root {
		--drb-gutter: var(--wp--preset--spacing--5);
	}
}

/* Base
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
}

body {
	overflow-x: hidden;
	font-feature-settings: "ss01" 0, "ss02" 0, "salt" 0, "dlig" 0;
}

p {
	max-inline-size: 70ch;
	text-wrap: pretty;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

::selection {
	background: var(--wp--preset--color--pink-illus);
	color: var(--wp--preset--color--text);
}

/* A tap on a phone should leave nothing behind: Android paints a blue-grey box over whatever is
   touched, which lands straight on the tab bar and the cards. The keyboard's own outline stays. */
html {
	-webkit-tap-highlight-color: transparent;
}

a,
button,
label,
summary,
input,
select,
textarea,
[role="button"],
[tabindex] {
	-webkit-tap-highlight-color: transparent;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--green-action);
	outline-offset: 2px;
}

/* A click or a tap leaves no ring; only the keyboard does. */
:focus:not(:focus-visible) {
	outline: none;
}

img {
	block-size: auto;
}

/* Square illustration slots. The pictures are trimmed to their subject when exported, so one can
   come back taller than it is wide; the slot keeps its square and the picture fits inside it
   instead of stretching the card around it. */
.drb-band__figure,
.drb-team__mark img,
.drb-page__hero-figure img,
.drb-stage-hero__figure img,
.drb-stage-card__figure img {
	aspect-ratio: 1;
	block-size: auto;
	object-fit: contain;
}

.drb-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.drb-skip {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--2);
	inset-inline-start: var(--wp--preset--spacing--2);
	z-index: 100;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	text-decoration: none;
	transform: translateY(-200%);
}

.drb-skip:focus {
	transform: none;
}

.drb-wrap {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--drb-wrap);
	margin-inline: auto;
	padding-inline: var(--drb-gutter);
}

/* Layout shell. The main landmark runs edge to edge; each section carries its own .drb-wrap, so
   backgrounds reach the sides of the screen. Block content inside a page sits in .drb-content,
   which is a constrained layout like the block editor's. */
.drb-site {
	display: flex;
	flex-direction: column;
	min-block-size: 100vh;
	min-block-size: 100dvh;
}

.drb-main {
	flex: 1 0 auto;
	outline: 0;
}

.drb-main > * + * {
	margin-block-start: 0;
}

.drb-main--sections .drb-content,
.drb-main--builder {
	padding-block: 0;
}

html.drb-locked {
	overflow: hidden;
}

.drb-section {
	padding-block: var(--wp--preset--spacing--6);
}

@media (min-width: 900px) {
	.drb-section {
		padding-block: var(--wp--preset--spacing--7);
	}
}

.drb-section__tools {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
}

.drb-label {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--green-ink);
	letter-spacing: 0.01em;
}

/* As a paragraph block the label is its own line. Left inline-block, it ignores the editor's
   centring class and sits at the start edge of a full-width band instead of above the title. */
p.drb-label {
	display: block;
}

/* Icons, buttons, links, inputs
   ------------------------------------------------------------------ */

.drb-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex-shrink: 0;
	vertical-align: -0.3em;
}

.drb-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-block-size: 44px;
	padding: 0.6em 1.4em;
	border: 0;
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-button:hover {
	background: var(--wp--preset--color--green-ink);
	color: var(--wp--preset--color--on-action);
}

.drb-button:active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.drb-button--outline {
	background: transparent;
	color: var(--wp--preset--color--green-action);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--green-action);
}

.drb-button--outline:hover {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-block-size: 44px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--green-action);
	white-space: nowrap;
}

.drb-link-arrow .drb-icon {
	transition: transform var(--drb-ease);
}

.drb-link-arrow:hover {
	color: var(--wp--preset--color--green-ink);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.drb-link-arrow:hover .drb-icon {
	transform: translateX(-3px);
}

.drb-rail-nav {
	display: none;
	gap: var(--wp--preset--spacing--2);
}

@media (min-width: 900px) and (hover: hover) {
	.drb-rail-nav {
		display: inline-flex;
	}
}

.drb-rail-nav__button {
	display: grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	cursor: pointer;
	transition: border-color var(--drb-ease), background-color var(--drb-ease);
}

.drb-rail-nav__button:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
}

.drb-rail-nav__button .drb-icon {
	inline-size: 18px;
	block-size: 18px;
}

/* In RTL the "previous" chevron points to the right, "next" to the left. */
.drb-rail-nav__button--next .drb-icon {
	transform: none;
}

.drb-rail-nav__button:not(.drb-rail-nav__button--next) .drb-icon {
	transform: scaleX(-1);
}

/* Chips */
.drb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin: var(--wp--preset--spacing--4) 0 0;
	padding: 0;
	list-style: none;
}

.drb-chip {
	display: inline-flex;
	align-items: center;
	min-block-size: 40px;
	padding: 0.35em 1em;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color var(--drb-ease), background-color var(--drb-ease), color var(--drb-ease);
}

.drb-chip:hover {
	border-color: var(--wp--preset--color--green-decor);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

/* Horizontal rails (life stages on every screen, magazine on phones)
   The rail lives inside the content column and clips at its edges, so the cards line up with
   every other section; the prev/next buttons and swiping reveal the rest.
   ------------------------------------------------------------------ */

.drb-rail__track {
	display: flex;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
	inline-size: max-content;
	min-inline-size: 100%;
}

.drb-rail__track > * {
	scroll-snap-align: start;
}

/* Header
   ------------------------------------------------------------------ */

.drb-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	padding-block: var(--wp--preset--spacing--3);
	/* Not a white strip: a wash of the brand's own two colours, thin enough to read through and
	   to keep the menu's contrast. */
	background:
		linear-gradient(90deg, rgba(255, 238, 244, 0.94) 0%, rgba(255, 252, 253, 0.9) 48%, rgba(232, 247, 240, 0.9) 100%),
		color-mix(in srgb, var(--wp--preset--color--page) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-block-end: 1px solid transparent;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-header.is-scrolled {
	border-block-end-color: var(--wp--preset--color--line);
	box-shadow: var(--drb-shadow-sm);
}

.admin-bar .drb-header {
	inset-block-start: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .drb-header {
		inset-block-start: 0;
	}
}

.drb-header__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
}

.drb-header__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.drb-header__logo img {
	inline-size: auto;
	block-size: 40px;
}

.drb-header__nav {
	flex: 1 1 auto;
	justify-content: center;
}

.drb-menu {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-menu > li {
	position: relative;
}

.drb-menu a {
	display: block;
	padding: 0.4rem 0.35rem;
	white-space: nowrap;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: color var(--drb-ease);
}

.drb-menu a:hover,
.drb-menu .current-menu-item > a,
.drb-menu .current-menu-ancestor > a {
	color: var(--wp--preset--color--green-action);
}

.drb-menu .current-menu-item > a,
.drb-menu .current-menu-ancestor > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
	text-decoration-color: var(--wp--preset--color--green-decor);
}

/* A second level opens under its parent on hover or keyboard focus. */
.drb-menu .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 5;
	display: grid;
	min-inline-size: 220px;
	margin: 0;
	padding: var(--wp--preset--spacing--2);
	list-style: none;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-md);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--drb-ease), transform var(--drb-ease), visibility var(--drb-ease);
}

.drb-menu li:hover > .sub-menu,
.drb-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.drb-menu .sub-menu a {
	padding: 0.5rem 0.75rem;
	border-radius: var(--drb-radius-sm);
}

.drb-menu .sub-menu a:hover {
	background: var(--wp--preset--color--green-bg);
}

.drb-header__tools {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	flex-shrink: 0;
}

.drb-header__cta {
	min-block-size: 40px;
	padding: 0.45em 1.1em;
	font-size: var(--wp--preset--font-size--small);
}

/* Phone header: logo on the start side, toggle and menu button on the end side.
   The booking button lives in the tab bar instead. */
@media (max-width: 899px) {
	.drb-header {
		padding-block: var(--wp--preset--spacing--2);
	}

	.drb-header__logo img {
		block-size: 34px;
	}

	.drb-header__nav,
	.drb-header__cta,
	.drb-header__account-label {
		display: none;
	}

	.drb-header__tools {
		margin-inline-start: auto;
	}
}

/* Header details
   ------------------------------------------------------------------
   A header is the first thing read on every page, so it carries more than a logo and links: the
   site's first action as a field rather than a hidden magnifier, the phone for whoever would
   rather call, and a hairline that only appears once the page has moved. */

.drb-header__find {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	min-block-size: 40px;
	padding-inline: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease), color var(--drb-ease);
}

.drb-header__find svg {
	inline-size: 18px;
	block-size: 18px;
	color: var(--wp--preset--color--pink-mid);
}

.drb-header__find:hover,
.drb-header__find:focus-visible {
	border-color: var(--wp--preset--color--pink-soft);
	box-shadow: var(--drb-shadow-sm);
	color: var(--wp--preset--color--text);
}

/* The magnifier and the phone are the narrow-screen versions of the field beside them.
   .drb-iconbutton is declared further down the file, so these need the extra class to win. */
.drb-header .drb-header__findicon,
.drb-header .drb-header__call {
	display: none;
}

/* The menu items sit in pills: hover fills them softly, the page you are on keeps its fill. */
.drb-menu a {
	padding: 0.42rem 0.9rem;
	border-radius: var(--drb-radius-full);
	transition: color var(--drb-ease), background-color var(--drb-ease);
}

.drb-menu a:hover {
	background: var(--drb-tile-pink);
}

.drb-menu .current-menu-item > a,
.drb-menu .current-menu-ancestor > a {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	text-decoration: none;
}

.drb-header__cta {
	gap: 0.5em;
	box-shadow: 0 6px 18px rgba(31, 122, 100, 0.22);
}

.drb-header__cta svg {
	inline-size: 18px;
	block-size: 18px;
	transition: transform var(--drb-ease);
}

.drb-header__cta:hover svg {
	transform: translateY(-2px);
}

/* The hairline under the header: a thread of the brand's two colours, drawn only once the page
   has been scrolled, so a page at rest keeps its calm. */
/* A thread of the brand's colours along the very top of the page, so the header is never a plain
   white strip even before anything is scrolled. */
.drb-header::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--pink-decor), var(--wp--preset--color--pink-soft) 30%, var(--wp--preset--color--green-illus) 62%, var(--wp--preset--color--green-decor));
	opacity: 0.9;
}

.drb-topbar + .drb-header::before {
	display: none;
}

.drb-header::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline: 0;
	block-size: 2px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--pink-soft) 22%, var(--wp--preset--color--green-illus) 50%, var(--wp--preset--color--pink-soft) 78%, transparent);
	opacity: 0;
	transition: opacity var(--drb-ease);
}

.drb-header.is-scrolled::after {
	opacity: 1;
}

.drb-header__logo img {
	transition: block-size var(--drb-ease);
}

@media (min-width: 900px) {
	.drb-header {
		transition: padding-block var(--drb-ease), border-color var(--drb-ease), box-shadow var(--drb-ease);
	}

	.drb-header.is-scrolled {
		padding-block: var(--wp--preset--spacing--2);
	}

	.drb-header.is-scrolled .drb-header__logo img {
		block-size: 34px;
	}

	.drb-header.is-scrolled .drb-header__find {
		min-block-size: 36px;
	}
}

@media (max-width: 899px) {
	.drb-header__find {
		display: none;
	}

	.drb-header .drb-header__findicon,
	.drb-header .drb-header__call {
		display: grid;
	}
}

/* Phone tab bar
   ------------------------------------------------------------------
   Four tabs and one raised key. The bar is a capsule of glass that floats off the screen edge,
   and booking rises out of the middle of it inside a ring of the page colour, which is what cuts
   the straight line. Only one item is ever coloured — the page you are on. The chat is an
   ordinary tab until a message is actually waiting. */

.drb-tabbar {
	display: none;
}

@media (max-width: 899px) {
	body.drb-has-tabbar {
		/* Room for the bar, for the key that rises out of it, and for the gap under both. */
		padding-block-end: calc(var(--drb-tabbar-height) + env(safe-area-inset-bottom, 0px) + 38px);
	}

	.drb-tabbar {
		position: fixed;
		inset-inline: 10px;
		inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
		z-index: 60;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: end;
		gap: 2px;
		padding: 8px 6px 6px;
		border: 1px solid rgba(255, 252, 253, 0.7);
		border-radius: 26px;
		background: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
		backdrop-filter: blur(20px) saturate(150%);
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		box-shadow: 0 12px 34px rgba(27, 36, 32, 0.16), 0 2px 6px rgba(27, 36, 32, 0.05);
		transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease-out;
	}

	.drb-tabbar.is-away {
		transform: translateY(calc(100% + 22px));
		opacity: 0;
	}

	.drb-tabbar__item {
		position: relative;
		display: grid;
		justify-items: center;
		gap: 4px;
		padding-block: 6px 4px;
		border-radius: 18px;
		color: var(--wp--preset--color--text-muted);
		text-decoration: none;
		transition: color var(--drb-ease), background-color var(--drb-ease);
	}

	.drb-tabbar__mark {
		display: grid;
		place-items: center;
		inline-size: 30px;
		block-size: 30px;
	}

	.drb-tabbar__item .drb-icon {
		inline-size: 23px;
		block-size: 23px;
		transition: transform var(--drb-ease);
	}

	.drb-tabbar__label {
		font-size: 11px;
		font-weight: 600;
		line-height: 1;
	}

	/* The one highlight on the bar. */
	.drb-tabbar__item[aria-current="page"] {
		color: var(--wp--preset--color--green-ink);
		background: var(--wp--preset--color--green-bg);
	}

	.drb-tabbar__item[aria-current="page"] .drb-icon {
		transform: scale(1.06);
	}

	/* Booking: a key that rises out of the bar, its label staying in the row with the others. */
	.drb-tabbar__item--book {
		gap: 0;
		padding-block-start: 0;
		background: none;
		color: var(--wp--preset--color--green-ink);
	}

	.drb-tabbar__item--book .drb-tabbar__mark {
		inline-size: 52px;
		block-size: 52px;
		/* The ring around the key is 5px wide, so the label needs that much more room under it
		   than the gap alone would give. */
		margin-block: -24px 9px;
		border-radius: var(--drb-radius-full);
		background: linear-gradient(180deg, #23886f, var(--wp--preset--color--green-action));
		color: var(--wp--preset--color--on-action);
		box-shadow: 0 0 0 5px var(--wp--preset--color--page), 0 10px 22px rgba(31, 122, 100, 0.36);
		transition: transform var(--drb-ease), box-shadow var(--drb-ease);
	}

	.drb-tabbar__item--book .drb-icon {
		inline-size: 24px;
		block-size: 24px;
	}

	.drb-tabbar__item--book:active .drb-tabbar__mark {
		transform: scale(0.94);
	}

	.drb-tabbar__item--book[aria-current="page"] {
		background: none;
	}

	.drb-tabbar__item--book[aria-current="page"] .drb-tabbar__mark {
		box-shadow: 0 0 0 5px var(--wp--preset--color--page), 0 0 0 7px var(--wp--preset--color--green-illus), 0 10px 22px rgba(31, 122, 100, 0.36);
	}

	/* Waiting message: the only other mark the bar ever shows. */
	.drb-tabbar__dot {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 2px;
		inline-size: 9px;
		block-size: 9px;
		border-radius: var(--drb-radius-full);
		background: var(--wp--preset--color--pink-decor);
		box-shadow: 0 0 0 2px var(--wp--preset--color--white);
		animation: drb-breathe 2.4s ease-in-out infinite;
	}

	.drb-tabbar__item--chat.is-open {
		color: var(--wp--preset--color--green-ink);
		background: var(--wp--preset--color--green-bg);
	}
}

/* Concern search
   The search box the hero carries, which the search dialog, the concerns list and the search
   and not-found pages reuse.
   ------------------------------------------------------------------ */

.drb-search {
	inline-size: 100%;
	max-inline-size: 560px;
}

.drb-search__field {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease);
}

.drb-search__field:focus-within {
	border-color: var(--wp--preset--color--green-action);
	box-shadow: var(--drb-shadow-lg), 0 0 0 3px var(--wp--preset--color--green-illus);
}

.drb-search__field > .drb-icon {
	inline-size: 22px;
	block-size: 22px;
	margin-inline-start: 6px;
	color: var(--wp--preset--color--text-muted);
}

.drb-search__input {
	flex: 1 1 auto;
	min-inline-size: 0;
	min-block-size: 44px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	text-align: start;

	/* The placeholder rotates through real questions, and the long ones reach the button.
	   Truncating them keeps the last word readable instead of shearing it. */
	text-overflow: ellipsis;
}

.drb-search__input:focus {
	outline: none;
}

.drb-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.drb-search__button {
	border-radius: var(--drb-radius-full);
	min-block-size: 44px;
	white-space: nowrap;
	flex-shrink: 0;
}

@media (max-width: 899px) {
	.drb-search__field > .drb-icon {
		display: none;
	}

	.drb-search__field {
		gap: var(--wp--preset--spacing--3);
		padding-inline-start: 10px;
	}

	/* The hint drops a step so the longest concern fits the box; what gets typed keeps the
	   reading size. The script drops the «مثلاً» prefix on this width for the same reason. */
	.drb-search__input::placeholder {
		font-size: var(--wp--preset--font-size--small);
	}

	.drb-search__button {
		padding-inline: 0.9em;
	}
}

/* Hero F — the lit stage
   ------------------------------------------------------------------
   The one place on the site that goes dark, the way the booking band does. A warm light pools
   behind an arch, the clay pieces stand on a round podium, and the search floats over the scene
   in a capsule of glass. White type on this green is the footer's pairing, which is the one dark
   surface the brand allows; the button stays green, in the light tint the dark ground needs. */

.drb-stage > span {
	position: absolute;
	display: block;
}

/* Insurance: if the entrance never runs — a tab that loads in the background, a browser that
   pauses animations — the script marks the stage after three seconds and the scene is simply
   there. Only the entrance channels are forced; the float keeps its own. */
.drb-stage.is-shown > span,
.drb-stage.is-shown .drb-stage__piece,
.drb-stage.is-shown .drb-stage__scene,
.drb-stage.is-shown .drb-stage__film {
	opacity: 1 !important;
	scale: 1 !important;
}

/* Concerns as a conversation
   ------------------------------------------------------------------ */

.drb-answers {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
	.drb-answers {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.drb-answers {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--4);
		padding-inline-start: 6%;
	}
}

.drb-answer {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	block-size: 100%;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.drb-answer__bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
	flex: 1 1 auto;
	padding: var(--wp--preset--spacing--4);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	border-end-start-radius: var(--drb-radius-sm);
	background: var(--wp--preset--color--white);
	transition: border-color var(--drb-ease), box-shadow var(--drb-ease), transform var(--drb-ease), background-color var(--drb-ease);
}

/* Bubble tail on the start side, like a message the visitor just sent. */
.drb-answer__bubble::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: -8px;
	inline-size: 16px;
	block-size: 16px;
	background: inherit;
	border-inline-start: 1px solid var(--wp--preset--color--line);
	border-block-end: 1px solid var(--wp--preset--color--line);
	clip-path: polygon(0 100%, 100% 100%, 100% 0);
	border-end-end-radius: 3px;
}

.drb-answer:hover .drb-answer__bubble {
	border-color: var(--wp--preset--color--green-decor);
	box-shadow: var(--drb-shadow-md);
	transform: translateY(-2px);
}

.drb-answer__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.5;
	color: var(--wp--preset--color--green-ink);
}

.drb-answer__line {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

@media (max-width: 479px) {
	.drb-answer__bubble {
		padding: var(--wp--preset--spacing--3);
	}

	.drb-answer__title {
		font-size: var(--wp--preset--font-size--medium);
	}

	.drb-answer__line {
		display: none;
	}
}

/* Steps
   ------------------------------------------------------------------ */

.drb-steps {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 720px) {
	.drb-steps {
		position: relative;
		gap: var(--wp--preset--spacing--5);
	}

	.drb-steps::before {
		content: "";
		position: absolute;
		inset-inline: 14%;
		inset-block-start: 28px;
		border-block-start: 2px dashed rgba(174, 229, 208, 0.35);
	}
}

/* Magazine cards
   ------------------------------------------------------------------ */

.drb-article__figure {
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--drb-tile-pink);
}

/* Magazine covers are full-frame flat illustrations (System B in ART-DIRECTION.md),
   not cut-out objects, so they fill the figure rather than sitting inside padding. */
.drb-article__figure img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	padding: 0;
	border-radius: 0;
}

.drb-byline {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--text-muted);
}

/* Post list cards (magazine listing)
   ------------------------------------------------------------------ */

.wp-block-post-featured-image {
	background: var(--drb-tile-pink);
	border-radius: var(--drb-radius-lg);
	overflow: hidden;
}

.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--6);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-inline-size: 2.5rem;
	padding: 0.4rem 0.75rem;
	border-radius: var(--drb-radius-full);
	text-align: center;
	text-decoration: none;
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

.wp-block-post-terms a {
	display: inline-block;
	padding: 0.1rem 0.75rem;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
	text-decoration: none;
}

/* Search block (inner pages) */
.wp-block-search__inside-wrapper {
	border-radius: var(--drb-radius-full);
	border-color: var(--wp--preset--color--line);
	padding: 4px;
	background: var(--wp--preset--color--white);
}

.wp-block-search__input {
	border: 0;
	padding-inline: 1rem;
	font-family: inherit;
}

.wp-block-search__button {
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
	border: 0;
}

/* Footer
   ------------------------------------------------------------------ */

.drb-footer {
	margin-block-start: var(--wp--preset--spacing--6);
	padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--4);
	background: var(--drb-footer-bg);
	color: var(--drb-footer-ink);
}

.drb-footer a {
	color: inherit;
	text-decoration: none;
}

.drb-footer a:hover {
	color: var(--wp--preset--color--pink-illus);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.drb-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	grid-template-columns: 1fr;
}

@media (min-width: 360px) {
	.drb-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.drb-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1000px) {
	.drb-footer__grid {
		grid-template-columns: 1.6fr repeat(4, 1fr);
	}

	.drb-footer__brand {
		grid-column: auto;
	}
}

.drb-footer__brand {
	max-inline-size: 36ch;
}

.drb-footer__logo {
	inline-size: 170px;
	margin-block-end: var(--wp--preset--spacing--3);
	border-radius: 0;
}

.drb-footer__tagline {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.drb-footer__note {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--small);
	color: var(--drb-footer-muted);
}

.drb-footer__social {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.drb-footer__title {
	margin: 0 0 var(--wp--preset--spacing--3);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--drb-footer-ink);
}

.drb-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-footer__col li + li {
	margin-block-start: var(--wp--preset--spacing--2);
}

.drb-footer__col a {
	display: inline-block;
	min-block-size: 32px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--drb-footer-muted);
}

.drb-footer__col a:hover {
	color: var(--wp--preset--color--pink-illus);
}

.drb-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
	margin-block-start: var(--wp--preset--spacing--4);
}

.drb-footer__badges img {
	inline-size: 72px;
	background: #fffcfd;
	border-radius: var(--drb-radius-sm);
}

.drb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5);
	margin-block-start: var(--wp--preset--spacing--6);
	padding-block-start: var(--wp--preset--spacing--4);
	border-block-start: 1px solid var(--drb-footer-line);
	font-size: var(--wp--preset--font-size--label);
	color: var(--drb-footer-muted);
}

.drb-footer__bottom p {
	margin: 0;
}

/* Motion
   Entrance and ambient animation, all short and easing out. The hero animates on load; the rest
   waits until it scrolls into view (theme.js adds `is-in`). Everything is switched off under
   prefers-reduced-motion at the end of this file.
   ------------------------------------------------------------------ */

@keyframes drb-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes drb-pop {
	from {
		opacity: 0;
		transform: scale(0.82);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes drb-breathe {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.015);
	}
}

/* Scroll-triggered groups: children start hidden and rise in order once the group is in view. */
/* Hidden only once the page's script has marked the document, so content never stays invisible
   when the script is blocked or fails. */
.js [data-anim] > * {
	opacity: 0;
}

[data-anim].is-in > * {
	animation: drb-rise 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms);
}

[data-anim="pop"].is-in > * {
	animation-name: drb-pop;
	transform-origin: 20% 100%;
}

.drb-answer__bubble {
	transform-origin: 10% 100%;
}

.drb-hero__chips > li:hover .drb-chip,
.drb-chip:focus-visible {
	transform: translateY(-2px);
}

.drb-chip {
	transition: border-color var(--drb-ease), background-color var(--drb-ease), color var(--drb-ease), transform var(--drb-ease);
}

/* The bar under a sideways rail, and the small press a card gives back on a touch screen.
   ------------------------------------------------------------------ */

.drb-railbar {
	position: relative;
	block-size: 3px;
	margin-block-start: var(--wp--preset--spacing--3);
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--line);
	overflow: hidden;
}

.drb-railbar > span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	inline-size: 30%;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--pink-decor);
	transition: inset-inline-start 120ms linear;
}

@media (min-width: 900px) {
	.drb-railbar {
		display: none;
	}
}

@media (hover: none) {
	.drb-card__link:active,
.drb-answer:active,
.drb-chip:active,
.drb-button:active,
.drb-tabbar__item:active {
		transform: scale(0.98);
	}
}

/* Reduced motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	.js [data-anim] > * {
		opacity: 1;
	}
}

/* Signatures and the disclaimer
   ------------------------------------------------------------------ */

/* Filtering hides rows rather than removing them, so nothing is lost
   when the script is off. */
[data-hidden="true"] {
	display: none !important;
}

/* Illustrations carry their surface's colour
   ------------------------------------------------------------------
   Each illustration is exported with its background painted to the exact colour of the surface it
   sits on, or with a transparent background where what sits behind it is not one flat colour (the
   hero clouds, the stage hero's gradient). A stage illustration exists once per tile colour, chosen
   by drb_stage_ground() in PHP. A matched file must not be blended: multiply over a matching field
   darkens it into a visible square, and so would a drop-shadow, which follows the file's rectangle.

   Until the whole set has been regenerated with its grounds, files still carrying the old white
   background are dropped into their surface with multiply, as before. A file served as a ground
   copy is marked .drb-illus--grounded and is left alone. Remove this rule once every illustration
   has been rebuilt. */

.drb-team__mark img:not(.drb-illus--grounded),
.drb-page__hero-figure img:not(.drb-illus--grounded),
.drb-stage-hero__figure img:not(.drb-illus--grounded),
.drb-stage-card__figure img:not(.drb-illus--grounded),
.drb-station__figure img:not(.drb-illus--grounded),
.drb-guide__cover img:not(.drb-illus--grounded),
.drb-card__figure img:not(.drb-illus--grounded) {
	mix-blend-mode: multiply;
}

.drb-station__figure,
.drb-guide__cover,
.drb-card__figure,
.drb-stage-card,
.drb-page__hero-figure,
.drb-stage-hero__figure {
	isolation: isolate;
}

/* ==================================================================
   Request forms, the booking page, the doctor page
   ================================================================== */

:root {
	/* Field outlines need 3:1 against white to be seen as a boundary (WCAG 1.4.11); the hairline
	   colour used for dividers is far below that. */
	--drb-field-border: color-mix(in srgb, var(--wp--preset--color--text-muted) 75%, white);
}

.drb-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	color: var(--wp--preset--color--text-muted);
}

.drb-form__consent input {
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	margin-block-start: 5px;
	accent-color: var(--wp--preset--color--green-action);
}

/* Visually hidden rather than display:none, which some form fillers skip over. Clipped in place
   instead of pushed off screen: in a right-to-left page an offset would widen the page. */
.drb-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.drb-button--block {
	justify-content: center;
	inline-size: 100%;
}

/* ==================================================================
   Theme shell: notice bar, header tools, menu drawer, search dialog
   ================================================================== */

.drb-topbar {
	background: var(--wp--preset--color--green-ink);
	color: var(--drb-footer-ink);
	font-size: var(--wp--preset--font-size--label);
}

.drb-topbar__inner {
	display: flex;
	justify-content: center;
	padding-block: 0.45rem;
	text-align: center;
}

.drb-topbar__text {
	margin: 0;
	max-inline-size: none;
	color: inherit;
	text-decoration: none;
}

a.drb-topbar__text:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	color: inherit;
}

.drb-iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-inline-size: 42px;
	min-block-size: 42px;
	padding: 0 0.6rem;
	border: 1px solid transparent;
	border-radius: var(--drb-radius-full);
	background: transparent;
	color: var(--wp--preset--color--green-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--drb-ease), border-color var(--drb-ease);
}

.drb-iconbutton:hover {
	background: var(--wp--preset--color--green-bg);
	color: var(--wp--preset--color--green-ink);
}

.drb-iconbutton .drb-icon {
	inline-size: 22px;
	block-size: 22px;
	vertical-align: 0;
}

.drb-header__account.is-member {
	border-color: var(--wp--preset--color--line);
}

.drb-header__toggle {
	display: none;
}

@media (max-width: 899px) {
	.drb-header__toggle {
		display: inline-flex;
	}

	.drb-header__tools .drb-iconbutton {
		padding: 0;
	}
}

/* Dialogs share the open/close motion and backdrop. */
.drb-drawer,
.drb-searchdialog {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--text);
	max-inline-size: 100vw;
	max-block-size: 100dvh;
}

.drb-drawer::backdrop,
.drb-searchdialog::backdrop {
	background: rgba(27, 36, 32, 0.38);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.drb-drawer {
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	margin: 0;
	block-size: 100dvh;
	inline-size: min(360px, 88vw);
}

.drb-drawer[open] .drb-drawer__panel {
	animation: drb-drawer-in 260ms ease-out;
}

.drb-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--5);
	block-size: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5) calc(var(--wp--preset--spacing--5) + env(safe-area-inset-bottom, 0px));
	background: linear-gradient(170deg, var(--drb-tile-pink) 0%, var(--wp--preset--color--cream) 42%, var(--wp--preset--color--white) 100%);
	overflow-y: auto;
	isolation: isolate;
}

/* A soft light in the corner of the drawer, the same one the hero uses. */
.drb-drawer__panel::before {
	content: "";
	position: absolute;
	inset-block-start: -18%;
	inset-inline-start: -30%;
	z-index: -1;
	inline-size: 90%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--wp--preset--color--green-bg) 0%, rgba(232, 247, 240, 0) 70%);
	pointer-events: none;
}

.drb-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.drb-drawer__logo {
	inline-size: auto;
	block-size: 32px;
}

.drb-drawer__menu,
.drb-drawer__menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drb-drawer__menu {
	display: grid;
	gap: var(--wp--preset--spacing--2);
}

.drb-drawer__menu a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--3);
	padding: 0.6rem 0.7rem;
	border-radius: var(--drb-radius-lg);
	background: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
	color: var(--wp--preset--color--green-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--drb-ease), box-shadow var(--drb-ease), transform var(--drb-ease);
}

/* The rows arrive one after another when the drawer opens. */
.drb-drawer[open] .drb-drawer__menu > li {
	animation: drb-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.drb-drawer[open] .drb-drawer__menu > li:nth-child(1) { animation-delay: 60ms; }

.drb-drawer[open] .drb-drawer__menu > li:nth-child(2) { animation-delay: 110ms; }

.drb-drawer[open] .drb-drawer__menu > li:nth-child(3) { animation-delay: 160ms; }

.drb-drawer[open] .drb-drawer__menu > li:nth-child(4) { animation-delay: 210ms; }

.drb-drawer[open] .drb-drawer__menu > li:nth-child(5) { animation-delay: 260ms; }

.drb-drawer[open] .drb-drawer__menu > li:nth-child(n+6) { animation-delay: 310ms; }

.drb-drawer__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--drb-radius-md);
	background: var(--drb-tile-pink);
	color: var(--wp--preset--color--pink-mid);
	transition: background-color var(--drb-ease), color var(--drb-ease);
}

.drb-drawer__icon .drb-icon {
	inline-size: 21px;
	block-size: 21px;
}

.drb-drawer__menu a:active {
	transform: scale(0.99);
}

.drb-drawer__quick {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--wp--preset--spacing--2);
}

.drb-drawer__quickitem {
	display: grid;
	justify-items: center;
	gap: 4px;
	padding-block: var(--wp--preset--spacing--3);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	text-decoration: none;
}

.drb-drawer__quickitem .drb-icon {
	inline-size: 20px;
	block-size: 20px;
	color: var(--wp--preset--color--pink-mid);
}

.drb-drawer__menu .sub-menu a {
	padding-inline-start: var(--wp--preset--spacing--4);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.drb-drawer__menu .current-menu-item > a {
	background: var(--wp--preset--color--green-bg);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--green-illus);
}

.drb-drawer__menu .current-menu-item > a .drb-drawer__icon {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-action);
}

.drb-drawer__foot {
	display: grid;
	gap: var(--wp--preset--spacing--3);
	margin-block-start: auto;
}

.drb-drawer__phone {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.drb-searchdialog {
	inset-block-start: 0;
	margin-block: min(12vh, 96px) 0;
	margin-inline: auto;
	inline-size: min(680px, calc(100vw - 2 * var(--drb-gutter)));
}

.drb-searchdialog[open] .drb-searchdialog__panel {
	animation: drb-dialog-in 220ms ease-out;
}

.drb-searchdialog__panel {
	padding: var(--wp--preset--spacing--5);
	border-radius: var(--drb-radius-xl);
	background: var(--wp--preset--color--white);
	box-shadow: var(--drb-shadow-lg);
}

.drb-searchdialog__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--4);
}

.drb-searchdialog__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.drb-searchdialog__alt {
	margin-block-start: var(--wp--preset--spacing--2);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--green-action);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.drb-searchdialog__label {
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

@keyframes drb-drawer-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes drb-dialog-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.drb-drawer[open] .drb-drawer__panel,
	.drb-searchdialog[open] .drb-searchdialog__panel {
		animation: none;
	}
}

/* ==================================================================
   Page heads, listings, pagination and empty states
   ================================================================== */

.drb-chip.is-active,
.drb-chip[aria-current="page"] {
	background: var(--wp--preset--color--green-action);
	border-color: var(--wp--preset--color--green-action);
	color: var(--wp--preset--color--on-action);
}

/* ==================================================================
   Login and registration
   ================================================================== */

.drb-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-block-end: var(--wp--preset--spacing--5);
	padding: 4px;
	border-radius: var(--drb-radius-full);
	background: var(--wp--preset--color--cream);
}

.drb-auth__tab {
	padding: 0.55rem;
	border-radius: var(--drb-radius-full);
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.drb-auth__tab[aria-current="page"] {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green-ink);
	box-shadow: var(--drb-shadow-sm);
}

.drb-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--small);
}

.drb-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.drb-auth__remember input {
	inline-size: 18px;
	block-size: 18px;
	accent-color: var(--wp--preset--color--green-action);
}

.drb-auth__forgot {
	color: var(--wp--preset--color--green-action);
}

/* ==================================================================
   Account
   ================================================================== */

.drb-request {
	display: grid;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--drb-radius-lg);
	background: var(--wp--preset--color--white);
}

.drb-request__closed {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}