/* ============================================================================
   Kenosha Italian Fest — 2026 Parade Sign & Merch form reskin
   Translates the Claude Design "Parade Sign and Merchandise Order" design system
   onto Gravity Form #8. Scoped under .kif-order-form so nothing else is affected.
   ========================================================================== */

/* ---- Design tokens (from the KIF design system) ---- */
.kif-order-form{
  --kif-white:#ffffff; --kif-red:#b91f25; --kif-red-deep:#9c2525;
  --kif-green:#098d45; --kif-green-deep:#03662f; --kif-black:#000;
  --kif-paper-100:#fdf8f0; --kif-paper-200:#faf1e4; --kif-paper-300:#f7e8d1;
  --kif-sand:#f9dfb8; --kif-gold:#c2a031;
  --kif-ink:#211910; --kif-ink-700:#333; --kif-ink-500:#747474;
  --kif-gray-400:#a9a9a9; --kif-gray-300:#d3d3d3; --kif-gray-200:#e7e6e6; --kif-gray-100:#ededed;

  --font-display:"Born","Oswald",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --font-body:"Proxima Nova","Mulish",system-ui,sans-serif;
  --font-script:"Yellowtail",cursive;

  --fs-100:13px; --fs-200:14px; --fs-300:16px; --fs-400:18px; --fs-500:21px;
  --fs-600:24px; --fs-700:30px; --fs-800:38px; --fs-900:48px;
  --fw-regular:400; --fw-bold:700;
  --lh-tight:1.02; --lh-heading:1.25; --lh-normal:1.5; --lh-body:1.69;
  --ls-ribbon:.02em; --ls-caps:.06em; --ls-eyebrow:.14em;

  --surface-card:var(--kif-white); --surface-page:var(--kif-paper-200);
  --text-heading:var(--kif-ink); --text-body:var(--kif-ink-700); --text-muted:var(--kif-ink-500);
  --border-hairline:1px solid var(--kif-gray-200); --border-field:1px solid var(--kif-gray-300);
  --shadow-card:0 2px 10px rgba(33,25,16,.10);
  --focus-ring:0 0 0 3px var(--kif-gold);
  --transition-color:color .2s linear,background-color .2s linear,border-color .2s linear;
}

@font-face{
  font-family:"Born";
  src:local("Impact");            /* brand woff2 can be dropped into kif-assets later */
  font-weight:400;font-style:normal;font-display:swap;
}

/* ============================ Page shell ============================ */
.kif-order-form.kif-paper{
  background-color:var(--kif-paper-200);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(194,160,49,.05), transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(185,31,37,.04), transparent 55%);
  padding:48px 15px 60px;
}
.kif-order-form .kif-order-inner{max-width:920px;margin:0 auto;font-family:var(--font-body);color:var(--text-body)}

/* ---- Header ---- */
.kif-order-form .kif-head{text-align:center;margin-bottom:34px}
.kif-order-form .kif-head img{width:140px;height:auto;margin:0 auto 18px;display:block}
.kif-order-form .kif-eyebrow{
  font-family:var(--font-body);font-size:var(--fs-200);font-weight:700;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--kif-green);margin:0 0 8px}
.kif-order-form .kif-script{
  font-family:var(--font-script);font-size:48px;line-height:1;color:var(--kif-red);
  display:block;margin-bottom:2px}
.kif-order-form .kif-title{
  margin:0 0 14px;font-family:var(--font-display);font-weight:400;font-size:var(--fs-900);
  line-height:var(--lh-tight);letter-spacing:var(--ls-ribbon);text-transform:uppercase;color:var(--text-heading)}
.kif-order-form .kif-intro{
  max-width:640px;margin:0 auto;font-size:var(--fs-400);line-height:var(--lh-body);color:var(--text-body)}

/* ---- Parade day info strip ---- */
.kif-order-form .kif-infostrip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:22px auto 0;max-width:760px}
.kif-order-form .kif-infostrip .kif-info{display:flex;align-items:center;gap:9px;font-size:var(--fs-200);color:var(--text-body)}
.kif-order-form .kif-infostrip .kif-info i{color:var(--kif-green)}
.kif-order-form .kif-infostrip .kif-info strong{color:var(--text-heading)}

/* ---- Ribbon ---- */
.kif-order-form .kif-ribbon{
  position:relative;display:inline-block;background:var(--kif-red);color:#fff;
  font-family:var(--font-display);font-size:var(--fs-500);letter-spacing:var(--ls-ribbon);
  text-transform:uppercase;padding:9px 26px;margin:0 0 -1px 8px;
  box-shadow:0 4px 10px rgba(33,25,16,.18)}
.kif-order-form .kif-ribbon::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;background:var(--kif-red-deep);
  clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,12px 100%)}

/* ============================ The card (GF wrapper) ============================ */
.kif-order-form .gform_wrapper{
  background:var(--surface-card);box-shadow:var(--shadow-card);border-radius:0;
  overflow:hidden;margin:0}
.kif-order-form .gform_wrapper form{margin:0}
.kif-order-form .gform_heading{display:none}   /* title/desc handled by our header */
.kif-order-form .gform_body{padding:28px 40px 36px}

/* ---- Step indicator (pagination type: steps) ---- */
.kif-order-form .gf_page_steps{
  display:flex;justify-content:space-between;gap:10px;
  padding:26px 40px 22px;border-bottom:var(--border-hairline);margin:0}
.kif-order-form .gf_step{
  display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0;
  height:auto !important;margin:0 !important;
  font-family:var(--font-body);opacity:1;color:var(--text-muted);font-weight:400}
.kif-order-form .gf_page_steps .gf_step .gf_step_number{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:30px !important;height:30px !important;flex:0 0 30px !important;padding:0 !important;margin:0 !important;
  border-radius:50% !important;background:var(--surface-card);
  border:1px solid var(--kif-gray-300);color:var(--kif-ink-500);
  font-family:var(--font-body) !important;font-size:13px !important;font-weight:700 !important;
  line-height:1 !important;box-sizing:border-box !important}
.kif-order-form .gf_step_number::before{display:none}
.kif-order-form .gf_step_label{
  font-size:12px;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);
  white-space:nowrap;font-weight:400;text-align:center}
.kif-order-form .gf_step_active .gf_step_number{background:var(--kif-red);border-color:var(--kif-red);color:#fff}
.kif-order-form .gf_step_active .gf_step_label{color:var(--text-heading);font-weight:700}
.kif-order-form .gf_step_completed .gf_step_number{background:var(--kif-green);border-color:var(--kif-green);color:#fff}
.kif-order-form .gf_step_completed .gf_step_number::after{display:none}

/* ---- Headings within a step ---- */
.kif-order-form .gform_body h2,
.kif-order-form .gsection_title{
  margin:0 0 8px;font-family:var(--font-body);font-weight:700;font-size:var(--fs-700);color:var(--text-heading)}
.kif-order-form .gsection{border-bottom:0;padding:0;margin:0 0 8px}

/* ---- Fields ---- */
.kif-order-form .gfield{margin-top:18px}
.kif-order-form .gfield_label{
  font-family:var(--font-body);font-size:var(--fs-100);font-weight:700;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-heading);margin-bottom:6px}
.kif-order-form .gfield_required{color:var(--kif-red)}
.kif-order-form input[type=text],
.kif-order-form input[type=email],
.kif-order-form input[type=tel],
.kif-order-form input[type=number],
.kif-order-form input[type=password],
.kif-order-form select,
.kif-order-form textarea{
  width:100%;font-family:var(--font-body);font-size:var(--fs-300);color:var(--text-heading);
  background:var(--kif-white);border:var(--border-field);border-radius:0;
  padding:10px 14px;line-height:1.4;box-shadow:none;transition:var(--transition-color)}
/* Beat Avada's compiled .gform_wrapper .gfield input/select rules (green border, 6px radius) */
.kif-order-form .gform_wrapper .gfield input[type=text],
.kif-order-form .gform_wrapper .gfield input[type=email],
.kif-order-form .gform_wrapper .gfield input[type=tel],
.kif-order-form .gform_wrapper .gfield input[type=number],
.kif-order-form .gform_wrapper .gfield select,
.kif-order-form .gform_wrapper .gfield textarea{
  border:var(--border-field);border-radius:0;background:var(--kif-white);
  color:var(--text-heading);font-family:var(--font-body)}
.kif-order-form input:focus,.kif-order-form select:focus,.kif-order-form textarea:focus,
.kif-order-form .gform_wrapper .gfield input:focus,
.kif-order-form .gform_wrapper .gfield select:focus,
.kif-order-form .gform_wrapper .gfield textarea:focus{
  outline:none;border-color:var(--kif-red);box-shadow:var(--focus-ring)}
.kif-order-form .gfield_description,.kif-order-form .gform_fileupload_rules{
  font-size:var(--fs-100);color:var(--text-muted)}
.kif-order-form .instruction{font-size:var(--fs-100);color:var(--text-muted)}
.kif-order-form .validation_message,.kif-order-form .gfield_validation_message{
  font-size:var(--fs-100);color:var(--kif-red);background:none;border:0;padding:2px 0 0}
.kif-order-form .gfield_error input,.kif-order-form .gfield_error select{border-color:var(--kif-red)}
.kif-order-form .gfield_error .gfield_label{color:var(--text-heading)}

/* ---- Path-choice radios (intent + sign mode) as cards ---- */
.kif-order-form .kif-intent .gfield_label{display:none}
.kif-order-form .kif-intent .gfield_radio,
.kif-order-form .kif-cards .gfield_radio{display:flex;flex-direction:column;gap:14px}
.kif-order-form .kif-intent .gchoice,
.kif-order-form .kif-cards .gchoice{
  position:relative;border:var(--border-field);border-radius:0;background:var(--surface-card);
  transition:var(--transition-color);margin:0}
.kif-order-form .kif-intent .gchoice:hover,
.kif-order-form .kif-cards .gchoice:hover{border-color:var(--kif-red)}
.kif-order-form .kif-intent .gchoice label,
.kif-order-form .kif-cards .gchoice label{
  display:block;padding:18px 20px 18px 50px;cursor:pointer;
  font-size:var(--fs-400);font-weight:700;color:var(--text-heading);line-height:1.3}
.kif-order-form .kif-intent .gchoice input[type=radio],
.kif-order-form .kif-cards .gchoice input[type=radio]{
  position:absolute;left:20px;top:20px;width:18px;height:18px;accent-color:var(--kif-red);margin:0}
.kif-order-form .kif-cards .gchoice:has(input:checked){border-color:var(--kif-red);background:var(--kif-paper-100)}
.kif-order-form .kif-intent .gchoice:has(input:checked){border-color:var(--kif-red);background:var(--kif-paper-100)}

/* ---- Hero snapshot above the form ---- */
.kif-order-form .kif-hero{
  margin:30px auto 0;max-width:400px;background:#fff;padding:12px 12px 8px;
  box-shadow:0 8px 24px rgba(33,25,16,.16);transform:rotate(-1.5deg)}
.kif-order-form .kif-hero img{display:block;width:100%;height:auto}
.kif-order-form .kif-hero figcaption{
  font-family:var(--font-script);font-size:24px;color:var(--kif-red);
  text-align:center;padding:8px 0 4px;line-height:1}

/* ---- Montemurro figure: right rail beside the sign-page fields ---- */
.kif-order-form .kif-howto-figure{margin:18px auto 0;width:170px;text-align:center}
.kif-order-form .kif-howto-figure img{display:block;width:100%;height:auto}
.kif-order-form .kif-howto-figure figcaption{
  font-family:var(--font-script);font-size:21px;color:var(--kif-green);margin-top:2px;line-height:1.1}
@media (min-width:768px){
  .kif-order-form #gform_page_8_2 .gform_page_fields{position:relative;padding-right:250px;min-height:500px}
  .kif-order-form .kif-howto-figure{position:absolute;top:6px;right:8px;width:200px;margin:0}
}

/* ---- "How this works" intro on the sign page ---- */
.kif-order-form .kif-sign-howto{margin:0 0 4px}
.kif-order-form .kif-sign-howto h3{
  margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:var(--fs-700);
  letter-spacing:var(--ls-ribbon);text-transform:uppercase;color:var(--text-heading)}
.kif-order-form .kif-sign-howto p{margin:0;font-size:var(--fs-300);line-height:var(--lh-body);color:var(--text-body)}
.kif-order-form .kif-sign-howto strong{color:var(--kif-red)}

/* ---- Product / merch styling ---- */
.kif-order-form .ginput_container_product_price,
.kif-order-form .ginput_product_price{font-weight:700;color:var(--text-heading)}
.kif-order-form .gfield.kif-sign-fee .gfield_radio{display:flex;flex-direction:column;gap:10px}
.kif-order-form .gfield.kif-sign-fee .gchoice{border:var(--border-hairline);padding:12px 14px}
/* The fee radio is a hidden price carrier (visibility=hidden renders
   .gfield_hidden_product, which GF's pricing exempts from its hidden check). */
.kif-order-form .gfield.kif-sign-fee{display:none !important}
/* Reassembly path: one physical sign — hide the quantity picker (JS toggles
   the mode class and pins the value to 1; the field stays GF-visible so the
   value is still submitted and priced). */
.kif-order-form.kif-mode-previous #field_8_17{display:none !important}
.kif-order-form .ginput_total,.kif-order-form .ginput_container_total .ginput_total{
  font-family:var(--font-display);font-size:var(--fs-800);letter-spacing:var(--ls-ribbon);color:var(--text-heading)}

/* ---- Merch line items with photo (description holds the .kif-zoom thumb) ---- */
.kif-order-form .gfield.kif-merch-item{
  position:relative;padding-left:160px;min-height:150px;
  border-top:var(--border-hairline);padding-top:22px;margin-top:26px}
.kif-order-form .gfield.kif-merch-item .gfield_description{
  position:absolute;left:0;top:22px;width:136px;padding:0;margin:0}
.kif-order-form .kif-zoom{display:block;position:relative;cursor:zoom-in}
.kif-order-form .kif-zoom img{max-width:100%;height:auto;display:block;transition:transform .2s ease}
.kif-order-form .kif-zoom:hover img{transform:scale(1.04)}
.kif-order-form .kif-zoom::after{
  content:"\2295  Enlarge";display:block;text-align:center;margin-top:4px;
  font-size:11px;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.kif-order-form .gfield.kif-merch-opt{margin-left:160px !important;margin-top:14px}

/* ---- Lightbox ---- */
.kif-lightbox-overlay{
  position:fixed;inset:0;z-index:100000;background:rgba(33,25,16,.82);
  display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.kif-lightbox-overlay figure{margin:0;max-width:min(640px,92vw);text-align:center}
.kif-lightbox-overlay img{max-width:100%;max-height:82vh;height:auto;display:block;margin:0 auto}
.kif-lightbox-overlay figcaption{
  margin-top:12px;color:#fff;font-family:"Mulish",system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.kif-lightbox-overlay .kif-lightbox-close{
  position:absolute;top:14px;right:18px;background:none;border:0;color:#fff;
  font-size:42px;line-height:1;cursor:pointer;padding:6px}

/* ---- Sticky running total ---- */
.kif-order-form .kif-running-total{
  position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:12px 40px;background:var(--kif-paper-300);border-top:1px solid var(--kif-sand)}
.kif-order-form .kif-running-total .kif-rt-label{
  font-size:var(--fs-100);font-weight:700;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-muted)}
.kif-order-form .kif-running-total .kif-rt-amount{
  font-family:var(--font-display);font-size:var(--fs-600);letter-spacing:var(--ls-ribbon);color:var(--kif-red)}

/* ---- Notices (HTML fields) ---- */
.kif-order-form .kif-nosign-notice{
  background:#fef5e7;border-left:4px solid #e67e22;padding:12px 14px;margin:4px 0 0;font-size:var(--fs-200)}
.kif-order-form .kif-merch-notice{
  background:var(--kif-paper-100);border-left:4px solid var(--kif-red);padding:12px 14px;margin:0 0 6px;font-size:var(--fs-200)}
.kif-order-form .kif-pay-note{font-size:var(--fs-100);color:var(--text-muted);font-style:italic}

/* ---- Review-page order summary ---- */
.kif-order-form .kif-order-summary:not(:empty){
  border:var(--border-hairline);background:var(--kif-paper-100);
  padding:18px 22px;margin:0 0 16px}
.kif-order-form .kif-sum-title{
  margin:0 0 10px;font-family:var(--font-display);font-weight:400;font-size:var(--fs-500);
  letter-spacing:var(--ls-ribbon);text-transform:uppercase;color:var(--text-heading)}
.kif-order-form .kif-sum-row{
  display:flex;align-items:baseline;gap:14px;padding:8px 0;border-top:var(--border-hairline)}
.kif-order-form .kif-sum-main{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.kif-order-form .kif-sum-name{font-weight:700;color:var(--text-heading)}
.kif-order-form .kif-sum-sub{font-size:var(--fs-100);color:var(--text-muted)}
.kif-order-form .kif-sum-qty{font-size:var(--fs-100);color:var(--text-muted);white-space:nowrap}
.kif-order-form .kif-sum-amt{font-weight:700;color:var(--text-heading);white-space:nowrap}

/* ============================ Footer / buttons ============================ */
.kif-order-form .gform_page_footer,
.kif-order-form .gform_footer{
  border-top:var(--border-hairline);padding:20px 40px;background:var(--kif-paper-100);
  display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0}
.kif-order-form .gform_wrapper .gform_page_footer .button,
.kif-order-form .gform_wrapper .gform_footer .button,
.kif-order-form .gform_wrapper input[type=submit],
.kif-order-form .gform_wrapper .gform_button{
  font-family:var(--font-body);font-size:var(--fs-200);font-weight:700;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  padding:12px 26px;border:0;border-radius:0;cursor:pointer;transition:var(--transition-color);
  background:var(--kif-red);color:#fff;line-height:1.2;width:auto}
.kif-order-form .gform_wrapper .gform_page_footer .button:hover,
.kif-order-form .gform_wrapper input[type=submit]:hover,
.kif-order-form .gform_wrapper .gform_button:hover{background:var(--kif-red-deep)}
.kif-order-form .gform_wrapper .gform_previous_button,
.kif-order-form .gform_wrapper .gform_page_footer .button.gform_previous_button,
.kif-order-form .gform_wrapper .gform_page_footer input.gform_previous_button{
  background:transparent;color:var(--kif-red);border:1px solid var(--kif-red)}
.kif-order-form .gform_wrapper .gform_previous_button:hover,
.kif-order-form .gform_wrapper .gform_page_footer .button.gform_previous_button:hover,
.kif-order-form .gform_wrapper .gform_page_footer input.gform_previous_button:hover{
  background:var(--kif-red);color:#fff}

/* ---- Review page order summary ---- */
.kif-order-form .gform_body .kif-review-total{
  font-family:var(--font-display);font-size:var(--fs-800);letter-spacing:var(--ls-ribbon)}

/* ============================ Outer footer ============================ */
.kif-order-form .kif-foot{margin-top:34px;text-align:center}
.kif-order-form .kif-foot p{margin:0 0 5px;font-size:var(--fs-200);color:var(--text-body)}
.kif-order-form .kif-foot .kif-copy{font-size:var(--fs-100);color:var(--text-muted)}
.kif-order-form .kif-foot a{color:var(--kif-red)}

/* ============================ Responsive ============================ */
@media (max-width:640px){
  .kif-order-form .gform_body,
  .kif-order-form .gf_page_steps,
  .kif-order-form .gform_page_footer,
  .kif-order-form .gform_footer{padding-left:20px;padding-right:20px}
  .kif-order-form .kif-title{font-size:34px}
  .kif-order-form .gf_step_label{font-size:10px}
  .kif-order-form .gfield.kif-merch-item{padding-left:0;min-height:0}
  .kif-order-form .gfield.kif-merch-item .gfield_description{position:static;width:120px;margin-bottom:10px}
  .kif-order-form .gfield.kif-merch-opt{margin-left:0 !important}
  .kif-order-form .kif-running-total{padding:12px 20px}
}