/* contact.css - Premium Porsche Dealer Experience (Light Theme) */

:root {
    --contact-bg: #ffffff;
    --contact-panel-bg: rgba(0, 0, 0, 0.03);
    --contact-panel-border: rgba(0, 0, 0, 0.15);
    /* Darker border for visibility */
    /* Subtle grey border */
    --contact-accent: #c92a2a;
    /* Signal Action Red */
    --contact-text-main: #1a202c;
    /* Authority Dark */
    --contact-text-muted: rgba(0, 0, 0, 0.7);
    /* Darker muted text */
    --tech-font: 'Space Mono', monospace;
    --glow-color: rgba(201, 42, 42, 0.3);
}

/* Page Setup */
body {
    background-color: var(--contact-bg);
    color: var(--contact-text-main);
}

/* Navbar override: Ensure it looks clean on light bg */
.navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.nav-links a,
.logo {
    color: var(--contact-text-main) !important;
}

.nav-separator {
    color: rgba(0, 0, 0, 0.2) !important;
}

/* Ambient Background (Light/Silver Vibe) */
.ambient-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    background: #ffffff;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Slightly sharper than dark mode */
    opacity: 0.6;
    animation: orbFloat 25s infinite ease-in-out;
}

.orb-1 {
    width: 800px;
    height: 800px;
    /* Subtle silver/platinum gradient */
    background: radial-gradient(circle, #f0f0f0 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 900px;
    height: 900px;
    /* Very subtle cool grey */
    background: radial-gradient(circle, #eef2f6 0%, transparent 70%);
    bottom: -200px;
    right: -200px;
    animation-delay: -12s;
}

.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark noise on light bg needs to be very faint */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.03;
    /* Extremely subtle texture */
    pointer-events: none;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 20px);
    }
}

/* Blueprint Overlay (Dark lines on light) */
.blueprint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    /* Structure is key in light mode */
    pointer-events: none;
}

/* IMPORTANT: Update SVG stroke colors in HTML or via CSS filter if possible.
   Since SVG strokes are inline styles in the HTML we modified, we can target them via CSS class if they have specific classes, 
   OR we use CSS to override the stroke color.
*/
.blueprint-line {
    stroke: rgba(0, 0, 0, 0.08) !important;
    /* Double opacity for visibility */
    /* Override inline style */
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dashOffset 4s ease-out forwards;
}

@keyframes dashOffset {
    to {
        stroke-dashoffset: 0;
    }
}

/* Main Layout */
.contact-page {
    padding-top: calc(var(--nav-height) + 4rem);
    padding-bottom: 4rem;
    min-height: 100vh;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: flex-start;
}

/* Section Header */
.section-header {
    margin-bottom: 3rem;
}

.tech-label {
    font-family: var(--tech-font);
    font-size: 0.75rem;
    color: var(--contact-accent);
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-weight: 700;
}

.page-title {
    font-size: 3.5rem;
    font-weight: 800;
    /* Bolder in light mode */
    line-height: 1.1;
    margin-bottom: 1rem;
    color: var(--contact-text-main);
    /* No glowing gradient text in light mode, just crisp dark */
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--contact-text-muted);
    font-weight: 400;
}

/* Form Styling - Precision Instruments */
.premium-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-group {
    position: relative;
}

.input-wrapper {
    position: relative;
    background: #ffffff;
    /* White bg for better contrast */
    /* Light grey fill */
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* Much sharper border */
    transition: all 0.3s ease;
}

.input-wrapper:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.premium-form input,
.premium-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    padding: 1.2rem 1.5rem;
    color: var(--contact-text-main);
    font-family: var(--font-ui);
    font-size: 1rem;
    outline: none;
    font-weight: 500;
}

.premium-form textarea {
    resize: vertical;
}

/* Redline Focus Bar */
.focus-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    /* Slightly thicker */
    width: 0%;
    background-color: var(--contact-accent);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.input-wrapper:focus-within .focus-bar {
    width: 100%;
}

.input-wrapper:focus-within {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.input-status {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    transition: background 0.3s;
}

.input-wrapper:focus-within .input-status {
    background: var(--contact-accent);
}


/* Engine Start Button */
.form-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-start;
}

/* Standard Premium Button */
/* Standard Premium Button - Forced Rectangular Shape */
.engine-start-btn {
    position: relative;
    width: auto !important;
    /* Override potential legacy widths */
    height: auto !important;
    padding: 1.2rem 3rem !important;
    border-radius: 4px !important;
    /* Force pill/rect shape */
    /* Dark premium background */
    background: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    outline: none;
    aspect-ratio: auto !important;
    /* Ensure it's not square */
}

.engine-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background: #000000;
    border-color: rgba(0, 0, 0, 0.3);
}

.engine-start-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.standard-btn .btn-text {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin: 0;
    z-index: 2;
    background: none;
    -webkit-text-fill-color: #ffffff;
    /* Reset gradient text */
    text-transform: uppercase;
    text-shadow: none;
}

/* Shine Effect */
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent);
    transform: skewX(-20deg);
    transition: left 0.5s;
    z-index: 1;
    pointer-events: none;
}

.engine-start-btn:hover .btn-shine {
    left: 200%;
    transition: left 0.7s ease-in-out;
}

/* Loading State (from JS) */
.engine-start-btn.revving {
    pointer-events: none;
    opacity: 0.8;
}

.engine-start-btn.revving .btn-text::after {
    content: '...';
    display: inline-block;
    animation: dots 1.5s infinite;
}

@keyframes dots {

    0%,
    20% {
        content: '.';
    }

    40% {
        content: '..';
    }

    60%,
    100% {
        content: '...';
    }
}

/* Hide unused circle elements */
.btn-sub,
.btn-ring,
.btn-glow {
    display: none;
}

.btn-glow {
    /* Removed large glow in light mode, replaced with subtle shadow play */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.engine-start-btn:hover .btn-glow {
    opacity: 0.2;
}

.engine-start-btn:hover {
    transform: translateY(-2px);
    background: #000;
    /* Pitch black on hover */
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Info Panel - The "Garage" */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    /* Milky glass */
    /* Milky glass */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.15);
    /* Darker panel border */
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    /* Thicker line */
    padding-bottom: 1rem;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--contact-text-main);
}

.status-indicator {
    font-family: var(--tech-font);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(74, 222, 128, 0.1);
    /* Light green bg */
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 4px;
    color: #166534;
    /* Dark green text */
    font-weight: 700;
}

.blink-dot {
    width: 6px;
    height: 6px;
    background-color: #166534;
    border-radius: 50%;
    animation: blink 2s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    gap: 2rem;
    margin-bottom: 3rem;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 2rem;
}

.item-label {
    display: block;
    font-family: var(--tech-font);
    font-size: 0.7rem;
    color: var(--contact-text-muted);
    margin-bottom: 0.8rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.item-value {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--contact-text-main);
    font-weight: 500;
}

.map-link,
.contact-link {
    color: var(--contact-text-main);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 0.5rem;
}

.map-link:hover,
.contact-link:hover {
    border-color: var(--contact-accent);
    color: var(--contact-accent);
}

.arrow-icon {
    font-size: 1.1em;
    vertical-align: middle;
}

.full-width {
    grid-column: 1 / -1;
}

.hours-list {
    list-style: none;
    padding: 0;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hours-list li:last-child {
    border-bottom: none;
}

.hours-time {
    font-family: var(--tech-font);
    color: var(--contact-text-muted);
    font-weight: 600;
}

/* Map Graphic (Radar/Tech style) - LIGHT VERSION */
.map-graphic {
    height: 250px;
    background: #f1f3f5;
    /* Light tech grey */
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* Soft internal shadow */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

.grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    /* Dark grid lines */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        /* Darker grid */
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: perspective(500px) rotateX(0deg);
    /* Flat view for clarity */
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: none;
    /* Static technical grid */
    opacity: 0.5;
}

/* Crosshair Overlay */
.map-graphic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 1px;
    background: rgba(201, 42, 42, 0.2);
    /* Red line horizontal */
    z-index: 1;
}

.map-graphic::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 100%;
    background: rgba(201, 42, 42, 0.2);
    /* Red line vertical */
    z-index: 1;
}

.radar-scan {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    /* Red scan on light bg */
    background: conic-gradient(from 0deg, transparent 0deg, rgba(201, 42, 42, 0.05) 60deg, transparent 61deg);
    border-radius: 50%;
    animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.location-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pin-center {
    width: 12px;
    height: 12px;
    background: var(--contact-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(201, 42, 42, 0.4);
    position: relative;
    z-index: 2;
}

.pin-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 1px solid var(--contact-accent);
    border-radius: 50%;
    opacity: 0.5;
    animation: pinPulse 2s infinite;
}

.world-label {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: var(--tech-font);
    font-size: 0.6rem;
    color: var(--contact-accent);
    letter-spacing: 0.2em;
    opacity: 0.8;
}

.location-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(15px, -15px);
    font-family: var(--tech-font);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--contact-text-main);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 2px;
    white-space: nowrap;
    z-index: 5;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.note-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--contact-text-muted);
    font-style: italic;
}

/* Animations using GSAP-like simple CSS */
.reveal-on-load {
    opacity: 0;
    animation: fadeSlideUp 0.8s ease-out forwards;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .page-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .contact-page {
        padding-top: calc(var(--nav-height) + 2rem);
        padding-bottom: 2rem;
    }
    .contact-grid { gap: 2rem; }
}

@media (max-width: 480px) {
    .page-title       { font-size: 2rem; }
    .section-subtitle { font-size: 0.95rem; }
}