/* =====================================================================
 *  Eladó domain lista — beágyazható stíluslap
 *  Forrás: https://gyongykert.hu/domains-style.css
 *
 *  Használat a befogadó oldalon (HEAD-be):
 *    <link rel="stylesheet" href="https://gyongykert.hu/domains-style.css">
 *
 *  Vagy ha PHP include-dal hozod be a domains.php-t, és a befogadó oldal
 *  saját CSS-rendszerrel működik, akkor ezt a fájlt töltsd le és tegyél
 *  egy <link>-et a befogadó oldal sablonjába.
 * ===================================================================== */

/* --- Design tokenek (önálló namespace, hogy ne keveredjenek a befogadó oldal változóival) --- */
.elado-domains, .elado-domains *, .elado-domains *::before, .elado-domains *::after { box-sizing: border-box; }

.elado-domains {
    --ed-font: 'General Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --ed-text:    #1a1812;
    --ed-muted:   #68665d;
    --ed-faint:   #b2b0ab;
    --ed-bg:      #f6f5f1;
    --ed-surface: #ffffff;
    --ed-surface-2: #f9f8f5;
    --ed-surface-off: #f0ede6;
    --ed-border:  rgba(38, 32, 14, 0.13);
    --ed-div:     #e6e3db;
    --ed-primary: #01696f;
    --ed-primary-h: #0b4d53;
    --ed-primary-hl: #cce5e3;
    --ed-sh-sm: 0 1px 3px rgba(20,18,10,.07), 0 1px 2px rgba(20,18,10,.04);
    --ed-sh-md: 0 4px 16px rgba(20,18,10,.09), 0 2px 6px rgba(20,18,10,.05);
    --ed-r-xl: 1rem;
    --ed-r-full: 9999px;
    --ed-ease: 180ms cubic-bezier(0.16, 1, 0.3, 1);

    font-family: var(--ed-font);
    color: var(--ed-text);
}

/* Sötét mód — automatikus, prefers-color-scheme alapján */
@media (prefers-color-scheme: dark) {
    .elado-domains {
        --ed-text: #cdc9c4;
        --ed-muted: #797672;
        --ed-faint: #545250;
        --ed-bg: #131211;
        --ed-surface: #1c1b19;
        --ed-surface-2: #212019;
        --ed-surface-off: #242320;
        --ed-border: rgba(230,230,230,.09);
        --ed-div: #2a2926;
        --ed-primary: #4f9aa5;
        --ed-primary-h: #22808c;
        --ed-primary-hl: #1e3335;
        --ed-sh-sm: 0 1px 3px rgba(0,0,0,.3);
        --ed-sh-md: 0 4px 16px rgba(0,0,0,.4);
    }
}

/* --- Domain lista grid + kártyák --- */

.elado-domains .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: .75rem;
}

.elado-domains .card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--ed-surface);
    border: 1px solid var(--ed-border);
    border-radius: var(--ed-r-xl);
    text-decoration: none;
    color: var(--ed-text);
    box-shadow: var(--ed-sh-sm);
    transition: all var(--ed-ease);
    position: relative;
    overflow: hidden;
}
.elado-domains .card::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ed-primary);
    opacity: 0;
    transition: opacity var(--ed-ease);
    border-radius: var(--ed-r-full) 0 0 var(--ed-r-full);
}
.elado-domains .card:hover {
    box-shadow: var(--ed-sh-md);
    transform: translateY(-2px) translateX(2px);
    border-color: color-mix(in oklch, var(--ed-primary) 35%, transparent);
    background: color-mix(in oklch, var(--ed-primary) 4%, var(--ed-surface));
}
.elado-domains .card:hover::after { opacity: 1; }

.elado-domains .card-left { min-width: 0; flex: 1; }

.elado-domains .domain-name {
    font-size: clamp(1.05rem, 1rem + 0.6vw, 1.5rem);
    font-weight: 700;
    color: var(--ed-text);
    white-space: nowrap;
    letter-spacing: -.015em;
    margin-bottom: .5rem;
    transition: color var(--ed-ease);
}
.elado-domains .card:hover .domain-name { color: var(--ed-primary); }

.elado-domains .badges {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.elado-domains .badge {
    display: inline-flex;
    align-items: center;
    font-size: .95rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--ed-r-full);
    white-space: nowrap;
    border: 1px solid;
    letter-spacing: .02em;
}
.elado-domains .badge-da {
    color: var(--ed-primary);
    background: var(--ed-primary-hl);
    border-color: color-mix(in oklch, var(--ed-primary) 22%, transparent);
}
.elado-domains .badge-pa {
    color: var(--ed-muted);
    background: var(--ed-surface-off);
    border-color: var(--ed-div);
}
.elado-domains .badge-opr {
    color: #a86a00;
    background: color-mix(in oklch, #f59e0b 18%, var(--ed-surface));
    border-color: color-mix(in oklch, #f59e0b 32%, transparent);
}
@media (prefers-color-scheme: dark) {
    .elado-domains .badge-opr {
        color: #fcd34d;
        background: color-mix(in oklch, #f59e0b 14%, var(--ed-surface));
        border-color: color-mix(in oklch, #f59e0b 28%, transparent);
    }
}
.elado-domains .badge-ev {
    color: var(--ed-faint);
    background: var(--ed-surface-2);
    border-color: var(--ed-border);
}

.elado-domains .arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ed-r-full);
    background: var(--ed-surface-off);
    border: 1px solid var(--ed-div);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ed-faint);
    transition: all var(--ed-ease);
}
.elado-domains .card:hover .arrow {
    background: var(--ed-primary);
    border-color: var(--ed-primary);
    color: #fff;
    transform: rotate(-45deg);
}

.elado-domains .list-footer {
    margin-top: 1rem;
    text-align: center;
    font-size: .75rem;
    color: var(--ed-faint);
}

/* --- Élő lista badge + frissítve dátum (használat: <span class="elado-live"> ... </span>) --- */
.elado-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ed-font);
    font-size: .85rem;
    vertical-align: middle;
}
.elado-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #15803d);
    border: 1px solid #15803d;
    padding: 5px 12px;
    border-radius: 9999px;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 0 0 0 rgba(34,197,94,.5);
    animation: edLivePulse 1.8s ease-in-out infinite;
}
.elado-live-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.8);
    animation: edLiveBlink 1s ease-in-out infinite;
}
@keyframes edLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
    50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
@keyframes edLiveBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.8); }
}
.elado-live-updated {
    font-weight: 600;
    color: var(--ed-muted);
}
.elado-live-updated strong { color: var(--ed-text); }
@media (max-width: 520px) {
    .elado-live { display: flex; flex-wrap: wrap; }
}