/* Nigar Booking — visual clone of the previous Bookly form. */
.nb-form {
	--nb-color: #f4662f;
	--nb-text: #626262;
	--nb-border: #c0c0c0;
	--nb-bar: #bec3c7;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	color: var(--nb-text);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	text-align: left;
}
.nb-form *, .nb-form *::before, .nb-form *::after { box-sizing: border-box; }

/* Progress tracker */
.nb-progress { display: flex; gap: 3px; margin: 0 0 22px; }
.nb-progress-step { flex: 1 1 0; min-width: 0; }
.nb-progress-label {
	font-size: 14px; font-weight: 700; color: #555;
	margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nb-progress-bar { height: 12px; background: var(--nb-bar); }
.nb-progress-step:first-child .nb-progress-bar { border-radius: 6px 0 0 6px; }
.nb-progress-step:last-child .nb-progress-bar { border-radius: 0 6px 6px 0; }
.nb-progress-step.nb-active .nb-progress-label { color: var(--nb-color); }
.nb-progress-step.nb-active .nb-progress-bar { background: var(--nb-color); }

/* Info text */
.nb-info { margin: 0 0 20px; white-space: pre-line; }
.nb-info b { font-weight: 600; color: #444; }
.nb-info-strong { font-weight: 700; color: #555; }
.nb-done { font-size: 15px; }

/* Fields */
.nb-row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.nb-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-field { min-width: 0; }
.nb-label { display: block; font-size: 14px; font-weight: 700; color: var(--nb-color); margin: 0 0 4px; line-height: 26px; }
.nb-form .nb-select,
.nb-form .nb-input {
	display: block; width: 100%; height: 34px; margin: 0;
	padding: 6px 7px 5px; border: 1px solid var(--nb-border); border-radius: 4px;
	background: #fff; color: var(--nb-text); font: inherit; font-size: 14px; font-weight: 300;
	box-shadow: none; outline: none;
}
.nb-form .nb-select {
	-webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23444' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 8px center;
}
.nb-form .nb-select:focus,
.nb-form .nb-input:focus { border-color: var(--nb-color); }
.nb-form .nb-textarea { height: 70px; resize: vertical; }
.nb-form .iti { display: block; width: 100%; }
.nb-error { color: #e00; font-size: 12px; font-weight: 400; min-height: 0; margin-top: 3px; }
.nb-error:empty { display: none; }
.nb-error-box { margin: 0 0 12px; font-size: 14px; }

/* Honeypot */
.nb-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Time slots: columns of ten, filled top-to-bottom */
.nb-slots {
	display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, 34px);
	grid-auto-columns: 116px; gap: 3px 9px; justify-content: center;
	min-height: 120px; margin: 0 0 10px; transition: opacity .2s;
}
.nb-slots.nb-loading { opacity: .4; pointer-events: none; }
.nb-slots > .nb-info { grid-row: 1 / span 2; grid-column: 1 / -1; }
.nb-day {
	display: flex; align-items: center; justify-content: center;
	background: var(--nb-color); color: #fff; border-radius: 4px;
	font-size: 12px; font-weight: 700; white-space: nowrap;
}
.nb-form .nb-slot {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 100%; height: 34px; margin: 0; padding: 0 6px 0 22px;
	border: 1px solid #d0d0d0; border-radius: 4px; background: #fff;
	color: var(--nb-text); font: inherit; font-size: 13px; font-weight: 400; line-height: 1;
	cursor: pointer; box-shadow: none; text-transform: none;
}
.nb-form .nb-slot:hover { border-color: var(--nb-color); }
.nb-radio {
	position: absolute; left: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
	border: 1px solid #c8c8c8; border-radius: 50%; background: #fff;
}
.nb-slot.nb-selected .nb-radio::after,
.nb-slot:active .nb-radio::after {
	content: ''; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--nb-color);
}

/* Navigation */
.nb-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	border-top: 1px solid #ccc; margin-top: 20px; padding-top: 16px;
}
.nb-nav-right { display: flex; gap: 8px; }
.nb-form .nb-btn {
	display: inline-block; min-width: 96px; height: 35px; margin: 0; padding: 9px 18px;
	border: 0; border-radius: 4px; background: var(--nb-color); color: #fff;
	font: inherit; font-size: 18px; font-weight: 700; line-height: 17px;
	text-transform: uppercase; letter-spacing: 0; cursor: pointer; box-shadow: none;
}
.nb-form .nb-btn:hover,
.nb-form .nb-btn:focus,
.nb-form .nb-btn:active { background: var(--nb-color) !important; color: #fff !important; filter: brightness(.95); box-shadow: none; }
.nb-form .nb-slot:focus, .nb-form .nb-slot:active { background: #fff !important; color: var(--nb-text) !important; }
.nb-form .nb-btn:disabled { opacity: .6; cursor: default; }
.nb-form .nb-arrow { min-width: 50px; padding: 9px 14px; }
.nb-form .nb-btn.nb-busy { position: relative; color: transparent; }
.nb-form .nb-btn.nb-busy::after {
	content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
	border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: nb-spin .7s linear infinite;
}
@keyframes nb-spin { to { transform: rotate(360deg); } }

@media (max-width: 650px) {
	.nb-row-3 { grid-template-columns: 1fr; }
	.nb-progress-label { font-size: 11px; }
	.nb-form .nb-btn { font-size: 15px; min-width: 80px; }
}
