.woocommerce-variation-add-to-cart,form.cart{flex-wrap:wrap!important}.wapf{width:100%}.wapf-hide{display:none!important}.wapf img{max-width:100%}.wapf-wrapper{margin:0 0 20px -5px;width:100%}.wapf-field-group,.wapf-section{display:flex;flex-wrap:wrap}.wapf-field-container{padding:0 5px 15px 5px;box-sizing:border-box}.wapf-cloner{margin-top:15px}.wapf-section .wapf-cloner{margin:0 0 15px 5px}.wapf-clone-title{margin:15px 0;padding-left:5px;width:100%}.wapf-field-label{display:flex;align-items:center}.wapf-field-label label{margin:0}.wapf-field-label.wapf--above{margin-bottom:10px}.wapf-field-description{font-size:85%;opacity:.8;padding:5px 0 0 0;margin:0}.wapf-field-input label[for]{cursor:pointer}.wapf input[type=email],.wapf input[type=number],.wapf input[type=text],.wapf input[type=url],.wapf select,.wapf textarea{width:100%;box-sizing:border-box}.wapf input[type=checkbox],.wapf input[type=radio]{float:left;margin-top:5px}.wapf-input-label{font-weight:400}.wapf-label-text{padding-left:10px}.wapf-pricing-hint{opacity:.7}.wapf-checkable{clear:both}.wapf-swatch{box-sizing:border-box;cursor:pointer;position:relative}.wapf-swatch input[type=checkbox],.wapf-swatch input[type=radio]{position:absolute;opacity:0;pointer-events:none}.wapf--circle{border-radius:50%}.wapf--rounded{border-radius:4px}.wapf-swatch-wrapper{display:flex;flex-wrap:wrap}.wapf-swatch--image{border:2px solid transparent;text-align:center;transition:all .1s}.wapf-swatch--image.wapf-checked{border-color:#353c4e}.wapf-swatch--image img{vertical-align:bottom}.wapf-swatch-label{text-align:center;padding:4px}@supports (display:grid){.wapf-field-container .wapf-swatch--image{width:100%}}.wapf-image-swatch-wrapper{display:grid;grid-template-columns:repeat(var(--wapf-cols),1fr);grid-auto-rows:auto;grid-gap:10px}@media all and (max-width:900px){.wapf-image-swatch-wrapper{grid-template-columns:repeat(var(--wapf-cols-t),1fr)}}@media all and (max-width:768px){.wapf-image-swatch-wrapper{grid-template-columns:repeat(var(--wapf-cols-m),1fr)}}.wapf-swatch--color{margin:0 15px 15px 0;position:relative;transition:all .1s}.wapf-swatch--color .wapf-color{margin:auto}.wapf-swatch--color.wapf-checked .wapf-color{border:3px solid #fff;color:#353c4e;box-shadow:0 0 0 2px}.wapf-swatch--text{padding:7px 11px;margin:0 15px 15px 0;border-radius:4px;border:1px solid #ccc}.wapf-swatch--text:hover{border-color:#353c4e}.wapf-swatch--text.wapf-checked{border-color:#353c4e;background:#353c4e;color:#fff}.wapf-product-totals{width:100%}.wapf-total{margin:0;padding:0}.wapf-product-totals .wapf--inner{margin-bottom:20px}.wapf-product-totals .wapf--inner>div{padding-bottom:10px;clear:both}.wapf-product-totals .wapf--inner>div:last-child{padding-bottom:0}.wapf-product-totals div span:first-child{font-weight:700}.wapf-product-totals div span:last-child{float:right}.wttw{z-index:999999;position:absolute;max-width:200px;opacity:0;transition:opacity .2s;visibility:hidden;left:-100%}.rtl .wttw{left:100%}.wapf-ttp{padding:4px 9px;font-size:.9rem;border-radius:4px;color:#fff;background:#353c4e}.wapf-ttp:after{content:'';z-index:-1;position:absolute;width:8px;height:8px;background:#353c4e;transform-origin:center;transform:rotate(45deg)}.tt-v{visibility:visible;display:block;opacity:1}.tt-t .wapf-ttp:after{bottom:-4px;left:50%;margin-left:-4px}.tt-b .wapf-ttp:after{top:-4px;left:50%;margin-left:-4px}.tt-l .wapf-ttp:after{top:50%;right:-4px;margin-top:-4px}.tt-r .wapf-ttp:after{top:50%;left:-4px;margin-top:-4px}.wapf-tt-icon{margin-left:5px;padding:0 5px;fill:currentColor;display:flex;cursor:pointer}@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"); .wapf-modal-overlay,
.wapf-modal-overlay *,
.wapf-outside-modal-field,
.wapf-outside-modal-field *,
.wapf-field-container,
.wapf-field-container * {
font-family: 'Montserrat', sans-serif !important;
} abbr.required {
display: none;
} .wapf-modal-trigger-container {
margin: 20px 0;
}
.wapf-open-modal-btn {
background-color: #000;
color: #fff;
padding: 14px 32px;
border: 2px solid #000;
border-radius: 0;
cursor: pointer;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.wapf-open-modal-btn:hover {
background-color: #fff;
color: #000;
}
.wapf-open-modal-btn:active {
background-color: #000;
color: #fff;
} .wapf-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 99999;
display: flex !important;
align-items: center;
justify-content: center;
padding: 40px 24px;
box-sizing: border-box;
opacity: 0;
visibility: hidden;
pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease;
}
.wapf-modal-overlay.wapf-modal-visible {
opacity: 1;
visibility: visible;
pointer-events: auto; } .wapf-modal-container {
background: #fff;
border-radius: 0;
max-width: 1200px;
width: 100%;
max-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
box-shadow: none;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.wapf-modal-visible .wapf-modal-container {
opacity: 1;
transform: translateY(0);
} .wapf-modal-header {
padding: 24px 32px;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 0;
flex-shrink: 0;
}
.wapf-modal-header h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: #000;
letter-spacing: 0.3px;
} .wapf-modal-close {
background: transparent;
border: 2px solid #000;
font-size: 24px;
line-height: 1;
color: #000;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0;
transition: all 0.2s ease;
}
.wapf-modal-close:hover {
background-color: #000;
color: #fff;
}
.wapf-modal-close:active {
background-color: #333;
} .wapf-modal-body {
padding: 32px;
overflow-y: auto;
flex: 1;
background: #fff;
}
.wapf-modal-body::-webkit-scrollbar {
width: 6px;
}
.wapf-modal-body::-webkit-scrollbar-track {
background: #fff;
}
.wapf-modal-body::-webkit-scrollbar-thumb {
background: #000;
}
.wapf-modal-body::-webkit-scrollbar-thumb:hover {
background: #333;
} @media (max-width: 768px) {
.wapf-modal-overlay {
padding: 20px 16px;
}
.wapf-modal-container {
max-width: 100%;
max-height: calc(100vh - 40px);
}
.wapf-modal-header {
padding: 20px 24px;
}
.wapf-modal-header h3 {
font-size: 14px;
}
.wapf-modal-body {
padding: 24px;
}
} .wapf-modal-body .wapf-field-container {
margin-bottom: 24px;
}
.wapf-modal-body .wapf-field-container:last-child {
margin-bottom: 0;
} .wapf-modal-body .wapf-field-label label {
font-weight: 600;
font-size: 14px;
letter-spacing: 0.2px;
color: #000;
} .wapf-modal-footer {
position: sticky;
bottom: 0;
background: #000;
border-top: none;
padding: 0;
border-radius: 0;
flex-shrink: 0;
max-height: 45vh;
overflow: hidden;
transition: max-height 0.25s ease;
}
.wapf-modal-footer.collapsed {
max-height: 124px;
}
.wapf-modal-footer-toggle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 38px 32px;
cursor: pointer;
background: #000;
border-bottom: 1px solid #333;
transition: background 0.2s ease;
}
.wapf-modal-footer-toggle:hover {
background: #1a1a1a;
}
.wapf-modal-footer-toggle-left {
display: flex;
align-items: center;
gap: 12px;
}
.wapf-modal-footer-toggle-arrow {
font-size: 12px;
transition: transform 0.25s ease;
color: #fff;
}
.wapf-modal-footer.collapsed .wapf-modal-footer-toggle-arrow {
transform: rotate(180deg);
}
.wapf-modal-footer-title {
font-weight: 600;
font-size: 14px;
color: #fff;
letter-spacing: 0.2px;
}
.wapf-modal-footer-price {
font-weight: 600;
font-size: 18px;
color: #fff;
}
.wapf-modal-footer-content {
padding: 24px 32px;
overflow-y: auto;
max-height: calc(45vh - 64px);
background: #fff;
}
.wapf-modal-footer.collapsed .wapf-modal-footer-content {
display: none;
}
.wapf-modal-summary-section {
margin-bottom: 20px;
}
.wapf-modal-summary-section:last-child {
margin-bottom: 0;
}
.wapf-modal-summary-title {
font-weight: 600;
font-size: 13px;
color: #666;
margin-bottom: 12px;
letter-spacing: 0.2px;
}
.wapf-modal-summary-list {
list-style: none;
margin: 0;
padding: 0;
}
.wapf-modal-summary-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
font-size: 13px;
}
.wapf-modal-summary-item:last-child {
border-bottom: none;
}
.wapf-modal-summary-item-label {
color: #000;
display: flex;
align-items: center;
gap: 8px;
}
.wapf-modal-summary-item-label strong {
font-weight: 500;
}
.wapf-modal-summary-item-value {
color: #666;
font-weight: 400;
}
.wapf-modal-summary-item-price {
color: #000;
font-weight: 500;
white-space: nowrap;
}
.wapf-modal-summary-totals {
border-top: 2px solid #000;
padding-top: 16px;
margin-top: 16px;
}
.wapf-modal-summary-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 13px;
color: #000;
}
.wapf-modal-summary-total-row.grand-total {
font-size: 16px;
font-weight: 600;
padding-top: 12px;
color: #000;
}  .wapf-modal-body .wapf-swatch--image.wapf-checked,
.wapf-modal-body .wapf-swatch.wapf-checked {
border: 2px solid #000 !important;
outline: 2px solid #000;
outline-offset: 2px;
} .wapf-modal-body .wapf-swatch--color.wapf-checked .wapf-color {
border: 3px solid #fff !important;
box-shadow: 0 0 0 2px #000;
} .wapf-modal-body .wapf-swatch--text.wapf-checked {
border: 2px solid #000 !important;
background: #000;
color: #fff;
} .wapf-modal-body input[type="checkbox"]:checked + .wapf-input-label,
.wapf-modal-body input[type="radio"]:checked + .wapf-input-label,
.wapf-modal-body .wapf-checkable input[type="checkbox"]:checked ~ .wapf-label-text,
.wapf-modal-body .wapf-checkable input[type="radio"]:checked ~ .wapf-label-text {
font-weight: 600;
color: #000;
} .wapf-modal-body select {
border: 1px solid #000;
border-radius: 0;
padding: 12px 16px;
font-size: 14px;
background: #fff;
cursor: pointer;
}
.wapf-modal-body select:focus {
outline: none;
border-color: #000;
box-shadow: 0 0 0 1px #000;
} .wapf-modal-body input[type="text"],
.wapf-modal-body input[type="number"],
.wapf-modal-body input[type="email"],
.wapf-modal-body input[type="url"],
.wapf-modal-body textarea {
border: 1px solid #ccc;
border-radius: 0;
padding: 12px 16px;
font-size: 14px;
transition: border-color 0.2s ease;
}
.wapf-modal-body input[type="text"]:focus,
.wapf-modal-body input[type="number"]:focus,
.wapf-modal-body input[type="email"]:focus,
.wapf-modal-body input[type="url"]:focus,
.wapf-modal-body textarea:focus {
outline: none;
border-color: #000;
} .wapf-modal-body .wapf-swatch--image:hover:not(.wapf-checked),
.wapf-modal-body .wapf-swatch:hover:not(.wapf-checked) {
border: 1px solid #000;
}
.wapf-modal-body .wapf-swatch--text:hover:not(.wapf-checked) {
border: 1px solid #000;
background: #fafafa;
} .wapf-modal-body .wapf-swatch {
border: 1px solid #e5e5e5;
border-radius: 0 !important;
transition: all 0.15s ease;
}
.wapf-modal-body .wapf-swatch-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2px;
padding: 8px 4px;
} @media (max-width: 768px) {
.wapf-modal-footer {
max-height: 50vh;
}
.wapf-modal-footer-content {
max-height: calc(50vh - 64px);
padding: 20px 24px;
}
.wapf-modal-footer-toggle {
padding: 16px 24px;
}
.wapf-modal-footer-price {
font-size: 16px;
}
}  .wapf-section-divider,
.wapf-field-container[data-field-type="section"] {
margin-top: 40px !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
.wapf-field-container[data-field-type="section"]:first-child {
margin-top: 0 !important;
}
.wapf-field-container[data-field-type="section"] .wapf-field-label {
background: transparent;
padding: 20px 28px;
margin: 0;
border-radius: 0;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.wapf-field-container[data-field-type="section"] .wapf-field-label::before {
display: none;
}
.wapf-field-container[data-field-type="section"] .wapf-field-label label {
color: #1a1a1a !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
margin: 0;
display: block;
}
.wapf-field-container[data-field-type="section"] .wapf-field-description {
background: #f8f9fa;
padding: 14px 28px;
margin: 0;
border-left: 0px;
font-size: 16px;
color: #161616;
font-style: normal;
text-align: center;
}
.wapf-field-container[data-field-type="section"] .wapf-field-description:empty {
display: none;
} .wapf-field-container[data-field-type="sectionend"] {
display: none !important;
} .wapf-field-container[data-field-type="section"] ~ .wapf-field-container:not([data-field-type="section"]):not([data-field-type="sectionend"]) {
background: #fff;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
padding: 24px 28px !important;
margin-bottom: 0 !important;
border-bottom: 1px solid #f0f0f0;
} .wapf-modal-body .wapf-field-label {
margin-bottom: 14px;
}
.wapf-modal-body .wapf-field-label label {
font-size: 14px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
letter-spacing: 0.2px !important;
display: flex;
align-items: center;
gap: 8px;
}
.wapf-modal-body .wapf-field-label label .wapf-required {
color: #e74c3c;
font-weight: 700;
} .wapf-modal-body .wapf-field-description {
font-size: 12px;
color: #888;
margin-top: 6px;
line-height: 1.5;
} .wapf-modal-body .wapf-swatches {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 8px;
}
.wapf-modal-body .wapf-swatch {
position: relative;
background: #fff;
border: 2px solid #e5e5e5 !important;
border-radius: 8px !important;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
min-width: 120px;
flex: 0 0 auto;
}
.wapf-modal-body .wapf-swatch:hover {
border-color: #999 !important;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.wapf-modal-body .wapf-swatch.wapf-checked {
border-color: #000 !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.wapf-modal-body .wapf-swatch.wapf-checked::after {
content: '✓';
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background: #000;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
z-index: 10;
} .wapf-modal-body .wapf-swatch .wapf-swatch-img,
.wapf-modal-body .wapf-swatch img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 1;
object-fit: cover;
} .wapf-modal-body .wapf-swatch .wapf-swatch-label {
padding: 12px 14px;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #333;
text-transform: none;
letter-spacing: 0.3px;
background: #fafafa;
border-top: 1px solid #f0f0f0;
line-height: 1.3;
}
.wapf-modal-body .wapf-swatch.wapf-checked .wapf-swatch-label {
background: #000;
color: #fff;
border-top-color: #000;
} .wapf-modal-body .wapf-swatch .wapf-pricing-hint {
display: block;
font-size: 11px;
font-weight: 500;
color: #27ae60;
margin-top: 4px;
}
.wapf-modal-body .wapf-swatch.wapf-checked .wapf-pricing-hint {
color: #a8e6cf;
} .wapf-modal-body .wapf-field-container[data-field-type="multi-image-swatch"] .wapf-swatch.wapf-checked::after {
content: '✓';
background: #27ae60;
} .wapf-modal-body .wapf-clone-actions {
display: flex;
gap: 12px;
margin-top: 20px;
padding-top: 20px;
border-top: 2px dashed #e5e5e5;
}
.wapf-modal-body .wapf-add-clone,
.wapf-modal-body .wapf-remove-clone {
padding: 14px 24px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2px;
border-radius: 0;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid;
}
.wapf-modal-body .wapf-add-clone {
background: #000;
color: #fff;
border-color: #000;
}
.wapf-modal-body .wapf-add-clone:hover {
background: #333;
border-color: #333;
}
.wapf-modal-body .wapf-remove-clone {
background: #fff;
color: #e74c3c;
border-color: #e74c3c;
}
.wapf-modal-body .wapf-remove-clone:hover {
background: #e74c3c;
color: #fff;
} .wapf-modal-body .wapf-clone-instance {
position: relative;
background: #f8f9fa;
border: 2px solid #e5e5e5;
border-radius: 0;
padding: 24px;
margin-bottom: 20px;
}
.wapf-modal-body .wapf-clone-instance::before {
content: attr(data-clone-index);
position: absolute;
top: -12px;
left: 20px;
background: #000;
color: #fff;
padding: 4px 16px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2px;
} .wapf-outside-modal-field {
margin-bottom: 24px;
}
.wapf-outside-modal-field .wapf-field-label label {
font-size: 15px;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 0.2px;
margin-bottom: 8px;
display: block;
}
.wapf-outside-modal-field .wapf-field-description {
font-size: 13px;
color: #666;
margin-bottom: 16px;
}
.wapf-outside-modal-field .wapf-swatches {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.wapf-outside-modal-field .wapf-swatch {
width: 100%;
height: 120px;
border-radius: 0px !important;
overflow: hidden;
transition: all 0.25s ease;
cursor: pointer;
object-fit: contain;
}
.wapf-outside-modal-field .wapf-swatch:hover {
border-color: #999 !important;
transform: scale(1.1);
}
.wapf-outside-modal-field .wapf-swatch.wapf-checked {
border-color: #000 !important;
box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000;
transform: scale(1.1);
}
.wapf-outside-modal-field .wapf-swatch img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0px;
}
.wapf-outside-modal-field .wapf-swatch .wapf-swatch-label {
display: none;
} .wapf-product-totals {
background: #f8f9fa;
border: 0px;
padding: 20px 24px;
margin-top: 24px;
}
.wapf-product-totals .wapf-total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
font-size: 14px;
}
.wapf-product-totals .wapf-total-row.wapf-grand-total {
border-top: 2px solid #000;
margin-top: 12px;
padding-top: 16px;
font-size: 18px;
font-weight: 700;
} @media (max-width: 768px) {
.wapf-modal-body .wapf-swatches {
gap: 10px;
}
.wapf-modal-body .wapf-swatch {
min-width: 100px;
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 5px);
}
.wapf-field-container[data-field-type="section"] .wapf-field-label {
padding: 16px 20px;
}
.wapf-field-container[data-field-type="section"] .wapf-field-label label {
font-size: 14px !important;
letter-spacing: 0.2px !important;
}
.wapf-field-container[data-field-type="section"] .wapf-field-description {
padding: 12px 20px;
font-size: 12px;
}
.wapf-outside-modal-field .wapf-swatch {
width: 50px;
height: 50px;
}
.wapf-modal-body .wapf-clone-actions {
flex-direction: column;
}
.wapf-modal-body .wapf-add-clone,
.wapf-modal-body .wapf-remove-clone {
width: 100%;
text-align: center;
}
}
@media (max-width: 480px) {
.wapf-modal-body .wapf-swatch {
flex: 1 1 100%;
max-width: 100%;
}
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wapf-field-container {
animation: fadeInUp 0.3s ease forwards;
}
.wapf-field-container:nth-child(1) { animation-delay: 0.05s; }
.wapf-field-container:nth-child(2) { animation-delay: 0.1s; }
.wapf-field-container:nth-child(3) { animation-delay: 0.15s; }
.wapf-field-container:nth-child(4) { animation-delay: 0.2s; }
.wapf-field-container:nth-child(5) { animation-delay: 0.25s; }
.wapf-field-container:nth-child(6) { animation-delay: 0.3s; }
.wapf-field-container:nth-child(7) { animation-delay: 0.35s; }
.wapf-field-container:nth-child(8) { animation-delay: 0.4s; }  .wapf-field-container[data-field-type="section"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
} .wapf-section-wrap {
display: block !important;
}