/* ============================================================
   Slotly Bridge — Celestena
   Front-end Slotly support for templates and booking UI.
   ============================================================ */

/* ── Booking form: inherit Celestena visual language ─────────── */
.slotly-booking-page .entry-content,
.slotly-confirmation-page .entry-content {
	color: var(--sl-text);
}

.slotly-booking-form {
	color: var(--sl-text);
}

.slotly-step-panel h3,
.slotly-confirmation h2,
.slotly-booking-page .entry-header .entry-title,
.slotly-confirmation-page .hestia-title {
	color: var(--sl-text);
}

.slotly-service-card:hover,
.slotly-service-card.selected,
.slotly-slot:hover,
.slotly-slot.selected,
.slotly-payment-option:has(input:checked) {
	background: var(--sl-accent-soft, rgba(233, 30, 99, 0.08));
}

.slotly-cal-day.available:hover,
.slotly-cal-day.available:focus,
.slotly-cal-day.available:focus-visible,
.slotly-slot.selected,
.slotly-progress .slotly-step.active,
.slotly-btn-next,
.slotly-btn-pay {
	background: var(--sl-accent);
}

.slotly-progress .slotly-step.done,
.slotly-order-summary {
	background: var(--sl-bg);
}

.slotly-service-card:hover,
.slotly-service-card.selected,
.slotly-slot:hover,
.slotly-slot.selected,
.slotly-payment-option:has(input:checked),
.slotly-btn-back:hover {
	border-color: var(--sl-accent);
}

.slotly-btn-next:hover,
.slotly-btn-pay:hover,
.slotly-cal-day.selected,
.slotly-cal-prev,
.slotly-cal-next,
.slotly-btn-back:hover,
.slotly-checkbox-label a {
	color: var(--sl-accent-dark);
}

.slotly-btn-next:hover,
.slotly-btn-pay:hover,
.slotly-cal-day.selected {
	background: var(--sl-accent-dark);
}

.slotly-cal-day.available:focus,
.slotly-cal-day.available:focus-visible,
.slotly-slot:focus,
.slotly-slot:focus-visible,
.slotly-btn-next:focus-visible,
.slotly-btn-pay:focus-visible,
.slotly-btn-back:focus-visible,
.slotly-checkbox-label input[type="checkbox"]:focus-visible,
.slotly-details-form input:focus,
.slotly-details-form textarea:focus,
.slotly-service-card:focus-within {
	outline-color: var(--sl-focus-ring, var(--sl-accent-dark));
}

.slotly-service-card,
.slotly-slot,
.slotly-payment-option,
.slotly-order-summary,
.slotly-progress,
.slotly-confirmation-table th,
.slotly-confirmation-table td {
	border-color: var(--sl-border);
}

.slotly-service-card,
.slotly-slot,
.slotly-payment-option,
.slotly-order-summary,
.slotly-progress,
.slotly-confirmation,
.slotly-confirmation-table,
.slotly-error {
	box-shadow: none;
}

.slotly-service-card:hover,
.slotly-service-card:focus-within,
.slotly-slot:hover,
.slotly-payment-option:has(input:checked) {
	box-shadow: var(--sl-shadow);
}

/* ── Slotly page templates (moved from customizer-preview.css) ─ */
.slotly-services-category-title {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--hestia-primary-color, #e91e63);
	margin: 2rem 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid #eee;
}

.slotly-services-row,
.slotly-events-row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.slotly-service-card,
.slotly-event-card {
	height: 100%;
	margin-bottom: 24px;
	display: flex;
	flex-direction: column;
}

.slotly-service-card-body,
.slotly-event-card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 1.4rem;
}

.slotly-service-title,
.slotly-event-title {
	font-size: 1.1rem;
	margin: 0 0 .6rem;
}

.slotly-service-description,
.slotly-event-description {
	flex: 1;
	font-size: .9rem;
	color: #666;
	margin-bottom: 1rem;
}

.slotly-service-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	font-size: .85rem;
	color: #666;
	margin-bottom: 1rem;
}

.slotly-service-meta .dashicons,
.slotly-event-when .dashicons,
.slotly-event-location .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	vertical-align: middle;
	margin-right: 3px;
}

.slotly-service-footer,
.slotly-event-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid #eee;
}

.slotly-service-price,
.slotly-event-price {
	font-weight: 700;
	font-size: 1.05rem;
}

.slotly-book-btn {
	white-space: nowrap;
}

.slotly-events-month-heading {
	font-size: 1.2rem;
	margin: 2rem 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 1px solid #eee;
}

.slotly-event-date-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 6px;
	background: var(--hestia-primary-color, #e91e63);
	color: #fff;
	float: right;
	margin: 0 0 .5rem 1rem;
	line-height: 1;
}

.slotly-event-day {
	font-size: 1.3rem;
	font-weight: 700;
}

.slotly-event-month {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.slotly-event-when,
.slotly-event-location {
	font-size: .85rem;
	color: #555;
	margin: .3rem 0;
}

.slotly-event-spots-warning {
	font-size: .8rem;
	font-weight: 600;
	color: #c0392b;
}

.slotly-event-full {
	font-size: .85rem;
	color: #999;
	font-style: italic;
}

.page-intro {
	max-width: 680px;
	margin: 0 auto 2rem;
	color: #555;
}

.slotly-confirmation-page {
	padding: 2rem 0;
}

/* ── Outcome pages: cancel and failure ───────────────────────── */
.slotly-outcome-page {
	padding: 2.5rem 0 3rem;
}

.slotly-outcome-icon {
	margin: 0 auto 1.25rem;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slotly-outcome-icon--cancel {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.slotly-outcome-icon--failure {
	background: rgba(245, 158, 11, 0.12);
	color: #d97706;
}

.slotly-outcome-title {
	margin-bottom: .75rem;
}

.slotly-outcome-content,
.slotly-outcome-detail {
	color: var(--sl-muted, #6b7280);
	font-size: 1rem;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.65;
}

.slotly-outcome-detail {
	font-size: .9rem;
	margin-top: -.25rem;
}

.slotly-outcome-actions {
	display: flex;
	gap: .75rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1.75rem;
}

.slotly-outcome-btn-primary {
	background: var(--sl-accent);
	border-color: var(--sl-accent);
}

.slotly-outcome-btn-primary:hover,
.slotly-outcome-btn-primary:focus {
	background: var(--sl-accent-dark);
	border-color: var(--sl-accent-dark);
}

/* ── Reward code field ───────────────────────────────────────── */
.slotly-reward-section {
	margin-top: 1.25rem;
	border-top: 1px solid var(--sl-border, #e5e7eb);
	padding-top: 1rem;
}

.slotly-reward-toggle {
	background: none;
	border: none;
	padding: 0;
	font-size: .9rem;
	color: var(--sl-accent, #3dd6c8);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
}

.slotly-reward-toggle:hover {
	color: var(--sl-accent-dark, #2ab5aa);
}

.slotly-reward-toggle-arrow {
	font-size: .7rem;
	transition: transform .2s ease;
}

.slotly-reward-field {
	margin-top: .75rem;
}

.slotly-reward-input-row {
	display: flex;
	gap: .5rem;
}

.slotly-reward-code-input {
	flex: 1;
	min-width: 0;
	padding: .45rem .75rem;
	border: 1px solid var(--sl-border, #d1d5db);
	border-radius: 4px;
	font-size: .95rem;
	font-family: monospace;
	letter-spacing: .05em;
	color: var(--sl-text, #1a1a2e);
}

.slotly-reward-code-input:focus {
	outline: 2px solid var(--sl-focus-ring, var(--sl-accent));
	outline-offset: 1px;
}

.slotly-reward-code-input:disabled {
	background: var(--sl-bg, #f3f4f6);
	color: var(--sl-muted, #6b7280);
}

.slotly-reward-apply-btn {
	white-space: nowrap;
	padding: .45rem 1rem;
	background: var(--sl-accent, #3dd6c8);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	font-size: .9rem;
}

.slotly-reward-apply-btn:hover:not(:disabled) {
	background: var(--sl-accent-dark, #2ab5aa);
}

.slotly-reward-apply-btn:disabled {
	opacity: .7;
	cursor: default;
}

.slotly-reward-apply-btn.slotly-reward-applied {
	background: #16a34a;
}

.slotly-reward-feedback {
	margin-top: .5rem;
	font-size: .85rem;
	border-radius: 4px;
	padding: .4rem .65rem;
}

.slotly-reward-valid {
	color: #15803d;
	background: rgba(22, 163, 74, .08);
	border: 1px solid rgba(22, 163, 74, .25);
}

.slotly-reward-invalid {
	color: #b91c1c;
	background: rgba(185, 28, 28, .06);
	border: 1px solid rgba(185, 28, 28, .2);
}

/* ── Confirmation: discount row ──────────────────────────────── */
.slotly-confirmation-discount-row th,
.slotly-confirmation-discount-row td {
	color: #15803d;
	font-weight: 600;
}

.slotly-confirmation-reward-badge {
	display: inline-block;
	margin-top: 1rem;
	padding: .5rem 1rem;
	background: rgba(22, 163, 74, .1);
	border: 1px solid rgba(22, 163, 74, .3);
	border-radius: 6px;
	color: #15803d;
	font-size: .9rem;
	font-weight: 600;
}