/**
 * Product Options Custom Styling
 * YITH WooCommerce Product Add-ons & Extra Options
 */

/* ============================================
   HIDE YITH OPTIONS UNTIL VARIATION SELECTED
   ============================================ */

#yith-wapo-container {
    display: none !important;
}

/* Hide YITH's own price summary table — replaced by our floating cart */
#wapo-total-price-table {
    display: none !important;
}


#yith-wapo-container.wapo-variation-active {
    display: block !important;
}

/* ============================================
   YITH OPTION BLOCK TOGGLES
   Mirrors live-site: border + right-side chevron
   ============================================ */

/* Block wrapper — mirrors .product-options .option */
.yith-wapo-addon.wapo-toggle {
    position: relative;
    border: 2px dashed #e9ecef;
    border-radius: 2px;
    margin-bottom: 10px;
    padding-left: 10px;
    cursor: pointer;
    /* no overflow:hidden — YITH JS uses display:none on .options-container */
}

/* Clickable header row — relative so chevron can be absolute */
.yith-wapo-addon.wapo-toggle .addon-header {
    position: relative;
    padding: 10px 36px 10px 0; /* right padding reserves space for chevron */
    cursor: pointer;
}

/* Title — mirrors div.product-options div.option h6 */
.yith-wapo-addon.wapo-toggle .wapo-addon-title {
    display: inline-block !important;
    flex: unset !important;          /* cancel YITH's flex:0 0 100% */
    cursor: pointer;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    margin: 0 !important;            /* cancel YITH's margin-bottom:25px */
    padding: 0;
}

/* Remove YITH's default left-side dashicon */
.yith-wapo-addon.wapo-toggle .wapo-addon-title:before {
    display: none !important;
    content: '' !important;
}

/* Right-side chevron — absolute so flex layout can't affect it */
.yith-wapo-addon.wapo-toggle .addon-header:after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: translateY(-65%) rotate(45deg); /* points down (closed) */
    transition: transform 0.25s ease;
}

/* Rotate chevron up when block is open */
.yith-wapo-addon.wapo-toggle.toggle-open .addon-header:after {
    transform: translateY(-35%) rotate(-135deg); /* points up (open) */
}

/* Also override the same YITH rule that adds margin-bottom:25px */
.yith-wapo-block .yith-wapo-addon:not(.empty-title).wapo-toggle .wapo-addon-title {
    margin-bottom: 0 !important;
}

/* Options content area padding */
.yith-wapo-addon.wapo-toggle .options-container {
    padding: 0 12px 12px 0;
}

/* Gap between title and options when open — YITH applies toggle-open to the h3 */
h3.wapo-addon-title.toggle-open {
    padding-bottom: 25px !important;
}

/* $0 options show "Included" instead of (+$0.00) */
.yith-price-included {
    color: #28a745;
    font-weight: 600;
}

/* ============================================
   YITH NUMBER FIELD — horizontal layout
   Label + price left, compact input right
   Targets .yith-wapo-addon-type-number to match
   YITH's own specificity (41pts) so our rules win.
   ============================================ */

/* Row: option-container left, input right */
.yith-wapo-addon.yith-wapo-addon-type-number .yith-wapo-option div.label {
    display: flex !important;
    align-items: center;
    //justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
}

.yith-wapo-addon.yith-wapo-addon-type-number .yith-wapo-option .option-container {
    //flex: 1 1 auto;
    min-width: 0;
}
.option-price .woocommerce-Price-amount.amount {
    color: #28a745;
	font-weight:700;
}
.yith-wapo-block .yith-wapo-addon .quantity-addon {
    border: 1px dotted #ccc;
    padding: 12px 12px;
}
/* Input wrapper stays compact on the right */
.yith-wapo-addon.yith-wapo-addon-type-number .yith-wapo-option .input-number.quantity {
    flex-shrink: 0;
    max-width: none;    /* cancel YITH's max-width:80px on .quantity */
}

/* Compact input — native spinners kept intact */
.yith-wapo-addon.yith-wapo-addon-type-number .yith-wapo-option input[type="number"].yith-wapo-option-value {
    width: 60px;
    padding: 4px 4px 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 14px;
    text-align: left;
    background: #fff;
}

/* Hide (+) brackets and sign — show just the price amount */
.yith-wapo-addon.yith-wapo-addon-type-number .yith-wapo-option .option-price .brackets,
.yith-wapo-addon.yith-wapo-addon-type-number .yith-wapo-option .option-price .sign {
    display: none;
}

/* ============================================
   SIZE VARIATION BUTTON GRID
   ============================================ */

/* Hide the original dropdown when buttons are shown */
.variations select#pa_size,
.variations select[name="attribute_pa_size"] {
    display: none !important;
}

/* Size button grid container */
.size-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
    row-gap: 0;
    margin: 0.5rem 0 0.5rem;
    align-items: flex-start;
}

/* Individual size button */
.size-button {
    padding: 16px 8px !important;
    margin-bottom: 8px !important;
    display: block;
    font-size: 1em !important;
    border: dotted 2px #e9ecef !important;
    background: #fff;
    color: #000;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
    min-width: 48px;
    line-height: 1;
}

.size-button:hover:not(.disabled) {
    border-color: #adb5bd !important;
    background: #f8f9fa;
}

/* Selected — black fill, white text, dotted border remains */
.size-button.selected {
    background-color: #000 !important;
    color: #fff !important;
    border: dotted 2px #e9ecef !important;
}

.size-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.size-button.disabled:hover {
    border-color: #e9ecef !important;
    background: #fff;
}

/* ============================================
   HIDE OPTIONS UNTIL VARIATION SELECTED
   ============================================ */

/* Hide options until variation is selected */
.tm-extra-product-options {
    display: none !important;
}

/* Show options when variation is selected */
.tm-extra-product-options.active {
    display: block !important;
}

/* ============================================
   ACCORDION - SECTION HEADERS
   ============================================ */

/* Section header - make clickable */
.tm-extra-product-options .tm-section-label,
.tm-extra-product-options .tc-epo-label.tm-section-label {
    cursor: pointer !important;
    position: relative;
    padding: 1rem 2.5rem 1rem 0 !important;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.5rem !important;
    transition: all 0.3s ease;
    user-select: none;
    background: transparent !important;
}

.tm-extra-product-options .tm-section-label:hover,
.tm-extra-product-options .tc-epo-label.tm-section-label:hover {
    background-color: #f9f9f9 !important;
}

/* Accordion arrow */
.tm-extra-product-options .tm-section-label:after,
.tm-extra-product-options .tc-epo-label.tm-section-label:after {
    content: "\25BC";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #666;
    transition: transform 0.3s ease;
}

.tm-extra-product-options .cpf-section.tc-accordion-open .tm-section-label:after,
.tm-extra-product-options .cpf-section.tc-accordion-open .tc-epo-label.tm-section-label:after {
    transform: translateY(-50%) rotate(180deg);
}

/* Hide section content by default (only if accordion is initialized with headers) */
.tm-extra-product-options.accordion-initialized .cpf-section:not(.tc-accordion-open) .tc-element-inner-wrap,
.tm-extra-product-options.accordion-initialized .cpf-section:not(.tc-accordion-open) .tc-section-fields {
    display: none !important;
}

.tm-extra-product-options.accordion-initialized .cpf-section:not(.tc-accordion-open) ul.tmcp-ul-wrap {
    display: none !important;
}

/* ============================================
   HORIZONTAL THUMBNAIL LAYOUT (oplook.png)
   ============================================ */

/* Options list - horizontal flex layout */
.tm-extra-product-options ul.tmcp-ul-wrap {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
}

/* Individual option - thumbnail card */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap {
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    max-width: 150px;
    min-width: 130px;
    margin: 0 !important;
    padding: 0 0 0.5rem 0;
    background: transparent;
    border: none !important;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative !important;
}

.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap:hover {
    background: transparent;
}

/* Selected state */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-active {
    border: none !important;
    background-color: transparent !important;
}

/* Image thumbnail wrapper */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-label-wrap {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
}

/* Image thumbnail */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-label-wrap img,
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-image {
    max-width: 130px !important;
    max-height: 100px !important;
    width: 130px !important;
    height: auto !important;
    object-fit: cover;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Hide the actual radio input */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Radio button indicator (circle at bottom-right of image) - using pseudo element on image wrapper */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-label-wrap::before {
    content: "" !important;
    position: absolute !important;
    bottom: 3.4rem !important;
    right: 0.4rem !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #999 !important;
    border-radius: 50% !important;
    background: white !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    display: block !important;
}

.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap.tc-active .tc-label-wrap::before {
    border-color: #666 !important;
    background-color: white !important;
    box-shadow: inset 0 0 0 4px white, inset 0 0 0 16px #666 !important;
}

/* Option label/name */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tm-label,
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tm-epo-field-label {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    margin: 0.25rem 0 0.15rem 0 !important;
    color: #333 !important;
    text-align: center;
    line-height: 1.2;
}

/* Price */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .price,
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-price,
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .amount {
    font-size: 0.75rem !important;
    color: #28a745 !important;
    font-weight: 400 !important;
    margin-top: 0 !important;
    display: block !important;
    text-align: center;
}

/* "Included" text styling */
.tm-extra-product-options .included-text {
    color: #28a745 !important;
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    display: inline-block !important;
}

/* Hide unnecessary wrappers */
.tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tmcp-field-wrap-inner {
    width: 100%;
}

/* ============================================
   CLEAN UP LAYOUT
   ============================================ */

.tm-extra-product-options .cpf-section {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap {
        max-width: 110px;
        min-width: 90px;
        padding: 0;
    }

    .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-label-wrap img,
    .tm-extra-product-options ul.tmcp-ul-wrap li.tmcp-field-wrap .tc-image {
        max-width: 100px !important;
        width: 100px !important;
        max-height: 80px !important;
    }

    .tm-extra-product-options .tm-section-label,
    .tm-extra-product-options .tc-epo-label.tm-section-label {
        font-size: 1.1rem;
        padding: 0.75rem 2rem 0.75rem 0 !important;
    }

    .tm-extra-product-options ul.tmcp-ul-wrap {
        gap: 1rem !important;
    }
}