/* ═══════════════════════════════════════════════════════════════
   SmartIT Handy-Reparatur · Konfigurator — PREMIUM DARK (v4)
   Glas-Tiefe, Gold-Verläufe, hochwertige Schatten. Responsiv.
   ═══════════════════════════════════════════════════════════════ */

.rp-shell{
  --acc:#facc15; --acc2:#f59e0b; --gold:linear-gradient(135deg,#fde68a 0%,#facc15 45%,#f59e0b 100%);
  --ink:#f6f6f7; --mut:#a1a1aa; --mut2:#71717a;
  --field:#100f12; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --r:18px;
  max-width:1000px; margin:0 auto; padding:0 16px 36px;
  color:var(--ink); box-sizing:border-box; -webkit-font-smoothing:antialiased; font-family:inherit;
  accent-color:#facc15;   /* native Form-Elemente in Gold statt Browser-Blau */
}
.rp-shell *, .rp-shell *::before, .rp-shell *::after{ box-sizing:border-box; }
.rp-shell ::selection{ background:rgba(250,204,21,.32); color:#fff; }

/* ── Premium-Karte: Glas + Verlauf-Hairline + Tiefe ── */
.rp-card{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,rgba(30,30,34,.94),rgba(19,19,22,.94));
  -webkit-backdrop-filter:blur(14px) saturate(120%); backdrop-filter:blur(14px) saturate(120%);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px 30px;
  margin-bottom:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 1px 2px rgba(0,0,0,.4),
    0 30px 70px -38px rgba(0,0,0,.9);
}
/* feiner Gold-Schimmer an der Oberkante */
.rp-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,rgba(250,204,21,.5),transparent); opacity:.6;
}

/* ── Kopfzeile ── */
.rp-headerbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.rp-headerbar h3{ margin:0; font-size:20px; font-weight:900; letter-spacing:-.015em; color:#fff; text-transform:none; }
.rp-card-sub{ color:var(--mut); font-size:13.5px; margin-top:5px; line-height:1.5; }
.rp-pill{
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#1a1205; background:var(--gold);
  padding:9px 16px; border-radius:999px;
  box-shadow:0 10px 24px -8px rgba(250,204,21,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.rp-pill::before{ content:"⚡"; font-size:13px; }

/* ── Geräte-Schnellsuche ── */
.rp-search{ position:relative; margin-bottom:16px; }
.rp-search-ico{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.7; pointer-events:none; filter:grayscale(1) brightness(1.6); }
.rp-search-input{
  width:100%; background:var(--field); border:1px solid var(--line2); color:#fff;
  padding:15px 16px 15px 46px; border-radius:13px; font-size:15px; font-family:inherit; transition:.15s;
}
.rp-search-input::placeholder{ color:#6b7280; }
.rp-search-input:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(250,204,21,.16); }
.rp-search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  background:#16161a; border:1px solid var(--line2); border-radius:14px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85); display:none; max-height:340px; overflow-y:auto;
}
.rp-search-results.show{ display:block; }
.rp-search-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:none; border:none; border-bottom:1px solid var(--line); color:#fff;
  padding:13px 16px; font-size:14px; font-family:inherit; cursor:pointer; text-align:left; transition:.12s;
}
.rp-search-item:last-child{ border-bottom:none; }
.rp-search-item:hover{ background:rgba(250,204,21,.09); }
.rp-search-dev{ font-weight:600; }
.rp-search-go{ font-size:12px; font-weight:800; color:var(--acc); opacity:0; transition:.12s; white-space:nowrap; }
.rp-search-item:hover .rp-search-go{ opacity:1; }
.rp-search-empty{ padding:16px; color:var(--mut); font-size:13px; }
.rp-or{ display:flex; align-items:center; gap:14px; margin:4px 0 18px; color:var(--mut2); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.rp-or span{ flex:none; }
.rp-or::before, .rp-or::after{ content:""; height:1px; background:var(--line); flex:1; }

/* ── 3 nummerierte Schritte ── */
.rp-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; counter-reset:rpstep; }
@media(max-width:760px){ .rp-grid3{ grid-template-columns:1fr; } }
.rp-step{
  position:relative; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18));
  border:1.5px solid var(--line); border-radius:14px; padding:16px 16px 17px; transition:.2s;
}
.rp-step.active{ border-color:rgba(250,204,21,.55); box-shadow:0 0 0 4px rgba(250,204,21,.08), 0 14px 30px -20px rgba(250,204,21,.4); }
.rp-step-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rp-step-label{ display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; font-size:13.5px; flex:1; }
.rp-step-label::before{
  counter-increment:rpstep; content:counter(rpstep);
  width:25px; height:25px; flex:none; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:900;
  background:rgba(255,255,255,.06); color:var(--mut); border:1px solid var(--line2); transition:.2s;
}
.rp-step.active .rp-step-label::before{ background:var(--gold); color:#1a1205; border-color:transparent; box-shadow:0 4px 12px -3px rgba(250,204,21,.6); }
.rp-badge{ font-size:9px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--mut); font-weight:800; letter-spacing:.1em; }
.rp-badge.on{ background:rgba(250,204,21,.14); color:var(--acc); }

.rp-select{
  width:100%; appearance:none; -webkit-appearance:none;
  background:var(--field); border:1px solid var(--line2); color:#fff;
  padding:13px 40px 13px 14px; border-radius:12px; font-size:14.5px; cursor:pointer; transition:.15s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23facc15' stroke-width='2.6' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center;
}
.rp-select:hover:not(:disabled){ border-color:rgba(250,204,21,.45); }
.rp-select:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(250,204,21,.16); }
.rp-select:disabled{ opacity:.4; cursor:not-allowed; }

/* ── Geräte-Kopf ── */
.rp-device{ display:flex; align-items:center; gap:18px; padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:22px; }
.rp-device-img{
  width:68px; height:68px; flex-shrink:0; border-radius:17px; font-size:33px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%,rgba(250,204,21,.22),rgba(250,204,21,.03));
  border:1px solid rgba(250,204,21,.32); box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.rp-device-img img{ width:100%; height:100%; object-fit:contain; border-radius:15px; padding:6px; }
.rp-device-info h2{ margin:0; font-size:22px; font-weight:900; color:#fff; letter-spacing:-.015em; }
.rp-muted{ color:var(--mut); font-size:13px; margin-top:3px; }

/* ── Reparatur-Karten ── */
.rp-services{ display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:14px; }
.rp-service{
  position:relative; background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.2));
  border:1.5px solid var(--line); border-radius:15px; padding:18px 16px 16px; cursor:pointer;
  transition:transform .18s cubic-bezier(.4,0,.2,1), border-color .18s, box-shadow .18s;
}
.rp-service:hover{ transform:translateY(-4px); border-color:rgba(250,204,21,.5); box-shadow:0 18px 36px -22px rgba(250,204,21,.45); }
.rp-service.selected{ border-color:var(--acc); background:linear-gradient(180deg,rgba(250,204,21,.12),rgba(250,204,21,.02)); box-shadow:0 0 0 3px rgba(250,204,21,.12), 0 18px 36px -22px rgba(250,204,21,.5); }
.rp-service.selected::before{
  content:"✓"; position:absolute; top:11px; right:11px; width:23px; height:23px; border-radius:50%;
  background:var(--gold); color:#1a1205; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 8px -2px rgba(250,204,21,.6);
}
/* bunte Emoji entfärben → monochrom/hell, damit nichts blau gegen das Gold/Dark clasht */
.rp-service-icon{ font-size:27px; line-height:1; margin-bottom:12px; filter:grayscale(1) brightness(1.7); opacity:.92; }
.rp-service.selected .rp-service-icon{ filter:grayscale(1) sepia(1) saturate(4) hue-rotate(2deg) brightness(1.02); opacity:1; }
.rp-service-name{ font-size:14px; font-weight:800; color:#fff; line-height:1.3; margin-bottom:10px; min-height:36px; }
.rp-service-price{ font-size:22px; font-weight:900; letter-spacing:-.02em; background:var(--gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#facc15; }
.rp-service-meta{ font-size:11.5px; color:var(--mut); margin-top:6px; }

/* ── Zusammenfassung ── */
.rp-summary{
  position:relative; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:24px; padding:22px 24px;
  background:linear-gradient(135deg,rgba(250,204,21,.16),rgba(250,204,21,.02));
  border:1px solid rgba(250,204,21,.34); border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px -30px rgba(250,204,21,.4);
}
.rp-summary-left{ flex:1; min-width:180px; }
.rp-summary-left>div:first-child{ color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.rp-price-big{ font-size:34px; font-weight:900; letter-spacing:-.02em; line-height:1; background:var(--gold); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#facc15; }

/* ── Buttons ── */
.rp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--gold); color:#1a1205;
  border:none; padding:14px 26px; border-radius:12px; font-size:14.5px; font-weight:800; cursor:pointer;
  text-decoration:none; transition:.16s; box-shadow:0 14px 30px -12px rgba(250,204,21,.7), inset 0 1px 0 rgba(255,255,255,.45);
}
.rp-btn:hover:not(:disabled){ filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(250,204,21,.8); }
.rp-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.rp-btn-ghost{ background:transparent; color:var(--mut); border:1px solid var(--line2); box-shadow:none; }
.rp-btn-ghost:hover:not(:disabled){ color:#fff; border-color:var(--mut); transform:none; box-shadow:none; }

/* ── Auftragsformular ── */
.rp-form-wrap{ max-height:0; overflow:hidden; opacity:0; transition:opacity .35s, max-height .45s ease; }
.rp-form-wrap.show{ max-height:5000px; opacity:1; }
.rp-steps{ display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.rp-tab{ display:flex; align-items:center; gap:10px; flex:1; min-width:140px; padding:12px 15px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.18)); border:1px solid var(--line); }
.rp-tab.on{ border-color:rgba(250,204,21,.45); background:linear-gradient(180deg,rgba(250,204,21,.1),transparent); }
.rp-tab-num{ width:27px; height:27px; border-radius:50%; background:rgba(255,255,255,.07); color:var(--mut); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:13px; flex-shrink:0; }
.rp-tab.on .rp-tab-num{ background:var(--gold); color:#1a1205; }
.rp-tab-label{ font-size:13px; font-weight:700; color:#dbe0e8; }

#rp-order-form h3{ margin:24px 0 12px; font-size:12px; color:var(--acc); letter-spacing:.12em; font-weight:800; }
.rp-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:8px; }
.rp-form-row.cols-2{ grid-template-columns:1fr 1fr; }
.rp-form-row.cols-3{ grid-template-columns:2fr .8fr 1fr 1.6fr; }
@media(max-width:640px){ .rp-form-row, .rp-form-row.cols-2, .rp-form-row.cols-3, .rp-form-row[style]{ grid-template-columns:1fr !important; } }
.rp-field{ display:flex; flex-direction:column; gap:6px; }
.rp-field label{ font-size:11.5px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }
.rp-req{ color:#f87171; }
.rp-input, .rp-textarea{
  width:100%; background:var(--field); border:1px solid var(--line2); color:#fff;
  padding:12px 14px; border-radius:11px; font-size:14.5px; font-family:inherit; transition:.15s;
}
.rp-input::placeholder, .rp-textarea::placeholder{ color:#5b6678; }
.rp-input:focus, .rp-textarea:focus{ outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(250,204,21,.16); }
.rp-textarea{ min-height:100px; resize:vertical; }

/* ── Dropzone / Fotos ── */
.rp-dropzone{ border:2px dashed var(--line2); border-radius:16px; padding:32px 18px; text-align:center; cursor:pointer; transition:.15s; background:rgba(255,255,255,.015); }
.rp-dropzone:hover{ border-color:rgba(250,204,21,.55); background:rgba(250,204,21,.04); }
.rp-dropzone-icon{ font-size:32px; }
.rp-dropzone-text{ color:#e6e9ef; font-size:14px; font-weight:600; margin-top:10px; }
.rp-dropzone-sub{ color:var(--mut); font-size:12px; margin-top:4px; }
.rp-photo-previews{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.rp-photo{ position:relative; width:86px; height:86px; border-radius:12px; overflow:hidden; border:1px solid var(--line2); }
.rp-photo img{ width:100%; height:100%; object-fit:cover; }
.rp-photo button{ position:absolute; top:3px; right:3px; width:22px; height:22px; border:none; border-radius:50%; background:rgba(0,0,0,.72); color:#fff; font-size:15px; line-height:1; cursor:pointer; }
.rp-photo button:hover{ background:#ef4444; }

.rp-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
@media(max-width:520px){ .rp-actions{ flex-direction:column-reverse; } .rp-actions .rp-btn{ width:100%; } }

/* ── Meldungen ── */
.rp-error{ background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.4); color:#fca5a5; padding:13px 16px; border-radius:12px; font-size:13.5px; margin-bottom:8px; }
.rp-success{ text-align:center; padding:26px 10px; }
.rp-success h3{ color:#22c55e; font-size:23px; font-weight:900; text-transform:none; letter-spacing:0; margin-bottom:10px; }
.rp-success p{ color:#dbe0e8; font-size:14px; line-height:1.6; margin:6px 0; }