/* -----------------------------------------------------------
   DROPDOWN COMPONENT WRAPPER
----------------------------------------------------------- */

.thumb-select {
    position: relative;
    width: 100%;
    margin-bottom: 0;
}

/* Disabled state */
.thumb-select.disabled .thumb-select-button {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* -----------------------------------------------------------
   BUTTON (THEME-AWARE)
----------------------------------------------------------- */

.thumb-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    height: 52px;
    padding: 0 14px;

    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    cursor: pointer;

    color: var(--text-dark);

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover matches card hover border */
.thumb-select-button:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

/* Ensure text stays vertically centred */
.thumb-select-button > span {
    flex-grow: 1;
    font-size: 15px;
    display: flex;
    align-items: center;
}

/* Chevron rotation */
.selector-chevron {
    transition: transform 0.25s ease;
}

.thumb-select.open .selector-chevron {
    transform: rotate(180deg);
}

/* -----------------------------------------------------------
   BUTTON THUMBNAIL (only when hasImages = true)
----------------------------------------------------------- */

.thumb-select-button .variant-thumb-wrapper {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------------------------------
   DROPDOWN PANEL (THEME-AWARE)
----------------------------------------------------------- */

.thumb-select-panel {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;

    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 6px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
    z-index: 20;
}

/* -----------------------------------------------------------
   OPTIONS (THEME-AWARE)
----------------------------------------------------------- */

.thumb-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    cursor: pointer;
    color: var(--text-dark);

    transition: background 0.15s ease;
}

.thumb-option:hover {
    background: var(--brand-hover);
}

.thumb-option.active {
    background: var(--brand-primary);
    color: #fff;
}

/* -----------------------------------------------------------
   OPTION THUMBNAIL
----------------------------------------------------------- */

.thumb-option .variant-thumb-wrapper {
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------------------------------
   PLACEHOLDER BLOCK
----------------------------------------------------------- */

.placeholder-block {
    width: 100%;
    height: 100%;
}


/* Active/open state (panel visible) */
.thumb-select.open .thumb-select-button {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}