/**
 * Size Selector Styling - Journal3 Theme
 * Matches Journal3's product option styling
 */

/* Main container */
.size-selector-widget {
    --size-selector-font-default: var(--j-font_size-default, 14px);
    --size-selector-font-small: var(--j-font_size-small, 13px);
    margin-bottom: 20px;
}

/* Loading state */
.size-selector-loading {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: var(--size-selector-font-default);
}

/* Gender selector buttons */
.size-gender-selector {
    display: flex;
    gap: 10px;
}

.btn-gender {
    padding: 8px 16px;
    cursor: pointer;
    font-size: var(--size-selector-font-default);
    line-height: 1.4;
}

.btn-gender:hover {
    border-color: #999;
}

.btn-gender.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* Grid layout for size selector: label on left spanning rows, toolbar + sizes + error on right */
#size-selector-container .form-group.product-option-radio {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px 16px;
    align-items: start;
}

#size-selector-container .form-group.product-option-radio > .control-label {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
}

/* Toolbar row: system buttons + size guide */
#size-selector-container .form-group.product-option-radio > .size-toolbar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* Size options row */
#size-selector-container .form-group.product-option-radio > .size-options-row {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Error message row */
#size-selector-container .form-group.product-option-radio > .size-error {
    grid-column: 2;
    grid-row: 3;
    margin-top: 5px;
}

/* Has-error state styling */
#size-selector-container .form-group.has-error .control-label {
    color: #a94442;
}

#size-selector-container .form-group.has-error .radio .option-wrapper {
    border-color: #a94442;
}

/* When gender selector is present, adjust grid for 4 rows */
#size-selector-container .form-group.product-option-radio:has(.size-gender-selector) {
    grid-template-rows: auto auto auto auto;
}

#size-selector-container .form-group.product-option-radio:has(.size-gender-selector) > .control-label {
    grid-row: 1 / 5;
}

#size-selector-container .form-group.product-option-radio > .size-gender-selector {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    gap: 8px;
}

#size-selector-container .form-group.product-option-radio:has(.size-gender-selector) > .size-toolbar {
    grid-row: 2;
}

#size-selector-container .form-group.product-option-radio:has(.size-gender-selector) > .size-options-row {
    grid-row: 3;
}

#size-selector-container .form-group.product-option-radio:has(.size-gender-selector) > .size-error {
    grid-row: 4;
}



/* Size system selector */
.size-system-selector {
    display: flex;
    gap: 5px;
}

.btn-system {
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--size-selector-font-small);
    line-height: 1.4;
    min-width: 50px;
}

.btn-system:hover {
    background: #f5f5f5;
}

.btn-system.active {
    background: rgb(225,90,40);
    color: #fff;
}

/* Size guide link */
.btn-size-guide {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #666;
    text-decoration: none;
    font-size: var(--size-selector-font-small);
    line-height: 1.4;
    padding: 6px 10px;
}

.btn-size-guide:hover {
    color: #333;
    text-decoration: underline;
}

/* Size options row */
.size-options-row {
    margin-top: 5px;
}

/* Size guide modal */
/* .size-guide-modal .modal-body {
    padding: 20px;
}

.size-guide-modal table {
    margin-top: 15px;
}

.size-guide-modal h5 {
    font-size: var(--size-selector-font-default);
    font-weight: 600;
    margin-bottom: 15px;
} */

/* Radio button style sizes (Journal3 compatible) */
#size-selector-container .radio {
    display: inline-block;
    margin: 0 5px 5px 0;
}

#size-selector-container .radio label {
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#size-selector-container .radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}


#size-selector-container .radio .option-wrapper:hover {
    border-color: #999;
    background: #f9f9f9;
}

/* Selected state - using class added by JavaScript */
#size-selector-container .radio.selected .option-wrapper {
    border-color: #333;
    background: #333;
    color: #fff;
}

#size-selector-container .radio.selected .option-wrapper .option-value {
    color: #fff;
}

/* Also keep CSS-based :checked state as fallback */
#size-selector-container .radio input[type="radio"]:checked + .option-wrapper {
    border-color: #333;
    background: #333;
    color: #fff;
}

/* Focus state for accessibility */
#size-selector-container .radio input[type="radio"]:focus + .option-wrapper {
    box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .size-selector-widget {
        --size-selector-font-small: 14px;
    }

    /* Stack layout on mobile */
    #size-selector-container .form-group.product-option-radio {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        gap: 8px;
    }

    #size-selector-container .form-group.product-option-radio > .control-label {
        grid-column: 1;
        grid-row: 1;
    }

    #size-selector-container .form-group.product-option-radio > .size-toolbar {
        grid-column: 1;
        grid-row: 2;
    }

    #size-selector-container .form-group.product-option-radio > .size-options-row {
        grid-column: 1;
        grid-row: 3;
    }

    #size-selector-container .form-group.product-option-radio > .size-error {
        grid-column: 1;
        grid-row: 4;
    }

    .size-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 8px;
    }

    .btn-size {
        padding: 10px 6px;
        font-size: var(--size-selector-font-small);
        min-height: 45px;
    }

    #size-selector-container .radio .option-wrapper {
        padding: 8px 12px;
        font-size: var(--size-selector-font-small);
        min-width: 45px;
    }
}