/* Конфігуратор фасадів — палітра сайту: #2c241b / #8c5f35 / #f9f6f0 */
#saloy-fasady-calc { max-width: 960px; margin: 0 auto; color: #2c241b; font-size: 1rem; }

#saloy-fasady-calc .sf-finish { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
#saloy-fasady-calc .sf-fbtn { padding: 0.6rem 1.4rem; border: 2px solid #2c241b; background: transparent; color: #2c241b; cursor: pointer; font-weight: 600; letter-spacing: 0.5px; transition: all 0.2s; }
#saloy-fasady-calc .sf-fbtn.active { background: #2c241b; color: #fff; }

#saloy-fasady-calc .sf-ral { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
#saloy-fasady-calc .sf-ral-swatches { display: flex; gap: 0.35rem; flex-wrap: wrap; }
#saloy-fasady-calc .sf-swatch { width: 30px; height: 30px; border: 2px solid rgba(44,36,27,0.25); border-radius: 4px; cursor: pointer; padding: 0; }
#saloy-fasady-calc .sf-swatch.active { border-color: #8c5f35; box-shadow: 0 0 0 2px #8c5f35; }
#saloy-fasady-calc .sf-ral input { width: 110px; padding: 0.45rem; border: 1px solid rgba(44,36,27,0.2); border-radius: 4px; }
#saloy-fasady-calc .sf-ral-label { color: #6b6156; font-size: 0.85rem; }
#saloy-fasady-calc .sf-main { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
#saloy-fasady-calc .sf-preview { background: #f9f6f0; border-radius: 8px; padding: 1rem; position: sticky; top: 1rem; }
#saloy-fasady-calc .sf-preview-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #8c5f35; margin-bottom: 0.8rem; text-align: center; }
#saloy-fasady-calc .sf-preview-note { margin-top: 0.8rem; text-align: center; color: #6b6156; font-size: 0.82rem; }
#saloy-fasady-calc .sf-line { cursor: pointer; }
#saloy-fasady-calc .sf-act { background: #fdf9f0; box-shadow: inset 3px 0 0 #8c5f35; }
#saloy-fasady-calc .sf-rows { border: 1px solid rgba(44,36,27,0.15); border-radius: 8px; overflow: hidden; }
#saloy-fasady-calc .sf-row { display: grid; grid-template-columns: 2.2fr 1fr 1fr 0.7fr 0.8fr 1.2fr 2.2rem; gap: 0.5rem; align-items: center; padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(44,36,27,0.08); }
#saloy-fasady-calc .sf-row:last-child { border-bottom: none; }
#saloy-fasady-calc .sf-head { background: #f9f6f0; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: #8c5f35; }
#saloy-fasady-calc .sf-row input, #saloy-fasady-calc .sf-row select { width: 100%; padding: 0.5rem; border: 1px solid rgba(44,36,27,0.2); border-radius: 4px; background: #fff; color: #2c241b; }
#saloy-fasady-calc .sf-price { font-weight: 600; white-space: nowrap; }
#saloy-fasady-calc .sf-err { color: #b03a2e; font-size: 0.75rem; white-space: normal; }
#saloy-fasady-calc .sf-del { border: none; background: transparent; color: #b03a2e; font-size: 1.3rem; cursor: pointer; line-height: 1; }
#saloy-fasady-calc .sf-del:disabled { color: #ccc; cursor: default; }

#saloy-fasady-calc .sf-params-toggle { grid-template-columns: 1fr; padding: 0 0.8rem 0.5rem; border-bottom: 1px solid rgba(44,36,27,0.08); }
#saloy-fasady-calc .sf-ptoggle { border: none; background: transparent; color: #8c5f35; font-size: 0.82rem; cursor: pointer; text-align: left; padding: 0.2rem 0; }
#saloy-fasady-calc .sf-params { grid-template-columns: repeat(5, 1fr); background: #f9f6f0; padding: 0.8rem; border-bottom: 1px solid rgba(44,36,27,0.08); }
#saloy-fasady-calc .sf-params label { font-size: 0.75rem; color: #6b6156; display: flex; flex-direction: column; gap: 0.25rem; }
#saloy-fasady-calc .sf-params input { padding: 0.4rem; border: 1px solid rgba(44,36,27,0.2); border-radius: 4px; }
#saloy-fasady-calc .sf-add { margin: 1rem 0 1.5rem; padding: 0.6rem 1.6rem; border: 2px dashed #8c5f35; background: transparent; color: #8c5f35; font-weight: 600; cursor: pointer; }

#saloy-fasady-calc .sf-total { background: #f9f6f0; border-radius: 8px; padding: 1.2rem 1.5rem; margin-bottom: 1.5rem; }
#saloy-fasady-calc .sf-total-sum { font-size: 1.4rem; margin-top: 0.3rem; }
#saloy-fasady-calc .sf-total-sum b { color: #8c5f35; }
#saloy-fasady-calc .sf-notice { margin-top: 0.6rem; color: #8c5f35; font-size: 0.9rem; }
#saloy-fasady-calc .sf-rate { margin-top: 0.6rem; color: #6b6156; font-size: 0.8rem; }

#saloy-fasady-calc .sf-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
#saloy-fasady-calc .sf-contact textarea { grid-column: 1 / -1; min-height: 70px; resize: vertical; }
#saloy-fasady-calc .sf-contact input, #saloy-fasady-calc .sf-contact textarea { padding: 0.7rem; border: 1px solid rgba(44,36,27,0.2); border-radius: 4px; font-family: inherit; }
#saloy-fasady-calc .sf-submit { grid-column: 1 / -1; padding: 1rem; background: #8c5f35; color: #fff; border: none; font-size: 1.05rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
#saloy-fasady-calc .sf-submit:hover { background: #6e4a28; }
#saloy-fasady-calc .sf-submit:disabled { background: #b8a894; cursor: default; }
#saloy-fasady-calc .sf-msg-err { color: #b03a2e; grid-column: 1 / -1; }
#saloy-fasady-calc .sf-done { padding: 3rem 1rem; text-align: center; font-size: 1.3rem; color: #2c6b3f; }

.sf-overlay { position: fixed; inset: 0; background: rgba(44,36,27,0.55); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sf-modal { background: #fff; border-radius: 8px; max-width: 440px; width: 100%; padding: 1.8rem 2rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); color: #2c241b; }
.sf-modal-title { font-family: Cinzel, serif; font-size: 1.2rem; font-weight: 600; margin-bottom: 0.8rem; }
.sf-modal p { line-height: 1.6; color: #4a4036; }
.sf-modal-actions { display: flex; gap: 0.8rem; margin-top: 1.4rem; flex-wrap: wrap; }
.sf-modal-actions .sf-submit { flex: 1; padding: 0.8rem 1.2rem; background: #8c5f35; color: #fff; border: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.sf-modal-back { padding: 0.8rem 1.2rem; background: transparent; border: 2px solid #2c241b; color: #2c241b; font-weight: 600; cursor: pointer; }

@media (max-width: 900px) {
  #saloy-fasady-calc .sf-main { grid-template-columns: 1fr; }
  #saloy-fasady-calc .sf-preview { order: -1; position: static; }
}
@media (max-width: 768px) {
  #saloy-fasady-calc .sf-head { display: none; }
  #saloy-fasady-calc .sf-row { grid-template-columns: 1fr 1fr; padding: 0.9rem 0.8rem; }
  #saloy-fasady-calc .sf-row select { grid-column: 1 / -1; }
  #saloy-fasady-calc .sf-contact { grid-template-columns: 1fr; }
  #saloy-fasady-calc .sf-params { grid-template-columns: repeat(2, 1fr); }
}