﻿.field-blocks{
    position:relative;
    display:inline-block;
    width:100%;
}
.field-blocks .block{
    width:calc(25% - 10px);
    float:left;
    position:relative;
    padding:0 10px 0 0;
}

.field-blocks .block input,
.field-blocks .block textarea{
    width:100% !important;
}
.quantity_discount_block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin-top: 10px;
}

.field-blocks {
    display: flex;
    flex-grow: 1;
}
.quantity_discount_block {
    border-bottom: 1px solid #ccc;
    padding: 10px;
    margin-top: 5px;
}
.block {
    flex-grow: 1;
    margin-right: 10px;
}

.block:last-child {
    margin-right: 0;
}

.block input,
.block textarea {
    width: 100%;
    box-sizing: border-box;
}

.delete_quantity_discount {
    margin-left: 20px;
    height: fit-content;
}

.panel.active {
    display: block !important;
}

/*Preview block*/

.wpiqd-swatch,
.wpiqd-minmax-offer-card {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    display: block;
    position:relative;
}

.wpiqd-swatch .reset_variations {
    display: none;
}

.wpmadu-variables-solutions form,
.wpmadu-variables-solutions .variations_form{
    margin-bottom: 0 !important;
}

.preview-block{
    width:calc(100% - 20px);
    position:relative;
    display: inline-block;
    padding:10px;
}
#quantity_discounts_preview{
    max-width: 500px;
    margin: 0 auto;
}
#quantity_discounts_preview_preview{
    max-width: 500px;
    margin: 0 auto;
}
.wpiqd-inner {
    justify-content: space-between;
}
.wpiqd-radio,
.wpiqd-middle{
    display: inline-block;
}
.wpiqd-middle {
    margin-left: 20px;
}
.wpiqd-right{
    float: right;
    text-align:right;
}

.wpiqd-inner {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 920px){
    .wpiqd-swatch.active .wpiqd-inner {
        display: grid;
        align-items: center;
    }
}

.one-block {
    flex-shrink: 0; /* Prevent the radio button container from shrinking */
}

.second-block {
    flex-grow: 1; /* Take up the remaining space */
    display: flex;
    justify-content: space-between; /* Distribute space between the middle and right sections */
    align-items: center;
}


.old-price{
    color: #c0c0c0;
}

.wpiqd-swatch,
.wpiqd-minmax-offer-card {
    cursor: pointer;
    line-height:1.3;
}

.wpiqd-swatch:hover {
    background-color: unset;
    color: unset;
}

.wpiqd-minmax-offer-card {
    cursor: default;
}

.wpiqd-minmax-offer-card .wpiqd-middle {
    margin-left: 0;
}

.wpiqd-minmax-offer-card .wpiqd-subheading {
    margin-top: 2px;
}

.wpiqd-minmax-offer-card .wpiqd-right {
    float: none;
}

.wpiqd-minmax-offer-card .wpmadu-variables-item select {
    min-width: 140px;
}

.wpiqd-minmax-offer-card .wpiqd-inner {
    align-items: flex-start;
}

.wpiqd-minmax-offer-card .second-block {
    gap: 12px;
}

@media screen and (max-width: 768px) {
    .wpiqd-minmax-offer-card .wpiqd-inner {
        display: flex;
        align-items: flex-start;
    }

    .wpiqd-minmax-offer-card .second-block {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(96px, 128px);
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .wpiqd-minmax-offer-card .wpiqd-middle {
        min-width: 0;
    }

    .wpiqd-minmax-offer-card .wpiqd-heading,
    .wpiqd-minmax-offer-card .wpiqd-subheading {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .wpiqd-minmax-offer-card .wpmadu-variables-item select {
        width: 70%;
        min-width: 0;
        max-width: 70%;
        margin-right: 10px;
    }
}

.wpiqd-swatch.active .wpiqd-radio span {
    background-color: white; /* Change the color of the custom radio button when active */
}
.blocks_3{
    display: inline-block;
    padding: 0 20px;
}
.blocks_3:first-child{
    padding-left:0;
}
.quantity-discounts-settings-label {
    display: inline-block;
    margin-right: 10px;
}

.wp-picker-container {
    display: inline-block;
    vertical-align: top;
}

.wpiqd-radio input[type="radio"] {
    display: none; /* Hide the default radio button */
}


/*Badges*/

.third-block.badge-inside{
    padding-right: 80px;
}

.third-block.badge-inside-no{
    padding-right: 0;
}

.wpiqd-badge-container{
    position: absolute;
    top: -12px;
    left: 50%; /* Centers it horizontally */
    transform: translateX(-50%); /* Shifts the badge container to the left by half its width */
    z-index: 999;
}


.wpiqd-badge-container.modern-badge_container {
    top: -12px;
    position: absolute;
    right: -8px;
    transform: inherit;
    left: inherit;
    z-index: 999;
}

.wpiqd-badge-container.modern-badge-alt-1_container,
.wpiqd-badge-container.modern-badge-alt-2_container,
.wpiqd-badge-container.modern-badge-alt-3_container,
.wpiqd-badge-container.ribbon-badge_container {
    top: -12px;
    position: absolute;
    right: -8px;
    transform: inherit;
    left: inherit;
    z-index: 999;
}

.modern-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 600 14px Sans-Serif;
    background-color: #ff0000;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.35);
    letter-spacing: 0.2px;
}

.modern-badge-alt-1,
.modern-badge-alt-2,
.modern-badge-alt-3,
.ribbon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 600 14px Sans-Serif;
    border-radius: 8px;
    padding: 6px 12px;
    letter-spacing: 0.2px;
}

.modern-badge-alt-1 {
    border-radius: 999px 999px 999px 999px;
    padding: 7px 16px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.26);
    background-image: linear-gradient(135deg, var(--badge-secondary-color, rgba(0, 0, 0, 0.18)) 0%, transparent 65%);
}

.modern-badge-alt-2 {
    border-radius: 12px 12px 12px 2px;
    padding: 7px 13px 7px 16px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 7px 16px rgba(0, 0, 0, 0.12);
    letter-spacing: 0.4px;
    position: relative;
    overflow: hidden;
}

.modern-badge-alt-2::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background: var(--badge-secondary-color, rgba(255, 255, 255, 0.25));
    opacity: 0.7;
}

.modern-badge-alt-3 {
    box-shadow: none;
    border: 2px solid currentColor;
}

.ribbon-badge {
    position: relative;
    border-radius: 8px 8px 8px 0;
}

.ribbon-badge::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid rgba(0, 0, 0, 0.35);
    border-left: 8px solid transparent;
}



.wpiqd-radio span {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-width: 1px; /* Inactive border color */
    border-style: solid;
    border-radius: 50%; /* Circular border */
    position: relative;
    cursor: pointer;
    vertical-align: middle; /* Align with the text */
}

/* Style for the custom radio button when it's active/checked */
.wpiqd-radio input[type="radio"]:checked + span::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
}


/* Hover styles for the custom radio */
.wpiqd-radio span:hover {
    border-color: #aaa; /* Hover border color */
}

.modern-badge_preview,
.modern-badge-alt-1_preview,
.modern-badge-alt-2_preview,
.modern-badge-alt-3_preview,
.ribbon-badge_preview {
    display:none;
}
.modern-badge_preview.active,
.modern-badge-alt-1_preview.active,
.modern-badge-alt-2_preview.active,
.modern-badge-alt-3_preview.active,
.ribbon-badge_preview.active {
    display:flex;
}

.badges-preview:not(.active) {
    display: none !important;
}

.badges-preview.active {
    display: flex !important;
}

.modern-badge_container{
    top: -12px !important;
}

.modern-badge-alt-1_container,
.modern-badge-alt-2_container,
.modern-badge-alt-3_container,
.ribbon-badge_container{
    top: -12px !important;
}

.wpiqd-badge-container.badge-position-top-center {
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

.wpiqd-badge-container.badge-position-end {
    top: -12px !important;
    right: -8px !important;
    left: inherit !important;
    transform: inherit !important;
}

#minmax_preview{
    padding:0 30px;
}

.wpmadu-variables-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
    --wpmadu-variation-dropdown-spacing: 10px;
    gap: 0;
}

.wpmadu-variables-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.wpmadu-variables-item + .wpmadu-variables-item {
    margin-top: var(--wpmadu-variation-dropdown-spacing);
}

.wpmadu-variables-solutions .wpmadu-variables-container > .wpmadu-variables-item + .wpmadu-variables-item {
    margin-top: var(--wpmadu-variation-dropdown-spacing) !important;
}

.wpmadu-hidden-label {
    display: none;
}


.wpmadu-variables-item select {
    width: 100%;
    max-width: 200px;
    font-size: 12px;
    padding: 5px 28px 5px 5px;  
    appearance: none;
    background-color: white;
    line-height:1;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="292.362" height="292.362" viewBox="0 0 292.362 292.362"><path fill="%23000" d="M287.77 69.233c-7.612-7.612-19.917-7.612-27.531 0L146.181 183.293 32.123 69.233c-7.614-7.612-19.919-7.612-27.531 0s-7.614 19.917 0 27.53l131.602 131.602c3.806 3.806 8.77 5.71 13.765 5.71s9.959-1.904 13.765-5.71L287.77 96.764c7.614-7.613 7.614-19.918 0-27.531z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* Force enable variation selects */
.wpmadu-variables-solutions.active select,
.wpmadu-variables-solutions.active .variations_form select {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.wpmadu-variables-solutions.active select:disabled,
.wpmadu-variables-solutions.active .variations_form select:disabled {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
    background-color: white !important;
}

/* Container for the select dropdown when focused */
.wpmadu-variables-item select:focus {
    border-color: #999;
    outline: none;
}

/* Placeholder text color */
.wpmadu-variables-item select option {
    color: #000;
}

/* Additional styling for a smooth transition */
.wpmadu-variables-item select {
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Styling for the arrow */
.wpmadu-variables-item select::-ms-expand {
    display: none; /* Hide default arrow in IE */
}

/* Container for the select dropdown when hovered */
.wpmadu-variables-item select:hover {
    border-color: #777;
}

.reset_variations {
    margin-top: 10px; /* Add some space above the reset link */
    text-align: center;
}


.wpmadu-notif-which-number{
    font-size: 11px;
    position: relative;
    display: inline-block;
    font-weight: bold;
}

.wpmadu-variables-solutions{
    position: relative;
    margin-top:15px;
    display:none;
}
.wpmadu-variables-solutions.active{
    display: block;
}

.custom-quantity-block{
    width:100% !important;
}

/* =====================================
   MOBILE LAYOUT FIX
===================================== */
@media (max-width: 768px) {
  .wpiqd-swatch .wpiqd-inner {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .wpiqd-swatch .wpiqd-radio {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wpiqd-swatch .wpiqd-right {
    text-align: right;
    align-self: flex-start;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .wpiqd-inner {
    --wpiqd-mobile-radio-col-width: 34px;
    --wpiqd-mobile-price-col-min-width: 84px;
    --wpiqd-mobile-badge-price-offset: 58px;
    grid-template-columns: var(--wpiqd-mobile-radio-col-width) minmax(0, 1fr) minmax(var(--wpiqd-mobile-price-col-min-width), auto);
    column-gap: 10px;
    align-items: flex-start;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .one-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--wpiqd-mobile-radio-col-width);
    align-self: center;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .second-block {
    display: flex;
    align-items: flex-start;
    min-width: 0;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .wpiqd-middle {
    margin-left: 0;
    min-width: 0;
    text-align: left;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .wpiqd-heading,
  .wpiqd-swatch.wpiqd-variable-offer-card .wpiqd-subheading {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .wpmadu-variables-solutions {
    width: 100%;
    margin-top: 10px;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .wpmadu-variables-container,
  .wpiqd-swatch.wpiqd-variable-offer-card .wpmadu-variables-item,
  .wpiqd-swatch.wpiqd-variable-offer-card .wpmadu-variables-item select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .third-block {
    grid-column: 3;
    width: auto;
    justify-self: end;
    align-self: center;
    padding-right: 0;
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .third-block.badge-inside {
    padding-right: var(--wpiqd-mobile-badge-price-offset);
  }

  .wpiqd-swatch.wpiqd-variable-offer-card .wpiqd-right {
    text-align: right;
    align-self: center;
  }
}

/* =====================================
   HIDE ALL "CHOOSE OPTION" TEXTS
===================================== */
/* Hide dropdown empty option */
.wpmadu-variables-container select option[value=""] {
  display: none;
}

/* Hide "#1 Choose Options" notice */
.wpmadu-notif-which-number {
  display: none !important;
}

.wpmadu-minmax-discount-offer {
    margin-top: 8px;
    font-size: 0.9em;
    color: #555;
}

.wpmadu-minmax-discount-offer.applied {
    color: #2f7a2f;
    font-weight: 600;
}

.wpmadu-minmax-discount-offer.wpmadu-offer-animate-typing::after {
    content: '|';
    display: inline-block;
    margin-left: 1px;
    animation: wpmaduOfferCaret .8s step-end infinite;
}

@keyframes wpmaduOfferCaret {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* =====================================
   MODERN OFFER CARD TEMPLATE
===================================== */

.wpiqd-modern-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.wpiqd-modern-card {
    --wpiqd-modern-accent: #2563eb;
    --wpiqd-modern-accent-light: #eff6ff;
    --wpiqd-modern-border: #e2e8f0;
    --wpiqd-modern-border-active: #2563eb;
    --wpiqd-modern-radius: 10px;
    --wpiqd-modern-transition: 0.18s ease;

    position: relative;
    display: block;
    border: 2px solid var(--wpiqd-modern-border);
    border-radius: var(--wpiqd-modern-radius);
    padding: 14px 16px;
    cursor: pointer;
    background: #fff;
    transition: border-color var(--wpiqd-modern-transition),
                box-shadow var(--wpiqd-modern-transition),
                background var(--wpiqd-modern-transition);
    overflow: visible;
    line-height: 1.4;
}

.wpiqd-modern-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.1);
}

.wpiqd-modern-card.active {
    border-color: var(--wpiqd-modern-border-active);
    background: var(--wpiqd-modern-accent-light);
    box-shadow: 0 2px 14px rgba(37, 99, 235, 0.15);
}

.wpiqd-modern-radio-input {
    display: none;
}

.wpiqd-modern-card-inner {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 12px;
}

.wpiqd-modern-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.wpiqd-modern-radio-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--wpiqd-modern-transition);
    flex-shrink: 0;
}

.wpiqd-modern-radio-dot span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background var(--wpiqd-modern-transition);
    display: block;
}

.wpiqd-modern-card.active .wpiqd-modern-radio-dot {
    border-color: var(--wpiqd-modern-accent);
}

.wpiqd-modern-card.active .wpiqd-modern-radio-dot span {
    background: var(--wpiqd-modern-accent);
}

.wpiqd-modern-qty-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 2px 8px;
    letter-spacing: 0.3px;
    transition: background var(--wpiqd-modern-transition), color var(--wpiqd-modern-transition);
    white-space: nowrap;
}

.wpiqd-modern-card.active .wpiqd-modern-qty-chip {
    background: #dbeafe;
    color: var(--wpiqd-modern-accent);
}

.wpiqd-modern-center {
    min-width: 0;
}

.wpiqd-modern-heading {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpiqd-modern-subheading {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wpiqd-modern-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
    gap: 2px;
}

.wpiqd-modern-price {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.wpiqd-modern-compare-price {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
}

.wpiqd-modern-savings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    background: #dcfce7;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}

.wpiqd-modern-card .wpiqd-badge-container {
    top: -13px;
}

@media (max-width: 480px) {
    .wpiqd-modern-card-inner {
        grid-template-columns: 46px 1fr auto;
        gap: 8px;
    }

    .wpiqd-modern-heading {
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
    }

    .wpiqd-modern-subheading {
        font-size: 12px;
        white-space: normal;
    }

    .wpiqd-modern-price {
        font-size: 14px;
    }
}

