/* Smart Advertising — Auth Ionic (Premium Paper) v3 */



:root {

  --sa-auth-canvas: #f9fafb;

  --sa-auth-surface: #ffffff;

  --sa-auth-border: #e5e7eb;

  --sa-auth-primary: #435ebe;

  --sa-auth-primary-hover: #364a98;

  --sa-auth-brand-green: #00c853;

  --sa-auth-text: #111827;

  --sa-auth-muted: #6b7280;

  --sa-auth-radius: 12px;

  --sa-auth-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .05);

  --ion-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}



html, body.sa-auth-body {

  margin: 0;

  height: 100%;

  background: var(--sa-auth-canvas);

  color: var(--sa-auth-text);

  font-family: var(--ion-font-family);

  -webkit-font-smoothing: antialiased;

}



.sa-auth-app {

  height: 100%;

  background: var(--sa-auth-canvas);

}



ion-app.sa-auth-app ion-page.sa-auth-page {

  display: flex;

  flex-direction: column;

  height: 100%;

  min-height: 100vh;

  min-height: 100dvh;

}



ion-content.sa-auth-content {

  flex: 1;

  --background: var(--sa-auth-canvas);

  --padding-top: 0;

  --padding-bottom: 0;

}



ion-content.sa-auth-content::part(scroll) {

  min-height: 100%;

  overflow-x: hidden;

}



/* Brand — immutable SMART|Advertising */

.sa-auth-app .sa-brand-logo { display: inline-flex; align-items: center; color: inherit; text-decoration: none; gap: 8px; }

.sa-auth-app .sa-brand-logo:hover { color: #00a844; }

.sa-auth-app .sa-brand-logo__text {

  display: inline-flex; align-items: center; font-weight: 700; line-height: 1.15;

  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.1rem);

}

.sa-auth-app .sa-brand-logo__text::before {
  content: '|';
  display: inline-block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  margin-right: 0.1em;
  color: var(--sa-auth-brand-green);
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.sa-auth-app .sa-brand-logo__smart { text-transform: uppercase; letter-spacing: 0.03em; }

.sa-auth-app .sa-brand-logo__rest { font-weight: 600; font-size: 0.75em; margin-left: 0.04em; }



.sa-auth-toolbar__brand-link { text-decoration: none; color: inherit; }

.sa-auth-toolbar__title {

  padding-inline-start: 12px;

  font-size: inherit;

}



/* Split layout */

.sa-auth-split {

  display: flex; flex-direction: column;

  width: 100%; max-width: 1280px; margin: 0 auto;

  min-height: calc(100vh - 56px);

  min-height: calc(100dvh - 56px);

  min-width: 0;

  overflow: hidden;

}

.sa-auth-split--centered .sa-auth-split__form {

  min-height: calc(100vh - 56px);

  min-height: calc(100dvh - 56px);

}

@media (min-width: 768px) {

  .sa-auth-split { flex-direction: row; align-items: stretch; }

  .sa-auth-split__form {
    flex: 0 0 42%;
    max-width: 520px;
    min-width: 0;
    width: 42%;
    overflow: hidden;
  }

  .sa-auth-split__promo { flex: 1 1 58%; min-width: 0; }

}



.sa-auth-split__form {

  display: flex; align-items: center; justify-content: center;

  padding: 24px 20px 32px;

  box-sizing: border-box;

  min-width: 0;

  max-width: 100%;

}

.sa-auth-card {

  width: 100%; max-width: 420px;

  background: var(--sa-auth-surface);

  border: 1px solid var(--sa-auth-border);

  border-radius: var(--sa-auth-radius);

  box-shadow: var(--sa-auth-shadow);

  padding: 28px 24px 32px;

  box-sizing: border-box;

  min-width: 0;

  overflow: hidden;

}

.sa-auth-card--register { max-width: min(460px, 100%); }

@media (min-width: 768px) {

  .sa-auth-card { padding: 36px 32px 40px; }

}



.sa-auth-card__title {

  margin: 0 0 6px; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em;

}

.sa-auth-card__sub {

  margin: 0 0 24px; font-size: 0.9375rem; color: var(--sa-auth-muted); line-height: 1.5;

  max-width: 100%; overflow-wrap: anywhere;

}



/* Alerts */

.sa-auth-alert {

  padding: 12px 14px; border-radius: 10px; font-size: 0.875rem; margin-bottom: 16px; line-height: 1.45;

}

.sa-auth-alert--danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.sa-auth-alert--warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }



/* Paper fields — native HTML, không dùng ion-item */

.sa-auth-form { width: 100%; min-width: 0; max-width: 100%; }

.sa-field-paper { margin-bottom: 14px; }

.sa-field-paper__label {

  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--sa-auth-muted);

  margin: 0 0 6px;

}

.sa-field-paper__wrap {

  display: flex; align-items: center; gap: 10px;

  background: #f9fafb; border: 1px solid var(--sa-auth-border); border-radius: 10px;

  padding: 0 12px; min-height: 48px; min-width: 0;

  transition: border-color .15s ease, box-shadow .15s ease;

}

.sa-field-paper__wrap:focus-within {

  border-color: var(--sa-auth-primary);

  box-shadow: 0 0 0 3px rgba(67, 94, 190, .12);

}

.sa-field-paper__icon { font-size: 1.15rem; color: var(--sa-auth-muted); flex-shrink: 0; }

.sa-field-paper__input {

  flex: 1; min-width: 0; border: none; background: transparent;

  font-size: 1rem; color: var(--sa-auth-text); padding: 12px 0;

  outline: none; font-family: inherit;

}

.sa-field-paper__input::placeholder { color: #9ca3af; }

.sa-field-paper__error { margin: 6px 0 0; font-size: 0.8125rem; color: #b91c1c; }



.sa-auth-field-row {

  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;

  max-width: 100%;

  width: 100%;

  min-width: 0;

  overflow: hidden;

}

.sa-auth-field-row > .sa-field-paper {

  min-width: 0; max-width: 100%; width: 100%;

  box-sizing: border-box;

}

/* Đăng ký: Họ/Tên luôn 1 cột — form split ~42% không đủ rộng cho 2 cột an toàn */

.sa-auth-card--register .sa-auth-field-row {

  grid-template-columns: minmax(0, 1fr);

  gap: 0;

}



.sa-auth-terms {

  display: flex; align-items: flex-start; gap: 10px;

  font-size: 0.875rem; color: var(--sa-auth-muted); line-height: 1.45;

  margin: 4px 0 16px; cursor: pointer;

}

.sa-auth-terms input { margin-top: 3px; flex-shrink: 0; accent-color: var(--sa-auth-primary); }

.sa-auth-terms a { color: var(--sa-auth-primary); font-weight: 600; }



.sa-btn-login-native {

  display: block; width: 100%; margin-top: 8px; min-height: 48px; padding: 12px 20px;

  border: none; border-radius: 10px; background: var(--sa-auth-primary); color: #fff;

  font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit;

  box-shadow: 0 4px 14px rgba(67, 94, 190, .28);

  transition: background .15s ease, opacity .15s ease;

  text-align: center; text-decoration: none; box-sizing: border-box;

}

.sa-btn-login-native:hover { background: var(--sa-auth-primary-hover); color: #fff; }

.sa-btn-login-native:disabled, .sa-btn-login-native.sa-is-submitting { opacity: 0.72; cursor: not-allowed; }

.sa-btn-login-native--link { line-height: 1.25; }



.sa-auth-register {

  text-align: center; margin-top: 24px; font-size: 0.9375rem; color: var(--sa-auth-muted);

}

.sa-auth-register a { color: var(--sa-auth-primary); font-weight: 600; text-decoration: none; }

.sa-auth-register a:hover { text-decoration: underline; }



.sa-auth-recaptcha {

  display: flex; justify-content: center; margin: 16px 0 8px; overflow: hidden;

}

@media (max-width: 767.98px) {

  .sa-auth-recaptcha .g-recaptcha { transform: scale(0.88); transform-origin: center top; }

}



/* Welcome / confirmation */

.sa-auth-welcome-icon {

  width: 56px; height: 56px; border-radius: 50%;

  background: rgba(0, 200, 83, .12); color: var(--sa-auth-brand-green);

  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;

}

.sa-auth-welcome-icon ion-icon { font-size: 2rem; }

.sa-auth-welcome-steps {

  list-style: none; margin: 0 0 20px; padding: 0;

  display: flex; flex-direction: column; gap: 12px;

}

.sa-auth-welcome-steps li {

  display: flex; align-items: flex-start; gap: 12px;

  font-size: 0.9rem; color: var(--sa-auth-text); line-height: 1.45;

  padding: 12px 14px; background: #f9fafb; border-radius: 10px; border: 1px solid var(--sa-auth-border);

}

.sa-auth-welcome-steps ion-icon { font-size: 1.25rem; color: var(--sa-auth-primary); flex-shrink: 0; margin-top: 2px; }

.sa-auth-welcome-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.sa-auth-welcome-step-ico .sa-tiktok-logo {
  vertical-align: middle;
}



/* Promo panel (desktop) */

.sa-auth-split__promo {

  display: none;

  position: relative;

  background: linear-gradient(145deg, #f9fafb 0%, #f0fdf4 55%, #ecfdf5 100%);

  padding: 48px 40px;

  overflow: hidden;

}

@media (min-width: 768px) {

  .sa-auth-split__promo { display: flex; flex-direction: column; justify-content: center; }

}

.sa-auth-promo__inner { position: relative; z-index: 1; max-width: 480px; margin: 0 auto; width: 100%; }

.sa-auth-promo__hero { margin-bottom: 28px; }

.sa-auth-promo__hero img, .sa-auth-promo__hero svg { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 12px; }

.sa-auth-promo__title {

  margin: 0 0 12px; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em;

}

.sa-auth-promo__body { margin: 0 0 20px; color: var(--sa-auth-muted); font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }

.sa-auth-promo__cta { font-size: 0.875rem; color: var(--sa-auth-muted); }

.sa-auth-promo__cta a { color: var(--sa-auth-primary); font-weight: 600; }



/* Mobile hero above form */

.sa-auth-mobile-hero { display: block; margin-bottom: 20px; text-align: center; }

@media (min-width: 768px) { .sa-auth-mobile-hero { display: none; } }

.sa-auth-mobile-hero img, .sa-auth-mobile-hero svg { max-width: 280px; margin: 0 auto; }



.sa-auth-mobile-promo {

  display: block; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sa-auth-border);

  text-align: center;

}

@media (min-width: 768px) { .sa-auth-mobile-promo { display: none; } }

.sa-auth-mobile-promo .sa-auth-promo__kicker { margin-bottom: 8px; }

.sa-auth-mobile-promo .sa-auth-promo__title { font-size: 1.1rem; }



/* Language switcher */

.sa-lang-trigger {

  --color: var(--sa-auth-text);

  font-weight: 600; font-size: 0.8125rem; text-transform: uppercase;

}

.sa-lang-popover { --width: 240px; }

.sa-lang-list { padding: 0; }

.sa-lang-item { --padding-start: 0; --inner-padding-end: 0; --min-height: 44px; }

.sa-lang-form { width: 100%; margin: 0; }

.sa-lang-form__btn {

  width: 100%; text-align: start; padding: 10px 16px; border: none; background: transparent;

  font-size: 0.9375rem; color: var(--sa-auth-text); cursor: pointer; font-family: inherit;

}

.sa-lang-form__btn:hover { background: #f3f4f6; }



.sa-auth-footer-mobile {

  text-align: center; padding: 16px 20px calc(16px + env(safe-area-inset-bottom));

  font-size: 0.8125rem;

}

.sa-auth-footer-mobile a { color: var(--sa-auth-muted); }

@media (min-width: 768px) { .sa-auth-footer-mobile { display: none; } }



[dir="rtl"] .sa-brand-logo__text::before { margin-right: 0; margin-left: 0.1em; }



/* Google / social sign-in — specificity cao để không bị Ionic ghi đè link xanh gạch chân */

.sa-auth-social { margin-bottom: 4px; width: 100%; max-width: 100%; min-width: 0; }

.sa-auth-app a.sa-btn-google,
.sa-auth-app .sa-btn-google {

  display: flex; align-items: center; justify-content: center; gap: 10px;

  width: 100%; max-width: 100%; min-height: 48px; padding: 10px 16px; box-sizing: border-box;

  border: 1px solid var(--sa-auth-border); border-radius: 10px; background: #fff;

  color: var(--sa-auth-text) !important; font-size: 0.9375rem; font-weight: 600;

  text-decoration: none !important; cursor: pointer; font-family: inherit;

  -webkit-appearance: none; appearance: none;

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;

}

.sa-auth-app a.sa-btn-google:hover,
.sa-auth-app a.sa-btn-google:focus-visible,
.sa-auth-app .sa-btn-google:hover,
.sa-auth-app .sa-btn-google:focus-visible {

  background: #f9fafb; border-color: #d1d5db; color: var(--sa-auth-text) !important;

  text-decoration: none !important;

  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);

  outline: none;

}

.sa-auth-app a.sa-btn-google:focus-visible,
.sa-auth-app .sa-btn-google:focus-visible {

  box-shadow: 0 0 0 3px rgba(67, 94, 190, .12);

}

.sa-btn-google__icon { flex-shrink: 0; display: block; width: 20px; height: 20px; }

.sa-btn-google__label { line-height: 1.25; }

.sa-auth-divider {

  display: flex; align-items: center; gap: 14px;

  margin: 20px 0 18px;

  width: 100%;

}

.sa-auth-divider::before, .sa-auth-divider::after {

  content: ""; flex: 1; height: 1px;

  background: linear-gradient(

    90deg,

    transparent 0%,

    var(--sa-auth-border) 18%,

    var(--sa-auth-border) 82%,

    transparent 100%

  );

}

.sa-auth-divider__label {

  flex-shrink: 0;

  padding: 5px 14px;

  border-radius: 999px;

  background: #f9fafb;

  border: 1px solid var(--sa-auth-border);

  color: #9ca3af;

  font-size: 0.75rem;

  font-weight: 500;

  letter-spacing: 0.02em;

  line-height: 1.2;

  text-transform: none;

}

.sa-auth-promo__kicker {

  display: inline-block; font-size: 0.75rem; font-weight: 600; text-transform: uppercase;

  letter-spacing: 0.06em; color: var(--sa-auth-primary); background: rgba(67, 94, 190, .08);

  padding: 6px 12px; border-radius: 999px; margin-bottom: 12px;

}