/**
 * PEWC Webbing Slings - Card-style Restyling
 * Transforms image swatches into clean card layout
 * To be enqueued via wp_enqueue_style in your theme or child theme
 */

/* =============================================
   STEP CONTAINER WRAPPER
   ============================================= */

.rivmedia-wcfaq-panel {
  max-width: 1135px;
  margin: 0 auto;
}
.pewc-product-extra-groups {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pewc-product-extra-groups > li.pewc-item {
  background: #fdfdfd;
  border: 1px solid #f1f3f6;
 
  padding: 0px 13px;
  margin-bottom: 20px;
}

.pewc-hex {
  display: block;
  height: 60px;
  padding: 4px;
  border: 3px solid #f1f3f6;
 
}

.pewc-item.pewc-group.pewc_group_148412_148418.pewc-group-radio.pewc-item-radio.pewc-field-148418.pewc-field-count-1.pewc-option-list.pewc-hide-option-price.pewc-field-has-condition.pewc-active-field {
  padding: 20px;
}

.pewc-item.pewc-group[class*="pewc-field-count-"].pewc-option-list {
    padding:20px;
}

.pewc-item.pewc-group.pewc-group-select.pewc-item-select.pewc-hide-option-price[class*="pewc-field-count-"] {
    padding: 10px;
}
.pewc-group-heading-wrapper h3 {
  font-size: 18px!important;
}
/* =============================================
   FIELD LABEL - "STEP" STYLE HEADERS
   ============================================= */
.pewc-product-extra-groups h4.pewc-field-label {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #3a3a3a;
    margin: 0 0 20px 0;
    padding: 0;
}

.pewc-product-extra-groups h4.pewc-field-label .required {
    color: transparent;
    font-size: 0;
}

/* =============================================
   IMAGE SWATCH GRID - 6 COLUMNS
   ============================================= */
.pewc-radio-images-wrapper.pewc-columns-3 {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 768px) {
    .pewc-radio-images-wrapper.pewc-columns-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .pewc-radio-images-wrapper.pewc-columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =============================================
   INDIVIDUAL SWATCH CARD
   ============================================= */
.pewc-radio-image-wrapper.pewc-radio-checkbox-image-wrapper {
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pewc-radio-image-wrapper label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 2px solid #f1f3f6 !important;
    
    padding: 5px 5px 5px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    min-height: 90px !important;
    text-align: center !important;
    position: relative !important;
}

.pewc-radio-image-wrapper label:hover {
    border-color: #f1f3f6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Selected state */
.pewc-radio-image-wrapper label.pewc-active,
.pewc-radio-image-wrapper input[type="radio"]:checked + img + .pewc-hex + .pewc-radio-image-desc + .pewc-theme-element,
.pewc-radio-image-wrapper.pewc-selected label,
.pewc-radio-image-wrapper label.selected {
    border-color: #c4956a !important;
    box-shadow: 0 0 0 2px #c4956a !important;
}

/* JS-driven selected state - applied via script */
.pewc-radio-image-wrapper.is-selected label {
    border-color: #c4956a !important;
    box-shadow: 0 0 0 2px #c4956a !important;
}

/* =============================================
   HIDE THE PRODUCT IMAGES
   ============================================= */
.pewc-radio-image-wrapper label img {
    display: none !important;
}

/* =============================================
   HIDE THE RADIO BUTTON INPUT
   ============================================= */
.pewc-radio-image-wrapper label input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* =============================================
   COLOUR DOT - ENLARGED & CENTERED
   ============================================= */
.pewc-radio-image-wrapper .pewc-hex {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    order: 1 !important;
    margin: 0 0 2px 0 !important;
}

.pewc-radio-image-wrapper .pewc-hex span {
    width: 28px !important;
    height: 28px !important;
    
    display: block !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

/* =============================================
   DESCRIPTION TEXT - SHORTENED LABELS
   ============================================= */
.pewc-radio-image-desc {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pewc-radio-image-desc span {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #3a3a3a !important;
  line-height: 1.3 !important;
  display: block !important;
}
/* Price line added via JS */
.pewc-radio-image-desc .pewc-card-price {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #999 !important;
    margin-top: 2px !important;
    display: block !important;
}

/* =============================================
   THEME ELEMENT (checkmark area)
   ============================================= */
.pewc-radio-image-wrapper .pewc-theme-element {
    display: none !important;
}

/* =============================================
   RADIO LIST (LENGTH) → PILL/CHIP STYLE
   ============================================= */

/* The length field label */
.pewc-item-radio:not(.pewc-item-image_swatch) h4.pewc-field-label {
    font-family: Inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #3a3a3a !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

/* Hide the asterisk */
.pewc-item-radio:not(.pewc-item-image_swatch) h4.pewc-field-label .required {
    color: transparent !important;
    font-size: 0 !important;
}

/* Reset the default list styles */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Each list item becomes inline */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper > li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The label becomes a pill */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper label.pewc-radio-form-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 48px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    border: 1.5px solid #d0c8be !important;
    font-family: Inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #3a3a3a !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    margin: 0 !important;
}

/* Hover state */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper label.pewc-radio-form-label:hover {
    border-color: #c4956a !important;
    background: #fef9f4 !important;
}

/* Selected / checked state */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper input[type="radio"]:checked + .pewc-radio-option-text {
    font-weight: 700 !important;
}

.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper li:has(input[type="radio"]:checked) label {
    border-color: #c4956a !important;
    background: #fef9f4 !important;
}

/* Fallback for browsers without :has() — JS will add this class */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper label.pewc-pill-active {
    border-color: #c4956a !important;
    background: #fef9f4 !important;
    font-weight: 700 !important;
}

/* Hide the actual radio input */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Remove the   spacing before the text */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper .pewc-radio-option-text {
    font-family: Inherit !important;
    font-size: 13px !important;
}

/* Hide theme element in radio pills */
.pewc-item-radio:not(.pewc-item-image_swatch) ul.pewc-checkbox-group-wrapper .pewc-theme-element {
    display: none !important;
}

/* =============================================
   HIDDEN FIELD (conditional) - keep behavior
   ============================================= */
.pewc-hidden-field {
    display: none !important;
}

.pewc-hidden-field.pewc-visible-field {
    display: block !important;
}