:root {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Oxygen, Ubuntu, Cantarell, 'Open Sans';

  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;

  --line-height-body: 1.75;
  --letter-spacing-tight: -0.025em;

  --color-white: white;
  --color-black: black;
  --color-primary: hsl(330, 81%, 60%);
  --color-background: #f8f9fa;
  --color-orange: #fbb315;
  --color-orange-hover: #d79009;

  --space-md: 1rem;

  --border-radius: 24px;
}

* {
  margin: 0;
}

body {
  font-family: var(--font-family);
  color: var(--color-black);
  line-height: var(--line-height-body);
  scroll-behavior: smooth;
  background-color: var(--color-background);
}

textarea {
  overflow: auto;
}

body:has(dialog[open]), body:has(#modal .modal) {
  overflow: hidden;
}

#modal .modal, dialog[open]::backdrop {
  background: linear-gradient(
    45deg,
    rgba(166, 249, 130, 0.2) 0%,
    rgba(35, 96, 238, 0.2) 50%,
    rgba(252, 126, 16, 0.2) 100%
  );
  backdrop-filter: blur(2px);
}

dialog[open], #modal .modal {
  animation: show 0.1s;
}

dialog.hide {
  animation: hide 0.1s;
}

@keyframes show {
  from {
    opacity: 0;
    filter: blur(60px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes hide {
  to {
    opacity: 0;
    transform: translateY(-20%);
  }
}

.input {
  transition: box-shadow 0.15s ease-in-out;
  padding: 0.5em; 
  resize: none;
}

.checkbox {
  margin-top: -10px;
  margin-bottom: 10px;
  span {
    margin-left: 20px;
    font-weight: normal;
  }
}

#error_explanation {
	color: red;
  ul {
		color: red;
    margin: 0 0 30px 0;
  }
}

.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.page {
  padding-top: 2em;
  padding-bottom: 82px;
}

.page:after {
  background: linear-gradient(180deg, rgba(var(--bs-light-rgb), 1) 0, rgba(var(--bs-light-rgb), 0) 90%);
  content: "";
  height: 8.8em;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
}

/* Countdown circle timer animation */
.timer {
  background: -webkit-linear-gradient(left, skyBlue 50%, #eee 50%);
  border-radius: 100%;
  height: calc(var(--size) * 1px);
  width: calc(var(--size) * 1px);
  position: relative;
  -webkit-animation: time calc(var(--duration) * 1s) steps(1000, start) infinite;
  animation: time calc(var(--duration) * 1s) steps(1000, start) infinite;
  -webkit-mask: radial-gradient(transparent 50%,#000 50%);
  mask: radial-gradient(transparent 50%,#000 50%);
}
.mask {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 50%;
  -webkit-animation: mask calc(var(--duration) * 1s) steps(500, start) infinite;
  animation: mask calc(var(--duration) * 1s) steps(500, start) infinite;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
@keyframes time {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes mask {
  0% {
    background: #eee;
    -webkit-transform: rotate(0deg);
  }
  50% {
    background: #eee;
    -webkit-transform: rotate(-180deg);
  }
  50.01% {
    background: skyBlue;
    -webkit-transform: rotate(0deg);
  }
  100% {
    background: skyBlue;
    -webkit-transform: rotate(-180deg);
  }
}

.input--borderless {
  background-color: var(--color-white);
  box-shadow: none !important;
  border: 0;
  border-radius: 0;
  outline: 0;
}

.input--full-width {
  width: 100%;
}

.input--unpadded {
  padding: 0 !important;
}

.red-filter {
  filter: invert(35%) sepia(92%) saturate(7015%) hue-rotate(354deg) brightness(98%) contrast(126%);
}

div[disabled=disabled] {
  pointer-events: none;
  opacity: 0.4;
}

.emoji-link {
  text-decoration: none;
  font-size: larger;
}

.main-btn {
  background-color: var(--color-orange);
  border: none;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 123, 69, 0.3);
}

.main-btn:hover {
  background-color: var(--color-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 123, 69, 0.5);
}

.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, grey, transparent);
  margin: 2.5rem auto;
  max-width: 300px;
  opacity: 0.5;
}

.form-section {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  max-width: 800px;
  margin: 3rem auto;
}

.accordion {
  --bs-accordion-bg: var(--color-background);
}

.custom-textarea {
  border: 2px solid var(--color-orange);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  min-height: 120px;
  width: 100%;
}

.custom-textarea:focus {
  border-color: var(--color-orange-hover);
  box-shadow: 0 0 0 0.25rem rgba(255, 123, 69, 0.25);
  outline: none;
}

.custom-text-input {
  border: 2px solid var(--color-orange);
  border-radius: 8px;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  width: 100%;
}

.custom-text-input:focus {
  border-color: var(--color-orange-hover);
  box-shadow: 0 0 0 0.25rem rgba(255, 123, 69, 0.25);
  outline: none;
}

.btn-outline-orange {
  --bs-btn-color: #d35400;
  --bs-btn-border-color: #d35400;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d35400;
  --bs-btn-hover-border-color: #d35400;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b34700;
  --bs-btn-active-border-color: #b34700;
}

.main-modal-header {
  background: floralwhite;
  padding: 1.2rem;
  border-bottom: none;
}