.elementor-12371 .elementor-element.elementor-element-328e43e{--display:flex;}.elementor-12371 .elementor-element.elementor-element-328e43e:not(.elementor-motion-effects-element-type-background), .elementor-12371 .elementor-element.elementor-element-328e43e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://alumo.co.za/wp-content/uploads/2025/09/Asset-1-1.png");background-position:center right;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-12371 .elementor-element.elementor-element-d4d5e79{--e-transform-translateX:420px;--e-transform-translateY:85px;}.elementor-12371 .elementor-element.elementor-element-d4d5e79 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:55px;font-weight:600;line-height:30px;color:#FFFFFF;}.elementor-12371 .elementor-element.elementor-element-c8e321f{--e-transform-translateY:50px;}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:767px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}/* Start custom CSS for html, class: .elementor-element-c8e321f */:root{
  --bg1:#;
  --bg2:#0f3750;
  --accent:#00e881;      /* bright green */
  --accent-2:#14c96f;
  --ink:#ffffff;
  --muted:#c9d3de;
  --stroke:#0b445e;
  --radius:18px;
}

/* Page */
.alumo-calc{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: var(--ink);
  padding: 60px 10px;
  background: var(--bg1);
}
.alumo-wrap{max-width:950px;margin:auto;}

/* Heading */
.ac-title{
  text-align:center;
  font-size:60px;
  font-weight:800;
  letter-spacing:.4px;
  margin:10px 0 60px;
  color:#fff;
}

/* ===== TOP ===== */
.ac-top{
  display:grid; grid-template-columns:repeat(2,1fr);
  border:2px solid #00e881;
  border-radius:20px; overflow:hidden;
  background:transparent;
}
.ac-card{ padding:25px; }
.ac-top .ac-card + .ac-card{ border-left:2px solid #00e881; }

.ac-card--price, .ac-card--ticks{
  min-height:20px; display:flex; align-items:center; justify-content:center;
}

.ac-card--price{ flex-direction:column; text-align:center; }
.ac-badge{
  display:inline-block; background:var(--accent); color:#0b233e;
  font-weight:700; padding:8px 26px; border-radius:999px; font-size:15px; letter-spacing:2px; margin-bottom:12px;
}
.ac-price-line{ display:flex; align-items:flex-end; gap:8px; }
.ac-curr{ font-size:46px; font-weight:700; transform:translateY(-11px); }
.ac-price{ font-size:46px; font-weight:700; line-height:1; }
.ac-per{ font-weight:500; }
.ac-savings{ 
  margin-top:14px; 
  color:#fff;             /* keep the sentence white */
  font-weight:00; 
  font-size:24px; 
}

.ac-savings-amount {
  color: var(--accent);   /* highlight only the number in green */
}


.ac-card--ticks{ background:#0b233e; }
.ac-ticks{ list-style:none; margin:0; padding:0; width:100%; max-width:520px; }
.ac-ticks li{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:12px; padding:10px 6px; color:#fff; border-bottom:1px dashed rgba(255,255,255,.12);
}
.ac-ticks li:last-child{ border-bottom:none; }
.ac-tick{
  width:22px;height:22px;border-radius:50%; position:relative; display:inline-block;
}
.ac-tick::after{
  content:""; position:absolute; left:6px; top:1px; width:7px; height:15px;
  border-right:3px solid var(--accent); border-bottom:3px solid var(--accent); transform:rotate(45deg);
}
.ac-rate{ font-weight:900; color:#fff; }

/* ===== MIDDLE ===== */
.ac-mid{ display:grid; gap:33px; grid-template-columns:repeat(2,2fr); margin-top:32px; }
.ac-chip{
  display:inline-block; background:#fff; color:#0b223e;
  padding:6px 16px; border-radius:999px; font-weight:700; margin-bottom:12px;
}
.ac-list{ background:#0b2c48; border:1px solid var(--stroke); border-radius:14px; padding:8px; }
.ac-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:12px; padding:10px 12px ; color:var(--ink);
}
.ac-row-right{ display:flex; align-items:center; gap:12px; }
.ac-amount{ min-width:20px; text-align:right; color:var(--accent); font-weight:700; }

/* Switches (force green, no purple) */
.ac-switch{
  -webkit-appearance:none; appearance:none;
  width:30px; height:3px; background:#0b223e;
  border:px solid var(--stroke); border-radius:1px; position:relative;
  cursor:pointer; transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.ac-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:30px; height:30px;
  border-radius:0%; background:#fff; transition:transform .2s ease, background .2s ease;
}
.ac-switch:checked{ background:var(--accent); border-color:var(--accent); }
.ac-switch:checked::after{ transform:translateX(2px); background:#0b223e; }
.ac-switch:focus-visible{ outline:x solid var(--accent); outline-offset:px; }

/* ===== BOTTOM ===== */
.ac-bottom{ margin-top:0px; }
.ac-summary{
  display:grid; grid-template-columns:1fr .55fr; gap:0;
  background:#fff; color:#0b223e; border:1px solid var(--stroke); border-radius:20px; overflow:hidden;
}
.ac-summary-left{ padding:20px 24px 6px; }
.ac-qty{ display:grid; gap:10px; }
.ac-qty-row{
  display:grid; grid-template-columns:1fr minmax(80px,auto) minmax(90px,auto);
  align-items:center; column-gap:18px;
}

/* Center the steppers and the unit */
.ac-qty-controls{ justify-self:center; display:flex; align-items:center; gap:4px; }
.ac-qty-unit{ justify-self:center; text-align:center; min-width:90px; font-weight:700; }

/* Compact +/- and input (as requested) */
.ac-btn{
  background:#0b223e; color:#fff; width:18px; height:18px; font-size:12px;
  display:flex; align-items:center; justify-content:center; border:none; border-radius:4px; cursor:pointer;
  box-shadow:none; transition: box-shadow .15s ease;
}
.ac-btn:hover{ box-shadow:0 0 0 2px var(--accent) inset; }
.ac-btn:active{ transform:none; }   /* no press effect */

.ac-qty-input{
  width:10px; height:18px; padding:0;
  background:transparent; color:#0b223e; border:1px solid var(--stroke); border-radius:4px;
  text-align:center; font-weight:700; font-size:12px; line-height:16px; box-sizing:border-box;
}

/* Subtotal (only panels + batteries) */
.ac-addons-total{
  display:flex; justify-content:flex-end; gap:8px; align-items:baseline;
  margin-top:8px; font-weight:600;
}
.ac-addons-total strong{ font-size:18px; }

/* Divider + totals */
.ac-divider{ height:1px; background:var(--stroke); opacity:.5; margin:16px 0; }
.ac-left-total{ text-align:right; font-size:26px; font-weight:700; padding-bottom:16px; }

.ac-summary-right{
  background:transparent; border-left:1px solid var(--stroke);
  padding:20px; display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.ac-total-title{ font-weight:600; opacity:.9; margin-bottom:15px; }
.ac-total-figure{ font-size:40px; font-weight:700; margin-bottom: 20px;}
.ac-cta{
  background:var(--accent); color:#0b223e; font-weight:800; border:none; border-radius:999px; padding:14px 26px; cursor:pointer;
}

/* Responsive */
@media (max-width:980px){
  .ac-top, .ac-mid, .ac-summary{ grid-template-columns:1fr; }
  .ac-summary-right{ border-left:none; border-top:1px solid var(--stroke); }
  .ac-title{ font-size:36px; }
}
/* ===== FORCE GREEN TOGGLES (wins over any theme) ===== */
.alumo-calc input.ac-switch,
.alumo-calc .ac-list .ac-row .ac-row-right input.ac-switch{
  -webkit-appearance: none !important;
  appearance: none !important;
  accent-color: #00e881 !important;          /* extra safety */
  width: 50px !important;
  height: 29px !important;
  border-radius: 999px !important;
  background: #0b223e !important;            /* OFF track */
  border: 1px solid #0b445e !important;
  position: relative !important;
  box-shadow: none !important;
  background-image: none !important;          /* kill theme gradients */
  filter: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}

/* knob */
.alumo-calc input.ac-switch::after,
.alumo-calc .ac-list .ac-row .ac-row-right input.ac-switch::after{
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  transition: transform .2s ease, background .2s ease !important;
}

/* ON = GREEN (no purple) */
.alumo-calc input.ac-switch:checked,
.alumo-calc .ac-list .ac-row .ac-row-right input.ac-switch:checked{
  background: #00e881 !important;
  border-color: #00e881 !important;
}
.alumo-calc input.ac-switch:checked::after,
.alumo-calc .ac-list .ac-row .ac-row-right input.ac-switch:checked::after{
  transform: translateX(22px) !important;
  background: #0b223e !important;            /* dark knob on green */
}

/* Optional: accessible focus ring in green */
.alumo-calc input.ac-switch:focus-visible{
  outline: 2px solid #00e881 !important;
  outline-offset: 2px !important;
}
/* ===== Compact steppers + easy tuning knobs ===== */
.alumo-calc{
  /* -- Sizes you can change -- */
  --step-size: 40px;         /* +/- button width & height */
  --step-radius: 20px;        /* +/- button corner radius */
  --step-font: 11px;         /* +/- symbol size */
  --step-pad: 20px;           /* internal padding for +/- */

  --qty-input-w: 50px;       /* number box width */
  --qty-input-h: 38px;       /* number box height */
  --qty-input-radius: 10px;   /* number box radius */
  --qty-input-pad: 0px;      /* number box padding */

  --qty-gap: 10px;            /* gap between minus, input, plus */
  --qty-col-gap: 60px;       /* gap between label / steppers / unit */

  --left-pad-x: 24px;        /* left/right padding for the left summary block */
  --left-pad-t: 30px;        /* top padding */
  --left-pad-b: 10px;         /* bottom padding */

  --divider-inset: 32px;     /* left/right inset so divider isn't full width */
  --divider-thickness: 1px;  /* divider thickness */
  --divider-opacity: .3;     /* divider opacity (0–1) */
}

/* Left summary block padding (so you can adjust spacing easily) */
.alumo-calc .ac-summary-left{
  padding: var(--left-pad-t) var(--left-pad-x) var(--left-pad-b) var(--left-pad-x) !important;
}

/* Column spacing inside each qty row */
.alumo-calc .ac-summary .ac-qty .ac-qty-row{
  column-gap: var(--qty-col-gap) !important;
}

/* Space between -, [n], + */
.alumo-calc .ac-summary .ac-qty .ac-qty-row .ac-qty-controls{
  gap: var(--qty-gap) !important;
}

/* Make +/- smaller (and adjustable) */
.alumo-calc .ac-summary .ac-qty .ac-qty-row .ac-qty-controls .ac-btn{
  width: var(--step-size) !important;
  height: var(--step-size) !important;
  padding: var(--step-pad) !important;
  font-size: var(--step-font) !important;
  line-height: calc(var(--step-size) - 2px) !important;
  border-radius: var(--step-radius) !important;
}

/* Make the number box tighter (and adjustable) */
.alumo-calc .ac-summary .ac-qty .ac-qty-row .ac-qty-controls .ac-qty-input{
  width: var(--qty-input-w) !important;
  height: var(--qty-input-h) !important;
  padding: var(--qty-input-pad) !important;
  border-radius: var(--qty-input-radius) !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Divider not full length (use inset variables above) */
.alumo-calc .ac-summary .ac-divider{
  height: var(--divider-thickness) !important;
  margin: 20px var(--divider-inset) !important; /* ← shorter line */
  background: var(--stroke) !important;
  opacity: var(--divider-opacity) !important;
}
/* ===== PAGE 2 — MOBILE REFINEMENTS ===== */
@media (max-width: 640px){
  .alumo-calc{ padding: 28px 12px !important; }

  /* title + hero numbers */
  .ac-title{ font-size: 28px !important; margin: 6px 0 24px !important; }
  .ac-badge{ padding:6px 16px !important; font-size:13px !important; }
  .ac-curr, .ac-price{ font-size: 34px !important; }
  .ac-savings{ font-size:18px !important; }

  /* top/ticks stack is already 1col at 980px; tighten spacing */
  .ac-card{ padding:16px !important; }
  .ac-ticks{ max-width: 100% !important; }
  .ac-ticks li{ padding:8px 2px !important; }

  /* middle lists stack (already at 980px); increase tap targets */
  .ac-chip{ margin-bottom:8px !important; }
  .ac-row{ padding:10px 10px !important; }

  /* summary */
  .ac-summary{ border-radius:14px !important; }
  .ac-summary-left{ padding:16px !important; }
  .ac-qty-row{ column-gap:18px !important; }
  .ac-qty-controls{ gap:6px !important; }
  .ac-qty-input{ width:44px !important; height:34px !important; }
  .ac-btn{ width:32px !important; height:32px !important; font-size:14px !important; }

  .ac-divider{ margin:14px 20px !important; }
  .ac-left-total{ font-size:22px !important; }

  .ac-summary-right{ padding:16px !important; }
  .ac-total-figure{ font-size:32px !important; text-align:center !important; }
  .ac-cta{ width:100% !important; padding:14px 18px !important; }
}
/* ───── Alumo Page 2 — Style Lock (scoped) ───── */
#alumoPage2,
#alumoPage2 * {
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif !important;
  box-sizing:border-box;
}

/* Kill theme/Elementor button skins inside our scope */
#alumoPage2 .elementor-button,
#alumoPage2 .wp-element-button,
#alumoPage2 [class*="button"],
#alumoPage2 button,
#alumoPage2 .ac-cta {
  all: unset;                       /* wipe foreign styles */
  display:inline-block;
  cursor:pointer;
}

/* Re-apply our intended CTA style (wins due to ID + !important) */
#alumoPage2 .ac-cta{
  background:#00e881 !important; color:#0b223e !important;
  font-weight:800 !important; border-radius:999px !important;
  padding:14px 26px !important; border:none !important;
  text-align:center !important;
}
#alumoPage2 .ac-cta:hover,
#alumoPage2 .ac-cta:focus-visible{
  background:transparent !important; color:#fff !important;
  outline:none !important; border:2px solid #fff !important;
}

/* Neutralize theme inputs/toggles/shadows just in our scope */
#alumoPage2 input,
#alumoPage2 select,
#alumoPage2 textarea {
  background-image:none !important;
  filter:none !important;
  box-shadow:none !important;
  outline:none;
}

/* Force our green switches (your existing styles already; this just ensures win) */
#alumoPage2 input.ac-switch{
  -webkit-appearance:none !important; appearance:none !important;
  width:50px !important; height:29px !important;
  border-radius:999px !important; background:#0b223e !important;
  border:1px solid #0b445e !important;
}
#alumoPage2 input.ac-switch::after{
  content:"" !important; position:absolute !important; top:3px !important; left:3px !important;
  width:20px !important; height:20px !important; border-radius:50% !important; background:#fff !important;
  transition:transform .2s ease !important;
}
#alumoPage2 input.ac-switch:checked{
  background:#00e881 !important; border-color:#00e881 !important;
}
#alumoPage2 input.ac-switch:checked::after{
  transform:translateX(22px) !important; background:#0b223e !important;
}

/* Numbers always align the same */
#alumoPage2 .ac-price,
#alumoPage2 .ac-total-figure,
#alumoPage2 .ac-amount,
#alumoPage2 #acMonthlySub,
#alumoPage2 #acGrand{
  font-variant-numeric:tabular-nums lining-nums;
}/* End custom CSS */