/* Request dialog – opens from "Chci cenu" on the public page and asks for an e-mail.
   Sits in the dialog shell (dialog.css): <dialog class="dlg"> > .dlg__panel.rq
   .rq            visual on the left (power number + cropped unit), form on the right
   .rq__step      one of two steps: the form, then the thank-you
   On tablets it turns into one column with a photo strip on top; on phones it fills the screen. */

.rq {
  --rq-pad: var(--space-7);
  --dlg-w: 880px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
}

/* Visual: the chosen power number and the unit, both cut by the panel edges */
.rq__visual {
  --photo-w: 180%;
  --photo-left: 2%;
  --photo-top: 14%;
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: linear-gradient(170deg, var(--mist) 0%, #e3e6ea 100%);
  border-right: 1px solid var(--line-strong);
}

.rq__kw {
  position: absolute;
  left: calc(var(--rq-pad) - 0.06em);
  bottom: -0.2em;
  z-index: 0;
  margin: 0;
  font-size: clamp(9rem, 6rem + 6vw, 13rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.07em;
  color: color-mix(in srgb, var(--fg) 12%, transparent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
  opacity: 0;
  transform: translateY(0.12em);
  transition:
    opacity var(--dur-base) var(--ease-exit),
    transform var(--dur-base) var(--ease-exit);
}

.rq__photo {
  position: absolute;
  z-index: 1;
  left: var(--photo-left);
  top: var(--photo-top);
  width: var(--photo-w);
  max-width: none;
  height: auto;
  transform: scale(1.04);
  transform-origin: 30% 30%;
  transition: transform var(--dur-base) var(--ease-exit);
}

.dlg.is-open .rq__kw {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-slow) var(--ease-out) 90ms,
    transform var(--dur-slower) var(--ease-emphasis) 90ms;
}

.dlg.is-open .rq__photo {
  transform: none;
  transition: transform var(--dur-cinematic) var(--ease-emphasis);
}

/* Content */
.rq__body {
  display: grid;
  padding: var(--rq-pad);
  padding-top: calc(var(--rq-pad) + var(--space-2));
}

.rq__step {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.rq__step[hidden] {
  display: none;
}

.rq__step:focus {
  outline: none;
}

.rq__step--sent {
  align-content: center;
  animation: rq-step-in var(--dur-slow) var(--ease-emphasis);
}

@keyframes rq-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.rq__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--fg-muted);
}

.rq__kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led-500);
  box-shadow: 0 0 0 3px rgb(49 187 238 / 0.2);
}

.rq__kicker:empty {
  display: none;
}

.rq__title {
  margin: 0;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.rq__lead {
  margin: 0;
  color: var(--fg-muted);
}

.rq__lead strong {
  color: var(--fg);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rq__form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.rq__form .btn {
  width: 100%;
}

.rq__fine {
  margin: 0;
  font-size: var(--text-small);
  color: var(--fg-muted);
}

/* Server error, shown above the button */
.rq__fail {
  margin: 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--error) 8%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 25%, transparent);
  color: var(--error);
  font-size: var(--text-small);
  font-weight: 500;
}

.rq__fail[hidden] {
  display: none;
}

/* Spam trap: invisible to people, bots fill it in */
.rq__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rq__check {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(49 187 238 / 0.14);
  color: var(--led-600);
  box-shadow: 0 0 0 6px rgb(49 187 238 / 0.06);
}

.rq__check svg {
  width: 26px;
  height: 26px;
}

.rq__step--sent .btn {
  justify-self: start;
  margin-top: var(--space-2);
}

/* Tablets and narrow windows: one column, centered, with a light photo strip on top.
   The strip shows the perforated side (set by the <picture> source) instead of the dark glass front. */
@media (max-width: 860px) {
  .rq {
    --dlg-w: 520px;
    grid-template-columns: 1fr;
  }

  .rq__visual {
    --photo-w: 118%;
    --photo-left: 12%;
    --photo-top: 16%;
    min-height: 0;
    height: 240px;
    border-right: 0;
    border-bottom: 1px solid var(--line-strong);
  }

  .rq__kw {
    font-size: 10rem;
  }

  /* The close button sits on the photo strip */
  .rq .dlg__close {
    background: #ffffff;
    color: var(--fg);
    box-shadow: 0 0 0 1px rgb(22 24 27 / 0.06), 0 6px 16px -6px rgb(22 24 27 / 0.35);
  }

  .rq .dlg__close:hover {
    background: #ffffff;
  }
}

/* Phones: the shell fills the screen */
@media (max-width: 560px) {
  .rq {
    --rq-pad: var(--space-5);
    grid-template-rows: auto 1fr;
  }

  .rq__visual {
    height: clamp(200px, 34dvh, 300px);
  }

  .rq__kw {
    font-size: clamp(8rem, 40vw, 11rem);
  }

  .rq__body {
    padding-top: var(--space-6);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  }

}

/* Company and IČO side by side; stacked on phones */
.rq__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-3);
  /* an error under one field must not stretch the other one */
  align-items: start;
}
@media (max-width: 560px) {
  .rq__row {
    grid-template-columns: 1fr;
  }
}