/* ═══════════════════════════════════════════
   WC Reklamacje – Znicze Fenix palette
   Kolory dopasowane do zniczefenix.pl:
     Ciemny węgiel  #1a1a1a
     Złoto/bursztyn #c8a96e
     Ciepła biel    #faf9f7
     Ciemnoszary    #2d2d2d
     Tekst          #222222
   ═══════════════════════════════════════════ */

:root {
  --wcr-primary:       #1a1a1a;
  --wcr-primary-hover: #2d2d2d;
  --wcr-gold:          #c8a96e;
  --wcr-gold-light:    #f5edde;
  --wcr-gold-dark:     #a8894e;
  --wcr-bg:            #faf9f7;
  --wcr-bg-warm:       #f5f3ef;
  --wcr-white:         #ffffff;
  --wcr-text:          #222222;
  --wcr-muted:         #6b6b6b;
  --wcr-border:        #e2ddd7;
  --wcr-border-dark:   #c9c3bb;
  --wcr-green:         #3a7d5a;
  --wcr-green-pale:    #edf5f0;
  --wcr-red:           #c0392b;
  --wcr-red-pale:      #fdf2f1;
  --wcr-blue:          #2b5797;
  --wcr-blue-pale:     #eef3fb;
  --wcr-amber:         #b5850a;
  --wcr-amber-pale:    #fdf8ec;
  --wcr-radius:        10px;
  --wcr-radius-sm:     7px;
  --wcr-shadow:        0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --wcr-shadow-md:     0 4px 14px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
}

/* ── Wrapper ── */
.wcr-wrap {
  max-width: 720px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--wcr-text);
  line-height: 1.6;
}

/* ── Steps progress ── */
.wcr-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 36px;
  padding: 0 8px;
}
.wcr-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}
.wcr-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--wcr-border);
  z-index: 0;
  transition: background .3s;
}
.wcr-step.done::after { background: var(--wcr-gold); }
.wcr-step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--wcr-white);
  border: 2px solid var(--wcr-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--wcr-muted);
  position: relative;
  z-index: 1;
  transition: all .25s;
  margin-bottom: 7px;
}
.wcr-step.active .wcr-step-dot {
  background: var(--wcr-primary);
  border-color: var(--wcr-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(26,26,26,.1);
}
.wcr-step.done .wcr-step-dot {
  background: var(--wcr-gold);
  border-color: var(--wcr-gold);
  color: #fff;
}
.wcr-step-label {
  font-size: 11px;
  color: var(--wcr-muted);
  font-weight: 500;
  white-space: nowrap;
}
.wcr-step.active .wcr-step-label { color: var(--wcr-primary); font-weight: 700; }
.wcr-step.done .wcr-step-label   { color: var(--wcr-gold-dark); }

/* ── Card ── */
.wcr-card {
  background: var(--wcr-white);
  border: 1px solid var(--wcr-border);
  border-radius: var(--wcr-radius);
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: var(--wcr-shadow);
  transition: box-shadow .2s;
}
.wcr-card:focus-within { box-shadow: var(--wcr-shadow-md); }

.wcr-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wcr-border);
}
.wcr-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--wcr-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wcr-card-icon svg { width: 20px; height: 20px; stroke: var(--wcr-gold-dark); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wcr-card-title    { font-size: 16px; font-weight: 700; color: var(--wcr-text); margin: 0; letter-spacing: -.01em; }
.wcr-card-subtitle { font-size: 13px; color: var(--wcr-muted); margin: 2px 0 0; }

/* ── Form layout ── */
.wcr-row   { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.wcr-row:last-child { margin-bottom: 0; }
.wcr-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.wcr-half  { flex: 1 1 calc(50% - 8px); min-width: 200px; }
.wcr-align-end { justify-content: flex-end; }

/* ── Labels ── */
.wcr-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wcr-req { color: var(--wcr-red); font-size: 14px; line-height: 1; }
.wcr-opt { font-size: 11px; font-weight: 400; color: #999; background: var(--wcr-bg-warm); padding: 1px 7px; border-radius: 20px; border: 1px solid var(--wcr-border); }

/* ── Inputs ── */
.wcr-input, .wcr-select, .wcr-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--wcr-border);
  border-radius: var(--wcr-radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--wcr-text);
  background: var(--wcr-white);
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.wcr-input:hover, .wcr-select:hover, .wcr-textarea:hover { border-color: var(--wcr-border-dark); }
.wcr-input:focus, .wcr-select:focus, .wcr-textarea:focus {
  outline: none;
  border-color: var(--wcr-gold);
  box-shadow: 0 0 0 3px rgba(200,169,110,.15);
}
.wcr-input::placeholder, .wcr-textarea::placeholder { color: #bbb; }
.wcr-textarea { resize: vertical; min-height: 110px; line-height: 1.65; }

.wcr-select-wrap { position: relative; }
.wcr-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--wcr-muted);
  pointer-events: none;
}
.wcr-select-wrap .wcr-select { padding-right: 36px; }

/* ── Category tiles ── */
.wcr-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.wcr-cat-tile { position: relative; cursor: pointer; }
.wcr-cat-tile input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.wcr-cat-tile label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 10px;
  border: 1.5px solid var(--wcr-border);
  border-radius: var(--wcr-radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--wcr-muted);
  text-align: center;
  line-height: 1.35;
  transition: all .15s;
  background: var(--wcr-bg);
  user-select: none;
}
.wcr-cat-tile label:hover {
  border-color: var(--wcr-gold);
  color: var(--wcr-gold-dark);
  background: var(--wcr-gold-light);
}
.wcr-cat-tile input:checked + label {
  border-color: var(--wcr-primary);
  background: var(--wcr-primary);
  color: var(--wcr-gold);
  box-shadow: inset 0 0 0 1px var(--wcr-primary);
}
.wcr-cat-emoji { font-size: 22px; line-height: 1; }

/* ── Char counter ── */
.wcr-textarea-wrap { position: relative; }
.wcr-char-count { position: absolute; bottom: 10px; right: 12px; font-size: 11px; color: #bbb; pointer-events: none; }
.wcr-char-count.warn { color: var(--wcr-amber); }

/* ── Order banner ── */
.wcr-order-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--wcr-gold-light);
  border: 1px solid rgba(200,169,110,.4);
  border-radius: var(--wcr-radius-sm);
  padding: 14px 16px;
  margin-top: 12px;
  animation: wcr-fadein .25s ease;
}
.wcr-order-banner-icon { width: 36px; height: 36px; background: rgba(200,169,110,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.wcr-order-banner strong { font-size: 14px; color: var(--wcr-primary); display: block; }
.wcr-order-banner span   { font-size: 12px; color: var(--wcr-gold-dark); }

/* ── Upload ── */
.wcr-upload-area {
  border: 2px dashed var(--wcr-border);
  border-radius: var(--wcr-radius);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: var(--wcr-bg);
}
.wcr-upload-area:hover, .wcr-upload-area.drag-over {
  border-color: var(--wcr-gold);
  background: var(--wcr-gold-light);
}
.wcr-upload-illustration {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  background: var(--wcr-gold-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wcr-upload-illustration svg { width: 28px; height: 28px; stroke: var(--wcr-gold-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wcr-upload-area h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--wcr-text); }
.wcr-upload-area p  { font-size: 13px; color: var(--wcr-muted); margin: 0; }
.wcr-upload-link { color: var(--wcr-gold-dark); text-decoration: underline; cursor: pointer; background: none; border: none; font: inherit; padding: 0; font-weight: 600; display: inline; }
.wcr-upload-hint { font-size: 12px; color: #bbb; margin-top: 8px !important; }

.wcr-preview-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wcr-preview-item { position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--wcr-border); box-shadow: var(--wcr-shadow); animation: wcr-fadein .2s ease; }
.wcr-preview-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wcr-preview-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,.65); color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 22px; text-align: center; padding: 0; transition: background .15s; }
.wcr-preview-remove:hover { background: var(--wcr-red); }

/* ── Buttons ── */
.wcr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--wcr-radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  border: none;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.wcr-btn-primary {
  background: var(--wcr-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.wcr-btn-primary:hover  { background: var(--wcr-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.22); }
.wcr-btn-primary:active { transform: translateY(0); }
.wcr-btn-primary:disabled { background: #888; box-shadow: none; cursor: not-allowed; transform: none; }

.wcr-btn-outline { background: var(--wcr-white); color: var(--wcr-primary); border: 1.5px solid var(--wcr-primary); }
.wcr-btn-outline:hover { background: var(--wcr-primary); color: #fff; }

.wcr-btn-ghost { background: transparent; color: var(--wcr-muted); border: 1.5px solid var(--wcr-border); }
.wcr-btn-ghost:hover { background: var(--wcr-bg-warm); color: var(--wcr-text); border-color: var(--wcr-border-dark); }

.wcr-spinner { width: 16px; height: 16px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: wcr-spin .7s linear infinite; flex-shrink: 0; }
@keyframes wcr-spin   { to { transform: rotate(360deg); } }
@keyframes wcr-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ── Alerts ── */
.wcr-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--wcr-radius-sm); font-size: 14px; margin-bottom: 16px; animation: wcr-fadein .2s ease; }
.wcr-alert-error   { background: var(--wcr-red-pale);   border: 1px solid #f5c6c2; color: #8b1a13; }
.wcr-alert-info    { background: var(--wcr-blue-pale);  border: 1px solid #b8d0f0; color: #1a3d6e; }
.wcr-alert-success { background: var(--wcr-green-pale); border: 1px solid #aad4bc; color: #215c3b; }
.wcr-alert-icon { font-size: 15px; margin-top: 1px; flex-shrink: 0; }

/* ── Actions bar ── */
.wcr-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.wcr-gdpr { font-size: 12px; color: var(--wcr-muted); margin: 0; display: flex; align-items: center; gap: 5px; }
.wcr-gdpr svg { width: 13px; height: 13px; stroke: #aaa; fill: none; stroke-width: 2; flex-shrink: 0; }
.wcr-gdpr a { color: var(--wcr-gold-dark); text-decoration: none; font-weight: 600; }
.wcr-gdpr a:hover { text-decoration: underline; }

/* ── Success screen ── */
.wcr-success { text-align: center; padding: 56px 32px 48px; animation: wcr-fadein .4s ease; }
.wcr-success-anim {
  width: 84px; height: 84px;
  background: linear-gradient(135deg, var(--wcr-gold-light), #efe0c0);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  animation: wcr-pop .5s cubic-bezier(.34,1.56,.64,1) .1s both;
  border: 2px solid rgba(200,169,110,.3);
}
.wcr-success-anim svg { width: 36px; height: 36px; stroke: var(--wcr-gold-dark); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@keyframes wcr-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wcr-success h3 { font-size: 24px; font-weight: 700; margin: 0 0 12px; color: var(--wcr-text); letter-spacing: -.02em; }
.wcr-success-num { display: inline-block; background: var(--wcr-primary); color: var(--wcr-gold); font-size: 18px; font-weight: 700; letter-spacing: .08em; padding: 10px 24px; border-radius: 8px; margin: 0 0 16px; font-family: monospace; }
.wcr-success-msg { color: var(--wcr-muted); font-size: 15px; margin: 0; max-width: 380px; display: inline-block; line-height: 1.6; }

/* ── Status page ── */
.wcr-status-hero { text-align: center; margin-bottom: 32px; }
.wcr-status-hero-icon { width: 68px; height: 68px; background: var(--wcr-primary); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.wcr-status-hero-icon svg { width: 32px; height: 32px; stroke: var(--wcr-gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wcr-status-hero h2 { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; }
.wcr-status-hero p  { color: var(--wcr-muted); font-size: 15px; margin: 0; }

.wcr-status-card { background: var(--wcr-white); border: 1px solid var(--wcr-border); border-radius: var(--wcr-radius); overflow: hidden; box-shadow: var(--wcr-shadow-md); animation: wcr-fadein .3s ease; }

.wcr-status-card-header {
  padding: 24px 28px;
  background: var(--wcr-primary);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 3px solid var(--wcr-gold);
}
.wcr-status-card-id  { font-size: 20px; font-weight: 700; color: #fff; font-family: monospace; letter-spacing: .04em; }
.wcr-status-card-cat { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }

.wcr-status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.wcr-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-nowa       { background: #74b9ff; }
.dot-w-toku     { background: var(--wcr-gold); }
.dot-rozwiazana { background: #55efc4; }
.dot-odrzucona  { background: #ff7675; }

/* Timeline */
.wcr-timeline { display: flex; padding: 22px 28px; border-bottom: 1px solid var(--wcr-border); background: var(--wcr-bg-warm); }
.wcr-tl-step { flex: 1; position: relative; text-align: center; }
.wcr-tl-step:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--wcr-border); z-index: 0; transition: background .4s; }
.wcr-tl-step.done::after { background: var(--wcr-gold); }
.wcr-tl-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--wcr-white); border: 2px solid var(--wcr-border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--wcr-muted); margin: 0 auto 8px; position: relative; z-index: 1; transition: all .25s; }
.wcr-tl-step.done .wcr-tl-dot   { background: var(--wcr-gold); border-color: var(--wcr-gold); color: #fff; }
.wcr-tl-step.active .wcr-tl-dot { background: var(--wcr-primary); border-color: var(--wcr-primary); color: var(--wcr-gold); box-shadow: 0 0 0 4px rgba(26,26,26,.1); }
.wcr-tl-lbl { font-size: 11px; color: var(--wcr-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.wcr-tl-step.done .wcr-tl-lbl, .wcr-tl-step.active .wcr-tl-lbl { color: var(--wcr-primary); }

/* Status body */
.wcr-status-body { padding: 0 28px; }
.wcr-status-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--wcr-border); }
.wcr-meta-lbl  { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--wcr-muted); font-weight: 700; margin-bottom: 5px; }
.wcr-meta-val  { font-size: 14px; font-weight: 700; color: var(--wcr-text); }
.wcr-status-section-title { font-size: 11px; font-weight: 700; color: var(--wcr-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.wcr-status-desc { padding: 20px 0; border-bottom: 1px solid var(--wcr-border); }
.wcr-status-desc p { font-size: 14px; color: #444; line-height: 1.7; background: var(--wcr-bg-warm); padding: 14px 16px; border-radius: var(--wcr-radius-sm); margin: 8px 0 0; border-left: 3px solid var(--wcr-border-dark); }
.wcr-status-response { padding: 20px 0; border-bottom: 1px solid var(--wcr-border); }
.wcr-response-box { background: var(--wcr-green-pale); border-left: 3px solid var(--wcr-green); border-radius: 0 var(--wcr-radius-sm) var(--wcr-radius-sm) 0; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: #1a4a2e; margin-top: 8px; }
.wcr-status-photos { padding: 20px 0; }
.wcr-status-footer { padding: 20px 28px; text-align: center; border-top: 1px solid var(--wcr-border); background: var(--wcr-bg-warm); }
.wcr-status-footer p { font-size: 13px; color: var(--wcr-muted); margin: 10px 0 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .wcr-card { padding: 20px 18px; }
  .wcr-half { flex: 1 1 100%; min-width: 0; }
  .wcr-categories { grid-template-columns: repeat(2, 1fr); }
  .wcr-actions { flex-direction: column-reverse; align-items: stretch; }
  .wcr-btn-primary { width: 100%; justify-content: center; }
  .wcr-step-label { display: none; }
  .wcr-status-meta { grid-template-columns: 1fr 1fr; }
  .wcr-status-card-header { flex-direction: column; }
  .wcr-success { padding: 36px 20px 32px; }
}