/* =========================================================
   Modern theme for Balbooa Forms (multi-page calculator)
   Page-scoped CSS (SP Page Builder)
   ========================================================= */

/* Base scope: Balbooa form id is typically baform-* */
form[id^="baform"]{
  --bg: #ffffff;
  --text: rgba(17,24,39,1);
  --muted: rgba(17,24,39,.62);
  --border: rgba(17,24,39,.14);
  --border2: rgba(17,24,39,.10);

  --accent: #b88a2b;              /* brand */
  --accentSoft: rgba(184,138,43,.12);

  --r: 18px;
  --r2: 14px;
  --shadow: 0 18px 45px rgba(0,0,0,.10);
  --shadow2: 0 12px 26px rgba(0,0,0,.10);

  color: var(--text);
}

/* Outer card */
form[id^="baform"]{
  background: var(--bg) !important;
  border: 1px solid var(--border2) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  padding: 26px !important;
  max-width: 980px;
  margin: 0 auto;
}

/* Headings/labels in the form */
form[id^="baform"] p,
form[id^="baform"] label{
  color: var(--text) !important;
}

/* Make required asterisk stand out a bit (common pattern: label with *) */
form[id^="baform"] :is(label, p) strong,
form[id^="baform"] :is(label, p) b{
  font-weight: 700;
}

/* Buttons */
form[id^="baform"] input[type="button"],
form[id^="baform"] button,
form[id^="baform"] input[type="submit"]{
  border-radius: 999px !important;
  padding: 12px 18px !important;
  height: auto !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

form[id^="baform"] input[type="button"]:hover,
form[id^="baform"] button:hover,
form[id^="baform"] input[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2) !important;
  opacity: .95;
}

/* Try to style “Next/Submit” as primary, “Back” as secondary (based on value text) */
form[id^="baform"] input[type="button"][value*="Next"],
form[id^="baform"] input[type="button"][value*="Submit"],
form[id^="baform"] input[type="submit"]{
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid rgba(184,138,43,.55) !important;
}

form[id^="baform"] input[type="button"][value*="Back"],
form[id^="baform"] input[type="button"][value*="Prev"]{
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border2) !important;
}

/* =========================================================
   RADIO / CHECKBOX as MODERN CARDS
   - Works when each option is a <label> that contains an <input>
   ========================================================= */

/* Layout helper: if a wrapper contains multiple option-labels, make it a grid */
form[id^="baform"] :is(div, section, fieldset):has(> label:has(input[type="radio"])),
form[id^="baform"] :is(div, section, fieldset):has(> label:has(input[type="checkbox"])){
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* Generic option card */
form[id^="baform"] label:has(input[type="radio"]),
form[id^="baform"] label:has(input[type="checkbox"]){
  position: relative;
  display: flex !important;
  align-items: flex-start;
  gap: 12px;

  padding: 14px 14px !important;
  border-radius: var(--r2) !important;
  border: 1px solid var(--border2) !important;
  background: #fff !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Hover */
form[id^="baform"] label:has(input[type="radio"]):hover,
form[id^="baform"] label:has(input[type="checkbox"]):hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.10);
  border-color: rgba(184,138,43,.28) !important;
}

/* Selected state */
form[id^="baform"] label:has(input:checked){
  border-color: rgba(184,138,43,.55) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
  background: linear-gradient(180deg, var(--accentSoft), #fff 65%) !important;
}

/* Make native input smaller/cleaner (χωρίς να το κρύβουμε εντελώς) */
form[id^="baform"] label:has(input[type="radio"]) input,
form[id^="baform"] label:has(input[type="checkbox"]) input{
  margin-top: 3px;
  accent-color: var(--accent);
}

/* Text inside option card */
form[id^="baform"] label:has(input[type="radio"]) :is(span, p, div),
form[id^="baform"] label:has(input[type="checkbox"]) :is(span, p, div){
  color: var(--text) !important;
}

/* =========================================================
   IMAGE RADIO (photo options)
   - When option-label includes an <img>
   ========================================================= */

/* Image option becomes “media card” */
form[id^="baform"] label:has(img):has(input[type="radio"]),
form[id^="baform"] label:has(img):has(input[type="checkbox"]){
  padding: 0 !important;
  overflow: hidden;
  flex-direction: column;
  gap: 0;
}

/* Image */
form[id^="baform"] label:has(img) img{
  width: 100% !important;
  height: 170px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Text area under image */
form[id^="baform"] label:has(img) :is(span, p, div){
  padding: 12px 14px !important;
}

/* Place the input as a small badge (top-right) */
form[id^="baform"] label:has(img) input{
  position: absolute !important;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  margin: 0 !important;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

/* =========================================================
   TOTAL (your working hook: total-box)
   ========================================================= */
form[id^="baform"] .total-box{
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 14px !important;

  padding: 16px 18px !important;
  border-radius: var(--r) !important;
  border: 1px solid rgba(184,138,43,.28) !important;
  background:
    radial-gradient(1200px 220px at 10% 0%, rgba(184,138,43,.12), transparent 55%),
    linear-gradient(180deg, rgba(17,24,39,.02), rgba(17,24,39,0)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.10) !important;

  margin: 10px 0 22px !important;

  position: sticky;
  top: 14px;
  z-index: 5;
}

form[id^="baform"] .total-box p{ margin: 0 !important; }
form[id^="baform"] .total-box p:first-child{
  font-weight: 650 !important;
  color: var(--muted) !important;
  letter-spacing: .2px;
}
form[id^="baform"] .total-box p:last-child{
  font-weight: 850 !important;
  color: var(--text) !important;
  font-size: clamp(22px, 2.6vw, 34px) !important;
  line-height: 1.05 !important;
}

/* =========================================================
   OPTIONAL: style the multi-page step navigation
   (only if you set Navigation Settings Class Suffix = pkg-steps)
   ========================================================= */
.pkg-steps{
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 12px !important;
  margin: 0 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border2) !important;
  background: rgba(17,24,39,.02) !important;
}

.pkg-steps :is(a, span, div, li){
  border-radius: 999px;
}

/* Mobile */
@media (max-width: 768px){
  form[id^="baform"]{
    padding: 18px 16px !important;
    border-radius: 16px !important;
  }
  form[id^="baform"] label:has(input[type="radio"]),
  form[id^="baform"] label:has(input[type="checkbox"]){
    padding: 12px 12px !important;
  }
  form[id^="baform"] label:has(img) img{
    height: 150px !important;
  }
  form[id^="baform"] input[type="button"],
  form[id^="baform"] button,
  form[id^="baform"] input[type="submit"]{
    width: 100% !important;
  }
}