/**************************************************************
 * St. Louis Tag — Quote Form (form-5384)
 * CSS baseline, grouped for quick scanning.
 *
 * SECTION MAP
 *  1) Layout shell & rows
 *  2) Buttons (Next / Back)
 *  3) Typography / helper copy
 *  4) Generic “choice” controls (radio/checkbox pills)
 *  5) Card-style choice grids (base + states)
 *  6) Page-specific card mappings (colors/images)
 *  7) File upload (paperclip row)
 *  8) Perforations page cards
 *  9) Misc (sup/sub)
 ****************************************************************/

/* ========== 1) Layout shell & rows ========== */

#form-5384 { display:flex; flex-direction:column; align-items:center; justify-content:center; }
#form-5384 .current-form { display:flex; }

#form-5384 .currentForm{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:900px; max-width:100%; padding:20px;
  border:1px solid #707070; box-shadow:0 3px 6px #d6d6d6;
}

/* default row frame */
#form-5384 .currentForm .formElements .row{
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  max-width:650px; text-align:center;
}

/* fine-tuned row widths by id (only rows that diverge) */
#form-5384 .currentForm .formElements #row-52.row  { max-width:690px; }
#form-5384 .currentForm .formElements #row-54.row  { max-width:680px; }
#form-5384 .currentForm .formElements #row-96.row,
#form-5384 .currentForm .formElements #row-98.row  { max-width:705px; }
#form-5384 .currentForm .formElements #row-103.row { max-width:695px; }
#form-5384 .currentForm .formElements #row-110.row { max-width:795px; }
#form-5384 .currentForm .formElements #row-128.row { max-width:710px; }
#form-5384 .currentForm .formElements #row-133.row { max-width:700px; }

#form-5384 .row input,
#form-5384 .row select{
  width:300px; height:45px; border:1px solid #707070; border-radius:0; font-size:18px; color:#707070;
}
#form-5384 .row input::placeholder{ color:#707070; opacity:.5; }
#form-5384 .row input:focus::placeholder,
#form-5384 .row textarea:focus::placeholder { color:transparent; }
#form-5384 .row textarea{ color: #707070 }

#form-5384 #pageButton{ margin:2em 0 2rem; }


/* ========== 2) Buttons (Next / Back) ========== */

#form-5384 .pageNext{
  border-radius:25px; background:#f57251; color:#fff; font-size:20px;
  padding:10px 75px; border:1px solid #707070;
}
#form-5384 .pageNext::before,
#form-5384 .pageBack::before{ content:none; }

#form-5384 .pageBack{
  position:absolute; left:16px; bottom:37px;
  height:36px; padding:9px 0 9px 40px;
  color:#707070; font-size:16px; font-weight:400; border:none;
}
#form-5384 .pageBack.hidden{ display:none; }
#form-5384 #pageBack5384::before{
  content:""; position:absolute; left:0; top:50%; width:36px; height:36px; transform:translateY(-50%);
  background:url("/images/quote_form/arrow_left.png") no-repeat center/contain;
}


/* ========== 3) Typography / helper copy ========== */

#form-5384 h1{ font-size:53px; }

/* gold helper copy */
#form-5384 #textimg-69229 p,
#form-5384 #textimg-69234 p,
#form-5384 #textimg-69260 p,
#form-5384 #textimg-69354 p,
#form-5384 #textimg-69359 p,
#form-5384 #textimg-69360 p,
#form-5384 #textimg-69370 p,
#form-5384 #textimg-69275 p,
#form-5384 #textimg-69384 p,
#form-5384 #textimg-69562 p,
#form-5384 #textimg-69563 p,
#form-5384 #textimg-69270 p,
#form-5384 #textimg-69564 p,
#form-5384 #textimg-69565 p,
#form-5384 #textimg-69566 p,
#form-5384 #textimg-69567 p,
#form-5384 #textimg-69568 p,
#form-5384 #textimg-69284 p{
  color:#b49667; font-size:14px; font-weight:600; margin:0;
}

/* gray mini notes */
#form-5384 li#textimg-69231 p,
#form-5384 li#textimg-69272 p{
  color:#acacac; font-size:13px; font-weight:700; margin-bottom:0;
}


/* ========== 4) Generic “choice” controls (radio/checkbox pills) ========== */

#form-5384 li.radio span,
#form-5384 li.checkbox span{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:300px; height:45px; padding:8px 0; margin:20px 0;
  border:1px solid #707070; border-radius:22px; color:#707070; font-size:20px;
  box-shadow:0 3px 6px #d6d6d6; cursor:pointer; transition:all .2s ease;
}
#form-5384 li.radio input[type="radio"],
#form-5384 li.checkbox input[type="checkbox"]{
  position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; pointer-events:auto; cursor:pointer;
}
#form-5384 li.radio span:hover,
#form-5384 li.checkbox span:hover{ background:#f2eee9; color:#66412f; }
#form-5384 li.radio span:has(> input[type="radio"]:checked),
#form-5384 li.checkbox span:has(> input[type="checkbox"]:checked){ background:#f57251; color:#fff; }
#form-5384 li.radio span:first-of-type{ margin:0; }

#form-5384 .formElements .row > ul > li{ padding:0; }


/* ========== 5) Card-style choice grids (base + states) ========== */

#form-5384 #radio-69317,
#form-5384 #radio-69318,
#form-5384 #radio-69319,
#form-5384 #radio-69326,
#form-5384 #radio-69340,
#form-5384 #radio-69341,
#form-5384 #radio-69561,
#form-5384 #radio-69674{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  max-width:700px; margin:24px auto 0; padding:0;
}

#form-5384 #radio-69317::before,
#form-5384 #radio-69318::before,
#form-5384 #radio-69319::before,
#form-5384 #radio-69326::before,
#form-5384 #radio-69340::before,
#form-5384 #radio-69341::before,
#form-5384 #radio-69561::before,
#form-5384 #radio-69674::before,
#form-5384 #radio-69317::after,
#form-5384 #radio-69318::after,
#form-5384 #radio-69319::after,
#form-5384 #radio-69326::after,
#form-5384 #radio-69340::after,
#form-5384 #radio-69341::after,
#form-5384 #radio-69561::after,
#form-5384 #radio-69674::after{ display:none; }

/* individual card */
#form-5384 #radio-69317 span,
#form-5384 #radio-69318 span,
#form-5384 #radio-69319 span,
#form-5384 #radio-69326 span,
#form-5384 #radio-69340 span,
#form-5384 #radio-69341 span,
#form-5384 #radio-69561 span,
#form-5384 #radio-69674 span{
  all:unset; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:110px; padding:10px 5px; line-height:15px; font-size:14px; font-weight:bold; color:#66412f;
  background:#f2eee9; border:1px solid #707070; box-shadow:0 3px 6px #d6d6d6; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}

/* swatch/image well */
#form-5384 #radio-69317 span::before,
#form-5384 #radio-69318 span::before,
#form-5384 #radio-69319 span::before,
#form-5384 #radio-69326 span::before,
#form-5384 #radio-69340 span::before,
#form-5384 #radio-69341 span::before,
#form-5384 #radio-69561 span::before,
#form-5384 #radio-69674 span::before{
  content:""; width:85px; height:85px; margin-bottom:5px; background-size:cover;
}

/* hover + checked */
#form-5384 #radio-69317 span:hover,
#form-5384 #radio-69318 span:hover,
#form-5384 #radio-69319 span:hover,
#form-5384 #radio-69326 span:hover,
#form-5384 #radio-69340 span:hover,
#form-5384 #radio-69341 span:hover,
#form-5384 #radio-69561 span:hover,
#form-5384 #radio-69674 span:hover{ background:#fff; transform:translateY(-3px); }

#form-5384 #radio-69317 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69318 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69319 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69326 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69340 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69341 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69561 span:has(> input[type="radio"]:checked),
#form-5384 #radio-69674 span:has(> input[type="radio"]:checked){ background:#f57251; color:#fff; }


/* ========== 6) Page-specific card mappings (colors/images) ========== */

/* P5 – Regular colors (13pt) */
#form-5384 #radio-69317 span:has(> input[data-value="Grey"])::before{        background:#b0b4ad; }
#form-5384 #radio-69317 span:has(> input[data-value="Dark Green"])::before{  background:#0e9f4a; }
#form-5384 #radio-69317 span:has(> input[data-value="Light Green"])::before{ background:#66c266; }
#form-5384 #radio-69317 span:has(> input[data-value="Dark Blue"])::before{   background:#1e7bcb; }
#form-5384 #radio-69317 span:has(> input[data-value="Pink"])::before{        background:#f4a7b9; }
#form-5384 #radio-69317 span:has(> input[data-value="Red"])::before{         background:#e3413a; }
#form-5384 #radio-69317 span:has(> input[data-value="Lilac"])::before{       background:#bf86c1; }
#form-5384 #radio-69317 span:has(> input[data-value="Light Blue"])::before{  background:#a6cbef; }
#form-5384 #radio-69317 span:has(> input[data-value="Brown"])::before{       background:#a86b2d; }
#form-5384 #radio-69317 span:has(> input[data-value="Yellow"])::before{      background:#f4d231; }
#form-5384 #radio-69317 span:has(> input[data-value="Orange"])::before{      background:#f28c2b; }
#form-5384 #radio-69317 span:has(> input[data-value="Salmon"])::before{      background:#f3b07e; }
#form-5384 #radio-69317 span:has(> input[data-value="Ivory"])::before{       background:#e6ddaf; }
#form-5384 #radio-69317 span:has(> input[data-value="Buff"])::before{        background:#c6a64b; }

/* P7 – Fluorescent (13pt) */
#form-5384 #radio-69318 span:has(> input[data-value="Canary"])::before{ background:#fff200; }
#form-5384 #radio-69318 span:has(> input[data-value="Green"])::before{  background:#7cff00; }
#form-5384 #radio-69318 span:has(> input[data-value="Orange"])::before{ background:#ff9f00; }
#form-5384 #radio-69318 span:has(> input[data-value="Pink"])::before{   background:#ff4fc3; }
#form-5384 #radio-69318 span:has(> input[data-value="Red"])::before{    background:#ff3b30; }

/* P10 / P11 – Vinyl colors (10pt / 14pt) */
#form-5384 #radio-69340 span:has(> input[data-value="White"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="White"])::before{ background:#ffffff; }
#form-5384 #radio-69340 span:has(> input[data-value="Red"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Red"])::before{     background:#e3413a; }
#form-5384 #radio-69340 span:has(> input[data-value="Orange"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Orange"])::before{  background:#f28c2b; }
#form-5384 #radio-69340 span:has(> input[data-value="Yellow"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Yellow"])::before{  background:#f4d231; }
#form-5384 #radio-69340 span:has(> input[data-value="Green"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Green"])::before{    background:#0e9f4a; }
#form-5384 #radio-69340 span:has(> input[data-value="Blue"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Blue"])::before{     background:#1e7bcb; }
#form-5384 #radio-69340 span:has(> input[data-value="Pink"])::before{     background:#f4a7b9; }

#form-5384 #radio-69340 span:has(> input[data-value="Fluorescent Green"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Fluorescent Green"])::before{  background:#7cff00; }
#form-5384 #radio-69340 span:has(> input[data-value="Fluorescent Pink"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Fluorescent Pink"])::before{   background:#ff4fc3; }
#form-5384 #radio-69340 span:has(> input[data-value="Fluorescent Canary"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Fluorescent Canary"])::before{ background:#fff200; }
#form-5384 #radio-69340 span:has(> input[data-value="Fluorescent Orange"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Fluorescent Orange"])::before{ background:#ff9f00; }
#form-5384 #radio-69340 span:has(> input[data-value="Fluorescent Red"])::before,
#form-5384 #radio-69341 span:has(> input[data-value="Fluorescent Red"])::before{    background:#ff3b30; }

/* P6 – Kraft (image swatches) */
#form-5384 #radio-69319 span:has(> input[data-value="11pt Royal Fiber Brown Kraft"])::before{ background-image:url("/images/quote_form/Royal Brown Craft.jpg"); }
#form-5384 #radio-69319 span:has(> input[data-value="18pt Brown Glama Kraft"])::before{      background-image:url("/images/quote_form/Glama-Kraft-Swatch_l.jpg"); }
#form-5384 #radio-69319 span:has(> input[data-value="15pt Desert Storm"])::before{            background-image:url("/images/quote_form/Desert Storm_.jpg"); }

/* P22 – Reinforcement cards by input IDs */
#form-5384 #radio-69561 span:has(> input#radioO-131956)::before{ background-image:url('/images/quote_form/3 16.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131957)::before{ background-image:url('/images/quote_form/3 8.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131958)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_Drilled_Hole.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131959)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_No_hole.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131960)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_3-16_Brown_Patch.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131961)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_3-8_Brown_Patch.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131962)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_3-16_White_Patch.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131963)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_3-8_White_Patch.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131964)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_3-16_ME+Brown_Patch_.png'); }
#form-5384 #radio-69561 span:has(> input#radioO-131965)::before{ background-image:url('/images/quote_form/Quote_Wizards_Assets_Tag_-_3-8_ME+Brown_Patch.png'); }

/* P26 – String type image cards */
#form-5384 #radio-69417{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px; max-width:980px; margin:24px auto 0; padding:0;
}
#form-5384 #radio-69417 span{
  all:unset; position:relative; width:170px; height:280px; border:1px solid #707070;
  display:flex; align-items:center; justify-content:center; background:#f2eee9; color:transparent; font-size:0;
  cursor:pointer; transition:background-color .15s, transform .15s, box-shadow .15s;
}
#form-5384 #radio-69417 input[type="radio"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
#form-5384 #radio-69417 span::before{ content:""; position:absolute; inset:0; background:center/contain no-repeat; transition:transform .15s; }
#form-5384 #radio-69417 span:hover{ background-color:#e46234; transform:translateY(-2px); box-shadow:0 8px 14px rgba(0,0,0,.16); }
#form-5384 #radio-69417 span:has(> input[type="radio"]:checked){ background-color:#e46234; }

#form-5384 #radio-69417 span:has(> input[data-value="Knotted Cotton Strings"])::before{  background-image:url("/images/quote_form/Quote Wizards Assets_Knotted Cotton String.png"); }
#form-5384 #radio-69417 span:has(> input[data-value="Knotted Elastic Strings"])::before{ background-image:url("/images/quote_form/Quote Wizards Assets_Knotted Elastic String.png"); }
#form-5384 #radio-69417 span:has(> input[data-value="Looped Rayon Strings"])::before{    background-image:url("/images/quote_form/Quote Wizards Assets_Looped String.png"); }

/* P27 – String color chips */
#form-5384 #radio-69326 span:has(> input[data-value="White"])::before{ background:#fff; }
#form-5384 #radio-69326 span:has(> input[data-value="Black"])::before{ background:#000; }

/* P30 – Corner styles (radios) */
#form-5384 #radio-69674{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  max-width:700px; margin:24px auto 0; padding:0;
}
#form-5384 #radio-69674 span{
  all:unset; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:100px; padding:10px 5px; line-height:0; font-size:0; font-weight:bold; color:#66412f;
  background:#f2eee9; border:1px solid #707070; box-shadow:0 3px 6px #d6d6d6; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}
#form-5384 #radio-69674 span::before{ content:""; width:85px; height:157px; margin-bottom:5px; background-size:cover; }
#form-5384 #radio-69674 span:hover{ background:#fff; transform:translateY(-3px); }
#form-5384 #radio-69674 span:has(> input[type="radio"]:checked){ background:#f57251; color:#fff; }
#form-5384 #radio-69674 input[type="radio"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* map each option ID to its image */
#form-5384 #radio-69674 span:has(> input#radioO-132200)::before{ background-image:url("/images/quote_form/Two Clipped Corners.png"); }
#form-5384 #radio-69674 span:has(> input#radioO-132201)::before{ background-image:url("/images/quote_form/Four Clipped Corners.png"); }
#form-5384 #radio-69674 span:has(> input#radioO-132202)::before{ background-image:url("/images/quote_form/Two Rounded Corners.png"); }
#form-5384 #radio-69674 span:has(> input#radioO-132203)::before{ background-image:url("/images/quote_form/Square Corners.png"); }
#form-5384 #radio-69674 span:has(> input#radioO-132204)::before{ background-image:url("/images/quote_form/Four Rounded Corners.png"); }


/* ========== 7) File upload (paperclip row) ========== */

/* hide platform “Choose Files…” buttons */
#form-5384 #file-69230 > input[type="button"],
#form-5384 #file-69265 > input[type="button"]{ display:none; }

/* row frame */
#form-5384 .row li#file-69230,
#form-5384 .row li#file-69265{ width:300px; cursor:pointer; padding:0; }

/* label with paperclip icon */
#form-5384 .row li#file-69230 label,
#form-5384 .row li#file-69265 label{
  display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:5px;
  color:#66412f; text-decoration:underline;
}
#form-5384 .row li#file-69230 label:before,
#form-5384 .row li#file-69265 label:before{
  content:""; width:74px; height:38px; background:url("/images/quote_form/Paperclip.png") no-repeat center/contain;
}

/* selected files list */
#form-5384 .row li#file-69230 ul,
#form-5384 .row li#file-69265 ul{ padding:3px 0; color:#acacac; }
#form-5384 .row li#file-69230 ul li,
#form-5384 .row li#file-69265 ul li{ font-size:14px; }

/* Printing features box */
.printing-features{
  border:1px solid #ddd; border-radius:8px; padding:20px; box-shadow:0 1px 4px rgba(0,0,0,.06);
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:start;
  max-width:920px; margin:0 auto 24px; background:#fff;
}
.printing-features .pf-item{ margin:0; text-align:center; }
.printing-features img{ display:block; width:150px; height:auto; margin:0 auto 10px; }
.printing-features figcaption{ font-size:14px; line-height:1.35; color:#f57251; }
.printing-features figcaption strong{ font-weight:700; }

/* Stack on small screens */
@media (max-width:700px){
  .printing-features{ grid-template-columns:1fr; gap:18px; }
  .printing-features img{ width:180px; }
}


/* ========== 8) Perforations page cards (P38) ========== */

/* hide large demo image */
#form-5384 #form-5384-page-38 #row-171{ display:none; }

/* grid + cards */
#form-5384 #radio-69307{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
  max-width:700px; margin:24px auto 0; padding:0;
}
#form-5384 #radio-69307 span{
  all:unset; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:110px; padding:10px 5px; line-height:0; font-size:0; font-weight:bold; color:#66412f;
  background:#f2eee9; border:1px solid #707070; box-shadow:0 3px 6px #d6d6d6; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
}
#form-5384 #radio-69307 span::before{
  content:""; width:85px; height:152px; margin-bottom:5px; background-size:cover;
}
#form-5384 #radio-69307 span:hover{ background:#fff; transform:translateY(-3px); }
#form-5384 #radio-69307 span:has(> input[type="radio"]:checked){ background:#f57251; color:#fff; }
#form-5384 #radio-69307 input[type="radio"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }

/* images */
#form-5384 #radio-69307 span:has(> input[data-value="One Perforation"])::before{   background-image:url("/images/quote_form/One Perf.png"); }
#form-5384 #radio-69307 span:has(> input[data-value="Two Perforations"])::before{  background-image:url("/images/quote_form/Two Perfs.png"); }
#form-5384 #radio-69307 span:has(> input[data-value="Three Perforations"])::before{background-image:url("/images/quote_form/Three Perfs.png"); }
#form-5384 #radio-69307 span:has(> input[data-value="Four Perforations"])::before{ background-image:url("/images/quote_form/Four Perfs.png"); }


/* ========== 9) Misc ========== */
#form-5384 sup, #form-5384 sub { font-size:12px; }
#form-5384 sup { margin-left:3px; }

#radio-69244 > label,
#radio-69247 > label,
#radio-69317 > label,
#radio-69319 > label,
#radio-69318 > label,
#checkbox-69324 > label,
#radio-69338 > label,
#radio-69340 > label,
#radio-69341 > label,
#radio-69249 > label,
#radio-69250 > label,
#radio-69350 > label,
#radio-69375 > label,
#radio-69364 > label,
#radio-69365 > label,
#radio-69372 > label,
#radio-69373 > label,
#radio-69374 > label,
#radio-69561 > label,
#textarea-69264 > label,
#radio-69267 > label,
#radio-69417 > label,
#radio-69326 > label,
#radio-69331 > label,
#textarea-69344 > label,
#radio-69281 > label,
#radio-69675 > label,
#radio-69325 > label,
#radio-69287 > label,
#radio-69291 > label,
#radio-69296 > label,
#radio-69298 > label,
#radio-69300 > label,
#radio-69303 > label,
#radio-69307 > label,
#textarea-69311 > label,
#textarea-69313 > label,
#radio-69674 > label,
#radio-69262 > label {
    display: none;
}