/* Custom Variables & Root Colors */
:root {
    --vh-blue: #0072bc;
    --vh-green: #4db748;
    --vh-orange: #f7941d;
    --vh-dark: #1a202c;
}

/* Custom Utility Classes */
.bg-vh-blue { background-color: var(--vh-blue); }
.text-vh-blue { color: var(--vh-blue); }
.bg-vh-green { background-color: var(--vh-green); }
.bg-vh-orange { background-color: var(--vh-orange); }
.border-vh-orange { border-color: var(--vh-orange); }

.hero-gradient {
    background: linear-gradient(135deg, #1a202c 0%, #004a7a 100%);
}

.booking-container {
    max-width:1100px;
    margin:auto;
}
.menu-container {
    max-width:1200px;
    margin:auto;
}
.nav-link:hover {
    color: var(--vh-orange);
    transition: 0.3s;
}

/* Auth Pages Styling (Login/Register) */
.auth-container {
    max-width: 450px;
    margin: 3rem auto;
    padding: 2rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
}

.form-input:focus {
    outline: none;
    border-color: var(--vh-blue);
    ring: 2px;
    ring-color: var(--vh-blue);
}

/* Contact Page Specific Styles */
.contact-card {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.contact-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--vh-blue);
    color: white;
    margin-right: 1rem;
}

.form-label-required::after {
    content: " *";
    color: var(--vh-orange);
}

/* Custom Service Dropdown Styling */
.select-service {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072bc' 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 1rem center;
    background-size: 1em;
    padding-right: 2.5rem;
    transition: all 0.2s ease-in-out;
}

.select-service:focus {
    border-color: var(--vh-blue);
    box-shadow: 0 0 0 3px rgba(0, 114, 188, 0.15);
    outline: none;
}

.select-service option {
    color: var(--vh-dark);
    padding: 10px;
}