@layer components {
  .contact {
    background-color: var(--color-accent-light);
    padding-block: 14cqi;
    padding-inline: 6cqi;
  }

  /* Title */
  .contact__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqi;
    margin-block-end: 4cqi;
  }

  .contact__title-sub-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
  }

  .contact__title-badge {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    padding-block: 1cqi;
    padding-inline: 3cqi;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.35;
    color: oklch(1 0 0);
  }

  .contact__title-desc {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent);
    text-align: center;
  }

  .contact__title-main {
    font-family: var(--font-hero);
    font-size: 10cqi;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    text-align: center;
  }

  /* Character */
  .contact__char {
    display: block;
    inline-size: 50cqi;
    block-size: auto;
    margin-inline: auto;
  }

  /* Phone */
  .contact__tel {
    margin-block-end: 6cqi;
  }

  .contact__tel-header {
    background-color: var(--color-accent);
    border: 3px solid var(--color-accent);
    border-radius: 2.5cqi 2.5cqi 0 0;
    padding-block: 3cqi;
    padding-inline: 6cqi;
    text-align: center;
  }

  .contact__tel-header-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(1 0 0);
  }

  .contact__tel-body {
    border: 3px solid var(--color-accent);
    border-block-start: none;
    border-radius: 0 0 2.5cqi 2.5cqi;
    padding: 4cqi 6cqi 6cqi;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
  }

  .contact__tel-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 4cqi;
    background-color: oklch(1 0 0);
    border: 2px solid oklch(1 0 0);
    border-radius: 2.5cqi;
    box-shadow: inset 0 -4px 0 0 oklch(0.8 0.01 260);
    text-decoration: none;
    gap: 0.5cqi;
  }

  .contact__tel-btn-label {
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent);
  }

  .contact__tel-btn-number {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0.05em;
    color: var(--color-accent);
  }

  .contact__tel-hours {
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent);
    text-align: center;
  }

  /* Form */
  .contact__form-header {
    background-color: var(--color-accent);
    border: 3px solid var(--color-accent);
    border-radius: 2.5cqi 2.5cqi 0 0;
    padding-block: 3cqi;
    text-align: center;
  }

  .contact__form-header-text {
    font-family: var(--font-hero);
    font-size: 5cqi;
    font-weight: 700;
    line-height: 1.25;
    color: oklch(1 0 0);
  }

  .contact__form-body {
    background-color: oklch(1 0 0);
    border-radius: 0 0 2.5cqi 2.5cqi;
    padding: 8cqi 6cqi;
  }

  .contact__form-fields {
    display: flex;
    flex-direction: column;
    gap: 6cqi;
    margin-block-end: 8cqi;
  }

  .contact__field {
    display: flex;
    flex-direction: column;
    gap: 2cqi;
  }

  .contact__field-label {
    display: flex;
    align-items: center;
    gap: 2cqi;
  }

  .contact__field-name {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.35;
    color: var(--color-accent);
  }

  .contact__field-badge {
    display: inline-flex;
    min-inline-size: max-content;
    align-items: center;
    justify-content: center;
    border-radius: 1cqi;
    padding-block: 0.5cqi;
    padding-inline: 2cqi;
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 800;
    line-height: 1.35;
    color: oklch(1 0 0);
  }

  .contact__field-badge--required {
    background-color: oklch(0.55 0.22 25);
  }

  .contact__field-badge--optional {
    background-color: oklch(0.6 0.03 260);
  }

  .contact__field-input,
  .contact__field-textarea {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-accent);
    background-color: oklch(0.93 0.015 260);
    border: none;
    border-radius: 1.25cqi;
    padding: 4cqi;
    inline-size: 100%;
  }

  .contact__field-input::placeholder,
  .contact__field-textarea::placeholder {
    color: var(--color-accent);
    opacity: 0.3;
  }

  .contact__field-textarea {
    min-block-size: 40cqi;
    resize: vertical;
  }

  .contact__field-error {
    display: none;
    font-family: var(--font-hero);
    font-size: 3.75cqi;
    font-weight: 700;
    line-height: 1.5;
    color: oklch(0.55 0.22 25);
  }

  .contact__field--error .contact__field-input,
  .contact__field--error .contact__field-textarea {
    background-color: oklch(0.95 0.03 25);
  }

  .contact__field--error .contact__field-error {
    display: block;
  }

  /* Privacy */
  .contact__privacy {
    display: flex;
    flex-direction: column;
    gap: 4cqi;
  }

  .contact__privacy-box {
    border: 1.5px solid oklch(0.13 0 0);
    padding: 4cqi;
    block-size: 62.5cqi;
    overflow-y: auto;
  }

  .contact__privacy-text {
    font-family: var(--font-hero);
    font-size: 3.5cqi;
    font-weight: 400;
    line-height: 1.5;
    color: oklch(0.13 0 0);
    max-inline-size: none;
    text-wrap: wrap;
  }

  .contact__privacy-text strong {
    font-weight: 700;
  }

  .contact__privacy-text ul,
  .contact__privacy-text ol {
    padding-inline-start: 5cqi;
    list-style: revert;
  }

  .contact__privacy-text li {
    max-inline-size: none;
    text-wrap: wrap;
  }

  .contact__privacy-agree {
    display: flex;
    align-items: center;
    gap: 4cqi;
    cursor: pointer;
  }

  .contact__privacy-checkbox {
    position: absolute;
    opacity: 0;
    inline-size: 0;
    block-size: 0;
  }

  .contact__privacy-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6cqi;
    height: 6cqi;
    border: 3px solid oklch(0.13 0 0);
    border-radius: 1cqi;
    background-color: oklch(1 0 0);
  }

  .contact__privacy-check::after {
    content: "";
    display: none;
    width: 3.5cqi;
    height: 2.5cqi;
    background: url("../../assets/images/privacy-check.png") center / contain no-repeat;
  }

  .contact__privacy-checkbox:checked + .contact__privacy-check::after {
    display: block;
  }

  .contact__privacy-agree-text {
    font-family: var(--font-hero);
    font-size: 4cqi;
    font-weight: 700;
    line-height: 1.35;
    color: oklch(0.13 0 0);
  }

  /* Submit */
  .contact__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 6.5cqi;
    background-color: oklch(0.5 0.2 265);
    border: none;
    border-radius: 2.5cqi;
    box-shadow: inset 0 -4px 0 0 var(--color-accent);
    font-family: var(--font-hero);
    font-size: 4.5cqi;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: oklch(1 0 0);
    cursor: pointer;
  }
}