/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/email-roi-calculator/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/**
 * Email ROI Calculator Block - Frontend Styles
 *
 * Uses theme.json CSS custom properties for design system integration.
 * Mobile-first responsive design with container queries.
 */
.wp-block-branch-email-roi-calculator {
  --calc-input-bg: var(--wp--preset--color--white, #fff);
  --calc-input-border: var(--wp--preset--color--light-gray, #cad5e2);
  --calc-input-focus: var(--wp--preset--color--branch-purple, #580db5);
  --calc-results-bg: linear-gradient(
  	135deg,
  	var(--wp--preset--color--branch-purple, #580db5) 0%,
  	var(--wp--preset--color--violet, #2f0d68) 100%
  );
  --calc-accent: var(--wp--preset--color--emerald, #00d492);
  --calc-text: var(--wp--preset--color--white, #fff);
  --calc-text-dark: var(--wp--preset--color--midnight-violet, #130326);
  container-type: inline-size;
  padding: var(--wp--preset--spacing--60, 2rem) 0;
}

/* Calculator Title */
.calculator-title {
  font-size: var(--wp--preset--font-size--heading-four, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
  padding: 0 var(--wp--preset--spacing--50, 2rem);
}

/* Results Title */
.results-title {
  font-size: var(--wp--preset--font-size--heading-two);
  font-weight: 600;
  line-height: 1.2;
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
  text-align: center;
}

/* Layout Grid */
.calculator-layout {
  display: grid;
  gap: var(--wp--preset--spacing--60, 2rem);
}
@container (min-width: 900px) {
  .calculator-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.calculator-layout.pricing-cards .enterprise-pricing:before {
  z-index: -1;
}
.calculator-layout.pricing-cards .wp-block-button {
  width: 100%;
}

/* Input Section */
.calculator-inputs {
  background: var(--wp--preset--color--midnight-violet);
  padding-top: var(--wp--preset--spacing--60, 2rem);
  padding-bottom: var(--wp--preset--spacing--60, 2rem);
  overflow: hidden;
}
@media screen and (max-width: 779px) {
  .calculator-inputs {
    padding: var(--wp--preset--spacing--40, 1rem) 0;
  }
}

/* Input Groups */
.input-group {
  margin-block-end: var(--wp--preset--spacing--40, 1rem);
}

.input-group-wide {
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}
.input-group-wide label {
  display: block;
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  font-weight: 600;
  margin-block-end: var(--wp--preset--spacing--20, 0.25rem);
}
.input-group-wide .calc-input {
  width: 100%;
  padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
  font-size: var(--wp--preset--font-size--p-2);
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--dark-purple);
  border: 0.5px solid var(--calc-input-border);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input-group-wide .calc-input:focus {
  outline: none;
  border-color: var(--calc-input-focus);
  box-shadow: 0 0 0 3px rgba(88, 13, 181, 0.15);
}

.input-group-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--40, 1rem);
  padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--50, 2rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 10px;
}
@media screen and (max-width: 779px) {
  .input-group-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--30);
  }
}
.input-group-row:last-child {
  border-bottom: none;
}
.input-group-row label {
  flex: 1;
  font-size: var(--wp--preset--font-size--p1);
  font-weight: 500;
  align-items: center;
  gap: var(--wp--preset--spacing--20, 0.25rem);
  position: relative;
}

/* Tooltip Trigger */
.tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wp--preset--color--blue-gray, #90a1b9);
  background: rgba(144, 161, 185, 0.2);
  border-radius: 50%;
  cursor: help;
  margin-left: 6px;
}
.tooltip-trigger:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--wp--preset--spacing--20, 0.25rem) var(--wp--preset--spacing--30, 0.5rem);
  font-size: var(--wp--preset--font-size--p3, 0.75rem);
  font-weight: 400;
  color: var(--calc-text);
  background: var(--calc-text-dark);
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
}
@media screen and (max-width: 779px) {
  .tooltip-trigger:hover::after {
    width: 250px;
    bottom: calc(100% - 3px);
    transform: unset;
    left: 0;
    white-space: unset;
  }
}

/* Input Stepper */
.input-plus-minus {
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--dark-purple);
  border: 0.5px solid var(--calc-input-border);
  border-radius: 4px;
  margin-bottom: 0;
}
.input-plus-minus:focus-within {
  border-color: var(--calc-input-focus);
  box-shadow: 0 0 0 3px rgba(88, 13, 181, 0.15);
}

.stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  font-size: 18px;
  font-weight: 600;
  color: var(--wp--preset--color--white);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.stepper-btn:active {
  background: rgba(88, 13, 181, 0.2);
}

@media screen and (min-width: 1024px) {
  .input-stepper:has(.input-prefix) {
    margin-right: 20px;
  }
}

.input-stepper .calc-input {
  width: 60px;
  height: 26px;
  padding: var(--wp--preset--spacing--20, 0.25rem);
  font-size: var(--wp--preset--font-size--base, 1rem);
  text-align: center;
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--dark-purple);
  border: none;
  border-left: 0.5px solid var(--wp--preset--color--white);
  border-right: 0.5px solid var(--wp--preset--color--white);
}
.input-stepper .calc-input:focus {
  outline: none;
}
.input-stepper .calc-input {
  /* Hide number input spinners */
}
.input-stepper .calc-input::-webkit-outer-spin-button, .input-stepper .calc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-stepper .calc-input[type=number] {
  -moz-appearance: textfield;
}

/* Input prefix/suffix styling */
.input-prefix,
.input-suffix {
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  color: var(--wp--preset--color--white);
}

.input-prefix {
  margin-right: 5px;
}

.input-suffix {
  margin-left: 5px;
}

/* Advanced Section */
.advanced-section {
  margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
  padding-block-start: var(--wp--preset--spacing--40, 1rem);
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  padding: 0 var(--wp--preset--spacing--50, 2rem);
  background-color: var(--wp--preset--color--light-midnight-violet);
}
.advanced-section .input-group-row {
  padding: var(--wp--preset--spacing--30, 0.75rem) 0;
}

.advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--wp--preset--spacing--30, 0.75rem) 0;
  font-weight: 600;
  color: var(--wp--preset--color--white);
  background: transparent;
  border: none;
  cursor: pointer;
}

.advanced-title {
  flex: 1;
  text-align: left;
  font-size: var(--wp--preset--font-size--heading-four);
  font-family: var(--wp--preset--font-family--tt-hoves-pro-expanded);
}

.advanced-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--heading-four);
  background: rgba(88, 13, 181, 0.1);
  border-radius: 50%;
}

.advanced-content {
  display: none;
  padding-block-start: var(--wp--preset--spacing--30, 0.75rem);
}
.advanced-content.is-open {
  display: block;
}

/* Calculate Button */
.calculator-button-wrapper {
  margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
  text-align: center;
  padding-left: var(--wp--preset--spacing--50, 2rem);
  padding-right: var(--wp--preset--spacing--50, 2rem);
  box-sizing: border-box;
}

.calculate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--60, 2rem);
  font-size: var(--wp--preset--font-size--base, 1rem);
  font-weight: 600;
  color: var(--calc-text);
  background: var(--calc-input-focus);
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid var(--wp--preset--color--violet) !important;
}
.calculate-btn:hover, .calculate-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(88, 13, 181, 0.3);
}

/* Large Input for Emails Field */
.input-field-wrapper {
  flex-shrink: 0;
}

.calc-input-large {
  width: 180px;
  padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
  font-size: var(--wp--preset--font-size--base, 1rem);
  text-align: right;
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--dark-purple);
  border: 0.5px solid var(--calc-input-border);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media screen and (max-width: 779px) {
  .calc-input-large {
    text-align-last: left;
  }
}
.calc-input-large:focus {
  outline: none;
  border-color: var(--calc-input-focus);
  box-shadow: 0 0 0 3px rgba(88, 13, 181, 0.15);
}

/* Results Section */
.calculator-results {
  padding: var(--wp--preset--spacing--60, 2rem);
  color: var(--calc-text);
  overflow: hidden;
}
@media screen and (max-width: 779px) {
  .calculator-results {
    padding: var(--wp--preset--spacing--40);
  }
}

/* Primary Result - Inline text format */
.result-primary {
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.result-text {
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}
@media screen and (min-width: 1024px) {
  .result-text {
    font-size: var(--wp--preset--font-size--heading-two);
  }
}

.result-primary .result-value {
  display: inline;
  font-size: var(--wp--preset--font-size--heading-three, 2rem);
  font-weight: 700;
  color: var(--calc-accent);
}

/* CTA Button */
.calculator-cta {
  margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
  text-align: center;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--60, 2rem);
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  font-weight: 600;
  color: var(--calc-text-dark);
  background: var(--calc-text);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Editor Preview Styles */
.calculator-preview {
  background: var(--wp--preset--color--lavender-mist, #f4ecfe);
  border-radius: 1rem;
  padding: var(--wp--preset--spacing--50, 1.5rem);
}

.calculator-preview-grid {
  display: grid;
  gap: var(--wp--preset--spacing--40, 1rem);
  grid-template-columns: 1fr 1fr;
  margin-block-start: var(--wp--preset--spacing--40, 1rem);
}

.preview-inputs,
.preview-results {
  background: var(--calc-input-bg);
  border-radius: 0.5rem;
  padding: var(--wp--preset--spacing--40, 1rem);
}
.preview-inputs h5,
.preview-results h5 {
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  font-weight: 600;
  margin-block-end: var(--wp--preset--spacing--30, 0.5rem);
  color: var(--calc-text-dark);
}
.preview-inputs ul,
.preview-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.preview-inputs li,
.preview-results li {
  font-size: var(--wp--preset--font-size--p3, 0.75rem);
  color: var(--wp--preset--color--blue-gray, #90a1b9);
  padding: var(--wp--preset--spacing--10, 0.125rem) 0;
}

.result-highlight {
  background: var(--calc-input-focus);
  color: var(--calc-text);
  border-radius: 0.5rem;
  padding: var(--wp--preset--spacing--30, 0.5rem);
  text-align: center;
  margin-block-end: var(--wp--preset--spacing--30, 0.5rem);
}
.result-highlight .result-label {
  font-size: var(--wp--preset--font-size--p3, 0.75rem);
  opacity: 0.9;
}
.result-highlight .result-value {
  font-size: var(--wp--preset--font-size--heading-four, 1.25rem);
  font-weight: 700;
}

.calculator-cta-preview {
  margin-block-start: var(--wp--preset--spacing--40, 1rem);
  text-align: center;
}

.button-preview {
  display: inline-block;
  padding: var(--wp--preset--spacing--20, 0.25rem) var(--wp--preset--spacing--40, 1rem);
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  font-weight: 600;
  color: var(--calc-text);
  background: var(--calc-input-focus);
  border-radius: 50px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .calc-input,
  .cta-button,
  .stepper-btn {
    transition: none;
  }
}
/* Waterfall Chart */
.waterfall-chart-container {
  background: var(--calc-input-bg);
  border-radius: 1rem;
  padding: var(--wp--preset--spacing--50, 1.5rem);
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.waterfall-title {
  font-size: var(--wp--preset--font-size--heading-four, 1.5rem);
  font-weight: 700;
  color: var(--calc-text-dark);
  text-align: center;
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.waterfall-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--wp--preset--spacing--20, 0.25rem);
  height: 300px;
  padding-inline-start: 60px;
  position: relative;
}

/* Y-Axis */
.waterfall-y-axis {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: var(--wp--preset--spacing--20, 0.25rem);
}

.y-label {
  font-size: var(--wp--preset--font-size--p3, 0.75rem);
  font-weight: 500;
  color: var(--wp--preset--color--violet);
  text-align: right;
  padding-inline-end: var(--wp--preset--spacing--20, 0.25rem);
}

/* Waterfall Bars */
.waterfall-bars {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: space-around;
  height: 100%;
  border-left: 1px solid var(--wp--preset--color--light-gray, #e5e7eb);
  border-bottom: 1px solid var(--wp--preset--color--light-gray, #e5e7eb);
}

.waterfall-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 80px;
  height: 100%;
  justify-content: flex-end;
}

.bar-value {
  font-size: var(--wp--preset--font-size--p3, 0.75rem);
  font-weight: 600;
  color: var(--calc-text-dark);
  margin-block-end: var(--wp--preset--spacing--10, 0.125rem);
}

.bar {
  width: 100%;
  max-width: 50px;
  min-height: 4px;
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.bar-email-clicks {
  background: #5046e5;
}

.bar-desktop {
  background: #7dd3fc;
}

.bar-mobile-clicks {
  background: #6ee7b7;
}

.bar-to-app {
  background: #c4b5fd;
}

.bar-to-mweb {
  background: #7c3aed;
}

.bar-label {
  font-size: var(--wp--preset--font-size--p3, 0.625rem);
  font-weight: 500;
  color: var(--wp--preset--color--violet);
  text-align: center;
  margin-block-start: var(--wp--preset--spacing--20, 0.25rem);
  line-height: 1.2;
  max-width: 70px;
  word-wrap: break-word;
}

/* Share Results Section */
.share-results {
  margin-block-end: var(--wp--preset--spacing--50, 1.5rem);
}

.share-label {
  display: block;
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  font-weight: 500;
  margin-block-end: var(--wp--preset--spacing--20, 0.25rem);
}

.share-url-container {
  display: flex;
  background: var(--calc-input-bg);
  border-radius: 0.5rem;
  overflow: hidden;
}

.share-url-input {
  flex: 1;
  padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  color: var(--wp--preset--color--white);
  background: var(--wp--preset--color--dark-purple);
  border: none;
  outline: none;
  min-width: 0;
}

.copy-url-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20, 0.25rem);
  padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  font-weight: 600;
  color: var(--wp--preset--color--white);
  background: var(--calc-input-focus);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}
.copy-url-btn:hover {
  background: var(--wp--preset--color--white);
  color: var(--calc-input-focus);
}
.copy-url-btn svg {
  flex-shrink: 0;
  fill: var(--wp--preset--color--white);
}

/* Explanation Section */
.calculator-explanation {
  margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
}

.explanation-title {
  font-size: var(--wp--preset--font-size--heading-four, 1.5rem);
  font-weight: 700;
  margin-block-end: var(--wp--preset--spacing--40, 1rem);
}

.explanation-text {
  font-size: var(--wp--preset--font-size--base, 1rem);
  line-height: 1.6;
  margin-block-end: var(--wp--preset--spacing--40, 1rem);
}
.explanation-text:last-child {
  margin-block-end: 0;
}
.explanation-text strong {
  font-weight: 700;
}

/* Footer Text */
.calculator-footer-text {
  margin-block-start: var(--wp--preset--spacing--50, 1.5rem);
  padding-block-start: var(--wp--preset--spacing--40, 1rem);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.calculator-footer-text p {
  font-size: var(--wp--preset--font-size--p2, 0.875rem);
  line-height: 1.6;
  opacity: 0.9;
  margin: 0;
}

/* Responsive adjustments for waterfall chart */
@container (max-width: 600px) {
  .waterfall-chart {
    height: 200px;
    padding-inline-start: 45px;
  }
  .waterfall-y-axis {
    width: 40px;
  }
  .y-label {
    font-size: 10px;
  }
  .bar-label {
    font-size: 9px;
    max-width: 50px;
  }
  .waterfall-bar-group {
    max-width: 50px;
  }
  .bar {
    max-width: 35px;
  }
}
.result-default {
  filter: blur(6px);
  opacity: 0.6;
  transition: 0.3s ease;
}

/*# sourceMappingURL=style-index.css.map*/