/* Webweek Product Addons – Frontend */

.ww-addons-wrapper{margin:24px 0;padding:0}
.ww-addons-title{font-size:16px;font-weight:600;color:#333;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid #eee}
.ww-addon-field{margin-bottom:20px;padding:0 0 16px;border-bottom:1px solid #f2f2f2}
.ww-addon-field:last-of-type{border-bottom:none}
.ww-addon-field--hidden{display:none}
.ww-addon-label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#333;margin-bottom:4px}
.ww-required{color:#e2401c}
.ww-addon-desc{font-size:13px;color:#888;margin:0 0 10px;line-height:19px}

/* Info trigger */
.ww-info-trigger{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--primary,#333);color:#fff;font-size:11px;font-weight:700;font-style:normal;font-family:Georgia,serif;line-height:1;cursor:pointer;transition:opacity .15s;user-select:none;flex-shrink:0}
.ww-info-trigger:hover{opacity:.8}
.ww-addon-info-text{margin:6px 0 10px;padding:10px 14px;background:#f7f8fa;border:1px solid #e8eaed;border-radius:6px;font-size:13px;line-height:19px;color:#555}

/* Inputs */
.ww-addon-input,.ww-addon-textarea{width:100%;max-width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background:#fff;transition:border-color .2s;box-sizing:border-box;font-family:inherit}
.ww-addon-textarea{resize:vertical;min-height:80px;line-height:1.5}
.ww-addon-input:focus,.ww-addon-textarea:focus{border-color:#333;outline:none;box-shadow:0 0 0 1px #333}
.ww-addon-number{max-width:120px}

/* Select */
.ww-addon-select{width:100%;padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px;color:#333;background:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.ww-addon-select:focus{border-color:#333;outline:none}

/* Options grid */
.ww-addon-options{display:grid;grid-template-columns:repeat(var(--ww-cols-d,1),1fr);gap:8px}
@media(max-width:1024px){.ww-addon-options{grid-template-columns:repeat(var(--ww-cols-t,1),1fr)}}
@media(max-width:600px){.ww-addon-options{grid-template-columns:repeat(var(--ww-cols-m,1),1fr)}}

/* Option item */
.ww-option-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid #eee;border-radius:8px;cursor:pointer;transition:all .15s;background:#fff;position:relative;flex-wrap:nowrap}
.ww-option-item:hover{border-color:#ccc;background:#fafafa}
.ww-option-item:has(input:checked){border-color:#333;background:#f8f8f8}

/* Check icon */
.ww-option-check-icon{display:none;position:absolute;top:-5px;right:-5px;width:22px;height:22px;border-radius:50%;background:#22c55e;align-items:center;justify-content:center;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ww-option-check-icon::after{content:'';display:block;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-4px}
.ww-option-item:has(input:checked) .ww-option-check-icon{display:flex}

/* Top image */
.ww-img-pos-top .ww-option-item{flex-direction:column;text-align:center;padding:0;overflow:hidden}
.ww-img-pos-top .ww-option-item .ww-option-img{width:100%;height:auto;aspect-ratio:1;border-radius:8px 8px 0 0;border:none}
.ww-img-pos-top .ww-option-item .ww-option-text{padding:10px 12px;align-items:center}
.ww-img-pos-top .ww-option-item input[type="checkbox"],.ww-img-pos-top .ww-option-item input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.ww-hide-input input[type="checkbox"],.ww-hide-input input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.ww-hide-image .ww-option-img{display:none!important}
.ww-price-below .ww-option-text{flex-direction:column;align-items:flex-start}

.ww-option-img{width:44px;height:44px;object-fit:cover;border-radius:6px;flex-shrink:0;border:1px solid #eee}
.ww-option-item input[type="checkbox"],.ww-option-item input[type="radio"]{flex-shrink:0;width:18px;height:18px;accent-color:#333;margin:0}
.ww-option-text{display:flex;flex-direction:row;align-items:baseline;gap:6px;flex:1;min-width:0;flex-wrap:wrap}
.ww-option-name{font-size:14px;color:#333;font-weight:500}
.ww-option-price{font-size:13px;color:#888}

/* Summary */
.ww-addons-summary{margin-top:20px;padding:16px;background:#f9f9f9;border:1px solid #eee;border-radius:8px}
.ww-summary-title{font-size:14px;font-weight:600;color:#333;margin:0 0 10px}
.ww-summary-items{display:flex;flex-direction:column;gap:6px}
.ww-summary-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:13px;color:#555;padding:0;gap:8px}
.ww-summary-label{font-weight:500;color:#333;flex-shrink:0}
.ww-summary-value{color:#555;flex:1}
.ww-summary-price{text-align:right;white-space:nowrap;color:#333;font-weight:500}
.ww-summary-total{margin-top:10px;padding-top:10px;border-top:1px solid #ddd;display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:#333}

@media(max-width:600px){.ww-option-item{padding:8px 10px;gap:8px}.ww-option-img{width:36px;height:36px}}

/* ─── Quote Mode ──────────────────────────────── */

/* Body class: use to hide any theme-specific elements */
body.ww-quote-mode .single_add_to_cart_button,
body.ww-quote-mode form.cart .quantity,
body.ww-quote-mode form.cart button[type="submit"].single_add_to_cart_button,
.ww-quote-active .single_add_to_cart_button,
.ww-quote-active .quantity,
.ww-quote-active button[type="submit"].single_add_to_cart_button{display:none!important}

.ww-quote-button-wrap{margin:16px 0 0}
.ww-quote-request-btn{display:inline-block;padding:14px 32px;font-size:16px;font-weight:600;color:#fff;background:#333;border:none;border-radius:6px;cursor:pointer;transition:background .2s;text-align:center;width:100%;max-width:400px}
.ww-quote-request-btn:hover{background:#555}

/* Modal overlay */
.ww-quote-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.55);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.ww-quote-modal{position:relative;background:#fff;border-radius:12px;padding:32px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.ww-quote-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:28px;line-height:1;color:#999;cursor:pointer;padding:0;transition:color .15s}
.ww-quote-modal-close:hover{color:#333}
.ww-quote-modal-body{margin-top:8px}
.ww-quote-modal-body .wpcf7-form{margin:0}
.ww-quote-modal-body .wpcf7-form p{margin:0 0 12px}
.ww-quote-modal-body .wpcf7-form input[type="text"],
.ww-quote-modal-body .wpcf7-form input[type="email"],
.ww-quote-modal-body .wpcf7-form input[type="tel"],
.ww-quote-modal-body .wpcf7-form textarea{width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid #ddd;border-radius:6px;font-size:14px}
.ww-quote-modal-body .wpcf7-form input:focus,
.ww-quote-modal-body .wpcf7-form textarea:focus{border-color:#333;outline:none;box-shadow:0 0 0 1px #333}
.ww-quote-modal-body .wpcf7-form input[type="submit"]{padding:12px 28px;font-size:15px;font-weight:600;color:#fff;background:#333;border:none;border-radius:6px;cursor:pointer;transition:background .2s}
.ww-quote-modal-body .wpcf7-form input[type="submit"]:hover{background:#555}
.ww-quote-modal-body .wpcf7-response-output{margin:12px 0 0!important;border-radius:6px;font-size:13px}

@media(max-width:600px){.ww-quote-modal{padding:20px;margin:10px;border-radius:10px}}

/* Quote modal summary */
.ww-quote-modal-summary{margin-bottom:20px}
.ww-quote-summary-box{background:#f9f9f9;border:1px solid #eee;border-radius:8px;padding:16px 18px;margin:0 0 4px}
.ww-qsum-title{font-size:15px;font-weight:600;color:#333;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid #e5e5e5}
.ww-qsum-product{font-size:14px;color:#555;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #f0f0f0}
.ww-qsum-product strong{color:#333}
.ww-qsum-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:13px;color:#555;padding:4px 0;gap:8px}
.ww-qsum-label{font-weight:500;color:#333;flex-shrink:0}
.ww-qsum-value{flex:1;color:#555}
.ww-qsum-price{text-align:right;white-space:nowrap;color:#333;font-weight:500}
.ww-qsum-total{margin-top:8px;padding-top:8px;border-top:1px solid #ddd;display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:#333}

/* ─── Postcodecheck ──────────────────────────── */
.ww-pc-box{margin-top:10px;display:grid;gap:8px}
.ww-pc-msg{padding:10px 14px;border-radius:6px;font-size:14px;line-height:1.45;background:#fff8e5;color:#5c4400;border:1px solid #f1d58a}
.ww-pc-box.is-ok .ww-pc-msg{background:#ecf7ee;color:#1d6b2f;border-color:#a9d9b4}
.ww-pc-box.is-fail .ww-pc-msg{background:#fdf0ef;color:#a12a1f;border-color:#efb7b1}
.ww-pc-row{display:flex;gap:8px}
.ww-pc-input{flex:1;min-width:0;padding:10px 14px;border:1px solid #ddd;border-radius:6px;font:inherit;font-size:14px}
.ww-pc-btn{flex:none;padding:10px 18px;border:0;border-radius:6px;background:#333;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ww-pc-btn:hover{background:#555}
