.zod-astro {
  position: relative;
}

.zod-select,
.zod-form input {
  background: #160f2b;
  color: var(--z-text);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
}

.zod-select {
  min-height: 38px;
  padding: 0 10px;
}

.zod-form-intro {
  text-align: center;
  margin-bottom: 24px;
}

.zod-form-intro h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);
}

.zod-form-intro p,
.zod-hint {
  color: var(--z-muted);
}

.zod-form {
  display: grid;
  gap: 18px;
}

.zod-field {
  display: grid;
  gap: 8px;
}

.zod-field label {
  font-weight: 700;
}

.zod-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 10px 12px;
  font: inherit;
}

.zod-form input::placeholder {
  font-size: .92em;
  transition: font-size .14s ease, opacity .14s ease;
  opacity: .82;
}

.zod-form input:focus::placeholder {
  font-size: .78em;
  opacity: .68;
}

.zod-form input:focus,
.zod-select:focus {
  outline: 0;
  border-color: rgba(219,169,255,.85);
  box-shadow: 0 0 0 4px rgba(219,169,255,.18);
}

.zod-grid {
  display: grid;
  gap: 12px;
}

.zod-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zod-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mobile en horitzontal: evitem desalineacions entre data i hora */
@media (max-height: 520px) and (orientation: landscape) {
  .zod-form .zod-grid.zod-grid-two {
    grid-template-columns: 1fr;
  }
}

.zod-hint {
  margin: 0;
  font-size: .92rem;
}

.zod-hint-compact {
  font-size: .82rem;
  line-height: 1.35;
  opacity: .9;
}

.zod-place-field {
  position: relative;
}

.zod-autocomplete {
  position: fixed;
  z-index: 20;
  display: none;
  max-height: min(280px, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #1c1535;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.36);
}

.zod-autocomplete.is-open {
  display: block;
}

.zod-place-option {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 52px;
  padding: 10px 13px;
  border: 0;
  background: transparent;
  color: var(--z-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.zod-place-main {
  font-weight: 700;
}

.zod-place-detail {
  color: var(--z-muted);
  font-size: .82rem;
  line-height: 1.25;
}

.zod-place-option:hover,
.zod-place-option:focus {
  background: rgba(219,169,255,.14);
}

.zod-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.zod-check input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
}

.zod-check a {
  color: var(--z-accent);
}

.zod-legal-note {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.84);
  font-size: .92rem;
  line-height: 1.5;
}

.zod-legal-note p {
  margin: 0;
}

.zod-legal-note p + p {
  margin-top: 8px;
}

body.zod-modal-open {
  overflow: hidden;
}

.zod-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}

.zod-submit:disabled {
  opacity: .65;
  cursor: progress;
}

.zod-promo-link-row {
  margin: 12px 0 0;
  text-align: center;
}

.zod-promo-link {
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: var(--z-accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zod-promo-link:hover,
.zod-promo-link:focus {
  color: var(--z-text);
}

.zod-alert {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,120,120,.35);
  border-radius: 12px;
  background: rgba(122,30,30,.22);
}

.zod-result {
  margin-top: 18px;
}

.zod-chart {
  overflow: hidden;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.zod-chart:empty {
  display: none;
}

.zod-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.zod-reading {
  color: var(--z-muted);
  line-height: 1.65;
}

.zod-reading h2,
.zod-reading h3 {
  color: var(--z-text);
}

.zod-includes {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.zod-includes h2 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}

.zod-includes ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--z-muted);
}

.zod-loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(900px 500px at 50% 35%, rgba(219,169,255,.16), transparent 55%),
    radial-gradient(900px 600px at 50% 75%, rgba(120,160,255,.12), transparent 60%),
    rgba(10,7,24,.92);
  backdrop-filter: blur(6px);
}

.zod-loading.is-open {
  display: flex;
}

.zod-loading-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.zod-loading-title {
  margin-bottom: 6px;
  font-size: 1.25rem;
  font-weight: 800;
}

.zod-loading-subtitle {
  margin: 0;
  color: var(--z-muted);
}

.zod-floating-symbols {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.zod-float-symbol {
  position: absolute;
  opacity: .85;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  animation: zod-drift var(--dur) linear infinite;
}

.zod-modal[hidden] {
  display: none;
}

.zod-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.zod-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 14, .72);
  backdrop-filter: blur(5px);
}

.zod-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #120f2a;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.zod-promo-dialog {
  max-width: 520px;
}

.zod-promo-form {
  display: grid;
  gap: 12px;
}

.zod-promo-form label {
  font-weight: 700;
}

.zod-promo-form input {
  min-height: 46px;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: #160f2b;
  color: var(--z-text);
  font: inherit;
  padding: 10px 12px;
  text-transform: uppercase;
}

.zod-success {
  padding: 12px 14px;
  border: 1px solid rgba(130,220,170,.35);
  border-radius: 12px;
  background: rgba(30,122,70,.18);
}

.zod-success[hidden] {
  display: none;
}

.zod-modal-header,
.zod-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.zod-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 0;
}

.zod-modal-header h2 {
  flex: 1;
  margin: 0;
  font-size: 1.25rem;
}

.zod-modal-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--z-text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.zod-modal-body {
  overflow-y: auto;
  padding: 20px;
  color: var(--z-muted);
  line-height: 1.62;
}

.zod-modal-body h3 {
  margin: 20px 0 8px;
  color: var(--z-text);
  font-size: 1.05rem;
}

.zod-modal-body h3:first-of-type {
  margin-top: 0;
}

.zod-modal-accept {
  width: auto;
  min-width: 150px;
  border: 0;
}

.zod-modal-download {
  display: inline;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,255,255,.72);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  font-size: .94rem;
  line-height: 1.3;
}

.zod-modal-download:hover,
.zod-modal-download:focus {
  color: rgba(255,255,255,.92);
}

.zod-modal-download-row {
  margin: 16px 0 0;
}

@keyframes zod-drift {
  from { transform: translate3d(var(--x0), var(--y0), 0) rotate(0deg); }
  to { transform: translate3d(var(--x1), var(--y1), 0) rotate(360deg); }
}

@media (max-width: 720px) {
  .zod-grid-two {
    grid-template-columns: 1fr;
  }

  .zod-modal {
    align-items: stretch;
    padding: 12px;
  }

  .zod-modal-dialog {
    max-height: calc(100vh - 24px);
  }

  .zod-modal-footer {
    flex-direction: column;
  }

  .zod-modal-accept {
    width: 100%;
  }

  .zod-modal-download {
    width: auto;
    align-self: flex-start;
  }
}