/* ==========================================================================
   My Team Page Styles
   Emblem editor and option selectors
   ========================================================================== */

/* ==========================================================================
   Emblem Editor
   ========================================================================== */

.emblem-editor__preview {
    text-align: center;
    margin-bottom: 20px;
}

.emblem-editor__section {
    margin-bottom: 15px;
    text-align: center;
}

/* Option Selector Boxes (shapes, patterns) */
.emblem-editor__option {
    display: inline-block;
    padding: 8px;
    margin: 4px;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1);
    transition: border-color 0.2s ease;
}

.emblem-editor__option:hover {
    border-color: rgba(0, 123, 255, 0.5);
}

.emblem-editor__option--selected {
    border-color: #007bff;
}

/* Pattern option with text */
.emblem-editor__option--pattern {
    padding: 8px 12px;
    font-size: 14px;
}

/* Color option */
.emblem-editor__color {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 3px;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.emblem-editor__color:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.emblem-editor__color--selected {
    border-color: white;
}

/* ==========================================================================
   Team Name Editor
   ========================================================================== */

.team-name-preview {
    font-size: 24px;
    font-weight: bold;
    padding: 15px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    text-align: center;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Emblem Viewer
   ========================================================================== */

.emblem-viewer {
    cursor: pointer;
    text-align: center;
}