/* ==================================================================
   Greener Energy Group - Solar Savings Calculator
   Shared stylesheet, loaded once site-wide.

   Every class is prefixed `solarcalc-` on purpose. This file now
   loads globally (not inside one Elementor HTML widget's own <style>
   tag any more), so generic names like ".widget" or ".field" are no
   longer safe, they'd be far too likely to collide with the theme's
   own CSS somewhere else on the site. Do not add an unprefixed class.
   ================================================================== */

:root {
  --solarcalc-brand: #1FB25A;
  --solarcalc-bg: #ffffff;
  --solarcalc-text: #111827;
  --solarcalc-subtle-text: #6b7280;
  --solarcalc-border: #e5e7eb;
  --solarcalc-dropdown: #111827;
  --solarcalc-share-btn-bg: #111827;
  --solarcalc-share-btn-text: #ffffff;
  --solarcalc-quote-btn-bg: #1FB25A;
  --solarcalc-quote-btn-text: #ffffff;
  --solarcalc-font-heading: 'Montserrat', sans-serif;
  --solarcalc-font-body: 'Montserrat', sans-serif;
  --solarcalc-radius: 16px;
  --solarcalc-good: #1FB25A;
}

.solarcalc-widget * { box-sizing: border-box; }

.solarcalc-widget {
  max-width: 560px;
  margin: 0 auto;
  background: var(--solarcalc-bg);
  border: 1px solid var(--solarcalc-border);
  border-radius: var(--solarcalc-radius);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  font-family: var(--solarcalc-font-body);
  color: var(--solarcalc-text);
  -webkit-font-smoothing: antialiased;
}

.solarcalc-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.solarcalc-widget-header h1 {
  font-family: var(--solarcalc-font-heading);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--solarcalc-text);
}

.solarcalc-widget-header p {
  margin: 0;
  font-size: 13px;
  color: var(--solarcalc-subtle-text);
}

.solarcalc-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--solarcalc-good);
  background: rgba(22,163,74,0.1);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.solarcalc-field {
  margin-bottom: 18px;
}

.solarcalc-field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.solarcalc-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--solarcalc-text);
}

.solarcalc-field-value {
  font-family: var(--solarcalc-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--solarcalc-brand);
}

.solarcalc-widget input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--solarcalc-border);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  accent-color: var(--solarcalc-brand);
  cursor: pointer;
}

.solarcalc-widget input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--solarcalc-brand);
  border: 3px solid var(--solarcalc-bg);
  box-shadow: 0 0 0 1px var(--solarcalc-border);
  cursor: pointer;
}

.solarcalc-widget input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--solarcalc-brand);
  border: 3px solid var(--solarcalc-bg);
  box-shadow: 0 0 0 1px var(--solarcalc-border);
  cursor: pointer;
}

.solarcalc-range-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--solarcalc-subtle-text);
  margin-top: 6px;
}

.solarcalc-widget select,
.solarcalc-number-input {
  width: 100%;
  font-family: var(--solarcalc-font-body);
  font-size: 14px;
  color: var(--solarcalc-dropdown);
  background: var(--solarcalc-bg);
  border: 1px solid var(--solarcalc-border);
  border-radius: 10px;
  padding: 10px 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
  cursor: pointer;
}

.solarcalc-number-input {
  background-image: none;
  padding-right: 12px;
  cursor: text;
}

.solarcalc-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.solarcalc-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--solarcalc-border);
  border-radius: 10px;
}

.solarcalc-toggle-row-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.solarcalc-toggle-row-text .solarcalc-t-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--solarcalc-text);
}

.solarcalc-toggle-row-text .solarcalc-t-sub {
  font-size: 11.5px;
  color: var(--solarcalc-subtle-text);
}

.solarcalc-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}

.solarcalc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.solarcalc-switch .solarcalc-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--solarcalc-border);
  border-radius: 999px;
  transition: 0.15s;
}

.solarcalc-switch .solarcalc-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.solarcalc-switch input:checked + .solarcalc-slider {
  background: var(--solarcalc-brand);
}

.solarcalc-switch input:checked + .solarcalc-slider:before {
  transform: translateX(18px);
}

.solarcalc-assumption-note {
  font-size: 11px;
  color: var(--solarcalc-subtle-text);
  margin-top: 6px;
  line-height: 1.4;
}

.solarcalc-capacity-note {
  font-size: 12px;
  color: #92620a;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 10px;
  padding: 9px 12px;
  line-height: 1.4;
}

.solarcalc-divider {
  height: 1px;
  background: var(--solarcalc-border);
  margin: 22px 0;
}

.solarcalc-results-heading {
  font-family: var(--solarcalc-font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--solarcalc-subtle-text);
  margin: 0 0 12px;
}

.solarcalc-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.solarcalc-result-card {
  background: #fafafa;
  border: 1px solid var(--solarcalc-border);
  border-radius: 12px;
  padding: 14px;
  transition: background 0.2s;
}

.solarcalc-result-card .solarcalc-r-label {
  font-size: 11.5px;
  color: var(--solarcalc-subtle-text);
  margin-bottom: 4px;
}

.solarcalc-result-card .solarcalc-r-value {
  font-family: var(--solarcalc-font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--solarcalc-text);
  line-height: 1.1;
}

.solarcalc-result-card .solarcalc-r-value span.solarcalc-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--solarcalc-subtle-text);
  margin-left: 2px;
}

.solarcalc-result-card.solarcalc-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(245,158,11,0.02));
  border-color: rgba(245,158,11,0.35);
}

.solarcalc-result-card.solarcalc-hero .solarcalc-r-value {
  font-size: 30px;
  color: var(--solarcalc-brand);
}

.solarcalc-co2-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--solarcalc-subtle-text);
  background: rgba(22,163,74,0.06);
  border: 1px solid rgba(22,163,74,0.15);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 18px;
}

.solarcalc-co2-line strong {
  color: var(--solarcalc-good);
}

.solarcalc-quote-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--solarcalc-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--solarcalc-quote-btn-text);
  background: var(--solarcalc-quote-btn-bg);
  border: none;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  text-decoration: none;
}

/* !important here on purpose: this widget lives inside the client's
   own page (or, for the pull-out tab, in a panel injected directly
   into the page), and the theme's global button hover/focus colour
   (often a bright pink or red accent) otherwise wins the cascade and
   flashes through on hover. */
.solarcalc-quote-btn:hover,
.solarcalc-quote-btn:focus-visible,
.solarcalc-quote-btn:active {
  background: var(--solarcalc-quote-btn-bg) !important;
  color: var(--solarcalc-quote-btn-text) !important;
  border-color: transparent !important;
  text-decoration: none !important;
  filter: brightness(0.94);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--solarcalc-quote-btn-bg) 30%, transparent);
}

.solarcalc-share-row {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.solarcalc-share-btn {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--solarcalc-share-btn-text);
  background: var(--solarcalc-share-btn-bg);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  opacity: 0.85;
}

.solarcalc-share-btn:hover,
.solarcalc-share-btn:focus-visible,
.solarcalc-share-btn:active {
  background: var(--solarcalc-share-btn-bg) !important;
  color: var(--solarcalc-share-btn-text) !important;
  border-color: transparent !important;
  opacity: 1;
  outline: none;
}

.solarcalc-disclaimer {
  font-size: 10.5px;
  color: var(--solarcalc-subtle-text);
  text-align: center;
  margin-top: 14px;
  line-height: 1.4;
}

/* Lead capture modal (Pro tier behaviour, off by default for GEG since
   quoteButton.actionMode is "url", kept working in case it's switched
   on later) */
.solarcalc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000010;
}

.solarcalc-modal-backdrop.solarcalc-open { display: flex; }

.solarcalc-modal {
  background: var(--solarcalc-bg);
  border-radius: var(--solarcalc-radius);
  padding: 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.solarcalc-modal h2 {
  font-family: var(--solarcalc-font-heading);
  font-size: 17px;
  margin: 0 0 4px;
}

.solarcalc-modal p.solarcalc-sub {
  font-size: 12.5px;
  color: var(--solarcalc-subtle-text);
  margin: 0 0 16px;
}

.solarcalc-modal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  margin-top: 10px;
}

.solarcalc-modal input[type="text"],
.solarcalc-modal input[type="email"],
.solarcalc-modal input[type="tel"] {
  width: 100%;
  font-family: var(--solarcalc-font-body);
  font-size: 14px;
  border: 1px solid var(--solarcalc-border);
  border-radius: 10px;
  padding: 10px 12px;
}

.solarcalc-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.solarcalc-modal-actions button {
  flex: 1;
  border-radius: 10px;
  padding: 11px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}

.solarcalc-modal-cancel {
  background: #f3f4f6;
  color: var(--solarcalc-text);
}

.solarcalc-modal-cancel:hover,
.solarcalc-modal-cancel:focus-visible,
.solarcalc-modal-cancel:active {
  background: #e5e7eb !important;
  color: var(--solarcalc-text) !important;
  border-color: transparent !important;
  outline: none;
}

.solarcalc-modal-submit {
  background: var(--solarcalc-quote-btn-bg);
  color: var(--solarcalc-quote-btn-text);
}

.solarcalc-modal-submit:hover,
.solarcalc-modal-submit:focus-visible,
.solarcalc-modal-submit:active {
  background: var(--solarcalc-quote-btn-bg) !important;
  color: var(--solarcalc-quote-btn-text) !important;
  border-color: transparent !important;
  filter: brightness(0.94);
  outline: none;
}

/* Belt and braces: in case the host theme targets input/button focus
   rings or select borders with its own accent colour. */
.solarcalc-modal input:focus,
.solarcalc-widget select:focus,
.solarcalc-number-input:focus {
  outline: none !important;
  border-color: var(--solarcalc-brand) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--solarcalc-brand) 20%, transparent) !important;
}

.solarcalc-modal-success {
  text-align: center;
  padding: 10px 0 4px;
}

.solarcalc-modal-success .solarcalc-tick {
  font-size: 34px;
  margin-bottom: 8px;
}

@media (max-width: 400px) {
  .solarcalc-widget { padding: 18px; border-radius: 12px; }
  .solarcalc-row-2 { grid-template-columns: 1fr; }
}

/* ==================================================================
   SITE-WIDE PULL-OUT TAB
   Fixed vertical tab, middle-right of the viewport, on every page
   this snippet is added to. Clicking it slides a panel in from the
   right containing the exact same mounted calculator.
   ================================================================== */

.solarcalc-tab-launcher {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  /* Deliberately near the top of the usable z-index range. Livechat/
     support-widget scripts (Tawk.to, Intercom, Crisp, etc.) commonly
     set their own widget close to the same ceiling so they're always
     on top of everything else on the page, these values beat that so
     the tab and drawer sit above a livechat bubble rather than under
     it. */
  z-index: 2147483646;
}

.solarcalc-tab-btn {
  display: block;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  background: var(--solarcalc-brand);
  color: #ffffff;
  border: none;
  /* Rounded on the right here on purpose: rotate(180deg) above flips
     the box's corners to the opposite side when rendered (top-left
     swaps with bottom-right, and so on), so this ends up rounded on
     the left, facing into the page, and square on the right, flush
     against the viewport edge. */
  border-radius: 0 10px 10px 0;
  padding: 18px 11px;
  font-family: var(--solarcalc-font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: -2px 2px 12px rgba(0,0,0,0.18);
}

.solarcalc-tab-btn:hover,
.solarcalc-tab-btn:focus-visible,
.solarcalc-tab-btn:active {
  background: var(--solarcalc-brand) !important;
  color: #ffffff !important;
  filter: brightness(0.94);
  outline: none;
}

.solarcalc-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2147483645;
}

.solarcalc-drawer-overlay.solarcalc-open {
  opacity: 1;
  pointer-events: auto;
}

/* Slides using `right`, not `transform`, on purpose: a transformed
   ancestor creates a new containing block for position:fixed
   descendants, which would trap the lead-capture modal above inside
   this panel instead of letting it cover the real viewport. */
.solarcalc-drawer-panel {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100%;
  width: min(420px, 92vw);
  background: #ffffff;
  box-shadow: -8px 0 30px rgba(0,0,0,0.18);
  z-index: 2147483647;
  overflow-y: auto;
  padding: 44px 16px 32px;
  transition: right 0.3s ease;
}

.solarcalc-drawer-panel.solarcalc-open {
  right: 0;
}

.solarcalc-drawer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background: #f3f4f6;
  color: var(--solarcalc-text);
  font-family: var(--solarcalc-font-body);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.solarcalc-drawer-close:hover,
.solarcalc-drawer-close:focus-visible,
.solarcalc-drawer-close:active {
  background: #e5e7eb !important;
  color: var(--solarcalc-text) !important;
  outline: none;
}

.solarcalc-drawer-panel .solarcalc-widget {
  max-width: 100%;
  border: none;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 480px) {
  .solarcalc-tab-btn { font-size: 12px; padding: 14px 9px; }
}