@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

@layer components {

	/* Field validation */
	.field-box {
		@apply border border-transparent;
	}

	.field-group.has-error .field-box {
		@apply border-error;
	}

	.field-group.has-error [id^="error-"] {
		@apply flex;
	}

	.field-group:not(.has-error) [id^="error-"] {
		@apply hidden;
	}

	/* Step indicators */
	.step-item {
		@apply flex flex-col items-center flex-1 pb-2 text-center transition-all duration-200 border-b-2 border-transparent;
	}

	.step-item.active {
		@apply border-accent;
	}

	.step-item.active .step-indicator {
		@apply text-white bg-accent;
	}

	.step-item.completed .step-indicator {
		@apply text-white bg-success border-success;
		font-size: 0;
	}

	.step-item.completed .step-indicator::after {
		content: '';
		display: block;
		width: 12px;
		height: 10px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M11.9238 0.686375C11.8735 0.551513 11.7997 0.428992 11.7067 0.325817C11.6139 0.222528 11.5036 0.140589 11.3822 0.0846823C11.2608 0.028776 11.1307 0 10.9993 0C10.8679 0 10.7378 0.028776 10.6164 0.0846823C10.4951 0.140589 10.3848 0.222528 10.2919 0.325817L4.00011 7.31766L1.70787 4.76948C1.52025 4.56103 1.26578 4.4439 1.00044 4.4439C0.735109 4.4439 0.480642 4.56103 0.293023 4.76948C0.105403 4.97793 0 5.26066 0 5.55547C0 5.85025 0.105403 6.13299 0.293023 6.34143L3.29268 9.67418C3.38554 9.77747 3.49583 9.85941 3.61721 9.91532C3.7386 9.97123 3.86871 10 4.00011 10C4.13152 10 4.26162 9.97123 4.38301 9.91532C4.5044 9.85941 4.61468 9.77747 4.70753 9.67418L11.7067 1.89777C11.7997 1.79459 11.8735 1.67207 11.9238 1.53721C11.9741 1.40234 12 1.25778 12 1.11179C12 0.965799 11.9741 0.821238 11.9238 0.686375Z' fill='white'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	.step-indicator {
		@apply flex items-center justify-center text-base font-bold transition-all duration-200 border-2 rounded-full w-7 h-7 border-accent text-accent;
	}

	/* Section title */
	.section-title {
		@apply flex items-center gap-2 mb-3 text-base font-bold lg:text-lg;
	}

	.section-title__icon {
		@apply flex-shrink-0 text-dark dark:text-slate-100;
	}

	/* Tooltip */
	.tooltip {
		@apply relative inline-flex;
	}

	.tooltip__trigger {
		@apply flex items-center justify-center w-5 h-5 transition-colors duration-200 rounded-full text-brand focus:outline-none focus:text-brand;
	}

	.tooltip__content {
		@apply fixed z-50 px-3 py-2 text-sm font-normal transition-opacity duration-200 bg-white border rounded-lg shadow-lg opacity-0 pointer-events-none border-light dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100;
		max-width: min(240px, calc(100vw - 2rem));
		width: max-content;
	}

	.tooltip.is-active .tooltip__content {
		@apply opacity-100 pointer-events-auto;
	}

	.tooltip__content::after {
		content: '';
		@apply absolute w-2 h-2 bg-white border-b border-r border-light dark:bg-slate-700 dark:border-slate-600;
		bottom: -4px;
		left: var(--arrow-left, 1rem);
		transform: translateX(-50%) rotate(45deg);
	}

	/* Screen reader only */
	.sr-only {
		@apply absolute w-px h-px p-0 -m-px overflow-hidden border-0;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	/* Stepper (quantity) */
	.stepper {
		@apply flex items-center gap-1;
	}

	.stepper-btn {
		@apply flex items-center justify-center w-8 h-8 text-xl font-bold transition-all duration-200 bg-white rounded text-dark focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed dark:bg-slate-600 dark:text-slate-100;
	}

	.stepper-btn:hover:not(:disabled) {
		@apply text-accent;
	}

	.stepper-value {
		@apply w-8 text-base font-bold text-center tabular-nums dark:text-slate-100;
	}

	/* Child age selector */
	.child-age-selector {
		@apply flex items-center justify-between px-4 py-3 rounded-lg bg-light dark:bg-slate-700;
	}

	.child-age-selector__label {
		@apply text-sm font-medium text-dark dark:text-slate-100;
	}

	.child-age-select {
		@apply px-3 py-2 pr-8 text-sm font-medium transition-all duration-200 bg-white bg-no-repeat border rounded-lg appearance-none cursor-pointer border-border text-dark hover:border-brand focus:outline-none focus:ring-2 focus:ring-brand focus:border-transparent dark:bg-slate-600 dark:border-slate-500 dark:text-slate-100;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23001C3D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-position: right 0.75rem center;
		background-size: 12px;
	}

	@media (prefers-color-scheme: dark) {
		.child-age-select {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23f1f5f9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		}
	}

	/* Step navigation */
	.step-nav {
		@apply grid items-center grid-cols-3 mt-8;
	}

	.step-nav__btn {
		@apply flex items-center justify-center h-10 gap-2 px-5 text-xs font-bold text-center transition-all duration-200 rounded-full focus:outline-none;
	}

	.step-nav__btn--back {
		@apply bg-transparent border justify-self-start text-brand border-brand hover:bg-brand hover:text-white disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-brand dark:text-blue-400 dark:border-blue-400 dark:hover:bg-blue-400 dark:disabled:hover:text-blue-400;
	}

	.step-nav__indicator {
		@apply text-xs text-gray-500 lg:text-sm justify-self-center dark:text-slate-400;
	}

	.step-nav__btn--next {
		@apply text-white border justify-self-end border-accent bg-accent hover:brightness-110;
	}

	/* Radio card */
	.radio-card {
		@apply flex items-center gap-2 py-2 transition-all duration-200 cursor-pointer;
		width: fit-content;
	}

	.radio-card__input {
		@apply sr-only;
	}

	.radio-card__indicator {
		@apply relative flex-shrink-0 w-5 h-5 transition-all duration-200 border-2 rounded-full border-dark/50 dark:border-slate-400;
	}

	.radio-card__input:checked+.radio-card__indicator {
		@apply border-accent bg-accent;
	}

	.radio-card__input:checked+.radio-card__indicator::after {
		content: '';
		@apply absolute inset-0 m-auto;
		width: 8px;
		height: 6px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M7.94919 0.411825C7.91564 0.330908 7.86648 0.257395 7.8045 0.19549C7.74259 0.133517 7.66907 0.0843531 7.58815 0.0508094C7.50723 0.0172657 7.42049 0 7.33288 0C7.24528 0 7.15854 0.0172657 7.07762 0.0508094C6.9967 0.0843531 6.92318 0.133517 6.86127 0.19549L2.66674 4.39059L1.13858 2.86169C1.0135 2.73662 0.843852 2.66636 0.666963 2.66636C0.490073 2.66636 0.320428 2.73662 0.195348 2.86169C0.0702685 2.98676 0 3.1564 0 3.33328C0 3.51015 0.0702685 3.67979 0.195348 3.80486L2.19512 5.80451C2.25703 5.86648 2.33055 5.91565 2.41147 5.94919C2.4924 5.98274 2.57914 6 2.66674 6C2.75434 6 2.84108 5.98274 2.922 5.94919C3.00293 5.91565 3.07645 5.86648 3.13835 5.80451L7.8045 1.13866C7.86648 1.07675 7.91564 1.00324 7.94919 0.922324C7.98274 0.841406 8 0.754669 8 0.667074C8 0.579479 7.98274 0.492743 7.94919 0.411825Z' fill='white'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	.radio-card__label {
		@apply text-sm font-bold transition-colors duration-200 text-dark dark:text-slate-400;
	}

	/* Checkbox card */
	.checkbox-card {
		@apply flex items-center gap-2 py-1 transition-all duration-200 cursor-pointer;
		width: fit-content;
	}

	.checkbox-card__input {
		@apply sr-only;
	}

	.checkbox-card__indicator {
		@apply relative flex-shrink-0 w-5 h-5 transition-all duration-200 border-2 rounded border-dark dark:border-slate-100;
	}

	.checkbox-card__input:checked+.checkbox-card__indicator {
		@apply border-accent bg-accent;
	}

	.checkbox-card__input:checked+.checkbox-card__indicator::after {
		content: '';
		@apply absolute inset-0 m-auto;
		width: 8px;
		height: 6px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M7.94919 0.411825C7.91564 0.330908 7.86648 0.257395 7.8045 0.19549C7.74259 0.133517 7.66907 0.0843531 7.58815 0.0508094C7.50723 0.0172657 7.42049 0 7.33288 0C7.24528 0 7.15854 0.0172657 7.07762 0.0508094C6.9967 0.0843531 6.92318 0.133517 6.86127 0.19549L2.66674 4.39059L1.13858 2.86169C1.0135 2.73662 0.843852 2.66636 0.666963 2.66636C0.490073 2.66636 0.320428 2.73662 0.195348 2.86169C0.0702685 2.98676 0 3.1564 0 3.33328C0 3.51015 0.0702685 3.67979 0.195348 3.80486L2.19512 5.80451C2.25703 5.86648 2.33055 5.91565 2.41147 5.94919C2.4924 5.98274 2.57914 6 2.66674 6C2.75434 6 2.84108 5.98274 2.922 5.94919C3.00293 5.91565 3.07645 5.86648 3.13835 5.80451L7.8045 1.13866C7.86648 1.07675 7.91564 1.00324 7.94919 0.922324C7.98274 0.841406 8 0.754669 8 0.667074C8 0.579479 7.98274 0.492743 7.94919 0.411825Z' fill='white'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
	}

	.checkbox-card__label {
		@apply text-sm font-bold transition-colors duration-200 text-dark dark:text-slate-100;
	}

	.checkbox-card__label a {
		@apply text-brand hover:underline;
	}

	.checkbox-card__input:checked~.checkbox-card__label {
		@apply text-dark dark:text-slate-100;
	}

	/* Summary section */
	.summary-section {
		@apply mt-6;
	}

	.summary-section__header {
		@apply flex items-center gap-3 mb-4 text-dark dark:text-slate-100;
	}

	.summary-section__title {
		@apply text-lg font-bold;
	}

	.summary-card {
		@apply p-4 mb-3 rounded-lg bg-light dark:bg-slate-700;
	}

	.summary-card__badge {
		@apply block mb-2 text-sm font-bold text-dark dark:text-slate-100;
	}

	.summary-card__content {
		@apply grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-2;
	}

	.summary-card__item {
		@apply flex flex-col;
	}

	.summary-card__label {
		@apply text-sm text-dark dark:text-slate-100;
	}

	.summary-card__value {
		@apply text-sm font-bold text-dark dark:text-slate-100;
	}

	/* Accordion */
	.accordion-trigger {
		@apply flex items-center gap-2.5 w-full py-2 text-left;
	}

	.accordion-trigger__icon {
		@apply flex-shrink-0 text-dark dark:text-slate-100;
	}

	.accordion-trigger__text {
		@apply flex flex-wrap items-baseline gap-x-2 gap-y-0.5 flex-1;
	}

	.accordion-trigger__title {
		@apply text-base font-bold text-dark dark:text-slate-100 lg:text-lg;
	}

	.accordion-trigger__subtitle {
		@apply text-sm font-bold text-gray-400 dark:text-slate-400;
	}

	.accordion-trigger__chevron {
		@apply flex items-center justify-center flex-shrink-0 w-8 h-8 transition-transform duration-300 rounded-full text-dark dark:text-slate-100 bg-light dark:bg-slate-700;
	}

	.accordion-item.is-open .accordion-trigger__chevron {
		@apply rotate-180;
	}

	.accordion-content {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease-out;
	}

	.accordion-item.is-open .accordion-content {
		grid-template-rows: 1fr;
	}

	.accordion-item+.accordion-item {
		@apply pt-2 mt-5 border-t border-light dark:border-slate-600;
	}

	.accordion-content__inner {
		@apply overflow-hidden;
	}

	/* Bus map */
	.bus-map {
		--bus-cols: 13;
		--bus-rows: 5;
		@apply grid gap-2;
		grid-template-columns: repeat(var(--bus-cols), 40px);
	}

	@media (max-width: 1023px) {
		.bus-map {
			writing-mode: vertical-rl;
		}

		.bus-seat {
			writing-mode: horizontal-tb;
		}
	}

	@media (min-width: 1024px) {
		.bus-map {
			grid-template-columns: repeat(var(--bus-cols), 32px);
		}
	}

	@media (min-width: 1280px) {
		.bus-map {
			grid-template-columns: repeat(var(--bus-cols), 40px);
		}
	}

	.bus-seat--empty {
		@apply invisible w-10 h-10 lg:w-8 lg:h-8 xl:w-10 xl:h-10;
	}

	.bus-seat {
		@apply flex items-center justify-center w-10 h-10 text-xs font-bold transition-all duration-200 bg-white border-none rounded-md cursor-pointer lg:w-8 lg:h-8 xl:w-10 xl:h-10 shrink-0 text-dark dark:bg-slate-600 dark:text-slate-100;
	}

	.bus-seat:hover:not(:disabled) {
		@apply shadow-md bg-accent;
	}

	.bus-seat:focus {
		@apply outline-none ring-2 ring-brand ring-offset-2;
	}

	.bus-seat--occupied {
		@apply text-white cursor-not-allowed bg-brand;
	}

	.bus-seat--occupied:hover {
		@apply shadow-none bg-brand;
	}

	.bus-seat--selected {
		@apply text-white bg-accent;
	}

	.bus-seat--selected:hover {
		@apply bg-accent;
	}

	.bus-seat--unavailable {
		@apply text-white cursor-not-allowed bg-error;
	}

	.bus-seat--unavailable:hover {
		@apply shadow-none bg-error;
	}

	/* Form fields */
	.form-group {
		@apply flex flex-col gap-1.5;
	}

	.form-label {
		@apply text-sm font-bold text-dark dark:text-slate-100;
	}

	.form-field {
		@apply w-full px-4 py-3 text-sm transition-all duration-200 border rounded-lg bg-light border-light text-dark placeholder-dark/40 hover:border-dark focus:border-dark dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 dark:placeholder-slate-400 dark:hover:border-slate-400 dark:focus:border-slate-400;
		outline: none;
	}

	.form-field--select {
		@apply bg-no-repeat appearance-none cursor-pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23001C3D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-position: right 1rem center;
		background-size: 12px;
		padding-right: 2.5rem;
	}

	@media (prefers-color-scheme: dark) {
		.form-field--select {
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23f1f5f9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		}
	}
}