@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Source+Sans+3:wght@300;400;600;700&display=swap');

/* ── WIDGET RESET ── */
.gb-booking {
	all: initial;
	display: block;
}

.gb-booking *,
.gb-booking *::before,
.gb-booking *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── CSS CUSTOM PROPERTIES ── */
.gb-booking {
	--green: #0AB559;
	--green-dark: #088c45;
	--green-light: #e8f8ef;
	--green-mid: #c0edcf;
	--navy: #000019;
	--gray-bg: #f0f1f3;
	--white: #fff;
	--text-primary: #000019;
	--text-secondary: #4a4a5a;
	--text-tertiary: #8888a0;
	--border: #e2e2ea;
	--border-light: #f0f0f6;
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 2px 16px rgba(0, 0, 25, 0.06);
	--shadow-lg: 0 8px 40px rgba(0, 0, 25, 0.10);
	font-family: 'Source Sans 3', sans-serif;
	background: var(--gray-bg);
	color: var(--text-primary);
	min-height: 100vh;
}

/* ── PAGE SHELL ── */
.gb-booking .page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ── TOP BAR ── */
.gb-booking .topbar {
	background: var(--white);
	border-bottom: 1px solid var(--border);
	height: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 8px rgba(0, 0, 25, 0.06);
	padding: 12px 40px;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

.gb-booking .topbar-logo { display: flex; align-items: center; gap: 10px; }
.gb-booking .topbar-logo-text { font-family: 'Ubuntu', sans-serif; font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: 0.02em; }
.gb-booking .topbar-logo-sub { font-size: 12px; color: var(--green); font-family: 'Ubuntu', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.gb-booking .topbar-steps { display: flex; align-items: center; gap: 0; }
.gb-booking .tstep { display: flex; align-items: center; gap: 6px; font-size: 14px; font-family: 'Ubuntu', sans-serif; font-weight: 500; color: var(--text-tertiary); padding: 0 6px; white-space: nowrap; }
.gb-booking .tstep.active { color: var(--green); }
.gb-booking .tstep.done { color: var(--green); }
.gb-booking .tstep-num { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; transition: all 0.2s; }
.gb-booking .tstep.active .tstep-num,
.gb-booking .tstep.done .tstep-num { background: var(--green); color: #fff; border-color: var(--green); }
.gb-booking .tstep-sep { width: 24px; height: 2px; background: var(--border); border-radius: 1px; flex-shrink: 0; }
.gb-booking .tstep.done + .tstep-sep { background: var(--green); }

/* ── MAIN CONTENT ── */
.gb-booking .main {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(300px, 680px) 340px;
	gap: 28px;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 32px 24px 60px;
	align-items: start;
}

/* ── LEFT FORM AREA ── */
.gb-booking .form-area {
	background: var(--white);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.gb-booking .form-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--border-light); }
.gb-booking .form-header-title { font-family: 'Ubuntu', sans-serif; font-size: 20px; font-weight: 700; color: var(--navy); }
.gb-booking .form-header-sub { font-size: 15px; color: var(--text-secondary); margin-top: 4px; font-family: 'Source Sans 3', sans-serif; }
.gb-booking .form-body { padding: 24px 28px 28px; display: flex; flex-direction: column; }

/* Panels */
.gb-booking .panel { display: none; flex-direction: column; }
.gb-booking .panel.active { display: flex; }

/* ── RIGHT SUMMARY ── */
.gb-booking .summary-area {
	position: sticky;
	top: 80px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gb-booking .sum-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; }
.gb-booking .sum-card-header { padding: 12px 16px; background: #e8f8ef; border-bottom: 1px solid #c0e8d0; display: flex; align-items: center; gap: 8px; }
.gb-booking .sum-card-title { font-family: 'Ubuntu', sans-serif; font-size: 13px; font-weight: 700; color: #0a7a3c; letter-spacing: 0.1em; text-transform: uppercase; }
.gb-booking .sum-card-body { padding: 14px 16px; background: #fff; }
.gb-booking .sum-empty { font-size: 15px; color: var(--text-tertiary); padding: 8px 0; font-family: 'Ubuntu', sans-serif; }
.gb-booking .sum-rows { display: flex; flex-direction: column; }
.gb-booking .sum-row { display: flex; justify-content: space-between; align-items: flex-start; font-size: 15px; padding: 7px 0; border-bottom: 1px solid #d8f0e2; }
.gb-booking .sum-row:last-child { border-bottom: none; }
.gb-booking .sum-key { color: #2a6040; font-family: 'Ubuntu', sans-serif; font-size: 14px; }
.gb-booking .sum-val { font-weight: 700; color: var(--navy); text-align: right; max-width: 180px; font-family: 'Ubuntu', sans-serif; font-size: 14px; }
.gb-booking .sum-disc { display: flex; justify-content: space-between; font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--border-light); color: var(--green-dark); font-weight: 700; font-family: 'Ubuntu', sans-serif; }
.gb-booking .sum-total-card { background: var(--green); border-radius: var(--radius); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 16px rgba(10, 181, 89, 0.25); }
.gb-booking .sum-total-card .tl { font-size: 12px; color: rgba(255, 255, 255, 0.8); font-family: 'Ubuntu', sans-serif; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.gb-booking .sum-total-card .tv { font-size: 19px; font-weight: 700; color: #fff; font-family: 'Ubuntu', sans-serif; }

/* Box preview in summary */
.gb-booking .sum-box-wrap { border-radius: var(--radius-sm); overflow: hidden; background: #edf7f1; border: 1px solid #d4edd9; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; max-width: 180px; margin: 0 auto; }

/* Section titles */
.gb-booking .section-title { font-family: 'Ubuntu', sans-serif; font-size: 19px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.gb-booking .section-sub { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; }
.gb-booking .section-sub-sm { font-size: 15px; color: var(--text-tertiary); margin-bottom: 20px; font-family: 'Ubuntu', sans-serif; }

/* ── LOCATION GRID ── */
.gb-booking .loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.gb-booking .loc-card { border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; background: #fafafa; position: relative; align-self: start; }
.gb-booking .loc-card:hover:not(.soon) { border-color: var(--green); box-shadow: 0 4px 20px rgba(10, 181, 89, 0.15); transform: translateY(-2px); }
.gb-booking .loc-card.selected { border-color: var(--green); box-shadow: 0 4px 20px rgba(10, 181, 89, 0.2); }
.gb-booking .loc-card.soon { opacity: 0.55; cursor: default; }
.gb-booking .loc-ph { width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(135deg, var(--navy) 0%, #0d2a1a 60%, #0f3d22 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.gb-booking .loc-ph::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(10, 181, 89, 0.25) 0%, transparent 60%); }
.gb-booking .loc-ph-icon { width: 32px; height: 32px; opacity: 0.7; position: relative; z-index: 1; }
.gb-booking .loc-info { padding: 8px 10px 10px; text-align: center; }
.gb-booking .loc-name { font-family: 'Ubuntu', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); }
.gb-booking .loc-badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; font-family: 'Ubuntu', sans-serif; padding: 3px 8px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
.gb-booking .loc-badge.open { background: rgba(10, 181, 89, 0.9); color: #fff; }
.gb-booking .loc-badge.soon { background: rgba(0, 0, 25, 0.7); color: rgba(255, 255, 255, 0.8); }
.gb-booking .loc-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10, 181, 89, 0.4); }
.gb-booking .loc-card.selected .loc-check { display: flex; }

/* ── BOX GRID ── */
.gb-booking .box-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gb-booking .box-card { border: 2px solid #c0c0cc; border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; background: var(--white); position: relative; }
.gb-booking .box-card:hover:not(.vol) { border-color: var(--green); box-shadow: 0 4px 20px rgba(10, 181, 89, 0.15); transform: translateY(-2px); }
.gb-booking .box-card.selected { border-color: var(--green); box-shadow: 0 4px 20px rgba(10, 181, 89, 0.2); }
.gb-booking .box-card.vol { opacity: 0.4; pointer-events: none; }
.gb-booking .box-ph { width: 100%; height: 130px; background: #edf7f1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.gb-booking .box-body { padding: 10px 12px 12px; text-align: center; }
.gb-booking .box-header { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gb-booking .bsize { font-family: 'Ubuntu', sans-serif; font-size: 16px; font-weight: 700; color: var(--navy); }
.gb-booking .bprice { font-size: 14px; color: #fff; font-weight: 500; font-family: 'Ubuntu', sans-serif; }
.gb-booking .bprice span { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.85); }
.gb-booking .vol-tag { font-size: 10px; color: #c0392b; background: #fdecea; padding: 2px 7px; border-radius: 20px; margin-top: 6px; display: inline-block; font-weight: 600; }
.gb-booking .box-check { position: absolute; top: 46px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); display: none; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10, 181, 89, 0.4); z-index: 2; }
.gb-booking .box-card.selected .box-check { display: flex; }

/* Availability badges */
.gb-booking .avail-badge { font-size: 12px; font-weight: 700; font-family: 'Ubuntu', sans-serif; padding: 3px 9px; border-radius: 20px; display: inline-block; margin-top: 5px; letter-spacing: 0.02em; }
.gb-booking .avail-ok { background: #e8f8ef; color: #0AB559; }
.gb-booking .avail-low { background: #fff4e0; color: #d47c00; }
.gb-booking .avail-last { background: #fdecea; color: #c0392b; }
.gb-booking .avail-unavail { background: #f0f0f4; color: #aaaabc; }

/* ── FLOOR PICKER ── */
.gb-booking .floor-section { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.45s cubic-bezier(.4, 0, .2, 1), opacity 0.3s ease; }
.gb-booking .floor-section.visible { max-height: 280px; opacity: 1; }
.gb-booking .floor-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; }
.gb-booking .floor-divider-line { flex: 1; height: 1px; background: var(--border); }
.gb-booking .floor-divider-title { font-family: 'Ubuntu', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.gb-booking .floor-cards { display: flex; flex-direction: column; gap: 10px; }
.gb-booking .floor-card { display: flex; align-items: center; gap: 14px; border: 2px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; background: var(--white); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; position: relative; flex-wrap: wrap; }
.gb-booking .floor-card:hover { border-color: var(--green); box-shadow: 0 3px 16px rgba(10, 181, 89, 0.12); }
.gb-booking .floor-card.sel { border-color: var(--green); background: #f6fdf8; box-shadow: 0 3px 16px rgba(10, 181, 89, 0.15); }
.gb-booking .floor-card-body { flex: 1; }
.gb-booking .floor-card-title { font-family: 'Ubuntu', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gb-booking .floor-card.sel .floor-card-title { color: var(--green-dark); }
.gb-booking .floor-card-feat { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; font-family: 'Ubuntu', sans-serif; padding: 2px 8px; border-radius: 20px; }
.gb-booking .floor-feat-blue { background: #e8f0fe; color: #3b5bdb; }
.gb-booking .floor-feat-green { background: #e8f8ef; color: #0AB559; }
.gb-booking .floor-card.sel .floor-feat-blue { background: #d0e3ff; color: #2d4cc9; }
.gb-booking .floor-card.sel .floor-feat-green { background: #c6f0d8; color: #088c45; }
.gb-booking .floor-card-price { font-family: 'Ubuntu', sans-serif; font-size: 18px; font-weight: 700; color: var(--green); white-space: nowrap; text-align: right; margin-left: auto; }
.gb-booking .floor-card-price span { display: block; font-size: 12px; font-weight: 400; color: var(--text-tertiary); margin-top: 1px; text-align: right; font-family: 'Source Sans 3', sans-serif; }
.gb-booking .floor-card.sel .floor-card-price { color: var(--green-dark); }
.gb-booking .floor-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
.gb-booking .floor-card.sel .floor-radio { border-color: var(--green); background: var(--green); }
.gb-booking .floor-radio-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
.gb-booking .floor-card.sel .floor-radio-dot { display: block; }

/* ── CALENDAR ── */
.gb-booking .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.gb-booking .cal-nav { background: #fff; border: 1.5px solid #ccc; border-radius: var(--radius-sm); width: 34px; height: 34px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; color: #444; padding: 0; }
.gb-booking .cal-nav::before { content: ''; display: block; width: 8px; height: 8px; border-top: 2px solid #444; border-right: 2px solid #444; flex-shrink: 0; transition: border-color 0.15s; }
.gb-booking .cal-nav--prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
.gb-booking .cal-nav--next::before { transform: rotate(45deg) translate(-1px, 1px); }
.gb-booking .cal-nav:hover { background: #f0f0f0; border-color: #999; color: #000; }
.gb-booking .cal-nav:hover::before { border-color: #000; }
.gb-booking .cal-month { font-family: 'Ubuntu', sans-serif; font-size: 17px; font-weight: 700; color: var(--navy); }
.gb-booking .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.gb-booking .cal-day-name { text-align: center; font-size: 12px; font-weight: 700; font-family: 'Source Sans 3', sans-serif; color: var(--text-tertiary); padding: 4px 0; letter-spacing: 0.05em; text-transform: uppercase; }
.gb-booking .cal-day { text-align: center; padding: 8px 4px; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.15s; color: var(--text-primary); font-weight: 500; font-family: 'Source Sans 3', sans-serif; }
.gb-booking .cal-day:hover:not(.disabled):not(.empty):not(.selected) { background: var(--green-light); color: var(--green-dark); }
.gb-booking .cal-day.selected { background: var(--green) !important; color: #fff !important; font-weight: 700; }
.gb-booking .cal-day.today { font-weight: 700; color: var(--green); position: relative; }
.gb-booking .cal-day.today::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--green); }
.gb-booking .cal-day.disabled { color: var(--border); cursor: default; }
.gb-booking .cal-day.empty { cursor: default; }

/* ── FORM ── */
.gb-booking .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gb-booking .form-row { display: flex; flex-direction: column; gap: 4px; }
.gb-booking .form-row.full { grid-column: 1 / -1; }
.gb-booking .form-row label { font-size: 13px; font-weight: 700; font-family: 'Ubuntu', sans-serif; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.gb-booking .form-row input,
.gb-booking .form-row select { padding: 10px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 17px; font-family: 'Source Sans 3', sans-serif; background: var(--white); color: var(--text-primary); transition: border-color 0.15s, box-shadow 0.15s; outline: none; }
.gb-booking .form-row input:focus,
.gb-booking .form-row select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(10, 181, 89, 0.12); }
.gb-booking .form-row input.invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1); }
.gb-booking .form-row input.invalid:focus { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15); }
.gb-booking .form-row input.autofilled { background: #f6fdf8; border-color: #0AB559; }
.gb-booking .form-row input.autofilled:focus { border-color: #0AB559; box-shadow: 0 0 0 3px rgba(10, 181, 89, 0.12); }
.gb-booking .form-row input::placeholder { color: var(--text-tertiary); }
.gb-booking .phone-input-wrap { display: flex; }
.gb-booking .phone-input-wrap select { width: 90px; min-width: 90px; max-width: 90px; padding: 10px 24px 10px 8px; border: 1.5px solid var(--border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-size: 14px; font-family: 'Source Sans 3', sans-serif; background: #f8f8fb; color: var(--text-primary); cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s; flex-shrink: 0; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 6px center; overflow: hidden; text-overflow: ellipsis; }
.gb-booking .phone-input-wrap select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(10, 181, 89, 0.12); z-index: 1; position: relative; }
.gb-booking .phone-input-wrap input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; flex: 1; min-width: 0; }

/* ── DISCOUNT ── */
.gb-booking .disc-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.gb-booking .disc-toggle { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-secondary); cursor: pointer; background: none; border: none; font-family: 'Source Sans 3', sans-serif; padding: 0; }
.gb-booking .disc-toggle:hover { color: var(--green); }
.gb-booking .disc-body { display: none; margin-top: 10px; }
.gb-booking .disc-row { display: flex; gap: 8px; }
.gb-booking .disc-input { flex: 1; padding: 9px 13px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 17px; font-family: 'Source Sans 3', sans-serif; background: var(--white); color: var(--text-primary); outline: none; letter-spacing: 0.05em; }
.gb-booking .disc-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(10, 181, 89, 0.12); }
.gb-booking .disc-btn { padding: 9px 16px; border-radius: var(--radius-sm); border: 2px solid var(--green); background: transparent; color: var(--green); font-size: 15px; font-weight: 700; font-family: 'Ubuntu', sans-serif; cursor: pointer; transition: all 0.15s; }
.gb-booking .disc-btn:hover { background: var(--green-light); }
.gb-booking .disc-msg { font-size: 14px; margin-top: 6px; min-height: 16px; font-family: 'Source Sans 3', sans-serif; }
.gb-booking .disc-msg.ok { color: var(--green); }
.gb-booking .disc-msg.err { color: #c0392b; }

/* ── INVOICE CARD ── */
.gb-booking .invoice-card { margin-top: 14px; border: 1.5px solid #c8e8d4; border-radius: var(--radius-sm); background: #f6fdf8; overflow: hidden; font-size: 14px; }
.gb-booking .inv-header { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #e8f5ee; border-bottom: 1px solid #c8e8d4; font-family: 'Ubuntu', sans-serif; font-size: 13px; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.06em; }
.gb-booking .inv-note { display: flex; align-items: flex-start; gap: 6px; padding: 8px 14px; background: #fff8e6; border-bottom: 1px solid #f0e0a0; font-size: 13px; color: #9a6b00; line-height: 1.4; }
.gb-booking .inv-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-bottom: 1px solid #dceee3; }
.gb-booking .inv-row:last-child { border-bottom: none; }
.gb-booking .inv-row.inv-disc { background: #f0faf5; }
.gb-booking .inv-row-left { flex: 1; }
.gb-booking .inv-row-label { font-weight: 600; color: var(--navy); font-family: 'Ubuntu', sans-serif; font-size: 14px; margin-bottom: 2px; }
.gb-booking .inv-row-note { font-size: 12px; color: var(--text-tertiary); }
.gb-booking .inv-row-amount { font-family: 'Ubuntu', sans-serif; font-size: 15px; font-weight: 700; color: var(--navy); text-align: right; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.gb-booking .inv-amount-stack { flex-direction: column; align-items: flex-end; gap: 2px; }
.gb-booking .inv-disc-pct { font-size: 13px; font-weight: 700; color: var(--green); font-family: 'Ubuntu', sans-serif; }
.gb-booking .inv-disc-badge { font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 10px; background: #c6f0d8; color: #088c45; }

/* ── PAYMENT ── */
.gb-booking .pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.gb-booking .pay-opt { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px 8px; cursor: pointer; text-align: center; transition: all 0.15s; background: var(--white); }
.gb-booking .pay-opt:hover { border-color: var(--green); background: var(--green-light); }
.gb-booking .pay-opt.sel { border-color: var(--green); background: var(--green-light); }
.gb-booking .pay-logo { width: 48px; height: 28px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; }
.gb-booking .pay-name { font-size: 14px; font-weight: 700; font-family: 'Ubuntu', sans-serif; color: var(--text-primary); }
.gb-booking .pay-opt.sel .pay-name { color: var(--green-dark); }

/* ── BUTTONS ── */
.gb-booking .btn-row { display: flex; gap: 10px; margin-top: 24px; }
.gb-booking .btn { padding: 11px 24px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 700; font-family: 'Ubuntu', sans-serif; cursor: pointer; border: 2px solid var(--border); background: var(--white); color: var(--text-secondary); transition: all 0.15s; }
.gb-booking .btn:hover { background: var(--gray-bg); border-color: var(--text-tertiary); }
.gb-booking .btn.primary { background: var(--green); color: #fff; border-color: var(--green); flex: 1; }
.gb-booking .btn.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.gb-booking .btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── OPTIONS ── */
.gb-booking .opts-section { margin-bottom: 18px; }
.gb-booking .opts-section-title { font-family: 'Ubuntu', sans-serif; font-size: 14px; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.gb-booking .opts-soon-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; background: var(--gray-bg); color: var(--text-tertiary); border: 1px solid var(--border); text-transform: none; letter-spacing: 0; }
.gb-booking .opts-extras-placeholder { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 8px; }
.gb-booking .opts-extra-preview { border: 1.5px dashed var(--border); border-radius: 10px; padding: 14px 8px; text-align: center; opacity: 0.5; }
.gb-booking .opts-extra-icon { font-size: 20px; margin-bottom: 5px; }
.gb-booking .opts-extra-label { font-size: 13px; font-weight: 600; font-family: 'Ubuntu', sans-serif; color: var(--text-secondary); }

/* ── SUCCESS ── */
.gb-booking .success-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px 20px; }
.gb-booking .success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--green-light); display: flex; align-items: center; justify-content: center; }
.gb-booking .success-title { font-family: 'Ubuntu', sans-serif; font-size: 22px; font-weight: 700; color: var(--navy); }
.gb-booking .success-sub { font-size: 15px; color: var(--text-secondary); line-height: 1.6; max-width: 400px; }
.gb-booking .success-ref { background: var(--gray-bg); border-radius: var(--radius-sm); padding: 10px 20px; font-family: 'Ubuntu', sans-serif; font-size: 15px; color: var(--text-secondary); }
.gb-booking .success-ref strong { color: var(--navy); }

/* ── RESPONSIVE ── */
@media (max-width: 880px) {
	.gb-booking .tstep span { display: none; }
	.gb-booking .tstep { gap: 0; padding: 0 4px; }
	.gb-booking .tstep-sep { width: 16px; }

	/* Stap 3a: box-selectie cards → 2-rijen grid */
	.gb-booking #panel-3a .floor-card {
		display: grid;
		grid-template-columns: 22px 56px 1fr auto;
		grid-template-rows: auto auto;
		column-gap: 10px;
		row-gap: 10px;
		align-items: center;
		padding: 12px 14px;
	}
	.gb-booking #panel-3a .floor-radio    { grid-column: 1; grid-row: 1; align-self: center; }
	.gb-booking #panel-3a .floor-card-img { grid-column: 2; grid-row: 1; }
	.gb-booking #panel-3a .floor-card-body  { grid-column: 1 / 4; grid-row: 2; min-width: 0; flex: unset; }
	.gb-booking #panel-3a .floor-card-price { grid-column: 4; grid-row: 2; margin-left: 0; text-align: right; align-self: center; font-size: 16px; padding-left: 0; }
	.gb-booking #panel-3a .floor-card-title { font-size: 14px; white-space: normal; overflow: visible; text-overflow: unset; }
}

@media (max-width: 720px) {
	.gb-booking .main {
		grid-template-columns: 1fr;
		padding: 12px 12px 80px;
		gap: 16px;
		align-content: start;
	}

	.gb-booking .summary-area {
		position: static !important;
		top: auto !important;
		order: 2;
		gap: 10px;
	}

	.gb-booking .form-area { order: 1; }

	.gb-booking .topbar {
		padding: 0 12px;
		height: 52px;
		flex-direction: row;
		justify-content: space-between;
		overflow: hidden;
	}

	.gb-booking .topbar-steps { display: none; }
	.gb-booking .topbar-spacer { display: none; }
	.gb-booking .mob-stap { display: none !important; }
	.gb-booking .topbar a img { height: 22px !important; }
	.gb-booking .topbar-logo-text { font-size: 14px; }
	.gb-booking .topbar-logo-sub { font-size: 9px; }

	.gb-booking .form-body { padding: 14px 14px 18px; }
	.gb-booking .form-header { padding: 14px 14px 0; border-bottom: none !important; }
	.gb-booking .form-header-title { font-size: 17px; }
	.gb-booking .form-header-sub { border-bottom: none !important; padding-bottom: 0 !important; }

	.gb-booking .section-title { border-bottom: none !important; padding-bottom: 0 !important; }

	.gb-booking .loc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.gb-booking .box-grid { grid-template-columns: 1fr; }

	.gb-booking .form-grid { grid-template-columns: 1fr; }

	.gb-booking .summary-nav-wrap { display: none !important; }
	.gb-booking .mob-nav-bar { display: flex !important; }

	.gb-booking .cal-nav { background: #fff !important; border: 1.5px solid #ccc !important; color: #444 !important; }
}