:root {
  --orange-1:#FFA500;
  --orange-2:#FF8C00;
  --orange-3:#8a4c00;
  --cream:#DEB887;
  --text:#1f2937;
  --muted:#636b74;
  --border:#e9e9e9;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --green:#16a34a;
}

/* ====== FORMULARZ DODAWANIA (layout) ====== */
.add-dog-wrap {
  max-width:1200px;
  margin:28px auto;
  padding:0 16px;
  --paw-color:var(--orange-3);
}

.add-dog-layout {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(380px,1.4fr);
  gap:24px;
  align-items:flex-start;
  position:relative;
  transition:grid-template-columns .25s ease;
}

.add-dog-card {
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
  font-size:0.8rem;
}

@media (max-width:1024px) {
  .add-dog-layout {
    grid-template-columns:1fr;
  }
}

/* ====== HERO ====== */
.add-dog-head {
  position:relative;
  padding:16px 20px;
  padding-right:20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,255,255,0.9) 0, rgba(255,255,255,0) 50%),
    linear-gradient(135deg,#fff7ed,#fed7aa);
  border-bottom:1px solid rgba(0,0,0,0.04);
  overflow:hidden;
}
.add-dog-head-inner {
  position:relative;
  z-index:1;
}
.add-dog-head-text h2 {
  margin:0;
  font-size:1.25rem;
  color:var(--text);
  font-weight:700;
}
.add-dog-head-text .sub {
  margin:4px 0 0;
  color:#4b5563;
  font-size:0.8rem;
}

/* Łapka */
.add-dog-head-paw {
  position:absolute;
  right:-30px;
  top:-15px;
  width:120px;
  height:auto;
  opacity:0.08;
  transform:rotate(30deg);
  transform-origin:center;
  pointer-events:none;
}
.add-dog-head-paw g,
.add-dog-head-paw path {
  fill:var(--paw-color);
}

@media (max-width:560px) {
  .add-dog-head {
    padding:14px 16px;
  }
  .add-dog-head-paw {
    display:none;
  }
}

/* ====== BODY ====== */
.add-dog-body {
  padding:16px 18px;
}
.error {
  color:#b42318;
  background:rgba(180,35,24,.08);
  border-left:5px solid #b42318;
  padding:10px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:0.8rem;
}
.success {
  color:#1f7a34;
  background:rgba(31,122,52,.08);
  border-left:5px solid #1f7a34;
  padding:10px;
  border-radius:10px;
  margin-bottom:12px;
  font-size:0.8rem;
}
.add-dog-body form {
  max-width:none !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  margin:0;
}

.form-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-items:start;
}
.form-main {
  min-width:0;
}
.form-section {
  margin-bottom:20px;
}
.form-section h3 {
  font-size:0.95rem;
  color:var(--orange-2);
  margin-bottom:8px;
  border-bottom:1px solid var(--border);
  padding-bottom:3px;
}
.form-main .row {
  margin-bottom:10px;
  display:grid;
  gap:6px;
}
.form-main .grid-2 {
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.form-main .grid-3 {
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}

/* etykiety */
.add-dog-card label {
  font-weight:500;
  color:var(--text);
  font-size:0.8rem;
}
.req {
  color:#b42318;
}

/* ====== INPUTY ====== */
input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  width:100%;
  padding:10px;
  border-radius:10px;
  border:2px solid #d4af37;
  background:#fff;
  font-size:0.95rem;
  line-height:1.3;
  color:var(--text);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.add-dog-card input[type="text"],
.add-dog-card input[type="number"],
.add-dog-card input[type="date"],
.add-dog-card select,
.add-dog-card textarea {
  padding:7px 8px;
  font-size:0.8rem;
}

input[type="range"] {
  width:100%;
  margin:8px 0;
}
output {
  display:block;
  text-align:center;
  font-weight:600;
  color:var(--orange-2);
  font-size:0.8rem;
}
input:focus,
select:focus,
textarea:focus {
  outline:none;
  border-color:var(--orange-2);
  box-shadow:0 0 0 4px rgba(255,140,0,.12);
}
textarea {
  resize:vertical;
  min-height:70px;
}
.radio-group {
  display:flex;
  gap:12px;
}
.radio-group label {
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  font-size:0.8rem;
}

/* ====== NOWY SEGMENTOWY PRZEŁĄCZNIK (DIVY) ====== */
.seg-switch {
  position:relative;
  display:inline-flex;
  align-items:stretch;
  justify-content:space-between;
  width:100%;
  border-radius:999px;
  border:1px solid rgba(249,115,22,0.30);
  background:linear-gradient(135deg,#fff7ed,#fffbeb);
  padding:2px;
  box-shadow:0 1px 3px rgba(15,23,42,0.08);
}

.seg-switch-option {
  position:relative;
  flex:1 1 0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.80);
  padding:6px 12px;
  font-weight:500;
  font-size:0.88rem;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.1;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .07s ease;
}

.seg-switch-option + .seg-switch-option {
  margin-left:2px;
}

.seg-switch-option--active {
  color:#ffffff;
  background:linear-gradient(135deg,var(--orange-1),var(--orange-2));
  box-shadow:
    0 0 0 1px rgba(249,115,22,0.4),
    0 3px 8px rgba(15,23,42,0.18);
}

.seg-switch-option:hover {
  color:#374151;
}

.seg-switch-option:active {
  transform:translateY(0.5px);
}

/* ====== IKONKI PŁCI (♂ / ♀) ====== */
.seg-switch-option .sex-icon {
  margin-right:4px;
  font-size:1.1rem;
  font-weight:700;
  line-height:1;
}

.seg-switch-option .sex-label {
  font-size:0.85rem;
}

/* kolory niezależne od stanu aktywności */
.sex-icon--male {
  color:#2563eb;
}

.sex-icon--female {
  color:#ec4899;
}

.seg-switch:focus-within {
  outline:none;
  border-color:var(--orange-2);
  box-shadow:
    0 0 0 1px rgba(255,140,0,.35),
    0 0 0 4px rgba(255,140,0,.10);
}

/* ====== SLOTS (zdjęcia) ====== */
.form-aside label {
  display:block;
  font-weight:600;
  margin-bottom:6px;
  color:var(--text);
  font-size:0.8rem;
}
.slots {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.slot {
  position:relative;
  border:2px dashed #d4af37;
  border-radius:14px;
  background:#fff;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
}
.slot:hover {
  border-color:var(--orange-2);
  background:#fffef7;
}
.slot.has-image {
  border-style:solid;
}
.slot .plus {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:#47505a;
  font-size:0.78rem;
}
.slot .plus svg {
  width:26px;
  height:26px;
}
.slot .preview {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}
.slot .remove {
  position:absolute;
  top:6px;
  right:6px;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:0;
  background:#fff;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.slot .remove svg {
  width:14px;
  height:14px;
}
.slot .badge {
  position:absolute;
  left:6px;
  bottom:6px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border-radius:8px;
  padding:2px 6px;
  font-size:.68rem;
}

/* ====== PRZYCISKI ====== */
.form-actions {
  margin-top:14px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}
.btn-primary,
.btn-secondary {
  display:inline-block;
  text-decoration:none;
  cursor:pointer;
  padding:7px 10px;
  border-radius:10px;
  border:0;
  font-weight:600;
  font-size:0.82rem;
}
.btn-primary {
  color:#fff;
  background:linear-gradient(135deg,var(--orange-1),var(--orange-2));
  box-shadow:var(--shadow);
}
.btn-primary:not(:disabled):hover {
  filter:brightness(1.03);
  box-shadow:0 10px 26px rgba(255,165,0,.22);
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background:#d9d9d9;
  color:#777;
  box-shadow:none;
  cursor:not-allowed;
}
.btn-secondary:disabled,
.btn-secondary[disabled] {
  background:#e3e3e3;
  color:#777;
  box-shadow:none;
  cursor:not-allowed;
}
.btn-secondary {
  color:var(--text);
  background:#f0f0f0;
  border:1px solid var(--border);
}
.btn-secondary:hover {
  background:#e8e8e8;
}

/* Pasek postępu */
.form-progress {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:6px;
  font-size:0.78rem;
}
.progress-step {
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--muted);
  user-select:none;
}
.progress-step span {
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1.5px solid #d4af37;
  font-weight:600;
  font-size:0.75rem;
}
.progress-step[data-state="current"] span {
  background:linear-gradient(135deg,var(--orange-2),var(--orange-1));
  color:#fff;
  border-color:transparent;
}
.progress-step[data-state="done"] span {
  background:var(--green);
  color:#fff;
  border-color:transparent;
}
.progress-step em {
  font-style:normal;
  font-weight:500;
  color:var(--text);
}
.form-progress-hint {
  margin:0 0 12px;
  font-size:0.78rem;
  color:var(--muted);
}

/* ====== RESPONSYWNOŚĆ ====== */
@media (max-width:1050px) {
  .form-grid {
    grid-template-columns:1fr;
  }
  .slots {
    grid-template-columns:repeat(3,1fr);
  }
}
@media (max-width:560px) {
  .slots {
    grid-template-columns:repeat(3,1fr);
  }
  .form-main .grid-2,
  .form-main .grid-3 {
    grid-template-columns:1fr;
  }
}

/* ====== SUGESTIE / GATUNEK / MIEJSCOWOŚĆ ====== */
.species-input {
  position:relative;
}
.suggestions {
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background:#fff;
  border:1px solid var(--border);
  max-height:200px;
  overflow-y:auto;
  z-index:10;
  box-shadow:var(--shadow);
  border-radius:10px;
}
.suggestions div {
  padding:8px 12px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  font-size:0.88rem;
}
.suggestions div:last-child {
  border-bottom:none;
}
.suggestions div:hover {
  background:#f0f0f0;
}

/* miejscowość */
.location-row .location-input-wrap {
  position:relative;
}
.suggestions-location {
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  width:100%;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  max-height:220px;
  overflow-y:auto;
  padding:4px 0;
  z-index:30;
}
.suggestion-location-item {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:0.9rem;
  white-space:nowrap;
}
.suggestion-location-item:not(:last-child) {
  border-bottom:1px solid #f2f2f2;
}
.suggestion-location-item .suggestion-main {
  font-weight:600;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
}
.suggestion-location-item .suggestion-sub {
  font-size:0.8rem;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
}
.suggestion-location-item:hover,
.suggestion-location-item:focus-visible {
  background:#fffaf3;
}

.input-group {
  display:flex;
}
.input-group input {
  border-radius:10px 0 0 10px;
  border-right:none;
}
.btn-category {
  border-radius:0 10px 10px 0;
  border:2px solid #d4af37;
  background:linear-gradient(135deg,#f5f5dc,#DEB887);
  color:#1f2937;
  font-weight:600;
  padding:4px 6px;
  cursor:pointer;
  transition:background .18s ease, box-shadow .18s ease;
  white-space:nowrap;
  font-size:0.66rem;
}
.btn-category:hover {
  background:linear-gradient(135deg,#DEB887,#f5f5dc);
  box-shadow:0 0 0 4px rgba(255,140,0,.12);
}

/* podpowiedzi pod miejscowością */
.field-hint {
  margin: 0 0 4px 0;
  font-size:0.6rem;
  color:var(--muted);
}
.field-red {
  color:#b42318;
}
.field-error {
  margin:4px 0 0;
  font-size:0.8rem;
  color:#b42318;
  display:none;
}
.small-hint {
  font-size:0.62rem;
  color:var(--muted);
}

/* ikonka help / trigger dymków */
.help-icon,
.field-tooltip-trigger {
  position: relative;      /* NOWE – pozwala użyć top */
  top: -5px;               /* podnosi kółko o 5px do góry */

  margin-left:2px;
  width:12px;
  height:12px;
  min-width:10px;
  min-height:10px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--orange-1),var(--orange-2));
  font-size:0.65rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,0.28);
}

.help-icon:hover,
.field-tooltip-trigger:hover {
  filter:brightness(1.05);
}
.help-icon:focus-visible,
.field-tooltip-trigger:focus-visible {
  outline:none;
  box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,140,0,.75);
}


/* dymek / chmurka z opisem pola */
.field-tooltip {
  position:absolute;
  max-width:320px;
  padding:8px 10px;
  border-radius:12px;
  background:#111827;
  color:#f9fafb;
  font-size:0.72rem;
  line-height:1.4;
  box-shadow:0 10px 30px rgba(15,23,42,0.35);
  z-index:1400;
  pointer-events:none;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .12s ease-out, transform .12s ease-out;
}
.field-tooltip--visible {
  opacity:1;
  transform:translateY(0);
}
.field-tooltip strong {
  font-weight:600;
}

/* disabled */
.input-disabled {
  background:#f3f4f6;
  cursor:not-allowed;
}

/* ====== TOŻSAMOŚĆ OGŁOSZENIA ====== */
.messages-identity {
  margin-bottom:14px;
}
.messages-identity-inner {
  padding:8px 10px;
  border-radius:12px;
  border:1px dashed #d4af37;
  background:#fffaf3;
  font-size:0.8rem;
}
.messages-identity-label {
  font-size:0.78rem;
  font-weight:600;
  margin-bottom:6px;
  color:var(--text);
}
.messages-identity-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.identity-chip {
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:0.78rem;
}
.identity-chip--org {
  background:#f9fafb;
}
.identity-chip--active {
  border-color:var(--orange-2);
  box-shadow:0 0 0 2px rgba(255,140,0,.25);
}
.identity-avatar {
  width:24px;
  height:24px;
  border-radius:50%;
  background:#f97316;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.8rem;
}
.identity-chip-text {
  display:flex;
  flex-direction:column;
}
.identity-chip-label-main {
  font-weight:600;
  line-height:1.1;
}
.identity-chip-label-sub {
  font-size:0.72rem;
  color:var(--muted);
}