/* ==========================================================================
   MVH Booking – kombiniertes Stylesheet (Appointments + Custom Select)
   ========================================================================== */
:root{
  --mvh-primary: #2b2b2b;   /* dezentes Dunkelgrau (Links/Text) */
  --mvh-accent:  #b4975a;   /* Gold (Primäraktionen) */
  --mvh-text:    #222222;
  --mvh-muted:   #6b7280;
  --mvh-line:    #e5e7eb;
  --mvh-bg:      #f7f8fb;
  --mvh-white:   #ffffff;
  --mvh-radius:  12px;      /* etwas kleiner/edler */
  --mvh-shadow:  0 14px 40px rgba(0,0,0,.06);
}

/* === Grundlayout & Typo === */
html, body{
  background: var(--mvh-bg) !important;
  color: var(--mvh-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif !important;
}
main, .app-content, .content, .container, .appointments-public, .app-content__main{
  max-width: 960px !important;
  margin: 24px auto !important;
  padding: 18px !important;
  background: var(--mvh-white) !important;
  border-radius: var(--mvh-radius) !important;
  box-shadow: var(--mvh-shadow) !important;
}
h1{ font-size: 28px !important; margin: 0 0 8px !important; letter-spacing: .2px }
h2{ font-size: 20px !important; margin: 18px 0 10px !important; color: var(--mvh-text) !important }
p, .help-text, .description{ color: var(--mvh-muted) !important }
hr, .divider{ border: 0; border-top: 1px solid var(--mvh-line) !important; opacity: 1 !important; margin: 16px 0 !important }

/* === Formular-Elemente === */
.content input, .content select, .content textarea,
main    input, main    select, main    textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], textarea, select{
  width: 100%;
  background: #fff !important;
  color: var(--mvh-text) !important;
  border: 1px solid var(--mvh-line) !important;
  border-radius: var(--mvh-radius) !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
.content input:focus, .content select:focus, .content textarea:focus,
main    input:focus, main    select:focus, main    textarea:focus,
input:focus, select:focus, textarea:focus{
  outline: 2px solid color-mix(in srgb, var(--mvh-accent) 35%, transparent) !important;
  outline-offset: 0 !important;
  border-color: var(--mvh-accent) !important;
}
input[type="checkbox"]{ accent-color: var(--mvh-accent) !important }

/* Geschlossene native Selects – dezente Optik + goldener Pfeil */
.content select, main select, select{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b4975a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px !important;
  padding-right: 2.4rem !important;
  min-height: 42px !important;
  font-size: 16px !important;
}

/* Labels & Abstände */
label, .field-label, .form-label{ color: var(--mvh-text) !important; font-weight: 500 !important }
.form-row, .field-group, .form-group, .appointments-form__field{ margin-bottom: 12px !important }

/* === Primär-Buttons: schlanker & gold === */
button, .button, .primary, .action-primary, [type="submit"],
.oc-button, .oc-primary, .oc-button--primary, button.primary, .primary.button{
  background: var(--mvh-accent) !important;
  border-color: var(--mvh-accent) !important;
  color: #111 !important;
  border-radius: var(--mvh-radius) !important;
  padding: 8px 12px !important;       /* kleiner */
  height: auto !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;         /* nicht fett */
  box-shadow: none !important;
}
button:hover, .button:hover, .primary:hover, .action-primary:hover, [type="submit"]:hover,
.oc-button:hover, .oc-primary:hover, .oc-button--primary:hover{
  filter: brightness(0.94) !important;
}

/* Links dezent */
a{ color: var(--mvh-primary) !important; text-decoration: none }
a:hover{ color: var(--mvh-accent) !important }

/* === Tages-/Slot-Listen & Picker === */
.appointments-day, .day, .list--day, .day-card, .slot-list{
  border: 1px solid #f0f2f5 !important;
  background: #fff !important;
  border-radius: var(--mvh-radius) !important;
  padding: 8px 10px !important;
  margin-bottom: 10px !important;
}
.timepicker, .datetimepicker, [class*="picker"], .oc-datetimepicker, .oc-select{
  border-radius: var(--mvh-radius) !important;
  border-color: var(--mvh-line) !important;
}

/* === Mobile === */
@media (max-width: 640px){
  main, .app-content, .content, .container, .appointments-public, .app-content__main{
    margin: 12px auto !important;
    padding: 14px !important;
  }
  .appointments-day, .day, .list--day{ padding: 6px 8px !important }
}

/* === Sanfte Neutralisierung NC-Theming === */
:root{
  --color-primary-element: var(--mvh-accent) !important; /* Gold in NC-UI */
  --color-primary-text:    var(--mvh-primary) !important;
  --color-main-text:       var(--mvh-text) !important;
}

/* ==========================================================================
   Custom Select (visueller Ersatz für natives <select>)
   ========================================================================== */
.mvh-select{ position:relative; font:inherit; color:var(--mvh-primary) }
.mvh-select__native{ position:absolute; inset:0; opacity:0; pointer-events:none }
.mvh-select__trigger{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; padding:10px 14px; border:1px solid var(--mvh-line); border-radius:var(--mvh-radius);
  background:#fff; cursor:pointer; font:inherit; color:var(--mvh-primary);
}
.mvh-select__chev{
  width:18px; height:18px; flex:0 0 18px; display:inline-block;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b4975a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center/18px;
}
.mvh-select.open .mvh-select__chev{ transform: rotate(180deg) }
.mvh-select__list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; max-height:260px; overflow:auto;
  background:#fff; border:1px solid var(--mvh-line); border-radius:12px; box-shadow:var(--mvh-shadow);
  z-index:99999; display:none;
}
.mvh-select.open .mvh-select__list{ display:block }
.mvh-select__option{ padding:10px 12px; cursor:pointer; line-height:1.4 }
.mvh-select__option:hover{ background:#fafafa }
.mvh-select__option[aria-selected="true"]{ background: color-mix(in srgb, var(--mvh-accent) 14%, white) }
.mvh-select__sr-only{
  position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important; border:0!important;
}