@font-face {
    font-family: "Geist Mono";
    font-weight: 400;
    src: url('GeistMono-Medium.woff2') format('woff2');
}
@font-face {
    font-family: "Geist";
    font-weight: 400;
    src: url('Geist-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: "GeistMonoNarrow";
    font-weight: 400;
    src: url('GeistMonoNarrow.woff2') format('woff2');
}


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

:root {
    --red: #d93b2b;
    --green: #3aaa35;
    --blue: #3d8bcd;
    --currentColor: var(--red);
}
body[data-color="Romans"] {
    --currentColor: var(--red);
}
body[data-color="Chans"] {
    --currentColor: var(--green);
}
body[data-color="Distans"] {
    --currentColor: var(--blue);
}

.red {
    color: var(--red);
}
.green {
    color: var(--green);
}
.blue {
    color: var(--blue);
}

body {
  background: #ffffff;
  color: #000000;
  font-family: "Geist Mono", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand {
  width: 100%;
  font-family: "Geist";
  text-align: center;
  font-size: 13.8vw;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.8;
  padding: 4vw 2vw 40px;
}
@media (min-width:768px) {
  .brand {
    padding-top: 2vw;
  }
}

.content {
  width: 100%;
  max-width: 480px;
  padding: 0 20px 56px;
}

.intro {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 48px;
}

.section-label {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}

.radio-group {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 56px;
}

.radio-option {
  display: flex;
  text-transform:uppercase;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.radio-option input[type="radio"] { display: none; }

.radio-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid transparent;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.15s ease;
}

/*.radio-option:nth-child(1) span {
    color: var(--red);
}
.radio-option:nth-child(2) span {
    color: var(--green);
}

.radio-option:nth-child(3) span {
    color: var(--blue);
}*/

.radio-option:nth-child(1) .radio-circle { background: #d93b2b; }
.radio-option:nth-child(2) .radio-circle { background: #3aaa35;
    /*border-radius: 0;
    transform: rotate(45deg);
    width:60px;
    height:60px;*/
}
.radio-option:nth-child(3) .radio-circle { background: #3d8bcd; }

.radio-option input[type="radio"]:checked + .radio-circle {
  outline-color: #000;
}

.radio-label { font-size: 15px; font-weight: normal; }

.select-wrapper { position: relative; margin-bottom: 0px; }

.select-wrapper select {
  width: 100%;
  padding: 20px 20px 20px 20px;
  font-family: "Geist Mono", Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing:-0.02em;
  text-align-last: center;
  text-transform:uppercase;
  font-weight: normal;
  border: 0;
  border-radius: 0;
  background: white;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: #000;
}

.footer {
  font-size: 13px;
  letter-spacing:-0.02em;
  margin-top: 56px;
  color: #888;
  margin-bottom:0;
}
.select-wrapper select:focus, .textarea-wrapper textarea:focus {
    outline: none;
}

.select-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  font-size: 10px;
  font-weight: normal;
  pointer-events: none;
  color: #888;
}

.textarea-wrapper { position: relative; margin-bottom: 24px; }

.textarea-wrapper textarea {
  width: 100%;
  min-height: 115px;
  padding: 20px;
  font-family: "GeistMonoNarrow", Helvetica, Arial, sans-serif;
  text-align: center;
  letter-spacing: -0.12em;
  font-size: 30px;
  font-weight: normal;
  text-transform:uppercase;
  border: 0;
  border-top: 1px solid #eee;
  /*border-bottom: 2px solid black;*/
  border-radius: 0;
  resize: none;
  color: #000;
  background: white;
}

.textarea-wrapper textarea::placeholder { color: #aaa; font-weight: normal; text-transform:uppercase;}

.text-group {
    position: relative;
    margin-bottom:56px;
}
.text-group:before {
/*border-top: 2px solid black;
border-bottom: 2px solid black;*/
box-sizing:border-box;
content: '';
width: 100vw;
height: 100%;
height: calc(100% - 5px);
background: var(--currentColor);
position: absolute;
z-index: -1;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}

.char-count {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 10px;
  font-weight: normal;
  color: #888;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 30px 22px;
  background: black;
  color: #fff;
  font-family: "Geist Mono", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: normal;
  letter-spacing: 0.1em;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.submit-btn:hover { background: #222; }
.submit-btn:disabled { background: #555; cursor: default; }