/**
 * Ride Booking Form - Plugin Styles
 */

.ride-booking-form-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
}

#rbf-form-response {
    margin-top: 15px;
    margin-bottom: 15px;
}

#rbf-form-response .alert {
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
}

#rbf-form-response .alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

#rbf-form-response .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}


.btn-rbf-submit {
    width: 100%;
    background: #1b5e38;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    padding: 14px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 6px 22px rgba(27,94,56,.28);
}

.btn-rbf-submit:hover {
    background: #155030;
    transform: translateY(-1px);
}

.btn-rbf-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Custom Select Arrow */
.ride-booking-form-wrapper select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b5e38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px !important;
}

/* Textarea icon adjustment */
.ride-booking-form-wrapper .cf-field textarea + i {
    top: 15px;
    transform: none;
}

.ride-booking-form-wrapper textarea {
    padding-left: 38px !important;
}

/* Ensure responsive columns on smaller screens if custom shortcode is used outside Bootstrap grid */
@media (max-width: 575px) {
    .ride-booking-form-wrapper .col-sm-6,
    .ride-booking-form-wrapper .col-sm-3 {
        width: 100% !important;
    }
}