:root {
  --green:       #2C5A18;
  --green-dark:  #2E6B14;
  --green-pale:  #EEF4E8;
  --green-light: #3A7A20;
  --amber:       #C8920A;
  --amber-lt:    #DDA620;
  --cream:       #F5EED8;
  --off-white:   #FAF6EE;
  --border:      #DDD8CC;
  --go-blue:     #1A73E8;
  --go-blue-dk:  #1557B0;
}

/* Clusia Hedge Form - scoped under .form-wrap
   Every color/background/border/font property below carries !important
   because Elementor's global kit CSS (buttons, headings, form fields,
   links) loads with higher specificity/priority and silently overrides
   these otherwise. */

.form-wrap, .form-wrap * {
  box-sizing: border-box !important;
}
.form-wrap ul, .form-wrap li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.form-wrap button, .form-wrap input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
}

.form-wrap {
  --green:       #2C5A18;
  --green-dark:  #2E6B14;
  --green-pale:  #EEF4E8;
  --green-light: #3A7A20;
  --border:      #DDD8CC;
  --amber:       #C8920A;
  --amber-lt:    #DDA620;
  --cream:       #F5EED8;
  --off-white:   #FAF6EE;
  --go-blue:     #1A73E8;
  --go-blue-dk:  #1557B0;
  padding: 28px 16px 60px !important;
  max-width: 572px !important;
  margin: 0 auto !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  position: relative !important;
}

.form-wrap .form-card {
  background: var(--off-white) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.10) !important;
}

.form-wrap .prog-track { height: 3px !important; background: rgba(0,0,0,.08) !important; }
.form-wrap .prog-fill { height: 100% !important; background: var(--amber) !important; width: 0%; transition: width .4s ease !important; }

.form-wrap .step-counter-bar {
  text-align: center !important;
  padding: 10px 16px 0 !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: #999 !important; letter-spacing: .8px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}
.form-wrap .step-counter-bar strong { color: var(--green) !important; font-weight: 700 !important; }

.form-wrap .steps { display: flex !important; flex-direction: column !important; padding: 16px 18px !important; gap: 6px !important; }
.form-wrap .step {
  border-radius: 14px !important;
  border: 4px solid transparent !important;
  transition: opacity .35s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
  cursor: default !important;
  overflow: hidden !important;
}
.form-wrap .step.active { background: #fff !important; border-color: var(--go-blue) !important; box-shadow: 0 0 0 3px rgba(26,115,232,0.16), 0 3px 16px rgba(26,115,232,0.12) !important; }
.form-wrap .step.done { background: #E8E5DC !important; cursor: pointer !important; }
.form-wrap .step#s1.done { background: #F0F5EC !important; }
.form-wrap .step.upcoming { display: none !important; }

.form-wrap .step-header { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 16px !important; }
.form-wrap .step-num {
  width: 26px !important; height: 26px !important; border-radius: 50% !important;
  background: #D8D4CA !important; color: #888 !important;
  font-size: 12px !important; font-weight: 700 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.form-wrap .step.active .step-num, .form-wrap .step.done .step-num { background: var(--green-light) !important; color: #fff !important; }
.form-wrap .step-label {
  font-size: 14px !important; font-weight: 600 !important; color: #666 !important;
  flex: 1 !important; line-height: 1.3 !important;
}
.form-wrap .step.active .step-label { color: #1C1C1A !important; }
.form-wrap .step.done   .step-label { color: #555 !important; font-size: 13px !important; }
.form-wrap .step-done-val { font-size: 12px !important; color: var(--green-light) !important; font-weight: 700 !important; white-space: nowrap !important; }

/* ── yellow-pill treatment for the active question, matching step 1's header style ── */
.form-wrap .step.active .step-label {
  background: #EBB81E !important; color: #1A3C0A !important; font-weight: 800 !important;
  padding: 10px 15px !important; border-radius: 12px !important; line-height: 1.35 !important;
  box-shadow: 0 3px 10px rgba(235,184,30,.32) !important;
  flex: 0 1 auto !important; margin-right: 6px !important;
}
/* ── blue "Step X of 5" pill on the active step, replaces the number circle while active ── */
.form-wrap .step-pill {
  display: none !important;
  background: #EAF1FB !important; color: var(--go-blue) !important;
  font-size: 10px !important; font-weight: 800 !important; letter-spacing: .6px !important; text-transform: uppercase !important;
  padding: 6px 11px !important; border-radius: 8px !important; border: 1.5px solid #C5DBF5 !important;
  margin-left: auto !important; align-self: flex-start !important; flex-shrink: 0 !important; white-space: nowrap !important;
}
.form-wrap .step.active .step-pill { display: block !important; }
.form-wrap .step.active .step-num { display: none !important; }

/* ── more breathing room around the blue-bordered active step ── */
.form-wrap .step-body { padding: 20px 22px 22px !important; }

.form-wrap .sarr { display: none !important; text-align: center !important; padding: 2px 0 !important; font-size: 26px !important; }
.form-wrap .sarr.show { display: block !important; }
@keyframes arrowBounce {
  0%,100% { transform: translateY(0);   opacity: 1;   }
  50%      { transform: translateY(9px); opacity: .5; }
}
.form-wrap .sarr.show span { display: inline-block !important; }
.form-wrap .sarr.show.bounce span { animation: arrowBounce 1.1s ease-in-out infinite !important; }
.form-wrap .sarr.show.settled span { opacity: .25 !important; }

.form-wrap .field-wrap { display: flex !important; align-items: stretch !important; gap: 10px !important; position: relative !important; }

/* ── fake cursor position matches new input padding ── */
.form-wrap .fake-cursor {
  position: absolute !important; left: 22px !important; top: 50% !important;
  transform: translateY(-50%) !important; width: 2px !important; height: 22px !important;
  background: #444 !important; border-radius: 1px !important; pointer-events: none !important;
  animation: cursorBlink 1s step-end infinite !important;
}
@keyframes cursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.form-wrap .field-wrap.fc-hide .fake-cursor { display: none !important; }

/* ── solid blue border on inputs (was borderless), more inner padding, taller ── */
.form-wrap .field-wrap input {
  flex: 1 !important; height: 56px !important; padding: 0 20px !important;
  border: 2px solid var(--go-blue) !important; border-radius: 13px !important;
  font-size: 15.5px !important; background: #E8ECF0 !important; color: #111 !important;
  outline: none !important; box-shadow: none !important; transition: box-shadow .2s, border-color .2s !important;
}
.form-wrap .field-wrap input:focus { border-color: var(--go-blue-dk) !important; box-shadow: 0 0 0 4px rgba(26,115,232,.16) !important; }

.form-wrap .arrow-btn {
  width: 54px !important; height: 56px !important; border-radius: 13px !important;
  border: none !important; background: var(--go-blue) !important; color: #fff !important;
  font-size: 20px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; transition: background .18s, transform .15s !important;
  touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 4px 14px rgba(26,115,232,.28) !important;
}
.form-wrap .arrow-btn:hover:not(:disabled) { background: var(--go-blue-dk) !important; transform: translateY(-1px) !important; }
.form-wrap .arrow-btn:disabled { background: #C8C8C8 !important; box-shadow: none !important; cursor: not-allowed !important; pointer-events: none !important; }
.form-wrap .field-hint { font-size: 12px !important; color: #666 !important; margin-top: 8px !important; }
.form-wrap .field-err { font-size: 12px !important; color: #C0392B !important; margin-top: 6px !important; display: none !important; font-weight: 600 !important; }
.form-wrap .field-err.show { display: block !important; }

.form-wrap .obs-row { display: flex !important; gap: 10px !important; }
.form-wrap .obs-opt {
  flex: 1 !important; padding: 13px 0 !important; text-align: center !important;
  border: 1.5px solid var(--border) !important; border-radius: 10px !important;
  font-size: 15px !important; font-weight: 600 !important; color: #555 !important;
  cursor: pointer !important; background: #fff !important;
  transition: border-color .18s, background .18s, color .18s !important;
  touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;
}
.form-wrap .obs-opt:hover { border-color: var(--go-blue) !important; color: var(--go-blue-dk) !important; }
.form-wrap .obs-opt.picked { border-color: var(--go-blue) !important; background: #E8F0FD !important; color: var(--go-blue-dk) !important; }
.form-wrap .removal-sub { margin-top: 12px !important; display: none !important; }
.form-wrap .removal-sub.show { display: block !important; }
.form-wrap .removal-qlabel { font-size: 13px !important; color: #555 !important; margin-bottom: 7px !important; font-weight: 500 !important; }

.form-wrap .size-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

/* ── "Choose one of these four heights" prompt + green enclosure
   (UPDATED: bumped font-size 14px -> 18px, and padding out slightly to match) ── */
.form-wrap .choose-prompt {
  text-align: center !important; font-size: 18px !important; font-weight: 800 !important; color: var(--green-dark) !important;
  background: #FEF6DD !important; border: 1.5px solid #EBB81E !important; border-radius: 10px !important;
  padding: 11px 14px !important; margin-bottom: 12px !important; letter-spacing: .2px !important;
}
.form-wrap .choose-enclosure {
  border: 2.5px solid var(--green) !important; border-radius: 16px !important;
  padding: 12px !important; background: #F4F8EF !important;
  box-shadow: 0 0 0 4px rgba(44,90,24,.08) !important;
}
.form-wrap .size-cards.collapsed.choose-enclosure { border-color: transparent !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }

.form-wrap .size-card {
  display: flex !important; flex-direction: column !important;
  border: 2px solid var(--border) !important; border-radius: 14px !important;
  cursor: pointer !important; background: #fff !important;
  overflow: hidden !important; position: relative !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
  user-select: none !important; touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
.form-wrap .size-card:hover { border-color: #94BE78 !important; box-shadow: 0 2px 8px rgba(44,90,24,.10) !important; }
.form-wrap .size-card.selected { border-color: var(--green) !important; background: #EFF6EA !important; box-shadow: 0 2px 12px rgba(44,90,24,.15) !important; }

/* ── ICON CARDS (replaces photo cards) ── */
.form-wrap .card-icon-wrap {
  width: 100% !important;
  height: 140px !important;
  background: #F2F6EC !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 14px 10px 0 !important;
}
.form-wrap .card-icon-wrap svg { width: 100% !important; max-width: 150px !important; height: auto !important; display: block !important; }

/* ── best-seller card keeps overflow:hidden so the ribbon's corners
   clip flush with the card edges, matching the reference screenshot ── */
.form-wrap .size-card.best-seller {
  overflow: hidden !important;
  border-color: var(--green) !important; box-shadow: 0 3px 16px rgba(44,90,24,.18) !important;
}

/* ── best-seller badge — classic top-left diagonal corner ribbon,
   clipped by the card corner (matches provided screenshot) ── */
.form-wrap .size-card .ribbon {
  position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important;
  width: 160px !important; height: 160px !important; overflow: hidden !important;
  z-index: 5 !important; pointer-events: none !important;
}
.form-wrap .size-card .ribbon span {
  position: absolute !important; top: 26px !important; left: -42px !important;
  transform: rotate(-45deg) !important;
  display: block !important;
  width: 170px !important;
  background: linear-gradient(180deg, #E8720C, #D6600A) !important;
  color: #fff !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .6px !important;
  text-transform: uppercase !important; white-space: nowrap !important;
  padding: 6px 0 !important; text-align: center !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

.form-wrap .card-price-real   { color: var(--green-dark) !important; font-weight: 900 !important; }
.form-wrap .card-price-prompt { color: var(--go-blue) !important; font-weight: 700 !important; font-size: 12px !important; }

.form-wrap .card-info { padding: 10px 10px 10px !important; flex: 1 !important; display: flex !important; flex-direction: column !important; }
.form-wrap .card-ht { font-size: 17px !important; font-weight: 900 !important; color: var(--green-dark) !important; line-height: 1.15 !important; letter-spacing: -.2px !important; }
.form-wrap .card-price { font-size: 12px !important; font-weight: 600 !important; color: #999 !important; margin-top: 10px !important; }
.form-wrap .card-note { display: block !important; font-size: 11px !important; color: #777 !important; margin-top: 4px !important; }
.form-wrap .card-select-btn {
  display: block !important; width: 80% !important; margin: auto auto 10px !important; padding-top: 12px !important;
  background: none !important; border: none !important; cursor: pointer !important;
  touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;
}
.form-wrap .card-select-btn span {
  display: block !important; background: #EAE7DE !important; color: #5A6650 !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .3px !important;
  padding: 7px 0 !important; border-radius: 8px !important; text-align: center !important;
  transition: background .15s, color .15s !important;
}
.form-wrap .card-select-btn:hover span { background: #DCD8CC !important; }
.form-wrap .size-card.selected .card-select-btn span { background: var(--green) !important; color: #fff !important; }

.form-wrap .card-check { display: none !important; }

.form-wrap .size-continue-btn {
  display: none; width: auto !important; min-width: 180px !important; margin: 16px auto 0 !important;
  padding: 14px 44px !important; background: var(--go-blue) !important; color: #fff !important;
  font-size: 15px !important; font-weight: 800 !important; border: none !important; border-radius: 12px !important;
  cursor: pointer !important; letter-spacing: .2px !important; transition: background .18s !important;
  touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;
  box-shadow: 0 3px 12px rgba(26,115,232,.35) !important; font-family: inherit !important;
}
.form-wrap .size-continue-btn:hover { background: var(--go-blue-dk) !important; }
@keyframes btnPulse {
  0%,100% { box-shadow: 0 3px 12px rgba(26,115,232,.35); transform: scale(1); }
  50%      { box-shadow: 0 6px 24px rgba(26,115,232,.65); transform: scale(1.055); }
}
.form-wrap .size-continue-btn.pulsing { animation: btnPulse 1s ease-in-out 3 !important; }

.form-wrap .submit-wrap { padding: 4px 18px 20px !important; text-align: center !important; }
.form-wrap .submit-btn {
  width: 100% !important; padding: 16px 0 !important; background: var(--go-blue) !important; color: #fff !important;
  font-size: 16px !important; font-weight: 700 !important; border: none !important; border-radius: 12px !important;
  cursor: pointer !important; transition: background .18s !important; letter-spacing: .2px !important;
}
.form-wrap .submit-btn:hover { background: var(--go-blue-dk) !important; }
.form-wrap .submit-sub { font-size: 12px !important; color: #555 !important; margin-top: 8px !important; }

@media (min-width: 768px) {
  .form-wrap { max-width: 820px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .form-wrap .size-cards { gap: 16px !important; }
  .form-wrap .card-icon-wrap { height: 170px !important; }
  .form-wrap .card-ht { font-size: 17px !important; }
  .form-wrap .card-price { font-size: 13px !important; }
  .form-wrap .card-select-btn { width: 60% !important; }
}

/* -- MOBILE FIXES -- */
@media (max-width: 480px) {
  .form-wrap { padding-left: 10px !important; padding-right: 10px !important; }
  .form-wrap .steps { padding: 12px 10px !important; }
  .form-wrap .step-body { padding: 16px 12px 14px !important; }

  .form-wrap .size-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-wrap .card-icon-wrap { height: 150px !important; }
  .form-wrap .card-info { padding: 12px 14px 14px !important; }
  .form-wrap .card-ht { font-size: 18px !important; }
  .form-wrap .card-price { font-size: 13px !important; margin-top: 8px !important; }
  .form-wrap .card-select-btn { width: 100% !important; padding-top: 10px !important; }
}

.form-wrap .card-select-btn, .form-wrap .card-select-btn:visited, .form-wrap .card-select-btn:hover, .form-wrap .card-select-btn:focus, .form-wrap .card-select-btn:active {
  background: none !important;
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.form-wrap .card-select-btn span, .form-wrap .card-select-btn:hover span, .form-wrap .card-select-btn:focus span, .form-wrap .card-select-btn:active span {
  display: block !important;
  background: #EAE7DE !important;
  color: #5A6650 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  padding: 9px 0 !important;
  border-radius: 8px !important;
  text-align: center !important;
  transition: background .15s, color .15s !important;
  border: none !important;
  box-shadow: none !important;
}
.form-wrap .card-select-btn:hover span, .form-wrap .card-select-btn:focus span { background: #DCD8CC !important; }
.form-wrap .size-card.selected .card-select-btn span { background: var(--green) !important; color: #fff !important; }

.form-wrap .form-step-header {
  background: linear-gradient(180deg, #2E6B14, #24560F) !important;
  padding: 16px 20px 18px !important;
  text-align: center !important;
  border-radius: 14px 14px 0 0 !important;
}
.form-wrap .fsh-pill {
  display: inline-block !important;
  background: #EBB81E !important; color: #1A3C0A !important;
  font-size: 12px !important; font-weight: 800 !important; letter-spacing: .8px !important; text-transform: uppercase !important;
  padding: 5px 15px !important; border-radius: 20px !important; margin-bottom: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}
.form-wrap .fsh-title {
  font-size: clamp(20px,5vw,25px) !important; font-weight: 900 !important; color: #fff !important;
  letter-spacing: -.3px !important; margin: 0 !important; line-height: 1.15 !important;
}

.form-wrap .size-cards.collapsed { grid-template-columns: 1fr !important; }
.form-wrap .size-cards.collapsed .size-card:not(.selected) { display: none !important; }
.form-wrap .size-cards.collapsed .size-card.selected { max-width: 340px !important; margin: 0 auto !important; width: 100% !important; }
.form-wrap .size-card.selected::after {
  content: "\2713 Selected" !important;
  position: absolute !important; top: 8px !important; left: 8px !important; z-index: 3 !important;
  background: var(--green) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .3px !important;
  padding: 4px 10px !important; border-radius: 20px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.2) !important;
}
.form-wrap .change-height-btn {
  display: none; width: auto !important; margin: 14px auto 0 !important;
  padding: 9px 18px 9px 14px !important; background: #fff !important; color: var(--green-dark) !important;
  font-size: 13px !important; font-weight: 700 !important; border: 1.5px solid #C7BFA8 !important;
  border-radius: 22px !important; cursor: pointer !important; font-family: inherit !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important; transition: border-color .15s, background .15s !important;
}
.form-wrap .change-height-btn:hover { border-color: var(--green) !important; background: #F4F8F0 !important; }