/**
 * Amazon Affiliate Commission Calculator section.
 *
 * Colours, sizes and spacing are taken from the approved comp. The page
 * structure is Kadence blocks; the calculator and the subscribe box are Fluent
 * Forms, so most of this file re-skins Fluent Forms' default markup.
 *
 *   .apcalc-section   the whole light-blue band
 *   .apcalc-form      the white calculator card (Fluent Forms wrapper)
 *   .apcalc-community the blue "Join the Community" card
 *   .apcalc-subscribe the email form inside it (Fluent Forms wrapper)
 */

.apcalc-section {
  --apc-blue: #2a6bff;
  --apc-blue-deep: #153e9e;
  --apc-panel: #f1f7ff;
  --apc-panel-border: #83a1ce;
  --apc-track: #c1d9f6;
  --apc-divider: #cfdae8;
  --apc-field-border: #c5d7e7;
  --apc-ink: #0f0c09;
  --apc-muted: #575452;
  --apc-yellow: #ffbe2a;
  --apc-highlight: #fdf1a9;
  --apc-badge: #f1e4cf;
  --apc-font: "Figtree", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.apcalc-section,
.apcalc-section h1,
.apcalc-section h2,
.apcalc-section h3,
.apcalc-section p,
.apcalc-section label,
.apcalc-section select,
.apcalc-section input,
.apcalc-section button {
  font-family: var(--apc-font);
}

.apcalc-section *,
.apcalc-section *:before,
.apcalc-section *:after { box-sizing: border-box; }

/* ---------- badge ---------- */

/*
 * Background, radius, padding and type come from the block's own Kadence
 * attributes - Kadence prints those inline with a higher-specificity selector
 * than anything scoped to .apcalc-section, so setting them here would lose.
 * This adds only what Kadence has no control for.
 */
.apcalc-section .apcalc-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.apcalc-section .apcalc-badge:before {
  content: "vs";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--apc-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- call to action row ---------- */

.apcalc-section .apcalc-cta .kb-buttons-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* The second button is a plain text link in the comp, not a filled button. */
.apcalc-section .apcalc-cta-link .kb-button {
  background: transparent;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--apc-ink);
  box-shadow: none;
}

.apcalc-section .apcalc-cta-link .kb-button:hover { color: var(--apc-blue); }

/* ---------- calculator card ---------- */

.apcalc-form {
  background: #fff;
  border-radius: 24px;
  padding: 56px 62px;
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  /* The intro column above is centre-aligned and that inherits in. */
  text-align: left;
}

.apcalc-form .ff-t-container.apcalc-grid {
  display: flex;
  align-items: center;
  gap: 50px;
  margin: 0;
}

/*
 * No wrapping: Fluent Forms prints an inline flex-basis on every cell, so the
 * two of them plus the gap overflow the line and the second column would drop
 * below - where FF's own :last-of-type{flex-grow:1} stretches it full width.
 * Letting them shrink instead keeps the two columns side by side.
 */
.apcalc-form .apcalc-grid > .ff-t-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 0;
  min-width: 0;
}

/* Spacing is the gap's job, so the per-field margin has to go. */
.apcalc-form .apcalc-grid .ff-el-group { margin-bottom: 0; }

/* ---------- field labels ---------- */

.apcalc-form .apcalc-field .ff-el-input--label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: auto;
  float: none;
  margin: 0 0 12px;
}

.apcalc-form .apcalc-field .ff-el-input--label label,
.apcalc-form .apcalc-value {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--apc-ink);
  margin: 0;
  padding: 0;
}

/* The live readout the script writes next to the slider label. */
.apcalc-form .apcalc-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- category select ---------- */

.apcalc-form .ff-el-form-control.apcalc-select {
  display: block;
  height: 57px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--apc-field-border);
  background-color: #fff;
  padding: 0 46px 0 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 55px;
  color: var(--apc-ink);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230f0c09' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
}

.apcalc-form .ff-el-form-control.apcalc-select:focus {
  outline: none;
  border-color: var(--apc-blue);
  box-shadow: 0 0 0 3px rgba(42, 107, 255, .18);
}

/* ---------- sliders ---------- */

.apcalc-form .ff-el-form-control.apcalc-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
  cursor: pointer;
}

.apcalc-form .apcalc-slider:focus { outline: none; box-shadow: none; }

.apcalc-form .apcalc-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--apc-blue) 0%,
    var(--apc-blue) var(--apcalc-pct, 0%),
    var(--apc-track) var(--apcalc-pct, 0%),
    var(--apc-track) 100%);
}

.apcalc-form .apcalc-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--apc-track);
}

.apcalc-form .apcalc-slider::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--apc-blue);
}

.apcalc-form .apcalc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--apc-blue);
  margin-top: -7px;
}

.apcalc-form .apcalc-slider::-moz-range-thumb {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 0;
  background: var(--apc-blue);
  box-sizing: border-box;
}

.apcalc-form .apcalc-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(42, 107, 255, .35);
}

.apcalc-form .apcalc-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(42, 107, 255, .35);
}

/* ---------- commission breakdown ---------- */

.apcalc-form .apcalc-result-wrap { padding: 0; }

.apcalc-form .apcalc-result {
  background-color: var(--apc-panel);
  border: 2px solid var(--apc-panel-border);
  border-radius: 16px;
  padding: 44px 28px 40px;
}

.apcalc-form .apcalc-result-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--apc-blue-deep);
  margin: 0 0 24px;
}

.apcalc-form .apcalc-result-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.apcalc-form .apcalc-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--apc-blue-deep);
}

.apcalc-form .apcalc-result-total {
  border-top: 1px solid var(--apc-divider);
  margin-top: 6px;
  padding-top: 20px;
}

.apcalc-form .apcalc-result-row--total { align-items: center; }

.apcalc-form .apcalc-total-value {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--apc-ink);
  background: var(--apc-highlight);
  padding: 6px 8px;
}

/* The calculator answers live; there is nothing to submit. */
.apcalc-form .ff_submit_btn_wrapper { display: none; }

/* ---------- join the community ---------- */

.apcalc-section .apcalc-community { text-align: left; }

.apcalc-section .apcalc-community-title {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
}

.apcalc-section .apcalc-community-text {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #fff;
  margin: 0;
  max-width: 560px;
}

/*
 * Fallback copies of the two variables this block needs. .apcalc-section
 * normally supplies them, but the subscribe form is often embedded on its own.
 */
.apcalc-subscribe {
  --apc-blue: #2a6bff;
  --apc-blue-deep: #153e9e;
  --apc-ink: #0f0c09;
}

/*
 * The pill goes on the <form>, NOT the <fieldset>.
 *
 * Fluent Forms prints background-color, padding and border as inline
 * !important on every fieldset (FormBuilder.php:603), and an inline
 * !important declaration outranks any stylesheet rule - so a pill built on
 * the fieldset silently never renders and the field reads as invisible.
 */
.apcalc-subscribe .frm-fluent-form {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 6px;
  max-width: 499px;
  margin-left: auto;
}

.apcalc-subscribe .frm-fluent-form > fieldset {
  display: flex;
  align-items: center;
}

/* Help text belongs under the pill, not inside it. */
.apcalc-subscribe .ff-el-help-message {
  position: absolute;
  top: calc(100% + 10px);
  left: 6px;
  right: 6px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
}

.apcalc-subscribe .ff-el-group {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

/*
 * Visually hidden, not display:none - the comp has no visible label, but
 * display:none drops it from the accessibility tree and leaves the input
 * named only by its placeholder.
 *
 * The :hover/:focus repeats are deliberate: some themes ship a helper that
 * un-clips hidden text on hover or focus, which made the label flash into
 * view over the pill.
 */
.apcalc-subscribe .ff-el-input--label,
.apcalc-subscribe .ff-el-input--label:hover,
.apcalc-subscribe .ff-el-input--label:focus,
.apcalc-subscribe .ff-el-input--label:focus-within,
.apcalc-subscribe .ff-el-input--label label:hover {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

.apcalc-subscribe .ff-el-form-control {
  height: 39px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  padding: 0 18px;
  font-size: 15px;
  color: var(--apc-ink);
}

.apcalc-subscribe .ff-el-form-control:focus,
.apcalc-subscribe .ff-el-form-control:hover {
  outline: none;
  box-shadow: none;
  background: transparent;
  border: 0;
}
.apcalc-subscribe .ff-el-form-control::placeholder { color: #8b8785; opacity: 1; }

.apcalc-subscribe .ff_submit_btn_wrapper {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.apcalc-subscribe .ff-btn-submit {
  height: 39px;
  min-width: 113px;
  padding: 0 22px;
  border: 0;
  border-radius: 8px;
  background: var(--apc-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 39px;
  cursor: pointer;
}

.apcalc-subscribe .ff-btn-submit:hover,
.apcalc-subscribe .ff-btn-submit:focus {
  background: var(--apc-blue-deep);
  color: #fff;
}

/* errorMessagePlacement is stackToBottom, so errors land here, below the pill. */
.apcalc-subscribe .ff-errors-in-stack .error,
.apcalc-subscribe .ff-errors-in-stack {
  color: #fff;
  font-size: 13px;
  text-align: right;
  margin-top: 10px;
}

.apcalc-subscribe .ff-message-success {
  color: #fff;
  font-weight: 600;
  text-align: right;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .apcalc-form { padding: 40px; }
  .apcalc-form .ff-t-container.apcalc-grid { gap: 32px; }
}

@media (max-width: 767px) {
  .apcalc-form {
    border-radius: 18px;
    padding: 28px 22px;
  }

  .apcalc-form .ff-t-container.apcalc-grid {
    flex-wrap: wrap;
    gap: 28px;
  }

  /* Beats the inline flex-basis Fluent Forms prints on every cell. */
  .apcalc-form .apcalc-grid > .ff-t-cell { flex-basis: 100% !important; }

  .apcalc-form .apcalc-result { padding: 28px 22px; }
  .apcalc-form .apcalc-result-title { font-size: 21px; margin-bottom: 18px; }

  .apcalc-section .apcalc-community-title { font-size: 24px; }

  .apcalc-subscribe .frm-fluent-form {
    margin-left: 0;
    max-width: none;
  }
    .apcalc-form .apcalc-result-row {
        font-size:14px;
    }
}