/* Drovo theme: contact styles, compiled from the original SCSS modules. */

/* app/contact/contact.module.scss */
.ctp-contactPage {
  width: 100%;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (max-width: 1399px) {
  .ctp-contactPage {
    max-width: 86%;
  }
}
@media (max-width: 1199px) {
  .ctp-contactPage {
    max-width: 92%;
  }
}
@media (max-width: 991px) {
  .ctp-contactPage {
    max-width: 96%;
  }
}
@media (max-width: 575px) {
  .ctp-contactPage {
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
}
.ctp-contactPage {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-block: clamp(2rem, 4vw, 4rem);
}

.ctp-contactStage {
  display: grid;
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}

.ctp-illustration {
  position: relative;
  display: grid;
  min-height: clamp(24rem, 42vw, 34rem);
  place-items: end center;
  overflow: hidden;
}

.ctp-person {
  position: relative;
  z-index: 1;
  width: min(18rem, 70vw);
  height: min(26rem, 92vw);
}

.ctp-head,
.ctp-body,
.ctp-laptop,
.ctp-chair,
.ctp-plant,
.ctp-lamp {
  position: absolute;
}

.ctp-head {
  top: 1.4rem;
  left: 7.6rem;
  width: 4.1rem;
  height: 4.4rem;
  border-radius: 48% 52% 46% 54%;
  background: var(--clr-primary-light, #E1F5EE);
  box-shadow: inset -0.45rem -0.35rem 0 var(--clr-primary, #0F7B6C);
}

.ctp-head::before {
  position: absolute;
  top: -0.55rem;
  left: -0.35rem;
  width: 4rem;
  height: 2.1rem;
  border-radius: 999px 999px 0 0;
  background: var(--clr-primary, #0F7B6C);
  content: "";
}

.ctp-body {
  top: 6rem;
  left: 5.3rem;
  width: 7.7rem;
  height: 10.2rem;
  border-radius: 3rem 3rem 1.4rem 1.4rem;
  background: #E8B84B;
}

.ctp-body::after {
  position: absolute;
  right: -1.4rem;
  bottom: -5.2rem;
  width: 6.2rem;
  height: 8.3rem;
  border-radius: 999px;
  background: #1A3030;
  content: "";
  transform: rotate(-20deg);
}

.ctp-laptop {
  top: 10rem;
  left: 8.6rem;
  width: 8.8rem;
  height: 5.6rem;
  border-radius: 0.35rem;
  background: #4A6060;
  transform: skew(-10deg) rotate(4deg);
}

.ctp-chair {
  right: 2rem;
  bottom: 0.8rem;
  left: 3.4rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--clr-primary-light, #E1F5EE);
  box-shadow: -2.8rem -5.5rem 0 2.2rem var(--clr-primary, #0F7B6C), 1.7rem 4.8rem 0 -0.25rem #607B7B;
}

.ctp-plant {
  left: 0;
  bottom: 1rem;
  width: 5rem;
  height: 8rem;
  border-bottom: 4rem solid #D8E0E0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}

.ctp-plant::before,
.ctp-plant::after {
  position: absolute;
  bottom: 3.2rem;
  width: 3.2rem;
  height: 5rem;
  border-radius: 100% 0;
  background: var(--clr-primary, #0F7B6C);
  content: "";
}

.ctp-plant::before {
  left: -0.2rem;
  transform: rotate(-24deg);
}

.ctp-plant::after {
  right: -0.3rem;
  border-radius: 0 100%;
  transform: rotate(25deg);
}

.ctp-lamp {
  right: 0.2rem;
  bottom: 5.6rem;
  width: 0.45rem;
  height: 14rem;
  background: #57535c;
}

.ctp-lamp::before {
  position: absolute;
  top: -2.7rem;
  left: -1.55rem;
  width: 3.8rem;
  height: 2.8rem;
  border-radius: 0.45rem 0.45rem 1.1rem 1.1rem;
  background: #D8E0E0;
  content: "";
}

@media (max-width: 840px) {
  .ctp-contactStage {
    grid-template-columns: 1fr;
  }
  .ctp-illustration {
    min-height: 20rem;
  }
}

/* components/forms/ContactForm.module.scss */
.ctf-formShell {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: clamp(1.35rem, 3vw, 2.4rem);
  border: 1px solid rgba(15, 123, 108, 0.22);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(39, 28, 26, 0.08);
}

.ctf-header {
  display: grid;
  gap: 0.5rem;
}

.ctf-eyebrow {
  margin: 0;
  color: var(--clr-primary, #0F7B6C);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ctf-title {
  margin: 0;
  color: var(--clr-text, #1A1A18);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
}

.ctf-text {
  margin: 0;
  color: #5A6370;
  line-height: 1.7;
}

.ctf-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .ctf-grid {
    grid-template-columns: 1fr;
  }
}

.ctf-full {
  grid-column: 1/-1;
}

.ctf-submit {
  min-height: 3rem;
  border-color: var(--clr-primary, #0F7B6C);
  background: var(--clr-primary, #0F7B6C);
  box-shadow: 0 14px 28px rgba(15, 123, 108, 0.25);
}
.ctf-submit:hover:not(:disabled) {
  background: var(--clr-primary-mid, #0F6E56);
  transform: translateY(-1px);
}

.ctf-notice {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 4px;
  background: rgba(22, 163, 74, 0.08);
  color: var(--clr-primary, #0F7B6C);
  font-weight: 700;
}

.ctf-error {
  padding: 0.85rem 1rem;
  border: 1px solid rgba(192, 57, 43, 0.25);
  border-radius: 4px;
  background: rgba(192, 57, 43, 0.08);
  color: var(--clr-danger, #C0392B);
  font-weight: 700;
}