.fencing-calculator-page,.fencing-calculator-page *{box-sizing:border-box}.fencing-calculator-page{position:relative;max-width:1180px;margin:0 auto;padding:28px 40px 50px;color:#0b2f24}.calculator-hero{margin-bottom:34px;text-align:center}.calculator-hero h1{margin:0 0 8px;font-size:32px;font-weight:700;line-height:1.2}.calculator-hero p{margin:0;font-size:14px}.calculator-step{position:relative;z-index:1;margin-bottom:34px}.calculator-steps{position:absolute;top:0;left:-25px;width:140px}.step-item{display:flex;align-items:flex-start;gap:12px}.step-number{position:relative;z-index:2;width:34px;height:34px;min-width:34px;border-radius:50%;background:#006b3f;color:#fff;font-size:15px;font-weight:700;line-height:34px;text-align:center}.step-content strong{display:block;margin-bottom:7px;font-size:14px;font-weight:700}.step-content p{margin:0;font-size:13px;line-height:1.25}.calculator-main{width:900px;margin:0 auto}.fencing-calculator-page:before{content:"";position:absolute;z-index:0;top:28px;bottom:50px;left:32px;width:1px;background:#000}.calculator-step-two:before,.calculator-step-three:before{content:"";position:absolute;top:0;right:100px;left:-7px;height:1px;background:#000}.calculator-step-one{position:relative}.system-type-row{display:flex;justify-content:center;gap:28px;margin-bottom:34px}.fencing-calculator-page .type-card{width:300px;height:112px;padding:16px 10px;border:1px solid #d8ddd9;border-radius:8px;background:#fff;color:#0b2f24;-webkit-appearance:none;appearance:none;box-shadow:none;cursor:pointer;text-align:center}.text-icon{display:flex;align-items:center;justify-content:center;height:36px;font-size:16px}.type-card h3{margin:8px 0 0;font-size:17px;font-weight:700}.layout-section{width:fit-content;margin:0 auto}.section-label{margin:0 0 12px;font-size:14px}.layout-grid{display:grid;grid-template-columns:repeat(6,135px);gap:16px}.fencing-calculator-page .layout-card{display:flex;flex-direction:column;align-items:center;justify-content:space-between;width:135px;height:155px;padding:12px 10px 10px;border:1px solid #d8ddd9;border-radius:8px;background:#fff;color:#0b2f24;-webkit-appearance:none;appearance:none;box-shadow:none;cursor:pointer;text-align:center}.layout-placeholder{display:flex;align-items:center;justify-content:center;width:92px;height:74px;border:1px dashed #d6d6d6;font-size:11px;line-height:1.2;text-align:center}.layout-card p{min-height:30px;margin:0;font-size:12px;line-height:1.25;text-align:center}.fencing-calculator-page .type-card:hover,.fencing-calculator-page .layout-card:hover{border-color:#006b3f}.fencing-calculator-page .type-card.is-selected,.fencing-calculator-page .layout-card.is-selected{border-color:#006b3f;background:#cde5c0}.fencing-calculator-page .type-card.is-selected h3,.fencing-calculator-page .layout-card.is-selected p{color:#006b3f;font-weight:700}.calculator-step-two{margin-top:50px;padding-top:28px}.calculator-step-two .calculator-steps{top:28px}.size-panel{width:100%;max-width:900px;margin:0 auto;overflow:hidden;border:1px solid #d8ddd9;border-radius:8px;background:#fff}.size-input-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:18px 28px;border-bottom:1px solid #d8ddd9;background:#cde5c0}.size-input-row:has(.gate-option-field.is-visible){grid-template-columns:repeat(5,minmax(0,1fr))}.size-input-row:has(.panel-add-option-field.is-visible){grid-template-columns:repeat(5,minmax(0,1fr))}.size-field{min-width:0}.size-field>label{display:block;margin-bottom:8px;color:#0b2f24;font-size:12px;line-height:1.2}.size-field input:not([type=checkbox]),.size-field select{width:100%;height:38px;padding:0 12px;border:1px solid #d5dada;border-radius:5px;background:#fff;color:#0b2f24;font-size:14px}.size-field input:not([type=checkbox]):focus,.size-field select:focus{outline:none;border-color:#00713d;box-shadow:0 0 0 2px #00713d1f}.gate-option-field{display:none}.gate-option-field.is-visible{display:block}.panel-add-option-field{display:none}.panel-add-option-field.is-visible{display:block}.panel-checkbox-control{display:flex!important;align-items:center;gap:9px;width:100%;height:38px;margin:0!important;padding:0 12px;border:1px solid #d5dada;border-radius:5px;background:#fff;color:#0b2f24;font-size:13px;line-height:1.2;cursor:pointer;-webkit-user-select:none;user-select:none}.panel-checkbox-control:hover{border-color:#8dbba5;background:#fbfefb}.panel-checkbox-control:focus-within{border-color:#00713d;box-shadow:0 0 0 2px #00713d1f}.panel-checkbox-control input[type=checkbox]{flex:0 0 auto;width:17px;height:17px;margin:0;padding:0;accent-color:#00713d;cursor:pointer}.panel-checkbox-control span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.panel-extra-row{display:none;margin-top:0;padding:18px 28px;border-top:1px solid #b9d5ac;border-bottom:1px solid #d8ddd9;background:#cde5c0}.panel-extra-row.is-visible{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.other-panels-container{display:flex;flex-direction:column;gap:0}.other-panel-card{position:relative;padding:20px 28px 22px;border-top:1px solid #b9d5ac;background:#cde5c0}.other-panel-title{margin:0 0 14px 28px;color:#0b2f24;font-size:14px;font-weight:700}.remove-other-panel-btn{position:absolute;top:14px;left:18px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#9b3434;font-family:Arial,sans-serif;font-size:20px;font-weight:500;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.remove-other-panel-btn:hover{border-color:#dca8a8;background:#fff1f1;color:#b00000}.remove-other-panel-btn:focus-visible{outline:2px solid #9b3434;outline-offset:2px}.other-panel-input-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.other-panel-input-row .size-field{min-width:0}.other-panel-input-row input:not([type=checkbox]){background:#fff}.preview-controls{display:flex;align-items:center;gap:16px;width:100%;padding:12px 24px;border-top:1px solid #d6dfd2;background:#fff;box-sizing:border-box}.colour-section{flex:1;min-width:0;padding:0;border:none;background:transparent}.colour-section-header,.colour-section-title{display:none}.colour-scroll-wrapper{width:100%;display:flex;align-items:center;gap:8px;min-width:0}.colour-options{flex:1;display:flex;align-items:center;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:thin;padding:2px;min-width:0}.colour-options::-webkit-scrollbar{height:5px}.colour-options::-webkit-scrollbar-track{background:#eef2ec;border-radius:10px}.colour-options::-webkit-scrollbar-thumb{background:#b7c5b2;border-radius:10px}.colour-option{flex:0 0 auto;min-width:132px;height:50px;padding:0 14px;border:1px solid #d8dfd5;border-radius:8px;background:#fff;display:flex;align-items:center;gap:9px;cursor:pointer;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.colour-option:hover{border-color:#287648}.colour-option.is-selected{border-color:#287648;background:#f1f7ee;box-shadow:0 0 0 1px #287648}.colour-swatch{width:24px;height:24px;flex:0 0 24px;border-radius:50%;border:1px solid #c8cec5;box-sizing:border-box}.colour-name{font-size:13px;font-weight:500;color:#18352a;white-space:nowrap}.colour-scroll-btn{width:32px;height:40px;flex:0 0 32px;border:1px solid #d8dfd5;border-radius:7px;background:#fff;color:#287648;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,border-color .2s ease}.colour-scroll-btn:hover{background:#f1f7ee;border-color:#287648}.preview-view-control{display:none;align-items:center;gap:8px;flex:0 0 auto}.preview-view-control.is-visible{display:flex}.preview-view-label{color:#18352a;font-size:13px;font-weight:600;white-space:nowrap}.preview-view-control select{width:155px;height:40px;padding:0 10px;border:1px solid #d8dfd5;border-radius:7px;background:#fff;color:#18352a;font-size:13px;cursor:pointer}.preview-view-control select:focus{outline:none;border-color:#00713d;box-shadow:0 0 0 2px #00713d1f}.preview-box{min-height:320px;height:50vh;background:#e4e7e5;overflow-x:auto;overflow-y:auto;position:relative}.preview-box svg{max-width:none;max-height:none;display:block}.preview-result-text{width:100%;max-width:320px}.preview-result-text p{margin:0 0 12px}.calculator-action-buttons{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px}.add-panel-btn{width:240px;height:42px;border:1px solid #00713d;border-radius:6px;background:transparent;color:#00713d;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s ease,color .15s ease}.add-panel-btn:hover{background:#eef7f1}.calculate-btn{display:block;width:360px;height:42px;margin:0;border:none;border-radius:6px;background:#00713d;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s ease}.calculate-btn:hover{background:#005f34}.calculator-step-three{margin-top:40px;padding-top:22px}.calculator-step-three .calculator-steps{top:22px}.result-panel{width:100%;max-width:900px;margin:0 auto;padding:14px;border:1px solid #d8ddd9;border-radius:8px;background:#f9fcf4}.result-title{margin:0 0 10px;color:#0b2f24;font-size:16px;font-weight:700}.breakdown-box{margin-bottom:16px;padding:12px;border:1px solid #cfe0c8;border-radius:8px;background:#cde5c0}.breakdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.breakdown-header span{font-size:13px}.breakdown-header>span{padding:4px 8px;border-radius:6px;background:#e8f6df;color:#006b3f;font-weight:700}.breakdown-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.breakdown-item{padding:8px;border-radius:6px;background:#f5f8f1}.breakdown-item small{display:block;margin-bottom:3px;font-size:11px}.breakdown-item strong{font-size:13px}.material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.material-card{padding:10px;border:1px solid #d8ddd9;border-radius:8px;background:#fff}.material-image{width:100%;height:115px;display:flex;align-items:center;justify-content:center;overflow:hidden}.material-image img{width:100%;height:100%;object-fit:contain;display:block}.material-info h4{min-height:36px;margin:0 0 6px;font-size:14px;line-height:1.25}.material-info p{margin:0 0 5px;font-size:13px}.material-purchase-row{margin-top:3px}.material-purchase-label{display:block;margin-bottom:4px;font-size:13px;line-height:1.2}.material-qty-control{display:flex;align-items:center;gap:5px}.material-qty-btn{width:30px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #cfd6d2;border-radius:5px;background:#fff;font-size:15px;font-weight:600;line-height:1;cursor:pointer}.material-qty-btn:hover{background:#f3f6f4;border-color:#26734d}.material-purchase-qty{width:52px;height:28px;padding:0 6px;border:1px solid #cfd6d2;border-radius:5px;text-align:center;font-size:13px;background:#fff;box-sizing:border-box}.material-purchase-qty:focus{outline:none;border-color:#26734d}.material-purchase-qty::-webkit-inner-spin-button,.material-purchase-qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.material-purchase-qty{-moz-appearance:textfield}.material-price{margin-top:6px;margin-bottom:2px;color:#52605b;font-size:13px;font-weight:400}.material-item-total{margin-bottom:7px;color:#006b3f;font-size:15px;font-weight:700}.material-cart-btn{width:100%;height:32px;border:none;border-radius:5px;background:#006b3f;color:#fff;cursor:pointer}.material-cart-btn:hover{background:#005f34}.result-total-row{display:flex;align-items:center;justify-content:space-between;margin:12px 0}.result-total-row>strong{font-size:20px}.total-price{color:#006b3f;font-size:24px;font-weight:700}.result-total-row small{margin-left:8px;color:#d99000}.download-pdf-button{width:100%;height:36px;border:1px solid #e8a21a;border-radius:5px;background:#fff;color:#d99000;font-weight:600;cursor:pointer}.download-pdf-button:hover{background:#fffaf0}.breakdown-panel-card+.breakdown-panel-card{margin-top:12px;padding-top:12px;border-top:1px solid #b9d5ac}.breakdown-empty{margin:0;color:#0b2f24;font-size:14px}@media(max-width:1000px){.calculator-steps{position:static;width:auto;margin-bottom:24px}.fencing-calculator-page:before,.calculator-step:before,.calculator-step:after{display:none}.calculator-main{width:100%}.system-type-row{flex-direction:column;align-items:center}.layout-grid{grid-template-columns:repeat(3,135px);justify-content:center}.calculator-step-two,.calculator-step-three{margin-top:34px;padding-top:0}.calculator-step-two .calculator-steps,.calculator-step-three .calculator-steps{top:auto}}@media(max-width:768px){.fencing-calculator-page{padding-right:24px;padding-left:24px}.size-input-row,.size-input-row:has(.gate-option-field.is-visible),.size-input-row:has(.panel-add-option-field.is-visible),.panel-extra-row.is-visible,.other-panel-input-row{grid-template-columns:repeat(2,minmax(0,1fr))}.size-input-row,.panel-extra-row,.other-panel-card{padding-right:18px;padding-left:18px}.other-panel-input-row{gap:14px}.remove-other-panel-btn{left:10px}.other-panel-title{margin-left:24px}.calculate-btn{width:100%;max-width:360px}.add-panel-btn{width:100%;max-width:240px}.breakdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.material-grid{grid-template-columns:1fr}}@media(max-width:600px){.layout-grid{grid-template-columns:repeat(2,135px)}}@media(max-width:500px){.fencing-calculator-page{padding-right:16px;padding-left:16px}.calculator-hero h1{font-size:26px}.fencing-calculator-page .type-card{width:100%;max-width:300px}.size-input-row,.size-input-row:has(.gate-option-field.is-visible),.size-input-row:has(.panel-add-option-field.is-visible),.panel-extra-row.is-visible,.other-panel-input-row{grid-template-columns:1fr}.panel-checkbox-control span{white-space:normal}.preview-box{min-height:320px;height:50vh;background:#e4e7e5!important}.breakdown-grid{grid-template-columns:1fr}.breakdown-header,.result-total-row{align-items:flex-start;flex-direction:column;gap:10px}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/fencing-calculator.css.map */