/*!
 * AC Barbershop - Booking drawer, layout module
 * Jordigital, 09.2026. Loads after acb-booking.css.
 *
 * Phones: once a service is picked the list folds to the chosen row, so the
 * calendar and the hours sit right under it instead of far down the page.
 * From 900px the drawer widens and splits into two columns: services on the
 * right, calendar and hours on the left.
 */

/* the form is paged: the inactive page must stay hidden */
.acb-drawer .jet-form-builder-page--hidden{display:none!important}

/* keep the plugin's own order for the month arrows */
.acb-drawer .jet-apb-calendar-btn:first-of-type,
.acb-drawer .jet-apb-calendar-btn:last-of-type,
.acb-drawer .jet-apb-calendar-header__label{order:0!important}

/* Elementor sizes the inputs at 88% with side margins; we want full rows */
.acb-drawer .jet-form-builder__field.text-field,
.acb-drawer .jet-form-builder__field.textarea-field{
	max-width:100%!important;margin:0!important;
}
.acb-drawer p.attention{width:100%!important;align-self:stretch!important}

/* ------------------------------------------- the selection circle
 * It is a flex item in the service row, so a long service name used to
 * squeeze it sideways into an ellipse. Lock it to a 22px square.
 */
.acb-drawer .jet-form-builder__field-template .e-con.e-child:first-child,
.acb-drawer .elementor-widget-jet-engine-forms-check-mark,
.acb-drawer .elementor-widget-jet-engine-forms-check-mark > .elementor-widget-container,
.acb-drawer .jet-form__check-mark,
.acb-drawer .jet-form__check-mark--default,
.acb-drawer .jet-form__check-mark--checked,
.acb-drawer .jet-form__check-mark__icon,
.acb-drawer .jet-form__check-mark svg{
	flex:0 0 22px!important;
	width:22px!important;height:22px!important;
	min-width:22px!important;max-width:22px!important;
	min-height:22px!important;max-height:22px!important;
	aspect-ratio:1!important;
}
.acb-drawer .jet-form__check-mark svg{display:block}

/* --------------------------------------------- folded service list */
.acb-drawer .acb-hidden{display:none!important}

.acb-drawer .acb-swap{
	display:none;width:100%;min-height:46px;margin-top:10px;
	background:transparent;border:1px dashed var(--acb-line);
	border-radius:11px;color:var(--acb-text-2);
	font-family:var(--acb-ui);font-size:15px;font-weight:500;
	cursor:pointer;align-items:center;justify-content:center;
	transition:border-color .18s ease,color .18s ease;
}
.acb-drawer form.acb-picked .acb-swap{display:flex}
.acb-drawer .acb-swap:hover{border-color:var(--acb-gold-dim);color:var(--acb-text)}
.acb-drawer .acb-swap:focus-visible{outline:2px solid var(--acb-gold);outline-offset:2px}

.acb-drawer form.acb-picked .jet-form-builder__field-template--checked{
	background:linear-gradient(90deg,rgba(240,209,149,.14),rgba(240,209,149,.04));
}

/* the sticky header must not swallow whatever we scroll to */
.acb-drawer .jet-apb-calendar-wrapper,
.acb-drawer .field-type-radio-field,
.acb-drawer .jet-form-builder__fields-group{scroll-margin-top:132px}

/* the hours panel is a plain block here, not the plugin's floating flex box */
.acb-drawer .jet-apb-calendar-slots{display:block!important}
.acb-drawer .jet-apb-calendar-slots--active::before{display:block;width:100%}

/* ------------------------------------------------- checking for hours */
.acb-drawer .jet-apb-calendar-content{position:relative}

.acb-drawer .jet-apb-calendar-header,
.acb-drawer .jet-apb-calendar-week,
.acb-drawer .jet-apb-calendar-body,
.acb-drawer .jet-apb-calendar-sidebar{
	transition:opacity .18s ease,filter .18s ease;
}
.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-header,
.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-week,
.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-body{
	opacity:.16;filter:blur(2px);pointer-events:none;
}
.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-sidebar{
	opacity:.16;filter:blur(2px);pointer-events:none;
}
.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-content::after{
	content:"";position:absolute;left:50%;top:50%;
	width:32px;height:32px;margin:-34px 0 0 -16px;
	border-radius:50%;
	border:2.5px solid rgba(240,209,149,.2);
	border-top-color:var(--acb-gold);
	animation:acb-spin .7s linear infinite;
}
.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-content::before{
	content:"בודקים תורים פנויים";
	position:absolute;left:0;right:0;top:50%;margin-top:12px;
	text-align:center;font-family:var(--acb-ui);
	font-size:14px;font-weight:500;letter-spacing:.01em;
	color:var(--acb-text-2);
}
@keyframes acb-spin{to{rotate:360deg}}

@media (prefers-reduced-motion:reduce){
	.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-content::after{display:none}
	.acb-drawer .jet-apb-calendar--loading .jet-apb-calendar-content::before{margin-top:-8px}
}

/* ------------------------------------------- the chosen appointments */
.acb-drawer .jet-apb-calendar-appointments-list{
	display:flex!important;flex-direction:column!important;
	align-items:stretch!important;gap:8px!important;width:100%;
}
.acb-drawer .jet-apb-appointments-item{
	flex:0 0 auto!important;width:100%!important;margin:0!important;
}
.acb-drawer .jet-apb-appointments-item-content{
	display:flex!important;flex-wrap:wrap;align-items:baseline;
	gap:2px 10px;padding-inline-end:40px;width:100%;
}
.acb-drawer .jet-apb-item-service-provider{
	display:block!important;flex:1 1 100%;
	font-size:15.5px;font-weight:600;line-height:1.3;
	color:var(--acb-text)!important;
}
.acb-drawer .jet-apb-item-time,
.acb-drawer .jet-apb-item-date{
	display:block!important;
	font-size:13.5px;line-height:1.4;color:var(--acb-text-2)!important;
	font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------- footer buttons */
.acb-drawer .jet-form-builder__next-page-wrap{
	display:flex!important;align-items:center;gap:10px;
	justify-content:flex-start!important;
}
.acb-drawer .jet-form-builder__next-page{flex:1 1 auto}

/* the how-to note has done its job by then */
@media (max-width:899px){
	.acb-drawer form.acb-picked .field-type-heading-field{display:none}
}

/* ------------------------------------------------- two columns */
@media (min-width:900px){
	.acb-drawer .jet-popup__container{
		width:min(880px,96vw)!important;
		max-width:96vw!important;
		min-width:0!important;
	}

	.acb-drawer .acb-swap{display:none!important}

	.acb-drawer .jet-form-builder-page:has(.field-type-appointment-date){
		display:grid!important;
		grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
		grid-template-areas:
			"intro intro"
			"svc   cal"
			"foot  foot";
		column-gap:24px;
		row-gap:22px;
		align-items:start;
	}
	.acb-drawer .jet-form-builder-page--hidden:has(.field-type-appointment-date){display:none!important}
	.acb-drawer .jet-form-builder-page:has(.field-type-appointment-date) > .field-type-heading-field{grid-area:intro}
	.acb-drawer .jet-form-builder-page:has(.field-type-appointment-date) > .field-type-radio-field{grid-area:svc}
	.acb-drawer .jet-form-builder-page:has(.field-type-appointment-date) > .field-type-appointment-date{grid-area:cal}
	.acb-drawer .jet-form-builder-page:has(.field-type-appointment-date) > .jet-form-builder__next-page-wrap{grid-area:foot}

	.acb-drawer .jet-apb-calendar{gap:20px!important}
	.acb-drawer .jet-apb-calendar-slots-container{grid-template-columns:repeat(3,1fr)!important}
	.acb-drawer .jet-apb-calendar-date-body{min-height:42px}

	/* a full width gold bar is too much on a wide drawer */
	.acb-drawer .jet-form-builder__action-button-wrapper{justify-content:flex-start!important}
	.acb-drawer .jet-form-builder__next-page,
	.acb-drawer .jet-form-builder__submit{flex:0 1 340px!important;width:auto!important}
	.acb-drawer .jet-form-builder__prev-page{flex:0 0 auto!important;width:auto!important}

	.acb-drawer .jet-form-builder-page:not(:has(.field-type-appointment-date)){
		max-width:520px;margin-inline:auto;
	}
}

@media (min-width:1200px){
	.acb-drawer .jet-popup__container{width:920px!important}
	.acb-drawer .jet-apb-calendar-slots-container{grid-template-columns:repeat(4,1fr)!important}
}

/* --------------------------------- no :has() support: stay stacked */
@supports not selector(:has(*)){
	.acb-drawer .acb-swap{display:none!important}
}