/* =========================================================
   SFS Dynamic Quotation System — Public Styles
   Mobile-first, Core-Web-Vitals friendly (no layout shift,
   system fonts, lazy-loaded images, minimal blocking CSS).
========================================================= */
.sfs-landing, .sfs-section, .sfs-quote-form, .sfs-card {
	box-sizing: border-box;
}
.sfs-landing *, .sfs-section *, .sfs-quote-form *, .sfs-card * { box-sizing: border-box; }

:root {
	--sfs-primary: #b5793a;
	--sfs-primary-dark: #8f5c26;
	--sfs-dark: #1f2421;
	--sfs-light-bg: #faf7f2;
	--sfs-whatsapp: #25d366;
	--sfs-radius: 14px;
	--sfs-shadow: 0 6px 24px rgba(0,0,0,.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.sfs-section { max-width: 1240px; margin: 0 auto; padding: 48px 20px; }
.sfs-section-header { text-align: center; margin-bottom: 28px; }
.sfs-section-header h2 { font-size: 28px; margin: 0 0 8px; color: var(--sfs-dark); }
.sfs-section-sub { color: #666; margin: 0; }
.sfs-empty { text-align: center; color: #888; grid-column: 1/-1; }

/* ---------- Buttons ---------- */
.sfs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 12px 20px; border-radius: 999px; font-weight: 600; font-size: 14px;
	text-decoration: none; cursor: pointer; border: 2px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	line-height: 1.2;
}
.sfs-btn:hover { transform: translateY(-2px); }
.sfs-btn-primary { background: var(--sfs-primary); color: #fff; }
.sfs-btn-primary:hover { background: var(--sfs-primary-dark); color:#fff; }
.sfs-btn-secondary { background: var(--sfs-dark); color: #fff; }
.sfs-btn-outline { background: transparent; border-color: var(--sfs-primary); color: var(--sfs-primary); }
.sfs-btn-outline-light { background: transparent; border-color: #fff; color: #fff; }
.sfs-btn-whatsapp { background: var(--sfs-whatsapp); color: #fff; }
.sfs-btn-cta { background: linear-gradient(135deg, #d9902f, var(--sfs-primary)); color: #fff; box-shadow: 0 8px 22px rgba(181,121,58,.45); }
.sfs-btn-large { padding: 16px 28px; font-size: 16px; }
.sfs-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Grid & Cards ---------- */
.sfs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
.sfs-card {
	position: relative;
	background: #fff;
	border-radius: var(--sfs-radius);
	box-shadow: var(--sfs-shadow);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sfs-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.12); }
.sfs-card-image-wrap { display:block; aspect-ratio: 4/3; overflow: hidden; background: #f1efe9; }
.sfs-card-image { width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .4s ease; }
.sfs-card:hover .sfs-card-image { transform: scale(1.06); }
.sfs-badge { position:absolute; top:12px; left:12px; z-index:2; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; color:#fff; }
.sfs-badge-sale { background:#e14b4b; left:12px; }
.sfs-badge-bestseller { background:#b5793a; top:44px; }
.sfs-card-body { padding: 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.sfs-card-category { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#999; }
.sfs-card-title { font-size:16px; margin:0; }
.sfs-card-title a { color: var(--sfs-dark); text-decoration:none; }
.sfs-card-desc { font-size:13px; color:#777; margin:0; flex:1; }
.sfs-card-rating { color:#e8a439; font-size:14px; }
.sfs-card-rating-count { color:#999; font-size:12px; margin-left:4px; }
.sfs-card-meta { display:flex; align-items:center; justify-content:space-between; }
.sfs-card-price { font-weight:700; color: var(--sfs-primary-dark); }
.sfs-card-views { font-size:12px; color:#999; }
.sfs-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sfs-card-actions .sfs-btn { flex:1; padding:10px 12px; font-size:13px; }
.sfs-card .sfs-btn-whatsapp { margin: 4px 16px 16px; }

/* ---------- Carousel ---------- */
.sfs-carousel-header { display:flex; align-items:center; justify-content:space-between; text-align:left; }
.sfs-carousel-nav { display:flex; gap:8px; }
.sfs-carousel-arrow { width:36px; height:36px; border-radius:50%; border:1px solid #ddd; background:#fff; cursor:pointer; font-size:18px; }
.sfs-carousel { overflow: hidden; }
.sfs-carousel-track { display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:8px; scrollbar-width:thin; }
.sfs-carousel-item { flex: 0 0 270px; }

/* ---------- Quote Form ---------- */
.sfs-quote-wrapper { display:grid; grid-template-columns: 320px 1fr; gap: 40px; align-items:start; }
.sfs-quote-intro h2 { font-size: 26px; margin-top:0; }
.sfs-trust-list { list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px; color:#444; }
.sfs-quote-form {
	background:#fff; border-radius: var(--sfs-radius); box-shadow: var(--sfs-shadow);
	padding: 28px; display:flex; flex-direction:column; gap:18px;
}
.sfs-form-heading { margin: 8px 0 0; font-size:16px; border-bottom:2px solid var(--sfs-light-bg); padding-bottom:8px; }
.sfs-form-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
.sfs-form-field { display:flex; flex-direction:column; gap:6px; }
.sfs-form-field-wide { grid-column: 1 / -1; }
.sfs-form-field-btn { justify-content:flex-end; }
.sfs-form-field label { font-size:13px; font-weight:600; color:#333; }
.sfs-form-field input, .sfs-form-field select, .sfs-form-field textarea {
	padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; width:100%; font-family:inherit;
}
.sfs-form-field input:focus, .sfs-form-field select:focus, .sfs-form-field textarea:focus {
	outline:none; border-color: var(--sfs-primary); box-shadow:0 0 0 3px rgba(181,121,58,.15);
}
.sfs-quote-list { display:flex; flex-direction:column; gap:10px; }
.sfs-quote-list-empty { color:#999; font-size:13px; margin:0; }
.sfs-quote-list-item { display:flex; align-items:center; gap:12px; background: var(--sfs-light-bg); border-radius:10px; padding:8px 12px; }
.sfs-quote-list-item img { width:48px; height:48px; object-fit:cover; border-radius:8px; }
.sfs-quote-list-item .sfs-qli-name { flex:1; font-weight:600; font-size:14px; }
.sfs-quote-list-item input[type="number"] { width:64px; padding:6px; }
.sfs-quote-list-item .sfs-qli-remove { background:none; border:none; color:#c0392b; cursor:pointer; font-size:18px; }
.sfs-form-message { padding:12px 14px; border-radius:8px; display:none; font-size:14px; }
.sfs-form-message.success { display:block; background:#e6f7ec; color:#1e7a3d; }
.sfs-form-message.error { display:block; background:#fdecea; color:#c0392b; }
.sfs-form-privacy { font-size:12px; color:#999; margin:0; }

/* ---------- Sticky CTAs ---------- */
.sfs-sticky-whatsapp {
	position: fixed; bottom: 88px; right: 20px; z-index: 9999;
	width:56px; height:56px; border-radius:50%; background: var(--sfs-whatsapp);
	color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px;
	box-shadow: 0 6px 18px rgba(0,0,0,.25); text-decoration:none;
}
.sfs-sticky-quote-btn {
	position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999;
	background: var(--sfs-primary); color:#fff; padding: 14px 26px; border-radius: 999px;
	font-weight:700; text-decoration:none; box-shadow: 0 8px 22px rgba(181,121,58,.5);
	display:none;
}
@media (max-width: 782px) {
	.sfs-sticky-quote-btn { display:inline-flex; }
}

/* ---------- Hero (Landing Page) ---------- */
.sfs-hero {
	position: relative; min-height: 560px; display:flex; align-items:center;
	background-size: cover; background-position:center; color:#fff; padding: 60px 20px;
	contain: layout paint;
}
.sfs-hero-overlay { position:absolute; inset:0; background: linear-gradient(120deg, rgba(20,20,18,.82), rgba(20,20,18,.45)); }
.sfs-hero-content { position:relative; z-index:1; max-width: 720px; margin: 0 auto; text-align:center; }
.sfs-hero-badge { display:inline-block; background: rgba(255,255,255,.15); backdrop-filter: blur(4px); padding:8px 16px; border-radius:999px; font-size:13px; margin-bottom:16px; }
.sfs-hero h1 { font-size: clamp(28px, 5vw, 48px); line-height:1.15; margin:0 0 16px; }
.sfs-hero-sub { font-size: 18px; opacity:.9; margin: 0 0 28px; }
.sfs-hero-ctas { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom: 24px; }
.sfs-hero-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; font-size:13px; opacity:.9; }

.sfs-trust-bar {
	display:flex; flex-wrap:wrap; justify-content:center; gap:24px; padding: 18px 20px;
	background: var(--sfs-light-bg); font-size: 14px; color:#444; text-align:center;
}

/* ---------- Reviews ---------- */
.sfs-reviews-summary { display:flex; align-items:center; justify-content:center; gap:20px; }
.sfs-reviews-score { font-size:48px; font-weight:800; color: var(--sfs-primary); }
.sfs-stars { color:#e8a439; font-size:22px; }

/* ---------- FAQ ---------- */
.sfs-faq-list { max-width: 800px; margin: 0 auto; display:flex; flex-direction:column; gap:10px; }
.sfs-faq-item { border:1px solid #eee; border-radius:10px; overflow:hidden; }
.sfs-faq-question {
	width:100%; text-align:left; background:#fff; border:none; padding:16px 18px; font-size:15px;
	font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
}
.sfs-faq-answer { max-height:0; overflow:hidden; transition: max-height .25s ease; background: var(--sfs-light-bg); }
.sfs-faq-answer p { margin:0; padding: 0 18px; }
.sfs-faq-item.is-open .sfs-faq-answer { max-height: 300px; }
.sfs-faq-item.is-open .sfs-faq-answer p { padding: 14px 18px; }
.sfs-faq-item.is-open .sfs-faq-icon { transform: rotate(45deg); }
.sfs-faq-icon { transition: transform .2s ease; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.sfs-quote-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.sfs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
	.sfs-card-body { padding:12px; }
	.sfs-hero { min-height: 460px; }
}