/* Mosterei Terminbuchung – Frontend Booking Form */
/* System fonts only – no Google Fonts */

/* ── CSS variables (overridden per site via inline style) ──────────────────── */
:root {
    --mb-primary:          #2d5a1b;
    --mb-accent:           #e8402a;
    --mb-text:             #2a2118;
    --mb-bg:               #f0f4ed;
    --mb-btn:              #2d5a1b;
    --mb-btn-text:         #ffffff;
    --mb-font:             system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --mb-radius:           12px;
    --mb-shadow:           0 4px 24px rgba(0,0,0,.10);

    --mb-cal-available-bg: #e8f5e2;
    --mb-cal-available-fg: #2d5a1b;
    --mb-cal-partial-bg:   #fff8e1;
    --mb-cal-partial-fg:   #e65c00;
    --mb-cal-low-bg:       #fff3cd;
    --mb-cal-low-fg:       #856404;
    --mb-cal-full-bg:      #fce8e6;
    --mb-cal-full-fg:      #c0392b;
    --mb-cal-blocked-bg:   #f0ede8;
    --mb-cal-blocked-fg:   #b8b0a5;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */
.mb-wrap {
    font-family:   var(--mb-font);
    color:         var(--mb-text);
    max-width:     740px;
    margin:        0 auto;
    background:    var(--mb-bg);
    border-radius: var(--mb-radius);
    box-shadow:    var(--mb-shadow);
    overflow:      hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.mb-header {
    background:    var(--mb-primary);
    padding:       0;
}
.mb-header__inner {
    display:       flex;
    align-items:   center;
    gap:           14px;
    padding:       20px 28px 16px;
}
.mb-header__logo   { max-height: 56px; width: auto; height: auto; }
.mb-header__title  { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; }
.mb-header__subtitle { color: rgba(255,255,255,.7); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin-top: 3px; }

/* ── Step indicators ─────────────────────────────────────────────────────────── */
.mb-steps {
    display:    flex;
    background: rgba(0,0,0,.15);
}
.mb-step {
    flex:          1;
    display:       flex;
    flex-direction:column;
    align-items:   center;
    padding:       10px 4px;
    cursor:        default;
    transition:    background .2s;
}
.mb-step__num {
    width:        24px;
    height:       24px;
    border-radius:50%;
    display:      flex;
    align-items:  center;
    justify-content:center;
    font-size:    11px;
    font-weight:  700;
    border:       2px solid rgba(255,255,255,.35);
    color:        rgba(255,255,255,.6);
    margin-bottom:3px;
}
.mb-step__label { font-size: 10px; color: rgba(255,255,255,.6); text-align: center; }

.mb-step--active .mb-step__num  { background: rgba(255,255,255,.95); color: var(--mb-primary); border-color: transparent; }
.mb-step--active .mb-step__label { color: #fff; font-weight: 600; }
.mb-step--done   .mb-step__num  { background: rgba(255,255,255,.3); color: #fff; border-color: rgba(255,255,255,.5); }
.mb-step--done   .mb-step__label { color: rgba(255,255,255,.7); }

/* ── Panels ─────────────────────────────────────────────────────────────────── */
.mb-panel { padding: 28px; background: #fff; }
.mb-panel--hidden { display: none; }
.mb-panel__title {
    font-size:   18px;
    font-weight: 700;
    color:       var(--mb-primary);
    margin:      0 0 20px;
}
.mb-panel__nav {
    display:        flex;
    justify-content:space-between;
    align-items:    center;
    margin-top:     24px;
    padding-top:    20px;
    border-top:     1px solid #eee;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.mb-btn {
    display:       inline-block;
    background:    var(--mb-btn);
    color:         var(--mb-btn-text);
    border:        none;
    border-radius: 8px;
    padding:       11px 22px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    font-family:   var(--mb-font);
    text-decoration:none;
    transition:    opacity .15s, transform .1s;
    white-space:   nowrap;
}
.mb-btn:hover    { opacity: .88; transform: translateY(-1px); }
.mb-btn:active   { transform: translateY(0); }
.mb-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.mb-btn--secondary {
    background: transparent;
    color:      var(--mb-primary);
    border:     2px solid var(--mb-primary);
}
.mb-btn--secondary:hover { background: var(--mb-bg); }

.mb-btn--submit {
    background: linear-gradient(135deg, var(--mb-btn), var(--mb-accent));
    font-size:  15px;
    padding:    13px 28px;
}

/* ── Fruit type grid ─────────────────────────────────────────────────────────── */
.mb-fruit-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap:                   12px;
    margin-bottom:         20px;
}
.mb-fruit-btn {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            8px;
    padding:        18px 12px;
    border:         2px solid var(--fruit-color, #ccc);
    border-radius:  10px;
    background:     transparent;
    cursor:         pointer;
    font-family:    var(--mb-font);
    transition:     background .15s, border-color .15s, transform .1s;
}
.mb-fruit-btn:hover {
    background:  rgba(var(--fruit-color-rgb, 45,90,27), .06);
    transform:   translateY(-2px);
}
.mb-fruit-btn--selected {
    background:  rgba(var(--fruit-color-rgb, 45,90,27), .12);
    border-width:3px;
    box-shadow:  0 0 0 3px rgba(var(--fruit-color-rgb, 45,90,27), .15);
}
.mb-fruit-dot {
    width:       18px;
    height:      18px;
    border-radius:50%;
    background:  var(--fruit-color, #ccc);
    flex-shrink: 0;
}
.mb-fruit-name {
    font-size:   14px;
    font-weight: 600;
    color:       var(--mb-text);
    text-align:  center;
}
.mb-fruit-badge {
    font-size:     10px;
    background:    #f0f0f0;
    color:         #888;
    padding:       2px 8px;
    border-radius: 20px;
}
.mb-fruit-btn--contact { border-style: dashed; opacity: .75; }

.mb-contact-hint {
    background:  #fff8e1;
    border:      1px solid #f5c842;
    border-radius:8px;
    padding:     16px 20px;
    margin-top:  12px;
}
.mb-contact-hint p { margin: 0 0 12px; font-size: 14px; color: #555; }

/* ── Calendar ───────────────────────────────────────────────────────────────── */
.mb-calendar-wrap { margin-bottom: 12px; }
.mb-cal-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
}
.mb-cal-prev,
.mb-cal-next {
    background:    none;
    border:        1px solid #ddd;
    border-radius: 6px;
    width:         36px;
    height:        36px;
    font-size:     18px;
    cursor:        pointer;
    color:         var(--mb-primary);
    transition:    background .15s;
    display:       flex;
    align-items:   center;
    justify-content:center;
}
.mb-cal-prev:hover,
.mb-cal-next:hover { background: #f0f4ed; }
.mb-cal-month { font-size: 16px; font-weight: 700; color: var(--mb-primary); }

.mb-cal-header {
    display:    grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size:  11px;
    font-weight:700;
    color:      #888;
    margin-bottom:4px;
    text-transform:uppercase;
}
.mb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap:     4px;
}
.mb-cal-loading { grid-column: 1 / -1; text-align: center; padding: 24px; color: #888; font-size: 13px; }

.mb-cal-day {
    aspect-ratio:   1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    justify-content:center;
    border-radius:  8px;
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    transition:     transform .1s, box-shadow .1s;
    user-select:    none;
    position:       relative;
    padding:        2px;
}
.mb-cal-day--empty   { cursor: default; }
.mb-cal-day--disabled { cursor: not-allowed; opacity: .5; }
.mb-cal-day:not(.mb-cal-day--disabled):not(.mb-cal-day--empty):hover {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    z-index: 1;
}
.mb-cal-day--selected { box-shadow: 0 0 0 3px var(--mb-primary) !important; transform: scale(1.05); z-index: 2; }

.mb-cal-day--available       { background: var(--mb-cal-available-bg); color: var(--mb-cal-available-fg); }
.mb-cal-day--partial         { background: var(--mb-cal-partial-bg);   color: var(--mb-cal-partial-fg); }
.mb-cal-day--low             { background: var(--mb-cal-low-bg);       color: var(--mb-cal-low-fg); }
.mb-cal-day--full            { background: var(--mb-cal-full-bg);      color: var(--mb-cal-full-fg); }
.mb-cal-day--blocked,
.mb-cal-day--past,
.mb-cal-day--outside_season,
.mb-cal-day--contact,
.mb-cal-day--wrong_weekday,
.mb-cal-day--not_released,
.mb-cal-day--inactive        { background: var(--mb-cal-blocked-bg);   color: var(--mb-cal-blocked-fg); }

.mb-cal-day__num { pointer-events: none; }
.mb-cal-day__kg {
    display:       block;
    font-size:     9px;
    font-weight:   600;
    pointer-events:none;
    line-height:   1.1;
    margin-top:    1px;
    opacity:       .85;
}

.mb-cal-legend {
    display:     flex;
    gap:         16px;
    flex-wrap:   wrap;
    font-size:   11px;
    color:       #666;
    margin-top:  8px;
}
.mb-dot {
    display:      inline-block;
    width:        10px;
    height:       10px;
    border-radius:50%;
    margin-right: 4px;
    vertical-align:middle;
}
.mb-dot--available { background: var(--mb-cal-available-fg); }
.mb-dot--partial   { background: var(--mb-cal-partial-fg); }
.mb-dot--full      { background: var(--mb-cal-full-fg); }
.mb-dot--blocked   { background: var(--mb-cal-blocked-fg); }

/* ── Quantity ────────────────────────────────────────────────────────────────── */
.mb-quantity-info { font-size: 14px; color: #555; margin-bottom: 16px; }
.mb-quantity-input-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom:6px;
}
.mb-quantity-input {
    width:  140px;
    flex-shrink:0;
}
.mb-quantity-unit { font-size: 15px; font-weight: 600; color: #888; }
.mb-quantity-hint { display: block; margin-bottom: 12px; }

.mb-quick-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 8px; }
.mb-quick-select {
    display:    flex;
    flex-wrap:  wrap;
    gap:        8px;
    margin-bottom:4px;
}
.mb-quick-btn {
    padding:       8px 14px;
    border:        2px solid var(--mb-primary);
    border-radius: 6px;
    background:    transparent;
    color:         var(--mb-primary);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    font-family:   var(--mb-font);
    transition:    background .12s, color .12s;
}
.mb-quick-btn:hover              { background: var(--mb-primary); color: #fff; }
.mb-quick-btn--active            { background: var(--mb-primary); color: #fff; }
.mb-quick-btn--disabled          { opacity: .3; cursor: not-allowed; border-style: dashed; }
.mb-quick-btn--disabled:hover    { background: transparent; color: var(--mb-primary); }

/* ── Contact form ───────────────────────────────────────────────────────────── */
.mb-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.mb-field label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.mb-input {
    width:         100%;
    padding:       10px 12px;
    border:        2px solid #ddd;
    border-radius: 7px;
    font-size:     14px;
    font-family:   var(--mb-font);
    color:         var(--mb-text);
    box-sizing:    border-box;
    transition:    border-color .15s;
    background:    #fff;
}
.mb-input:focus          { outline: none; border-color: var(--mb-primary); box-shadow: 0 0 0 3px rgba(45,90,27,.1); }
.mb-input--error         { border-color: #e53e3e !important; }
.mb-field-hint           { color: #e53e3e; font-size: 11px; margin-top: 3px; }
.mb-checkbox-label       { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #555; cursor: pointer; }
.mb-checkbox-label input { margin-top: 2px; flex-shrink: 0; }
.mb-checkbox-label a     { color: var(--mb-primary); }

/* ── Summary ────────────────────────────────────────────────────────────────── */
.mb-summary { border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.mb-summary-row {
    display:         flex;
    justify-content: space-between;
    padding:         10px 14px;
    font-size:       14px;
}
.mb-summary-row:nth-child(even) { background: #f8faf6; }
.mb-summary-label { font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .4px; }
.mb-summary-value { font-weight: 600; color: var(--mb-text); text-align: right; max-width: 65%; word-break: break-word; }

/* ── Notices ────────────────────────────────────────────────────────────────── */
.mb-notice {
    margin: 0;
    padding: 20px 28px;
    border-radius: 0 0 var(--mb-radius) var(--mb-radius);
}
.mb-notice--success { background: #e8f5e2; border-top: 3px solid #2d5a1b; }
.mb-notice--error   { background: #fce8e6; border-top: 3px solid #c0392b; }
.mb-notice--hidden  { display: none; }
.mb-notice h3       { margin: 0 0 8px; color: var(--mb-primary); }
.mb-notice p        { margin: 0; font-size: 14px; line-height: 1.6; }
.mb-notice--error p { color: #c0392b; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
    .mb-header__inner { padding: 16px 18px 12px; }
    .mb-panel         { padding: 20px 18px; }
    .mb-fruit-grid    { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
    .mb-quick-btn     { padding: 7px 10px; font-size: 12px; }
    .mb-form-grid     { grid-template-columns: 1fr; }
}