:root {
  --clr-primary: hsl(229 33% 21%);
  /* --clr-secondary: #302047; */
  --clr-accent: hsl(21deg 85% 60%);

  /* Added color variables */
  /* --color-red: red; */
  /* --color-purple: purple; */
  /* --color-blue: blue; */
  --text-color1: #ffffff;

  /* --color-border-neutral: #ccc; */
  --color-choicebox-grad-1: #f4f4f5;
  --color-choicebox-grad-2: #2121f9;
  --color-choicebox-grad-3: #dfdfe3;
  /* --color-hover-shared-bg: #ffe8a3; */
  --color-hover-shared-border: #d9c378;
  --color-btn1-bg: #07f840;
  --color-btn1-border: hsl(21deg 85% 60%);
  --color-btn1-text: #1d3200;
  /* --color-btn1-selected-bg: #a8ef40; */
  --color-btn1-selected-bg: hsl(21deg 85% 60%);
  --color-btn2-bg: #f7b3b3;
  --color-btn2-border: #d79191;
  --color-btn2-text: #4d1717;
  --color-btn2-selected-bg: #ec9f9f;
  --color-go-collar: #f53708;
  --color-go-ring: rgba(143, 183, 50, 0.35);
  --color-go-main: #7a8f2a;
  --color-go-edge: #c9e84f;
  --color-rbox1-bg: hsl(21deg 85% 60%);
  /* --color-rbox2-bg: #f7c4c4; */
  --shadow-btn-base:
    0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --shadow-btn-hover:
    0 3px 6px rgba(0, 0, 0, 0.1), 0 14px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-btn-active:
    0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 14px rgba(0, 0, 0, 0.12),
    inset 0 2px 6px rgba(0, 0, 0, 0.16);
  --shadow-btn1-selected:
    0 3px 7px rgba(0, 0, 0, 0.12), 0 16px 28px rgba(103, 153, 40, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-btn2-selected:
    0 3px 7px rgba(0, 0, 0, 0.12), 0 16px 28px rgba(173, 96, 96, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body {
  font-family: system-ui;
  margin: 0;
  padding: 16px 12px 28px;
  color: var(--text-color1);
  background-color: var(--clr-primary);
}

.container {
  width: min(960px, 100%);
  margin: 0 auto;
}

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

.submit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
}

.submit-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 18, 27, 0.55);
}

.submit-modal__dialog {
  position: relative;
  width: min(460px, 100%);
  border-radius: 10px;
  border: 2px solid transparent;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
}

.submit-modal__title {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.submit-modal__message {
  margin: 0 0 16px;
  line-height: 1.45;
}

.submit-modal__ok {
  width: 100%;
  min-height: 48px;
  border: 2px solid #8fcb39;
  border-radius: 6px;
  background: #d6f7a1;
  color: #1d3200;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .submit-modal__ok:hover {
    filter: brightness(0.96);
  }
}

.submit-modal.is-success .submit-modal__dialog {
  border-color: #8fcb39;
  background: #f2ffe0;
  color: #1d3200;
}

.submit-modal.is-warning .submit-modal__dialog {
  border-color: #d9c378;
  background: #fff8df;
  color: #4a3a00;
}

.submit-modal.is-error .submit-modal__dialog {
  border-color: #d79191;
  background: #ffeded;
  color: #4d1717;
}

.choicebox {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 12px;
  position: relative;
  border-radius: 6px;
  padding: 10px;
  color: var(--color-choicebox-grad-1);
  font-weight: 500;
  background: linear-gradient(
    135deg,
    var(--color-choicebox-grad-1) 0%,
    var(--color-choicebox-grad-2) 50%,
    var(--color-choicebox-grad-3) 100%
  );
}

.choicebox > *:not(.go-box) {
  /* border: 2px solid var(--color-border-neutral); */
  border-radius: 5px;
}

.rbox div.content1 h1,
.rbox div.content2 h1 {
  text-align: center;
  margin: 0 0 16px;
  font-size: clamp(1.55rem, 5vw, 2rem);
}

h1.heading {
  font-size: clamp(3rem, 10vw, 5rem);
  line-height: 1;
  margin-bottom: 1.5rem;
  margin-top: 0.5rem;
  text-align: center;
  /* makes text pop on ANY background */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

.or {
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-btn1-text);
  margin: 10px 0;
}

.lbox {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 10px;
}

.rbox {
  margin: 10px;
  height: max-content;
  min-height: 220px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1rem;
  background: var(--color-rbox1-bg);
  color: var(--color-btn1-text);
}

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

.go-btn,
.back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  min-height: 0;
  padding: 0;
  border: 3px solid var(--color-go-edge);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    0 0 0 3px rgba(255, 255, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 6px rgba(0, 0, 0, 0.15);
  background: linear-gradient(
    155deg,
    var(--color-go-main) 0%,
    var(--color-go-main) 100%
  );
  color: #233300;
  letter-spacing: 0.03em;
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    filter 0.2s ease;
}

.go-btn:focus-visible,
.back-btn:focus-visible,
.form-submit-btn:focus-visible,
.form-cancel-btn:focus-visible,
.submit-modal__ok:focus-visible,
.form-cell input:focus-visible,
.form-cell textarea:focus-visible,
.form-cell input[type="file"]:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.back-btn {
  text-decoration: none;
  border-color: var(--color-go-collar);
  background: linear-gradient(
    155deg,
    var(--color-go-collar) 0%,
    var(--color-go-collar) 100%
  );
  color: #1d3200;
}

.go-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 4px;
  position: static;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .go-btn:hover,
  .back-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow:
      0 12px 24px rgba(0, 0, 0, 0.28),
      0 0 0 3px rgba(255, 255, 255, 0.65),
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -3px 7px rgba(0, 0, 0, 0.18);
  }
}

#show-form:checked ~ .go-box .go-btn {
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.24),
    0 0 0 3px var(--color-go-ring),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: scale(0.98);
}

#show-content1:checked ~ .go-box .go-btn {
  --color-go-collar: var(--color-btn1-border);
  --color-go-ring: rgba(143, 183, 50, 0.35);
  --color-go-main: var(--color-btn1-border);
  --color-go-edge: var(--color-btn1-selected-bg);
}

#show-content2:checked ~ .go-box .go-btn {
  --color-go-collar: var(--color-btn2-border);
  --color-go-ring: rgba(215, 145, 145, 0.4);
  --color-go-main: var(--color-btn2-border);
  --color-go-edge: var(--color-btn2-selected-bg);
}

#show-form:checked ~ .go-box {
  display: none;
}

.toggle-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  min-height: 72px;
  padding: 10px 12px;
  border: 2px solid var(--color-border-neutral);
  border-radius: 5px;
  cursor: pointer;
  box-shadow: var(--shadow-btn-base);
  transition:
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lbox .toggle-btn:hover {
    filter: brightness(0.94);
    box-shadow: var(--shadow-btn-hover);
  }
}

.toggle-btn:active {
  box-shadow: var(--shadow-btn-active);
}

.lbox label[for="show-content1"] {
  background: var(--color-btn1-bg);
  border-color: var(--color-btn1-border);
  color: var(--color-btn1-text);
  font-size: 1rem;
  position: relative;
  padding-left: 52px;
}

.lbox label[for="show-content1"]::before {
  content: "1";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-btn1-text);
}

.lbox label[for="show-content2"] {
  background: var(--color-btn2-bg);
  border-color: var(--color-btn2-border);
  color: var(--color-btn2-text);
  font-size: 1rem;
  position: relative;
  padding-left: 52px;
}

.lbox label[for="show-content2"]::before {
  content: "2";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-btn2-text);
}

#show-content1:checked ~ .lbox label[for="show-content1"] {
  background: var(--color-btn1-selected-bg);
  box-shadow: var(--shadow-btn1-selected);
}

#show-content1:checked ~ .lbox label[for="show-content2"] {
  background: var(--color-btn2-bg);
  border-color: var(--color-btn2-border);
  box-shadow: var(--shadow-btn-base);
}

#show-content2:checked ~ .lbox label[for="show-content2"] {
  background: var(--color-btn2-selected-bg);
  box-shadow: var(--shadow-btn2-selected);
}

#show-content2:checked ~ .lbox label[for="show-content1"] {
  background: var(--clr-accent);
  border-color: var(--color-btn1-border);
  box-shadow: var(--shadow-btn-base);
}

.content1 {
  display: none;
}

.content2 {
  display: none;
}

.form1 {
  display: none;
}

#show-content1:checked ~ .rbox .content1 {
  display: block;
}

#show-content1:checked ~ .rbox {
  background: var(--color-rbox1-bg);
  border-color: var(--color-btn1-border);
  color: var(--color-btn1-text);
}

#show-content2:checked ~ .rbox .content2 {
  display: block;
}

#show-content2:checked ~ .rbox {
  background: var(--color-btn2-selected-bg);
  border-color: var(--color-btn2-border);
  color: var(--color-btn2-text);
}

#show-form:checked ~ .form1 {
  display: block;
}

.form1 {
  grid-column: 1 / -1;
  --color-form-bg: #fff;
  --color-form-border: var(--color-border-neutral);
  --color-form-text: var(--color-btn1-text);
}

#show-content1:checked ~ .form1 {
  --color-form-bg: var(--color-btn1-selected-bg);
  --color-form-border: var(--color-btn1-border);
  --color-form-text: var(--color-btn1-text);
}

#show-content2:checked ~ .form1 {
  --color-form-bg: var(--color-btn2-selected-bg);
  --color-form-border: var(--color-btn2-border);
  --color-form-text: var(--color-btn2-text);
}

.service-form {
  padding: 10px;
}

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

.form-cell {
  min-height: 62px;
}

.form-cell-wide {
  grid-column: 1 / -1;
}

.form-cell input,
.form-cell textarea {
  width: 100%;
  height: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 2px solid var(--color-form-border);
  border-radius: 5px;
  box-shadow: var(--shadow-btn-base);
  background: var(--color-form-bg);
  color: var(--color-form-text);
  font: inherit;
  box-sizing: border-box;
}

.form-cell input::placeholder,
.form-cell textarea::placeholder {
  color: var(--color-form-text);
  opacity: 0.75;
}

.form-cell textarea {
  resize: vertical;
}

.form-cell input[type="file"] {
  padding: 8px;
}

.form-cell-upload {
  min-height: 0;
}

.form-cell-upload .upload {
  margin: 0 0 8px;
  font-weight: 500;
  color: var(--color-choicebox-grad-1);
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.2;
}

.form-cell-upload input[type="file"] {
  height: auto;
  min-height: 54px;
}

.form-cell input[type="file"]::file-selector-button {
  margin-right: 10px;
  min-height: 52px;
  padding: 8px 12px;
  border: 2px solid var(--color-form-border);
  border-radius: 5px;
  background: var(--color-form-bg);
  color: var(--color-form-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-btn-base);
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.form-submit-btn,
.form-cancel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 2px solid var(--color-form-border);
  border-radius: 5px;
  box-shadow: var(--shadow-btn-base);
  color: var(--color-form-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}

.form-submit-btn {
  background: var(--color-btn1-bg);
}

.form-cancel-btn {
  background: var(--color-go-collar);
}

@media (hover: hover) and (pointer: fine) {
  .form-submit-btn:hover,
  .form-cancel-btn:hover {
    filter: brightness(0.95);
    box-shadow: var(--shadow-btn-hover);
  }
}

@media (hover: hover) and (pointer: fine) {
  .form-cell input:hover,
  .form-cell textarea:hover {
    box-shadow: var(--shadow-btn-hover);
  }
}

.form-cell input:focus,
.form-cell textarea:focus {
  outline: none;
  border-color: var(--color-hover-shared-border);
  box-shadow: var(--shadow-btn-hover);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 640px) {
  .form-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .choicebox {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 0 22px;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rbox {
    min-height: 300px;
    font-size: 1.25rem;
  }

  .lbox label[for="show-content1"],
  .lbox label[for="show-content2"] {
    font-size: 1.25rem;
    padding-left: 60px;
  }

  .lbox label[for="show-content1"]::before,
  .lbox label[for="show-content2"]::before {
    font-size: 3.45rem;
  }

  .go-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 3;
    margin-top: 0;
  }

  .go-btn {
    width: 64px;
    height: 64px;
  }
}