/* ============================================================
    TRACEROUTE TOOL - CLEAN CONSOLE & CTA RESTORATION
    Fixed: Stray Icons and Content Spacing
   ============================================================ */

/* --- 1. CORE LAYOUT --- */
* { box-sizing: border-box; }
body { background-color: #2a2a2a; margin: 0; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.dns-page-wrapper { background-color: #1e1e1e; color: #e0e0e0; padding-bottom: 0; }
.dns-header { background: #2d2d2d; padding: 20px; font-size: 24px; font-weight: bold; border-bottom: 2px solid #444; color: #fff; text-align: center; }

.dns-container { 
    display: flex !important; 
    flex-direction: row; 
    gap: 30px; 
    padding: 30px; 
    max-width: 1400px; 
    margin: 0 auto; 
    min-height: 600px; 
    align-items: flex-start;
}

/* --- 2. SIDEBAR --- */
.tool-sidebar-column { width: 300px !important; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
.tool-sidebar { display: flex; flex-direction: column; gap: 10px !important; }
.tool-sidebar button, .tool-sidebar a { 
    background: #1a1a1a; color: #ccc !important; border: 1px solid #333; 
    padding: 14px 18px; text-align: left; border-radius: 6px; cursor: pointer; 
    display: flex; align-items: center; gap: 12px; font-size: 0.95rem; 
    transition: 0.2s; text-decoration: none; width: 100%;
}
.tool-sidebar a i, .tool-sidebar button i { color: #25D366 !important; width: 20px; text-align: center; font-size: 1.1rem; }
.tool-sidebar a.active, .tool-sidebar button.active { background: #25D366 !important; color: #000 !important; font-weight: bold; border-color: #25D366 !important; }
.tool-sidebar a.active i, .tool-sidebar button.active i { color: #000 !important; }

/* --- 3. CONSOLE WINDOW --- */
.traceroute-main-content { flex: 1 !important; min-width: 0; }
.pass-container { background: #1a1a1a; border-radius: 12px; padding: 30px; border: 1px solid #333; width: 100%; border-top: 4px solid #33b5e5; min-height: 500px; }

/* The Stray Icon Fix: Styling the Idle Box */
.trace-idle-box { 
    text-align: center; 
    padding: 40px 0; 
    color: #444; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px;
}
.trace-idle-box i { 
    font-size: 3rem; 
    color: #2a2a2a; /* Muted so it doesn't "pop" annoyingly */
    display: block;
}

.trace-output-container { background: #000; border-radius: 8px; border: 1px solid #333; overflow: hidden; width: 100%; margin-top: 20px; }
.trace-header { display: flex; background: #222; padding: 12px 20px; font-size: 0.75rem; font-weight: bold; color: #666; text-transform: uppercase; border-bottom: 1px solid #111; }
.trace-header span:nth-child(1) { width: 50px; }
.trace-header span:nth-child(2) { flex: 1; }
.trace-header span:nth-child(3) { width: 100px; text-align: right; }

.trace-row { display: flex; padding: 14px 20px; border-bottom: 1px solid #111; font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; align-items: center; }
.hop-num { width: 50px; color: #33b5e5; font-weight: bold; flex-shrink: 0; }
.hop-id { flex: 1; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hop-ms { width: 100px; text-align: right; color: #25D366; font-weight: bold; flex-shrink: 0; }

/* --- 4. INPUTS --- */
.input-flex-row { display: flex; gap: 12px; margin-bottom: 25px; }
.password-audit-input { flex: 1; background: #111; border: 1px solid #444; color: #fff; padding: 14px; border-radius: 6px; }
button.scan { padding: 14px 30px; background: #25D366 !important; border: none; color: #000 !important; border-radius: 6px; cursor: pointer; font-weight: bold; }

/* --- 5. CTA SECTION --- */
.cta-section { background: #1a1a1a; padding: 80px 20px; text-align: center; border-top: 1px solid #333; margin-top: 40px; width: 100%; }
.cta-section h3 { font-size: 2.2rem; color: #fff; margin-bottom: 15px; }
.cta-desc { color: #aaa; margin-bottom: 30px; font-size: 1.1rem; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.book-now-btn { display: inline-block; background: #25D366; color: #000; padding: 18px 45px; border-radius: 50px; font-weight: bold; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }

/* --- 6. MOBILE --- */
@media (max-width: 900px) {
    .dns-container { flex-direction: column !important; padding: 15px !important; gap: 15px !important; }
    .tool-sidebar-column { display: none !important; }
    .traceroute-main-content { width: 100% !important; }
    .input-flex-row { flex-direction: column; }
    .cta-section { padding: 50px 20px; }
}