/**
 * Cordova Health - design tokens
 * Colors verified directly against the site's own screenshot (pixel-sampled,
 * not guessed): the same navy (#172c3d) is used for both the header's solid
 * "Join the Waitlist" button AND the outline "Login Now" button's border -
 * one consistent brand navy across every button on the site. Buttons are
 * fully pill-shaped (border-radius far larger than half the button height).
 * Form fields use a bottom border only, no box/background - confirmed from
 * the "Email Address" newsletter field in the footer.
 */
:root {
	--cordova-cream: #f1e7db;
	--cordova-navy: #172c3d;
	--cordova-navy-hover: #22394c;
	--cordova-maroon: #4a293c;
	--cordova-green: #192a24;
	--cordova-text: #1f2937;
	--cordova-text-muted: #6b7280;
	--cordova-border: #d8cdbd;
	--cordova-radius-card: 14px;
	--cordova-radius-pill: 999px;
}

/* ---------- Buttons - matches the site header's button style exactly ----------
   Every rule in this section carries !important and is doubled up under
   .cordova-account-wrap for extra specificity. Themes commonly ship a
   Customizer "Buttons" style (box-shadow, uppercase text, letter-spacing,
   a different radius/border) that targets every <button>/.button on the
   site with its own !important rules or just wins the cascade by loading
   after this file - without guarding here, that leaks straight through
   onto these plain <button> elements and makes them look like the theme's
   default button instead of Cordova's pill style. */
.cordova-submit-btn,
.cordova-account-wrap .button,
.cordova-account-wrap.cordova-account-wrap .button,
.cordova-login-wrap .cordova-submit-btn {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	width: 100%; padding: 14px 28px !important; margin-top: 10px;
	background: var(--cordova-navy) !important; color: #fff !important; border: 2px solid var(--cordova-navy) !important;
	border-radius: var(--cordova-radius-pill) !important; font-size: 16px !important; font-weight: 700 !important;
	font-family: inherit !important; line-height: normal !important; text-transform: none !important; letter-spacing: normal !important;
	box-shadow: none !important; text-shadow: none !important; outline: none !important;
	cursor: pointer; text-decoration: none !important; transition: background .15s ease, color .15s ease;
}
.cordova-submit-btn:hover,
.cordova-account-wrap .button:hover,
.cordova-account-wrap.cordova-account-wrap .button:hover {
	background: var(--cordova-navy-hover) !important; border-color: var(--cordova-navy-hover) !important; color: #fff !important;
}
.cordova-submit-btn:disabled { opacity: .6; cursor: default; }

/* Secondary/outline variant - same shape, transparent fill (matches "Login Now") */
.cordova-btn-outline,
.cordova-account-wrap.cordova-account-wrap .cordova-btn-outline {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	padding: 12px 26px !important; background: transparent !important; color: var(--cordova-navy) !important;
	border: 2px solid var(--cordova-navy) !important; border-radius: var(--cordova-radius-pill) !important;
	font-size: 15px !important; font-weight: 700 !important; font-family: inherit !important; line-height: normal !important;
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; outline: none !important;
	cursor: pointer; text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}
.cordova-btn-outline:hover,
.cordova-account-wrap.cordova-account-wrap .cordova-btn-outline:hover {
	background: var(--cordova-navy) !important; color: #fff !important;
}

/* Small inline buttons (date/time pickers, list-row actions) keep the pill
   shape but at a more compact size - full-width isn't right inside a list row.
   !important here isn't about theme leakage - it's so this override still
   wins against the higher-specificity ".cordova-account-wrap.cordova-account-wrap
   .button" full-width rule above (added for theme hardening) which would
   otherwise take precedence by specificity alone. */
.cordova-account-wrap .cordova-date-btn,
.cordova-account-wrap .cordova-time-btn,
.cordova-account-wrap .cordova-book-appointment-btn,
.cordova-account-wrap .cordova-cancel-appointment-btn {
	width: auto !important; margin-top: 0 !important; padding: 10px 20px !important; font-size: 14px !important;
}

/* ---------- Form fields - bottom border only, no box (matches the site's own forms) ---------- */
.cordova-field-group input[type="text"],
.cordova-field-group input[type="email"],
.cordova-field-group input[type="tel"],
.cordova-field-group input[type="date"],
.cordova-field-group input[type="url"],
.cordova-field-group input[type="number"],
.cordova-field-group select,
.cordova-account-wrap input[type="text"],
.cordova-account-wrap input[type="email"],
.cordova-account-wrap input[type="tel"],
.cordova-account-wrap select,
.cordova-login-wrap input[type="text"],
.cordova-login-wrap input[type="password"] {
	width: 100%; padding: 10px 2px; border: none; border-bottom: 1px solid var(--cordova-border);
	background: transparent; font-size: 16px; color: var(--cordova-text);
	border-radius: 0; transition: border-color .15s ease;
}
.cordova-field-group input:focus,
.cordova-account-wrap input:focus,
.cordova-account-wrap select:focus,
.cordova-login-wrap input:focus {
	outline: none; border-bottom-color: var(--cordova-navy); box-shadow: none;
}
.cordova-journal-composer textarea,
.cordova-account-wrap textarea {
	width: 100%; min-height: 80px; padding: 8px 2px; border: none; border-bottom: 1px solid var(--cordova-border);
	background: transparent; font-size: 15px; border-radius: 0; resize: vertical;
}
.cordova-journal-composer textarea:focus,
.cordova-account-wrap textarea:focus { outline: none; border-bottom-color: var(--cordova-navy); }

/* ---------- Inline signup form (replaces the add-to-cart button) ---------- */
.cordova-inline-form { max-width: 640px; margin: 20px 0; }
.cordova-inline-form h3 { margin-top: 0; }
.cordova-view { width: 100%; }

.cordova-modal__error { color: #8a2f22; background: #fbe9e5; border-radius: 6px; padding: 10px 14px; }

/* ---------- Payment popup (real WooCommerce checkout in an iframe) ---------- */
.cordova-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.cordova-modal.is-open { display: block; }
.cordova-modal__backdrop { position: absolute; inset: 0; background: rgba(23,44,61,.6); }
.cordova-modal__dialog {
	position: relative; margin: 5vh auto; background: var(--cordova-cream);
	border-radius: var(--cordova-radius-card); max-height: 90vh; overflow-y: auto;
	box-shadow: 0 20px 60px rgba(23,44,61,.35);
}
.cordova-payment-dialog { max-width: 560px; height: 85vh; padding: 20px; display: flex; flex-direction: column; }
.cordova-modal__close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; line-height: 1; z-index: 2; color: var(--cordova-navy); }
.cordova-payment-loading { text-align: center; padding: 60px 0; color: var(--cordova-text-muted); }
#cordova-payment-frame { width: 100%; flex: 1; border: none; border-radius: 6px; display: none; }
body.cordova-modal-open { overflow: hidden; }

.cordova-subscribe-summary {
	display: flex; justify-content: space-between; align-items: center;
	background: #fff; border: 1px solid var(--cordova-border); border-radius: var(--cordova-radius-card);
	padding: 20px 24px; margin-bottom: 24px;
}
.cordova-subscribe-summary__label {
	text-transform: uppercase; letter-spacing: .04em; font-size: 12px; font-weight: 700;
	color: var(--cordova-text-muted); margin-bottom: 4px;
}
.cordova-subscribe-summary__name { font-size: 20px; font-weight: 700; color: var(--cordova-text); }
.cordova-subscribe-summary__price { font-size: 28px; font-weight: 800; color: var(--cordova-navy); white-space: nowrap; }
.cordova-subscribe-summary__price .woocommerce-Price-currencySymbol { font-size: 20px; }

.cordova-field-group { margin-bottom: 22px; }
.cordova-field-group label { display: block; font-weight: 600; margin-bottom: 4px; color: var(--cordova-text); }
.cordova-field-group .req { color: var(--cordova-maroon); }
.cordova-hint { color: var(--cordova-text-muted); font-size: 13px; margin: 0 0 10px; }
.cordova-row { display: flex; gap: 20px; }
.cordova-row .cordova-field-group { flex: 1; }
.cordova-field-group.cordova-checkbox label { font-weight: 400; display: flex; gap: 10px; align-items: flex-start; }
.cordova-field-group .cordova-radio { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; margin-right: 24px; }

.cordova-purchase-notice { background: #fff; border-left: 4px solid var(--cordova-maroon); margin: 16px 0; }
.cordova-purchase-notice p { margin: 0; color: var(--cordova-text); }
.cordova-purchase-notice a { color: var(--cordova-maroon); font-weight: 600; }

/* ---------- My Account 3-column "wall" layout ----------
   Background/padding/margin/typography/border for each column, plus the nav
   menu's default/hover/active colors, are all driven by CSS custom
   properties - each with a fallback here that reproduces the ORIGINAL
   hardcoded design exactly, so leaving every field under Settings >
   Cordova > "Account Page Design" blank looks identical to before that
   feature existed. Cordova_Account::enqueue_assets() attaches a small
   inline <style> block (built by Cordova_Settings::get_account_design_css())
   that overrides only the variables an admin has actually set - see that
   method's docblock for the full list of custom property names.

   The grid-template-columns WIDTHS themselves aren't a CSS variable: they
   depend on which columns are even present (a column can be turned off
   entirely, reflowing to 2 columns), which templates/myaccount/my-account.php
   computes in PHP and applies as an inline style on .cordova-account-wrap
   directly - see that file. */
.cordova-account-wrap {
	display: grid; grid-template-columns: 25% 50% 25%; gap: 24px; align-items: start;
	max-width: 1400px; margin: 30px auto; padding: 0 20px;
	color: var(--cordova-text);
}
@media (max-width: 900px) {
	/* !important: an inline style on this same element sets
	   grid-template-columns to whatever 2-or-3-column split is currently
	   active (see my-account.php) - inline styles otherwise always beat a
	   plain stylesheet rule, media query or not, which would defeat this
	   mobile single-column collapse entirely. */
	.cordova-account-wrap { grid-template-columns: 1fr !important; }
}
.cordova-col-left, .cordova-col-right { display: flex; flex-direction: column; gap: 20px; }
.cordova-card {
	background: #fff; border-radius: var(--cordova-radius-card); padding: 24px;
	box-shadow: 0 1px 3px rgba(23,44,61,.08);
}
.cordova-card h2, .cordova-card h3, .cordova-card h4 { color: var(--cordova-navy); }

.cordova-col-left {
	background: var(--cordova-col-left-bg, transparent);
	padding: var(--cordova-col-left-padding, 0);
	margin: var(--cordova-col-left-margin, 0);
	font-family: var(--cordova-col-left-font-family, inherit);
	font-size: var(--cordova-col-left-font-size, inherit);
	color: var(--cordova-col-left-text-color, inherit);
	border-width: var(--cordova-col-left-border-width, 0);
	border-style: var(--cordova-col-left-border-style, solid);
	border-color: var(--cordova-col-left-border-color, transparent);
	border-radius: var(--cordova-col-left-border-radius, 0);
}
.cordova-col-left h2, .cordova-col-left h3, .cordova-col-left h4 { color: var(--cordova-col-left-heading-color, var(--cordova-navy)); }

.cordova-col-middle {
	background: var(--cordova-col-middle-bg, transparent);
	padding: var(--cordova-col-middle-padding, 0);
	margin: var(--cordova-col-middle-margin, 0);
	font-family: var(--cordova-col-middle-font-family, inherit);
	font-size: var(--cordova-col-middle-font-size, inherit);
	color: var(--cordova-col-middle-text-color, inherit);
	border-width: var(--cordova-col-middle-border-width, 0);
	border-style: var(--cordova-col-middle-border-style, solid);
	border-color: var(--cordova-col-middle-border-color, transparent);
	border-radius: var(--cordova-col-middle-border-radius, 0);
}
.cordova-col-middle h2, .cordova-col-middle h3, .cordova-col-middle h4 { color: var(--cordova-col-middle-heading-color, var(--cordova-navy)); }
.cordova-col-middle .cordova-card { margin-bottom: 20px; }

.cordova-col-right {
	background: var(--cordova-col-right-bg, transparent);
	padding: var(--cordova-col-right-padding, 0);
	margin: var(--cordova-col-right-margin, 0);
	font-family: var(--cordova-col-right-font-family, inherit);
	font-size: var(--cordova-col-right-font-size, inherit);
	color: var(--cordova-col-right-text-color, inherit);
	border-width: var(--cordova-col-right-border-width, 0);
	border-style: var(--cordova-col-right-border-style, solid);
	border-color: var(--cordova-col-right-border-color, transparent);
	border-radius: var(--cordova-col-right-border-radius, 0);
}
.cordova-col-right h2, .cordova-col-right h3, .cordova-col-right h4 { color: var(--cordova-col-right-heading-color, var(--cordova-navy)); }

.cordova-nav { list-style: none; margin: 0; padding: 0; }
.cordova-nav li { margin-bottom: 4px; }
.cordova-nav a {
	display: flex; align-items: center; gap: 10px;
	padding: var(--cordova-nav-padding, 10px 14px);
	border-radius: var(--cordova-nav-radius, var(--cordova-radius-pill));
	background: var(--cordova-nav-bg, transparent);
	color: var(--cordova-nav-text, var(--cordova-text));
	text-decoration: none; font-weight: 600;
	transition: background .15s ease, color .15s ease;
}
/* Hover is defined before "is-active" on purpose: both selectors carry the
   same specificity, so for the current tab's own nav item (active AND, if
   your mouse happens to be over it, hovered) the LATER rule wins the tie -
   keeping it reading as "active" rather than flickering to the hover color. */
.cordova-nav a:hover { background: var(--cordova-nav-hover-bg, var(--cordova-navy)); color: var(--cordova-nav-hover-text, #fff); }
.cordova-nav li.is-active a { background: var(--cordova-nav-active-bg, var(--cordova-navy)); color: var(--cordova-nav-active-text, #fff); }

.cordova-profile-card { text-align: left; }
.cordova-profile-card img.avatar { border-radius: 50%; margin-bottom: 10px; }
.cordova-profile-card h3 { margin: 0 0 4px; }
.cordova-profile-card p { margin: 2px 0; color: var(--cordova-text-muted); font-size: 14px; }

.cordova-forms-list, .cordova-appt-list { list-style: none; margin: 0; padding: 0; }
.cordova-forms-list li, .cordova-appt-list li {
	padding: 14px 0; border-bottom: 1px solid var(--cordova-border); display: flex; justify-content: space-between; align-items: center;
}
.cordova-forms-list li:last-child, .cordova-appt-list li:last-child { border-bottom: none; }
.cordova-forms-list a { font-weight: 600; text-decoration: none; color: var(--cordova-navy); }
.cordova-fill-form-btn { background: var(--cordova-maroon) !important; border-color: var(--cordova-maroon) !important; color: #fff !important; }

/* ---------- Journal (client's private wall, read-only for providers) ----------
   Styled as a modern social-feed: an avatar-led composer, and entries as
   individual rounded/shadowed cards with a subtle hover lift, rather than
   a plain bordered list - closer to how a Facebook-style wall reads. ---------- */
.cordova-journal-composer {
	background: #fff; border: 1px solid var(--cordova-border); border-radius: var(--cordova-radius-card);
	padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(23,44,61,.05);
	transition: background .15s ease, box-shadow .15s ease;
}
.cordova-journal-composer.is-dragover { background: var(--cordova-cream); box-shadow: 0 0 0 2px var(--cordova-navy) inset; }
.cordova-journal-composer__top { display: flex; align-items: flex-start; gap: 12px; }
.cordova-journal-composer__top > img { border-radius: 50%; flex-shrink: 0; margin-top: 2px; }
.cordova-journal-composer__top form { flex: 1; min-width: 0; }
.cordova-journal-composer textarea {
	width: 100%; background: var(--cordova-cream); border: 1px solid transparent; border-radius: 20px;
	padding: 10px 16px; font-size: 15px; resize: none; transition: border-color .15s ease, background .15s ease;
}
.cordova-journal-composer textarea:focus { border-color: var(--cordova-navy); background: #fff; border-radius: 14px; }
.cordova-journal-attach-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cordova-journal-attach-btn {
	display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--cordova-navy);
	font-weight: 600; font-size: 13px; background: var(--cordova-cream); padding: 7px 14px; border-radius: var(--cordova-radius-pill);
	transition: background .15s ease;
}
.cordova-journal-attach-btn:hover { background: #e9ddcb; }
.cordova-journal-attach-btn input[type="file"] {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cordova-journal-post-btn { width: auto; margin-top: 0; padding: 9px 26px; border-radius: var(--cordova-radius-pill); }
.cordova-journal-error { color: #8a2f22; font-size: 13px; margin: 10px 0 0; }

.cordova-journal-attach-preview { margin-top: 10px; }
.cordova-attach-chip {
	display: inline-flex; align-items: center; gap: 8px; background: #fff;
	border: 1px solid var(--cordova-border); border-radius: 10px; padding: 6px 10px 6px 6px; max-width: 100%;
}
.cordova-attach-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.cordova-attach-chip__icon { font-size: 22px; color: var(--cordova-navy); }
.cordova-attach-chip__name { font-size: 13px; color: var(--cordova-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cordova-attach-chip__remove { background: none; border: none; color: var(--cordova-text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; margin-left: 4px; }
.cordova-attach-chip__remove:hover { color: var(--cordova-maroon); }

.cordova-journal-feed { display: flex; flex-direction: column; gap: 14px; }
.cordova-journal-empty {
	color: var(--cordova-text-muted); text-align: center; padding: 40px 20px;
	background: var(--cordova-cream); border-radius: var(--cordova-radius-card);
}
.cordova-journal-empty .dashicons { font-size: 34px; width: 34px; height: 34px; color: var(--cordova-border); display: block; margin: 0 auto 10px; }
.cordova-journal-empty p { margin: 0; }

.cordova-journal-entry {
	background: #fff; border: 1px solid var(--cordova-border); border-radius: var(--cordova-radius-card);
	padding: 16px; box-shadow: 0 1px 2px rgba(23,44,61,.05); transition: box-shadow .15s ease, transform .15s ease;
}
.cordova-journal-entry:hover { box-shadow: 0 4px 14px rgba(23,44,61,.09); }
.cordova-journal-entry__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cordova-journal-entry__header img { border-radius: 50%; }
.cordova-journal-entry__byline { display: flex; flex-direction: column; line-height: 1.3; }
.cordova-journal-entry__byline strong { font-size: 14.5px; }
.cordova-journal-entry__header .meta { color: var(--cordova-text-muted); font-size: 12px; }
.cordova-journal-entry .content { white-space: pre-line; line-height: 1.5; font-size: 15px; }

.cordova-journal-attachment { margin-top: 12px; }
.cordova-journal-attachment img.attachment { max-width: 100%; max-height: 420px; width: 100%; border-radius: 10px; display: block; object-fit: cover; }
.cordova-journal-attachment__file {
	display: inline-flex; align-items: center; gap: 6px; color: var(--cordova-navy); font-weight: 600;
	text-decoration: none; background: var(--cordova-cream); padding: 8px 14px; border-radius: 10px;
}
.cordova-journal-attachment__file .dashicons { font-size: 18px; }

.cordova-provider-card { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cordova-border); }
.cordova-provider-card:last-child { border-bottom: none; }
.cordova-provider-card img { border-radius: 50%; }

.cordova-badge { display: inline-block; padding: 3px 12px; border-radius: var(--cordova-radius-pill); font-size: 12px; font-weight: 700; }
.cordova-badge.active { background: var(--cordova-navy); color: #fff; }
.cordova-badge.pending { background: var(--cordova-maroon); color: #fff; }

/* ---------- On-site month calendar (My Account > Appointments) - plain
   PHP/HTML grid, view-only; not a Google Calendar embed. ---------- */
.cordova-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cordova-calendar-header h3 { margin: 0; font-size: 17px; }
.cordova-calendar-nav {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
	border-radius: 50%; color: var(--cordova-navy); text-decoration: none; font-size: 16px; font-weight: 700;
	background: var(--cordova-cream); transition: background .15s ease;
}
.cordova-calendar-nav:hover { background: #e9ddcb; }
.cordova-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cordova-calendar-daylabel { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cordova-text-muted); padding-bottom: 6px; letter-spacing: .03em; }
.cordova-calendar-cell {
	min-height: 78px; border: 1px solid var(--cordova-border); border-radius: 8px; padding: 6px;
	background: #fff; display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.cordova-calendar-cell.is-outside { background: transparent; border-color: transparent; }
.cordova-calendar-cell.is-today { border-color: var(--cordova-navy); box-shadow: 0 0 0 1px var(--cordova-navy) inset; }
.cordova-calendar-daynum { font-size: 12px; font-weight: 700; color: var(--cordova-text-muted); margin-bottom: 2px; }
.cordova-calendar-cell.is-today .cordova-calendar-daynum { color: var(--cordova-navy); }
.cordova-calendar-pill {
	background: var(--cordova-cream); border-radius: 5px; padding: 2px 5px; font-size: 10.5px; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cordova-calendar-pill-time { font-weight: 700; color: var(--cordova-navy); }
.cordova-calendar-pill-name { color: var(--cordova-text); margin-left: 3px; }
.cordova-calendar-more { font-size: 10.5px; color: var(--cordova-text-muted); padding: 1px 5px; }

@media (max-width: 640px) {
	.cordova-calendar-cell { min-height: 52px; padding: 4px; }
	.cordova-calendar-pill-name { display: none; } /* keep just the time on narrow screens so pills don't overflow */
	.cordova-calendar-daylabel { font-size: 9.5px; }
}

/* ---------- Google Calendar agenda (My Account > Appointments) ---------- */
.cordova-gcal-agenda { margin: 14px 0; }
.cordova-gcal-agenda h5 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cordova-text-muted); }
.cordova-gcal-event-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cordova-border); border-radius: 10px; overflow: hidden; }
.cordova-gcal-event-list li {
	display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
	border-bottom: 1px solid var(--cordova-border); font-size: 13.5px;
}
.cordova-gcal-event-list li:last-child { border-bottom: none; }
.cordova-gcal-event-when { flex-shrink: 0; font-weight: 600; white-space: nowrap; }
.cordova-gcal-allday { color: var(--cordova-text-muted); font-weight: 400; }
.cordova-gcal-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cordova-gcal-event-title a { color: var(--cordova-navy); text-decoration: none; font-weight: 600; }
.cordova-gcal-event-title a:hover { text-decoration: underline; }

/* ---------- Custom login page ----------
   Background/padding/margin/typography/border, plus the submit button's own
   colors, are all driven by CSS custom properties - each with a fallback
   here reproducing the ORIGINAL hardcoded design, so leaving every field
   under Settings > Cordova > "Login Page Design" blank looks identical to
   before that feature existed. Cordova_Login::render_login_shortcode()
   attaches the inline override (built by Cordova_Settings::
   get_login_design_css()) the same way Cordova_Account does for the account
   page - see that method's docblock. This same wrapper class is reused by
   the post-signup verification holding page (Cordova_Account_Verification::
   render_holding_panel()), so these settings style that page too. */
.cordova-login-wrap {
	max-width: 420px;
	margin: var(--cordova-login-margin, 60px auto);
	padding: var(--cordova-login-padding, 36px);
	background: var(--cordova-login-bg, #fff);
	border-radius: var(--cordova-radius-card);
	box-shadow: 0 1px 3px rgba(23,44,61,.08);
	font-family: var(--cordova-login-font-family, inherit);
	font-size: var(--cordova-login-font-size, inherit);
	color: var(--cordova-login-text-color, inherit);
	border-width: var(--cordova-login-border-width, 0);
	border-style: var(--cordova-login-border-style, solid);
	border-color: var(--cordova-login-border-color, transparent);
}
.cordova-login-wrap h2 { margin-top: 0; color: var(--cordova-login-heading-color, var(--cordova-navy)); }
.cordova-login-notice { background: var(--cordova-cream); color: var(--cordova-navy); padding: 10px 14px; border-radius: 8px; }
.cordova-login-links { margin-top: 14px; }
.cordova-login-links a { color: var(--cordova-login-heading-color, var(--cordova-navy)); }

/* Scoped to .cordova-login-wrap (2-class specificity) specifically so this
   ONLY affects the button on the login/lost-password/reset-password/verify
   holding pages - .cordova-submit-btn itself is shared with checkout's
   "Subscribe" button etc., which must keep its own separate site-wide
   color regardless of what's set here. !important is required to win
   against .cordova-submit-btn's own !important rule (see that rule's own
   comment) - specificity alone (2 classes beats 1) is what decides the
   winner between two !important rules that both apply here. */
.cordova-login-wrap .cordova-submit-btn {
	background: var(--cordova-login-button-bg, var(--cordova-navy)) !important;
	border-color: var(--cordova-login-button-bg, var(--cordova-navy)) !important;
	color: var(--cordova-login-button-text-color, #fff) !important;
}
.cordova-login-wrap .cordova-submit-btn:hover {
	background: var(--cordova-login-button-hover-bg, var(--cordova-navy-hover)) !important;
	border-color: var(--cordova-login-button-hover-bg, var(--cordova-navy-hover)) !important;
	color: var(--cordova-login-button-hover-text-color, #fff) !important;
}

/* ---------- Post-signup verification holding page ----------
   No separate h2 rule needed here: .cordova-verify-panel always appears
   alongside .cordova-login-wrap (see render_holding_panel()), and that
   class's own var-driven "h2" rule above already covers it - keeping the
   heading color driven by the one shared "Login Page Design" setting
   instead of a second, un-themeable hardcoded rule. */
.cordova-verify-step { margin: 0 0 14px; color: var(--cordova-text); }
.cordova-verify-step.is-done { color: var(--cordova-navy); font-weight: 600; }
#cordova_phone_code { letter-spacing: 4px; font-size: 20px; text-align: center; }

/* ---------- Profile header (client profile / dashboard) ---------- */
.cordova-profile-header { display: flex; gap: 16px; align-items: center; }
.cordova-profile-header img { border-radius: 50%; }

/* ---------- Manager dashboard stats ---------- */
.cordova-stat-row { display: flex; gap: 24px; margin: 16px 0; }
.cordova-stat { background: var(--cordova-cream); border-radius: var(--cordova-radius-card); padding: 16px 24px; text-align: center; }
.cordova-stat__num { display: block; font-size: 28px; font-weight: 800; color: var(--cordova-navy); }
.cordova-stat__label { display: block; font-size: 13px; color: var(--cordova-text-muted); margin-top: 4px; }

/* ---------- Interim/placeholder notices ---------- */
.cordova-notice-box { background: var(--cordova-cream); border: 1px solid var(--cordova-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; color: var(--cordova-navy); font-size: 14px; }

/* ---------- Manager: reassign providers form on clients list ---------- */
.cordova-reassign-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* ---------- Provider booking (Providers tab, client view) ---------- */
.cordova-provider-card--booking { flex-wrap: wrap; align-items: center; }
.cordova-book-appointment-btn { white-space: nowrap; }
.cordova-book-appointment-result { background: var(--cordova-cream); border-radius: 10px; padding: 12px 14px; }

/* Shown instead of "Book Appointment" when the client already has an
   upcoming appointment with this provider - only one at a time is allowed
   until it's completed or cancelled. */
.cordova-active-appt-notice {
	background: var(--cordova-cream); color: var(--cordova-navy); font-size: 13px; font-weight: 600;
	padding: 10px 16px; border-radius: var(--cordova-radius-pill); white-space: nowrap;
}

/* ---------- Appointment booking (date/time picker) ---------- */
.cordova-book-appointment-panel { background: var(--cordova-cream); border-radius: var(--cordova-radius-card); padding: 16px; }

/* Real Sun-Sat calendar grid for the 14-day booking window - replaces the
   old flat list of date buttons so days without availability (weekends,
   fully booked days) still appear on the calendar, just grayed out,
   instead of silently disappearing from the list entirely. */
.cordova-calendar { margin-bottom: 12px; }
.cordova-calendar-month { font-weight: 700; margin-bottom: 8px; color: var(--cordova-text); }
.cordova-calendar-weekdays,
.cordova-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cordova-calendar-weekdays { margin-bottom: 4px; }
.cordova-calendar-weekdays div { text-align: center; font-size: 12px; font-weight: 600; color: var(--cordova-text-muted); }
/* Plainer, rounder look (closer to the Amelia-style reference): no border
   on ordinary days, a circular highlight only for the active/selected day,
   and a subtle outline on hover so it's still clear the day is clickable.

   These are plain <button> elements (needed for keyboard/click semantics),
   which means a theme's global button styling (Customizer "Buttons"
   settings, a CSS reset, etc.) can otherwise override this completely -
   every property below is !important and doubled up under
   .cordova-account-wrap so this calendar always renders the same
   regardless of what the active theme does to <button>. */
.cordova-calendar-cell,
.cordova-account-wrap.cordova-account-wrap .cordova-calendar-cell {
	aspect-ratio: 1 !important; min-height: 36px; width: auto !important; border-radius: 50% !important; font-size: 14px !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	background: transparent !important; border: 2px solid transparent !important; color: var(--cordova-text) !important;
	font-family: inherit !important; font-weight: 400 !important; line-height: normal !important;
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; outline: none !important;
	cursor: pointer; padding: 0 !important; margin: 0 !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cordova-calendar-cell.is-empty,
.cordova-account-wrap.cordova-account-wrap .cordova-calendar-cell.is-empty { visibility: hidden; border: none !important; background: transparent !important; }
.cordova-calendar-cell.no-slots,
.cordova-account-wrap.cordova-account-wrap .cordova-calendar-cell.no-slots { color: var(--cordova-text-muted) !important; cursor: default; opacity: .45; }
.cordova-calendar-cell.has-slots:hover,
.cordova-account-wrap.cordova-account-wrap .cordova-calendar-cell.has-slots:hover { border-color: var(--cordova-navy) !important; }
.cordova-calendar-cell.is-active,
.cordova-account-wrap.cordova-account-wrap .cordova-calendar-cell.is-active {
	background: var(--cordova-navy) !important; color: #fff !important; border-color: var(--cordova-navy) !important;
}
.cordova-calendar-legend { font-size: 12px; color: var(--cordova-text-muted); margin-top: 8px; }

/* ---------- Booking panel header (back-chevron + title, above the calendar) ---------- */
.cordova-booking-header {
	display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.cordova-booking-close-btn,
.cordova-account-wrap.cordova-account-wrap .cordova-booking-close-btn {
	background: none !important; border: none !important; box-shadow: none !important; cursor: pointer;
	font-size: 20px !important; line-height: 1 !important; font-family: inherit !important;
	color: var(--cordova-navy) !important; padding: 4px !important; margin: 0 !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
}
.cordova-booking-close-btn:hover,
.cordova-account-wrap.cordova-account-wrap .cordova-booking-close-btn:hover { color: var(--cordova-navy-hover) !important; }
.cordova-booking-header span { font-weight: 700; color: var(--cordova-text); }

/* ---------- Full-width time-slot rows (Amelia-style) ---------- */
.cordova-book-appointment-times { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cordova-time-row,
.cordova-account-wrap.cordova-account-wrap .cordova-time-row {
	display: block !important; width: 100% !important; text-align: left !important; padding: 12px 16px !important; margin: 0 !important;
	background: #fff !important; border: 2px solid var(--cordova-border) !important; border-radius: 10px !important;
	font-size: 14px !important; font-family: inherit !important; font-weight: 400 !important; line-height: normal !important;
	text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; text-shadow: none !important; outline: none !important;
	color: var(--cordova-text) !important; cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cordova-time-row:hover,
.cordova-account-wrap.cordova-account-wrap .cordova-time-row:hover { border-color: var(--cordova-navy) !important; }
.cordova-time-row.is-selected,
.cordova-account-wrap.cordova-account-wrap .cordova-time-row.is-selected {
	background: var(--cordova-navy) !important; border-color: var(--cordova-navy) !important; color: #fff !important;
}

/* ---------- Continue button (appears once a time row is selected) ---------- */
.cordova-book-appointment-continue-wrap { margin-top: 4px; }
.cordova-book-appointment-continue-wrap .cordova-continue-btn,
.cordova-account-wrap.cordova-account-wrap .cordova-book-appointment-continue-wrap .cordova-continue-btn { width: 100% !important; }
.cordova-book-appointment-continue-wrap .cordova-continue-btn:disabled,
.cordova-account-wrap.cordova-account-wrap .cordova-book-appointment-continue-wrap .cordova-continue-btn:disabled { opacity: .5 !important; cursor: default; }

/* ---------- Booking confirmation step (shown after Continue, before it's actually booked) ---------- */
.cordova-booking-confirm-summary { font-size: 15px; line-height: 1.5; margin-bottom: 12px; }
.cordova-booking-confirm .cordova-confirm-booking-btn,
.cordova-booking-confirm .cordova-booking-back-btn { width: auto !important; display: inline-flex !important; margin: 0 8px 0 0 !important; padding: 10px 20px !important; }
.cordova-book-appointment-result { margin-top: 8px; }

/* ---------- Upcoming appointments list ---------- */
.cordova-appt-list-item {
	display: flex; justify-content: space-between; align-items: center;
	padding: 14px 0; border-bottom: 1px solid var(--cordova-border);
}
.cordova-appt-list-item:last-child { border-bottom: none; }

/* ---------- Provider Schedule tab ---------- */
.cordova-schedule-duration-field { max-width: 240px; }
.cordova-schedule-duration-field input[type="number"] {
	border: 1px solid var(--cordova-border) !important; border-radius: 8px !important; padding: 8px 10px !important;
	background: #fff !important; width: 100%;
}

.cordova-schedule-tabs {
	display: flex; border: 1px solid var(--cordova-border); border-radius: var(--cordova-radius-pill);
	padding: 4px; margin: 20px 0 18px; max-width: 480px; background: #fff;
}
.cordova-schedule-tab,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-tab {
	flex: 1; background: transparent !important; border: none !important; box-shadow: none !important;
	border-radius: var(--cordova-radius-pill) !important; padding: 10px 16px !important; font-weight: 700 !important;
	font-size: 14px !important; font-family: inherit !important; color: var(--cordova-text-muted) !important; cursor: pointer;
	text-transform: none !important; letter-spacing: normal !important;
}
.cordova-schedule-tab.is-active,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-tab.is-active {
	background: var(--cordova-cream) !important; color: var(--cordova-navy) !important;
}

.cordova-schedule-panel { margin-bottom: 16px; }

.cordova-schedule-group {
	background: var(--cordova-cream); border-radius: var(--cordova-radius-card);
	padding: 16px; margin-bottom: 16px; position: relative;
}
.cordova-schedule-day-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-right: 40px; }
.cordova-schedule-day-pill,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-day-pill {
	background: #fff !important; border: 2px solid var(--cordova-border) !important; color: var(--cordova-text) !important;
	border-radius: var(--cordova-radius-pill) !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: 700 !important;
	font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
	cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cordova-schedule-day-pill:hover,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-day-pill:hover { border-color: var(--cordova-navy) !important; }
.cordova-schedule-day-pill.is-active,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-day-pill.is-active {
	background: var(--cordova-navy) !important; border-color: var(--cordova-navy) !important; color: #fff !important;
}

.cordova-schedule-periods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cordova-schedule-period-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.cordova-schedule-period-field { flex: 1; min-width: 140px; }
.cordova-schedule-period-field label { display: block; font-size: 11px; font-weight: 700; color: var(--cordova-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.cordova-schedule-period-row select,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-period-row select {
	width: 100% !important; border: 1px solid var(--cordova-border) !important; border-radius: 8px !important;
	padding: 9px 10px !important; background: #fff !important; font-size: 14px !important; color: var(--cordova-text) !important;
}

.cordova-schedule-delete-btn,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-delete-btn {
	background: #fce8e6 !important; border: none !important; color: #b3261e !important; border-radius: 50% !important;
	width: 34px; height: 34px; display: inline-flex !important; align-items: center !important; justify-content: center !important;
	cursor: pointer; box-shadow: none !important; padding: 0 !important;
}
.cordova-schedule-delete-btn:hover,
.cordova-account-wrap.cordova-account-wrap .cordova-schedule-delete-btn:hover { background: #f6c9c5 !important; }
.cordova-schedule-delete-btn .dashicons { font-size: 18px; }
.cordova-schedule-delete-group { position: absolute; top: 16px; right: 16px; }

.cordova-schedule-add-period { margin-top: 2px; padding: 8px 18px !important; font-size: 13px !important; }
.cordova-schedule-add-group, .cordova-schedule-add-override { padding: 10px 22px !important; }

.cordova-schedule-override-row {
	background: var(--cordova-cream); border-radius: var(--cordova-radius-card);
	padding: 16px; margin-bottom: 16px;
}
.cordova-schedule-override-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.cordova-schedule-override-date {
	border: 1px solid var(--cordova-border) !important; border-radius: 8px !important; padding: 9px 10px !important;
	background: #fff !important; font-size: 14px !important; color: var(--cordova-text) !important;
}
.cordova-schedule-override-closed-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--cordova-text); font-weight: 600; }
.cordova-schedule-override-top .cordova-schedule-delete-btn { margin-left: auto; }

.cordova-schedule-save-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.cordova-schedule-save-btn { width: auto !important; padding: 12px 32px !important; }
.cordova-schedule-status { font-size: 13px; font-weight: 600; }
.cordova-schedule-status.is-success { color: #1e7a34; }
.cordova-schedule-status.is-error { color: #8a2f22; }

/* ---------- Pagination (Journal, Provider Notes, Appointments, Clients,
   Providers) - one shared look for every numbered page-link list, built
   on top of WordPress's own paginate_links() markup (.page-numbers,
   .current, .dots, .prev, .next). ---------- */
.cordova-pagination {
	display: flex; align-items: center; justify-content: center;
	flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 16px;
	border-top: 1px solid var(--cordova-border);
}
.cordova-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
	font-size: 13px; font-weight: 600; color: var(--cordova-navy);
	text-decoration: none; border: 1px solid transparent;
}
.cordova-pagination a.page-numbers:hover { background: var(--cordova-cream); border-color: var(--cordova-border); }
.cordova-pagination .page-numbers.current { background: var(--cordova-navy); color: #fff; }
.cordova-pagination .page-numbers.dots { color: var(--cordova-text-muted); }
.cordova-pagination .page-numbers.prev, .cordova-pagination .page-numbers.next { font-size: 16px; }