/* ============================================================
   YoNihon Bookings — front-end widget
   Fully scoped to .yb-widget. Uses !important on critical visual
   properties so host-theme input resets can't hide fields.
   ============================================================ */

.yb-widget {
	--yb-red: #DC2626;
	--yb-red-dark: #B11717;
	--yb-ink: #111827;
	--yb-muted: #6B7280;
	--yb-border: #E5E7EB;
	--yb-bg-soft: #FAF6EE;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--yb-ink);
	line-height: 1.5;
}
.yb-widget *,
.yb-widget *::before,
.yb-widget *::after { box-sizing: border-box; }
.yb-widget [hidden] { display: none !important; }
/* Class-based gating — robust against WP filters stripping the bare hidden attribute */
.yb-widget .yb-is-hidden { display: none !important; }

/* Header */
.yb-widget__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}
.yb-widget__badge {
	flex: 0 0 auto;
	width: 44px; height: 44px;
	border-radius: 12px;
	background: #FEF2F2;
	color: var(--yb-red);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.yb-widget__title { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: var(--yb-ink) !important; line-height: 1.2 !important; }
.yb-widget__meta { margin: 2px 0 0 !important; color: var(--yb-muted) !important; font-size: 13px !important; }

/* Field block */
.yb-field { margin-bottom: 22px; }
.yb-field:last-of-type { margin-bottom: 0; }

.yb-label {
	display: flex !important;
	align-items: center;
	gap: 8px;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: var(--yb-ink) !important;
	margin-bottom: 10px !important;
}
.yb-num {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--yb-red);
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Inputs — explicit, !important so theme resets can't hide them */
.yb-input {
	display: block !important;
	width: 100% !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--yb-ink) !important;
	background: #fff !important;
	border: 1px solid var(--yb-border) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	min-height: 46px;
}
.yb-input:focus {
	outline: none !important;
	border-color: var(--yb-red) !important;
	box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
.yb-textarea { min-height: 84px; resize: vertical; margin-top: 0 !important; }

/* Date input — native picker kept visible (no appearance reset, which blanks it in WebKit) */
.yb-widget .yb-date {
	display: block !important;
	width: 100% !important;
	max-width: 280px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: var(--yb-ink) !important;
	background: #fff !important;
	border: 1px solid var(--yb-border) !important;
	border-radius: 10px !important;
	min-height: 48px !important;
	line-height: 1.2 !important;
	cursor: pointer;
}
.yb-widget .yb-date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .7;
	filter: invert(18%) sepia(95%) saturate(5000%) hue-rotate(353deg);
}
.yb-widget .yb-date:focus {
	outline: none !important;
	border-color: var(--yb-red) !important;
	box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}

/* Two-column field grid */
.yb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.yb-grid .yb-input { width: 100% !important; }

/* Per-field label + wrapper */
.yb-field-group { display: flex; flex-direction: column; margin-bottom: 12px; }
.yb-grid .yb-field-group { margin-bottom: 0; }
.yb-flabel {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--yb-ink) !important;
	margin: 0 0 6px !important;
}
.yb-req { color: var(--yb-red); }
.yb-opt { color: var(--yb-muted); font-weight: 400; font-size: 12px; }

/* Honeypot */
.yb-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* Time slots */
.yb-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 8px;
}
.yb-slot {
	padding: 11px 6px !important;
	border: 1px solid var(--yb-border) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--yb-ink) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	cursor: pointer;
	transition: all .15s ease;
	text-align: center;
}
.yb-slot:hover { border-color: var(--yb-red) !important; color: var(--yb-red) !important; }
.yb-slot.is-active { background: var(--yb-red) !important; color: #fff !important; border-color: var(--yb-red) !important; }
.yb-slot__time { display: block; }
.yb-slot__left { display: block; font-size: 11px; font-weight: 500; opacity: .7; margin-top: 2px; }
.yb-slot.is-active .yb-slot__left { opacity: .9; }
.yb-loading, .yb-empty { color: var(--yb-muted) !important; font-size: 14px; padding: 6px 0; margin: 0; }

/* Selected slot chip */
.yb-selected {
	display: none;
	margin-bottom: 12px;
	padding: 10px 14px;
	background: var(--yb-bg-soft);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--yb-ink);
}
.yb-selected:not(:empty) { display: block; }

/* Submit */
.yb-submit {
	display: block !important;
	width: 100% !important;
	margin-top: 16px !important;
	padding: 15px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--yb-red) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer;
	transition: background .15s ease;
}
.yb-submit:hover { background: var(--yb-red-dark) !important; }
.yb-submit:disabled { opacity: .6; cursor: default; }

/* Messages */
.yb-message { margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 14px; }
.yb-message--success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.yb-message--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

@media (max-width: 520px) {
	.yb-grid { grid-template-columns: 1fr; }
	.yb-slots { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
	.yb-date { max-width: 100%; }
}