/* ================================================
   css/contact.css - MOTHERSHIP CONSOLE MK-VIII
   STATUS: SPACING CORRECTED (EXTERNAL GAP)
================================================= */

/* --- SECTION CONTAINER --- */
.contact-section {
    position: relative;
    z-index: 1;
    
    /* THE FIX: Extra padding at bottom (10rem) to separate form from footer */
    padding: 6rem 0 10rem 0; 
    
    width: 100%;
    min-height: 90vh;
    
    background-image: url('../assets/images/action.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    background-repeat: no-repeat;
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* --- FADES & OVERLAY --- */
.contact-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 200px;
    background: linear-gradient(to bottom, #000 10%, transparent 100%);
    z-index: 5; pointer-events: none;
}
.contact-section::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
    background: linear-gradient(to top, #000 10%, transparent 100%);
    z-index: 5; pointer-events: none;
}
.contact-overlay {
    position: absolute; inset: 0; background: rgba(5, 5, 7, 0.3); z-index: 1;
}

.contact-content {
    position: relative; z-index: 50; width: 100%;
    display: flex; flex-direction: column; align-items: center; padding: 0 1rem;
}

/* =========================================
   THE MOTHERSHIP CONSOLE (HUD)
   ========================================= */

   /* --- MAIN GRID LAYOUT (DESKTOP DEFAULT) --- */
.console-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
}

.mothership-console {
    width: 100%;
    max-width: 850px; 
    
    /* HYPER-GLASS: Very transparent, High Blur */
    background: rgba(5, 6, 12, 0.2); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Fine white border */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 40px rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    
    clip-path: polygon(
        0 0, 100% 0, 
        100% calc(100% - 20px), calc(100% - 20px) 100%, 
        20px 100%, 0 calc(100% - 20px)
    );
}

.mothership-console * { box-sizing: border-box; }

/* --- HEADER BAR --- */
.console-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.8rem 1.5rem;
    display: flex; justify-content: space-between;
    font-family: monospace; font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7); letter-spacing: 0.2em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.sys-status .blink {
    color: var(--primary); animation: blinker 2s linear infinite;
    text-shadow: 0 0 10px var(--primary);
}


/* =========================================
   LEFT COL: TACTICAL DATA
   ========================================= */
.col-left.tactical-col {
    padding: 1.5rem; 
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1); 
    
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem; 
    height: 100%; 
}

/* 1. MISSION BRIEF */
.mission-brief {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.8rem;
    flex: 0 0 auto;
}
.brief-title {
    font-family: var(--font-heading); color: #fff; font-size: 0.9rem;
    margin-bottom: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
.brief-steps { list-style: none; padding: 0; margin: 0 0 0.5rem 0; }
.brief-steps li {
    font-family: monospace; font-size: 0.65rem; color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.3rem; display: flex; align-items: center;
}
.step-num { color: var(--primary); margin-right: 10px; font-weight: bold; }
.brief-status {
    font-family: monospace; font-size: 0.6rem; font-weight: 700;
    color: #000; background: var(--primary); 
    padding: 2px 6px; border-radius: 2px; display: inline-block;
    box-shadow: 0 0 10px rgba(236, 246, 116, 0.4);
}

/* SHARED SCREEN STYLES */
.tech-screen {
    background: rgba(5, 5, 8, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px;
    border-radius: 2px;
    position: relative; overflow: hidden;
    width: 100%;
    display: flex; flex-direction: column;
    flex: 1; 
    min-height: 90px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
.tech-screen::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(236, 246, 116, 0.03) 3px);
    pointer-events: none; z-index: 4;
}
.screen-header {
    font-family: monospace; font-size: 0.5rem; color: var(--primary);
    letter-spacing: 0.2em; margin-bottom: 4px; text-transform: uppercase;
    position: absolute; top: 6px; left: 8px; z-index: 5; opacity: 0.8;
}

/* 2. ORBITAL MONITOR */
.orbit-display {
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    margin-top: 10px; position: relative;
}
.orbit-display::before { content: ''; position: absolute; width: 100%; height: 1px; background: rgba(255,255,255,0.05); }
.orbit-display::after { content: ''; position: absolute; width: 1px; height: 100%; background: rgba(255,255,255,0.05); }

.central-star {
    width: 6px; height: 6px; background: #fff;
    border-radius: 50%; box-shadow: 0 0 10px #fff, 0 0 20px var(--primary); z-index: 2;
}
.orbit-ring {
    position: absolute; border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; display: flex; justify-content: center;
    animation: orbitSpin linear infinite;
    box-shadow: inset 0 0 10px rgba(236, 246, 116, 0.05);
}
.ship {
    position: absolute; top: -3px; width: 4px; height: 4px;
    background: var(--primary); border-radius: 50%; box-shadow: 0 0 6px var(--primary);
}
.r1 { width: 30px; height: 30px; animation-duration: 4s; border-color: rgba(255,255,255,0.2); }
.r2 { width: 55px; height: 55px; animation-duration: 7s; animation-direction: reverse; border-style: dashed; }
.r3 { width: 80px; height: 80px; animation-duration: 12s; border-color: rgba(236, 246, 116, 0.15); }

/* 3. LIVE METRICS */
.metrics-display {
    width: 100%; height: 100%;
    display: flex; justify-content: space-between; align-items: flex-end; 
    padding: 0 10px 5px 10px; margin-top: 15px;
}
.metric-unit {
    display: flex; flex-direction: column; align-items: center;
    height: 85%; justify-content: flex-end; width: 28%;
    position: relative; z-index: 2;
}
.bar-track {
    width: 100%; height: 100%; background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; overflow: hidden; border-radius: 0;
}
.bar-fill {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(236, 246, 116, 0.4), var(--primary));
    box-shadow: 0 0 15px rgba(236, 246, 116, 0.3);
    opacity: 1; height: 50%; animation: fluctuate 2s ease-in-out infinite;
}
.metric-unit::before {
    content: '- - -'; position: absolute; right: -8px; bottom: 10px;
    color: rgba(255,255,255,0.1); font-size: 6px; line-height: 8px; writing-mode: vertical-rl;
}
.metric-unit .label {
    font-family: var(--font-heading); 
    font-size: 0.5rem; 
    font-weight: 700;
    margin-top: 6px; 
    color: #fff; opacity: 0.9; 
    letter-spacing: 0.05em;
    text-shadow: 0 0 5px rgba(0,0,0,1);
    white-space: nowrap; 
}

/* 4. RADAR SCAN */
.radar-display {
    height: 60px; width: 60px; margin: auto;
    position: relative; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: 
        radial-gradient(circle at center, transparent 30%, rgba(255,255,255,0.1) 31%, transparent 32%),
        radial-gradient(circle at center, transparent 60%, rgba(255,255,255,0.1) 61%, transparent 62%);
    overflow: hidden; box-shadow: 0 0 15px rgba(236, 246, 116, 0.05);
    flex-shrink: 0;
}
.radar-display::after {
    content: '+'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); color: rgba(236, 246, 116, 0.5);
    font-family: monospace; font-size: 1rem;
}
.radar-sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(236, 246, 116, 0.1) 240deg, var(--primary) 360deg);
    animation: radarSweep 2.5s linear infinite; mix-blend-mode: screen;
}
.target {
    position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%;
    box-shadow: 0 0 5px #fff; animation: targetBlink 1.5s ease-in-out infinite;
}

/* 5. TRANSMISSION FOOTER */
.transmission-footer {
    flex: 0 0 auto;
    font-family: monospace; font-size: 0.6rem; color: rgba(255, 255, 255, 0.5);
    text-align: left; padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.5; margin-top: auto;
}
.transmission-footer .highlight {
    color: var(--primary); font-weight: bold; text-shadow: 0 0 10px rgba(236, 246, 116, 0.4);
}

/* =========================================
   RIGHT COLUMN: INPUT TERMINAL
   ========================================= */
   .col-right {
    padding: 1.5rem; 
    padding-bottom: 3.5rem; 
    width: 100%;
    height: 100%;           /* ADD THIS */
    display: flex; 
    flex-direction: column;
}

#contactForm { display: flex; flex-direction: column; height: 100%; }

.input-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; margin-bottom: 0;
}

.form-group {
    position: relative;
    margin-bottom: 0.8rem;
    width: 100%;
}

.form-label {
    display: block; font-family: monospace; font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8); margin-bottom: 0.3rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0,0,0,1); 
}

/* TECH INPUTS */
.tech-input, .tech-select, .tech-area {
    width: 100%; min-width: 0;
    background: rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff; padding: 0 0.8rem;
    height: 2.5rem; line-height: 2.5rem;
    font-family: var(--font-body); font-size: 0.8rem;
    border-radius: 0; transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.tech-area {
    height: auto; line-height: 1.4; padding: 0.6rem 0.8rem;
    min-height: 80px; resize: vertical;
}

select.tech-select {
    appearance: none; -webkit-appearance: none; cursor: pointer; color: rgba(255, 255, 255, 0.8);
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L5 6L10 0H0Z' fill='%23ecf674'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px 6px;
}
select.tech-select option { background-color: #050608; color: #fff; padding: 10px; }

.tech-input:focus, .tech-select:focus, .tech-area:focus {
    outline: none; border-color: var(--primary);
    background: rgba(236, 246, 116, 0.05); 
    box-shadow: inset 0 0 15px rgba(236, 246, 116, 0.05);
    color: #fff;
}

.input-corner {
    position: absolute; bottom: 0; right: 0; width: 0; height: 0;
    border-style: solid; border-width: 0 0 6px 6px;
    border-color: transparent transparent var(--primary) transparent;
    opacity: 0; transition: all 0.3s ease; pointer-events: none;
}
.tech-input:focus + .input-corner, .tech-select:focus + .input-corner, .tech-area:focus + .input-corner { opacity: 1; }

/* SECURITY SECTOR */
.security-sector {
    border: 1px dashed rgba(255, 255, 255, 0.15); padding: 0.5rem;
    margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,0,0,0.1); min-height: 50px;
    margin-top: auto; 
}
.sec-label {
    font-family: monospace; font-size: 0.5rem; color: rgba(255, 255, 255, 0.4);
    writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.2em; margin-right: 0.8rem;
}
.turnstile-wrapper { flex: 1; display: flex; justify-content: flex-end; }

/* TRANSMIT BUTTON */
.transmit-btn {
    width: 100%; padding: 0.8rem; 
    background: var(--primary); color: #000; border: none;
    font-family: var(--font-heading); font-size: 0.85rem; letter-spacing: 0.2em;
    cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    box-shadow: 0 0 20px rgba(236, 246, 116, 0.2);
}
.transmit-btn:hover { background: #fff; box-shadow: 0 0 40px rgba(236, 246, 116, 0.6); }
.btn-content { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; font-weight: 700; }

.form-status {
    margin-top: 1rem; text-align: center; font-family: monospace; font-size: 0.8rem;
    min-height: 20px; letter-spacing: 0.1em; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.status-success { color: var(--primary); text-shadow: 0 0 10px rgba(236, 246, 116, 0.3); }
.status-error { color: #ff4d4d; text-shadow: 0 0 10px rgba(255, 77, 77, 0.3); }

/* ANIMATIONS */
@keyframes blinker { 50% { opacity: 0; } }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fluctuate { 0%, 100% { height: 40%; opacity: 0.7; } 50% { height: 80%; opacity: 0.9; box-shadow: 0 0 10px var(--primary); } 75% { height: 60%; opacity: 0.8; } }
@keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes targetBlink { 0%, 100% { opacity: 0; scale: 1; } 50% { opacity: 1; scale: 1.5; } }
@keyframes dots {
    0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);}
    40% { color: #fff; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);}
    60% { text-shadow: .25em 0 0 #fff, .5em 0 0 rgba(0,0,0,0);}
    80%, 100% { text-shadow: .25em 0 0 #fff, .5em 0 0 #fff;}
}

.sales-flux { animation-duration: 2.2s; animation-delay: 0s; }
.ecomm-flux { animation-duration: 3s; animation-delay: 0.5s; }
.auto-flux { animation-duration: 1.8s; animation-delay: 1s; }

.transmit-btn.loading { background: rgba(236, 246, 116, 0.2); color: rgba(255, 255, 255, 0.5); cursor: wait; pointer-events: none; }
.transmit-btn.loading .btn-content::after { content: '...'; animation: dots 1.5s steps(5, end) infinite; }

/* RESPONSIVE */
/* =================================================================
   RESPONSIVE LOGIC (CLEAN & UNIFIED)
   ================================================================= */

/* 1. TABLET & LAPTOP (769px to 1200px) 
   Keep side-by-side, but shrink the Left Column slightly to fit smaller screens. */
   @media (max-width: 1200px) {
    .mothership-console {
        max-width: 95%; /* Use more screen width */
    }
    
    .console-grid {
        /* Shrink left col from 300px to 260px so Right Col has room */
        grid-template-columns: 260px 1fr; 
    }
}

/* 2. MOBILE & SMALL TABLETS (768px and below)
   THIS is where we switch to Single Column (Stacked). */
@media (max-width: 768px) {

    .contact-section {
        padding: 4rem 0 8rem 0;
    }

    /* KILL THE MARGIN FIX FROM BEFORE (Resetting to basic) */
    .contact-content > div:first-child {
        margin-bottom: 1rem !important;
    }

    /* HEADLINE SIZING */
    .contact-content h2 {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
        line-height: 1.1 !important;
        padding: 0 1rem;
    }
    
    .contact-content p {
        font-size: 0.7rem !important;
        padding: 0 1rem;
    }

    /* --- THE CONSOLE (STACKED) --- */
    .mothership-console {
        margin-top: 0.5rem; 
        background: rgba(5, 6, 12, 0.85); /* Darker background for readability */
    }

    /* FORCE SINGLE COLUMN HERE ONLY */
    .console-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    /* LEFT COL (Tactical) */
    .col-left.tactical-col {
        width: 100%;
        padding: 1.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .metrics-display { display: none !important; } /* Hide bars on phone */

    /* RIGHT COL (Form) */
    .col-right {
        width: 100%;
        padding: 2rem 1.5rem 3rem 1.5rem;
    }

    .input-row {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .form-group.half {
        width: 100%;
        margin-bottom: 1.2rem;
    }
    
    .security-sector {
        flex-direction: column;
        gap: 1rem;
    }
    
    .turnstile-wrapper {
        justify-content: center;
        width: 100%;
    }
}

/* TRANSMIT BUTTON - RESTORED ALIEN SHAPE */
.transmit-btn,
.submit-btn {
    width: 100%;
    padding: 0.8rem;
    background: var(--primary);
    color: #000;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 1rem;
    
    /* ✨ THE SEXY CLIPPED CORNERS ✨ */
    clip-path: polygon(
        10px 0,           /* top-left notch */
        100% 0,           /* top-right */
        100% calc(100% - 10px),  /* bottom-right notch start */
        calc(100% - 10px) 100%,  /* bottom-right notch */
        0 100%,           /* bottom-left */
        0 10px            /* back to top-left notch */
    );
    
    box-shadow: 0 0 20px rgba(236, 246, 116, 0.2);
}

.transmit-btn:hover,
.submit-btn:hover {
    background: #fff;
    box-shadow: 0 0 40px rgba(236, 246, 116, 0.6);
}

.transmit-btn:disabled,
.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ORBIT SCREEN - FIXED SPACING */
.tech-screen.orbit-screen {
    min-height: 140px;      /* Taller container */
    padding: 20px 12px;     /* More padding top & bottom */
    display: flex;
    justify-content: center;
    align-items: center;    /* Center the orbits vertically */
}

/* Center the orbit display properly */
.orbit-display {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;          /* Remove the margin that was pushing it down */
    position: relative;
}

/* ================================================
   🚨 NUCLEAR FIX - DO NOT TOUCH 🚨
   This overrides EVERYTHING above
================================================= */

/* DESKTOP: Two columns, side by side */
@media (min-width: 769px) {
    .console-grid {
        display: grid !important;
        grid-template-columns: 300px 1fr !important;
        flex-direction: unset !important;
    }
    
    .col-left.tactical-col {
        width: auto !important;
    }
    
    .col-right {
        width: auto !important;
    }
}

/* MOBILE: Single column, stacked */
@media (max-width: 768px) {
    .console-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
    }
    
    .col-left.tactical-col {
        width: 100% !important;
    }
    
    .col-right {
        width: 100% !important;
    }
}

/* ORBIT FIX - BOTH SCREENS */
.tech-screen.orbit-screen {
    min-height: 150px !important;
    padding: 25px 12px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.orbit-display {
    margin-top: 0 !important;
}

/* ================================================
   TURNSTILE WIDGET - PROPER ALIEN STYLING
================================================= */

.security-sector {
    border: 1px solid rgba(236, 246, 116, 0.3);  /* Yellow border instead of dashed white */
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    margin-bottom: 1.5rem;
    margin-top: auto;
    
    display: flex;
    justify-content: center;          /* Center everything */
    align-items: center;
    gap: 1rem;
    
    position: relative;
    
    /* Subtle glow */
    box-shadow: 
        inset 0 0 20px rgba(236, 246, 116, 0.05),
        0 0 15px rgba(0, 0, 0, 0.3);
}

/* Hide that ugly vertical label on mobile */
.sec-label {
    display: none;
}

/* The turnstile container */
.turnstile-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Style the actual Cloudflare widget iframe container */
.turnstile-wrapper .cf-turnstile {
    margin: 0 auto;
}

/* Add a subtle label above */
.security-sector::before {
    content: '// SECURITY VERIFICATION';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    
    font-family: monospace;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    color: var(--primary);
    
    background: rgba(5, 6, 12, 1);
    padding: 0 10px;
    
    text-shadow: 0 0 10px rgba(236, 246, 116, 0.3);
}

/* Corner accents */
.security-sector::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent var(--primary) transparent;
    opacity: 0.6;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .security-sector {
        padding: 1.2rem 0.8rem;
        margin-top: 1rem;
    }
    
    .security-sector::before {
        font-size: 0.5rem;
        top: -8px;
    }
}