/*
Theme Name: Trutakna Theme
Theme URI: https://elementor.com/hello-theme/
Description: Child theme for Hello Elementor custom CSS and template overrides.
Author: Mauricio Rivera
Template: hello-elementor
Version: 1.0.0
Text Domain: trutakna-theme
*/

/*
Add custom CSS below this line.
*/

.corner-button {
  --trutakna-button-bg: #ffffff;
  --trutakna-button-text: #101c45;
  --trutakna-button-accent: #ea6f78;
  --trutakna-button-radius: 24px;
  --trutakna-corner-size: 46px;
  --trutakna-corner-thickness: 0.22em;
  --trutakna-corner-offset-x: 6px;
  --trutakna-corner-offset-y: 9px;
  --trutakna-button-pad-y: 12px;
  --trutakna-button-pad-x: 18px;
  --trutakna-button-font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--trutakna-button-pad-y) var(--trutakna-button-pad-x);
  border: 0;
  border-radius: var(--trutakna-button-radius);
  background: var(--trutakna-button-bg);
  color: var(--trutakna-button-text);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--trutakna-button-font-size);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
  text-align: left !important;
  text-decoration: none;
  overflow: visible;
}
.corner-button span{
  text-align: left;
}

.corner-button::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--trutakna-corner-offset-y));
  left: calc(-1 * var(--trutakna-corner-offset-x));
  width: var(--trutakna-corner-size);
  height: var(--trutakna-corner-size);
  border-top: var(--trutakna-corner-thickness) solid var(--trutakna-button-accent);
  border-left: var(--trutakna-corner-thickness) solid var(--trutakna-button-accent);
  border-top-left-radius: calc(var(--trutakna-corner-size) * 0.4);
  pointer-events: none;
}

.corner-button:hover,
.corner-button:focus-visible {
  color: var(--trutakna-button-text);
}

.corner-button:focus-visible {
  outline: 3px solid rgba(234, 111, 120, 0.35);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .corner-button {
    width: 100%;
  }

  .corner-button::before {
    --trutakna-corner-size: 34px;
    --trutakna-corner-thickness: 0.22em;
    --trutakna-corner-offset-x: 0px;
    --trutakna-corner-offset-y: 0px;
    --trutakna-button-pad-y: 8px;
    --trutakna-button-pad-x: 9px;
  }
}

.trutakna-rep-form-shell {
  --trutakna-midnight: #101c45;
  --trutakna-deep-sea: #36508c;
  --trutakna-graphite: #64696f;
  --trutakna-border: #7f8286;
  --trutakna-tidepool: #63c6bf;
  --trutakna-soft-gray: #636569;
  --trutakna-magenta: #ff00ff;
  --trutakna-error: #f37775;
  --trutakna-success-bg: #e6f7f5;
  --trutakna-success-border: #8ad4cf;

  max-width: 790px;
  width: 100%;
}

.trutakna-rep-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  padding: 27px 0px;
  background: #fff;
}

.trutakna-rep-form__row {
  width: 100%;
}

.trutakna-rep-form__row--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.trutakna-rep-form__field {
  width: 100%;
}

.trutakna-rep-form__field label {
  display: block;
  margin-bottom: 0;
}

.trutakna-rep-form__field input {
  width: 100%;
  min-height: 56px;
  padding: 22px 24px 18px;
  border: 1px solid var(--trutakna-border);
  border-radius: 9px;
  background: #fff;
  color: var(--trutakna-graphite);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.trutakna-rep-form__field input::placeholder {
  color: var(--trutakna-graphite);
  opacity: 1;
}

.trutakna-rep-form__field input:focus,
.trutakna-rep-form__toggle-input:focus,
.trutakna-rep-form__choice input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 198, 191, 0.18);
}

.trutakna-rep-form__field input:focus {
  border-color: var(--trutakna-deep-sea);
}

.trutakna-rep-form__copy {
  width: min(690px, 100%);
  margin-top: 2px;
  color: var(--trutakna-midnight);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.13;
}

.trutakna-rep-form__copy p {
  margin: 0;
}

.trutakna-rep-form__copy p + p {
  margin-top: 18px;
}

.trutakna-rep-form__required {
  margin-bottom: 18px;
}

.trutakna-rep-form__title {
  width: 100%;
  margin: 22px 0 4px;
  color: var(--trutakna-deep-sea);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.25rem, 1.8rem + 1vw, 2.1875rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}

.trutakna-rep-form__product {
  margin: 0 0.1em;
  font-weight: 400;
}

.trutakna-rep-form__contact-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -2px;
}

.trutakna-rep-form__toggle-input {
  appearance: none;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--trutakna-graphite);
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.trutakna-rep-form__toggle-input:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--trutakna-tidepool);
}

.trutakna-rep-form__toggle-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
  align-items: baseline;
  color: var(--trutakna-tidepool);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.75rem, 1.4rem + 0.8vw, 1.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: 0.66;
  cursor: pointer;
}

.trutakna-rep-form__toggle-yes {
  font-weight: 700;
}

.trutakna-rep-form__contact-methods {
  width: 100%;
  max-width: 730px;
  margin: 2px 0 12px;
  padding: 8px 0 0 30px;
  border: 0;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.trutakna-rep-form__contact-methods.is-active {
  opacity: 1;
}

.trutakna-rep-form__contact-methods legend {
  margin-bottom: 16px;
  color: var(--trutakna-soft-gray);
  font-family: "Apis", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
}

.trutakna-rep-form__choice {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--trutakna-soft-gray);
  font-family: "Apis", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
}

.trutakna-rep-form__choice input {
  appearance: none;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--trutakna-soft-gray);
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.trutakna-rep-form__choice input:checked::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  background: var(--trutakna-tidepool);
}

.trutakna-rep-form__choice em {
  font-style: italic;
  font-weight: 400;
}

.trutakna-rep-form__submit {
  min-width: 110px;
  min-height: 44px;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: #38c7c6;
  color: var(--trutakna-midnight);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 0.6;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.trutakna-rep-form__submit:hover,
.trutakna-rep-form__submit:focus-visible {
  background: var(--trutakna-tidepool);
  box-shadow: 0 12px 24px rgba(16, 28, 69, 0.12);
  transform: translateY(-1px);
}

.trutakna-rep-form__submit:focus-visible {
  outline: none;
}

.trutakna-rep-form__alert {
  margin-bottom: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

.trutakna-rep-form__alert--error {
  border: 1px solid rgba(199, 61, 77, 0.28);
  background: rgba(199, 61, 77, 0.08);
  color: var(--trutakna-error);
}

.trutakna-rep-form__alert--success {
  border: 1px solid var(--trutakna-success-border);
  background: var(--trutakna-success-bg);
  color: var(--trutakna-midnight);
}

.trutakna-rep-form__error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 4px;
  color: var(--trutakna-error);
  font-family: "Elza", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 16.5px;
  letter-spacing: 0;
}

.trutakna-rep-form__error::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 17px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='17' viewBox='0 0 18 17' fill='none'%3E%3Cpath d='M8.13987 2.21046C8.52273 1.52218 9.51149 1.52218 9.89435 2.21046L17.0939 15.1546C17.4661 15.8237 16.9824 16.6477 16.2178 16.6477H1.81642C1.0518 16.6477 0.568106 15.8237 0.940338 15.1546L8.13987 2.21046Z' stroke='%23F37775' stroke-width='1.2'/%3E%3Cpath d='M9.01711 5.68457V10.6647' stroke='%23F37775' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='9.01702' cy='12.9047' r='0.76' fill='%23F37775'/%3E%3C/svg%3E") center / contain no-repeat;
}

.trutakna-rep-form__field.has-error input,
.trutakna-rep-form__contact-methods.has-error {
  border-color: var(--trutakna-error);
}

.trutakna-rep-form__contact-methods.has-error {
  padding-left: 24px;
  border-left: 3px solid var(--trutakna-error);
}

.trutakna-rep-form__contact-methods .trutakna-rep-form__error {
  margin-top: 4px;
}

@media (max-width: 767px) {
  .trutakna-rep-form {
    padding: 24px 18px;
  }

  .trutakna-rep-form__row--split {
    grid-template-columns: 1fr;
  }

  .trutakna-rep-form__title {
    font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.4rem);
    line-height: 1.05;
  }

  .trutakna-rep-form__toggle-label {
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
    line-height: 1;
  }

  .trutakna-rep-form__contact-methods {
    padding-left: 0;
  }
}