/* KONTAKT */

/* Project summary (from service page price calculator) */
.project-summary {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--hairline);
  padding: 20px 0;
}

.project-summary-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.project-summary-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  flex-shrink: 0;
}

.project-summary-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.project-summary-item {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

.project-summary-total {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  font-weight: 500;
  margin-left: auto;
}

@media (max-width: 700px) {
  .project-summary-total {
    margin-left: 0;
  }
}

.kontakt-head {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.head-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.head-stack .display {
  max-width: 14ch;
}

.kontakt-body {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}

@media (max-width: 960px) {
  .kontakt-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

/* Info */
.kontakt-info {
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: sticky;
  top: 100px;
}

@media (max-width: 960px) {
  .kontakt-info {
    position: static;
    order: 2;   /* appears after the form on mobile */
  }

  .kontakt-form {
    order: 1;   /* form first on mobile */
  }
}

.info-block h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.info-block p {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--fg);
}

.info-block a {
  color: var(--fg);
  border-bottom: 1px solid transparent;
  transition: all 0.3s var(--ease);
}

.info-block a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.info-social {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-social a {
  font-family: var(--sans);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-muted);
  border-bottom: none;
}

.info-social a:hover {
  color: var(--gold);
}

/* Form */
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 700px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.field-label .num {
  color: var(--gold);
}

.field input,
.field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  color: var(--fg);
  width: 100%;
  outline: none;
  transition: border-color 0.3s var(--ease);
  resize: vertical;
}

.field textarea {
  min-height: 140px;
  font-size: 17px;
  line-height: 1.5;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--fg-dim);
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--gold);
}

/* Chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip > span {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  transition: all 0.3s var(--ease);
}

.chip:hover > span {
  color: var(--fg);
  border-color: var(--fg-muted);
}

.chip input:checked + span {
  color: var(--gold);
  border-color: var(--gold);
}

/* Form foot */
.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .form-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .form-foot .btn {
    justify-content: center;
    width: 100%;
  }
  .form-note {
    max-width: 100%;
  }
  .chip-row {
    gap: 8px;
  }
  .chip > span {
    padding: 8px 14px;
    font-size: 10px;
  }
}

.form-note {
  font-size: 12px;
  color: var(--fg-dim);
  max-width: 32ch;
}

.form-thanks {
  font-family: var(--sans);
  font-size: 20px;
  color: var(--gold);
  font-weight: 300;
}

/* Map */
.map-strip {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

.studio-map {
  width: 100%;
  height: clamp(320px, 40vw, 520px);
  border: 1px solid var(--hairline);
}

.map-label {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 20px;
}

.map-label p {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Leaflet overrides — dark theme */
.leaflet-container {
  background: var(--bg) !important;
  font-family: var(--mono) !important;
}

.leaflet-control-attribution {
  background: rgba(10, 10, 10, 0.75) !important;
  color: var(--fg-dim) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
  border-top: 1px solid var(--hairline) !important;
  padding: 4px 8px !important;
}

.leaflet-control-attribution a {
  color: var(--gold) !important;
}

.leaflet-control-zoom a {
  background: var(--bg-elev) !important;
  color: var(--fg-muted) !important;
  border-color: var(--hairline-strong) !important;
}

.leaflet-control-zoom a:hover {
  background: var(--bg-card) !important;
  color: var(--gold) !important;
}

/* Gold pulse marker */
.map-marker {
  width: 14px !important;
  height: 14px !important;
  background: var(--gold);
  border: 2px solid var(--gold-soft);
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(149, 123, 95, 0.5), 0 0 0 0 rgba(149, 123, 95, 0.4);
  animation: map-pulse 2.4s ease-out infinite;
}

@keyframes map-pulse {
  0%   { box-shadow: 0 0 12px 4px rgba(149, 123, 95, 0.5), 0 0 0 0 rgba(149, 123, 95, 0.4); }
  70%  { box-shadow: 0 0 12px 4px rgba(149, 123, 95, 0.3), 0 0 0 18px rgba(149, 123, 95, 0); }
  100% { box-shadow: 0 0 12px 4px rgba(149, 123, 95, 0.5), 0 0 0 0 rgba(149, 123, 95, 0); }
}

/* Outro */
.outro {
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.outro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.outro-inner .h2 {
  text-wrap: balance;
}

.outro-inner em {
  color: var(--gold);
  font-style: normal;
}

.outro-cite {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* ─── Cart section ─────────────────────────────────────────── */

.cart-section {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0 20px;
}

.cart-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.cart-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.cart-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--hairline-strong);
  padding: 8px 16px;
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cart-add-btn:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* Project list */
.cart-projects {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
}

.cart-proj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}

.cart-proj:last-child {
  border-bottom: none;
}

.cart-proj-info {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex: 1;
  flex-wrap: wrap;
}

.cart-proj-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--fg);
}

.cart-proj-price {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.07em;
  color: var(--gold-soft);
  font-weight: 500;
}

.cart-proj-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.cart-proj-edit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.25s var(--ease);
}

.cart-proj-edit:hover {
  color: var(--gold);
}

.cart-proj-remove {
  background: none;
  border: 1px solid var(--hairline-strong);
  color: var(--fg-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.cart-proj-remove:hover {
  color: #c94040;
  border-color: #c94040;
}

/* Grand total row */
.cart-grand-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 20px 4px;
  border-top: 1px solid var(--hairline);
}

.cart-grand-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.cart-grand-value {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-weight: 500;
}

.cart-grand-plus {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}

@media (max-width: 700px) {
  .cart-hd {
    flex-direction: column;
    align-items: flex-start;
  }

  .cart-proj {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  .cart-proj-actions {
    width: 100%;
    justify-content: space-between;
  }

  .cart-grand-total {
    padding: 14px 16px 4px;
  }
}