/* Copesetics Backend — Sign-In Styles */

:root {
  --background: #ffffff;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--background);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
}

.window-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  pointer-events: none;
}

.window-title {
  color: #17243c;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sign-in screen */

.page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* Raise the entire sign-in layout to replace the removed logo space. */
  transform: translateY(-46px);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 57px;
}


.brand-name {
  margin: 0;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1.2;
  white-space: nowrap;
}

.login-card {
  width: 100%;
  max-width: 367.5px;
  margin: 0 auto;
  transform: translateY(10px);
  padding: 30px 27px 25px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 19px;
  box-shadow:
    0 15px 45px rgba(27, 39, 70, 0.055),
    0 2px 8px rgba(27, 39, 70, 0.025);
}

.login-intro {
  font-weight: 600;
  margin: 0 0 26px;
  text-align: left;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.form-group {
  margin-bottom: 19px;
}

.form-group label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 550;
  color: #33415b;
}

.input-wrap {
  position: relative;
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: #8994a8;
  pointer-events: none;
}

.input-wrap input {
  display: block;
  width: 100%;
  height: 49px;
  padding: 0 15px 0 46px;
  border: 1px solid #d9e0eb;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.input-wrap input::placeholder {
  color: #9aa5b6;
}

.input-wrap input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(113, 83, 184, 0.12);
}

.sign-in-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 49px;
  margin-top: 25px;
  border: none;
  border-radius: 10px;
  background: var(--gradient);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.sign-in-button:hover {
  opacity: 0.94;
  box-shadow: 0 6px 18px rgba(178, 74, 157, 0.19);
}

.sign-in-button:active {
  transform: translateY(1px);
}

.sign-in-button:focus-visible {
  outline: 3px solid #c3b2e8;
  outline-offset: 3px;
}

.sign-in-button:disabled {
  opacity: 0.65;
  cursor: wait;
}

.sign-in-button svg {
  width: 18px;
  height: 18px;
}

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 23px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.security-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  color: var(--purple);
}

.security-note p {
  margin: 0;
  color: #7b8799;
  font-size: 12px;
  line-height: 1.6;
}


/* Error pop-up */

.login-error-dialog {
  width: min(380px, calc(100% - 36px));
  max-width: 380px;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 20px 65px rgba(23, 36, 60, 0.18);
  text-align: center;
}

.login-error-dialog::backdrop {
  background: rgba(18, 27, 48, 0.42);
}

.login-error-dialog h2 {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.5px;
}

.login-error-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
}

.login-error-close {
  display: block;
  width: 100%;
  height: 46px;
  margin-top: 24px;
  border: none;
  border-radius: 10px;
  background: var(--gradient);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.login-error-close:hover {
  opacity: 0.94;
}

.login-error-close:focus-visible {
  outline: 3px solid #c3b2e8;
  outline-offset: 3px;
}

/* Responsive layout */

@media (max-height: 720px) {
  body {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .brand {
    margin-bottom: 39px;
  }

  .page {
    transform: translateY(-13px);
  }


  .login-card {
    padding-top: 22px;
    padding-bottom: 20px;
  }

  .login-intro {
    margin-bottom: 18px;
  }

  .form-group {
    margin-bottom: 14px;
  }

  .sign-in-button {
    margin-top: 17px;
  }

  .security-note {
    margin-top: 17px;
    padding-top: 15px;
  }

  .footer {
    margin-top: 34px;
  }
}

@media (max-width: 540px) {
  body {
    padding-left: 17px;
    padding-right: 17px;
  }

  .brand-name {
    font-size: 25px;
  }

  .login-card {
    padding-left: 23px;
    padding-right: 23px;
  }

  .login-error-dialog {
    padding: 25px 22px;
  }
}


/* Accessible show/hide control for password fields. */
.password-visibility-wrap { position:relative; display:block; width:100%; }
.password-visibility-wrap input { padding-right:48px !important; }
.password-visibility-toggle { position:absolute; top:50%; right:9px; transform:translateY(-50%); z-index:2; border:0; background:transparent; color:#7153b8; font:inherit; font-size:12px; font-weight:600; padding:8px; cursor:pointer; border-radius:5px; }
.password-visibility-toggle:focus-visible { outline:2px solid #7153b8; outline-offset:1px; }

.password-visibility-toggle { display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:5px; }
.password-visibility-toggle svg { display:block; width:20px; height:20px; }

.security-note-second-line { display:block; margin-top:3px; }

/* Keep the welcome heading on one line while retaining a compact sign-in form. */
@media (max-width: 690px) {
  .brand-name { font-size: clamp(14px, 4vw, 25px); letter-spacing: -0.6px; }
}

/* Keep field icons visible above password visibility input wrappers. */
.input-wrap > .input-icon {
  z-index: 3;
}

/* Move the complete sign-in composition up by 10px. */
.page { translate: 0 -10px; }


/* Copesetics Accounts — UI-only variation of the original Backend sign-in. */
body { align-items: safe center; overflow-y: auto; }
.page { transform: none; translate: none; padding: 22px 0 40px; }
.brand { gap: 17px; margin-bottom: 30px; }
.brand-logo { width: 90px; height: 90px; object-fit: contain; }
.brand-name { white-space: normal; max-width: 680px; }
.login-card { max-width: 396px; transform: none; }
.login-intro { margin-bottom: 23px; }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.label-row label { margin-bottom: 9px; }
.text-link { color: var(--purple); text-decoration: none; font-size: 13px; font-weight: 600; }
.text-link:hover { text-decoration: underline; }
.text-link:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.subview-title { margin: 0 0 8px; font-size: 22px; letter-spacing: -.45px; }
.subview-copy { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 0 23px; }
.input-wrap input.no-icon { padding-left: 15px; }
@media (max-width: 540px) { .brand { gap: 10px; } .brand-logo { width: 72px; height: 72px; } .brand-name { font-size: clamp(21px, 5vw, 26px); } }
@media (max-height: 720px) { .page { transform: none; } .brand { margin-bottom: 25px; } }

/* Accounts registration: responsive sections with natural vertical scrolling. */
.login-card:has([data-view="create-account"]:not([hidden])) { max-width: 650px; }
.form-section { font-size: 14px; font-weight: 650; margin: 23px 0 15px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.field-grid .form-group { min-width: 0; }
.login-card select { width:100%; height:49px; border:1px solid #d9e0eb; border-radius:10px; background:#fff; padding:0 12px; font:inherit; font-size:14px; color:var(--text); }
.login-card select:focus { outline:2px solid var(--purple); outline-offset:1px; }
.username-field {display:flex; min-width:0; border:1px solid #d9e0eb; border-radius:10px; overflow:hidden; align-items:center;}
.username-field input {height:47px; min-width:0; flex:1; border:0; outline:0; padding:0 10px; font:inherit; font-size:14px;}
.username-field span {white-space:nowrap; background:#f7f8fb; color:#58657a; padding:15px 10px; font-size:12px;}
.login-card small {display:block; color:#718096; font-size:11px; line-height:1.55; margin:6px 0 12px;}
.check-row {display:flex; align-items:flex-start; gap:10px; margin:18px 0 6px; font-size:13px; line-height:1.55; color:var(--text);}
.check-row input {flex-shrink:0; margin-top:3px;}
#register-photo {width:100%; font-size:13px;}
@media(max-width:540px){.field-grid{grid-template-columns:1fr;gap:0}.username-field span{font-size:11px;padding-left:6px;padding-right:6px}}


/* Isolated WhatsApp proof-of-number test; does not enroll accounts. */
.whatsapp-verification { margin: 12px 0 19px; padding: 13px 14px; border: 1px solid #d9e0eb; border-radius: 10px; background: #f9fbfd; }
.whatsapp-test-button, .whatsapp-check-button { appearance:none; font:inherit; font-size:13px; font-weight:600; border:1px solid var(--purple); border-radius:8px; background:white; color:var(--purple); padding:11px 13px; cursor:pointer; }
.whatsapp-test-button:hover, .whatsapp-check-button:hover { background:#f2edfb; }
.whatsapp-test-button:disabled, .whatsapp-check-button:disabled { opacity:.6; cursor:wait; }
.whatsapp-verification-panel { margin:11px 0 0; font-size:13px; line-height:1.55; }
.whatsapp-verification-panel p { margin:0 0 10px; }
.whatsapp-action-link { display:inline-block; border-radius:8px; padding:10px 13px; margin:1px 8px 8px 0; color:white; background:#196b48; text-decoration:none; font-size:13px; font-weight:650; }
.whatsapp-action-link:hover { background:#155338; }
.whatsapp-check-button { margin:1px 0 8px; }
.whatsapp-verification [hidden] { display:none !important; }
.whatsapp-action-link:focus-visible, .whatsapp-test-button:focus-visible, .whatsapp-check-button:focus-visible { outline:2px solid var(--purple); outline-offset:3px; }