/* Rhesa Care — Appointments front end.
   House style: Playfair Display headings, Hanken Grotesk body, four colours
   (purple, lavender, white, ink), SHARP corners everywhere. Two-pane layout:
   calendar | times, then recap | details.

   Note on !important: theme button styles (pill radii, solid fills) were
   bleeding into the widget, so the interactive elements below force their
   radius, background and appearance. Scoped under .rca-book, so nothing
   escapes the widget. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

.rca-book {
	--rca-purple:      #3E2B7E;
	--rca-purple-dark: #2C1E5C;
	--rca-lav:         #F2ECFB;
	--rca-lav-line:    #E4D9F6;
	--rca-ink:         #171320;
	--rca-body:        #4A4458;
	--rca-white:       #FFFFFF;

	max-width: 900px;
	margin: 0 auto;
	color: var(--rca-ink);
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

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

/* Reset theme button chrome so our sharp, light styling wins. */
.rca-book button {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	line-height: 1.2;
	margin: 0;
	border-radius: 0 !important;
}
.rca-book select { font-family: inherit; border-radius: 0 !important; }

.rca-h {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.16;
	margin: 0 0 18px;
	color: var(--rca-ink);
}

.rca-back {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--rca-purple);
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 16px;
}
.rca-back:hover { text-decoration: underline; }

/* ── Step 1: appointment type ──────────────────────────────── */
.rca-types { display: grid; gap: 12px; }
.rca-type-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 3px;
	padding: 18px 20px;
	border: 1px solid var(--rca-lav-line) !important;
	background: var(--rca-white) !important;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease;
}
.rca-type-btn:hover { border-color: var(--rca-purple) !important; background: var(--rca-lav) !important; }
.rca-type-name { font-weight: 700; font-size: 1.08rem; color: var(--rca-ink); }
.rca-type-meta { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rca-purple); }
.rca-type-desc { font-size: 14px; color: var(--rca-body); margin-top: 5px; }

/* ── Step 2: calendar + times (split view) ─────────────────── */
.rca-plan-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.rca-plan-top .rca-back { margin-bottom: 0; }
.rca-tz {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--rca-body);
}
.rca-tz-select {
	border: 1px solid var(--rca-lav-line);
	background: var(--rca-white);
	color: var(--rca-ink);
	padding: 8px 30px 8px 12px;
	font-size: 14px;
	cursor: pointer;
	max-width: 230px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233E2B7E' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.rca-planner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* Calendar */
.rca-cal {
	border: 1px solid var(--rca-lav-line);
	padding: 18px;
	background: var(--rca-white);
}
.rca-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.rca-cal-title {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: 1.2rem;
}
.rca-cal-nav {
	border: 1px solid var(--rca-lav-line) !important;
	background: var(--rca-white) !important;
	width: 36px; height: 36px;
	cursor: pointer;
	font-size: 17px;
	line-height: 1;
	color: var(--rca-purple);
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.rca-cal-nav:hover:not(:disabled) { background: var(--rca-purple) !important; color: #fff; border-color: var(--rca-purple) !important; }
.rca-cal-nav:disabled { opacity: .3; cursor: not-allowed; }
.rca-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rca-cal-dow { margin-bottom: 6px; }
.rca-cal-dow span {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rca-body);
	padding: 2px 0;
}

/* Day cells: square. Available = lavender fill. Past / closed = plain number. */
.rca-day {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	background: transparent !important;
	color: var(--rca-body);
	border: 1px solid transparent !important;
	cursor: default;
	padding: 0;
}
.rca-day-blank { visibility: hidden; }
.rca-day-avail {
	background: var(--rca-lav) !important;
	color: var(--rca-ink);
	cursor: pointer;
}
.rca-day-avail:hover { border-color: var(--rca-purple) !important; }
.rca-day-sel {
	background: var(--rca-lav) !important;
	border: 2px solid var(--rca-purple) !important;
	font-weight: 700;
}
.rca-day:disabled { opacity: 1; } /* keep unavailable days looking like plain numbers */

/* Times pane */
.rca-times { min-width: 0; }
.rca-times-head {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: 1.15rem;
	margin-bottom: 4px;
}
.rca-times-note {
	font-size: 12px;
	color: var(--rca-body);
	margin-bottom: 12px;
	min-height: 14px;
}
.rca-slots {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-height: 360px;
	overflow-y: auto;
	padding-right: 4px;
}
.rca-slot {
	width: 100%;
	text-align: center;
	padding: 13px 12px;
	background: var(--rca-white) !important;
	border: 1px solid var(--rca-lav-line) !important;
	color: var(--rca-ink);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}
.rca-slot:hover { border-color: var(--rca-purple) !important; background: var(--rca-lav) !important; }
.rca-none { color: var(--rca-body); font-size: 14px; padding: 6px 0; }

/* ── Step 3: recap + details (split view) ──────────────────── */
.rca-review {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 26px;
	align-items: start;
}
.rca-recap {
	background: var(--rca-lav);
	border: 1px solid var(--rca-lav-line);
	padding: 22px;
}
.rca-recap-type {
	font-family: "Playfair Display", Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	margin-bottom: 16px;
	color: var(--rca-ink);
}
.rca-recap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rca-recap-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--rca-body); }
.rca-recap-ic { flex: none; line-height: 0; margin-top: 1px; }
.rca-recap-ic svg { width: 18px; height: 18px; color: var(--rca-purple); display: block; }

.rca-form label {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
}
.rca-form input,
.rca-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 12px 14px;
	border: 1px solid var(--rca-lav-line);
	border-radius: 0;
	font-size: 15px;
	font-family: inherit;
	color: var(--rca-ink);
	background: var(--rca-white);
	transition: border-color .18s ease;
}
.rca-form input:focus,
.rca-form textarea:focus { outline: none; border-color: var(--rca-purple); }
.rca-req { color: var(--rca-purple); }

.rca-form-error {
	background: var(--rca-lav);
	border: 1px solid var(--rca-lav-line);
	border-left: 3px solid var(--rca-purple);
	color: var(--rca-ink);
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
}
.rca-submit {
	background: var(--rca-purple) !important;
	color: #fff;
	border: 1.5px solid var(--rca-purple) !important;
	padding: 15px 28px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
	transition: background .18s ease;
}
.rca-submit:hover { background: var(--rca-purple-dark) !important; border-color: var(--rca-purple-dark) !important; }
.rca-submit:disabled { opacity: .6; cursor: default; }

/* ── Notices + loading ─────────────────────────────────────── */
.rca-notice {
	padding: 13px 16px;
	margin-bottom: 18px;
	font-size: 14px;
	border: 1px solid var(--rca-lav-line);
	border-left: 3px solid var(--rca-purple);
	background: var(--rca-lav);
	color: var(--rca-ink);
}
.rca-empty { color: var(--rca-body); padding: 22px; text-align: center; }
.rca-loading { text-align: center; padding: 18px; }
.rca-spinner {
	display: inline-block;
	width: 28px; height: 28px;
	border: 3px solid var(--rca-lav-line);
	border-top-color: var(--rca-purple);
	border-radius: 50%;
	animation: rca-spin .8s linear infinite;
}
@keyframes rca-spin { to { transform: rotate(360deg); } }

/* ── Responsive: panes stack ───────────────────────────────── */
@media (max-width: 760px) {
	.rca-planner { grid-template-columns: 1fr; gap: 20px; }
	.rca-review { grid-template-columns: 1fr; gap: 20px; }
	.rca-slots { max-height: none; }
}
@media (max-width: 480px) {
	.rca-book { font-size: 15px; }
}

/* ── Theme-proofing ────────────────────────────────────────────
   Some themes force ALL button/link text to white, which hid the day
   numbers, the slot times and the nav arrows. These rules use deep,
   class-scoped selectors + !important so dark text wins over the theme.
   The day and slot cells also get a slightly rounded outline here (overriding
   the sharp-button reset above), per the requested look. */
.rca-book .rca-cal-head .rca-cal-nav { color: var(--rca-purple) !important; }

.rca-book .rca-cal-days .rca-day {
	color: var(--rca-ink) !important;          /* grey/black numbers, not white */
	border-radius: 6px !important;             /* square-ish, edges slightly curved */
}
.rca-book .rca-cal-days .rca-day-avail {
	color: var(--rca-ink) !important;
	background: var(--rca-lav) !important;      /* available = soft lavender chip */
	border: 1px solid var(--rca-lav-line) !important;
}
.rca-book .rca-cal-days .rca-day-avail:hover { border-color: var(--rca-purple) !important; }
.rca-book .rca-cal-days .rca-day-sel {
	background: var(--rca-lav) !important;
	border: 2px solid var(--rca-purple) !important;
	color: var(--rca-ink) !important;
	font-weight: 700;
}
.rca-book .rca-cal-days .rca-day:disabled {
	color: var(--rca-body) !important;          /* past / unavailable: plain grey number */
	background: transparent !important;
	border-color: transparent !important;
}

.rca-book .rca-slots .rca-slot { color: var(--rca-ink) !important; border-radius: 5px !important; }
.rca-book .rca-types .rca-type-name { color: var(--rca-ink) !important; }
.rca-book .rca-types .rca-type-meta { color: var(--rca-purple) !important; }
.rca-book .rca-types .rca-type-desc { color: var(--rca-body) !important; }
.rca-book .rca-step .rca-back { color: var(--rca-purple) !important; }
.rca-book .rca-plan-top .rca-tz-select { color: var(--rca-ink) !important; }
.rca-book .rca-form input,
.rca-book .rca-form textarea { color: var(--rca-ink) !important; }
.rca-book .rca-times-head,
.rca-book .rca-cal-title,
.rca-book .rca-recap-type,
.rca-book .rca-h { color: var(--rca-ink) !important; }

/* ── v1.1: meeting mode, booker profile, guests, manage flows ──── */
.rca-tz-note { font-size: 13px; color: var(--rca-body); margin-bottom: 14px; }
.rca-sub { color: var(--rca-body); font-size: 15px; margin: 0 0 16px; }

/* Meeting-mode cards */
.rca-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rca-mode-btn {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	text-align: left; padding: 20px;
	border: 1px solid var(--rca-lav-line) !important; background: var(--rca-white) !important;
	cursor: pointer; transition: border-color .18s ease, background .18s ease;
}
.rca-mode-btn:hover { border-color: var(--rca-purple) !important; background: var(--rca-lav) !important; }
.rca-mode-name { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.2rem; }
.rca-mode-hint { font-size: 13px; }
@media (max-width: 480px) { .rca-modes { grid-template-columns: 1fr; } }

/* Booker profile */
.rca-booker { border: 0; padding: 0; margin: 4px 0 14px; }
.rca-booker legend { font-size: 14px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.rca-booker-opts { display: grid; gap: 8px; }
.rca-booker-opt {
	display: flex; align-items: flex-start; gap: 10px; margin: 0;
	padding: 12px 14px; border: 1px solid var(--rca-lav-line); cursor: pointer;
	font-weight: 500; font-size: 15px;
}
.rca-booker-opt:hover { border-color: var(--rca-purple); background: var(--rca-lav); }
.rca-booker-opt input { accent-color: var(--rca-purple); width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }
.rca-booker-text { display: flex; flex-direction: column; gap: 3px; }
.rca-booker-desc { font-weight: 400; font-size: 13px; line-height: 1.35; color: var(--rca-body); text-transform: none; }

/* Guests */
.rca-guests { margin-bottom: 14px; }
.rca-guests-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.rca-guest-row { display: flex; gap: 8px; margin-bottom: 8px; }
.rca-guest-input {
	flex: 1; padding: 11px 12px; border: 1px solid var(--rca-lav-line);
	font-size: 15px; font-family: inherit; color: var(--rca-ink);
}
.rca-guest-input:focus { outline: none; border-color: var(--rca-purple); }
.rca-guest-remove {
	flex: none; width: 40px; border: 1px solid var(--rca-lav-line) !important;
	background: var(--rca-white) !important; color: var(--rca-purple);
	font-size: 20px; line-height: 1; cursor: pointer;
}
.rca-guest-remove:hover { border-color: var(--rca-purple) !important; background: var(--rca-lav) !important; }
.rca-guest-add {
	background: none !important; border: 0 !important; padding: 0 !important;
	color: var(--rca-purple); font-weight: 700; font-size: 14px; cursor: pointer;
}
.rca-guest-add:hover { text-decoration: underline; }

/* Manage flows (reschedule / cancel) */
.rca-cancel-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.rca-cancel-form textarea {
	display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
	border: 1px solid var(--rca-lav-line); font-size: 15px; font-family: inherit; color: var(--rca-ink);
}
.rca-cancel-form textarea:focus { outline: none; border-color: var(--rca-purple); }
.rca-result { margin-top: 8px; }

.rca-book .rca-mode-name { color: var(--rca-ink) !important; }
.rca-book .rca-mode-hint { color: var(--rca-body) !important; }
.rca-book .rca-booker-opt { color: var(--rca-ink) !important; }
.rca-book .rca-guest-add,
.rca-book .rca-guest-remove { color: var(--rca-purple) !important; }

/* Quiet "prefer to meet in person / online?" line under the calendar */
.rca-mode-switch { margin-top: 18px; text-align: center; font-size: 13px; color: var(--rca-body); }
.rca-mode-switch-link {
	background: none !important; border: 0 !important; padding: 0 !important;
	color: var(--rca-purple); font-size: 13px; text-decoration: underline;
	cursor: pointer; font-family: inherit;
}
.rca-mode-switch-link:hover { color: var(--rca-purple-dark); }
.rca-book .rca-mode-switch-link { color: var(--rca-purple) !important; }