/* ============================================================
   SignUpEngine Discount & Pricing Calculator — CSS
   ============================================================
   Paste into your Custom CSS plugin.
   ============================================================ */

.sue-calc {
  --sue-purple: rgb(116, 68, 154);
  --sue-purple-light: rgba(116, 68, 154, 0.12);
  --sue-purple-faint: rgba(116, 68, 154, 0.06);
  --sue-teal: rgb(26, 148, 188);
  --sue-teal-light: rgba(26, 148, 188, 0.12);
  --sue-white: #ffffff;
  --sue-text: #2d2d3a;
  --sue-text-light: #6b6b7b;
  --sue-border: #e2e2ea;
  --sue-shadow: 0 4px 24px rgba(116, 68, 154, 0.10);
  font-family: inherit;
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  color: var(--sue-text);
  line-height: 1.5;
  box-sizing: border-box;
}
.sue-calc *, .sue-calc *::before, .sue-calc *::after { box-sizing: border-box !important; }
.sue-calc br { display: none !important; }

/* --- CARD --- */
.sue-calc .sue-calc-card {
  background: var(--sue-white);
  border-radius: 14px;
  box-shadow: var(--sue-shadow);
  overflow: hidden;
  border: 1px solid var(--sue-border);
}

/* --- HEADER --- */
.sue-calc .sue-calc-header {
  background: linear-gradient(135deg, var(--sue-purple) 0%, rgb(90, 48, 128) 100%);
  padding: 20px 28px;
  text-align: center;
}
.sue-calc .sue-calc-header h2 { margin: 0 0 3px 0 !important; font-size: 21px !important; font-weight: 700 !important; color: var(--sue-white) !important; letter-spacing: -0.02em; padding: 0 !important; border: none !important; }
.sue-calc .sue-calc-header p { margin: 0 !important; font-size: 13.5px !important; color: rgba(255,255,255,0.75) !important; font-weight: 400; padding: 0 !important; }

/* --- COLLAPSIBLE INTRO --- */
.sue-calc .sue-calc-intro { padding: 0; border-bottom: 1px solid var(--sue-border); }
.sue-calc .sue-calc-intro-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 28px !important; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background 0.15s ease; }
.sue-calc .sue-calc-intro-toggle:hover { background: var(--sue-purple-faint); }
.sue-calc .sue-calc-intro-toggle h3 { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; color: var(--sue-purple) !important; padding: 0 !important; border: none !important; }
.sue-calc .sue-calc-intro-arrow { font-size: 11px !important; color: var(--sue-purple) !important; transition: transform 0.25s ease; display: inline-block !important; line-height: 1 !important; }
.sue-calc .sue-calc-intro.open .sue-calc-intro-arrow { transform: rotate(180deg); }
.sue-calc .sue-calc-intro-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; padding: 0 28px; }
.sue-calc .sue-calc-intro.open .sue-calc-intro-content { max-height: 500px; padding: 0 28px 16px; }
.sue-calc .sue-calc-intro-content p { margin: 0 0 10px 0 !important; font-size: 13px !important; color: var(--sue-text) !important; line-height: 1.6 !important; }
.sue-calc .sue-calc-intro-content p:last-child { margin-bottom: 0 !important; }
.sue-calc .sue-calc-intro-alt { margin-top: 10px; padding: 12px 16px; background: var(--sue-teal-light); border-radius: 8px; border-left: 3px solid var(--sue-teal); }
.sue-calc .sue-calc-intro-alt p { margin: 0 !important; font-size: 12.5px !important; color: var(--sue-text) !important; line-height: 1.55 !important; }

/* --- TABS --- */
.sue-calc .sue-calc-tabs { display: flex !important; border-bottom: 1px solid var(--sue-border); }
.sue-calc .sue-calc-tab { flex: 1; padding: 12px 12px !important; border: none !important; background: var(--sue-white) !important; color: var(--sue-text-light) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; transition: all 0.2s ease; font-family: inherit; position: relative; letter-spacing: 0.01em; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-transform: none !important; text-align: center !important; white-space: nowrap !important; }
.sue-calc .sue-calc-tab:hover { background: var(--sue-purple-faint) !important; color: var(--sue-purple) !important; }
.sue-calc .sue-calc-tab.active { color: var(--sue-purple) !important; background: var(--sue-purple-faint) !important; }
.sue-calc .sue-calc-tab.active::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 3px; background: var(--sue-purple); border-radius: 3px 3px 0 0; }

/* --- BODY --- */
.sue-calc .sue-calc-body { padding: 20px 28px 22px; }

/* --- PANELS --- */
.sue-calc .sue-calc-panel { display: none; }
.sue-calc .sue-calc-panel.active { display: block; }

/* --- PANEL DESCRIPTION --- */
.sue-calc .sue-calc-panel-desc { font-size: 13px !important; color: var(--sue-text-light) !important; line-height: 1.5 !important; margin: 0 0 14px 0 !important; padding: 0 0 12px 0 !important; border-bottom: 1px solid var(--sue-border); }

/* --- FORM FIELDS --- */
.sue-calc .sue-calc-field { margin-bottom: 14px; }
.sue-calc .sue-calc-field label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--sue-text) !important; margin: 0 0 3px 0 !important; padding: 0 !important; width: auto !important; float: none !important; text-align: left !important; letter-spacing: 0.01em; }
.sue-calc .sue-calc-field .sue-hint { font-size: 12px !important; color: var(--sue-text-light) !important; font-weight: 400 !important; margin-left: 4px; }

/* --- INPUT FIELDS --- */
.sue-calc .sue-calc-input { width: 100% !important; padding: 10px 14px !important; border: 2px solid var(--sue-border) !important; border-top: 2px solid var(--sue-border) !important; border-right: 2px solid var(--sue-border) !important; border-bottom: 2px solid var(--sue-border) !important; border-left: 2px solid var(--sue-border) !important; border-radius: 8px !important; font-size: 16px !important; font-family: inherit !important; color: var(--sue-text) !important; background: var(--sue-white) !important; background-color: var(--sue-white) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; float: none !important; display: block !important; line-height: 1.5 !important; }
.sue-calc .sue-calc-input::-webkit-outer-spin-button, .sue-calc .sue-calc-input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.sue-calc .sue-calc-input:focus { border-color: var(--sue-purple) !important; border-top-color: var(--sue-purple) !important; border-right-color: var(--sue-purple) !important; border-bottom-color: var(--sue-purple) !important; border-left-color: var(--sue-purple) !important; box-shadow: 0 0 0 3px rgba(116, 68, 154, 0.15) !important; outline: none !important; background: var(--sue-white) !important; }
.sue-calc .sue-calc-input::placeholder { color: #aaa !important; opacity: 1 !important; }

/* --- TWO-COLUMN GRID --- */
.sue-calc .sue-calc-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }

/* --- WARNING MESSAGE --- */
.sue-calc .sue-calc-warning { display: none; padding: 10px 14px; background: #fff3f3; border: 1px solid #e8b4b4; border-left: 4px solid #c0392b; border-radius: 8px; font-size: 13px !important; color: #8b1a1a !important; line-height: 1.5 !important; margin-bottom: 14px; }
.sue-calc .sue-calc-warning.visible { display: block; animation: sueFadeIn 0.2s ease; }

/* --- SECTION HEADING --- */
.sue-calc .sue-calc-section-heading { display: none; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em; color: var(--sue-purple) !important; padding-bottom: 8px; border-bottom: 2px solid var(--sue-purple); margin-bottom: 14px; }
.sue-calc .sue-calc-section-heading.visible { display: block; }

/* --- ROUNDING TOGGLE ROW --- */
.sue-calc .sue-calc-toggle-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px; background: var(--sue-purple-faint); border-radius: 8px; margin-bottom: 16px; }
.sue-calc .sue-calc-toggle-label { font-size: 13px !important; font-weight: 600 !important; color: var(--sue-text) !important; }
.sue-calc .sue-calc-toggle-desc { font-size: 11px !important; color: var(--sue-text-light) !important; margin-top: 2px; }

/* --- TOGGLE SWITCH ---
   Uses JS-applied .checked class on the  instead of
   CSS :checked sibling selectors, because WordPress injects
    tags between the checkbox and the track span which
   breaks both + and ~ CSS combinators. */
.sue-calc label.sue-calc-toggle { display: block !important; position: relative !important; width: 46px !important; height: 24px !important; min-width: 46px !important; min-height: 24px !important; flex-shrink: 0 !important; margin: 0 0 0 12px !important; padding: 0 !important; float: none !important; overflow: visible !important; line-height: normal !important; font-size: 0 !important; cursor: pointer !important; }
.sue-calc .sue-calc-toggle input[type="checkbox"] { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; margin: 0 !important; padding: 0 !important; border: none !important; appearance: none !important; -webkit-appearance: none !important; }
.sue-calc .sue-calc-toggle-track { position: absolute !important; cursor: pointer !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 46px !important; height: 24px !important; background: var(--sue-border) !important; background-color: var(--sue-border) !important; border-radius: 24px !important; transition: background 0.25s ease, background-color 0.25s ease !important; display: block !important; border: none !important; padding: 0 !important; margin: 0 !important; }
.sue-calc .sue-calc-toggle-track::before { content: '' !important; position: absolute !important; height: 18px !important; width: 18px !important; left: 3px !important; bottom: 3px !important; background: var(--sue-white) !important; background-color: var(--sue-white) !important; border-radius: 50% !important; transition: transform 0.25s ease !important; box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important; border: none !important; display: block !important; }

/* Checked state — controlled by JS adding .checked class to the label */
.sue-calc label.sue-calc-toggle.checked .sue-calc-toggle-track { background: var(--sue-purple) !important; background-color: var(--sue-purple) !important; }
.sue-calc label.sue-calc-toggle.checked .sue-calc-toggle-track::before { transform: translateX(22px) !important; }

/* --- RESULTS --- */
.sue-calc .sue-calc-results { margin-top: 0; display: none; }
.sue-calc .sue-calc-results.visible { display: block; animation: sueFadeIn 0.3s ease; }
@keyframes sueFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sue-calc .sue-calc-result-grid { display: grid !important; gap: 10px; }
.sue-calc .sue-calc-result-grid.two-col { grid-template-columns: 1fr 1fr; }
.sue-calc .sue-calc-result-card { padding: 14px 16px; border-radius: 10px; text-align: center; }
.sue-calc .sue-calc-result-card.purple { background: linear-gradient(135deg, rgba(116,68,154,0.08) 0%, rgba(116,68,154,0.04) 100%); border: 1px solid rgba(116,68,154,0.15); }
.sue-calc .sue-calc-result-card.teal { background: linear-gradient(135deg, rgba(26,148,188,0.08) 0%, rgba(26,148,188,0.04) 100%); border: 1px solid rgba(26,148,188,0.15); }
.sue-calc .sue-calc-result-label { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em; margin-bottom: 2px !important; }
.sue-calc .sue-calc-result-card.purple .sue-calc-result-label { color: var(--sue-purple) !important; }
.sue-calc .sue-calc-result-card.teal .sue-calc-result-label { color: var(--sue-teal) !important; }
.sue-calc .sue-calc-result-value { font-size: 28px !important; font-weight: 800 !important; letter-spacing: -0.03em; line-height: 1.1 !important; }
.sue-calc .sue-calc-result-card.purple .sue-calc-result-value { color: var(--sue-purple) !important; }
.sue-calc .sue-calc-result-card.teal .sue-calc-result-value { color: var(--sue-teal) !important; }
.sue-calc .sue-calc-result-note { font-size: 11px !important; color: var(--sue-text-light) !important; margin-top: 3px; }

/* --- SUMMARY BOX --- */
.sue-calc .sue-calc-result-summary { margin-top: 10px; padding: 12px 16px; background: var(--sue-purple-faint); border-radius: 8px; border-left: 4px solid var(--sue-purple); }
.sue-calc .sue-calc-result-summary p { margin: 0 !important; font-size: 13px !important; color: var(--sue-text) !important; line-height: 1.5 !important; }
.sue-calc .sue-calc-result-summary strong { color: var(--sue-purple) !important; font-weight: 700 !important; }

/* --- TOOLTIP --- */
.sue-calc .sue-calc-info { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 15px !important; height: 15px !important; border-radius: 50% !important; background: var(--sue-purple-light) !important; color: var(--sue-purple) !important; font-size: 9px !important; font-weight: 700 !important; margin-left: 5px; cursor: help; vertical-align: middle; position: relative; border: none !important; padding: 0 !important; }
.sue-calc .sue-calc-info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--sue-text); color: var(--sue-white) !important; padding: 8px 12px !important; border-radius: 8px !important; font-size: 11px !important; font-weight: 400 !important; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10; max-width: 240px; white-space: normal; text-align: center; line-height: 1.4; }
.sue-calc .sue-calc-info:hover::after { opacity: 1; }


/* ============================================================
   ABOUT SIGNUPENGINE SECTION
   ============================================================ */
.sue-calc .sue-calc-about {
  margin-top: 24px;
  border-radius: 14px;
  background: var(--sue-white);
  box-shadow: var(--sue-shadow);
  border: 1px solid var(--sue-border);
  overflow: hidden;
}

.sue-calc .sue-calc-about-inner {
  display: flex !important;
  align-items: flex-start;
  gap: 28px;
  padding: 28px;
}

/* Logo column */
.sue-calc .sue-calc-about-logo {
  flex-shrink: 0;
  width: 120px;
}

.sue-calc .sue-calc-about-logo img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Text column */
.sue-calc .sue-calc-about-text {
  flex: 1;
  min-width: 0;
}

.sue-calc .sue-calc-about-text h3 {
  margin: 0 0 10px 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sue-purple) !important;
  padding: 0 !important;
  border: none !important;
}

.sue-calc .sue-calc-about-text p {
  margin: 0 0 16px 0 !important;
  font-size: 13.5px !important;
  color: var(--sue-text) !important;
  line-height: 1.65 !important;
}

/* Highlight pills — 2x2 grid layout */
.sue-calc .sue-calc-about-highlights {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}

.sue-calc .sue-calc-about-highlight {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 6px 12px;
  background: var(--sue-purple-faint);
  border: 1px solid rgba(116, 68, 154, 0.12);
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sue-purple) !important;
  white-space: nowrap;
}

.sue-calc .sue-calc-about-highlight svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  color: var(--sue-purple) !important;
}

/* CTA link styled as a button */
.sue-calc .sue-calc-about-cta {
  display: inline-block !important;
  padding: 10px 22px !important;
  background: var(--sue-purple) !important;
  background-color: var(--sue-purple) !important;
  color: var(--sue-white) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  border: none !important;
  letter-spacing: 0.01em;
}

.sue-calc .sue-calc-about-cta:hover {
  background: rgb(100, 55, 138) !important;
  background-color: rgb(100, 55, 138) !important;
  box-shadow: 0 4px 16px rgba(116, 68, 154, 0.3) !important;
  transform: translateY(-1px);
  color: var(--sue-white) !important;
  text-decoration: none !important;
}


/* ============================================================
   FAQ SECTION
   ============================================================ */
.sue-calc .sue-calc-faq {
  margin-top: 24px;
  border-radius: 14px;
  background: var(--sue-white);
  box-shadow: var(--sue-shadow);
  border: 1px solid var(--sue-border);
  overflow: hidden;
  padding: 24px 28px;
}

.sue-calc .sue-calc-faq-title {
  margin: 0 0 16px 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sue-purple) !important;
  padding: 0 !important;
  border: none !important;
}

/* Each FAQ item */
.sue-calc .sue-calc-faq-item {
  border: 1px solid var(--sue-border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.sue-calc .sue-calc-faq-item:last-child {
  margin-bottom: 0;
}

.sue-calc .sue-calc-faq-item:hover {
  border-color: rgba(116, 68, 154, 0.25);
}

/* Question row — clickable */
.sue-calc .sue-calc-faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  gap: 12px;
}

.sue-calc .sue-calc-faq-q span:first-child {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--sue-text) !important;
  line-height: 1.4 !important;
}

/* Arrow */
.sue-calc .sue-calc-faq-arrow {
  font-size: 10px !important;
  color: var(--sue-purple) !important;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  display: inline-block !important;
  line-height: 1 !important;
}

.sue-calc .sue-calc-faq-item.open .sue-calc-faq-arrow {
  transform: rotate(180deg);
}

/* Answer — collapsed by default */
.sue-calc .sue-calc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.sue-calc .sue-calc-faq-item.open .sue-calc-faq-a {
  max-height: 300px;
  padding: 0 16px 14px;
}

.sue-calc .sue-calc-faq-a p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--sue-text-light) !important;
  line-height: 1.6 !important;
}

/* Links inside FAQ answers */
.sue-calc .sue-calc-faq-a a {
  color: var(--sue-purple) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}

.sue-calc .sue-calc-faq-a a:hover {
  color: rgb(90, 48, 128) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sue-calc { max-width: 100%; }
  .sue-calc .sue-calc-header { padding: 18px 20px; }
  .sue-calc .sue-calc-header h2 { font-size: 19px !important; }
  .sue-calc .sue-calc-intro-toggle { padding: 12px 20px !important; }
  .sue-calc .sue-calc-intro.open .sue-calc-intro-content { padding: 0 20px 14px; }
  .sue-calc .sue-calc-body { padding: 16px 20px 18px; }
  .sue-calc .sue-calc-about-inner { padding: 22px; gap: 20px; }
  .sue-calc .sue-calc-about-logo { width: 90px; }
  .sue-calc .sue-calc-faq { padding: 20px 20px; }
}

@media (max-width: 480px) {
  .sue-calc .sue-calc-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sue-calc .sue-calc-result-grid.two-col { grid-template-columns: 1fr !important; }
  .sue-calc .sue-calc-header { padding: 16px 14px; }
  .sue-calc .sue-calc-header h2 { font-size: 18px !important; }
  .sue-calc .sue-calc-intro-toggle { padding: 12px 14px !important; }
  .sue-calc .sue-calc-intro.open .sue-calc-intro-content { padding: 0 14px 14px; }
  .sue-calc .sue-calc-body { padding: 14px 14px 16px; }
  .sue-calc .sue-calc-tab { font-size: 11px !important; padding: 10px 8px !important; }
  .sue-calc .sue-calc-result-value { font-size: 24px !important; }
  .sue-calc .sue-calc-info::after { left: auto; right: -8px; transform: none; }

  /* About section stacks vertically on mobile */
  .sue-calc .sue-calc-about-inner { flex-direction: column !important; align-items: center; text-align: center; padding: 20px 16px; }
  .sue-calc .sue-calc-about-logo { width: 100px; }
  .sue-calc .sue-calc-about-highlights { grid-template-columns: 1fr !important; justify-items: center !important; }
  .sue-calc .sue-calc-about-text h3 { text-align: center; }
  .sue-calc .sue-calc-about-cta { display: block !important; text-align: center !important; }

  /* FAQ on mobile */
  .sue-calc .sue-calc-faq { padding: 16px 14px; }
  .sue-calc .sue-calc-faq-q { padding: 10px 12px; }
  .sue-calc .sue-calc-faq-q span:first-child { font-size: 12.5px !important; }
}


/* ============================================================
   PAGE-LEVEL STYLES
   ============================================================
   These target the page body and footer directly (outside the
   .sue-calc scope) to set the grey background and footer margin.

   WordPress generates body classes based on the page slug.
   We use multiple selectors to cover common patterns.
   If your theme uses a different body class, adjust the
   selectors below accordingly.
   ============================================================ */

/* Grey background on the entire page body.
   Multiple selectors for compatibility — at least one will match.
   The page slug 'discount-percentage-calculator' becomes a
   body class like .page-slug-discount-percentage-calculator or
   .page-id-XXXX depending on the theme. We also target the
   body element directly as a fallback scoped to pages that
   contain our calculator. */
body.page-slug-discount-percentage-calculator,
body.page-template-default:has(.sue-calc),
body:has(.sue-calc) {
  background-color: rgb(247, 247, 247) !important;
}

/* Footer spacing — add top margin to match the gap between
   the header/nav and the calculator content.
   Common WP footer selectors. Adjust if your theme uses
   a different class or element. */
body:has(.sue-calc) footer,
body:has(.sue-calc) .site-footer,
body:has(.sue-calc) #footer,
body:has(.sue-calc) .footer-wrap,
body:has(.sue-calc) .elementor-location-footer {
  margin-top: 40px !important;
}