/* whois.enhost.uk - page-specific styles */

body {
    max-width: 800px;
    background: #fff;
}

h1 {
    margin-bottom: 10px;
}

.lookup-section {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 30px;
    margin-bottom: 30px;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.results-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.error-message {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
}

.no-records {
    color: #999;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

.info-section {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 30px;
}

.info-section p {
    margin-bottom: 15px;
}

h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-top: 30px;
}

input[type="text"] {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
}

button {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    background: #0066cc;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    transition: background 0.2s;
}

button:hover {
    background: #0052a3;
}

button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Secondary action beside the primary lookup button */
.share-btn {
    background: none;
    border: 1px solid #e0e0e0;
    color: #666;
    font-weight: 400;
}

.share-btn:hover {
    background: #f5f5f5;
    border-color: #0066cc;
    color: #0066cc;
}

.share-btn.copied {
    border-color: #2e7d32;
    color: #2e7d32;
    background: none;
}

#results {
    display: none;
    margin-top: 20px;
}

#results.show {
    display: block;
}

code {
    background: #f4f4f4;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    display: inline-block;
}

pre {
    background: #f4f4f4;
    padding: 15px;
    border-radius: 3px;
    overflow-x: auto;
    margin: 10px 0;
}

pre code {
    background: none;
    padding: 0;
    font-size: 13px;
}

.info-row {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #666;
    min-width: 150px;
    font-size: 14px;
}

.info-value {
    color: #333;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    word-break: break-all;
}

.whois-info {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 15px;
}

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

.status-list li {
    padding: 4px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
}

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

.nameserver-list li {
    padding: 4px 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
}

/* Nameservers and resellers that are enhost's own. Sized in em so the icon
   matches whichever line of text it sits on (13px list, 14px value row)
   rather than towering over the smaller one. */
.enhost-icon {
    height: 1em;
    width: auto;
    vertical-align: -0.125em;
}

/* Matches the dns tool: ours is brand blue, so green stays a status colour */
.enhost-value {
    color: #0066cc;
    font-weight: 500;
}

/* Marks a value we worked out from the response rather than read from a
   dedicated field, with the reasoning spelled out underneath */
.derived-marker {
    color: #999;
    cursor: help;
    margin-left: 2px;
}

.derived-note {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

/* How long ago, or how long until, next to an absolute WHOIS date */
.date-relative {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 13px;
    color: #999;
    margin-left: 6px;
    white-space: nowrap;
}

/* Expiry urgency. Applied to both the date and its relative suffix so the
   whole row reads at a glance: healthy, worth planning, renew now, gone. */
.expiry-ok {
    color: #2e7d32;
}

.expiry-soon {
    color: #f57c00;
    font-weight: 500;
}

.expiry-urgent,
.expiry-expired {
    color: #d32f2f;
    font-weight: 500;
}

/* The suffix is muted by default, so an urgency colour must win over it */
.date-relative.expiry-ok {
    color: #2e7d32;
}

.raw-whois {
    background: #f4f4f4;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    margin-top: 15px;
    overflow-x: auto;
}

.raw-whois pre {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Plain-English EPP status, and who can lift it */
.status-meaning {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin: 2px 0 8px 0;
}

.status-by {
    color: #999;
}

.age-days {
    font-size: 12px;
    color: #999;
    margin-left: 6px;
}

@media (max-width: 600px) {
    .lookup-section {
        padding: 20px;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    button {
        width: 100%;
    }
    
    pre {
        padding: 10px;
    }
    
    pre code {
        font-size: 11px;
    }
    
    .info-row {
        flex-direction: column;
    }
    
    .info-label {
        margin-bottom: 5px;
    }
}