/* ===== ELEMENTER RESERVATION – FRONTEND STYLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.er-form-wrap { --er-primary: #e74c3c; --er-accent: #c0392b; font-family:'Inter',sans-serif; max-width:640px; margin:40px auto; }
.er-form-wrap * { box-sizing:border-box; }

/* Glass card */
.er-form-card { background:var(--er-bg); backdrop-filter:blur(20px); border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.8); }

/* Header */
.er-form-header { background:linear-gradient(135deg, var(--er-primary), var(--er-accent)); padding:36px 40px; text-align:center; }
.er-form-header h2 { color:#fff; margin:0; font-size:26px; font-weight:700; letter-spacing:-0.5px; }
.er-form-header p  { color:rgba(255,255,255,.85); margin:8px 0 0; font-size:15px; }

/* Step progress */
.er-steps { display:flex; justify-content:center; gap:0; padding:24px 40px 0; }
.er-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; position:relative; }
.er-step:not(:last-child)::after { content:''; position:absolute; top:16px; left:calc(50% + 18px); right:calc(-50% + 18px); height:2px; background:#eee; z-index:0; }
.er-step.active::after, .er-step.done::after { background:var(--er-primary); }
.er-step-circle { width:32px; height:32px; border-radius:50%; background:#eee; color:#aaa; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; transition:all .3s; }
.er-step.active .er-step-circle { background:var(--er-primary); color:#fff; box-shadow:0 4px 12px rgba(231,76,60,.35); }
.er-step.done   .er-step-circle { background:#27ae60; color:#fff; }
.er-step-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.6px; color:#aaa; }
.er-step.active .er-step-label { color:var(--er-primary); }

/* Body */
.er-form-body { padding:32px 40px 40px; }
.er-step-panel { display:none; }
.er-step-panel.active { display:block; animation:erFadeIn .3s ease; }
@keyframes erFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* Fields */
.er-field { margin-bottom:20px; }
.er-field label { display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#555; margin-bottom:8px; }
.er-field input, .er-field textarea, .er-field select {
    width:100%; padding:12px 16px; border:2px solid #eee; border-radius:10px;
    font-size:14px; font-family:'Inter',sans-serif; outline:none; transition:border .2s, box-shadow .2s;
    background:#fafafa; color:var(--er-text);
}
.er-field input:focus, .er-field textarea:focus { border-color:var(--er-primary); box-shadow:0 0 0 3px rgba(231,76,60,.1); background:#fff; }
.er-field textarea { resize:vertical; min-height:90px; }
.er-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* Slots */
.er-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.er-slot { padding:10px; border:2px solid #eee; border-radius:10px; text-align:center; cursor:pointer; font-size:13px; font-weight:600; color:#555; transition:all .2s; background:#fafafa; }
.er-slot:hover { border-color:var(--er-primary); color:var(--er-primary); background:#fff5f5; }
.er-slot.selected { border-color:var(--er-primary); background:var(--er-primary); color:#fff; }
.er-slots-loading { text-align:center; color:#aaa; font-size:13px; padding:20px; }
.er-slots-empty { text-align:center; color:#e74c3c; font-size:13px; padding:16px; background:#fff5f5; border-radius:10px; }

/* Summary */
.er-summary { background:linear-gradient(135deg,#f8f9fb,#fff); border-radius:12px; padding:20px; margin-bottom:20px; border:1px solid #eee; }
.er-summary-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#555; margin-bottom:14px; }
.er-summary-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid #f0f0f0; font-size:14px; }
.er-summary-row:last-child { border:none; }
.er-summary-row .er-lbl { color:#888; width:120px; flex-shrink:0; }
.er-summary-row .er-val { color:var(--er-text); font-weight:600; }

/* Nav buttons */
.er-form-nav { display:flex; justify-content:space-between; margin-top:24px; gap:12px; }
.er-btn-next, .er-btn-prev, .er-btn-submit {
    padding:14px 28px; border-radius:10px; font-size:15px; font-weight:700; border:none;
    cursor:pointer; font-family:'Inter',sans-serif; transition:all .25s; display:inline-flex; align-items:center; gap:8px;
}
.er-btn-next, .er-btn-submit { background:linear-gradient(135deg,var(--er-primary),var(--er-accent)); color:#fff; flex:1; justify-content:center; box-shadow:0 4px 15px rgba(231,76,60,.3); }
.er-btn-next:hover, .er-btn-submit:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(231,76,60,.4); }
.er-btn-prev { background:#f0f0f0; color:#555; }
.er-btn-prev:hover { background:#e8e8e8; }
.er-btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* Errors */
.er-errors { background:#fff5f5; border:1px solid #f5c6cb; border-radius:10px; padding:14px 18px; margin-bottom:16px; }
.er-errors p { margin:0; color:#721c24; font-size:13px; }
.er-errors p + p { margin-top:4px; }

/* Success */
.er-success { text-align:center; padding:40px 20px; display:none; }
.er-success-icon { font-size:64px; display:block; margin-bottom:16px; }
.er-success h3 { font-size:22px; font-weight:700; color:var(--er-text); margin:0 0 10px; }
.er-success p { color:var(--er-text); font-size:15px; line-height:1.6; }

@media(max-width:560px){
    .er-form-header, .er-form-body { padding-left:20px; padding-right:20px; }
    .er-row { grid-template-columns:1fr; }
    .er-slots { grid-template-columns:repeat(2,1fr); }
    .er-steps { padding:16px 20px 0; }
}