/* IDS Platform — ids-platform.css */
:root {
    --ids-primary:   #e85d04;
    --ids-primary-d: #c44e02;
    --ids-green:     #2d6a4f;
    --ids-text:      #1a1a1a;
    --ids-muted:     #666;
    --ids-border:    #e0e0e0;
    --ids-bg:        #f8f9fa;
    --ids-white:     #ffffff;
    --ids-radius:    10px;
}

/* ── Base ─────────────────────────────────────────── */
.ids-wrap  { font-family: inherit; color: var(--ids-text); }
.ids-card  { background: var(--ids-white); border: 1px solid var(--ids-border); border-radius: var(--ids-radius); padding: 2rem; margin-bottom: 1.5rem; }
.ids-error { color: #c0392b; font-size: .9rem; }

/* ── Alerts ───────────────────────────────────────── */
.ids-alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.ids-alert--success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.ids-alert--error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

/* ── Buttons ──────────────────────────────────────── */
.ids-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.4rem; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: .2s; text-decoration: none; }
.ids-btn--primary { background: var(--ids-primary); color: #fff; }
.ids-btn--primary:hover { background: var(--ids-primary-d); color: #fff; }
.ids-btn--ghost  { background: transparent; color: var(--ids-muted); border-color: var(--ids-border); }
.ids-btn--ghost:hover { border-color: #999; color: var(--ids-text); }
.ids-btn:disabled { opacity: .6; cursor: not-allowed; }
.ids-btn-row { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* ── Forms ────────────────────────────────────────── */
.ids-field { margin-bottom: 1rem; }
.ids-field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; color: var(--ids-text); }
.ids-input, .ids-select { width: 100%; padding: .55rem .75rem; border: 1.5px solid var(--ids-border); border-radius: 8px; font-size: .95rem; background: var(--ids-white); box-sizing: border-box; }
.ids-input:focus, .ids-select:focus { outline: none; border-color: var(--ids-primary); }
.ids-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .ids-field-row { grid-template-columns: 1fr; } }
.ids-checkbox-field label { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; font-weight: 400; cursor: pointer; }
.ids-checkbox-field input { margin-top: .2rem; flex-shrink: 0; }

/* ── Steps ────────────────────────────────────────── */
.ids-steps { display: flex; gap: .5rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.ids-step  { padding: .4rem .9rem; border-radius: 20px; font-size: .82rem; background: #f0f0f0; color: var(--ids-muted); white-space: nowrap; }
.ids-step--active { background: var(--ids-primary); color: #fff; font-weight: 700; }
.ids-step--done   { background: var(--ids-green);   color: #fff; }

/* ── Service Cards ────────────────────────────────── */
.ids-service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin-top: .5rem; }
.ids-service-card { border: 2px solid var(--ids-border); border-radius: var(--ids-radius); padding: 1rem; cursor: pointer; transition: .2s; }
.ids-service-card:hover { border-color: var(--ids-primary); background: #fff8f5; }
.ids-service-card--selected { border-color: var(--ids-primary); background: #fff3ee; }
.ids-service-card h4 { margin: 0 0 .3rem; font-size: 1rem; }
.ids-service-card p  { margin: 0; font-size: .85rem; color: var(--ids-muted); }
.ids-price { font-weight: 700; color: var(--ids-primary); }

/* ── Time Slots ───────────────────────────────────── */
.ids-slots-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.ids-slot-btn   { padding: .4rem .9rem; border: 2px solid var(--ids-border); border-radius: 8px; cursor: pointer; background: var(--ids-white); font-size: .9rem; transition: .2s; }
.ids-slot-btn:hover { border-color: var(--ids-primary); }
.ids-slot-btn--selected { border-color: var(--ids-primary); background: var(--ids-primary); color: #fff; font-weight: 700; }

/* ── Mode Badges ──────────────────────────────────── */
.ids-mode-badge { display: inline-block; padding: .4rem 1rem; border-radius: 20px; font-size: .875rem; font-weight: 600; margin-bottom: .5rem; }
.ids-mode-badge--appointment { background: #fff3cd; color: #856404; }
.ids-mode-badge--on_call     { background: #cfe2ff; color: #084298; }

/* ── Summary & Success ────────────────────────────── */
.ids-summary-box { background: var(--ids-bg); border-radius: 8px; padding: .85rem 1rem; margin-bottom: 1.25rem; font-size: .9rem; line-height: 1.8; }
.ids-success-box { text-align: center; padding: 2.5rem 1rem; }
.ids-success-icon { font-size: 3.5rem; margin-bottom: .5rem; }
.ids-hint { font-size: .85rem; color: var(--ids-muted); margin-top: .75rem; }
.ids-loading { text-align: center; color: var(--ids-muted); padding: 1rem; font-size: .9rem; }

/* ── Werkstatt ────────────────────────────────────── */
.ids-werkstatt { max-width: 680px; margin: 0 auto; }
.ids-wk-step   { animation: ids-fade .25s ease; }
@keyframes ids-fade { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: none; } }