/* ─── BS Phone Widget — country selector + national number ────────────────
 *
 * v1.6.7.16 — Mockup 1 ("Pill + pipe seam") design, applied to all 3 phone
 * fields (booking, reschedule, admin booking-edit). Theme-aware: text
 * colours inherit from the host (public site dark theme, WP admin light or
 * dark via bs-bento). Hover + focus accents use brand teal #00d1b2 so we
 * never collide with the host theme's button-hover styles.
 *
 * Specificity strategy:
 *   - `.bs-phone-field .bs-phone-trigger` AND `button.bs-phone-trigger`
 *     stacked, plus !important on color/background, to beat any host
 *     `button { color: <brand> }` rule (the live site has one).
 *   - color: inherit !important so the trigger reads in the form's text
 *     colour rather than being hardcoded.
 *
 * Lessons learned from 1.6.7.13–15: the original `color: inherit` (no
 * !important) was getting trumped by the host site's `button { color: pink }`
 * direct write. The `[hidden] !important` is also needed because the open
 * state sets `display: flex` which would otherwise override the browser
 * default for [hidden] (per the spec).
 */

.bs-phone-field {
	display: block;
	position: relative;
}

/* Wrap — mimics a normal form input. Uses translucent fills + neutral grey
   borders so it reads correctly on both light and dark hosts. */
.bs-phone-wrap {
	display: flex;
	align-items: stretch;
	border: 1.5px solid rgba(127, 127, 127, 0.25);
	border-radius: 10px;
	background: rgba(127, 127, 127, 0.04);
	overflow: visible;
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
.bs-phone-wrap:focus-within {
	border-color: #00d1b2;
	box-shadow: 0 0 0 3px rgba(0, 209, 178, 0.18);
}

/* Country trigger — pill on the left with vertical-pipe seam on the right.
   1.6.7.16 — high-specificity rule with !important to beat host
   `button { color: <brand-pink> }` and similar global button styles.
   Default colour is light (#f8fafc) since the public site is dark-themed.
   Admin context overrides below use the bs-bento --bs-text-main var. */
.bs-phone-field .bs-phone-trigger,
button.bs-phone-trigger {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 0 14px !important;
	background: transparent !important;
	color: #f8fafc !important;
	border: 0 !important;
	border-right: 1px solid rgba(127, 127, 127, 0.25) !important;
	font: inherit !important;
	cursor: pointer !important;
	min-width: 96px !important;
	white-space: nowrap !important;
	font-size: 14px !important;
}
.bs-phone-field .bs-phone-trigger:hover,
button.bs-phone-trigger:hover {
	background: rgba(0, 209, 178, 0.08) !important;
	color: #f8fafc !important;
}
.bs-phone-field .bs-phone-trigger:focus,
button.bs-phone-trigger:focus,
.bs-phone-field .bs-phone-trigger:focus-visible,
button.bs-phone-trigger:focus-visible {
	background: rgba(0, 209, 178, 0.10) !important;
	color: #f8fafc !important;
	outline: 2px solid rgba(0, 209, 178, 0.45) !important;
	outline-offset: -2px !important;
}

/* Admin (bs-bento) context — use the theme's auto-adapting text colour
   so the widget reads correctly on both light and dark admin themes. */
body[data-bs-theme] .bs-phone-field .bs-phone-trigger,
body[data-bs-theme] button.bs-phone-trigger,
.bs-bento-page .bs-phone-field .bs-phone-trigger,
.bs-bento-page button.bs-phone-trigger {
	color: var(--bs-text-main, inherit) !important;
}
body[data-bs-theme] .bs-phone-field .bs-phone-trigger:hover,
body[data-bs-theme] button.bs-phone-trigger:hover,
.bs-bento-page .bs-phone-field .bs-phone-trigger:hover,
.bs-bento-page button.bs-phone-trigger:hover,
body[data-bs-theme] .bs-phone-field .bs-phone-trigger:focus,
body[data-bs-theme] button.bs-phone-trigger:focus,
.bs-bento-page .bs-phone-field .bs-phone-trigger:focus,
.bs-bento-page button.bs-phone-trigger:focus {
	color: var(--bs-text-main, inherit) !important;
}

/* ISO badge — pill-shaped, teal-tinted. Looks good on light or dark. */
.bs-phone-iso {
	display: inline-block;
	padding: 3px 8px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(0, 209, 178, 0.16);
	color: #0d9488;
	border-radius: 999px;
	letter-spacing: 0.5px;
}

/* Dial code — public site forces light text; admin uses bento var */
.bs-phone-trigger__dial {
	font-weight: 500 !important;
	color: #f8fafc !important;
	font-size: 14px;
}
body[data-bs-theme] .bs-phone-trigger__dial,
.bs-bento-page .bs-phone-trigger__dial {
	color: var(--bs-text-main, inherit) !important;
}
.bs-phone-trigger__caret {
	margin-left: auto;
	opacity: 0.55;
}

/* National number input — same context-aware colours */
.bs-phone-number {
	flex: 1;
	padding: 11px 14px !important;
	border: 0 !important;
	outline: none;
	background: transparent !important;
	font: inherit;
	color: #f8fafc !important;
	min-width: 0;
}
body[data-bs-theme] .bs-phone-number,
.bs-bento-page .bs-phone-number {
	color: var(--bs-text-main, inherit) !important;
}
.bs-phone-number::placeholder {
	color: rgba(127, 127, 127, 0.55);
}

/* ─── Dropdown panel ────────────────────────────────────────────────────
   The dropdown forces a known dark surface so the country list is always
   readable on top of any host background. Search input has a dark fill
   with light typed text — fixes the white-on-white bug from earlier
   versions. */
.bs-phone-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 10000;
	background: #1e293b;
	color: #f8fafc;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
	max-height: 320px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.bs-phone-search-wrap {
	padding: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.2);
}
.bs-phone-search {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 8px !important;
	font-size: 14px;
	background: #0f172a !important;
	color: #f8fafc !important;
}
.bs-phone-search::placeholder {
	color: rgba(248, 250, 252, 0.45);
}
.bs-phone-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.bs-phone-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	color: #f8fafc;
}
.bs-phone-opt:hover,
.bs-phone-opt:focus {
	background: rgba(0, 209, 178, 0.10);
}
.bs-phone-opt__name {
	flex: 1;
	color: #f8fafc;
}
.bs-phone-opt__dial {
	color: #94a3b8;
	font-weight: 500;
	font-size: 13px;
}

/* Inside the dark dropdown, ISO badges look better with a brighter teal */
.bs-phone-dropdown .bs-phone-iso {
	background: rgba(0, 209, 178, 0.18);
	color: #5eead4;
}

/* HTML5 [hidden] — explicit !important so the open-state `display: flex`
   doesn't override the browser default. (See spec § 5.4.) */
.bs-phone-dropdown[hidden] { display: none !important; }