/* ============================
  Beautycenter by Neta – Booking UI (force override)
  ============================ */
:root{
 --bc-bg: #f7f7f8;
 --bc-card: #ffffff;
 --bc-text: #111113;
 --bc-muted: #6b7280;
 --bc-line: #e5e7eb;
 --bc-primary: #d6c3b5;
 --bc-primary-strong: #c9b3a3;
 --bc-success: #16a34a;
 --bc-danger: #ef4444;
 --bc-radius: 14px;
 --bc-radius-sm: 10px;
 --bc-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 24px rgba(0,0,0,.08);
 --bc-font: "SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,
            "Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,system-ui,sans-serif;
}
html, body {
 background: var(--bc-bg) !important;
 color: var(--bc-text) !important;
 font-family: var(--bc-font) !important;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
/* ===== Events-Liste ===== */
#events {
 max-width: 980px !important;
 margin: 0 auto !important;
 padding: 24px !important;
 background: transparent !important;
}
#events h3{
 font-size: 1.125rem !important;
 font-weight: 700 !important;
 letter-spacing: .01em !important;
 margin: 0 0 8px 0 !important;
 color: var(--bc-text) !important;
}
#events p.duration,
#events div.duration{
 font-size: .95rem !important;
 color: var(--bc-muted) !important;
 margin: 0 0 12px 0 !important;
}
#events p.description,
#events div.description{
 font-size: 1rem !important;
 line-height: 1.6 !important;
 color: var(--bc-text) !important;
 opacity: .92 !important;
 margin: 0 0 14px 0 !important;
}
#events .selectedEvent{
 background: var(--bc-card) !important;
 border: 1px solid var(--bc-line) !important;
 box-shadow: var(--bc-shadow) !important;
 border-radius: var(--bc-radius) !important;
 padding: 16px 18px !important;
 transition: transform .2s ease, box-shadow .2s ease !important;
}
#events .selectedEvent:hover{
 transform: translateY(-1px) !important;
 box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 16px 28px rgba(0,0,0,.10) !important;
}
/* ===== Buttons ===== */
#events input.reserve_time_btn,
#events input.select_another_btn,
#eventForm #save_button{
 -webkit-appearance: none !important;
 appearance: none !important;
 border: 1px solid transparent !important;
 background: var(--bc-primary) !important;
 color: #0f0f0f !important;
 font-weight: 600 !important;
 font-size: .98rem !important;
 padding: 12px 18px !important;
 border-radius: 999px !important;
 cursor: pointer !important;
 transition: background .2s, transform .05s, box-shadow .2s, border-color .2s !important;
 box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
#events input.reserve_time_btn:hover,
#events input.select_another_btn:hover,
#eventForm #save_button:hover{
 background: var(--bc-primary-strong) !important;
 box-shadow: 0 2px 6px rgba(0,0,0,.06) !important;
}
#events input.reserve_time_btn:active,
#events input.select_another_btn:active,
#eventForm #save_button:active{
 transform: translateY(1px) !important;
}
/* Sekundär-Button */
#events input.select_another_btn{
 background: #fff !important;
 color: var(--bc-text) !important;
 border-color: var(--bc-line) !important;
}
/* ===== Formularüberschriften ===== */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3{
 font-size: 1.05rem !important;
 font-weight: 700 !important;
 margin: 12px 0 10px !important;
 color: var(--bc-text) !important;
}
/* ===== jQuery UI Widgets ===== */
div.ui-widget-content{
 background: var(--bc-card) !important;
 border: 1px solid var(--bc-line) !important;
 border-radius: var(--bc-radius-sm) !important;
 color: var(--bc-text) !important;
 box-shadow: var(--bc-shadow) !important;
}
div.ui-widget-header{
 background: linear-gradient(#ffffff, #fafafa) !important;
 border: 1px solid var(--bc-line) !important;
 border-bottom-color: #e3e5e9 !important;
 color: var(--bc-text) !important;
 border-top-left-radius: var(--bc-radius-sm) !important;
 border-top-right-radius: var(--bc-radius-sm) !important;
 font-weight: 700 !important;
}
/* ===== Timeline / Slots ===== */
#timeline-container table.timeline{
 width: 100% !important;
 border-collapse: separate !important;
 border-spacing: 0 !important;
 background: var(--bc-card) !important;
 border: 1px solid var(--bc-line) !important;
 border-radius: var(--bc-radius) !important;
 overflow: hidden !important;
 box-shadow: var(--bc-shadow) !important;
}
.timeline td{
 padding: 10px 12px !important;
 border-bottom: 1px solid var(--bc-line) !important;
 font-size: .95rem !important;
 white-space: nowrap !important;
}
.timeline tr:last-child td{ border-bottom: 0 !important; }
.timeline td.not_worked_time{
 background: #fafafa !important;
 color: var(--bc-muted) !important;
 text-decoration: line-through !important;
}
.timeline td.free_time{
 background: #f9fbfa !important;
 color: #065f46 !important;
 border-left: 3px solid var(--bc-success) !important;
}
.timeline td.selected_time{
 background: #fff7ed !important;
 border-left: 3px solid var(--bc-primary) !important;
 font-weight: 600 !important;
}
.timeline td.reserved_time{
 background: #fef2f2 !important;
 color: #991b1b !important;
 border-left: 3px solid var(--bc-danger) !important;
 text-decoration: none !important;
 opacity: .8 !important;
}
/* ===== Loading ===== */
div#loading{
 display: inline-flex !important;
 align-items: center !important;
 gap: 10px !important;
 padding: 10px 14px !important;
 background: var(--bc-card) !important;
 border: 1px solid var(--bc-line) !important;
 border-radius: 999px !important;
 box-shadow: var(--bc-shadow) !important;
 font-size: .95rem !important;
 color: var(--bc-muted) !important;
}
/* ===== Form Labels & Inputs ===== */
#start_date-block-container .zend_form dt,
#start_date-block-container .zend_form dt b,
#start_date-block-container .zend_form dd label{
 color: var(--bc-muted) !important;
 font-weight: 500 !important;
 letter-spacing: .01em !important;
}
#eventForm input[type="text"],
#eventForm input[type="email"],
#eventForm input[type="tel"],
#eventForm select{
 border-radius: 12px !important;
 border: 1px solid var(--bc-line) !important;
 padding: 10px 12px !important;
 background: #fff !important;
 transition: border-color .2s ease, box-shadow .2s ease !important;
}
#eventForm input[type="text"]:focus,
#eventForm input[type="email"]:focus,
#eventForm input[type="tel"]:focus,
#eventForm select:focus{
 outline: none !important;
 border-color: var(--bc-primary-strong) !important;
 box-shadow: 0 0 0 4px rgba(214,195,181,.25) !important;
}
/* kleine Helfer */
#events .eyebrow{
 display: inline-block !important;
 font-size: .8rem !important;
 letter-spacing: .12em !important;
 text-transform: uppercase !important;
 color: var(--bc-muted) !important;
 margin-bottom: 8px !important;
}