/* Agenda Massage — front booking widget.
   Palette entirely driven by CSS variables (override from Customizer > Additional CSS).
   Selectors are prefixed with .am-booking and every button state is explicit,
   so theme styles (Astra & co.) cannot leak into the widget. */
.am-booking {
	max-width: 34rem;
	margin: 0 auto;
	--am-accent: #D7A2AD;        /* confirm button + success icon */
	--am-accent-text: #47262E;   /* text on accent */
	--am-accent-hover: #865D64;
	--am-accent-hover-text: #fff;
	--am-day-bg: #FFFAF9;        /* available days + time slots */
	--am-day-border: #865D64;
	--am-day-hover: #9F6D67;
	--am-day-hover-text: #fff;
	--am-card-bg: #FFFAF9;       /* service cards, recap, nav buttons */
	--am-card-border: #E9D5D9;
	--am-card-hover: #F7EAEC;
}
.am-booking .am-step-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.am-booking .am-step-title { margin: 0; font-size: 1.15rem; }
.am-booking .am-back {
	background: var(--am-card-bg); border: 1px solid var(--am-card-border); border-radius: 6px;
	padding: .3rem .7rem; cursor: pointer; font-size: .85rem; color: inherit;
}
.am-booking .am-back:hover, .am-booking .am-back:focus { background: var(--am-card-hover); color: inherit; }

/* Services */
.am-booking .am-services { display: grid; gap: .75rem; }
.am-booking .am-service {
	display: flex; flex-direction: column; gap: .2rem; text-align: left;
	background: var(--am-card-bg); border: 1px solid var(--am-card-border); border-radius: 10px;
	padding: 1rem 1.2rem; cursor: pointer; font: inherit; color: inherit;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.am-booking .am-service:hover, .am-booking .am-service:focus {
	background: var(--am-card-hover); border-color: var(--am-day-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06); color: inherit;
}
.am-booking .am-service-name { font-weight: 600; font-size: 1.05rem; }
.am-booking .am-service-meta { font-size: .9rem; opacity: .75; }
.am-booking .am-service-desc { font-size: .88rem; opacity: .65; }

/* Calendar */
.am-booking .am-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.am-booking .am-cal-label { font-weight: 600; }
.am-booking .am-nav-btn {
	background: var(--am-card-bg); border: 1px solid var(--am-card-border); border-radius: 6px;
	width: 2.2rem; height: 2.2rem; font-size: 1.2rem; cursor: pointer; color: inherit; padding: 0;
}
.am-booking .am-nav-btn:hover, .am-booking .am-nav-btn:focus { background: var(--am-card-hover); color: inherit; }
.am-booking .am-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; }
.am-booking .am-cal-wd { text-align: center; font-size: .75rem; opacity: .6; padding: .3rem 0; }
.am-booking .am-cal-day {
	aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
	border-radius: 8px; font-size: .95rem;
}
.am-booking .am-cal-day.am-off { opacity: .3; }
.am-booking .am-cal-day.am-available {
	background: var(--am-day-bg); border: 1px solid var(--am-day-border); cursor: pointer;
	font: inherit; color: inherit; font-weight: 600; padding: 0;
	transition: background .15s, color .15s;
}
.am-booking .am-cal-day.am-available:hover, .am-booking .am-cal-day.am-available:focus {
	background: var(--am-day-hover); color: var(--am-day-hover-text);
}

/* Slots */
.am-booking .am-slots { display: flex; flex-wrap: wrap; gap: .5rem; }
.am-booking .am-slot {
	background: var(--am-day-bg); border: 1px solid var(--am-day-border); border-radius: 8px;
	padding: .55rem 1rem; cursor: pointer; font: inherit; color: inherit; font-weight: 600;
	transition: background .15s, color .15s;
}
.am-booking .am-slot:hover, .am-booking .am-slot:focus {
	background: var(--am-day-hover); color: var(--am-day-hover-text);
}

/* Form */
.am-booking .am-recap {
	background: var(--am-card-bg); border: 1px solid var(--am-card-border); border-radius: 8px;
	padding: .75rem 1rem; font-size: .92rem;
}
.am-booking .am-form { display: grid; gap: .8rem; }
.am-booking .am-field { display: grid; gap: .25rem; font-size: .9rem; }
.am-booking .am-field input, .am-booking .am-field textarea {
	border: 1px solid var(--am-card-border); border-radius: 8px; padding: .6rem .8rem;
	font: inherit; width: 100%; box-sizing: border-box; background: #fff; color: #333;
}
.am-booking .am-field input:focus, .am-booking .am-field textarea:focus {
	outline: 2px solid var(--am-accent); border-color: transparent;
}
.am-booking .am-hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; }
.am-booking .am-error { color: #b3543f; font-size: .9rem; min-height: 1.2em; margin: 0; }
.am-booking .am-submit {
	background: var(--am-accent); color: var(--am-accent-text); border: 0; border-radius: 8px;
	padding: .8rem 1.4rem; font-size: 1rem; font-weight: 600; cursor: pointer;
	transition: background .15s, color .15s;
}
.am-booking .am-submit:hover, .am-booking .am-submit:focus {
	background: var(--am-accent-hover); color: var(--am-accent-hover-text);
}
.am-booking .am-submit:disabled { opacity: .6; cursor: default; }

/* Success */
.am-booking .am-success { text-align: center; padding: 2rem 1rem; }
.am-booking .am-success-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--am-accent); color: var(--am-accent-text); font-size: 1.5rem; margin-bottom: .75rem;
}

.am-booking .am-loading { opacity: .5; }

@media (max-width: 480px) {
	.am-booking .am-cal-grid { gap: .15rem; }
	.am-booking .am-slot { flex: 1 1 28%; text-align: center; }
}