/* ==================================================
TBP BOOKING WIDGET – VERTICAL FORM CSS
================================================== */

#tbp-booking-widget {
	max-width: 600px !important;
	margin: 0 auto !important;
	background: #ffffff !important;
	padding: 24px !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 40px rgba(0,0,0,0.1) !important;
	font-family: inherit !important;
}

/* ===============================
STEPPER (VERTICAL)
================================ */
.chbs-stepper {
	display: none;
	/*     flex-direction: column !important; */
	gap: 10px !important;
	margin-bottom: 24px !important;
}

.chbs-stepper__tab {
	width: 100% !important;
	padding: 14px !important;
	background: #C70200 !important;
	border: none !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.chbs-stepper__tab:hover{
	background: #C70200 !important;
	color: #fff !important;
}

.chbs-stepper__tab.chbs-state-active {
	background: #243688 !important;
	color: #ffffff !important;
}

/* ===============================
STEPS
================================ */
.tbp-step {
	animation: tbpFade 0.3s ease !important;
}

.tbp-hidden {
	display: none !important;
}

@keyframes tbpFade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ===============================
FORM LAYOUT (VERTICAL)
================================ */
.chbs-simple-booking__grid,
.tbp-step3-form {
	display: flex;
	flex-direction: column;
	gap: 16px !important;
	margin-bottom: 20px !important;
}

/* ===============================
LABELS & INPUTS
================================ */
label {
	display: flex;
	flex-direction: column;
	gap: 6px !important;
}

label span{
	font-weight: 600 !important;
}

input:not(#tbp-phone),
select,
textarea {
	width: 100% !important;
	padding: 12px 14px !important;
	border-radius: 10px !important;
	border: 1px solid #d1d5db !important;
	background: #ffffff !important;
	font-size: 14px !important;
}

#tbp-phone{
	border-radius: 10px !important;
	border: 1px solid #d1d5db !important;
	background: #ffffff !important;
	font-size: 14px !important;
}

.iti{
	width: 100% !important;
	margin-top: 10px !important;
}

input:focus,
select:focus,
textarea:focus {
	outline: none !important;
	border-color: #C70200 !important;
	box-shadow: 0 0 0 2px rgba(199, 2, 0, 0.2) !important;
}

/* ===============================
TOUR TYPE (VERTICAL)
================================ */

/* .tbp-tour-type {
    margin-bottom: 24px;
    font-family: system-ui, -apple-system, sans-serif;
} */

/* .tbp-tour-type > span {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}
 */
/* Container */
/* .tbp-tour-type__options {
    display: flex;
    background: #f3f4f6;
    border-radius: 10px;
    padding: 4px;
    border: 1px solid #e5e7eb;
} */

/* Hide radios */
/* .tbp-tour-type__options input {
    display: none;
}
 */
/* Button */
/* .tbp-tour-card {
    flex: 1;
} */

/* .tbp-tour-card__label {
    display: block;
    text-align: center;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    transition: all 0.2s ease;
} */

/* Hover */
/* .tbp-tour-card__label:hover {
    color: #111827;
} */

/* Active */
/* .tbp-tour-card input:checked + .tbp-tour-card__label {
    background: #ffffff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
} */


/* Container */
.tbp-tour-type__options {
    display: flex;
    gap: 4px;
}

/* Hide radios */
.tbp-tour-type__options input {
    display: none;
}

/* Base (idle state) */
.tbp-tour-card {
    flex: 1;
}

.tbp-tour-card__label {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: #C70200 !important; /* idle */
    color: #ffffff;
    transition: all 0.2s ease;
}

/* Hover (optional subtle lift) */
.tbp-tour-card__label:hover {
    filter: brightness(1.1);
}

/* Active (checked) */
.tbp-tour-card input:checked + .tbp-tour-card__label {
    background: #243688 !important; /* active */
    color: #ffffff;
}



/* ===============================
LOCATION PAIRS
================================ */
.tbp-location-pairs {
	margin: 20px 0 !important;
}

.tbp-pair-row__title{
	font-size: 18px !important;
	font-weight: 500 !important;
}

.tbp-pair-row, .datetime-group, .tbp-extra-field, .label-tbp-passengers, .datetime-group, .summary-row, .tbp-step3-form{
	display: flex;
	flex-direction: column;
}

.tbp-pair-row label, .datetime-group label, .tbp-extra-field label, .label-tbp-passengers label, .datetime-group label, .summary-row label, .tbp-step3-form label{
	padding: 10px 0;
}

.tbp-pair-row label select, .tbp-extra-field label select, .datetime-group label select, .summary-row label select, .tbp-step3-form label input, .tbp-step3-form label select, input.datetime-group{
	margin-top: 10px;
}

.tbp-datetime-container {
    margin-top: 12px;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #f9fafb;
}

.location-add-btn, .tbp-pair-row__remove {
	width: 100% !important;
	background: #10b981 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	margin-bottom: 5px;
}

.tbp-pair-row__remove{
	background: #C70200 !important;
}

/* Passenger stepper */
/*
.tbp-stepper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3f4f6;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    width: 100%;
}

.tbp-stepper__btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.tbp-stepper__btn:focus {
    outline: 2px solid #c70200;
}

.tbp-stepper__btn:hover {
    background: #fdf2f2;
}

.tbp-stepper input {
    width: 100%;
    max-width: 90px;
    text-align: center;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 10px !important;
    font-weight: 600;
}
*/


.tbp-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: #f3f4f6 !important;
    padding: 6px;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb;
}



/* Buttons */
.tbp-stepper__btn {
    width: 40px;
    height: 40px;
    border-radius: 10px !important;
    border: none !important;
    background: #C70200 !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.tbp-stepper__btn:hover {
    background: #b00100 !important;
}

.tbp-stepper__btn:active {
    transform: scale(0.95);
}

.tbp-stepper__btn:focus-visible {
    outline: 2px solid #243688 !important;
    outline-offset: 2px !important;
}

/* Input */
.tbp-stepper input {
    flex: 1;
    height: 40px;
    text-align: center;
    font-size: 16px;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #111827 !important;
    appearance: textfield;
}

/* Remove number arrows */
.tbp-stepper input::-webkit-outer-spin-button,
.tbp-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}







/* Phone field */
.tbp-phone-input-group {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    align-items: center;
}

.tbp-phone-input-group select {
    padding: 12px !important;
}

@media (max-width: 540px) {
    .tbp-phone-input-group {
        grid-template-columns: 1fr;
    }
}
/* ===============================
VEHICLE LIST (VERTICAL)
================================ */
.chbs-vehicle-preview {
	display: flex;
	/*     flex-direction: column !important; */
	gap: 16px !important;
	margin-top: 24px !important;
}

.vehicle-item {
	position: relative !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 14px !important;
	padding: 18px !important;
	width: 100% !important;
	background: #f9fafb !important;
	cursor: pointer !important;
	transition: all 0.25s ease !important;
}

.vehicle-item:hover {
	border-color: #C70200 !important;
}

/* SELECTED VEHICLE */
.vehicle-item.selected {
	border: 2px solid #C70200 !important;
	background: #eff6ff !important;
	box-shadow: 0 10px 25px rgba(199, 2, 0, 0.3) !important;
}

.vehicle-item.selected::after {
	content: "✓ Selected" !important;
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	background: #C70200 !important;
	color: #ffffff !important;
	font-size: 12px !important;
	padding: 4px 10px !important;
	border-radius: 20px !important;
	font-weight: 600 !important;
}

/* ===============================
SUMMARY & PRICE
================================ */
.summary-box {
	background: #f8fafc !important;
	border-radius: 14px !important;
	padding: 16px !important;
	margin-top: 20px !important;
}

.summary-row {
	display: flex;
	flex-direction: column;
	gap: 6px !important;
	margin-bottom: 14px !important;
}

label.confirm-check {
	display: flex;
	align-items: center;
	flex-direction: row !important;
	gap: 8px;
	cursor: pointer;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 400;
	color: #374151;
	line-height: 1.5;
	user-select: none;
}

.confirm-check input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px !important;
	height: 16px;
	cursor: pointer;
}

.vehicle-price-box {
	margin-top: 20px !important;
	padding: 18px !important;
	background: #C70200 !important;
	color: #ffffff !important;
	border-radius: 14px !important;
	/*     text-align: center !important; */
}

.price-value {
	font-size: 24px !important;
	font-weight: 700 !important;
}

/* ===============================
BUTTONS (VERTICAL)
================================ */
.chbs-stepper__actions {
	display: flex;
	/*     flex-direction: column !important; */
	gap: 12px !important;
	margin-top: 30px !important;
}

.chbs-btn {
	width: 100% !important;
	padding: 14px !important;
	border-radius: 12px !important;
	border: none !important;
	font-weight: 600 !important;
	cursor: pointer !important;
}

.chbs-btn-primary {
	background: #2563eb !important;
	color: #ffffff !important;
}

.chbs-btn-secondary {
	background: #e5e7eb !important;
	color: #111827 !important;
}

/* ===============================
MESSAGE
================================ */
#tbp-form-message {
	margin-bottom: 16px !important;
	padding: 14px !important;
	border-radius: 10px !important;
	background: #fee2e2 !important;
	color: #991b1b !important;
	display: none;
}

#tbp-form-message.is-success{
	background: #e2fee2 !important;
	border: 1px solid #7aff7a;
}

.customer-suport{
	display: flex;
	flex-direction: column;
	padding: 10px 0px;
}

.customer-suport div{
	width: 100%;
	font-size: 16px;
}

.customer-suport div span{
	font-weight: 600;
}


@media (max-width: 768px) {

    #tbp-booking-widget {
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 0 !important;
    }

    /* Stepper */
/*     .chbs-stepper {
        flex-direction: column !important;
    } */

    .chbs-stepper__tab {
        text-align: center !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* Vehicle list */
    .chbs-vehicle-preview {
        font-size: 12px;
    }

    .vehicle-item {
        padding: 14px !important;
    }

    .vehicle-item.selected::after {
        top: 8px !important;
        right: 8px !important;
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* Buttons */
/*     .chbs-stepper__actions {
        flex-direction: column !important;
    } */

    .chbs-btn {
        font-size: 15px !important;
    }

    /* Price box */
    .vehicle-price-box {
        padding: 14px !important;
        font-size: 15px !important;
    }

    .price-value {
        font-size: 20px !important;
    }
}


@media (max-width: 480px) {

    #tbp-booking-widget {
        padding: 14px !important;
    }

    label span,
    .tbp-tour-type span {
        font-size: 13px !important;
    }

    input,
    select,
    textarea {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* Tour type */
/*     .tbp-tour-type__options {
        flex-direction: column !important;
    } */

    .tbp-tour-type__options label {
        padding: 10px !important;
        font-size: 13px !important;
    }

    /* Location buttons */
    .location-add-btn,
    .tbp-pair-row__remove {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* Step titles */
    .tbp-pair-row__title {
        font-size: 16px !important;
    }

    /* Summary */
    .summary-box {
        padding: 14px !important;
    }

    /* Confirmation checkbox */
    label.confirm-check {
        font-size: 13px !important;
        gap: 6px !important;
    }

    /* Selected badge */
    .vehicle-item.selected::after {
        font-size: 10px !important;
    }
}

@media (max-width: 360px) {

    .chbs-stepper__tab {
        font-size: 13px !important;
        padding: 10px !important;
    }

    .chbs-btn {
        padding: 12px !important;
        font-size: 14px !important;
    }

    .price-value {
        font-size: 18px !important;
    }
}