/* sos-datepick.css – FINAL (sidebar-ready, 1-date state, compact tabs, centered CTA) */

.sos-datepick{
  max-width:520px;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  border:2px solid #ff9933;

  font-family: BebasNeueRegular, "Bebas Neue", Arial, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* sizes */
  --fs-head: 24px;  /* top location title */
  --fs-tab: 18px;   /* Basel/Bern/Virtual */
  --fs-body: 18px;  /* dates + details */
  --fs-price: 24px; /* CHF band */
  --fs-cta: 22px;   /* button label */

  /* layout */
  --leftcol: 90px;
  --indent: 8px;

  /* colors */
  --orange: #ff9933;
  --red: #ff580f;
  --redHover: #e94a00;
  --border: rgba(0,0,0,.12);
  --rowbg: rgba(0,0,0,.03);

  container-type: inline-size;
}

/* enforce Regular inside datepick (avoid theme bold) */
.sos-datepick,
.sos-datepick *{
  font-family: BebasNeueRegular, "Bebas Neue", Arial, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-synthesis: none !important;
}

/* ---------------- Header ---------------- */
.sos-datepick__lochead{
  background: var(--red);
  color:#fff;
  text-align:center;
  padding:10px 10px;
  font-size: var(--fs-head);
  line-height:1;
}

/* ---------------- Secondary Location Picker ---------------- */
.sos-datepick__loctoggle{
  background: var(--orange);
  padding: 6px 6px !important;
}

.sos-datepick__loctoggle-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  border:0 !important;
  background:transparent !important;
  margin:0 !important;
  width:100% !important;
  height:32px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative;
  cursor:pointer !important;
  font-size: var(--fs-tab) !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  color:#fff !important;
}

.sos-datepick__loctoggle-btn::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size: 14px;
  opacity:.95;
  pointer-events:none;
  transition: transform .15s ease;
}

.sos-datepick__loctoggle-btn.is-open::after{
  transform: translateY(-50%) rotate(180deg);
}

.sos-datepick__locmenu{
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0 8px;
  background:#fff;
  border-bottom:1px solid transparent;
  transition:max-height .16s ease, opacity .12s ease, padding .16s ease, border-color .16s ease;
}

.sos-datepick__locmenu.is-open{
  max-height:180px;
  opacity:1;
  padding:8px;
  border-bottom:1px solid var(--border);
}

.sos-datepick__locmenu-item{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  background:#f5f5f5;
  color:#5c5c5c;
  text-align:center;
  padding:8px 10px;
  margin:4px 0;
  font-size: calc(var(--fs-tab) - 1px);
  line-height:1;
  letter-spacing:.02em;
  cursor:pointer;
}

.sos-datepick__locmenu-item:hover,
.sos-datepick__locmenu-item:focus{
  background:#ededed;
  outline:none;
}

.sos-datepick__panel{
  background:#fff;
  opacity:1;
  transition: opacity .15s ease, filter .15s ease;
  will-change: opacity, filter;
}

.sos-datepick.is-switching-out .sos-datepick__panel{
  opacity:0;
  filter: brightness(1.25) saturate(0);
}

.sos-datepick.is-switching-in .sos-datepick__panel{
  opacity:1;
  filter:none;
}

.sos-datepick.is-switching-out .sos-datepick__loctoggle-btn,
.sos-datepick.is-switching-in .sos-datepick__loctoggle-btn,
.sos-datepick.is-switching-out .sos-datepick__locmenu-item,
.sos-datepick.is-switching-in .sos-datepick__locmenu-item{
  pointer-events:none;
}

/* ---------------- Kursdaten: multi-date default uses GRID ---------------- */
.sos-datepick__kdwrap{
  display:grid;
  grid-template-columns: var(--leftcol) 1fr;
  gap:12px;
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  align-items:start;
}

.sos-datepick__kdleft{
  display:flex;
  align-items:flex-start;
  padding-top:8px;
}

.sos-datepick__kdright{
  display:flex;
  flex-direction:column;
  align-self:start;
  min-height:0;
}

.sos-datepick__kdrow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px var(--indent);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  background:transparent;
}

.sos-datepick__kdrow:last-child{ border-bottom:0; }
.sos-datepick__kdrow.is-active{ background:var(--rowbg); }

.sos-datepick__kddates{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:#4a4a4a;
  line-height:1.1;
}

.sos-datepick__date{ font-size: var(--fs-body); }

.sos-datepick__kdrow.is-single-date{
  padding-top:6px;
  padding-bottom:6px;
}

.sos-datepick__kdrow.is-single-date .sos-datepick__kddates{
  gap:0;
}

.sos-datepick__kdrow.is-single-date .sos-datepick__date{
  line-height:1;
  margin-top:-1px;
}

.sos-datepick__kdrow.is-single-date .sos-datepick__radio{
  transform:none;
}

.sos-datepick__kdselect{
  min-width:28px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.sos-datepick input[type="radio"].sos-datepick__radio{
  width:22px;
  height:22px;
  accent-color: var(--red);
  margin:0 !important; /* override theme default input[type=radio]{ margin-bottom:1rem; } */
  display:block;
  flex:0 0 22px;
  vertical-align:middle;
}

/* ---------------- Kursdaten: SINGLE DATE state (GRID -> FLEX) ---------------- */
.sos-datepick.dp-count-1 .sos-datepick__kdwrap{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
  padding-top:6px !important;
  padding-bottom:6px !important;
}

.sos-datepick.dp-count-1 .sos-datepick__kdleft{
  flex:0 0 var(--leftcol) !important;
  padding-top:6px !important;
}

.sos-datepick.dp-count-1 .sos-datepick__kdright{
  flex:1 1 auto !important;
}

.sos-datepick.dp-count-1 .sos-datepick__kdrow{
  padding-top:6px !important;
  padding-bottom:6px !important;
  border-bottom:0 !important;
  background:transparent !important;
}

.sos-datepick.dp-count-1 .sos-datepick__kddates .sos-datepick__date:only-child{
  line-height:1;
  margin-top:-1px;
}

/* ---------------- Details ---------------- */
.sos-datepick__details{
  padding:6px 10px 4px;
}

.sos-datepick__drow{
  display:grid;
  grid-template-columns: var(--leftcol) 1fr;
  gap:10px;
  padding:5px 0;
}

.sos-datepick__k{
  color: var(--orange);
  font-size: var(--fs-body);
  letter-spacing:.02em;
  line-height:1.05;
}

.sos-datepick__v{
  color:#111;
  font-size: var(--fs-body);
  padding-left: var(--indent);     /* align with date text */
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sos-datepick__drow.is-trainer .sos-datepick__v{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

.sos-datepick__trainer-link{
  color:inherit;
  text-decoration:none;
  opacity:.85;
}

.sos-datepick__trainer-link:hover,
.sos-datepick__trainer-link:focus{
  color:#000;
  opacity:1;
}

/* ---------------- Price band ---------------- */
.sos-datepick__price{
  background: var(--orange);
  color:#fff;
  text-align:center;
  font-size: var(--fs-price);
  padding:12px 10px;
  line-height:1;
}

/* ---------------- CTA (FULL-WIDTH AREA like legacy) ---------------- */
.sos-datepick__cta{
  display:flex;                 /* <-- wichtig: Icon + Text sauber */
  align-items:center;
  justify-content:center;
  gap:10px;                     /* <-- Abstand Icon/Text (dein “minimal fix”) */

  width:100%;
  background: var(--red);
  color:#fff !important;
  text-decoration:none !important;

  font-size: var(--fs-cta);
  line-height:1;

  padding: 18px 12px;           /* full “fläche” wie vorher */
  border: 0;
}

.sos-datepick__cta:hover,
.sos-datepick__cta:focus{
  background: var(--redHover);
  color:#fff !important;
  text-decoration:none !important;
}

/* remove the band if it exists in markup */
.sos-datepick__ctaBand{
  background: transparent !important;
  padding: 0 !important;
  display:block !important;
}

/* Safety: falls Theme irgendwo Inline-Icon-Margins setzt */
.sos-datepick__cta svg,
.sos-datepick__cta i,
.sos-datepick__cta img{
  display:inline-block;
  vertical-align:middle;
  margin:0 !important;
}

/* ---------------- Container-width tweaks ---------------- */
@container (max-width: 360px){
  .sos-datepick{
    --leftcol: 82px;
    --fs-head: 22px;
    --fs-tab: 17px;
    --fs-body: 17px;
    --fs-price: 22px;
    --fs-cta: 20px;
  }
}

/* Desktop: align first sidebar CTA with left content box top edge */
@media (min-width: 641px){
  .single-course .course-dates > .widget{
    margin-top:0 !important;
  }
  .single-course .course-dates > .widget .widget{
    margin-top:0 !important;
  }
  .single-course .course-dates .widget > p{
    margin-top:0 !important;
  }
}