/* Booking Form - PIXEL PERFECT from Figma */

:root {
    --color-primary: #9c4124;
    --color-bg-light: #e7e3da;
    --color-bg-darker: #dad0ba;
    --color-text-dark: #261c15;
    --color-text-light: #e7e3da;
    --color-total-bg: #261c15;
}

* {
    box-sizing: border-box;
}

.booking-form-wrapper {
    max-width: 764px;
    width: 100%;
    margin: 0 auto;
    font-family: 'NT Somic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.booking-form {
    background: #9c4124 !important;
    border-radius: 50px !important;
    padding: 38px 54.5px 42px 54.5px !important;
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    width: 100%;
    box-sizing: border-box !important;
}

/* Labels above date fields */
.booking-form .dates-labels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    margin-bottom: 12px;
}

.booking-form .date-label {
    font-size: 20px;
    font-weight: 400;
    color: #e7e3da;
    font-family: 'NT Somic', sans-serif;
    line-height: 26px;
}

/* Dates Row */
.booking-form .dates-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
    margin-bottom: 16px;
    justify-content: start;
}

.booking-form .date-field {
    background: #e7e3da !important;
    border-radius: 35.5px !important;
    height: 71px;
    width: 319px;
    padding: 20px 38px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    box-sizing: border-box !important;
}

.booking-form .date-field .field-input {
    border: none !important;
    background: transparent !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #261c15 !important;
    font-family: 'NT Somic', sans-serif !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    outline: none !important;
}

.booking-form .field-chevron {
    width: 16px;
    height: 7px;
    flex-shrink: 0;
}

/* Guests Field */
.booking-form .guests-field {
    background: #e7e3da !important;
    border-radius: 35.5px !important;
    height: 71px;
    padding: 0 !important;
    margin-bottom: 16px;
    width: 655px;
    box-sizing: border-box !important;
}

.booking-form .guests-trigger {
    width: 100%;
    height: 71px;
    background: transparent !important;
    border: none !important;
    padding: 20px 38px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'NT Somic', sans-serif;
}

.booking-form .guests-value {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #261c15 !important;
    font-family: 'NT Somic', sans-serif !important;
}

/* Guests Popup */
.booking-form .guests-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #e7e3da !important;
    border-radius: 35.5px !important;
    padding: 24px 38px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
}

.booking-form .guest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font-size: 20px;
    color: #261c15;
}

.booking-form .guest-row + .guest-row {
    border-top: 1px solid rgba(156, 65, 36, 0.2);
}

.booking-form .stepper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.booking-form .stepper-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #9c4124 !important;
    background: transparent !important;
    color: #9c4124 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0 !important;
}

.booking-form .stepper-btn:hover {
    background: #9c4124 !important;
    color: white !important;
}

.booking-form .stepper-value {
    min-width: 32px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #261c15;
}

.booking-form .guests-apply-btn {
    width: 100%;
    margin-top: 20px;
    padding: 16px !important;
    background: #9c4124 !important;
    color: white !important;
    border: none !important;
    border-radius: 35.5px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-family: 'NT Somic', sans-serif !important;
}

/* Price Fields */
.booking-form .price-field {
    background: #dad0ba !important;
    border-radius: 35.5px !important;
    height: 71px;
    padding: 20px 38px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    width: 655px;
    box-sizing: border-box !important;
}

.booking-form .price-label {
    font-size: 24px !important;
    font-weight: 400 !important;
    color: #e7e3da !important;
    font-family: 'NT Somic', sans-serif !important;
}

.booking-form .price-value {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #e7e3da !important;
    font-family: 'Unbounded', sans-serif !important;
    white-space: nowrap;
}

/* Promo & Bonus Field - EXACT 133px height */
.booking-form .promo-bonus-field {
    background: #e7e3da !important;
    border-radius: 29px !important;
    height: 133px;
    padding: 30px 33px !important;
    margin-bottom: 16px;
    width: 653px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box !important;
}

.booking-form .promo-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.booking-form .promo-input {
    border: none !important;
    background: transparent !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    color: #261c15 !important;
    font-family: 'NT Somic', sans-serif !important;
    padding: 0 !important;
    outline: none !important;
    flex: 1;
}

.booking-form .promo-input::placeholder {
    color: #261c15;
    opacity: 1;
}

.booking-form .bonus-divider {
    height: 1px;
    background: #261c15;
    opacity: 0.2;
    margin: 0;
}

.booking-form .bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.booking-form .bonus-text {
    font-size: 25px !important;
    font-weight: 400 !important;
    color: #261c15 !important;
    font-family: 'NT Somic', sans-serif !important;
}

.booking-form .bonus-amount {
    color: #9c4124 !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    font-family: 'Unbounded', sans-serif !important;
    margin-left: 8px;
}

.booking-form .bonus-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.booking-form .bonus-toggle input[type="checkbox"] {
    display: none;
}

.booking-form .toggle-slider {
    width: 60px;
    height: 28px;
    background: #9c4124 !important;
    border-radius: 60px;
    position: relative;
    transition: background 0.3s;
    box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}

.booking-form .toggle-slider::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e7e3da !important;
    top: 2px;
    left: 2px;
    transition: transform 0.3s;
}

.booking-form .bonus-toggle input:checked + .toggle-slider::after {
    transform: translateX(32px);
}

.booking-form .toggle-label {
    font-size: 24px;
    font-weight: 400;
    color: #261c15;
    font-family: 'NT Somic', sans-serif;
}

/* Total Field */
.booking-form .total-field {
    background: #261c15 !important;
    border-radius: 35.5px !important;
    height: 71px;
    padding: 20px 33px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    width: 655px;
    box-sizing: border-box !important;
}

.booking-form .total-label {
    font-size: 24px !important;
    font-weight: 400 !important;
    font-family: 'NT Somic', sans-serif !important;
    color: #e7e3da !important;
}

.booking-form .total-price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-form .final-price {
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #e7e3da !important;
    font-family: 'Unbounded', sans-serif !important;
}

.booking-form .old-price {
    font-size: 16px !important;
    color: #e7e3da !important;
    text-decoration: line-through;
    font-family: 'NT Somic', sans-serif !important;
    opacity: 0.8;
}

/* Cashback */
.booking-form .cashback-info {
    text-align: center;
    color: #e7e3da !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    font-family: 'NT Somic', sans-serif !important;
}

.booking-form .info-btn {
    background: transparent !important;
    border: 2px solid #e7e3da !important;
    color: #e7e3da !important;
    cursor: pointer;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    justify-content: center;
    font-size: 19px;
    font-weight: 500;
    font-family: 'Unbounded', sans-serif;
}

/* Submit Button */
.booking-form .booking-submit {
    background: #e7e3da !important;
    color: #9c4124 !important;
    border: none !important;
    border-radius: 35.5px !important;
    padding: 20px 35px !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: transform 0.2s;
    font-family: 'NT Somic', sans-serif !important;
    height: 71px;
    width: 655px;
    text-transform: uppercase;
    letter-spacing: 0;
    box-sizing: border-box !important;
}

.booking-form .booking-submit:hover {
    transform: translateY(-2px);
}

.booking-form .submit-text {
    flex: 1;
    text-align: left;
}

.booking-form .submit-arrow {
    width: 57px;
    height: 57px;
    background: #9c4124 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.booking-form .submit-arrow svg {
    width: 24px;
    height: 24px;
    stroke: #e7e3da;
}

/* Responsive */
@media (max-width: 800px) {
    .booking-form-wrapper {
        width: 100%;
        max-width: 764px;
        padding: 0 20px;
    }
    
    .booking-form {
        width: 100%;
        padding: 32px 20px 36px !important;
    }
    
    .booking-form .dates-row,
    .booking-form .dates-labels {
        grid-template-columns: 1fr;
        width: 100%;
    }
    
    .booking-form .date-field,
    .booking-form .guests-field,
    .booking-form .price-field,
    .booking-form .promo-bonus-field,
    .booking-form .total-field,
    .booking-form .booking-submit {
        width: 100%;
    }
}