/* ==========================================================
   Vienna Salsa Studio – Public Registration Form (VSS Style)
   Complete scoped CSS (does not break global Bootstrap)
   Load AFTER bootstrap.css and any Nimbus styles
   Scope: body.public-registration-form-page #public-registration-form
   ========================================================== */

/* ------------------ Tokens (edit colors here) ------------------ */
body.public-registration-form-page{
  --vss-bg: #fbfbfd;
  --vss-bg2:#f4f6fb;

  --vss-text:#0b1020;
  --vss-muted: rgba(11,16,32,.66);
  --vss-line: rgba(11,16,32,.12);

  --vss-accent:#ff3b30;  /* salsa */
  --vss-accent2:#ffb000; /* mango */

  --vss-card: rgba(255,255,255,.86);
  --vss-card2: rgba(255,255,255,.72);

  --vss-shadow: 0 18px 55px rgba(13,18,40,.12);
  --vss-shadow2: 0 10px 28px rgba(13,18,40,.10);

  --vss-r1: 16px;
  --vss-r2: 26px;

  --vss-max: 980px;

  --vss-input-bg: rgba(255,255,255,.92);
  --vss-input-border: rgba(11,16,32,.16);
  --vss-focus: rgba(255,59,48,.14);
}

/* ------------------ Page background + base typography ------------------ */
body.public-registration-form-page{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--vss-text);
  line-height: 1.55;

  background:
    radial-gradient(1200px 900px at 12% -10%, rgba(255,59,48,.16), transparent 55%),
    radial-gradient(1200px 900px at 92% 0%, rgba(255,176,0,.16), transparent 58%),
    linear-gradient(180deg, var(--vss-bg), var(--vss-bg2));
  background-attachment: fixed;
}

/* Make links consistent */
body.public-registration-form-page a{
  color: var(--vss-text);
  text-decoration: none;
}
body.public-registration-form-page a:hover{
  color: #000;
  text-decoration: none;
}

/* ------------------ Main container (card) ------------------ */
body.public-registration-form-page #public-registration-form.container{
  max-width: var(--vss-max);
  margin: 42px auto;
  padding: 26px 18px 34px;

  border-radius: var(--vss-r2);
  border: 1px solid rgba(11,16,32,.10);

  background:
    radial-gradient(900px 450px at 85% -20%, rgba(255,59,48,.08), transparent 70%),
    radial-gradient(800px 420px at -10% 110%, rgba(255,176,0,.07), transparent 70%),
    linear-gradient(180deg, var(--vss-card), var(--vss-card2));

  box-shadow: var(--vss-shadow);
}

/* Make bootstrap .container not add odd padding on xs */
@media (max-width: 768px){
  body.public-registration-form-page #public-registration-form.container{
    margin: 22px 12px;
    padding: 18px 14px 24px;
  }
}

/* ------------------ Section header ------------------ */
body.public-registration-form-page .registration-section-header{
  display: inline-block;
  margin: 10px 0 6px;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 16px;
}

/* HR */
body.public-registration-form-page #public-registration-form hr{
  border: 0;
  border-top: 1px solid var(--vss-line);
  margin: 18px 0;
  opacity: .9;
}

/* ------------------ Alerts as soft cards ------------------ */
body.public-registration-form-page #public-registration-form .alert{
  border-radius: var(--vss-r2);
  border: 1px solid rgba(11,16,32,.10);
  box-shadow: var(--vss-shadow2);
  padding: 18px 18px;
  margin-bottom: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  color: var(--vss-text);
}

body.public-registration-form-page #public-registration-form .alert-info{
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(255,59,48,.07), transparent 70%),
    radial-gradient(700px 380px at -10% 110%, rgba(255,176,0,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
}

body.public-registration-form-page #public-registration-form .alert-warning{
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(255,176,0,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
}

body.public-registration-form-page #public-registration-form .alert-danger{
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(255,59,48,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
}

/* Info label style inside alert */
body.public-registration-form-page .info-label,
body.public-registration-form-page .teacher-label,
body.public-registration-form-page .room-label{
  color: var(--vss-muted);
  font-weight: 800;
}
body.public-registration-form-page .info-text{
  color: rgba(11,16,32,.92);
}

/* “single only” text */
body.public-registration-form-page .single-or-pair-only{
  margin-top: 6px;
  color: var(--vss-muted);
}

/* ------------------ Events table (Alle Termine) ------------------ */
/* ===== Events table: smaller, no framed rows ===== */
body.public-registration-form-page .showEvents{
  margin-top: 10px;
}

body.public-registration-form-page .showEvents table{
  width: 100%;
  border-collapse: collapse;   /* no separated "cards" */
  border-spacing: 0;
  margin-top: 8px;
  font-size: 13px;            /* smaller */
  color: var(--vss-muted);
}

/* remove backgrounds/borders/rounded corners completely */
body.public-registration-form-page .showEvents tr.course-event-item td{
  padding: 6px 6px;
  background: transparent !important;
  border: 0 !important;
  color: var(--vss-muted);
}


/* small number column */
body.public-registration-form-page .showEvents td.event-number{
  width: 34px;
  color: rgba(11,16,32,.45);
  font-weight: 900;
}

/* keep date/time readable */
body.public-registration-form-page .showEvents td.event-datetime{
  color: rgba(11,16,32,.70);
  font-weight: 700;
}

/* location / start hint more muted */
body.public-registration-form-page .showEvents td.event-location,
body.public-registration-form-page .showEvents td.event-isStart{
  color: rgba(11,16,32,.55);
  font-weight: 700;
}

/* start hint not too loud */
body.public-registration-form-page .showEvents td.event-isStart{
  white-space: nowrap;
}

/* ------------------ Form grid (Bootstrap rows) ------------------ */
body.public-registration-form-page #public-registration-form .row{
  margin-left: 0;
  margin-right: 0;
}

body.public-registration-form-page #public-registration-form .col-xs-4,
body.public-registration-form-page #public-registration-form .col-xs-6,
body.public-registration-form-page #public-registration-form .col-xs-offset-4{
  padding-left: 0;
  padding-right: 0;
}

/* Labels */
body.public-registration-form-page #public-registration-form label{
  display: block;
  font-weight: 950;
  font-size: 13px;
  margin: 12px 0 6px;
  color: rgba(11,16,32,.82);
}

/* Required star */
body.public-registration-form-page #public-registration-form .required-item:after{
  content:" *";
  color: var(--vss-accent);
  font-weight: 950;
}

/* Optional label subtly muted */
body.public-registration-form-page #public-registration-form .optional-item{
  color: var(--vss-muted);
  font-weight: 900;
}

/* ------------------ Inputs (Bootstrap .form-control) ------------------ */
body.public-registration-form-page #public-registration-form .form-control{
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--vss-input-border);
  background: var(--vss-input-bg);
  color: rgba(11,16,32,.92);

  padding: 10px 14px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.public-registration-form-page #public-registration-form textarea.form-control{
  height: auto;
  min-height: 110px;
  border-radius: var(--vss-r2);
  padding: 12px 14px;
}

/* Focus */
body.public-registration-form-page #public-registration-form .form-control:focus{
  border-color: rgba(255,59,48,.55);
  box-shadow: 0 0 0 4px var(--vss-focus);
}

/* Placeholder */
body.public-registration-form-page #public-registration-form .form-control::placeholder{
  color: rgba(11,16,32,.45);
}

/* Select arrow nicer (keeps native) */
body.public-registration-form-page #public-registration-form select.form-control{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(11,16,32,.55) 50%),
    linear-gradient(135deg, rgba(11,16,32,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* ------------------ Buttons ------------------ */
body.public-registration-form-page #public-registration-form .btn,
body.public-registration-form-page #public-registration-form button,
body.public-registration-form-page #public-registration-form input[type="submit"]{
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: .1px;
  padding: 11px 16px;
  border: 0;
  cursor: pointer;
}

/* Primary CTA */
body.public-registration-form-page #public-registration-form .btn.btn-primary{
  color: #111;
  background: linear-gradient(135deg, var(--vss-accent), var(--vss-accent2));
  box-shadow: 0 14px 30px rgba(255,59,48,.16);
}

body.public-registration-form-page #public-registration-form .btn.btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

body.public-registration-form-page #public-registration-form .btn.btn-primary:active{
  transform: translateY(0);
}

/* “disabled” surrogate button */
body.public-registration-form-page #public-registration-form .btn.disabled,
body.public-registration-form-page #public-registration-form .btn[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* Small button in AGB / privacy */
body.public-registration-form-page #public-registration-form .btn.btn-xs{
  padding: 7px 10px;
  font-weight: 900;
  box-shadow: none;
  border: 1px solid rgba(11,16,32,.12);
  background: rgba(255,255,255,.85);
}

/* ------------------ BOOKING TYPES (Pricing Cards) ------------------ */
/* ===== Booking Types Grid – Clean 2 Column Layout ===== */
body.public-registration-form-page 
#public-registration-form 
.booking-types-container{
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

/* Desktop & Tablet: 2 nebeneinander */
@media (min-width: 640px){
  body.public-registration-form-page 
  #public-registration-form 
  .booking-types-container{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 */
@media (max-width: 639px){
  body.public-registration-form-page 
  #public-registration-form 
  .booking-types-container{
    grid-template-columns: 1fr;
  }
}

/* Card */
body.public-registration-form-page #public-registration-form .booking-type-item{
  border-radius: var(--vss-r2);
  border: 1px solid rgba(11,16,32,.12);
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(255,59,48,.07), transparent 70%),
    radial-gradient(700px 380px at -10% 110%, rgba(255,176,0,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.93), rgba(255,255,255,.78));
  box-shadow: var(--vss-shadow2);
  padding: 20px 20px 18px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

/* Hover */
body.public-registration-form-page #public-registration-form .booking-type-item:hover{
  transform: translateY(-3px);
  box-shadow: var(--vss-shadow);
}

/* Hide the dash separator */
body.public-registration-form-page #public-registration-form .booking-type-name-seperator{
  display: none;
}

/* Title */
body.public-registration-form-page #public-registration-form .booking-type-name{
  display: block;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}


/* Detail line */
body.public-registration-form-page #public-registration-form .booking-type-price{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--vss-muted);
}

/* Selected */
body.public-registration-form-page #public-registration-form .booking-type-item.selected{
  border-color: rgba(255,59,48,.60);
  box-shadow:
    0 0 0 3px rgba(255,59,48,.10),
    var(--vss-shadow);
}

/* Featured plan (Flatrate) */
body.public-registration-form-page #public-registration-form #booking-type-item-time-1{
  border: 2px solid transparent;
	padding-top: 46px;              /* creates a "badge/header zone" */
  background:
    radial-gradient(900px 520px at 85% -25%, rgba(255,59,48,.18), transparent 62%),
    radial-gradient(900px 520px at 15% 120%, rgba(255,176,0,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.84)) padding-box,
    linear-gradient(135deg, rgba(255,59,48,.48), rgba(255,176,0,.44)) border-box;
  box-shadow:
    0 22px 78px rgba(255,59,48,.12),
    0 16px 48px rgba(13,18,40,.12);
}

/* Featured badge */
body.public-registration-form-page #public-registration-form #booking-type-item-time-1::after{
  content: "Empfohlen";
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--vss-accent), var(--vss-accent2));
  color: #111;
  box-shadow: 0 10px 20px rgba(255,59,48,.18);
}

/* When featured selected */
body.public-registration-form-page #public-registration-form #booking-type-item-time-1.selected{
  box-shadow:
    0 0 0 3px rgba(255,59,48,.12),
    0 28px 90px rgba(255,59,48,.18),
    0 18px 60px rgba(13,18,40,.14);
}

/* ------------------ Payment / AGB / Privacy boxes ------------------ */
body.public-registration-form-page #public-registration-form #agb-container,
body.public-registration-form-page #public-registration-form #privacy-container,
body.public-registration-form-page #public-registration-form .payment-method-info-container{
  border-radius: var(--vss-r2);
  border: 1px solid rgba(11,16,32,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.74));
  box-shadow: var(--vss-shadow2);
  padding: 14px 14px;
}

/* Align checkbox a bit nicer */
body.public-registration-form-page #public-registration-form #agb-container input[type="checkbox"],
body.public-registration-form-page #public-registration-form #privacy-container input[type="checkbox"],
body.public-registration-form-page #public-registration-form .payment-method-info input[type="checkbox"]{
  transform: translateY(2px);
  width: 18px;
  height: 18px;
}

/* In-box text */
body.public-registration-form-page #public-registration-form .agb-text,
body.public-registration-form-page #public-registration-form .privacy-text{
  color: rgba(11,16,32,.84);
  font-weight: 800;
}

/* Payment info paragraph */
body.public-registration-form-page #public-registration-form .payment-method-info p{
  margin: 10px 0 0;
  color: var(--vss-muted);
}

/* ------------------ Footer actions ------------------ */
body.public-registration-form-page #public-registration-form .form-result-and-actions .pull-left p{
  margin: 0 0 6px;
  color: var(--vss-muted);
  font-weight: 700;
}

/* Ensure “Verbindlich Buchen” button looks like CTA */
body.public-registration-form-page #public-registration-form #registrationFormSend{
  padding: 12px 18px;
}

/* ------------------ Success block ------------------ */
body.public-registration-form-page #form-success{
  max-width: var(--vss-max);
  margin: 42px auto;
  padding: 24px 18px;

  border-radius: var(--vss-r2);
  border: 1px solid rgba(11,16,32,.10);

  background:
    radial-gradient(900px 420px at 85% -20%, rgba(255,59,48,.08), transparent 70%),
    radial-gradient(700px 380px at -10% 110%, rgba(255,176,0,.07), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78));
  box-shadow: var(--vss-shadow);
  color: rgba(11,16,32,.90);
}

/* ------------------ Hide elements you don't want ------------------ */
body.public-registration-form-page .type-header-name,
body.public-registration-form-page .group-level-item-name,
body.public-registration-form-page .course-key,
body.public-registration-form-page td.col-remarks,
body.public-registration-form-page th.col-remarks,
body.public-registration-form-page td.col-teacher,
body.public-registration-form-page th.col-teacher{
  display:none !important;
}