/* =========================================================
   VARSITY JACKET CUSTOMIZER THEME OVERRIDE
   Brand: Orange / Black
   Primary (#FF6F3C), Secondary (#000000)
   Font: Jost
   ---------------------------------------------------------
   Drop this AFTER:
   - general.minv1.css
   - general.min.css
   - vj-fixes.css
   ========================================================= */

/* 1. Load Font ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');

/* 2. CSS Variables (easy future edits) ------------------- */
:root {
  --vj-primary: #FF6F3C;      /* main brand orange */
  --vj-dark:    #000000;      /* black */
  --vj-light:   #ffffff;      /* white */
  --vj-gray-bg: #f9f9f9;      /* light panels / summary boxes */
  --vj-border:  #dddddd;      /* light border lines */
  --vj-shadow:  rgba(0,0,0,.3); /* hover shadow */
}

/* 3. Global font + base feel ----------------------------- */
body,
.wizard,
.wizard .accordion,
.wizard .btn,
.wizard .nav-pills .nav-link,
.wizard input,
.wizard select,
.wizard textarea,
.wizard .sp-h5,
.wizard #price_wrap,
.vj-customizer-wrap {
  font-family: "Jost", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: var(--vj-dark);
  /* padding: 0 0px 0 0; */
}

/* Don't override preview lettering fonts */
.wizard .js-template,
.wizard [data-font-family],
.wizard [data-font-family] .js-template,
.j-wizard .js-template {
  font-family: inherit; /* keep plugin's special block / script / varsity fonts */
}

/* 4. Layout / container / responsiveness ----------------- */
/* The plugin is already using Bootstrap-ish grid:
   row.flex-row > .col-lg-6.preview + .col-lg-6.yfm-col
   Desktop: side-by-side
   Mobile: preview first, options second
   We'll just tighten spacing and make sure scroll areas behave.
*/

.wizard .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}

.wizard .row.flex-row {
  display: flex;
  flex-wrap: wrap;
}

/* Left column that holds tabs + accordion (builder options) */
.wizard .yfm-col {
  position: relative;
  padding-bottom: 60px;
}

@media (min-width: 1200px) {
  .wizard .yfm-col {
    padding-bottom: 40px;
  }
}

@media (max-width: 991px) {
  .wizard .yfm-col {
    padding-bottom: 0;
  }
}

/* Scroll wrapper for options (accordion body) */
.wizard .w-wrapper {
  height: 100%;
  background: #fff;
}

@media (max-width: 991px) {
  .wizard .w-wrapper {
    height: 410px;
    overflow-y: auto;
  }
}

@media (max-width: 768px) {
  .wizard .w-wrapper {
    height: auto;
    overflow-y: visible;
  }
}

/* Preview box (the live jacket render / carousel) -------- */
.wizard .box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  border: 5px solid var(--vj-dark);
  border-radius: 4px;
  position: relative;
  min-height: 350px;
  /* plugin sets a taller min-height on .j-wizard .box for desktop
     that's fine; we only standardize color + border look here */
}

/* On tablets/mobile make sure preview isn't cut */
@media (max-width: 991px) {
  .wizard .box {
    height: 250px;
    padding: 0 !important;
  }
}
@media (max-width: 768px) {
  .wizard .box {
    min-height: 300px;
    height: auto;
  }
}

/* Preview carousel + stage */
.j-wizard .carousel,
.j-wizard .carousel .car-wrapper {
  width: 100%;
  height: 100%;
}

.j-wizard .carousel .car-wrapper .j-wrap {
  /* plugin default ~550x550 desktop, ~300x300 mobile */
  display: block;
  position: relative;
}

@media (max-width: 768px) {
  .j-wizard .carousel .car-wrapper .j-wrap {
    margin: 0 auto;
  }
}

/* 5. Dynamic price block in preview (Retail / Sale) ------- */
.wizard .box #price_wrap {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 20px;
  background: rgba(0,0,0,0); /* keep transparent */
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--vj-primary); /* overall accent color */
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

@media (max-width: 768px) {
  .wizard .box #price_wrap {
    padding: 10px;
    font-size: 13px;
  }
}

/* Retail (old) vs Sale (current) */
.wizard .box #price_wrap .regular {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--vj-dark);
  text-decoration: line-through;
  margin-bottom: 2px;
}

.wizard .box #price_wrap .sale {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--vj-primary);
}

/* little flash when JS updates price */
.price-update {
  animation: flashPrice 0.5s ease-in-out;
}
@keyframes flashPrice {
  0%   { opacity: .4; transform: scale(.98); }
  100% { opacity: 1;  transform: scale(1);   }
}

/* 6. Nav Pills / Steps ("Build Jacket", "Letters & Patches", "Add to Cart") */
.wizard .nav-pills .nav-link {
  border-radius: 0;
  background: #eee;
  color: var(--vj-dark);
  border-right: 1px solid #fff;
  position: relative;
  font-weight: 500;
  font-size: 16px;
  padding: .75rem .5rem;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}

@media (max-width: 768px) {
  .wizard .nav-pills .nav-link {
    font-size: 14px;
    padding: .5rem .4rem;
  }
}

/* active tab = brand orange */
.wizard .nav-pills .nav-link.active,
.wizard .nav-pills .nav-link .show > .nav-link {
  background-color: var(--vj-primary) !important;
  color: var(--vj-light) !important;
}

/* completed step = keep green check, don't touch */
.wizard .nav-pills .nav-link.complete {
  background-color: #26c82c;
  color: #fff;
}
.wizard .nav-pills .nav-link .fa-check-circle {
  display: none;
  position: absolute;
  top: 4px;
  right: 3px;
  color: #fff;
  font-size: 14px;
}
.wizard .nav-pills .nav-link.complete .fa-check-circle {
  display: inline-block;
}

/* pills container bar pinned at bottom of left column on desktop */
.wizard .yfm-col .nav-pills2 {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 0;
  width: auto;
}
@media (max-width: 991px) {
  .wizard .yfm-col .nav-pills2 {
    position: static !important;
    margin-top: 1rem;
  }
}

/* Pills group styling wrapper */
#pills-tab {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--vj-border);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* 7. Accordion (option groups: Style, Body Material, Sleeves...) */
.wizard .accordion {
  background: #fff;
}

.wizard .accordion .card {
  border: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  margin-bottom: 1rem;
/*   padding: 10px; */
}

.wizard .accordion .card-header {
  background: transparent !important;
  border: 0 !important;
  padding: 0rem 1.25rem;
}
@media (max-width: 768px) {
  .wizard .accordion .card-header {
    padding: .5rem .5rem;
  }
}

/* section title row inside each accordion header */
.wizard .accordion .card-header h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  line-height: 1.4;
  font-size: 18px;
  font-weight: 600;
  color: var(--vj-dark);
  margin: 0;
  padding: .75rem 0;
  border-bottom: 2px solid var(--vj-dark);
}
@media (max-width: 768px) {
  .wizard .accordion .card-header h5 {
    font-size: 16px;
    padding: 0 10px 0 10px;
  }
}

/* check icon (green) / expand-collapse icons */
.wizard .accordion .card-header h5 i {
  font-size: 20px;
  margin-right: .5rem;
}
@media (max-width: 768px) {
  .wizard .accordion .card-header h5 i {
    font-size: 16px;
  }
}

.wizard .accordion .card-header h5 .green {
  color: #26c82c !important;
}

/* body of each accordion panel */
.j-wizard .accordion .card-body,
.wizard .accordion .card-body {
  padding: .5rem 1.25rem;
  font-size: 15px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .j-wizard .accordion .card-body,
  .wizard .accordion .card-body {
    padding: .5rem .5rem;
  }
}

/* 8. Option tiles (material/color squares etc.) ----------- */
/* Each selectable box = .wrapper / .wrapperb / .wrapperstyles ... */
.wizard .wrapper,
.wizard .wrapperb,
.wizard .wrapperstyles,
.wizard .wrappersleeves,
.wizard .wrapperknit,
.wizard .wrapperinside,
.wizard .wrapper-back,
.letters .box {
  background: #fff;
  border: 1px solid var(--vj-border);
  border-radius: 4px;
  padding: 5px;
  min-height: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,.1) !important;
  cursor: pointer;
  transition: all .15s ease-out;
  text-align: center;
}

.wizard .wrapper:hover,
.wizard .wrapperb:hover,
.wizard .wrapperstyles:hover,
.wizard .wrappersleeves:hover,
.wizard .wrapperknit:hover,
.wizard .wrapperinside:hover,
.wizard .wrapper-back:hover,
.letters .box:hover {
  box-shadow: 0 4px 12px var(--vj-shadow) !important;
}

/* Active state = orange border */
.wizard .wrapper.active,
.wizard .wrapperb.active,
.wizard .wrapperstyles.active,
.wizard .wrappersleeves.active,
.wizard .wrapperknit.active,
.wizard .wrapperinside.active,
.wizard .wrapper-back.active,
.letters .box.active {
  border: 2px solid var(--vj-primary) !important;
  box-shadow: 0 0 0 2px var(--vj-primary) !important;
}

/* Disabled option look */
.wizard .wrapper.disable,
.wizard .wrapperb.disable,
.wizard .wrapperstyles.disable,
.wizard .wrappersleeves.disable,
.wizard .wrapperknit.disable,
.wizard .wrapperinside.disable,
.wizard .wrapper-back.disable {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* Title inside each tile */
.wizard .wrapper h4,
.wizard .wrapperb h4,
.wizard .wrapperstyles h4,
.wizard .wrappersleeves h4,
.wizard .wrapperknit h4,
.wizard .wrapperinside h4,
.wizard .wrapper-back h4 {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0 3px;
  margin: 0;
  text-align: center;
  color: var(--vj-dark);
}
@media (max-width: 768px) {
  .wizard .wrapper h4,
  .wizard .wrapperb h4,
  .wizard .wrapperstyles h4,
  .wizard .wrappersleeves h4,
  .wizard .wrapperknit h4,
  .wizard .wrapperinside h4,
  .wizard .wrapper-back h4 {
    padding: 3px 0;
  }
}

/* swatch circles for colors */
.wizard .color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #747474;
  cursor: pointer;
  transition: all .15s;
}
@media (max-width: 768px) {
  .wizard .color {
    border: 2px solid #747474;
  }
}
.wizard .color.sm {
  border-radius: 0;
  border: none;
  width: 20px;
  height: 20px;
  margin-left: 5px;
}
/* selected swatch = orange outline */
.wizard .color.active {
  border-color: var(--vj-primary) !important;
  box-shadow: 0 0 0 2px var(--vj-primary);
}

/* 9. Patch selector grid (front left chest, right chest, sleeves, etc.) */
.j-wizard .p-wrap {
  max-height: 340px;
  overflow-y: auto;
}
@media (max-width: 768px) {
  .j-wizard .p-wrap {
    max-height: 166px;
  }
}

/* Each patch box */
.j-wizard .patch-box,
.j-wizard .rpatch-box,
.j-wizard .ls-patch-box,
.j-wizard .rs-patch-box,
.j-wizard .b-patch-box,
.j-wizard .patch-box-tl,
.j-wizard .patch-box-tr,
.j-wizard .patch-box-bl,
.j-wizard .patch-box-br,
.j-wizard .patch-box-ar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  position: relative;
  margin-bottom: 5px;
  cursor: pointer;
  transition: all .15s;
}

/* hover / focus */
.j-wizard .patch-box:hover,
.j-wizard .patch-box:focus,
.j-wizard .rpatch-box:hover,
.j-wizard .rpatch-box:focus,
.j-wizard .ls-patch-box:hover,
.j-wizard .ls-patch-box:focus,
.j-wizard .rs-patch-box:hover,
.j-wizard .rs-patch-box:focus,
.j-wizard .b-patch-box:hover,
.j-wizard .b-patch-box:focus,
.j-wizard .patch-box-tl:hover,
.j-wizard .patch-box-tl:focus,
.j-wizard .patch-box-tr:hover,
.j-wizard .patch-box-tr:focus,
.j-wizard .patch-box-bl:hover,
.j-wizard .patch-box-bl:focus,
.j-wizard .patch-box-br:hover,
.j-wizard .patch-box-br:focus,
.j-wizard .patch-box-ar:hover,
.j-wizard .patch-box-ar:focus {
  border: 1px solid var(--vj-primary);
  box-shadow: 0 4px 12px var(--vj-shadow);
}

/* active (selected) patch */
.j-wizard .patch-box.active,
.j-wizard .rpatch-box.active,
.j-wizard .ls-patch-box.active,
.j-wizard .rs-patch-box.active,
.j-wizard .b-patch-box.active,
.j-wizard .patch-box-tl.active,
.j-wizard .patch-box-tr.active,
.j-wizard .patch-box-bl.active,
.j-wizard .patch-box-br.active,
.j-wizard .patch-box-ar.active {
  border: 1px solid var(--vj-primary);
  box-shadow: 0 0 0 2px var(--vj-primary);
}

/* green check in corner */
.j-wizard .patch-box i,
.j-wizard .rpatch-box i,
.j-wizard .ls-patch-box i,
.j-wizard .rs-patch-box i,
.j-wizard .b-patch-box i,
.j-wizard .patch-box-tl i,
.j-wizard .patch-box-tr i,
.j-wizard .patch-box-bl i,
.j-wizard .patch-box-br i,
.j-wizard .patch-box-ar i {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 15px;
  color: #26c82c;
}
.j-wizard .patch-box.active i,
.j-wizard .rpatch-box.active i,
.j-wizard .ls-patch-box.active i,
.j-wizard .rs-patch-box.active i,
.j-wizard .b-patch-box.active i,
.j-wizard .patch-box-tl.active i,
.j-wizard .patch-box-tr.active i,
.j-wizard .patch-box-bl.active i,
.j-wizard .patch-box-br.active i,
.j-wizard .patch-box-ar.active i {
  display: block;
}

/* 10. Size picker --------------------------------------- */
.size-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
}
.size-picker button {
  background: #ebebeb;
  color: var(--vj-dark);
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: all .15s;
  border-radius: 3px;
  font-weight: 500;
}
.size-picker button.active {
  background: var(--vj-primary);
  color: var(--vj-light);
}
.size-picker button:hover:not(.active) {
  background: #ddd;
}

/* 11. Summary / Details box in "Add to Cart" tab ---------- */
.gray-bdiv {
  background: var(--vj-gray-bg);
  border: 1px solid var(--vj-border);
  border-radius: 4px;
  padding: 15px;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--vj-dark);
}

/* Section heading in cart tab (Details / Personalization etc.) */
.sp-h5 {
  border-bottom: 2px solid var(--vj-dark);
  padding-bottom: 5px;
  font-weight: 600;
  font-size: 16px;
  color: var(--vj-dark);
}

/* 12. Buttons ------------------------------------------- */
/* Solid black button */
.btn.btn-black {
  background: var(--vj-dark) !important;
  border: 3px solid var(--vj-dark) !important;
  border-radius: 0;
  color: var(--vj-light) !important;
  box-shadow: none !important;
  padding: 10px 45px !important;
  text-transform: uppercase !important;
  font-weight: 600;
  line-height: 1.2;
}
.btn.btn-black:hover,
.btn.btn-black:focus,
.btn.btn-black:not(:disabled):not(.disabled):active {
  box-shadow: 0 3px 6px rgba(0,0,0,.6) !important;
  color: var(--vj-light) !important;
}

/* Brand orange CTA (previously .btn-secondary red) */
.btn.btn-secondary {
  background: var(--vj-primary) !important;
  border: 1px solid var(--vj-primary) !important;
  border-radius: 0;
  color: var(--vj-light) !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--vj-dark) !important;
  border-color: var(--vj-dark) !important;
  color: var(--vj-light) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,.6) !important;
}

/* Outline black button (border only) */
.btn.btn-outline-black {
  background: transparent !important;
  border: 3px solid var(--vj-dark) !important;
  border-radius: 0;
  color: var(--vj-primary) !important;
  box-shadow: none !important;
  font-weight: 600;
  line-height: 1.2;
}
.btn.btn-outline-black:hover,
.btn.btn-outline-black:focus,
.btn.btn-outline-black:not(:disabled):not(.disabled):active {
  background: var(--vj-dark) !important;
  color: var(--vj-light) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,.6) !important;
}

/* Outline white button (used on dark background sometimes) */
.btn.btn-outline-white {
  background: transparent !important;
  border: 3px solid var(--vj-light) !important;
  border-radius: 0;
  color: var(--vj-light) !important;
  box-shadow: none !important;
  font-weight: 600;
  line-height: 1.2;
}
.btn.btn-outline-white:hover,
.btn.btn-outline-white:focus,
.btn.btn-outline-white:not(:disabled):not(.disabled):active {
  background: var(--vj-light) !important;
  color: var(--vj-dark) !important;
}

/* 13. Carousel indicators (Front / Left / Right / Back tabs under preview) */
.j-wizard .carousel .carousel-indicators li {
  border: 2px solid #ddd;
  background: #fff;
  color: var(--vj-dark);
  font-weight: 700;
  width: 50px;
  height: 50px;
  padding: 5px;
  text-indent: initial;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  border-radius: 4px;
}
.j-wizard .carousel .carousel-indicators li.active {
  border: 2px solid var(--vj-primary) !important;
  box-shadow: 0 0 0 2px var(--vj-primary);
  color: var(--vj-dark);
}

/* Arrows color stays black (fits theme) */
.j-wizard .carousel .carousel-control-next-icon:after,
.j-wizard .carousel .carousel-control-prev-icon:after {
  color: var(--vj-dark) !important;
}

/* 14. Misc utility tweaks ------------------------------- */
/* Head section marked disabled */
.j-wizard .head-disabled h5,
.j-wizard .head-disabled h5 i {
  color: #ddd !important;
}

/* Resume/summary text blocks in cart tab */
#st-resume,
#insert-resume,
.sleeves-resume,
.b-resume,
.snaps-resume,
#jname-resume {
  font-size: 14px;
  line-height: 1.4;
  color: var(--vj-dark);
  font-family: "Jost", sans-serif !important;
}

/* SVG color placeholders still show correctly */
.j-wizard .js-svg-color,
.j-wizard .js-svg-color {
  opacity: 1 !important;
}

/* Shoulder overlays etc. keep opacity */
#shouldersFillF,
#shouldersFillL,
#shouldersFillB,
#shouldersFillR,
#shouldersFill {
  opacity: .75 !important;
}

/* Colored fill helpers (leave as-is, these are literal jacket colors, not UI theme) */
.blue   { fill: #30549e; }
.green  { fill: #3cbc7f; }
.yellow { fill: #e2c744; }
.orange { fill: #f78834; }
.red    { fill: #e0274b; }

/* Bottom info box for back view */
.wizard #back-wrapper {
  border-top: 1px solid var(--vj-border);
  background: #fff;
  padding: 15px;
  margin-top: 15px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/* inputs look clean and readable */
.wizard input[type="text"],
.wizard select,
.wizard textarea {
  max-width: 100%;
  border: 1px solid var(--vj-border);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 10px;
  color: var(--vj-dark);
  font-family: "Jost", sans-serif !important;
}

/* Validation / required notes etc can still use plugin logic.
   We just make sure labels look consistent. */
.wizard label,
.wizard .form-check-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--vj-dark);
  cursor: pointer;
  user-select: none;
  font-family: "Jost", sans-serif !important;
}

/* End of theme override */