/* ===============================================================
 * Baron Boutique — Premium Measurement Form  (CSS ONLY)
 * Inspiration: Huashu — warm gold, charcoal, cream; editorial
 * whitespace; hairline accents. No JS, no injected markup, no
 * progress bar. Uses only the classes already in your HTML.
 *
 * Palette:  gold #b9a16b · deep gold #9c814e · ink #262626
 *           cream #fbf7ef · line #e4ddcf
 * Fonts:    Jost (labels) + Source Sans Pro (body) — already loaded
 * =============================================================== */

/* ------------------------------------------------------------- *
 * 1.  ACCORDION SHELL
 * ------------------------------------------------------------- */
.wcpa_accordion{
  border:none;
  margin:0 0 26px;
}

/* Title line sitting above the header text */
.wcpa_accordion_header::before{
  content:'Enter Your Measurements';
  display:block;
  font-family:'Jost','Source Sans Pro',sans-serif;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.02em;
  color:#262626;
  margin-bottom:6px;
  text-align:center;
}

/* The clickable header → a refined cream card */
.wcpa_accordion_header{
  position:relative;
  cursor:pointer;
  text-align:center;
  background:linear-gradient(180deg,#fbf7ef 0%,#f1e9d8 100%) !important;
  border:1px solid #dccfb4 !important;
  border-radius:3px;
  padding:17px 48px 18px 26px;
  margin:0;
  font-family:'Source Sans Pro',sans-serif;
  font-size:13px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0;
  color:#8a8275;                       /* the reassurance subtitle */
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.wcpa_accordion_header:hover{
  border-color:#b9a16b !important;
  background:linear-gradient(180deg,#fdfaf3,#efe6d2) !important;
}

/* The +/- toggle, in gold */
.wcpa_accordion_header::after{
  content:'+';
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-family:'Source Sans Pro',sans-serif;
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:#9c814e !important;
  transition:transform .25s ease;
}

/* Open / active state */
.wcpa_accordion_header.active{
  border-color:#b9a16b !important;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:0 8px 16px -13px rgba(40,32,16,.5);
}
.wcpa_accordion_header.active::after{
  content:'\2212';                     /* minus */
  transform:translateY(-50%);
}

/* Content → premium scroll box that joins the header */
.wcpa_accordion_content{
  padding:20px 20px 10px;
  display:none;
  max-height:480px;
  overflow-y:auto;
  background:#fdfbf6;
  border:1px solid #e4ddcf;
  border-top:none;
  border-radius:0 0 3px 3px;
  scrollbar-width:thin;
  scrollbar-color:#b9a16b transparent;
}
.wcpa_accordion_content::-webkit-scrollbar{ width:7px; }
.wcpa_accordion_content::-webkit-scrollbar-thumb{ background:#b9a16b; border-radius:7px; }
.wcpa_accordion_content::-webkit-scrollbar-track{ background:transparent; }

/* ------------------------------------------------------------- *
 * 2.  SECTIONS  (Acowebs groups each block in .wcpa_section)
 * ------------------------------------------------------------- */
.wcpa_accordion_content .wcpa_section + .wcpa_section{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #efe7d8;        /* hairline divider, Huashu-style */
}
/* any section heading the plugin outputs */
.wcpa_accordion_content .wcpa_section_title,
.wcpa_accordion_content .wcpa_heading_field{
  font-family:'Jost','Source Sans Pro',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9c814e;
  margin:0 0 12px;
}

/* ------------------------------------------------------------- *
 * 3.  FIELDS  (label · description · input)
 * ------------------------------------------------------------- */
.wcpa_accordion_content .wcpa_field_wrap{
  margin:0 0 18px !important;
}

/* labels — refined uppercase micro-type */
.wcpa_accordion_content .wcpa_field_label,
.wcpa_accordion_content legend.wcpa_field_label{
  display:block;
  font-family:'Jost','Source Sans Pro',sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#262626;
  margin:0 0 5px;
  line-height:1.4;
}
/* required mark → gold (covers the common markups) */
.wcpa_accordion_content .wcpa_field_label .required,
.wcpa_accordion_content .wcpa_field_label abbr,
.wcpa_accordion_content .wcpa_required_mark,
.wcpa_accordion_content .wcpa-required,
.wcpa_accordion_content .wcpa_field_label .wcpa_required{
  color:#9c814e !important;
  text-decoration:none;
  border:none;
  margin-left:4px;
  font-weight:700;
}

/* helper / description text */
.wcpa_accordion_content .wcpa_field_desc,
.wcpa_accordion_content .wcpa_description,
.wcpa_accordion_content .wcpa_tooltip_description{
  font-family:'Source Sans Pro',sans-serif;
  font-size:12.5px;
  line-height:1.5;
  color:#8a8275;
  margin:0 0 9px;
}

/* inputs, textareas, selects */
.wcpa_accordion_content input.wcpa_field,
.wcpa_accordion_content textarea.wcpa_field,
.wcpa_accordion_content select.wcpa_field,
.wcpa_accordion_content input[type=text],
.wcpa_accordion_content input[type=number],
.wcpa_accordion_content input[type=email],
.wcpa_accordion_content textarea,
.wcpa_accordion_content select{
  width:100%;
  box-sizing:border-box;
  font-family:'Source Sans Pro',sans-serif;
  font-size:15px;
  color:#262626;
  background:#fff;
  border:1px solid #e4ddcf;
  border-radius:2px;
  padding:12px 14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.wcpa_accordion_content input.wcpa_field::placeholder,
.wcpa_accordion_content textarea.wcpa_field::placeholder,
.wcpa_accordion_content input[type=text]::placeholder,
.wcpa_accordion_content input[type=number]::placeholder{
  color:#b6afa1;
}
.wcpa_accordion_content input.wcpa_field:focus,
.wcpa_accordion_content textarea.wcpa_field:focus,
.wcpa_accordion_content select.wcpa_field:focus,
.wcpa_accordion_content input[type=text]:focus,
.wcpa_accordion_content input[type=number]:focus,
.wcpa_accordion_content input[type=email]:focus,
.wcpa_accordion_content textarea:focus,
.wcpa_accordion_content select:focus{
  outline:none;
  border-color:#b9a16b;
  box-shadow:0 0 0 3px rgba(185,161,107,.18);
}
.wcpa_accordion_content textarea{ min-height:86px; resize:vertical; }

/* ------------------------------------------------------------- *
 * 4.  FIT OPTIONS → premium selectable CARDS (icon · name · desc)
 *     Markup: .wcpa_group_field > .wcpa_radio > label
 *               > input[radio] + .wcpa_radio_custom + "Name"
 *     Pure CSS: the empty .wcpa_radio_custom becomes the icon;
 *     descriptions are added by CSS in option order.
 * ------------------------------------------------------------- */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
/* each .wcpa_radio is one card slot */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio{
  flex:1 1 118px;
  min-width:90px;
  max-width:90px;          /* keeps all four on a single row on desktop */
  display:flex;
}
/* the label fills the slot and becomes the visible card */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio label{
  position:relative;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0 !important;
  padding:16px 0 15px;
  text-align:center;
  font-family:'Jost','Source Sans Pro',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.25;
  color:#262626;
  background:#fff;
  border:1px solid #e4ddcf;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio label:hover{
  border-color:#b9a16b;
  box-shadow:0 8px 18px -12px rgba(40,32,16,.45);
}

/* hide the native radio dot completely (the whole card is the control) */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field input[type=radio]{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
  clip:rect(0 0 0 0); pointer-events:none;
  -webkit-appearance:none; appearance:none;
}

/* the empty custom div → garment icon */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio_custom{
  width:30px; height:30px;
  border:none; border-radius:0; background:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5l5 4 5-4'/%3E%3Cpath d='M11 5 7 8v18h18V8l-4-3'/%3E%3Cpath d='M16 9v17'/%3E%3Ccircle cx='16' cy='14' r='0.9' fill='%23262626' stroke='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}

/* descriptions added per option (CSS content, in option order) */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio label::after{
  font-family:'Source Sans Pro',sans-serif;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.3;
  color:#8a8275;
}
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio:nth-of-type(1) label::after{ content:"Close to body"; }
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio:nth-of-type(2) label::after{ content:"Classic cut"; }
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio:nth-of-type(3) label::after{ content:"Easy comfort"; }
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio:nth-of-type(4) label::after{ content:"Wide Shoulders"; }

/* selected card → gold icon (works in every browser) */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field input[type=radio]:checked + .wcpa_radio_custom{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%239c814e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5l5 4 5-4'/%3E%3Cpath d='M11 5 7 8v18h18V8l-4-3'/%3E%3Cpath d='M16 9v17'/%3E%3Ccircle cx='16' cy='14' r='0.9' fill='%239c814e' stroke='none'/%3E%3C/svg%3E");
}

/* selected card → complementary warm gold-cream background + gold border */
.wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio label:has(input[type=radio]:checked){
  background:#f6eeda;
  border-color:#9c814e;
  box-shadow:0 8px 18px -12px rgba(40,32,16,.45);
}

/* fallback for older browsers without :has — gold ring keeps it clear */
@supports not selector(:has(*)){
  .wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field input[type=radio]:checked + .wcpa_radio_custom::after{
    content:"";
    position:absolute;
    inset:0;
    border:2px solid #9c814e;
    border-radius:8px;
    pointer-events:none;
  }
}

/* Hide the native radio tick in the Fit cards */

 .wcpa_radio_custom {
  display:none !important;
}

/* ------------------------------------------------------------- *
 * 5.  VALIDATION / ERROR STATE  (plugin's own classes)
 * ------------------------------------------------------------- */
.wcpa_accordion_content .wcpa_field_error,
.wcpa_accordion_content .wcpa-error-message{
  font-family:'Source Sans Pro',sans-serif;
  font-size:12px;
  color:#a23b2d;
  margin-top:6px;
}
.wcpa_accordion_content .wcpa_field_error input,
.wcpa_accordion_content .has-error input.wcpa_field,
.wcpa_accordion_content .has-error textarea.wcpa_field{
  border-color:#a23b2d;
  box-shadow:0 0 0 3px rgba(162,59,45,.12);
}

/* ------------------------------------------------------------- *
 * 6.  MOBILE
 * ------------------------------------------------------------- */
@media (max-width:600px){
  .wcpa_accordion_content{ max-height:none; padding:16px 16px 8px; }
  .wcpa_accordion_header{ padding:15px 42px 16px 16px; }

  /* fit cards → tidy two-per-row grid */
  .wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field{
    gap:10px;
  }
  .wcpa_accordion_content .wcpa_type_radio-group .wcpa_group_field .wcpa_radio{
    flex:1 1 calc(50% - 10px);
    min-width:0;
    max-width:120px;          /* two cards per row on mobile */
  }
}