/* ============================================================
   compat-modal.css
   Compatibility chart modal for the Wedgie4Wedges product page.
   Add to wedgie.css or link separately after it.
============================================================ */

/* ── Backdrop ───────────────────────────────────────────── */
.compat-modal-backdrop {
    display:         none;          /* hidden by default          */
    position:        fixed;
    inset:           0;
    z-index:         300;
    background:      rgba(44, 34, 21, 0.6);
    backdrop-filter: blur(8px);
    align-items:     center;
    justify-content: center;
    padding:         1.5rem;
    /* revealed by JS adding .open */
}
.compat-modal-backdrop.open {
    display: flex;
    animation: backdropIn 0.25s ease both;
}
@keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal shell ────────────────────────────────────────── */
.compat-modal {
    background:    var(--white);
    border-radius: 22px;
    width:         100%;
    max-width:     760px;
    max-height:    90vh;
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    box-shadow:    0 40px 100px rgba(44, 34, 21, 0.35);
    animation:     modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ─────────────────────────────────────────────── */
.compat-modal-header {
    background:      var(--olive);
    padding:         1.3rem 1.6rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    flex-shrink:     0;
}
.compat-modal-eyebrow {
    font-size:      0.62rem;
    font-weight:    800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          rgba(237, 218, 188, 0.55);
    margin-bottom:  0.2rem;
}
.compat-modal-title {
    font-family: var(--font-display);
    font-size:   1.8rem;
    font-weight: 700;
    color:       var(--cream);
    line-height: 1.1;
}
.compat-modal-close {
    width:       38px;
    height:      38px;
    flex-shrink: 0;
    border-radius: 50%;
    background:  rgba(255, 253, 247, 0.14);
    border:      1px solid rgba(255, 253, 247, 0.22);
    color:       var(--cream);
    font-size:   1rem;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    transition:  background 0.2s ease;
}
.compat-modal-close:hover { background: rgba(255, 253, 247, 0.26); }

/* ── Tabs ───────────────────────────────────────────────── */
.compat-tabs {
    display:       flex;
    flex-shrink:   0;
    border-bottom: 1.5px solid rgba(177, 100, 72, 0.1);
    background:    var(--sand);
}
.compat-tab {
    flex:           1;
    padding:        0.9rem 1rem;
    border:         none;
    background:     none;
    cursor:         pointer;
    font-family:    var(--font-body);
    font-size:      0.82rem;
    font-weight:    800;
    color:          var(--text-mid);
    letter-spacing: 0.04em;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            0.2rem;
    border-bottom:  3px solid transparent;
    transition:     color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.compat-tab:hover { color: var(--rust); background: rgba(177, 100, 72, 0.04); }
.compat-tab.active {
    color:        var(--rust);
    border-bottom-color: var(--rust);
    background:   var(--white);
}
.compat-tab-sub {
    font-size:      0.62rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity:        0.55;
}

/* ── Scrollable body ─────────────────────────────────────── */
.compat-modal-body {
    overflow-y: auto;
    flex:       1;
    padding:    1.4rem 1.6rem 1.8rem;
    display:    flex;
    flex-direction: column;
    gap:        1.1rem;
}

/* ── Spec pill row ───────────────────────────────────────── */
.compat-spec-row {
    display:   flex;
    gap:       0.6rem;
    flex-wrap: wrap;
}
.compat-spec-pill {
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           0.15rem;
    background:    var(--sand);
    border:        1.5px solid rgba(177, 100, 72, 0.12);
    border-radius: 10px;
    padding:       0.55rem 1rem;
    flex:          1;
    min-width:     90px;
}
.csp-label {
    font-size:      0.58rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--rust);
}
.csp-val {
    font-family: var(--font-display);
    font-size:   1.1rem;
    font-weight: 700;
    color:       var(--olive);
    white-space: nowrap;
}

/* ── Note text ───────────────────────────────────────────── */
.compat-note {
    font-size:   0.82rem;
    line-height: 1.7;
    color:       var(--text-mid);
}

/* ── Legend ──────────────────────────────────────────────── */
.compat-legend {
    display:     flex;
    gap:         0.6rem;
    flex-wrap:   wrap;
    align-items: center;
}

/* ── Badges ──────────────────────────────────────────────── */
.compat-badge {
    display:        inline-flex;
    align-items:    center;
    padding:        0.25rem 0.75rem;
    border-radius:  99px;
    font-size:      0.72rem;
    font-weight:    800;
    letter-spacing: 0.05em;
    white-space:    nowrap;
}
.cb-fit {
    background: rgba(91, 93, 52, 0.12);
    color:      var(--olive-dark);
    border:     1.5px solid rgba(91, 93, 52, 0.25);
}
.cb-borderline {
    background: rgba(91, 93, 52, 0.12);
    color:      var(--olive-dark);
    border:     1.5px solid rgba(91, 93, 52, 0.25);
}
.cb-nofit {
    background: rgba(44, 34, 21, 0.07);
    color:      var(--text-mid);
    border:     1.5px solid rgba(44, 34, 21, 0.15);
}

/* ── Table wrapper ───────────────────────────────────────── */
.compat-table-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* ── Table ───────────────────────────────────────────────── */
.compat-table {
    width:           100%;
    border-collapse: collapse;
    border-radius:   14px;
    overflow:        hidden;
    border:          1.5px solid rgba(177, 100, 72, 0.1);
    font-size:       0.82rem;
}
.compat-table thead tr {
    background: var(--olive);
}
.compat-table th {
    padding:        0.7rem 1rem;
    text-align:     left;
    font-size:      0.62rem;
    font-weight:    800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          rgba(237, 218, 188, 0.75);
    border:         none;
}
.compat-table td {
    padding:     0.65rem 1rem;
    border-bottom: 1px solid rgba(177, 100, 72, 0.07);
    vertical-align: top;
    color:       var(--text-dark);
    line-height: 1.5;
}
.compat-table tbody tr:last-child td { border-bottom: none; }

/* Row tints — on-brand colours */
.ct-fit td       { background: rgba(91, 93, 52, 0.05); }
.ct-borderline td{ background: rgba(91, 93, 52, 0.05); }
.ct-nofit td     { background: rgba(44, 34, 21, 0.04); }

.ct-fit:hover td       { background: rgba(91, 93, 52, 0.1); }
.ct-borderline:hover td{ background: rgba(91, 93, 52, 0.1); }
.ct-nofit:hover td     { background: rgba(44, 34, 21, 0.08); }

/* Details / summary inside cells */
.compat-table details > summary {
    cursor:      pointer;
    font-weight: 800;
    color:       var(--text-dark);
    list-style:  none;
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}
.compat-table details > summary::before {
    content:     '›';
    color:       var(--rust);
    font-size:   1rem;
    font-weight: 700;
    transition:  transform 0.2s ease;
    flex-shrink: 0;
}
.compat-table details[open] > summary::before {
    transform: rotate(90deg);
}
.compat-table details > summary::-webkit-details-marker { display: none; }
.compat-table ul {
    margin:     0.5rem 0 0.2rem 1.2rem;
    padding:    0;
    color:      var(--text-mid);
    font-size:  0.78rem;
    line-height: 1.65;
}

/* ── Tip box ─────────────────────────────────────────────── */
.compat-tip {
    background:    var(--sand);
    border:        1.5px solid rgba(177, 100, 72, 0.12);
    border-left:   3px solid var(--rust);
    border-radius: 10px;
    padding:       0.8rem 1.1rem;
    font-size:     0.8rem;
    line-height:   1.65;
    color:         var(--text-mid);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
    .compat-modal-backdrop { padding: 0; align-items: flex-end; }
    .compat-modal {
        border-radius:    22px 22px 0 0;
        max-height:       92vh;
        animation-name:   modalInMobile;
    }
    @keyframes modalInMobile {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .compat-modal-title  { font-size: 1.4rem; }
    .compat-modal-body   { padding: 1rem 1.1rem 1.4rem; }
    .compat-spec-pill    { min-width: 70px; padding: 0.45rem 0.7rem; }
    .csp-val             { font-size: 0.95rem; }
    .compat-table th,
    .compat-table td     { padding: 0.55rem 0.7rem; }
}