/* Extracted from resources/views/front/pages/contact_us.blade.php
 * Block #1. Verbatim except one Blade asset() call, which became the
 * equivalent relative path (../../img/taxi-pattern.svg) so the file can be
 * static CSS. Resolves to the same URL.
 */

:root {
            --taxi-primary: linear-gradient(135deg, #0570f2, #185dce, #1c4bab);
            --taxi-secondary: #0f172a;
            --accent-gold: #f59e0b;
        }
        body { font-family: 'Inter', sans-serif; }
        
        .taxi-hero {
            background: var(--taxi-primary);
            position: relative;
            overflow: hidden;
        }
        .taxi-hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('../../img/taxi-pattern.svg') repeat;
            opacity: 0.1;
        }
        
        .contact-card {
            background: rgba(255,255,255,0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(5,112,242,0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            float: left;
            width: 100%;
            text-align: center;
        }
        .contact-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; height: 4px;
            background: var(--taxi-primary);
        }
        .contact-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(5,112,242,0.2);
        }
        .contact-icon {
            background: var(--taxi-primary);
            width: 70px; height: 70px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 24px; color: white; margin: 0 auto 20px;
            box-shadow: 0 10px 20px rgba(5,112,242,0.3);
        }
        
        .form-control {
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 12px 16px;
            font-size: 16px;
            transition: all 0.3s;
            background: white;
        }
        .form-control:focus {
            border-color: #0570f2;
            box-shadow: 0 0 0 3px rgba(5,112,242,0.1);
        }
        .form-floating > label { color: #64748b; padding: 12px 16px; }
        
        .btn-taxi {
            background: var(--taxi-primary);
            border: none;
            border-radius: 12px;
            padding: 16px 32px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s;
        }
        .btn-taxi:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(5,112,242,0.4);
        }
        
        .map-placeholder {
            height: 400px;
            background: linear-gradient(45deg, #f1f5f9, #e2e8f0);
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            color: #64748b; font-size: 18px;
            position: relative;
        }
        
        @media (max-width: 768px) {
            .contact-card { margin-bottom: 20px; }
            .map-placeholder { height: 250px; }
        }