/* Car card button colors - use rent-btn-{1-6} */
.rent-btn-1 { background-color: #E53935; }
.rent-btn-1:hover { background-color: #dc2626; }

.rent-btn-2 { background-color: #10b981; }
.rent-btn-2:hover { background-color: #059669; }

.rent-btn-3 { background-color: #3b82f6; }
.rent-btn-3:hover { background-color: #2563eb; }

.rent-btn-4 { background-color: #f59e0b; }
.rent-btn-4:hover { background-color: #d97706; }

.rent-btn-5 { background-color: #a855f7; }
.rent-btn-5:hover { background-color: #9333ea; }

.rent-btn-6 { background-color: #14b8a6; }
.rent-btn-6:hover { background-color: #0d9488; }

/* Car name background colors - light/pastel negatives of rent buttons */
.name-bg-1 { background-color: #fecaca; } /* light red/pink */
.name-bg-2 { background-color: #a7f3d0; } /* light green/mint */
.name-bg-3 { background-color: #bfdbfe; } /* light blue */
.name-bg-4 { background-color: #fde68a; } /* light amber/yellow */
.name-bg-5 { background-color: #e9d5ff; } /* light purple/lavender */
.name-bg-6 { background-color: #99f6e4; } /* light teal/cyan */

/* Phone split field styling */
.phone-split-field {
    display: flex;
    gap: 0.5rem;
}

.phone-split-field select,
.phone-split-field .country-code-select {
    width: 4rem;
    flex-shrink: 0;
    padding: 0.5rem 0.25rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: white;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.phone-split-field input[type="tel"] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.phone-split-field select:focus,
.phone-split-field input[type="tel"]:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
}