/* ===================================
   PREMIUM PRODUCT ATTRIBUTE SWATCHES
   Competitive with Shein / Temu / Amazon
   For product cards & product detail pages
   =================================== */

/* --- Attribute Section Container --- */
.product-attributes.product-attribute-swatches {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* --- Attribute Title (Color: / Size:) --- */
.bb-product-attribute-swatch-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 4px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* --- Swatch List (shared) --- */
.bb-product-attribute-swatch-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* ===================================
   VISUAL / COLOR / IMAGE SWATCHES
   Keep large for image visibility
   =================================== */
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item {
    border-radius: 8px !important;
    box-shadow: none !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    overflow: visible !important;
}

/* Image/color circle — keep large (40px) for images */
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-text-display {
    width: 65px !important;
    height: 70px !important;
    border-radius: 8px !important;
    display: block !important;
    cursor: pointer !important;
    position: relative !important;
    border: 2px solid #e5e5e5 !important;
    transition: all 0.2s ease !important;
    transform: none !important;
    -webkit-transform: none !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Hover — subtle highlight */
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:hover .bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:hover .bb-product-attribute-text-display {
    border-color: #999 !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Selected — orange brand border + glow */
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=radio]:checked~.bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=radio]:checked~.bb-product-attribute-text-display,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-text-display {
    border-color: #FF6B35 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2) !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* Override the default border ring ::before — replace with orange check badge */
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=radio]:checked~.bb-product-attribute-swatch-display::before,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-swatch-display::before,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=radio]:checked~.bb-product-attribute-text-display::before,
.bb-product-attribute-swatch-list.visual-swatch .bb-product-attribute-swatch-item:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-text-display::before {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    right: -4px !important;
    left: auto !important;
    top: auto !important;
    width: 16px !important;
    height: 16px !important;
    background: #FF6B35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 9px 9px !important;
    border: 2px solid #fff !important;
    border-radius: 50% !important;
    display: block !important;
    z-index: 3 !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ===================================
   TEXT / SIZE SWATCHES — Premium Pills
   =================================== */
.bb-product-attribute-swatch-list.text-swatch li {
    list-style: none !important;
    margin: 0 !important;
}

.bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.text-swatch li .bb-product-attribute-text-display {
    background: #fff !important;
    border: 1.5px solid #d4d4d4 !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 38px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Hover */
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled):hover .bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled):hover .bb-product-attribute-text-display {
    border-color: #FF6B35 !important;
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
}

/* Selected — bold orange border + corner check triangle */
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=radio]:checked~.bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=radio]:checked~.bb-product-attribute-text-display,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-swatch-display,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-text-display {
    border-color: #FF6B35 !important;
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
    font-weight: 700 !important;
}

/* Triangle in bottom-right corner */
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=radio]:checked~.bb-product-attribute-swatch-display::before,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=radio]:checked~.bb-product-attribute-text-display::before,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-swatch-display::before,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-text-display::before {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    inset-inline-end: -1px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 0 18px 18px !important;
    border-color: transparent transparent #FF6B35 transparent !important;
    border-radius: 0 0 4px 0 !important;
}

/* Small white checkmark inside the triangle */
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=radio]:checked~.bb-product-attribute-swatch-display::after,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=radio]:checked~.bb-product-attribute-text-display::after,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-swatch-display::after,
.bb-product-attribute-swatch-list.text-swatch li:not(.disabled) input[type=checkbox]:checked~.bb-product-attribute-text-display::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important;
    position: absolute !important;
    bottom: 0px !important;
    right: 0px !important;
    inset-inline-end: 0px !important;
    width: 10px !important;
    height: 10px !important;
    line-height: 1 !important;
    overflow: visible !important;
    z-index: 2 !important;
}

/* ===================================
   DISABLED SWATCHES — Clean Look
   =================================== */
.bb-product-attribute-swatch-item.disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
}

.bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display,
.bb-product-attribute-swatch-item.disabled .bb-product-attribute-swatch-display {
    color: #aaa !important;
    cursor: not-allowed !important;
    text-decoration: line-through !important;
    border-color: #e5e5e5 !important;
    background: #fafafa !important;
}

/* Remove the ugly dashed X lines from base theme */
.bb-product-attribute-swatch-item.disabled .bb-product-attribute-swatch-display::before,
.bb-product-attribute-swatch-item.disabled .bb-product-attribute-swatch-display::after,
.bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display::before,
.bb-product-attribute-swatch-item.disabled .bb-product-attribute-text-display::after {
    display: none !important;
}

/* ===================================
   TOOLTIP — Refined
   =================================== */
.bb-product-attribute-swatch-item-tooltip {
    background: #1a1a1a !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.bb-product-attribute-swatch-item-tooltip::before {
    border-top-color: #1a1a1a !important;
}

/* ===================================
   VARIATIONS CONTAINER IN PRODUCT BOX
   =================================== */
.ps-product__variations {
    margin-bottom: 12px !important;
    padding: 0 !important;
}

.ps-product__variations .bb-product-attribute-swatch {
    margin-bottom: 8px !important;
}

/* ===================================
   PRODUCT PROPERTY OPTIONS
   (Radio pills, Dropdowns, Text inputs)
   Matches the premium swatch design
   =================================== */

/* --- Section container --- */
.pr_switch_wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* --- Each option group --- */
.product-option {
    margin-bottom: 0 !important;
}

.product-option-item-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* --- Option label (RAM / HDD / etc.) --- */
.product-option-item-label label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 2px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* --- Radio option values container --- */
.product-option-item-values {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

/* --- Hide native radio inputs --- */
.form-radio input[type="radio"] {
    display: none !important;
}

/* --- Radio label → pill button --- */
.form-radio label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #fff !important;
    border: 1.5px solid #d4d4d4 !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    min-width: 42px !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    user-select: none !important;
}

/* Remove leading   spacing artifact */
.form-radio label br {
    display: none !important;
}

/* Hover */
.form-radio:hover label {
    border-color: #FF6B35 !important;
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
}

/* Selected pill (checked radio → sibling label) */
.form-radio input[type="radio"]:checked+label {
    border-color: #FF6B35 !important;
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
    font-weight: 700 !important;
}

/* Corner triangle check on selected */
.form-radio input[type="radio"]:checked+label::before {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 0 18px 18px !important;
    border-color: transparent transparent #FF6B35 transparent !important;
    border-radius: 0 0 4px 0 !important;
}

.form-radio input[type="radio"]:checked+label::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 10px !important;
    height: 10px !important;
    z-index: 2 !important;
    overflow: visible !important;
    line-height: 1 !important;
}

/* --- Extra price badge (+$10.00) --- */
.form-radio label .extra-price,
.product-option-item-label .extra-price {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #FF6B35 !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* --- Dropdown / Select --- */
.product-option .form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    border: 1.5px solid #d4d4d4 !important;
    border-radius: 8px !important;
    padding: 9px 36px 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 14px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    min-width: 180px !important;
    width: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-shadow: none !important;
    height: auto !important;
}

.product-option .form-select:hover,
.product-option .form-select:focus {
    border-color: #FF6B35 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12) !important;
    outline: none !important;
}

/* --- Text input field (e.g. "your choice") --- */
.product-option .form-control[type="text"],
.product-option .form-control[type="email"],
.product-option .form-control {
    border: 1.5px solid #d4d4d4 !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: #333 !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 360px !important;
}

.product-option .form-control:hover,
.product-option .form-control:focus {
    border-color: #FF6B35 !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12) !important;
    outline: none !important;
}

/* --- Inline extra-price label for text fields --- */
.option-field .product-option-item-label label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.option-field .product-option-item-label .extra-price {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #FF6B35 !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    line-height: 1.4 !important;
}

/* ===================================
   CHECKBOX OPTIONS — Multi-select Pills
   Distinct from radio: uses rounded square
   check badge instead of corner triangle
   =================================== */

/* Hide native checkbox */
.form-checkbox input[type="checkbox"] {
    display: none !important;
}

/* Checkbox label → pill button (same base as radio) */
.form-checkbox label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #fff !important;
    border: 1.5px solid #d4d4d4 !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: visible !important;
    transition: all 0.2s ease !important;
    min-width: 42px !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    user-select: none !important;
}

/* Hover */
.form-checkbox:hover label {
    border-color: #FF6B35 !important;
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
}

/* Selected — orange border + fill */
.form-checkbox input[type="checkbox"]:checked+label {
    border-color: #FF6B35 !important;
    color: #FF6B35 !important;
    background: #FFF8F5 !important;
    font-weight: 700 !important;
}

/* Rounded square check badge (top-right) — differentiates from radio */
.form-checkbox input[type="checkbox"]:checked+label::before {
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    width: 18px !important;
    height: 18px !important;
    background: #FF6B35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 10px 10px !important;
    border: 2px solid #fff !important;
    border-radius: 4px !important;
    display: block !important;
    z-index: 3 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}

/* Extra price on checkbox labels */
.form-checkbox label .extra-price {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #FF6B35 !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}