/* ═══════════════════════════════════════════════════════
   COMPARISON TABLE — tucamaria.ro
   Design System v3.0 — dark variant
   Noise texture + glow blob + gold accents
═══════════════════════════════════════════════════════ */

.comparison-scope {
    --accent:          #c9a96e;
    --accent-burg:     #800020;
    --accent-light:    rgba(168,120,46,.07);
    --accent-lighter:  rgba(168,120,46,.10);
    --accent-lightest: rgba(168,120,46,.15);
    --text-dark:       #ede4d8;
    --text-muted:      rgba(237,228,216,.50);
    --bg-white:        #fff;
    --bg-blue-light:   #f8f9ff;
    --bg-green-light:  #f0f8f0;
    --border-light:    rgba(168,120,46,.08);
    --shadow-base:     0 16px 48px rgba(0,0,0,.40), 0 4px 16px rgba(0,0,0,.25);
    --shadow-card:     0 2px 8px rgba(0,0,0,.25);
    --border-radius-sm: 7px;
    --border-radius-md: 12px;
    --spacing-xs:      0.625rem;
    --spacing-sm:      1.125rem;
    --spacing-md:      1.25rem;
    --spacing-lg:      1.5rem;
    --spacing-xl:      1.75rem;
    --spacing-2xl:     1.875rem;

    font-family: "Roboto Condensed", "Roboto", sans-serif;
}

.comparison-wrapper {
    max-width: 1100px;
    margin: 3rem auto;
    padding: 2.5rem 2.25rem;
    background: #0a0305;
    border-radius: 12px;
    border: 1px solid rgba(168,120,46,.10);
    box-shadow:
        0 0 0 1px rgba(168,120,46,.04),
        0 16px 48px rgba(0,0,0,.40),
        0 4px 16px rgba(0,0,0,.25);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Noise texture — identic cu calculatoare, MI dark panel, Process Timeline cercuri */
.comparison-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    pointer-events: none;
    z-index: 0;
}

/* Glow blob — burgundy top-left, signature design system */
.comparison-wrapper::after {
    content: "";
    position: absolute;
    top: -60px;
    left: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(128,0,32,.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #120508;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: 2rem;
    font-size: 1.02rem;
    line-height: 1.68;
    border: 1px solid rgba(168,120,46,.10);
    position: relative;
    z-index: 1;
}

/* Gold accent bar deasupra thead — signature element */
.comparison-table thead {
    position: relative;
}

.comparison-table thead::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #a8782e 30%, #c9a96e 50%, #a8782e 70%, transparent);
    z-index: 2;
    opacity: .70;
}

.comparison-table th {
    background: #1a0710;
    color: #ede4d8;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1.1rem 1.375rem;
    text-align: center;
    border-bottom: 1px solid rgba(168,120,46,.10);
}

.comparison-table td {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(168,120,46,.06);
    vertical-align: top;
    color: #ede4d8;
    transition: background-color 0.20s cubic-bezier(.4,0,.2,1);
}

.comparison-table td:first-child {
    font-weight: 700;
    color: #ede4d8;
    background: #1a0710;
    width: 29%;
    font-size: 1rem;
    border-right: 1px solid rgba(168,120,46,.06);
}

.comparison-table tr:hover td {
    background-color: var(--accent-lighter);
}

.comparison-table tr:hover td:first-child {
    background-color: var(--accent-lightest);
}

.comparison-note {
    text-align: center;
    font-size: 1rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0 1.25rem;
    line-height: 1.65;
    position: relative;
    z-index: 1;
}

.comparison-note strong {
    color: var(--accent);
}

.comparison-note a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
    text-decoration-color: rgba(201, 169, 110, .62);
}

.comparison-note a:hover,
.comparison-note a:focus-visible {
    text-decoration-color: currentColor;
}

/* ── MOBIL — glassmorphism ──────────────────────────── */
@media (max-width: 860px) {

    /* ── wrapper → transparent ── */
    .comparison-wrapper {
        padding: 1.75rem 1.125rem;
        border-radius: 12px;
        margin: 1.5rem auto;
        overflow: visible;
        background: transparent;
        border-color: transparent;
        box-shadow: none;
    }

    /* hide noise + glow */
    .comparison-wrapper::before { display: none; }
    .comparison-wrapper::after  { display: none; }

    .comparison-table {
        font-size: 1rem;
        line-height: 1.65;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .comparison-table thead {
        display: none;
    }

    /* ── card rows → glass ── */
    .comparison-table tbody tr {
        display: block;
        margin: 1.5rem auto;
        max-width: 500px;
        border-radius: var(--border-radius-md);
        background: rgba(255,255,255,.15);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border: 1px solid rgba(255,255,255,.40);
        box-shadow:
            0 8px 32px rgba(0,0,0,.08),
            inset 0 1px 0 rgba(255,255,255,.50);
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    /* ── cells → dark text ── */
    .comparison-table td {
        display: block;
        padding: 1.125rem 1.5rem;
        text-align: left;
        border: none;
        transition: none;
        background: transparent;
        color: #4a3f44;
    }

    /* first cell → burgundy glass header */
    .comparison-table tbody tr > td:first-child,
    .comparison-table td:first-child,
    .comparison-table tr td:nth-of-type(1),
    .comparison-table td:nth-child(1) {
        background: rgba(128,0,32,.10) !important;
        color: #1a1014;
        -webkit-text-fill-color: #1a1014;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 700;
        font-size: 1.02rem;
        text-align: center;
        padding: 1.35rem 1.25rem;
        width: 100%;
        box-sizing: border-box;
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        margin: 0;
        border-right: none;
        border-bottom: 1px solid rgba(128,0,32,.08);
    }

    .comparison-table td:nth-child(2) {
        background: transparent;
        padding: 1.375rem 1.5rem 1.125rem;
        position: relative;
        color: #4a3f44;
    }

    .comparison-table td:nth-child(2)::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--accent-burg);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        margin-bottom: var(--spacing-xs);
        text-transform: uppercase;
    }

    .comparison-table td:nth-child(3) {
        background: transparent;
        padding: 1.375rem 1.5rem 1.125rem;
        position: relative;
        border-bottom: 1px solid rgba(168,120,46,.10);
        color: #4a3f44;
    }

    .comparison-table td:nth-child(3)::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--accent-burg);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        margin-bottom: var(--spacing-xs);
        text-transform: uppercase;
    }

    .comparison-table td:nth-child(4) {
        background: transparent;
        padding: 1.375rem 1.5rem 1.625rem;
        position: relative;
        color: #4a3f44;
    }

    .comparison-table td:nth-child(4)::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        color: var(--accent-burg);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        margin-bottom: var(--spacing-xs);
        text-transform: uppercase;
    }

    .comparison-table tr,
    .comparison-table td {
        background-color: initial;
        transform: none;
    }

    .comparison-table th {
        display: none;
    }

    /* note → dark text */
    .comparison-note {
        color: #4a3f44;
    }

    .comparison-note strong {
        color: var(--accent-burg);
    }

    .comparison-note a {
        color: var(--accent-burg);
        text-decoration-color: rgba(128, 0, 32, .55);
    }
}