:root {
  --clr-bkg-main: hsl(220 30% 10%);
  --clr-txt-main: hsl(40 10% 95%);
  --clr-txt-muted: hsl(220 10% 70%);
  --clr-acc: hsl(200 80% 55%);
  --clr-acc-hover: hsl(200 80% 65%);
  --clr-bdr: hsl(220 20% 30%);
  --clr-bkg-layer: hsl(220 10% 100% / 0.05);

  --clr-header: var(--clr-bkg-main);
  --clr-footer: hsl(220 25% 15%);

  --clr-success: hsl(140 60% 45%);
  --clr-error: hsl(0 70% 55%);
  --clr-warning: hsl(40 80% 55%);
  --clr-info: hsl(200 80% 50%);

  --icn-success: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik05IDEyLjc1IDExLjI1IDE1IDE1IDkuNzVNMjEgMTJhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBaIiAvPgo8L3N2Zz4K");
  --icn-error: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiA5djMuNzVtLTkuMzAzIDMuMzc2Yy0uODY2IDEuNS4yMTcgMy4zNzQgMS45NDggMy4zNzRoMTQuNzFjMS43MyAwIDIuODEzLTEuODc0IDEuOTQ4LTMuMzc0TDEzLjk0OSAzLjM3OGMtLjg2Ni0xLjUtMy4wMzItMS41LTMuODk4IDBMMi42OTcgMTYuMTI2Wk0xMiAxNS43NWguMDA3di4wMDhIMTJ2LS4wMDhaIiAvPgo8L3N2Zz4K");
  --icn-warning: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xMiA5djMuNzVtOS0uNzVhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBabS05IDMuNzVoLjAwOHYuMDA4SDEydi0uMDA4WiIgLz4KPC9zdmc+Cg==");
  --icn-info: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iY3VycmVudENvbG9yIj4KICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Im0xMS4yNSAxMS4yNS4wNDEtLjAyYS43NS43NSAwIDAgMSAxLjA2My44NTJsLS43MDggMi44MzZhLjc1Ljc1IDAgMCAwIDEuMDYzLjg1M2wuMDQxLS4wMjFNMjEgMTJhOSA5IDAgMSAxLTE4IDAgOSA5IDAgMCAxIDE4IDBabS05LTMuNzVoLjAwOHYuMDA4SDEyVjguMjVaIiAvPgo8L3N2Zz4K");

  --scl-step: 1.618;
  --scl-hstep: round(pow(var(--scl-step), 0.5), 0.001); /* 1.272 */
  --scl-qstep: round(pow(var(--scl-step), 0.25), 0.001); /* 1.128 */

  /* Outer Spacing */
  /* Scaling factor: 1.618 */
  --sp-abs-3xs: calc(round(pow(var(--scl-step), -4), 0.001) * 1rem);
  /* 0.146rem */
  --sp-abs-2xs: calc(round(pow(var(--scl-step), -3), 0.001) * 1rem);
  /* 0.236rem */
  --sp-abs-xs: calc(round(pow(var(--scl-step), -2), 0.001) * 1rem);
  /* 0.382rem */
  --sp-abs-s: calc(round(pow(var(--scl-step), -1), 0.001) * 1rem);
  /* 0.618rem */
  --sp-abs-m: calc(round(pow(var(--scl-step), 0), 0.001) * 1rem);
  /* 1rem */
  --sp-abs-l: calc(round(pow(var(--scl-step), 1), 0.001) * 1rem);
  /* 1.618rem */
  --sp-abs-xl: calc(round(pow(var(--scl-step), 2), 0.001) * 1rem);
  /* 2.618rem */
  --sp-abs-2xl: calc(round(pow(var(--scl-step), 3), 0.001) * 1rem);
  /* 4.236rem */
  --sp-abs-3xl: calc(round(pow(var(--scl-step), 4), 0.001) * 1rem);
  /* 6.854rem */

  /* Inner Spacing */
  /* Scaling factor: 1.272 */
  --sp-rel-3xs: calc(round(pow(var(--scl-hstep), -4), 0.001) * 1em);
  /* 0.382em */
  --sp-rel-2xs: calc(round(pow(var(--scl-hstep), -3), 0.001) * 1em);
  /* 0.486em */
  --sp-rel-xs: calc(round(pow(var(--scl-hstep), -2), 0.001) * 1em);
  /* 0.618em */
  --sp-rel-s: calc(round(pow(var(--scl-hstep), -1), 0.001) * 1em);
  /* 0.786em */
  --sp-rel-m: calc(round(pow(var(--scl-hstep), 0), 0.001) * 1em);
  /* 1em */
  --sp-rel-l: calc(round(pow(var(--scl-hstep), 1), 0.001) * 1em);
  /* 1.272em */
  --sp-rel-xl: calc(round(pow(var(--scl-hstep), 2), 0.001) * 1em);
  /* 1.618em */
  --sp-rel-2xl: calc(round(pow(var(--scl-hstep), 3), 0.001) * 1em);
  /* 2.058em */
  --sp-rel-3xl: calc(round(pow(var(--scl-hstep), 4), 0.001) * 1em);
  /* 2.618em */

  /* Border radius */
  --br-xs: var(--sp-abs-2xs); /* 0.236rem */
  --br-s: var(--sp-abs-xs); /* 0.382rem */
  --br-m: var(--sp-abs-s); /* 0.618rem */
  --br-l: var(--sp-abs-m); /* 1rem */
  --br-xl: var(--sp-abs-l); /* 1.618rem */
  --br-50: 50%;
  --br-round: 100vmax;
}

:focus-visible {
  outline: 2px solid var(--clr-acc);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Accessibility: skip-to-content link */
.skip-link {
  position: absolute;
  top: var(--sp-abs-m);
  left: var(--sp-abs-m);
  z-index: 9999;
  padding: var(--sp-rel-xs) var(--sp-rel-xl);
  border-radius: var(--br-s);
  background: var(--clr-acc);
  color: var(--clr-bkg-main);
  font-weight: 600;
  text-decoration: none;
  translate: 0 calc(-100% - var(--sp-abs-m));
  transition: 0.25s ease-out;

  &:focus-visible {
    translate: 0;
  }
}

body {
  isolation: isolate;
  min-block-size: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--clr-bkg-main);
  color: var(--clr-txt-main);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  line-height: 1.6;
  accent-color: var(--clr-acc);
}

#header {
  position: sticky;
  top: 0;
  z-index: 1;
  inline-size: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--clr-header);
  border-bottom: 2px solid var(--clr-bdr);
}

#footer {
  inline-size: 100%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background: var(--clr-footer);
}

#main {
  inline-size: 80%;
  min-inline-size: min(600px, calc(100% - 2rem));
  max-inline-size: 1200px;
  margin-block: 3rem;
  margin-inline: auto;
}

h1 {
  margin-block: var(--sp-rel-xs);
  line-height: 1.1;
  text-wrap: balance;
}

h2 {
  margin-block: var(--sp-rel-s);
  line-height: 1.2;
  text-wrap: balance;
}

h3 {
  margin-block: var(--sp-rel-m);
  line-height: 1.2;
  text-wrap: balance;
}

h4 {
  margin-block: var(--sp-rel-l);
  line-height: 1.4;
}

h5 {
  margin-block: var(--sp-rel-xl);
  line-height: 1.6;
}

h6 {
  margin-block: var(--sp-rel-2xl);
  line-height: 1.8;
}

p {
  margin-block: var(--sp-rel-m);
  text-wrap: pretty;
  hyphens: auto;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-skip-ink: all;
  cursor: pointer;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

u {
  text-decoration: underline;
  text-decoration-skip-ink: all;
}

:is(ul, ol) {
  margin-block: var(--sp-rel-m);
  padding-inline-start: 3ch;
}

:is(ul, ol) :is(ul, ol) {
  margin-block: 0;
}

nav :is(menu, ul) {
  list-style: none;
  display: flex;
  padding: 0;

  li {
    padding: var(--sp-rel-xs) var(--sp-rel-xl);

    &:hover {
      background: var(--clr-bkg-layer);
    }
  }
}

:is(img, video, svg, canvas, picture) {
  max-inline-size: 100%;
  block-size: auto;
  display: inline-block;
  font-style: italic;
  vertical-align: middle;
  shape-margin: 1rem;
}

input,
input[type="file"]::file-selector-button,
button,
select,
textarea,
.button,
.button-secondary {
  outline-offset: 2px;
  font: inherit;
  line-height: normal;
}

button,
input,
select {
  display: inline-block;
}

textarea {
  inline-size: 100%;
  display: block;
  resize: block;
}

::placeholder {
  color: var(--clr-txt-muted);
}

button,
input:not(
  [type="radio"],
  [type="checkbox"],
  [type="image"],
  [type="file"],
  [type="color"],
  [type="range"]
),
input[type="file"]::file-selector-button,
select,
textarea,
.button,
.button-secondary {
  border-radius: var(--br-s);

  @media (pointer: fine) {
    padding: var(--sp-rel-xs) var(--sp-rel-xl);
  }

  @media (pointer: coarse) {
    padding: var(--sp-rel-s) var(--sp-rel-2xl);
  }
}

input:not(
  [type="button"],
  [type="checkbox"],
  [type="color"],
  [type="file"],
  [type="image"],
  [type="radio"],
  [type="range"],
  [type="reset"],
  [type="submit"]
),
select,
textarea {
  border: 2px solid var(--clr-bdr);
  background: transparent;
  color: inherit;
}

button,
input:is([type="button"], [type="reset"], [type="submit"]),
input[type="file"]::file-selector-button,
.button,
.button-secondary {
  inline-size: 100%;
  border: 2px solid transparent;
  background-color: var(--clr-acc);
  color: var(--clr-bkg-main);
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease-out;
  transition-property: color, background, border;
  cursor: pointer;

  &:hover {
    background-color: var(--clr-acc-hover);
  }
}

.button-secondary {
  border-color: var(--clr-acc);
  background: transparent;
  color: var(--clr-acc);

  &:hover {
    border-color: var(--clr-acc-hover);
    background-color: var(--clr-acc-hover);
    color: var(--clr-bkg-main);
  }
}

input[type="radio"],
input[type="checkbox"] {
  position: relative;
  inline-size: 1lh;
  block-size: 1lh;
  flex-grow: 0;
  flex-shrink: 0;
  margin: 0;
  border: 2px solid var(--clr-bdr);
  background: transparent;
  vertical-align: text-bottom;
  transition: 0.2s ease-out;
  transition-property: border-color;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    inline-size: 70%;
    block-size: 70%;
    margin: auto;
    display: block;
    background: var(--clr-acc);
    transition: 0.2s ease-out;
    transition-property: scale, opacity;
    scale: 0;
    opacity: 0;
  }

  &:checked::before {
    scale: 1;
    opacity: 1;
  }
}

input[type="checkbox"] {
  border-radius: var(--br-xs);

  &::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMyAxNC4yLjIgOWwxLjctMi40IDQuOCAzLjUgNi42LTguNSAyLjMgMS44eiIvPjwvc3ZnPg==")
      50% 50% / contain no-repeat;
  }
}

input[type="radio"] {
  border-radius: var(--br-50);

  &::before {
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMmE2IDYgMCAxIDAgNiA2IDYgNiAwIDAgMC02LTZtMCA5LjQyOUEzLjQyOSAzLjQyOSAwIDEgMSAxMS40MjkgOCAzLjQzIDMuNDMgMCAwIDEgOCAxMS40MjkiLz48L3N2Zz4=")
      50% 50% / contain no-repeat;
  }
}

.input-field {
  margin-bottom: 1rem;
  display: grid;
  gap: 0.5rem;
  font-weight: 500;

  label {
    color: var(--clr-txt-main);
  }

  &:has(> input[required]) label::before {
    content: "*";
    color: var(--clr-error);
  }

  &:not(:has(> input[required])) label::after {
    content: " (opcjonalne)";
    color: var(--clr-txt-muted);
    font-size: 0.8em;
  }

  .input-message {
    color: var(--clr-txt-muted);
    font-size: 0.8em;
  }
}

.row {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;

  > * {
    flex: 1;
  }
}

.column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-abs-s);
}

.date-select.selected {
  background-color: hsl(from var(--clr-acc) h s calc(l * 0.8));
  box-shadow: 0 0 6px 0 hsl(0 0 0 / 0.2) inset;

  &[data-mode="quick"]::after {
    content: "";
    background-color: currentcolor;
    display: inline-block;
    inline-size: 1lh;
    block-size: 1lh;
    vertical-align: text-bottom;
    mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMS41MiAxLjUyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wLjQ3NSAwLjY2NSAwLjIyMiAwLjIyMkwxLjA0NSAwLjQ0M2wwLjA5NSAwLjA5NSAtMC40NDMgMC41MzhMMC4zOCAwLjc2eiIvPjwvc3ZnPg==")
      50% 50% / contain no-repeat;
  }
}

.form-spot {
  margin-block: 1rem;
}

.spots-grid {
  display: grid;
  gap: 0.5rem;
}

.spot-card {
  padding: 1rem;
  border: 2px solid var(--clr-bdr);
  border-radius: var(--br-m);
  background: var(--clr-bkg-layer);
  transition:
    transform 0.2s,
    border-color 0.2s;

  &.available:is(:hover, :focus-within) {
    border-color: var(--clr-acc);
    transform: translateY(-2px);
  }

  &.available {
    border-color: var(--clr-success);
    background: hsl(from var(--clr-success) h s l / 0.12);
    cursor: pointer;
  }

  &.occupied {
    border-color: var(--clr-error);
    background: hsl(from var(--clr-error) h s l / 0.12);
    cursor: not-allowed;
  }

  &.disabled {
    border-color: var(--clr-bdr);
    background: var(--clr-bkg-layer);
    opacity: 0.4;
    cursor: not-allowed;
  }

  &.selected {
    border-color: var(--clr-success);
    background: hsl(from var(--clr-success) h s l / 0.25);

    h4::after {
      content: "";
      background-color: currentcolor;
      display: inline-block;
      inline-size: 1lh;
      block-size: 1lh;
      vertical-align: text-bottom;
      mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMS41MiAxLjUyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wLjQ3NSAwLjY2NSAwLjIyMiAwLjIyMkwxLjA0NSAwLjQ0M2wwLjA5NSAwLjA5NSAtMC40NDMgMC41MzhMMC4zOCAwLjc2eiIvPjwvc3ZnPg==")
        50% 50% / contain no-repeat;
    }
  }

  .spot-number {
    color: var(--clr-acc);
    font-size: 1.25rem;
    font-weight: bold;
  }

  .spot-desc {
    color: var(--clr-txt-muted);
    font-size: 0.9rem;
  }
}

.details {
  margin-bottom: var(--sp-rel-m);
  padding: var(--sp-rel-l);
  border: 1px solid var(--clr-bdr);
  border-radius: var(--br-m);
  background: var(--clr-bkg-layer);
}

.adjust-margins,
.details,
.spot-card {
  > :first-child {
    margin-block-start: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }

  > :first-child:is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: calc(0.5em - 0.5lh);
  }

  > :last-child:is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-end: calc(0.5em - 0.5lh);
  }
}

.alert {
  padding: var(--sp-rel-s);
  border: 1px solid var(--_clr);
  border-radius: var(--br-m);
  background: hsl(from var(--_clr) h s l / 0.12);
  color: var(--_clr);

  &::before {
    content: "";
    inline-size: 1lh;
    block-size: 1lh;
    margin-inline-end: 0.5ch;
    display: inline-block;
    background: currentColor;
    vertical-align: bottom;
    mask: var(--_icn) center / contain no-repeat;
  }

  &.success {
    --_clr: var(--clr-success);
    --_icn: var(--icn-success);
  }

  &.error {
    --_clr: var(--clr-error);
    --_icn: var(--icn-error);
  }

  &.info {
    --_clr: var(--clr-info);
    --_icn: var(--icn-info);
  }

  &.warning {
    --_clr: var(--clr-warning);
    --_icn: var(--icn-warning);
  }
}

.background-fs {
  position: relative;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    margin-inline: calc(50% - 50vw);
    margin-inline: calc(50% - 50dvw);
    background: inherit;
  }
}

.elastic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
  gap: var(--sp-abs-s);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-abs-2xs);
  padding: var(--sp-rel-s) var(--sp-rel-m);
  border: 1px solid var(--clr-bdr);
  border-radius: var(--br-m);
  background: var(--clr-bkg-layer);

  .service-name {
    font-weight: 600;
  }

  .service-desc {
    color: var(--clr-txt-muted);
    font-size: 0.875em;
  }

  .service-price {
    margin-top: var(--sp-abs-2xs);
    color: var(--clr-acc);
    font-size: 0.9em;
  }
}

.qty-stepper {
  margin-top: var(--sp-abs-xs);
  display: flex;
  align-items: center;
  gap: var(--sp-abs-xs);

  button {
    inline-size: auto;
    flex-shrink: 0;
  }

  .qty-add::before {
    content: "";
    background-color: currentcolor;
    display: inline-block;
    inline-size: 1lh;
    block-size: 1lh;
    vertical-align: text-bottom;
    mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMzY4IDRoMS4yNjN2My4zNjhoMy4zNjh2MS4yNjNIOC42MzJ2My4zNjhINy4zNjlWOC42MzJINFY3LjM2OWgzLjM2OHoiLz48L3N2Zz4=")
      50% 50% / contain no-repeat;
  }

  .qty-subtract::before {
    content: "";
    background-color: currentcolor;
    display: inline-block;
    inline-size: 1lh;
    block-size: 1lh;
    vertical-align: text-bottom;
    mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMS41MiAxLjUyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wLjM4IDAuNzZoMC43NnYwLjEySDAuMzh6Ii8+PC9zdmc+")
      50% 50% / contain no-repeat;
  }

  input[type="number"] {
    inline-size: 4rem;
    flex: 0 0 4rem;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
    }
  }
}

.footer-payment-badges {
  max-inline-size: 600px;
  margin-block: var(--sp-abs-l);
}