/* Alpha Repair — booking button, modal, and Apple-style scrolling picker.
   Tokens follow the active Novamira design (Alpha Repair — Woodmart Blue),
   itself read from this theme's own --wd-* custom properties.
   NOTE: every component selector is prefixed with "body" to raise its
   specificity above Woodmart's own `:is(.btn, .button, button, ...)` reset
   (base.css), which shares the same (0,1,0) specificity as a bare class
   selector and would otherwise win on source order alone. */
:root {
	--rp-accent: #1C61E7;
	--rp-accent-dark: #164FC2;
	--rp-accent-soft: #E1EBFF;
	/* Booking-flow color: the "book an appointment" buttons (header button,
	   floating bubble, modal confirm) use this light green instead of the
	   site's blue accent, so booking reads as its own distinct action - the
	   call icon and everything else keep the blue accent above. */
	--rp-green: #4CAF50;
	--rp-green-dark: #43A047;
	--rp-ink: #242424;
	--rp-text: #767676;
	--rp-surface: #FFFFFF;
	--rp-bg: #F6F6F6;
	--rp-radius-sm: 5px;
	--rp-radius-md: 10px;
	--rp-radius-pill: 999px;
	--rp-font-heading: "Lexend Deca", Arial, Helvetica, sans-serif;
	--rp-font-body: "Open Sans", Arial, Helvetica, sans-serif;
}

/* ---- Floating action button ------------------------------------------ */
body .rp-appt-fab {
	position: fixed;
	right: 22px;
	bottom: 96px; /* clears the theme's own Kodee AI-assistant + scroll-to-top buttons */
	z-index: 999999;
	display: flex;
	align-items: center;
	gap: 0;
	border: none;
	cursor: pointer;
	background: var(--rp-green);
	color: #fff;
	padding: 0;
	border-radius: var(--rp-radius-pill);
	box-shadow: 0 8px 24px rgba(76, 175, 80, .35);
	font-family: var(--rp-font-body);
	transition: box-shadow .2s ease;
}
body .rp-appt-fab:hover,
body .rp-appt-fab:focus-visible {
	box-shadow: 0 10px 28px rgba(76, 175, 80, .48);
}
body .rp-appt-fab-icon {
	position: relative;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
body .rp-appt-fab-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(76, 175, 80, .55);
	animation: rp-appt-pulse 2.4s ease-out infinite;
}
@keyframes rp-appt-pulse {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.55); opacity: 0; }
}
body .rp-appt-fab-label {
	padding-right: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	max-width: 0;
	overflow: hidden;
	transition: max-width .25s ease, opacity .25s ease, padding-right .25s ease;
	opacity: 0;
}
body .rp-appt-fab:hover .rp-appt-fab-label,
body .rp-appt-fab:focus-visible .rp-appt-fab-label {
	max-width: 220px;
	opacity: 1;
	padding-right: 20px;
}
@media (max-width: 782px) {
	body .rp-appt-fab { right: 14px; bottom: 78px; }
	body .rp-appt-fab-icon { width: 52px; height: 52px; }
	body .rp-appt-fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	body .rp-appt-fab-ring { animation: none; display: none; }
}

/* ---- Header nav button ------------------------------------------------ */
body .rp-appt-nav-item { display: flex; align-items: center; margin-inline-start: 8px; }
body .rp-appt-nav-btn {
	display: inline-flex !important;
	position: relative !important;
	align-items: center;
	background: var(--rp-green) !important;
	color: #fff !important;
	padding: 9px 20px !important;
	border-radius: var(--rp-radius-sm) !important;
	font-family: var(--rp-font-body);
	font-weight: 600;
	text-transform: capitalize;
	white-space: nowrap;
	transition: background .2s ease;
}
body .rp-appt-nav-btn:hover,
body .rp-appt-nav-btn:focus-visible {
	background: var(--rp-green-dark) !important;
	color: #fff !important;
}

/* Secondary "Call us" button - outline style so it doesn't compete with the
   solid blue "Book" button as the primary call-to-action. */
body .rp-appt-nav-btn--outline {
	background: #fff !important;
	color: var(--rp-accent) !important;
	border: 1.5px solid var(--rp-accent) !important;
	padding: 7.5px 18px !important;
}
body .rp-appt-nav-btn--outline:hover,
body .rp-appt-nav-btn--outline:focus-visible {
	background: var(--rp-accent-soft) !important;
	color: var(--rp-accent) !important;
}

/* ---- Modal -------------------------------------------------------------*/
body .rp-appt-modal { position: fixed; inset: 0; z-index: 1000000; overflow-y: auto; padding: 0 16px; }
body .rp-appt-modal[hidden] { display: none; }
body .rp-appt-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20, 24, 33, .55);
	opacity: 0;
	transition: opacity .2s ease;
}
body .rp-appt-modal.is-open .rp-appt-modal-backdrop { opacity: 1; }
body .rp-appt-modal-card {
	position: relative;
	z-index: 1;
	width: min(420px, 100%);
	margin: 6vh auto 6vh;
	background: var(--rp-surface);
	border-radius: var(--rp-radius-md);
	padding: 28px 24px 24px;
	font-family: var(--rp-font-body);
	color: var(--rp-text);
	transform: translateY(16px);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
	box-sizing: border-box;
}
body .rp-appt-modal.is-open .rp-appt-modal-card { transform: translateY(0); opacity: 1; }
html.rp-appt-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	body .rp-appt-modal-backdrop, body .rp-appt-modal-card { transition: none; }
}

body .rp-appt-close {
	position: absolute !important; top: 14px; right: 14px;
	width: 32px; height: 32px;
	border: none; background: var(--rp-bg) !important; color: var(--rp-ink);
	border-radius: 50% !important; font-size: 20px; line-height: 1; cursor: pointer;
}
body .rp-appt-title {
	font-family: var(--rp-font-heading);
	font-weight: 500; color: var(--rp-ink);
	font-size: 21px; margin: 0 0 6px; line-height: 1.2;
}
body .rp-appt-subtitle { margin: 0 0 18px; font-size: 14px; line-height: 1.5; }

body .rp-appt-field { margin-bottom: 12px; }
body .rp-appt-field label {
	display: block; font-size: 13px; font-weight: 600; color: var(--rp-ink); margin-bottom: 5px;
}
body .rp-appt-field input {
	width: 100%; box-sizing: border-box;
	border: 1px solid #E1E1E1 !important; border-radius: var(--rp-radius-sm) !important;
	padding: 11px 12px; font-size: 15px; font-family: var(--rp-font-body); color: var(--rp-ink);
	background: #fff !important; height: auto !important;
}
body .rp-appt-field input:focus { outline: none; border-color: var(--rp-accent) !important; }
body .rp-appt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

body .rp-appt-picker-label {
	font-size: 13px; font-weight: 600; color: var(--rp-ink); margin: 16px 0 8px;
}
body .rp-appt-picker-heads { display: flex; margin-bottom: 4px; }
body .rp-appt-picker-heads span {
	flex: 1; text-align: center; font-size: 11px; text-transform: uppercase;
	letter-spacing: .04em; color: #A9AFBB; font-weight: 700;
}

body .rp-appt-picker {
	position: relative;
	display: flex;
	height: 220px;
	background: var(--rp-bg);
	border-radius: var(--rp-radius-md);
	overflow: hidden;
}
body .rp-appt-picker-highlight {
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 44px;
	transform: translateY(-50%);
	border-top: 1px solid #D9E4FB;
	border-bottom: 1px solid #D9E4FB;
	background: rgba(28, 97, 231, .06);
	pointer-events: none;
}
body .rp-appt-picker-col {
	flex: 1;
	height: 220px;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	padding: 88px 0;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	box-sizing: border-box;
}
body .rp-appt-picker-col::-webkit-scrollbar { display: none; }
body .rp-appt-picker-col + .rp-appt-picker-col { border-left: 1px solid #E7EBF3; }
body .rp-appt-picker-item {
	height: 44px;
	display: flex; align-items: center; justify-content: center;
	scroll-snap-align: center;
	font-size: 14px; color: #A9AFBB;
	font-family: var(--rp-font-body);
	transition: color .15s ease, font-size .15s ease, font-weight .15s ease;
	cursor: pointer;
	white-space: nowrap;
	padding: 0 4px;
	box-sizing: border-box;
}
body .rp-appt-picker-item.is-active {
	color: var(--rp-ink);
	font-weight: 700;
	font-size: 16px;
}

body .rp-appt-summary {
	margin: 14px 0 4px; font-size: 14px; color: var(--rp-ink); font-weight: 600; text-align: center;
}
body .rp-appt-error {
	margin: 8px 0 0; font-size: 13px; color: #C0392B; background: #FDEDEC;
	border-radius: var(--rp-radius-sm); padding: 8px 10px; line-height: 1.4;
}

body .rp-appt-submit {
	width: 100%; margin-top: 16px;
	background: var(--rp-green) !important; color: #fff !important; border: none !important;
	border-radius: var(--rp-radius-sm) !important; padding: 13px 16px;
	font-size: 15px; font-weight: 700; text-transform: capitalize;
	cursor: pointer; font-family: var(--rp-font-body);
	transition: background .2s ease, transform .1s ease;
}
body .rp-appt-submit:hover { background: var(--rp-green-dark) !important; }
body .rp-appt-submit:active { transform: scale(.98); }
body .rp-appt-submit:disabled { opacity: .65; cursor: default; }

body .rp-appt-success { text-align: center; padding: 18px 0 4px; }
body .rp-appt-success-icon {
	width: 56px; height: 56px; margin: 0 auto 14px;
	background: var(--rp-accent-soft); color: var(--rp-accent);
	border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-size: 24px; font-weight: 700;
}
body .rp-appt-success p { color: var(--rp-ink); font-size: 15px; margin: 0 0 18px; line-height: 1.5; }

/* ---- Mobile sticky-toolbar call icon -----------------------------------
   Woodmart's own fixed bottom bar (.wd-toolbar, shown under 1025px) already
   holds Compare / Wishlist / Cart as .wd-tools-element.wd-design-5 items;
   this call icon is injected as a matching sibling (see
   injectToolbarCallButton() in repair-appointments.js) so it reuses the
   theme's own flex sizing, spacing and label placement and simply needs its
   SVG glyph sized and centered like the theme's icon-font glyphs are. */
body .rp-appt-call-toolbar .wd-tools-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}
body .rp-appt-call-toolbar a { color: inherit; }

/* ---- Desktop header call icon -------------------------------------------
   Sits in the same row as the theme's own account/compare/wishlist/cart
   icons (see injectCallButton() in repair-appointments.js); the theme's
   per-build hashed classes size those icons, so this reproduces the same
   62x40 slot and 20px centered glyph directly rather than depending on
   classes that vary between header configurations. */
body .rp-appt-call-icon-header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 40px;
}
body .rp-appt-call-icon-header a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #333;
}
/* The theme renders account/compare/wishlist as solid-white 42px circles
   (cart alone is filled accent-blue, as the row's one primary action) -
   matching that white-circle treatment here is what makes this read as
   "one more icon in the row" instead of a foreign element. */
body .rp-appt-call-icon-header .wd-tools-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	transition: background .2s ease, color .2s ease;
}
body .rp-appt-call-icon-header a:hover .wd-tools-icon,
body .rp-appt-call-icon-header a:focus-visible .wd-tools-icon {
	background: var(--rp-accent);
	color: #fff;
}
body .rp-appt-call-icon-header .wd-tools-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}
/* Fallback path only (icon row not found): a plain nav-item wrapper needs
   its own sizing since it isn't inside .whb-column there. */
body .rp-appt-nav-item > .rp-appt-call-icon-header { margin-inline-start: 4px; }