/**
 * File: /shared/css/product-options.css
 * Purpose: Shared product option controls and selection states.
 *
 * Defines reusable presentation for product color swatches,
 * SVG-based options, size selectors, and disabled option states.
 *
 * Brand-specific visual values are supplied through CSS custom properties.
 * Product availability and selection logic belongs to application JavaScript.
 *
 * Dependencies:
 * - /shared/css/tokens.css
 * - /brand/{brand}/css/tokens.css
 *
 * This file must not contain:
 * - Hard-coded brand-specific colors
 * - Product availability logic
 * - Product data
 * - JavaScript behavior
 */


 /* ==========================================
    COLOR SWATCHES CONTAINER
    ========================================== */

 .color-swatches {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

   gap: 15px;
   padding: 10px;
 }

/**
 * Product color swatches display two configurable colors.
 *
 * --bg-color and --font-color are product-level values supplied
 * by the product/customization layer rather than brand CSS.
 */

 .swatch-circle,
 .circle-swatch {
   width: 30px;
   height: 30px;
 
   border: 1px solid var(--color-border-dark);
   border-radius: 50%;
 
   background-image: linear-gradient(
     to right,
     var(--bg-color) 50%,
     var(--font-color) 50%
   );
 }
 
 
 /* ==========================================
    COLOR SWATCH RADIO CONTROL
    ========================================== */
 
 .circle-swatch input[type="radio"] {
   display: none;
 }
 
 
 /* ==========================================
    SELECTED COLOR SWATCH
    ========================================== */
 
 .circle-swatch input[type="radio"]:checked + .swatch-circle {
   outline: 3px solid var(
     --brand-selection,
     var(--brand-primary)
   );
 
   outline-offset: 3px;
 }
 
 
 /* ==========================================
    SVG OPTION SELECTOR
    ========================================== */
 
 .svg-checkbox {
   display: inline-block;
   position: relative;
 
   padding: 5px;
 
   border: 2px solid transparent;
   border-radius: 50%;
 
   cursor: pointer;
 
   transition:
     border-color 0.3s ease-in-out,
     box-shadow 0.3s ease-in-out;
 }
 
 
 /* ==========================================
    SELECTED SVG OPTION
    ========================================== */
 
 .svg-checkbox.selected {
   border-color: var(
     --brand-control-accent,
     var(--brand-primary)
   ) !important;
 
   box-shadow:
     0 0 5px
     var(
       --brand-control-accent,
       var(--brand-primary)
     );
 }
 
 
 /* ==========================================
    SVG OPTION CONTAINER
    ========================================== */
 
 .checkbox-container {
   display: flex;
   gap: 10px;
 }
 
 
 /* ==========================================
    SIZE OPTIONS CONTAINER
    ========================================== */
 
 .size-options {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;

   gap: 15px;
   padding: 10px;
 }


 /* ==========================================
    SINGLE SIZE TEXT
    ========================================== */

 .single-size-text {
   padding: 10px 10px 10px 0;
 }
 
 
 /* ==========================================
    SIZE BUTTON
    ========================================== */
 
 .size-btn {
   min-width: 100px;
   padding: 0;
 
   background-color: var(
     --brand-primary-soft,
     var(--color-surface-muted)
   );
 
   color: var(--color-text-secondary);
 
   border: 1px solid var(--color-border-dark);
   border-radius: 8px;
 
   font-size: 1.1rem;
   font-weight: 600;
   text-align: center;
 
   cursor: pointer;
 
   box-shadow: var(--shadow-sm);
 
   transition:
     background-color 0.25s ease,
     border-color 0.25s ease,
     color 0.25s ease,
     box-shadow 0.25s ease,
     transform 0.25s ease;
 }
 
 
 /* ==========================================
    SIZE BUTTON HOVER
    ========================================== */
 
 .size-btn:hover:not(.disabled-size) {
   background-color: var(
     --brand-primary-soft,
     var(--color-surface-muted)
   );
 
   border-color: var(--color-border-hover);
 
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
 
   transform: translateY(-2px);
 }
 
 
 /* ==========================================
    SIZE BUTTON FOCUS
    ========================================== */
 
 /*
  * Remove browser/Bootstrap focus glow.
  *
  * Selected buttons receive their own brand-colored
  * outline in the selected-state rules below.
  */
 
 .size-btn:focus,
 .size-btn:focus-visible {
   box-shadow: none;
 }
 
 
 /* ==========================================
    SELECTED SIZE
    ========================================== */
 
 /*
  * Match the selected color-swatch treatment:
  *
  * - 3px brand selection outline
  * - 3px outline offset
  */
 
 .size-btn.selected,
 .size-btn.selected:focus,
 .size-btn.selected:focus-visible {
   background-color: var(
     --brand-primary-soft,
     var(--brand-primary)
   );
 
   color: var(
     --brand-text-on-primary,
     var(--color-surface)
   );
 
   border-color: var(
     --brand-selection,
     var(--brand-primary)
   );
 
   outline: 3px solid var(
     --brand-selection,
     var(--brand-primary)
   );
 
   outline-offset: 3px;
 
   box-shadow: none;
 
   transform: scale(1.03);
 }
 
 
 /* ==========================================
    SIZE BUTTON ACTIVE
    ========================================== */
 
 .size-btn:active:not(.disabled-size):not(.selected) {
   transform: scale(0.97);
 }
 
 
 /* ==========================================
    SELECTED SIZE ACTIVE
    ========================================== */
 
 .size-btn.selected:active {
   outline: 3px solid var(
     --brand-selection,
     var(--brand-primary)
   );
 
   outline-offset: 3px;
 
   box-shadow: none;
 
   transform: scale(0.97);
 }
 
 
 /* ==========================================
    DISABLED SIZE
    ========================================== */
 
 .size-btn.disabled-size {
   opacity: 0.4;
   cursor: not-allowed !important;
 }