/**
 * Front-end restyle for MAC Makeup Eyeshadow Combinations
 * Targets the elements the plugin actually outputs:
 *   .eyeshadow-a2z    - the A-Z letter navigation
 *   table.combos      - the combo listing itself
 *   .eyeshadow-search - the [eyeshadow-search] search box
 *
 * Loaded after the plugin's original mmc.css, so these rules
 * are free to override it.
 */

/* ---- kill the exact legacy rules found in mmc.css ----
   The old "current letter" style (.eyeshadow-a2z span.current) sets a
   white border + a repeating background image, both with !important and
   2 classes of specificity — that's what was still showing through our
   old blanket reset. Matching selector + !important here beats it because
   this file loads after mmc.css, so on a tie the later rule wins. */
.eyeshadow-a2z,
.eyeshadow-a2z *,
table.combos,
table.combos * {
    border-color: transparent !important;
    border-style: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.eyeshadow-a2z span.current {
    border: none !important;
    background: none !important;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.eyeshadow-a2z span.current a {
    background: none !important;
}

/* ---- A-Z letter navigation ---- */

.eyeshadow-a2z {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 14px 0 !important;
    margin: 0 0 24px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.eyeshadow-a2z span {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
}

.eyeshadow-a2z span a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 6px 2px;
    border-radius: 5px;
    background: #f6f2f0;
    color: #7a4b45;
    font-weight: 600;
    font-size: clamp(11px, 1.4vw, 15px);
    text-decoration: none;
    transition: background-color .12s ease-in-out, color .12s ease-in-out;
}

.eyeshadow-a2z span a:hover {
    background: #b6746b;
    color: #fff;
}

/* a letter with no combos yet (plain text, not linked) */
.eyeshadow-a2z span:not(:has(a)) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 6px 2px;
    color: #c9c2c0;
    font-weight: 600;
    font-size: clamp(11px, 1.4vw, 15px);
}

/* the currently-browsed letter */
.eyeshadow-a2z span.current a {
    background: #7a4b45 !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* ---- Combo listing table ---- */

table.combos {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 32px;
    font-size: 15px;
}

/* each product/collection name acts as a section header */
table.combos thead th {
    text-align: left;
    background: #7a4b45;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 6px 6px 0 0;
}

/* visual gap before every header except the very first one */
table.combos thead:not(:first-of-type) th {
    border-top: 24px solid #fff !important;
}

table.combos tr td {
    display: block;
    padding: 12px 16px;
    border-left: 1px solid #eee0dd !important;
    border-right: 1px solid #eee0dd !important;
    border-bottom: 1px solid #f1e8e6 !important;
    line-height: 1.6;
    color: #3a3a3a;
    background: #fff;
}

table.combos tr:nth-of-type(even) td {
    background: #fdf9f8;
}

table.combos tr td:hover {
    background: #f6ece9;
}

/* the row that immediately follows a header should sit flush under it */
table.combos thead + tr td {
    border-top: none;
}

/* rounds off the bottom of the last row before the next header (or end of table) */
table.combos tr:has(+ thead) td,
table.combos tr:last-of-type td {
    border-radius: 0 0 6px 6px;
}

/* ---- search box ([eyeshadow-search] shortcode) ---- */

.eyeshadow-search {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 0 24px;
}

.eyeshadow-search input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e5d9d6;
    border-radius: 5px;
    font-size: 15px;
    color: #3a3a3a;
}

.eyeshadow-search input[type="text"]:focus {
    outline: none;
    border-color: #b6746b;
}

.eyeshadow-search input[type="submit"] {
    padding: 8px 18px;
    border: none;
    border-radius: 5px;
    background: #7a4b45;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.eyeshadow-search input[type="submit"]:hover {
    background: #b6746b;
}

#eyeshadow-no-items {
    color: #7a4b45;
    font-size: 20px;
}

@media (max-width: 600px) {
    .eyeshadow-a2z {
        flex-wrap: wrap;
        gap: 6px;
    }

    .eyeshadow-a2z span {
        flex: 0 0 auto;
    }

    .eyeshadow-a2z span a,
    .eyeshadow-a2z span:not(:has(a)) {
        width: auto;
        min-width: 26px;
        font-size: 13px;
        padding: 5px 3px;
    }

    table.combos {
        font-size: 14px;
    }

    table.combos thead th {
        font-size: 14px;
        padding: 8px 12px;
    }

    table.combos tr td {
        padding: 10px 12px;
    }
}