/* ==============  Variables (from shortcode inline style)  ============== */
/* The shortcode sets:
   --wffgg-bg
   --wffgg-card
   --wffgg-text
   --wffgg-accent
   --wffgg-accentText
   --wffgg-shadow
   --wffgg-radius
*/

/* ==============  Base wrapper  ============== */
.wffgg {
  color: var(--wffgg-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wffgg .wffgg-inner {
  background: transparent;
  padding: 8px 12px 12px;
}


/* Smooth step transitions */
.wffgg .wffgg-stage {
  opacity: 1;
  transition: opacity .30s ease;
}
.wffgg .wffgg-stage.wffgg-fade-out {
  opacity: 0;
}


/* ==============  Progress  ============== */
.wffgg .wffgg-progress {
  height: 10px;
  border-radius: 9999px;
  background: #e9eef3;
  box-shadow: inset 0 0 0 1px rgba(16,24,40,.04);
  overflow: hidden;
  margin: 8px 8px 18px;
}
.wffgg .wffgg-bar {
  height: 100%;
  background: var(--wffgg-accent);
  border-radius: inherit;
  width: 0%;
  transition: width .25s ease;
}

/* ==============  Stage grid  ============== */
.wffgg .wffgg-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Desktop layout: larger and 2-column */
@media (min-width: 992px) {
  .wffgg .wffgg-stage {
    grid-template-columns: 42% 58%;
    align-items: stretch;
    gap: 28px;
    min-height: 560px; /* Taller form like your mock */
  }
}

/* ==============  Left image panel  ============== */
.wffgg .wffgg-image {
  background: #f3f5f7;
  border-radius: var(--wffgg-radius);
  box-shadow: var(--wffgg-shadow);
  overflow: hidden;
  min-height: 260px;
}

@media (min-width: 992px) {
  .wffgg .wffgg-image {
    min-height: 560px;
  }
}

.wffgg .wffgg-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill like the mock */
}

/* ==============  Right card (question/form)  ============== */
.wffgg .wffgg-card {
  background: var(--wffgg-card);
  border-radius: var(--wffgg-radius);
  box-shadow: var(--wffgg-shadow);
  padding: 28px;
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

@media (min-width: 992px) {
  .wffgg .wffgg-card {
    min-height: 560px;
  }
}

.wffgg .wffgg-q {
  font-weight: 800;
  line-height: 1.15;
  margin: 2px 0 18px;
  letter-spacing: .2px;
}

@media (min-width: 768px) {
  .wffgg .wffgg-q {
    font-size: 20px;
  }
}

/* ==============  Options grid  ============== */
.wffgg .wffgg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 992px) {
  .wffgg .wffgg-grid {
    grid-template-columns: 1fr 1fr; /* 2×2 on desktop like the mock */
    gap: 22px;
  }
}


/* Left photo pane becomes a background image */
.wffgg .wffgg-image{
  background-color: #f6f8fb;         /* fallback */
  background-size: cover;            /* cover the box */
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: var(--wffgg-radius);
  box-shadow: var(--wffgg-shadow);
  min-height: 360px;                 /* tweak as you like */
  width: 100%;
  overflow: hidden;
}

/* (optional) if any old <img> slips in, hide it */
.wffgg .wffgg-image > img{ display:none !important; }




/* Option card: image ABOVE text */
.wffgg .wffgg-opt {
  display: flex;
  flex-direction: column;         /* image top, text below */
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  border: 1px solid #e5e8ee;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(16,24,40,.06);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  overflow: hidden;
}

/* top image area */
/* if your .wffgg-opt already has a border color, expose it (one-time) */
.wffgg .wffgg-opt{
  --opt-border: #e5e7eb; /* set this to whatever the card border uses */
  border: 1px solid var(--opt-border);
}

/* make the image strip have no bg and a 1px bottom border matching the card */
.wffgg .wffgg-opt .img{
  width: 100%;
  height: 120px;
  display: grid;
  place-items: center;
  background: transparent;           /* no background */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom: 1px solid var(--opt-border);
}


@media (min-width: 1200px) {
  .wffgg .wffgg-opt .img { height: 130px; }
}

.wffgg .wffgg-opt .img img {
  max-width: 160px;
  max-height: 100px;
  object-fit: contain;
  display: block;
}

/* label under image */
.wffgg .wffgg-opt > div:last-child {
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding: 14px 16px 18px;
  line-height: 1.25;
}

/* hover/active */
.wffgg .wffgg-opt:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(16,24,40,.10);
  border-color: rgba(34,197,94,.35);
}

.wffgg .wffgg-opt.active {
  border-color: var(--wffgg-accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15), 0 14px 28px rgba(16,24,40,.10);
}

.wffgg .wffgg-opt.active .img {
  background: rgba(34,197,94,.08);
}

/* ==============  Actions (Back / Next)  ============== */
.wffgg .wffgg-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 22px;
}

.wffgg .wffgg-btn {
  appearance: none;
  border: 1px solid #d7dde5;
  background: #ffffff;
  color: #111827;
  border-radius: 9999px;
  padding: 12px 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}

.wffgg .wffgg-btn:hover { background: #f6f8fb; }
.wffgg .wffgg-btn:active { transform: translateY(1px); }

.wffgg .wffgg-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.wffgg .wffgg-btn:not(.wffgg-back) {
  background: var(--wffgg-accent);
  color: var(--wffgg-accentText);
  border-color: var(--wffgg-accent);
  box-shadow: 0 10px 24px rgba(34,197,94,.35);
}
.wffgg .wffgg-btn:not(.wffgg-back):hover {
  filter: brightness(0.98);
}

/* Back button (secondary) */
.wffgg .wffgg-back {
  background: #f8fafc;
  color: #334155;
}

/* ==============  Footer note  ============== */
.wffgg .wffgg-meta {
  margin-top: 22px;
  text-align: center;
  font-size: 12.5px;
  color: #6b7280;
}

/* ==============  Gravity Forms area in final step  ============== */
.wffgg #wffgg_gf_mount {
  margin-top: 6px;
}
.wffgg #wffgg_gf_mount .gform_wrapper {
  --gform-outer-padding: 0;
}