/* ==============  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: 200px;                 /* 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;
  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;
}




/* Force 2 options per row on mobile */
@media (max-width: 767px) {
  .wffgg .wffgg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px; /* slightly tighter spacing on small screens */
  }
  /* (optional) scale images a touch so they don’t feel cramped */
  .wffgg .wffgg-opt .img { height: 100px; }
  .wffgg .wffgg-opt .img img { max-width: 120px; max-height: 80px; }
}



/* Smooth transition hook */
.wffgg .wffgg-stage { transition: opacity .16s ease; }
.wffgg .wffgg-stage.wffgg-fade-out { opacity: 0; }

/* ---------- Time grid ---------- */
.wffgg .wffgg-time { margin-top: 8px; }
.wffgg .wffgg-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 680px) {
  .wffgg .wffgg-time-grid { grid-template-columns: repeat(2, 1fr); }
}

.wffgg .wffgg-time-slot {
  appearance: none;
  border: 2px solid rgba(16,24,40,.15);
  background: var(--wffgg-card, #fff);
  color: var(--wffgg-text, #101828);
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.wffgg .wffgg-time-slot:hover { transform: translateY(-1px); }
.wffgg .wffgg-time-slot.active,
.wffgg .wffgg-time-slot:focus {
  outline: none;
  border-color: var(--wffgg-accent, #22c55e);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wffgg-accent, #22c55e) 25%, transparent);
}

/* ---------- Calendar ---------- */
.wffgg .wffgg-cal { margin-top: 8px; }
.wffgg .wffgg-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.wffgg .wffgg-cal-title {
  font-weight: 700; font-size: 18px; color: var(--wffgg-text, #101828);
}
.wffgg .wffgg-cal-nav {
  border: 1px solid rgba(16,24,40,.15);
  background: var(--wffgg-card, #fff);
  border-radius: 10px;
  width: 36px; height: 36px;
  line-height: 34px; text-align: center;
  cursor: pointer;
}
.wffgg .wffgg-cal-nav:disabled { opacity: .4; cursor: default; }

.wffgg .wffgg-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wffgg .wffgg-cal-grid .dow {
  text-align: center; font-size: 12px; opacity: .7; padding: 6px 0;
}
.wffgg .wffgg-cal-grid .day {
  appearance: none;
  border: 1px solid rgba(16,24,40,.12);
  background: var(--wffgg-card, #fff);
  color: var(--wffgg-text, #101828);
  border-radius: 10px;
  padding: 12px 0;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .08s ease, transform .08s ease, box-shadow .08s ease;
}
.wffgg .wffgg-cal-grid .day:hover { transform: translateY(-1px); }
.wffgg .wffgg-cal-grid .day.disabled {
  opacity: .35; cursor: default; transform: none;
}
.wffgg .wffgg-cal-grid .day.active,
.wffgg .wffgg-cal-grid .day:focus {
  outline: none;
  border-color: var(--wffgg-accent, #22c55e);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--wffgg-accent, #22c55e) 25%, transparent);
}
.wffgg .wffgg-cal-grid .blank { visibility: hidden; }

/* ---------- Option image area tweak (no bg, divider) ---------- */
.wffgg .wffgg-opt .img {
  width: 100%; height: 120px; display: grid; place-items: center;
  background: transparent;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  border-bottom: 1px solid rgba(16,24,40,.08);
}