/* ============================================================
   INVI STUDIO — Review Modal Avatar & Color Picker Styles
   ============================================================ */

/* Avatar selection section */
.ww-review-modal__avatar-selection {
    margin-bottom: var(--ww-base-space-20);
}

.ww-review-modal__avatars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: var(--ww-base-space-12);
    margin-bottom: var(--ww-base-space-16);
}

.ww-review-modal__avatar-btn {
    width: 60px;
    height: 60px;
    border-radius: var(--ww-base-radius-12);
    border: 2px solid var(--ww-base-glass-10);
    background: var(--ww-base-glass-05);
    cursor: pointer;
    transition: all var(--ww-base-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ww-review-modal__avatar-btn:hover {
    border-color: var(--ww-base-cyan-500);
    background: var(--ww-base-glow-cyan-10);
    transform: scale(1.05);
}

.ww-review-modal__avatar-btn--selected {
    border-color: var(--ww-base-cyan-500);
    background: var(--ww-base-glow-cyan);
    box-shadow: 0 0 0 3px var(--ww-base-glow-cyan-orb);
}

.ww-review-modal__avatar-btn .avatar-preview {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.ww-review-modal__avatar-upload {
    flex-direction: column;
    gap: var(--ww-base-space-4);
    font-size: var(--ww-base-font-12);
    color: var(--ww-invi-page-text-muted);
}

/* Color picker section */
.ww-review-modal__color-picker {
    background: var(--ww-base-glass-bg);
    border: 1px solid var(--ww-base-glass-border);
    border-radius: var(--ww-base-radius-12);
    padding: var(--ww-base-space-16);
    margin-bottom: var(--ww-base-space-20);
}

.ww-review-modal__color-label {
    display: block;
    font-size: var(--ww-base-font-14);
    font-weight: var(--ww-base-weight-medium);
    color: var(--ww-invi-page-text);
    margin-bottom: var(--ww-base-space-12);
}

.ww-review-modal__color-controls {
    display: flex;
    align-items: center;
    gap: var(--ww-base-space-16);
    flex-wrap: wrap;
}

.ww-review-modal__color-controls input[type="color"] {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: var(--ww-base-radius-8);
    cursor: pointer;
    background: transparent;
}

.ww-review-modal__color-presets {
    display: flex;
    gap: var(--ww-base-space-8);
    flex-wrap: wrap;
}

.color-preset {
    width: 36px;
    height: 36px;
    border-radius: var(--ww-base-radius-8);
    border: 2px solid var(--ww-base-glass-border-hover);
    cursor: pointer;
    transition: all var(--ww-base-transition-fast);
    position: relative;
}

.color-preset--cyan     { background: #00D9FF; }
.color-preset--red      { background: #FF6B6B; }
.color-preset--teal     { background: #4ECDC4; }
.color-preset--blue     { background: #45B7D1; }
.color-preset--green    { background: #96CEB4; }
.color-preset--yellow   { background: #FFEAA7; }
.color-preset--plum     { background: #DDA0DD; }
.color-preset--orange   { background: #FFA500; }

.color-preset:hover {
    transform: scale(1.1);
    border-color: var(--ww-base-glass-border-hover);
}

.color-preset:active {
    transform: scale(0.95);
}

/* Custom upload section */
.ww-review-modal__custom-upload {
    margin-top: var(--ww-base-space-20);
    padding-top: var(--ww-base-space-20);
    border-top: 1px solid var(--ww-base-glass-border);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ww-review-modal__avatars {
        grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
        gap: var(--ww-base-space-8);
    }
    
    .ww-review-modal__avatar-btn {
        width: 50px;
        height: 50px;
    }
    
    .ww-review-modal__avatar-btn .avatar-preview {
        width: 40px;
        height: 40px;
    }
    
    .ww-review-modal__color-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ww-base-space-12);
    }
    
    .ww-review-modal__color-presets {
        width: 100%;
        justify-content: space-between;
    }
    
    .color-preset {
        width: 32px;
        height: 32px;
    }
}