/* === BASE - Mobile === */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --zu-logo-color: hsl(165 88% 32% / 1);
}

button,
input,
.radio,
#back-arrow {
  transition: opacity 0.12s ease;
}

button:active,
input:active,
.radio:active,
#back-arrow:active {
  opacity: 0.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #00a078;
  box-shadow: 0 0 0 1px #00a078;
}

.color-warning {
  color: #ab2424;
}

.input-warning {
  border-color: #ab2424 !important;
  box-shadow: 0 0 0 1px #ab2424 !important;
}

.input-warning::placeholder {
  color: #ab2424;
}

.radio-warning .radio-ui {
  border: 2px solid #ab2424 !important;
  box-shadow: 0 0 0 1px rgba(171, 36, 36, 0.12);
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  background: #00a078 !important;
  display: block;
  justify-content: center;
  align-items: center;
  overflow: auto;
  height: auto;
}

label {
  font-weight: normal;
  margin-bottom: 0;
}

#container {
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  margin-bottom: 4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  scrollbar-width: none;
  overflow-y: auto;
}

#kc-content,
#kc-content-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* Back Arrow */
#back-arrow {
  color: #00a078;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  padding-top: 1.5rem;
  padding-left: 1rem;
  padding-bottom: 0.75rem;
  z-index: 1;
  border-radius: 16px;
}

/* Logo */
#zu-logo {
  height: 60px;
  width: 60px;
  display: block;
  margin-top: 1.5rem;
  background-color: var(--zu-logo-color);
  -webkit-mask: url("../img/brand.svg") no-repeat left center / contain;
  mask: url("../img/brand.svg") no-repeat left center / contain;
}

/* Title */
.login-pf-page .login-pf-header {
  width: 100%;
  margin-bottom: 0;
}

.form-group {
  font-size: 12px !important;
  margin-bottom: 0;
}

#kc-page-title {
  text-align: start;
  font-weight: bold;
  font-size: 24px !important;
  margin-top: -2px;
  margin-bottom: -2px;
}

#title-description {
  margin-bottom: 1rem;
  font-size: 15px;
}

#phone-description,
#code-description {
  font-size: 12px;
  font-weight: lighter;
  margin-bottom: 0.5rem;
}

/* Main container */
.login-pf-page {
  padding: 0;
  contain: layout;
}

.login-pf-page .card-pf {
  padding: 0;
}

.card-pf {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100dvh;
  width: 100dvw;
  margin: 0;
  box-sizing: border-box;
}

#kc-form {
  display: flex;
  flex-direction: column;
  color: #4e4f4f;
  padding-bottom: 2rem;
}

.first-step-form {
  flex: 1;
  min-height: 100%;
  padding-bottom: 7rem;
}

.form-content {
  flex: 1;
}

.pf-c-form-control {
  font-size: 12px !important;
  height: 40px !important;
}

/* Buttons */
#kc-login {
  background-color: #00a078 !important;
  font-weight: 600;
  color: white;
  border: none !important;
  border-radius: 8px !important;
  height: 40px;
}

#kc-login-verify {
  font-weight: 600;
  color: white;
  border: none !important;
  border-radius: 8px !important;
  height: 40px;
}

.kc-login-outline {
  color: #00a078;
  font-weight: 600;
  border: 1px solid #00a078 !important;
  border-radius: 8px !important;
  height: 40px !important;
}

#holder {
  position: fixed;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.kc-form-buttons {
  background-color: transparent;
  width: 100%;
  left: 0;
  bottom: 0;
  gap: 1.5rem;
}

/* Terms and Conditions */
#terms-card {
  color: inherit;
  display: flex;
  align-items: flex-start;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 14px;
  gap: 1rem;
}

#terms-card-copy {
  color: inherit;
  margin: 0;
  line-height: 1.5;
}

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin: 0;
}

.radio input {
  position: absolute;
  opacity: 0;
}

.terms-link {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline;
  font: inherit;
  font-weight: 400;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-link:focus-visible {
  outline: 1px solid #00a078;
  outline-offset: 2px;
  border-radius: 2px;
}

#terms-card.color-warning .terms-link {
  color: inherit;
}

#terms-card.color-warning,
#terms-card.color-warning #terms-card-copy,
#terms-card.color-warning label,
#terms-card.color-warning p {
  color: #ab2424 !important;
}

.radio-ui {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #6f7070;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.radio input:checked + .radio-ui {
  border-color: #00a078;
}

.radio input:checked + .radio-ui::after {
  content: "";
  display: flex;
  margin-left: 1px;
  margin-top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url("../img/check.svg") no-repeat left !important;
  background-color: #00a078 !important;
  background-position: center !important;
}

/* Overlay */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.overlay.is-open {
  display: flex;
}

.overlay-content {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 16px 16px 0 0;
  min-height: 86%;
  max-height: 86%;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

.overlay-content-exit {
  background-color: #fff;
  padding: 0 1.5rem 1.5rem 1.5rem;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 0;
}

h1 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.overlay-content-exit h1 {
  font-weight: bold;
  font-size: 18px;
  color: #363636;
}

.overlay-content-exit p {
  font-size: 16px;
  color: #363636 !important;
}

.close-btn-left {
  align-self: flex-start;
  background: none;
  border: 0;
  cursor: pointer;
  color: #4e4f4f;
  padding: 0;
}

.overlay-text {
  color: #363636;
  overflow-y: scroll;
  word-wrap: break-word;
  overflow-x: hidden;
  font-size: 14px;
  margin-top: 1rem;
  flex: 1;
  padding-right: 16px;
  margin-right: -16px;
}

.overlay-text h1 {
  color: #101010;
  font-size: 18px !important;
  font-weight: bold;
}

.overlay-text p {
  color: inherit;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.overlay-text strong,
.overlay-text span,
.overlay-text li {
  color: inherit;
}

.overlay-text p.sheet-section-title {
  color: #101010 !important;
  font-size: 18px;
  font-weight: 700;
  margin: 0.75rem 0 0.75rem;
}

.privacy-contact-link {
  color: #007a5c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.overlay-text p.privacy-contact-compact {
  margin-top: 0;
}

.overlay-text p.policy-update-note {
  margin-top: 1.75rem;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #6b6b6b;
  text-align: center;
}

.legal-cookie-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0 0 1.25rem;
}

.legal-cookie-card {
  border: 1px solid #d9dfdc;
  border-radius: 10px;
  background: transparent;
  padding: 0.875rem 0.875rem 0.125rem;
  font-size: 12px;
}

.overlay-text .legal-cookie-card p {
  margin-bottom: 0.625rem;
}

.overlay-text p.legal-cookie-name {
  margin-bottom: 0.75rem;
  color: #101010;
  font-size: 13px;
  font-weight: 700;
}

#exit-indicator {
  display: flex;
  padding-bottom: 1.25rem;
  align-content: center;
  justify-content: center;
  padding-top: 1.5rem;
}

#overlay-buttons-exit {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: white;
  padding-top: 1rem;
}

.zu-button {
  background-color: #00a078 !important;
  height: 40px !important;
  border: none !important;
  border-radius: 8px !important;
}

.zu-button-outline {
  border: 1px solid #00a078 !important;
  color: #00a078;
  height: 40px !important;
}

/* Info Card */
#info-card {
  background-color: rgb(245, 245, 245);
  border-radius: 8px;
  display: flex;
  margin-bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
  margin-top: 1.5rem;
  padding: 1rem;
  font-size: 12px;
}

#info-logo {
  height: 40px;
  width: 40px;
  background: url("../img/card-logo.svg") no-repeat left !important;
  background-size: contain !important;
  padding: 22px;
  margin-right: 1rem;
}

/* Form */
#kc-form {
  width: 100%;
}

/* Form Buttons*/
#kc-form input {
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

#smsMessage {
  font-size: 16px;
  margin-bottom: 1rem;
}

.pf-c-button {
  height: 100px;
  font-size: 12px !important;
}

/* ========================================================= */
/* === RESPONSIVE MEDIA QUERIES ============================ */
/* ========================================================= */

/* === Tablet === */
@media (min-width: 769px) and (max-width: 1199px) {
  label {
    font-size: large;
  }

  .card-pf {
    padding-top: 1rem !important;
  }

  .form-group {
    font-size: 12px !important;
  }

  #terms-card {
    font-size: 12px;
  }

  #terms-checkbox {
    height: 4rem;
    width: 4rem;
  }

  #holder {
    padding: 2rem;
  }
}

/* === Desktop === */
@media (min-width: 1200px) {
  body {
    display: flex;
    min-height: 100dvh;
  }

  .login-pf-page {
    height: 700px;
  }

  .card-pf {
    width: 500px;
    height: 760px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  }

  /* Modals */
  .legal-overlay {
    border-radius: 1rem;
  }

  .overlay-content {
    width: 500px;
    padding-left: 2rem;
    padding-right: 2rem;
    bottom: -4rem;
    border-radius: 1rem;
    max-height: 92%;
  }

  #confirm-exit-modal {
    border-radius: 1rem;
  }

  .overlay-content-exit {
    width: 100%;
    padding: 2rem;
    bottom: -4rem;
    border-radius: 1rem;
  }

  .overlay-text {
    font-size: 18px;
  }

  .overlay-text h1 {
    font-size: 24px !important;
  }

  /* Info Card */
  #info-card {
    font-size: 14px;
  }

  #info-logo {
    height: 60px;
    width: 100px;
  }

  /* Buttons */
  #holder {
    padding: 2rem;
    position: fixed;
    bottom: -2rem;
    border-radius: 16px;
  }

  .kc-form-buttons {
    position: static;
    width: 100%;
    margin: 2rem 0 0;
  }
}