/* Empire Fitment Widget — supplemental styles (PDP base is in theme pdp.css) */

.empire-fitment {
    font-family: inherit;
    max-width: 640px;
}

.empire-fitment--widget {
    padding: 24px;
    background: #fff;
    border-radius: 4px;
}

.empire-fitment__heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 14px;
    color: #15181B;
}

.empire-fitment__selects {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.empire-fitment__select {
    flex: 1 1 140px;
    min-width: 120px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    color: #15181B;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    cursor: pointer;
}

.empire-fitment__select:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.empire-fitment__btn {
    height: 42px;
    padding: 0 24px;
    background: #15181B;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.empire-fitment__btn:hover:not(:disabled) {
    background: #333;
}

.empire-fitment__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.empire-fitment__result {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}

.empire-fitment__result--fit {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.empire-fitment__result--no-fit {
    background: #fce4ec;
    color: #c62828;
    border: 1px solid #ef9a9a;
}

.empire-fitment__result--no-match {
    background: #fff8e1;
    color: #e65100;
    border: 1px solid #ffcc80;
}

/* PDP variant — collapsible trigger */
.empire-fitment--pdp {
    margin: 16px 0;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.empire-fitment__trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: #fff;
    transition: background 0.15s;
}

.empire-fitment__trigger:hover {
    background: #f8f8f8;
}

.empire-fitment__trigger-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
    transition: background 0.2s;
}

.ef-dot--fit    { background: #2e7d32 !important; }
.ef-dot--nofit  { background: #c62828 !important; }

.empire-fitment__trigger-copy {
    flex: 1;
    min-width: 0;
}

.empire-fitment__trigger-copy b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #15181B;
}

.empire-fitment__trigger-copy span {
    display: block;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empire-fitment__chevron {
    width: 16px;
    height: 16px;
    color: #888;
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* Chevron rotation handled by pdp.css via aria-expanded="true" */

/* Override pdp.css max-height to ensure body expands fully */
.empire-fitment__body--open {
    max-height: 400px !important;
    overflow: visible !important;
}

/* Padding/bg for the body in PDP mode (pdp.css doesn't set this) */
.empire-fitment--pdp .empire-fitment__body {
    padding: 0;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
}

.empire-fitment--pdp .empire-fitment__selects {
    gap: 6px;
    flex-wrap: wrap;
}

.empire-fitment--pdp .empire-fitment__select {
    height: 38px;
    font-size: 13px;
    flex: 1 1 130px;
    min-width: 110px;
}

/* Mobile */
@media (max-width: 600px) {
    .empire-fitment__selects {
        flex-direction: column;
        gap: 8px;
    }
    .empire-fitment__select {
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .empire-fitment__btn {
        width: 100%;
        margin-top: 4px;
    }
}