/*  Google fonts ------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Eczar:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

/*  Base typography & colour ----------------------------------------- */
#bp-booking,
#bp-booking .bp-player,
#bp-booking button,
#bp-booking input,
#bp-booking select,
#bp-booking textarea{
  font-family:'Eczar',serif;
  color:#592E83;
}

/*  Force Roboto where helper class is used -------------------------- */
#bp-booking .bp-roboto{
  font-family:'Roboto',sans-serif;
}

/*  LABELS – Roboto 15 px -------------------------------------------- */
#bp-booking label{font-family:'Roboto',sans-serif;font-size:15px;}

/*  All form fields --------------------------------------------------- */
#bp-booking input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#bp-booking select,
#bp-booking textarea{
  background:#ECECEC;
  border:3px solid #592E83;
  border-radius:4px;
  padding:.4em 18px;
  min-height:2.6em;
  line-height:1.2;
  box-sizing:border-box;
  font-size:18px;
}
#bp-booking textarea{resize:vertical;}

/*  Generic buttons (legacy) ----------------------------------------- */
#bp-booking button{
  background:#0DB39E;
  color:#ECECEC;
  font-family:'Roboto',sans-serif;
  font-weight:600;
  font-size:2.25rem;
  letter-spacing:.07em;
  border:none;
  border-radius:6px;
  padding:0 12px;
  cursor:pointer;
  margin-top:12px;
}
#bp-booking button:hover{opacity:.9;}

/*  Width utilities --------------------------------------------------- */
#bp-booking .bp-btn--full{display:block;width:100%;box-sizing:border-box;}
#bp-booking .bp-btn--half{display:inline-block;width:49%;max-width:49%;box-sizing:border-box;}

/* ---------- Modern button system (primary / ghost / link) ---------- */
#bp-booking .bp-btn{
  font-family:'Roboto',sans-serif;
  font-weight:600;
  font-size:1.75rem;
  border-radius:6px;
  padding:.5em 1.25em;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
#bp-booking .bp-btn--primary{background:#0DB39E;color:#fff;border:2px solid transparent;}
#bp-booking .bp-btn--primary:hover{background:#0caf8b;}
#bp-booking .bp-btn--ghost{background:transparent;color:#0DB39E;border:2px solid currentColor;}
#bp-booking .bp-btn--ghost:hover{background:rgba(13,179,158,.07);}
#bp-booking .bp-btn--link{background:none;border:none;padding:0;color:#0DB39E;text-decoration:underline;font-weight:500;}
#bp-booking .bp-btn--link:hover{opacity:.8;}

/*  Button‑layout helpers ------------------------------------------- */
#bp-booking .bp-actions__row{display:flex;gap:.8rem;margin-top:.75rem;}

/*  Player cards ------------------------------------------------------ */
#bp-booking .bp-player{
  border:1px solid #CAA8F5;
  border-radius:6px;
  margin:10px 0;
  overflow:hidden;
}

/* ─── Card header (Spelare N / Kontaktperson) ─────────────────────── */
#bp-booking .bp-head{
  background:#592E83;
  color:#ECECEC;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:3.5rem;
  padding:.85rem .75rem;
  border-radius:6px 6px 0 0;
}
#bp-booking .bp-head h4{margin:0;font-weight:600;}

/* remove‑player chip ------------------------------------------------ */
#bp-booking .bp-remove{
  all:unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border:2px solid currentColor;
  border-radius:50%;
  cursor:pointer;
}
#bp-booking .bp-remove__icon{width:1.1rem;height:1.1rem;}
#bp-booking .bp-remove:hover{background:rgba(255,255,255,.12);}

/*  Card body --------------------------------------------------------- */
#bp-booking .bp-body{padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px;}
#bp-booking .bp-body .bp-fn,
#bp-booking .bp-body .bp-ln{flex:0 0 calc(40% - 6px);max-width:calc(40% - 6px);}
#bp-booking .bp-body .bp-age{flex:0 0 calc(20% - 6px);max-width:calc(20% - 6px);}
#bp-booking .bp-body textarea{flex:1 1 100%;height:60px;display:none;}

#bp-booking .bp-player-options{
  flex:1 1 100%;
  display:block;
  margin-top:6px;
}

/* ─── Klippkort row (checkbox | badge | button) ─────────────────── */
#bp-booking .bp-klippkort-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  flex-wrap:wrap;
}
#bp-booking .bp-klippkort-use{flex:0 0 auto;display:flex;align-items:center;font-family:'Roboto',sans-serif;font-size:1.5rem;}
#bp-booking .bp-klippkort-use input{margin-right:4px;}
#bp-booking .bp-klippkort-badge{
  flex:0 0 auto;
  margin:0;
  padding:0.25rem 1.25rem;
  border:2px solid #0DB39E;
  color:#0DB39E;
  border-radius:6px;
  font-family:'Roboto',sans-serif;
  font-weight:600;
  font-size:1.25rem;
  white-space:nowrap;
}
#bp-booking .bp-klippkort-buy{flex:0 0 auto;} /* inherits bp-btn--primary */

#bp-booking .bp-klippkort-buy{
  font-size:1.25rem;    /* change freely */
  padding:.25em 1.25em; /* change freely */
}

#bp-booking .bp-coupon-toggle{
  margin-left:auto;
  flex:0 0 auto;
  font-family:'Roboto',sans-serif;
  color:#592E83;
}
#bp-booking .bp-coupon-toggle summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:3px 10px;
  border:2px solid rgba(89,46,131,.36);
  border-radius:6px;
  font-size:12px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
#bp-booking .bp-coupon-toggle summary::-webkit-details-marker{display:none;}
#bp-booking .bp-coupon-toggle summary:hover{
  border-color:#592E83;
  background:#f6f4f7;
}
#bp-booking .bp-coupon-toggle[open] summary{display:none;}
#bp-booking .bp-coupon-panel{
  display:none;
  align-items:center;
  gap:0;
  width:auto;
  margin-top:0;
}
#bp-booking .bp-coupon-toggle[open]{
  flex:0 0 auto;
  margin-left:auto;
  display:flex;
}
#bp-booking .bp-coupon-toggle[open] .bp-coupon-panel{
  display:flex;
}
#bp-booking .bp-coupon-panel .bp-coupon{
  flex:0 0 220px;
  width:220px;
  min-width:0;
  min-height:32px;
  height:32px;
  font-size:13px;
  padding:3px 9px;
  border-width:2px;
  background:#f6f4f7;
  opacity:.86;
}
#bp-booking .bp-coupon-panel .bp-coupon:focus{opacity:1;background:#fff;}
#bp-booking .bp-coupon-panel .bp-coupon-help{
  display:none;
  flex:1 1 auto;
  max-width:260px;
  font-family:'Roboto',sans-serif;
  font-size:11px;
  line-height:1.35;
  color:#592E83;
  opacity:.72;
  padding-top:1px;
}
#bp-booking .bp-coupon-panel .bp-coupon:not(:placeholder-shown) ~ .bp-coupon-help{
  display:none;
}
#bp-booking .bp-coupon-status{
  display:none;
  width:100%;
  margin-top:6px;
  padding:5px 8px;
  border-left:3px solid #0DB39E;
  background:rgba(13,179,158,.08);
  color:#592E83;
  font-family:'Roboto',sans-serif;
  font-size:12px;
  line-height:1.35;
}
#bp-booking .bp-coupon-status--active{
  display:block;
}

/* ---------------- dashed “Add card” placeholder -------------------- */
#bp-booking .bp-add-card{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:100%;min-height:120px;border:2px dashed #CAA8F5;border-radius:6px;
  background:transparent;color:#592E83;cursor:pointer;transition:background .15s;
  margin-top:10px;
}
#bp-booking .bp-add-card:hover{background:rgba(202,168,245,.08);}
#bp-booking .bp-add-card__icon{font-size:3.5rem;line-height:1;}
#bp-booking .bp-add-card__label{margin-top:.25rem;font-family:'Roboto',sans-serif;font-size:1.1rem;}
#bp-add-player{margin:0;}

/*  Section titles ---------------------------------------------------- */
#bp-booking .bp-section-title{
  background:#592E83;color:#ECECEC;padding:6px 10px;border-radius:6px;
  font-size:2.15rem;font-weight:600;margin:18px 0 8px;
}

/*  Empty‑state / confirmation / slot summary ------------------------ */
#bp-booking .bp-events__empty{color:#777;font-style:italic;}
#bp-confirm{padding:14px;border:2px dashed #0DB39E;border-radius:8px;margin-top:12px;text-align:center;}
#bp-confirm h3{margin:0 0 8px;color:#0DB39E;}
#bp-booking .bp-slot-summary{
  color:#592E83;font-family:'Eczar',serif;font-size:2.15rem;font-weight:600;margin:0 0 6px;
}

 /*  Inline two-field row (generic: inside player-cards only) ------- */
 #bp-booking .bp-body .bp-inline-fields {
   display: flex;
   column-gap: 8px;
   flex-wrap: wrap;
 }
 #bp-booking .bp-body .bp-inline-fields > *:first-child {
   flex: 0 0 calc(40% - 6px);
   max-width: calc(40% - 6px);
 }
 #bp-booking .bp-body .bp-inline-fields > *:last-child {
   flex: 0 0 calc(60% - 6px);
   max-width: calc(60% - 6px);
 }

/*  Contact-card two-field rows —––––––––––––––––––––––––––––––––– */
#bp-booking .bp-contact-card .bp-contact-fields {
  display: flex;
  gap: 8px;
}
#bp-booking .bp-contact-card .bp-contact-fields > input,
#bp-booking .bp-contact-card .bp-contact-fields > .bp-field {
  flex: 1 1 0;
  min-width: 0;  /* prevent overflow */
}

#bp-booking .bp-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
}
#bp-booking .bp-field > input,
#bp-booking .bp-field > select,
#bp-booking .bp-field > textarea{
  width:100%;
}
#bp-booking .bp-field__label{
  font-family:'Roboto',sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1.15;
  color:#592E83;
}
#bp-booking .bp-field__error{
  min-height:15px;
  font-family:'Roboto',sans-serif;
  font-size:11px;
  line-height:1.25;
  color:#D63031;
}
#bp-booking .bp-input--error{
  border-color:#D63031!important;
  background:#fff7f7!important;
}
#bp-booking .bp-input--error:focus{
  outline:2px solid rgba(214,48,49,.22);
  outline-offset:2px;
}

/*  Contact‑card rows should fill the whole line ------------------- */
#bp-booking .bp-contact-card .bp-contact-fields{
  flex: 1 1 100%;   /* grow + shrink over the entire width */
  width:100%;       /* belt‑and‑braces */
}

 /*  Slot‑picker (“Datum / Pass”) two‑field row --------------------- */
#bp-booking #bp-slot-picker .bp-inline-fields{
  display: flex;
  column-gap: 8px;
  flex-wrap: wrap;
}
#bp-booking #bp-slot-picker .bp-inline-fields>*:first-child{
  flex: 0 0 40%;
  min-width: 140px;
}
#bp-booking #bp-slot-picker .bp-inline-fields>*:last-child{
  flex: 1 1 0;
}

#bp-booking .bp-slot-picker-message{
  margin:10px 0 0;
  padding:8px 10px;
  border-left:3px solid #D63031;
  background:#fff7f7;
  color:#592E83;
  font-family:'Roboto',sans-serif;
  font-size:13px;
  line-height:1.35;
}

/* ——— Custom caret for all <select> ——————————————— */
#bp-booking select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' width='12' height='8'%3E%3Cpath d='M6 8 0 0h12Z' fill='%23592E83' stroke='%23592E83' stroke-linejoin='round' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:1.25rem;
  font-family:'Roboto',sans-serif;          /* ← force Roboto on all <select> */
}
/* ───────── Mobile tweaks – smaller text inside <select> ─────────── */
@media (max-width:600px){
  #bp-booking select{
    font-size:14px;        /* was 18 px – about 3‑4 “steps” smaller */
    line-height:1.3;       /* keep it comfy */
    min-height:48px;          /* …but nice, tall hit‑box */
    padding-top:.6em;         /* extra breathing‑room */
    padding-bottom:.6em;
  }

    /* same reduction for text inputs & textareas */
  #bp-booking input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  #bp-booking textarea{
    font-size:14px;        /* was 18 px */
    line-height:1.3;       /* keep it comfy */
    min-height:48px;          /* …but full thumb‑height */
    padding-top:.6em;
    padding-bottom:.6em;
  }

  #bp-booking .bp-coupon-panel .bp-coupon{
    min-height:32px;
    height:32px;
    font-size:13px;
    padding:3px 9px;
  }

  #bp-booking .bp-contact-card .bp-contact-fields{
    flex-direction:column;
    gap:6px;
  }
}



#bp-msg{
  font-family:'Roboto',sans-serif;
  font-size:1.25rem;
  color:#D63031;        /* Tall Tales red */
  margin-top:.5rem;
}

/* ───────── Button loading / disabled ───────── */
.bp-btn--disabled{opacity:.4;pointer-events:none}
.bp-btn--loading{position:relative;color:transparent!important}

.bp-spinner{
  display:inline-block;
  width:1em;height:1em;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:bp-spin .6s linear infinite;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
@keyframes bp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

option.bp-soldout {
  color: #d0d0d0 !important;            /* ännu blekare grå  */
  text-decoration: line-through;     /* överstryk         */
  font-weight: normal;               /* inte fet          */
}