/* Saffron Blinds Calculator - Frontend CSS */
:root{--sbc-gold:#D4A853;--sbc-dark:#1a1a1a;--sbc-border:#e0e0e0;--sbc-bg:#f9f9f9}

.sbc-calc{font-family:'Segoe UI',-apple-system,sans-serif;line-height:1.5;color:#333;background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 15px rgba(0,0,0,0.08);border:1px solid var(--sbc-border)}
.sbc-calc *{box-sizing:border-box}

/* Side by Side Container - 60:40 ratio */
.sbc-calc-container{display:flex;flex-wrap:wrap;gap:30px}

/* Left: Calculator Form - 60% */
.sbc-calc-left{flex:6;min-width:300px}

.sbc-title{font-size:24px;font-weight:700;margin:0 0 25px;padding-bottom:15px;border-bottom:3px solid var(--sbc-gold);color:var(--sbc-dark)}

/* Right: Price Estimate - 40% */
.sbc-calc-right{flex:4;min-width:280px;background:var(--sbc-bg);border-radius:12px;padding:25px;border:1px solid var(--sbc-border);position:sticky;top:20px;align-self:flex-start}

.sbc-result-title{font-size:18px;font-weight:700;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid var(--sbc-gold);color:var(--sbc-dark)}

/* Placeholder State */
.sbc-placeholder{text-align:center;padding:40px 20px;color:#999}
.sbc-placeholder-icon{margin-bottom:15px}
.sbc-placeholder p{margin:0;font-size:14px;line-height:1.6}

/* Changed Warning */
.sbc-changed-warning{background:#FFF3CD;border:1px solid #FFECB5;color:#856404;padding:12px 15px;border-radius:8px;font-size:13px;margin-bottom:15px}
.sbc-changed-warning strong:first-child{display:inline-block;width:20px;height:20px;background:#856404;color:#fff;border-radius:50%;text-align:center;line-height:20px;margin-right:8px;font-size:14px}

/* Steps */
.sbc-step{margin-bottom:25px}
.sbc-label{display:block;font-weight:600;font-size:15px;margin-bottom:12px;color:var(--sbc-dark)}

/* Blind Types */
.sbc-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.sbc-type-opt{cursor:pointer}
.sbc-type-opt input{display:none}
.sbc-type-card{display:block;padding:12px 10px;text-align:center;background:#fff;border:2px solid var(--sbc-border);border-radius:8px;font-weight:500;font-size:13px;transition:all 0.2s}
.sbc-type-opt input:checked+.sbc-type-card{border-color:var(--sbc-gold);background:rgba(212,168,83,0.1)}
.sbc-type-card:hover{border-color:var(--sbc-gold)}

/* Sub Options */
.sbc-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.sbc-sub-opt{cursor:pointer}
.sbc-sub-opt input{display:none}
.sbc-sub-card{display:block;padding:10px;text-align:center;background:#fff;border:2px solid var(--sbc-border);border-radius:8px;font-weight:500;font-size:13px;transition:all 0.2s}
.sbc-sub-opt input:checked+.sbc-sub-card{border-color:var(--sbc-gold);background:var(--sbc-gold);color:#fff}
.sbc-sub-card:hover{border-color:var(--sbc-gold)}

/* Dimensions */
.sbc-dims{display:flex;align-items:flex-end;gap:15px;max-width:500px}
.sbc-dim{flex:1}
.sbc-dim span{display:block;font-size:12px;color:#666;margin-bottom:5px}
.sbc-dim input{width:100%;padding:12px;border:2px solid var(--sbc-border);border-radius:8px;font-size:16px}
.sbc-dim input:focus{outline:none;border-color:var(--sbc-gold)}
.sbc-x{font-size:20px;color:#999;padding-bottom:12px}

/* Valance display */
.sbc-valance-dim{flex:0 0 auto;max-width:100px}
.sbc-valance-dim input{background:#FEF9E7;border-color:#F7DC6F;color:#7D6608;font-weight:600;cursor:default;text-align:center}
.sbc-valance-note{margin-top:8px;font-size:12px;color:#856404;background:#FEF9E7;border:1px solid #F7DC6F;padding:6px 12px;border-radius:6px;display:inline-block}

/* Quantity */
.sbc-qty{display:inline-flex;border:2px solid var(--sbc-border);border-radius:8px;overflow:hidden}
.sbc-qty-btn{width:44px;height:44px;border:none;background:var(--sbc-bg);cursor:pointer;font-size:20px}
.sbc-qty-btn:hover{background:#e0e0e0}
.sbc-qty input{width:60px;text-align:center;border:none;border-left:2px solid var(--sbc-border);border-right:2px solid var(--sbc-border);font-size:16px;font-weight:600}
.sbc-qty input:focus{outline:none}

/* Buttons */
.sbc-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.2s}
.sbc-primary{background:var(--sbc-gold);color:#fff}
.sbc-primary:hover{background:#B8923F}
.sbc-primary:disabled{background:#ccc;cursor:not-allowed}
.sbc-secondary{background:var(--sbc-dark);color:#fff;width:100%}
.sbc-secondary:hover{background:#333}
.sbc-outline{background:none;border:2px solid var(--sbc-border);color:#333}
.sbc-outline:hover{border-color:#333}

/* Result */
.sbc-result{}
.sbc-prod{background:var(--sbc-bg);padding:12px;border-radius:8px;font-weight:600;margin-bottom:15px;font-size:14px}
.sbc-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.sbc-info>div{background:var(--sbc-bg);padding:8px 10px;border-radius:6px;font-size:12px;display:flex;justify-content:space-between}
.sbc-info span:first-child{color:#666}
.sbc-info span:last-child{font-weight:600}
.sbc-breakdown{margin-bottom:15px}
.sbc-breakdown>div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--sbc-border);font-size:14px}
.sbc-breakdown .sbc-total{border-bottom:none;border-top:2px solid var(--sbc-dark);margin-top:10px;padding-top:15px;font-size:20px;font-weight:700}
.sbc-breakdown .sbc-total span:last-child{color:var(--sbc-gold)}
.sbc-min-note{font-size:11px;color:#888;margin-bottom:15px}

/* Modal */
.sbc-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.sbc-modal-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6)}
.sbc-modal-box{position:relative;background:#fff;border-radius:12px;padding:30px;max-width:450px;width:100%;max-height:90vh;overflow-y:auto}
.sbc-modal-close{position:absolute;top:15px;right:15px;width:30px;height:30px;border:none;background:var(--sbc-bg);border-radius:50%;cursor:pointer;font-size:20px}
.sbc-modal h3{margin:0 0 5px}
.sbc-modal p{color:#666;margin-bottom:20px;font-size:14px}
.sbc-field{margin-bottom:15px}
.sbc-field label{display:block;font-weight:500;margin-bottom:5px;font-size:14px}
.sbc-field input,.sbc-field textarea{width:100%;padding:10px;border:2px solid var(--sbc-border);border-radius:6px;font-size:14px;font-family:inherit}
.sbc-field input:focus,.sbc-field textarea:focus{outline:none;border-color:var(--sbc-gold)}
.sbc-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.sbc-modal-btns{display:flex;gap:10px;margin-top:20px}
.sbc-modal-btns .sbc-btn{flex:1}

/* Responsive */
@media(max-width:900px){
.sbc-calc-right{width:100%;position:static}
}
@media(max-width:600px){
.sbc-calc{padding:20px}
.sbc-types{grid-template-columns:repeat(2,1fr)}
.sbc-dims{flex-direction:column}
.sbc-x{display:none}
.sbc-info{grid-template-columns:1fr}
.sbc-row{grid-template-columns:1fr}
.sbc-modal-btns{flex-direction:column}
}