/* GYL Booking — modern, professional UI. Light + dark. All class names match
   widget.js / embed.js. Accent (--gyl-accent / --gyl-on-accent) injected in PHP. */

.gyl-widget {
	--gyl-accent: #b8f02c;
	--gyl-on-accent: #0e1116;
	--gyl-bg: #ffffff;
	--gyl-elev: #ffffff;
	--gyl-fg: #11151c;
	--gyl-muted: #6b7280;
	--gyl-border: #eceef1;
	--gyl-soft: #f5f7f9;
	--gyl-radius: 20px;
	--gyl-shadow: 0 1px 2px rgba( 16, 24, 40, .04 ), 0 12px 32px rgba( 16, 24, 40, .10 );
	--gyl-ring: 0 0 0 4px rgba( 184, 240, 44, .28 );
	max-width: 660px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
	color: var(--gyl-fg);
	-webkit-font-smoothing: antialiased;
}
@media ( prefers-color-scheme: dark ) {
	.gyl-widget {
		--gyl-bg: #14191f;
		--gyl-elev: #1a2027;
		--gyl-fg: #e8ebef;
		--gyl-muted: #98a2b3;
		--gyl-border: #262d36;
		--gyl-soft: #11161b;
		--gyl-shadow: 0 1px 2px rgba( 0, 0, 0, .3 ), 0 16px 40px rgba( 0, 0, 0, .5 );
	}
}
.gyl-widget * { box-sizing: border-box; }

/* Card + entrance (replays each step = smooth transitions) */
.gyl-w-card {
	position: relative;
	background: var(--gyl-elev);
	border: 1px solid var(--gyl-border);
	border-radius: var(--gyl-radius);
	padding: 26px 26px 24px;
	box-shadow: var(--gyl-shadow);
	overflow: hidden;
	animation: gyl-card-in .28s cubic-bezier( .2, .7, .2, 1 );
}
.gyl-w-card::before { /* subtle top accent sheen */
	content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient( 90deg, var(--gyl-accent), transparent 70% );
	opacity: .9;
}
@keyframes gyl-card-in { from { opacity: 0; transform: translateY( 8px ) scale( .995 ); } to { opacity: 1; transform: none; } }

.gyl-w-head { margin-bottom: 18px; }
.gyl-w-title { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.gyl-w-sub { color: var(--gyl-muted); margin-top: 3px; font-size: 13.5px; font-weight: 500; }

/* Stepper */
.gyl-w-steps { display: flex; align-items: center; gap: 6px; margin: 0 0 18px; }
.gyl-w-dot { width: 30px; height: 6px; border-radius: 99px; background: var(--gyl-border); transition: background .25s, width .25s; }
.gyl-w-dot.is-on { background: var(--gyl-accent); width: 34px; }
.gyl-w-stepn { margin-left: 10px; color: var(--gyl-muted); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }

/* Timezone row + selects */
.gyl-w-tz { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; background: var(--gyl-soft); padding: 8px 10px; border-radius: 12px; }
.gyl-w-tzlabel { color: var(--gyl-muted); font-size: 12px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.gyl-w-select { padding: 11px 12px; border: 1px solid var(--gyl-border); border-radius: 12px; background: var(--gyl-bg); color: var(--gyl-fg); font-size: 14px; font-family: inherit; flex: 1; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.gyl-w-select:focus { outline: none; border-color: var(--gyl-accent); box-shadow: var(--gyl-ring); }
select.gyl-w-input { appearance: auto; }

/* Picker */
.gyl-w-picker { display: grid; grid-template-columns: 1fr 1.45fr; gap: 16px; }
@media ( max-width: 540px ) { .gyl-w-picker { grid-template-columns: 1fr; } }
.gyl-w-days { display: flex; flex-direction: column; gap: 8px; max-height: 326px; overflow: auto; padding-right: 4px; }
.gyl-w-day {
	text-align: left; padding: 12px 14px; border: 1px solid var(--gyl-border); background: var(--gyl-bg);
	color: var(--gyl-fg); border-radius: 13px; cursor: pointer; font-weight: 600; font-size: 14px;
	transition: transform .12s, border-color .15s, box-shadow .15s, background .15s;
}
.gyl-w-day:hover { transform: translateY( -1px ); border-color: var(--gyl-accent); }
.gyl-w-day.is-active { border-color: var(--gyl-accent); background: color-mix( in srgb, var(--gyl-accent) 12%, var(--gyl-bg) ); box-shadow: inset 0 0 0 1px var(--gyl-accent); }

.gyl-w-times { display: grid; grid-template-columns: repeat( auto-fill, minmax( 96px, 1fr ) ); gap: 9px; align-content: start; max-height: 326px; overflow: auto; padding-right: 4px; }
.gyl-w-time {
	padding: 12px 8px; border: 1px solid var(--gyl-border); background: var(--gyl-bg); color: var(--gyl-fg);
	border-radius: 13px; cursor: pointer; font-weight: 700; font-size: 14px;
	transition: transform .12s, border-color .15s, box-shadow .15s, background .15s;
}
.gyl-w-time:hover { transform: translateY( -1px ); border-color: var(--gyl-accent); background: color-mix( in srgb, var(--gyl-accent) 10%, var(--gyl-bg) ); box-shadow: 0 6px 16px rgba( 16, 24, 40, .08 ); }

/* Form */
.gyl-w-form { display: flex; flex-direction: column; gap: 12px; }
.gyl-w-chosen {
	font-weight: 700; padding: 12px 14px; border-radius: 13px; font-size: 14.5px;
	background: color-mix( in srgb, var(--gyl-accent) 14%, var(--gyl-bg) );
	border: 1px solid color-mix( in srgb, var(--gyl-accent) 40%, var(--gyl-border) );
}
.gyl-w-input { padding: 13px 14px; border: 1px solid var(--gyl-border); border-radius: 13px; background: var(--gyl-bg); color: var(--gyl-fg); font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.gyl-w-input::placeholder { color: var(--gyl-muted); }
.gyl-w-input:focus { outline: none; border-color: var(--gyl-accent); box-shadow: var(--gyl-ring); }
textarea.gyl-w-input { resize: vertical; min-height: 58px; }
.gyl-w-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Buttons */
.gyl-w-actions { display: flex; gap: 10px; margin-top: 6px; }
.gyl-w-btn {
	padding: 13px 20px; border-radius: 13px; font-weight: 800; font-size: 14.5px; cursor: pointer;
	border: 1px solid var(--gyl-border); background: var(--gyl-bg); color: var(--gyl-fg);
	text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
	transition: transform .12s, box-shadow .18s, filter .15s; font-family: inherit;
}
.gyl-w-btn:active { transform: translateY( 1px ) scale( .99 ); }
.gyl-w-primary {
	flex: 1; border: none; color: var(--gyl-on-accent);
	background: var(--gyl-accent);
	background: linear-gradient( 180deg, color-mix( in srgb, var(--gyl-accent) 88%, #fff ), var(--gyl-accent) );
	box-shadow: 0 8px 20px rgba( 16, 24, 40, .14 );
}
.gyl-w-primary:hover { transform: translateY( -1px ); box-shadow: 0 12px 26px color-mix( in srgb, var(--gyl-accent) 55%, transparent ); }
.gyl-w-primary:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }
.gyl-w-ghost { color: var(--gyl-muted); }
.gyl-w-ghost:hover { border-color: var(--gyl-accent); color: var(--gyl-fg); }
.gyl-w-msg { color: #e5484d; font-size: 13.5px; min-height: 18px; font-weight: 600; }

/* Success */
.gyl-w-success { text-align: center; }
.gyl-w-check {
	width: 60px; height: 60px; border-radius: 50%; background: var(--gyl-accent); color: var(--gyl-on-accent);
	font-size: 32px; display: grid; place-items: center; margin: 6px auto 14px;
	box-shadow: 0 10px 24px color-mix( in srgb, var(--gyl-accent) 50%, transparent );
	animation: gyl-pop-check .4s cubic-bezier( .2, 1.3, .4, 1 );
}
@keyframes gyl-pop-check { 0% { transform: scale( 0 ); } 60% { transform: scale( 1.12 ); } 100% { transform: scale( 1 ); } }
.gyl-w-note { color: var(--gyl-muted); }

.gyl-w-empty, .gyl-w-loading { padding: 30px; text-align: center; color: var(--gyl-muted); border: 1px dashed var(--gyl-border); border-radius: var(--gyl-radius); background: var(--gyl-elev); }

/* Thin scrollbars inside columns */
.gyl-w-days::-webkit-scrollbar, .gyl-w-times::-webkit-scrollbar { width: 7px; }
.gyl-w-days::-webkit-scrollbar-thumb, .gyl-w-times::-webkit-scrollbar-thumb { background: var(--gyl-border); border-radius: 99px; }

/* ---------- Popup modal ---------- */
.gyl-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 18px; }
.gyl-modal[hidden] { display: none; }
.gyl-modal-backdrop { position: absolute; inset: 0; background: rgba( 10, 13, 18, .55 ); backdrop-filter: blur( 6px ); animation: gyl-fade .2s ease; }
@keyframes gyl-fade { from { opacity: 0; } to { opacity: 1; } }
.gyl-modal-card { position: relative; width: 100%; max-width: 660px; max-height: 92vh; overflow: auto; animation: gyl-pop .26s cubic-bezier( .2, .8, .2, 1 ); }
@keyframes gyl-pop { from { opacity: 0; transform: translateY( 14px ) scale( .97 ); } to { opacity: 1; transform: none; } }
.gyl-modal-close {
	position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
	border: none; background: rgba( 255, 255, 255, .9 ); color: #11151c; font-size: 22px; line-height: 1;
	cursor: pointer; box-shadow: 0 4px 14px rgba( 0, 0, 0, .22 ); transition: transform .15s, background .15s;
}
.gyl-modal-close:hover { transform: rotate( 90deg ); background: #fff; }
html.gyl-modal-open { overflow: hidden; }

/* ---------- Floating action button ---------- */
.gyl-fab {
	position: fixed; right: 22px; bottom: 22px; z-index: 99998; display: inline-flex; align-items: center; gap: 9px;
	padding: 14px 22px; border: none; border-radius: 99px; font-weight: 800; font-size: 15px; cursor: pointer;
	color: var(--gyl-on-accent, #0e1116 ); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	background: var(--gyl-accent, #b8f02c );
	background: linear-gradient( 180deg, color-mix( in srgb, var(--gyl-accent, #b8f02c ) 88%, #fff ), var(--gyl-accent, #b8f02c ) );
	box-shadow: 0 10px 28px rgba( 16, 24, 40, .2 );
	transition: transform .16s, box-shadow .2s; animation: gyl-fab-in .4s cubic-bezier( .2, 1.2, .4, 1 );
}
@keyframes gyl-fab-in { from { opacity: 0; transform: translateY( 12px ) scale( .9 ); } to { opacity: 1; transform: none; } }
.gyl-fab:hover { transform: translateY( -2px ); box-shadow: 0 16px 34px color-mix( in srgb, var(--gyl-accent, #b8f02c ) 60%, transparent ); }
.gyl-fab-ico { font-size: 17px; }
@media ( max-width: 520px ) { .gyl-fab-txt { display: none; } .gyl-fab { padding: 16px; border-radius: 50%; } }

/* ---------- Docked quick-booking card ---------- */
.gyl-quick {
	position: fixed; right: 22px; left: auto; bottom: 96px; z-index: 99997; width: 300px;
	background: #fff; color: #11151c; border-radius: 18px; padding: 18px 18px 16px;
	box-shadow: 0 18px 44px rgba( 16, 24, 40, .24 ); border: 1px solid #eceef1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	transform-origin: bottom right;
	opacity: 0; transform: translateY( 16px ) scale( .98 ); transition: opacity .3s ease, transform .34s cubic-bezier( .2, .8, .2, 1 );
}
.gyl-quick.is-in { opacity: 1; transform: none; }
.gyl-quick.is-closing { opacity: 0; transform: translateY( 16px ) scale( .96 ); }
/* Collapse: shrink + drop into the floating button at bottom-right. */
.gyl-quick.is-collapsing { opacity: 0; transform: translate( 34px, 78px ) scale( .12 ); }
@media ( prefers-color-scheme: dark ) { .gyl-quick { background: #1a2027; color: #e8ebef; border-color: #262d36; } }
.gyl-quick-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; background: transparent; color: inherit; opacity: .45; font-size: 21px; line-height: 1; cursor: pointer; border-radius: 50%; transition: opacity .15s, transform .15s; }
.gyl-quick-close:hover { opacity: 1; transform: rotate( 90deg ); }
.gyl-quick-head { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.gyl-quick-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; color: var(--gyl-on-accent, #0e1116 ); background: var(--gyl-accent, #b8f02c ); background: linear-gradient( 180deg, color-mix( in srgb, var(--gyl-accent, #b8f02c ) 86%, #fff ), var(--gyl-accent, #b8f02c ) ); box-shadow: 0 6px 16px rgba( 16, 24, 40, .16 ); }
.gyl-quick-title { font-weight: 800; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.gyl-quick-sub { font-size: 12px; opacity: .6; margin-top: 2px; }
.gyl-quick-times { display: flex; flex-direction: column; gap: 8px; margin-bottom: 11px; }
.gyl-quick-chip { padding: 10px 13px; border: 1px solid #eceef1; border-radius: 12px; background: transparent; color: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-align: left; transition: transform .12s, border-color .15s, box-shadow .15s; }
.gyl-quick-chip:hover { transform: translateY( -1px ); border-color: var(--gyl-accent, #b8f02c ); box-shadow: 0 6px 16px rgba( 16, 24, 40, .1 ); }
@media ( prefers-color-scheme: dark ) { .gyl-quick-chip { border-color: #262d36; } }
.gyl-quick-more { width: 100%; padding: 11px; border: none; border-radius: 12px; font-weight: 800; font-size: 13.5px; cursor: pointer; color: var(--gyl-on-accent, #0e1116 ); background: var(--gyl-accent, #b8f02c ); background: linear-gradient( 180deg, color-mix( in srgb, var(--gyl-accent, #b8f02c ) 88%, #fff ), var(--gyl-accent, #b8f02c ) ); box-shadow: 0 8px 18px rgba( 16, 24, 40, .16 ); transition: transform .14s, box-shadow .18s; }
.gyl-quick-more:hover { transform: translateY( -1px ); }
@media ( max-width: 720px ) { .gyl-quick { display: none; } }