/**
 * TimeWise Bookings — core design system.
 *
 * Loaded before every other plugin stylesheet. Three jobs:
 *  1. TOKENS   — one source of truth (colors, radii, spacing, shadows, type).
 *  2. SCOPE    — .twb-scope neutralizes theme / WooCommerce / FOX styling on
 *                everything inside our components (inbound-conflict shield),
 *                without leaking anything outward.
 *  3. SHARED   — buttons, inputs, badges, toasts, empty states, focus rings.
 *
 * All direction-sensitive rules use CSS logical properties, so RTL (Arabic,
 * Hebrew, …) works natively without a flipped stylesheet.
 */

/* --------------------------------------------------------------------- *
 * 1. Tokens
 * --------------------------------------------------------------------- */
.twb-scope {
	--twb-accent: #1f7a5a;
	--twb-accent-press: #19654b;
	--twb-accent-soft: rgba(31, 122, 90, .10);
	--twb-ink: #14161a;
	--twb-ink-2: #33383f;
	--twb-muted: #6a7178;
	--twb-line: #e6e8ec;
	--twb-bg: #ffffff;
	--twb-bg-2: #fbfbfc;
	--twb-danger: #b4232a;
	--twb-danger-soft: #fbe9ea;
	--twb-warn: #97670a;
	--twb-warn-soft: #fff3da;
	--twb-info: #2b4f9e;
	--twb-info-soft: #e6effd;
	--twb-r-sm: 8px;
	--twb-r-md: 12px;
	--twb-r-lg: 16px;
	--twb-r-pill: 999px;
	--twb-shadow-1: 0 1px 2px rgba(20, 22, 26, .05);
	--twb-shadow-2: 0 6px 24px rgba(20, 22, 26, .08);
	--twb-shadow-3: 0 14px 40px rgba(20, 22, 26, .16);
	--twb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", "Noto Kufi Arabic", sans-serif;
	--twb-focus: 0 0 0 2px var(--twb-bg), 0 0 0 4px var(--twb-accent);

	font-family: var(--twb-font);
	color: var(--twb-ink);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
}

.twb-scope *,
.twb-scope *::before,
.twb-scope *::after {
	box-sizing: inherit;
}

/* --------------------------------------------------------------------- *
 * 2. Scoped reset — shield against theme / WooCommerce styles
 * --------------------------------------------------------------------- */
.twb-scope h1,
.twb-scope h2,
.twb-scope h3,
.twb-scope h4 {
	font-family: inherit;
	color: inherit;
	margin-block: 0;
	padding: 0;
	border: 0;
	background: none;
	text-transform: none;
	letter-spacing: normal;
}

.twb-scope p {
	margin-block: 0;
}

.twb-scope ul,
.twb-scope ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.twb-scope a {
	box-shadow: none;
	background: none;
}

.twb-scope img {
	max-width: 100%;
	height: auto;
	border: 0;
	box-shadow: none;
}

/* Neutralize theme/Woo button + form skins inside our components. */
.twb-scope button,
.twb-scope input,
.twb-scope select,
.twb-scope textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.twb-scope button {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
	min-height: 0;
	min-width: 0;
}

.twb-scope input[type="text"],
.twb-scope input[type="search"],
.twb-scope input[type="email"],
.twb-scope input[type="tel"],
.twb-scope input[type="url"],
.twb-scope input[type="number"],
.twb-scope input[type="date"],
.twb-scope input[type="time"],
.twb-scope select,
.twb-scope textarea {
	-webkit-appearance: none;
	appearance: none;
	background: var(--twb-bg);
	border: 1px solid var(--twb-line);
	border-radius: var(--twb-r-md);
	padding-block: 10px;
	padding-inline: 12px;
	width: auto;
	max-width: 100%;
}

.twb-scope select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236a7178' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-inline-end: 32px;
}

[dir="rtl"] .twb-scope select {
	background-position: left 12px center;
}

/* Unified, visible focus everywhere (a11y) — keyboard only. */
.twb-scope :focus {
	outline: none;
}

.twb-scope :focus-visible {
	outline: none;
	box-shadow: var(--twb-focus);
	border-radius: var(--twb-r-sm);
}

/* --------------------------------------------------------------------- *
 * 3. Shared components
 * --------------------------------------------------------------------- */

/* Buttons */
.twb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding-block: 11px;
	padding-inline: 20px;
	border-radius: var(--twb-r-md);
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
	touch-action: manipulation;
	user-select: none;
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
}

.twb-btn:active { transform: scale(.97); }
.twb-btn--primary { background: var(--twb-accent); color: #fff; }
.twb-btn--primary:hover { background: var(--twb-accent-press); color: #fff; }
.twb-btn--ghost { background: var(--twb-bg); color: var(--twb-ink); border: 1px solid var(--twb-line); }
.twb-btn--ghost:hover { border-color: var(--twb-accent); color: var(--twb-accent); }
.twb-btn--danger { background: var(--twb-danger-soft); color: var(--twb-danger); }
.twb-btn[disabled] { opacity: .55; cursor: default; transform: none; }

/* Status badges (bookings, payouts, service review) */
.twb-scope .twb-badge {
	display: inline-flex;
	align-items: center;
	border-radius: var(--twb-r-pill);
	padding-block: 3px;
	padding-inline: 10px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

.twb-scope .twb-badge--pending { background: var(--twb-warn-soft); color: var(--twb-warn); }
.twb-scope .twb-badge--confirmed,
.twb-scope .twb-badge--live,
.twb-scope .twb-badge--paid { background: var(--twb-accent-soft); color: #156e4f; }
.twb-scope .twb-badge--completed,
.twb-scope .twb-badge--changes,
.twb-scope .twb-badge--processing { background: var(--twb-info-soft); color: var(--twb-info); }
.twb-scope .twb-badge--cancelled,
.twb-scope .twb-badge--failed,
.twb-scope .twb-badge--no_show,
.twb-scope .twb-badge--delete { background: var(--twb-danger-soft); color: var(--twb-danger); }

/* Empty states */
.twb-scope .twb-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding-block: 36px;
	padding-inline: 20px;
	background: var(--twb-bg-2);
	border: 1px dashed var(--twb-line);
	border-radius: var(--twb-r-lg);
	color: var(--twb-muted);
	font-size: 14px;
	text-align: center;
}

/* Skeleton shimmer */
.twb-scope .twb-sk {
	position: relative;
	overflow: hidden;
	background: #eef0f2;
	border-radius: var(--twb-r-sm);
}

.twb-scope .twb-sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
	animation: twb-shimmer 1.3s infinite;
}

@keyframes twb-shimmer {
	100% { transform: translateX(100%); }
}

/* --------------------------------------------------------------------- *
 * Toasts (aria-live, replaces window.alert)
 * --------------------------------------------------------------------- */
.twb-toasts {
	position: fixed;
	inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
	inset-inline-start: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: min(420px, calc(100vw - 32px));
	pointer-events: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[dir="rtl"] .twb-toasts { transform: translateX(50%); }

.twb-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #1c1f24;
	color: #fff;
	border-radius: 14px;
	padding-block: 13px;
	padding-inline: 16px;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 14px 40px rgba(20, 22, 26, .25);
	animation: twb-toast-in .22s cubic-bezier(.2, .9, .3, 1.2);
}

.twb-toast--error { background: #7f1d22; }
.twb-toast--success { background: #14532d; }

.twb-toast__icon { flex: none; line-height: 0; margin-block-start: 2px; }

.twb-toast__close {
	appearance: none;
	border: 0;
	background: none;
	color: inherit;
	opacity: .7;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	margin-inline-start: auto;
}

.twb-toast__close:hover { opacity: 1; }

@keyframes twb-toast-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.twb-toast.is-leaving {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease;
}

/* Confirm dialog (replaces window.confirm) */
.twb-confirm {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(16, 18, 21, .45);
	backdrop-filter: blur(2px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	animation: twb-fade .15s ease;
}

.twb-confirm__box {
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 14px 40px rgba(20, 22, 26, .25);
	padding: 22px;
	width: min(400px, 100%);
}

.twb-confirm__msg { font-size: 15px; color: #14161a; margin: 0 0 18px; line-height: 1.5; }
.twb-confirm__row { display: flex; gap: 10px; justify-content: flex-end; }

@keyframes twb-fade { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------- *
 * Motion & scheme preferences
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.twb-scope *,
	.twb-toast,
	.twb-confirm {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}