/* =====================================================================
   Clearcut Sites — reusable feature pack styles (pairs with site-features.js).
   F18 before/after · F19 countdown · F20 quote · F21 WhatsApp/call · F22 reviews
   Themed entirely with :root tokens so it reskins with the rest of the site.
   ===================================================================== */

/* ---- F18 · before / after slider ---- */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  border: 1px solid var(--color-border);
}
.ba-before, .ba-after { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba-after { clip-path: inset(0 50% 0 0); }
.ba-label {
  position: absolute; bottom: 12px;
  padding: 3px 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.5); border-radius: 999px;
}
.ba-label.before { right: 12px; }
.ba-label.after { left: 12px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: #fff; transform: translateX(-1px); pointer-events: none;
}
.ba-handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%;
  background: #fff; color: #14161a; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* ---- F19 · countdown ---- */
.cc-countdown {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 20px 22px; text-align: center;
}
.cc-countdown .cc-cd-msg { font-weight: 600; color: var(--color-dark); margin-bottom: 12px; }
.cc-cd-time { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cc-cd-unit {
  min-width: 58px; padding: 8px 6px; border-radius: 10px;
  background: var(--color-dark); color: #fff; display: flex; flex-direction: column; align-items: center;
}
.cc-cd-unit b { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1; }
.cc-cd-unit i { font-style: normal; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.75; margin-top: 4px; }
.cc-cd-done { display: none; font-weight: 600; color: var(--color-primary-dark); }

/* ---- F20 · instant quote estimator ---- */
.cc-quote { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 24px; }
.cc-quote .cc-quote-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--color-border); font-size: 0.92rem; }
.cc-quote .cc-quote-row:first-of-type { border-top: 0; }
.cc-quote label { color: var(--color-text); }
.cc-quote select, .cc-quote input[type="number"] {
  padding: 7px 10px; border-radius: 8px; border: 1.5px solid var(--color-border);
  background: var(--color-bg); color: var(--color-dark); font-family: var(--font-body); min-width: 120px;
}
.cc-quote input[type="number"] { width: 80px; min-width: 0; }
.cc-quote .cc-quote-check { display: flex; align-items: center; gap: 8px; }
.cc-quote-result {
  margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--color-primary);
  display: flex; align-items: baseline; justify-content: space-between;
}
.cc-quote-result span { color: var(--color-text-light); font-size: 0.9rem; }
.cc-quote-total { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-dark); font-weight: 700; }
.cc-quote-note { font-size: 0.76rem; color: var(--color-text-light); margin-top: 8px; }

/* ---- F21 · WhatsApp / click-to-call buttons ---- */
.btn-whatsapp, .btn-call {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 0.92rem;
  text-decoration: none; border: 0; cursor: pointer;
}
.btn-whatsapp { background: #25d366; color: #073b1e; }
.btn-whatsapp:hover { background: #1fbe5a; }
.btn-call { background: var(--color-dark); color: #fff; }
.btn-call:hover { background: #000; }
/* optional floating version: add class cc-chat-fab to a container of the buttons */
.cc-chat-fab { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 10px; }

/* ---- F22 · reviews wall (visual only; real client reviews also get JSON-LD schema) ---- */
.reviews-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .reviews-wall { grid-template-columns: 1fr; } }
.review-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; }
.review-stars { color: var(--color-primary); letter-spacing: 2px; font-size: 1.05rem; }
.review-quote { color: var(--color-text); font-style: italic; margin: 10px 0 14px; }
.review-name { font-weight: 700; color: var(--color-dark); font-size: 0.9rem; }
.review-source { font-size: 0.78rem; color: var(--color-text-light); }

/* shared layout helper for the showcase */
.mini-demo { margin-top: 26px; }
.mini-demo > h4 { font-family: var(--font-heading); font-size: 1.15rem; margin-bottom: 12px; }