@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --purple: #2b0063;
  --magenta: #ca0097;
  --magenta-dark: #bb008e;
  --violet: #9d00db;
  --orange: #ff6a00;
  --white: #ffffff;
  --muted: #aebacc;
  --disabled: #aab8c9;
  --success: #61be3b;
  --success-panel: #99b39b;
  --danger: #d8232f;
  --danger-panel: #c94f5c;
  --font: 'Roboto', Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute is only `display: none` in the UA stylesheet, so ANY author
   `display` beats it — `.btn-custom { display: flex }` was showing a hidden button.
   Keep this authoritative so `el.hidden = true` always works. */
[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--purple);
  color: var(--white);
  font-family: var(--font);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.page-content {
  width: 100%;
  min-height: 100dvh;
  background: var(--purple);
}

.phone-screen {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 375px;
  min-height: 100dvh;                /* was 812px: the iPhone X prototype frame, which
                                        left ~145px of empty scroll on shorter phones */
  margin: 0 auto;
  padding: 18px 18px 0;              /* bottom spacing now lives in .action-bar */
  flex-direction: column;
}

.phone-screen--large {
  max-width: 462px;
  min-height: 100dvh;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.brand__logo {
  display: block;
  width: 178px;
  height: auto;
}

.phone-screen--large .brand__logo {
  width: 240px;
}

/* Language switcher — a segmented pill, absolutely positioned inside .phone-screen
   (which is position: relative) so the logo stays optically centred. Offsets match
   the screen's own padding.

   Order is always EN | ไทย; the thumb sits on the active side, driven by [data-lang]
   from the server. Switching language is a page navigation, so there is no animation:
   the next page simply renders with the thumb already on the other side. */
.lang-switch {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  width: 112px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 13px;
  line-height: 1;
}

.lang-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: var(--magenta);
}

.lang-switch[data-lang="th"] .lang-switch__thumb {
  left: auto;
  right: 3px;
}

.lang-switch__opt {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 4px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
}

.lang-switch__opt--on {
  color: var(--white);
  font-weight: 700;
}

a.lang-switch__opt:hover {
  color: var(--white);
}

a.lang-switch__opt:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

.content {
  display: flex;
  align-items: center;
  flex: 1;
  flex-direction: column;
  text-align: center;
}

.copy {
  width: 100%;
  margin-top: 46px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
}

.copy strong {
  font-weight: 700;
}

.copy__payment {
  margin: 22px 0 0;
  font-size: 17px;
  font-weight: 700;
}

.phone-number {
  margin-top: 25px;
  font-size: 26px;
  line-height: 1.2;
}

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px 0 0;                  /* explicit: the UA bottom margin used to collapse into
                                        the button's margin-top; .action-bar no longer lets it */
  color: #aaa4ba;
  font-size: 18px;
}

.secure-note__lock {
  width: 18px;
  height: 18px;
}

.form-msisdn,
.form-pin,
.form-he {
  width: 100%;
}

.form-inputs {
  display: flex;
  width: 100%;
  height: 58px;
  margin-top: 45px;
  border: 2px solid var(--violet);
  border-radius: 30px;
  background: var(--white);
  overflow: hidden;
}

.form-inputs--error-orange {
  border-color: var(--orange);
}

.before-element {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  flex: 0 0 68px;
  background: linear-gradient(180deg, #b000e6, #9a00d4);
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
}

.form-control {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 28px;
  color: #16043f;
  text-align: center;
  background: var(--white);
  font-size: 18px;
}

.form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}

.pin-copy {
  margin-top: 74px;
  font-size: 18px;
  line-height: 1.75;
}

.form-pin .form-inputs {
  height: 70px;
  margin-top: 40px;
}

.form-pin .form-control {
  text-align: center;
  font-size: 24px;
}

.btn-custom,
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 30px;
  background: var(--magenta);
  color: var(--white);
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.btn-custom:hover,
.btn:hover {
  background: var(--magenta-dark);
}

.btn-custom[aria-disabled="true"],
.btn-custom:disabled,
.btn--disabled {
  background: var(--disabled);
  cursor: default;
}

.primary-action {
  margin-top: 34px;
}


.he-action {
  margin-top: 42px;
}

.requestpin-action {
  margin-top: 30px;
}

.toast {
  display: grid;
  width: 100%;
  min-height: 96px;
  margin-top: 32px;
  grid-template-columns: 52px 1fr;
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
}

.toast--compact {
  min-height: 77px;
  margin-top: 31px;
}

.toast--success .toast__icon {
  background: #68ae4a;
}

.toast--success .toast__body {
  background: var(--success-panel);
}

.toast--danger .toast__icon {
  background: var(--danger);
}

.toast--danger .toast__body {
  background: var(--danger-panel);
}

.toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast__body {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 13px 16px;
}

.toast__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

.toast__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.55;
}

.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  color: #68ae4a;
  font-size: 17px;
  font-weight: 700;
}

.icon-danger {
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
}

.ok-title {
  margin: 40px 0 0;
  font-size: 29px;
  font-weight: 400;
}

.success-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 156px;
  height: 156px;
  margin-top: 28px;
  border-radius: 50%;
  background: var(--success);
}

.success-mark::before {
  width: 72px;
  height: 38px;
  border: 13px solid var(--purple);
  border-top: 0;
  border-right: 0;
  content: "";
  transform: rotate(-45deg) translate(4px, -3px);
}

.ok-copy {
  margin-top: 25px;
  font-size: 18px;
  line-height: 1.85;
}

.ok-action {
  margin-top: 28px;
}

.welcome-title {
  margin: 38px 0 0;
  font-size: 26px;
  font-weight: 200;
  line-height: 1.2;
}

.welcome-title strong {
  font-weight: 400;
}

.welcome-visual {
  width: 100vw;
  max-width: 450px;
  height: 450px;
  margin-top: 30px;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  object-fit: cover;
}

.welcome-action {
  width: 260px;
  min-height: 54px;
  margin-top: 0;                     /* sits flush under the hero image */
}

/* Primary action bar — keeps the CTA reachable on every phone height.

   Wraps the screen's main button. While the content fits the viewport it sits exactly
   where the button used to (the button keeps its own margin-top). When the content is
   taller than the screen — welcome's 450px hero on a 667px phone pushed "Subscribe" 148px
   below the fold — it sticks to the bottom edge and the content scrolls behind it.

   The fade lives in ::before, hanging ABOVE the bar: it softens the cut through the image
   without adding height, so it never pushes the button down. Bottom spacing is 42px, the
   gap the button has naturally on a 812px phone, so it reads the same stuck or not. */
.action-bar {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 0 0 calc(42px + env(safe-area-inset-bottom));
  background: var(--purple);
}

.action-bar::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(43, 0, 99, 0), var(--purple));
  content: "";
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nav-links {
  display: grid;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 24px;
  gap: 10px;
}

.nav-links a {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
}

@media (max-width: 360px) {
  .phone-screen {
    padding-right: 14px;
    padding-left: 14px;
  }

  .lang-switch {
    top: 14px;
    right: 14px;
  }

  .brand__logo {
    width: 165px;
  }

  .copy__payment,
  .pin-copy {
    font-size: 19px;
  }

  .btn-custom,
  .btn {
    font-size: 18px;
  }
}