/* Override auth-section styles for contact-section */
.contact-section.container,
.auth-section.contact-section .container,
.contact-section .container {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  gap: var(--y-space-26) !important;
  padding-top: var(--y-space-30) !important;
}
.contact-section .container .right,
.auth-section.contact-section .container .right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: var(--y-space-20) !important;
  color: var(--y-color-text) !important;
  background-color: var(--y-color-fg) !important;
  border-radius: var(--y-space-14) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: var(--y-space-30) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* Contact form wrapper */
.contact-section .container .right form,
.auth-section.contact-section .container .right form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--y-space-20) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

.contact-section .container .right h2,
.auth-section.contact-section .container .right h2 {
  color: color-mix(in oklab, var(--y-color-secondary) 50%, black) !important;
  font-size: var(--y-space-32) !important;
  font-weight: 600 !important;
  padding-bottom: var(--y-space-20) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--y-space-10) !important;
  margin: 0 !important;
}
.contact-section .container .right h2 i,
.auth-section.contact-section .container .right h2 i {
  background-color: color-mix(in oklab, var(--y-color-secondary) 50%, black) !important;
  color: var(--y-color-bg) !important;
  font-size: var(--y-space-24) !important;
  width: var(--y-space-48) !important;
  aspect-ratio: 1/1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--y-space-32) !important;
}
.contact-section .container .right input,
.contact-section .container .right textarea,
.contact-section .container .right form input,
.contact-section .container .right form textarea,
.auth-section.contact-section .container .right input,
.auth-section.contact-section .container .right textarea,
.auth-section.contact-section .container .right form input,
.auth-section.contact-section .container .right form textarea {
  width: 100% !important;
  padding: var(--y-space-16) !important;
  border-radius: var(--y-space-16) !important;
  border: 1px solid var(--y-color-border) !important;
  background-color: var(--y-color-bg) !important;
  box-sizing: border-box !important;
}
.contact-section .container .right input:focus,
.contact-section .container .right textarea:focus,
.contact-section .container .right form input:focus,
.contact-section .container .right form textarea:focus,
.auth-section.contact-section .container .right input:focus,
.auth-section.contact-section .container .right textarea:focus {
  border-color: var(--y-color-secondary) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--y-color-secondary) 20%, transparent) !important;
  outline: none !important;
}
.contact-section .container .right input::placeholder,
.contact-section .container .right textarea::placeholder,
.contact-section .container .right form input::placeholder,
.contact-section .container .right form textarea::placeholder,
.auth-section.contact-section .container .right input::placeholder,
.auth-section.contact-section .container .right textarea::placeholder {
  font-size: var(--y-text-sm) !important;
  font-weight: 400 !important;
  color: var(--y-color-text) !important;
}
.contact-section .container .right textarea,
.contact-section .container .right form textarea,
.auth-section.contact-section .container .right textarea {
  height: 200px !important;
}

.contact-section .container .left,
.auth-section.contact-section .container .left {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--y-space-20) !important;
  color: var(--y-color-bg) !important;
  background-color: color-mix(in oklab, var(--y-color-secondary) 50%, black) !important;
  padding: var(--y-space-30) !important;
  border-radius: var(--y-space-14) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.contact-section .container .left h2,
.auth-section.contact-section .container .left h2 {
  font-size: var(--y-space-32) !important;
  font-weight: 600 !important;
  padding-bottom: var(--y-space-20) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--y-space-10) !important;
  margin: 0 !important;
}
.contact-section .container .left h2 i,
.auth-section.contact-section .container .left h2 i {
  color: var(--y-color-bg) !important;
  background-color: var(--y-color-secondary) !important;
  font-size: var(--y-space-24) !important;
  width: var(--y-space-48) !important;
  aspect-ratio: 1/1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--y-space-32) !important;
}
.contact-section .container h3{
  font-size: var(--y-space-24);
  font-weight: 600;
}
.contact-section .container p{
  font-size: var(--y-space-16);
  font-weight: 400;
}
.contact-section .container .contact-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--y-space-20);
}
.contact-section .container .contact-grid .contact-item{
  display: flex;
  align-items: center;
  gap: var(--y-space-10);
  border-radius: var(--y-space-16);
  padding: var(--y-space-10);
  background-color: var(--y-color-secondary);
  color: var(--y-color-bg);
  width: 100%;
}

.contact-section .container i{
  width: var(--y-space-48);
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  border-radius: var(--y-space-32);
}
.contact-section .container .contact-grid .contact-item i{
  color: var(--y-color-secondary);
font-size: var(--y-space-24);
  background-color: var(--y-color-bg);
}
.contact-section .container .contact-grid .contact-item .content{
  display: flex;
  flex-direction: column;
  gap: var(--y-space-10);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .contact-section.container,
  .auth-section.contact-section .container,
  .contact-section .container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    padding-top: var(--y-space-24) !important;
  }

  .contact-section .container .right,
  .auth-section.contact-section .container .right {
    order: 1 !important;
  }

  .contact-section .container .left,
  .auth-section.contact-section .container .left {
    order: 2 !important;
  }
}

@media (max-width: 768px) {
  .contact-section.container,
  .auth-section.contact-section .container,
  .contact-section .container {
    gap: var(--y-space-20) !important;
    padding-inline: var(--y-space-12) !important;
  }

  .contact-section .container .right,
  .auth-section.contact-section .container .right,
  .contact-section .container .left,
  .auth-section.contact-section .container .left {
    padding: var(--y-space-20) !important;
  }

  .contact-section .container .right h2,
  .auth-section.contact-section .container .right h2,
  .contact-section .container .left h2,
  .auth-section.contact-section .container .left h2 {
    font-size: 1.4rem !important;
  }

  .contact-section .container h3 {
    font-size: 1.1rem !important;
  }

  .contact-section .container p {
    font-size: 0.95rem !important;
  }

  .contact-section .container .contact-grid {
    gap: var(--y-space-14) !important;
  }
}

@media (max-width: 540px) {
  .contact-section.container,
  .auth-section.contact-section .container,
  .contact-section .container {
    gap: var(--y-space-16) !important;
  }

  .contact-section .container .right input,
  .contact-section .container .right textarea,
  .contact-section .container .right form input,
  .contact-section .container .right form textarea,
  .auth-section.contact-section .container .right input,
  .auth-section.contact-section .container .right textarea {
    padding: var(--y-space-12) !important;
  }

  .contact-section .container .right textarea,
  .contact-section .container .right form textarea,
  .auth-section.contact-section .container .right textarea {
    height: 160px !important;
  }

  .contact-section .container i {
    width: var(--y-space-40) !important;
  }

  .contact-section .container .contact-grid .contact-item {
    gap: var(--y-space-8) !important;
  }
}