/*==================================================
COMPONENT: PRODUCT ATTRIBUTES
==================================================*/

.sidv-product-attributes {
    display: flex;
    flex-direction: column;
    gap: var(--sidv-space-6, 1.5rem);
    width: 100%;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidv-product-attributes.is-ready {
    opacity: 1;
    transform: translateY(0);
}

/*==================================================
HEADER
==================================================*/

.sidv-product-attributes__header {
    margin-bottom: 0.25rem;
}

.sidv-product-attributes__title {
    margin: 0;
    color: var(--sidv-color-heading, #0D2137);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

/*==================================================
GRID & CONTAINER
==================================================*/

.sidv-product-attributes__grid {
    display: flex;
    flex-direction: column;
    background-color: var(--sidv-color-surface, #FFFFFF);
    border: 1px solid var(--sidv-color-border, #E8EDF3);
    border-radius: var(--sidv-radius-xl, 18px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(13, 33, 55, 0.03);
}

/*==================================================
ATTRIBUTE ITEM (Zebra Striping & Hover State)
==================================================*/

.sidv-product-attributes__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sidv-color-border-light, #EDF2F7);
    background-color: transparent;
    transition: background-color 0.2s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
}

.sidv-product-attributes__item:nth-child(even) {
    background-color: var(--sidv-color-bg-alt, #FAFBFC);
}

.sidv-product-attributes__item:last-child {
    border-bottom: none;
}

.sidv-product-attributes__item:hover {
    background-color: var(--sidv-color-surface-hover, #FFFDF8);
}

/* Highlight dynamic state */
.sidv-product-attributes__item.is-highlighted {
    background-color: rgba(255, 152, 0, 0.12) !important;
    box-shadow: inset 4px 0 0 var(--sidv-color-primary, #FF9800);
}

/*==================================================
LABEL & VALUES
==================================================*/

.sidv-product-attributes__label {
    flex: 0 0 220px;
    font-size: 0.885rem;
    font-weight: 700;
    color: var(--sidv-color-text-light, #64748B);
    text-transform: capitalize;
}

.sidv-product-attributes__value-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.sidv-product-attributes__value {
    color: var(--sidv-color-heading, #0D2137);
    font-size: 0.938rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
}

/*==================================================
BADGES (Multiple Values)
==================================================*/

.sidv-product-attributes__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.sidv-product-attributes__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background-color: var(--sidv-color-badge-bg, #F1F5F9);
    border: 1px solid var(--sidv-color-border, #E2E8F0);
    border-radius: 8px;
    color: var(--sidv-color-heading, #0D2137);
    font-size: 0.825rem;
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sidv-product-attributes__item:hover .sidv-product-attributes__badge {
    border-color: rgba(255, 152, 0, 0.3);
    background-color: #FFFFFF;
}

/*==================================================
RESPONSIVE DESIGN
==================================================*/

@media (max-width: 768px) {
    .sidv-product-attributes__grid {
        border-radius: 14px;
    }

    .sidv-product-attributes__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.875rem 1rem;
    }

    .sidv-product-attributes__label {
        flex: unset;
        font-size: 0.825rem;
    }

    .sidv-product-attributes__value-wrapper {
        width: 100%;
        justify-content: flex-start;
    }

    .sidv-product-attributes__value {
        text-align: left;
    }

    .sidv-product-attributes__badges {
        justify-content: flex-start;
    }
}