/**
 * SR Group Discount Calculator — calc.css
 * Summit Routes | v2.3.0
 *
 * Buttons are now <button> elements, not <a> tags, so Enfold's
 * a / a:hover rules cannot touch them. Inline styles on the
 * critical layout elements are the primary defence; this sheet
 * is a secondary layer for hover effects and responsive tweaks.
 */

:root {
  --sr-bg:         #ffffff;
  --sr-bg-alt:     #f7f6f2;
  --sr-border:     rgba(0,0,0,0.1);
  --sr-text:       #1a1a1a;
  --sr-text-muted: #6b6b6b;
  --sr-accent:     #1a1a1a;
  --sr-radius:     10px;
  --sr-radius-sm:  6px;
  --sr-font:       inherit;
  --sr-price-size: 2rem;
  --sr-track-h:    4px;
  --sr-thumb-size: 20px;
}

.sr-calculator {
  font-family:   var(--sr-font);
  background:    var(--sr-bg-alt);
  border:        0.5px solid var(--sr-border);
  border-radius: var(--sr-radius);
  padding:       1.25rem 1.5rem;
  max-width:     520px;
  margin:        1.5rem 0;
  box-sizing:    border-box;
}

.sr-calc-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   0.75rem;
}

.sr-calc-label {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--sr-text-muted);
}

.sr-calc-spots {
  font-size:     11px;
  font-weight:   500;
  padding:       3px 10px;
  border-radius: var(--sr-radius-sm);
}

.sr-calc-slider-wrap { margin-bottom: 1rem; }

.sr-calc-slider {
  -webkit-appearance: none;
  appearance:    none;
  width:         100%;
  height:        var(--sr-track-h);
  background:    var(--sr-border);
  border-radius: 2px;
  outline:       none;
  cursor:        pointer;
  margin-bottom: 6px;
}
.sr-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:    none;
  width:         var(--sr-thumb-size);
  height:        var(--sr-thumb-size);
  border-radius: 50%;
  background:    var(--sr-accent);
  cursor:        pointer;
  border:        3px solid var(--sr-bg);
  box-shadow:    0 0 0 1.5px var(--sr-border);
}
.sr-calc-slider::-moz-range-thumb {
  width:         var(--sr-thumb-size);
  height:        var(--sr-thumb-size);
  border-radius: 50%;
  background:    var(--sr-accent);
  cursor:        pointer;
  border:        3px solid var(--sr-bg);
  box-shadow:    0 0 0 1.5px var(--sr-border);
}
.sr-calc-slider-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       11px;
  color:           var(--sr-text-muted);
}

.sr-calc-result {
  background:    var(--sr-bg);
  border:        0.5px solid var(--sr-border);
  border-radius: var(--sr-radius-sm);
  padding:       1rem 1.25rem;
  margin-bottom: 0.875rem;
}
.sr-calc-people       { font-size: 13px; color: var(--sr-text-muted); margin-bottom: 6px; }
.sr-calc-count        { font-weight: 500; color: var(--sr-text); }
.sr-calc-price-block  { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.sr-calc-currency     { font-size: 13px; color: var(--sr-text-muted); font-weight: 400; }
.sr-calc-price        { font-size: var(--sr-price-size); font-weight: 500; color: var(--sr-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sr-calc-per          { font-size: 13px; color: var(--sr-text-muted); }
.sr-calc-saving       { font-size: 12px; font-weight: 500; color: #3b6d11; margin-bottom: 3px; }
.sr-calc-total        { font-size: 13px; color: var(--sr-text-muted); font-weight: 400; }

/* ---- Hover & focus effects for <button> elements -------------------- */
/* Inline styles handle colour/layout; these add interaction feedback    */

.sr-calc-btn-wa:hover,
.sr-calc-btn-wa:focus   { filter: brightness(0.9);  outline: none; }

.sr-calc-btn-email:hover,
.sr-calc-btn-email:focus { filter: brightness(0.88); outline: none; }

.sr-calc-btn-wa:active,
.sr-calc-btn-email:active { transform: scale(0.98); }

.sr-calc-btn-wa[disabled],
.sr-calc-btn-email[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---- Tier summary --------------------------------------------------- */
.sr-calc-tiers {
  font-size:   12px;
  color:       var(--sr-text-muted);
  line-height: 1.6;
  border-top:  0.5px solid var(--sr-border);
  padding-top: 0.75rem;
}
.sr-calc-tiers strong { color: var(--sr-text); font-weight: 500; }

.sr-calc-notice { margin: 0; }

@media (max-width: 400px) {
  .sr-calculator { padding: 1rem; margin: 1rem 0; }
  :root { --sr-price-size: 1.6rem; }
}