/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — IP Lookup — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Section A: My IP ────────────────────────────────────────────────────────── */

.my-ip-section {
    text-align: center;
    padding:    2rem 1.5rem 1.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.75rem;
}

.my-ip-heading {
    font-family:  'IBM Plex Sans', sans-serif;
    font-size:    0.8125rem;
    font-weight:  600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:        var(--muted);
    margin:       0 0 0.75rem;
}

/* Large bold IP display */
.my-ip-address {
    font-family:  'SFMono-Regular', 'Consolas', 'IBM Plex Sans', monospace;
    font-size:    clamp(1.75rem, 5vw, 2.75rem);
    font-weight:  700;
    color:        var(--text);
    letter-spacing: 0.03em;
    margin:       0 0 1.25rem;
    word-break:   break-all;
    line-height:  1.15;
}

/* Loading state */
.my-ip-loading {
    font-size:   0.9375rem;
    color:       var(--muted);
    margin:      0 0 1.25rem;
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         0.5rem;
}

.my-ip-loading::before {
    content:       '';
    display:       inline-block;
    width:         16px;
    height:        16px;
    border:        2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation:     ip-spin 0.75s linear infinite;
    flex-shrink:   0;
}

@keyframes ip-spin {
    to { transform: rotate(360deg); }
}

/* Error state */
.my-ip-error {
    font-size:  0.9375rem;
    color:      #c0392b;
    margin:     0 0 1.25rem;
}

/* Copy IP button */
.copy-ip-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           0.4rem;
    background:    var(--accent);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       0.55rem 1.25rem;
    font-size:     0.9375rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.12s;
}

.copy-ip-btn:hover:not(:disabled) {
    background: #cf551f;
}

.copy-ip-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.copy-ip-btn.copied {
    background: #27ae60;
}

.copy-ip-btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
}

/* IP detail row — geo details below the big IP */
.ip-detail-row {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             0.75rem 1.5rem;
    margin-top:      1.25rem;
}

.ip-detail-item {
    display:     flex;
    align-items: center;
    gap:         0.35rem;
    font-size:   0.875rem;
    color:       var(--text-secondary, #64748B);
}

.ip-detail-icon {
    font-size: 1rem;
    line-height: 1;
}

.ip-detail-label {
    font-weight: 600;
    color:       var(--muted, #64748B);
}

.ip-detail-label::after {
    content: ':';
}

.ip-detail-value {
    color: var(--text);
}

/* ── Section B: Lookup Any IP or Domain ──────────────────────────────────────── */

.lookup-section {
    padding-top: 0.25rem;
}

.lookup-section-heading {
    font-family:  'IBM Plex Serif', serif;
    font-size:    1.125rem;
    font-weight:  400;
    color:        var(--text);
    margin:       0 0 1rem;
}

/* Input + button row */
.lookup-input-row {
    display:   flex;
    gap:       0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.lookup-input {
    flex:          1 1 220px;
    padding:       0.65rem 0.875rem;
    border:        1.5px solid var(--border);
    border-radius: 8px;
    font-size:     0.9375rem;
    font-family:   'SFMono-Regular', 'Consolas', 'IBM Plex Sans', monospace;
    color:         var(--text);
    background:    var(--card-bg, #fff);
    transition:    border-color 0.18s;
    min-width:     0;
}

.lookup-input:focus {
    outline:       none;
    border-color:  var(--accent);
    box-shadow:    0 0 0 3px rgba(232, 98, 42, 0.12);
}

.lookup-input::placeholder {
    color:       var(--muted);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   0.875rem;
}

.lookup-btn {
    flex-shrink:   0;
    padding:       0.65rem 1.5rem;
    background:    var(--accent);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    font-size:     0.9375rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.18s, transform 0.12s;
    white-space:   nowrap;
}

.lookup-btn:hover:not(:disabled) {
    background: #cf551f;
}

.lookup-btn:active:not(:disabled) {
    transform: scale(0.97);
}

.lookup-btn:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* API rate-limit note */
.lookup-api-note {
    font-size:   0.7813rem;
    color:       var(--muted);
    margin:      0.35rem 0 0;
    line-height: 1.4;
}

/* Privacy note */
.lookup-privacy-note {
    font-size:   0.7813rem;
    color:       var(--muted);
    margin:      0.25rem 0 1.25rem;
    line-height: 1.4;
}

/* Loading state inline under button */
.lookup-loading {
    font-size:   0.9375rem;
    color:       var(--muted);
    margin:      0.75rem 0 0;
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.lookup-loading::before {
    content:       '';
    display:       inline-block;
    width:         14px;
    height:        14px;
    border:        2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation:     ip-spin 0.75s linear infinite;
    flex-shrink:   0;
}

/* Error message */
.lookup-error {
    font-size:   0.9375rem;
    color:       #c0392b;
    margin:      0.75rem 0 0;
    padding:     0.6rem 0.875rem;
    background:  #fdf3f2;
    border:      1px solid #f5c6c2;
    border-radius: 8px;
    line-height: 1.45;
}

/* ── Lookup Results Card ──────────────────────────────────────────────────────── */

.lookup-results-card {
    margin-top:    1.25rem;
    border:        1.5px solid var(--border);
    border-radius: 12px;
    overflow:      hidden;
}

/* Optional "resolved from domain" note at top of card */
.lookup-resolved-note {
    padding:     0.65rem 1rem;
    background:  #f0f7ff;
    border-bottom: 1px solid #c9e0f5;
    font-size:   0.8125rem;
    color:       #2c5f8a;
    margin:      0;
}

/* Geo data table */
.lookup-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9375rem;
}

.lookup-table tbody tr:nth-child(odd) {
    background: var(--bg, #FFFFFF);
}

.lookup-table tbody tr:nth-child(even) {
    background: var(--card-bg, #fff);
}

.lookup-table th {
    padding:     0.65rem 1rem;
    text-align:  left;
    font-weight: 600;
    color:       var(--muted);
    white-space: nowrap;
    width:       42%;
}

.lookup-table td {
    padding:     0.65rem 1rem;
    color:       var(--text);
    word-break:  break-all;
}

/* ── Responsive adjustments ──────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .my-ip-address {
        font-size: 1.875rem;
    }

    .ip-detail-row {
        flex-direction: column;
        align-items:    center;
        gap:            0.5rem;
    }

    .lookup-input-row {
        flex-direction: column;
    }

    .lookup-btn {
        width: 100%;
    }

    .lookup-table th,
    .lookup-table td {
        padding:   0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .lookup-table th {
        width: 45%;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */