/* Override @font-face */
@font-face { font-family: Roboto; font-style: normal; font-display: swap; font-weight: 400; src: url("/itsme/assets/fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-display: swap; font-weight: 500; src: url("/itsme/assets/fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-display: swap; font-weight: 700; src: url("/itsme/assets/fonts/roboto-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-display: swap; font-weight: 400; src: url("/itsme/assets/fonts/robotoslab-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Slab"; font-style: normal; font-display: swap; font-weight: 700; src: url("/itsme/assets/fonts/robotoslab-700.woff2") format("woff2"); }

:root {
  --im-primary-container-inline-size: 100%;
  --im-primary-container-block-size: 100%;
  --im-primary-padding-inline-start: 16px;
}
@media (min-width: 744px) {
  :root { --im-primary-container-inline-size: 418px; --im-primary-padding-inline-start: 175px; }
}
@media (min-width: 1181px) {
  :root { --im-primary-container-inline-size: 436px; --im-primary-container-block-size: 640px; --im-secondary-container-inline-size: 283px; --im-primary-padding-inline-start: 114px; }
}
@media (min-width: 1280px) {
  :root { --im-primary-container-inline-size: 466px; --im-primary-container-block-size: 716px; --im-secondary-container-inline-size: 466px; --im-primary-padding-inline-start: 162px; }
}

*, *:before, *:after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; line-height: 1; }
body {
  font-family: Roboto, sans-serif;
  background: #fff;
  color: #202120;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.tpl-container { display: flex; flex-direction: column; inline-size: 100%; min-height: 100vh; }

.fui-background { background: #fff; }
@media (min-width: 1181px) {
  .fui-background { background-color: #edf0eb; bottom: 0; left: calc(50% + 60px); position: fixed; height: 100%; display: block; right: 0; top: 0; z-index: -2; }
  .fui-curve { background: url(/itsme/assets/ui/curved-background-new.svg) left top no-repeat; background-size: cover; bottom: 0; left: 0; position: absolute; top: 0; width: 180px; z-index: -1; }
}

.im-header-wrap { margin-inline: 16px; margin-block-start: 16px; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 1181px) { .im-header-wrap { margin-inline: 64px; } }

.header-image { width: 64px; height: 64px; }
.header-image a { display: inline-block; width: 64px; height: 64px; }
.header-image img { width: 64px; height: 64px; }

.header-locales { position: relative; z-index: 9000; }
.locale-btn { border: none; background: none; cursor: pointer; padding: 0; padding-inline-end: 8px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; color: #202120; height: 40px; white-space: nowrap; }
.locale-btn:after { display: inline-block; content: ""; border: none; background-color: #202120; -webkit-mask: url(/itsme/assets/ui/ChevronDown.svg) center no-repeat; mask: url(/itsme/assets/ui/ChevronDown.svg) center no-repeat; height: 24px; width: 24px; aspect-ratio: 1; vertical-align: middle; margin-inline-start: 8px; }
.locale-container.open .locale-btn { color: #ff4612; }
.locale-container.open .locale-btn:after { background-color: #ff4612; -webkit-mask-image: url(/itsme/assets/ui/ChevronUp.svg); mask-image: url(/itsme/assets/ui/ChevronUp.svg); }
.locale-list { display: none; position: absolute; top: 40px; right: 0; border-radius: 16px; background: #fff; width: 248px; padding: 16px; list-style: none; margin: 0; box-shadow: 0 8px 32px rgba(0,0,0,0.15); z-index: 9999; }
.locale-container.open .locale-list { display: block; }
.locale-list li { border-radius: 8px; height: 53px; display: flex; align-items: center; }
.locale-list li button { width: 100%; border: none; background: none; text-align: start; padding-inline-start: 16px; color: #202120; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; cursor: pointer; height: 100%; border-radius: 8px; }
.locale-list li button:hover { background-color: #edf0eb; }
.locale-list li.selected button { font-weight: 700; }

.im-main { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; flex: 1; flex-grow: 0; }
@media (min-width: 744px) { .im-main { grid-template-columns: repeat(12, 1fr); margin-inline: 64px; } }
@media (min-width: 1181px) { .im-main { place-items: center; margin-inline: 64px; flex-grow: 1; margin-block-end: 24px; } }
@media (min-width: 1280px) { .im-main { max-inline-size: 1280px; margin-inline: max(64px, (100vw - 1280px) / 2); } }

.im-spacer { flex: 2; flex-grow: 1; inline-size: 100%; min-height: 48px; grid-column-end: span 4; }
@media (min-width: 1181px) { .im-spacer { display: none; } }

.im-content-primary { display: grid; grid-column-end: span 4; margin-inline: 16px; margin-block-start: 40px; }
@media (min-width: 428px) { .im-content-primary { justify-self: center; max-inline-size: 504px; } }
@media (min-width: 744px) { .im-content-primary { grid-column: span 12; margin-inline: auto; inline-size: 75%; } }
@media (min-width: 1181px) { .im-content-primary { inline-size: 100%; grid-column: 2 / span 6; max-inline-size: 504px; } }

.im-content-secondary { display: none; grid-column-start: 9; grid-column-end: span 4; }
@media (min-width: 1181px) {
  .im-content-secondary { inline-size: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .im-content-secondary img { display: inline-block; margin-bottom: 56px; inline-size: 208px; }
  .im-content-secondary h2 { font-family: Roboto Slab, serif; font-size: 16px; font-weight: 700; line-height: 24px; margin-block-end: 8px; }
  .im-content-secondary p { margin-inline: 64px; font-family: Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; }
}

h1.form-title { margin-block-end: 16px; font-family: Roboto Slab, serif; font-size: 28px; font-weight: 700; line-height: 36px; color: #202120; margin-top: 0; }
h1.form-title:focus-visible { outline: none; }

p.form-desc { margin-bottom: 32px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; color: #202120; }

label.field-label { font-family: Roboto, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; display: inline-block; inline-size: 100%; }
.field-content { margin-block-start: 4px; }
.field-errors { margin-block-start: 8px; color: #DB0000; font-family: Roboto, sans-serif; font-size: 16px; min-height: 16px; font-weight: 400; line-height: 24px;}
.input-block { display: block; margin-bottom: 24px; }
.input-block.phone-block { margin-bottom: 5px; }

.phone-main { display: flex; border: 1px solid #747474; border-radius: 8px; padding: 1px; background: #fff; height: 52px; width: 100%; }
.phone-main:hover, .phone-main:focus-within { border: 1px solid transparent; outline: 2px solid #008048; outline-offset: -1px; }
.phone-main.error { border: 1px solid #DB0000; }

.country-code-btn { border: none; background: transparent; display: flex; flex-shrink: 0; flex-direction: row; align-items: center; padding: 14px 3px 14px 16px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; cursor: pointer; color: #202120; }
.country-code-btn img { margin-right: 8px; display: inline-block; width: 24px; height: 24px; }
@media (min-width: 744px) { .country-code-btn img { display: none; } }
@media (min-width: 800px) { .country-code-btn img { display: inline-block; } }
.country-code-btn:after { display: inline-block; content: " "; background: url(/itsme/assets/ui/ChevronDown.svg) no-repeat center; width: 24px; height: 24px; margin-left: 4px; }

.phone-separator { inline-size: 1px; block-size: 28px; background-color: #9fa59b; align-self: center; margin-inline: 1px 14px; }
.phone-number-wrap { display: flex; flex-grow: 1; align-items: center; }

input.phone-input { width: 100%; box-sizing: border-box; height: 90%; background: #fff; border: none; outline: none; padding: 0; color: #212121; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; caret-color: #009eb4; }
input.phone-input::placeholder { color: #747474; }

.recaptcha-wrap { display: none; margin-bottom: 40px; }
.recaptcha-box { width: 304px; height: 78px; border: 1px solid #d3d3d3; border-radius: 3px; background: #f9f9f9; display: flex; align-items: center; padding: 0 16px; gap: 16px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.recaptcha-box input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; cursor: pointer; accent-color: #008048; }
.recaptcha-box .recaptcha-label { font-family: Roboto, sans-serif; font-size: 14px; color: #202120; flex: 1; }
.recaptcha-brand { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.recaptcha-brand span { font-size: 8px; color: #747474; white-space: nowrap; }

p.privacy-text { margin-bottom: 24px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; color: #202120; }
p.privacy-text a { color: #008048; }

.btn-primary-im { color: #fff; background-color: #1da067; border: 1px solid #22ba78; width: 100%; padding: 11px 23px; box-sizing: border-box; border-radius: 8px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; cursor: pointer; transition: background-color 0.15s; }
.btn-primary-im:hover { background-color: #008048; border-color: #1a8e5c; }
.btn-primary-im:active { background-color: #008048; border-color: #1a8e5c; box-shadow: inset 0 0 4px rgba(0,0,0,0.25); }
.btn-primary-im[aria-disabled="true"] { background-color: #f0f0f0; border-color: #f0f0f0; color: #747474; cursor: not-allowed; }

.btn-ghost-im { color: #1da067; background-color: transparent; border: 1px solid #1da067; width: 100%; padding: 11px 23px; box-sizing: border-box; border-radius: 8px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; cursor: pointer; }
.btn-ghost-im:hover { color: #008048; border-color: #008048; }

.dialog-bg { display: none; position: fixed; z-index: 10000; width: 100vw; height: 100vh; inset: 0; }
.dialog-bg.open { display: block; }
.skrim-bg { background-color: #202120; opacity: 0.4; position: fixed; inset: 0; }
.skrim-content-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }

.cl-container { background: #fff; box-shadow: 0 16px 24px rgba(0,0,0,0.25); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; width: 420px; max-width: 100%; height: calc(100vh - 32px); max-height: 700px; }
@media (max-width: 427px) { .cl-container { border-radius: 0; width: 100vw; height: 100vh; max-height: none; } }

.cl-header { padding: 0; display: flex; align-items: center; justify-content: center; margin-top: 16px; margin-bottom: 20px; position: relative; flex-shrink: 0; }
.cl-header h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 28px; font-family: Roboto Slab, serif; }
.cl-close { background: url(/itsme/assets/ui/close.svg) no-repeat center; background-size: 18px; width: 24px; height: 24px; border: none; position: absolute; right: 12px; cursor: pointer; }
.cl-clear { background: url(/itsme/assets/ui/clear.svg) no-repeat center; background-size: 18px; width: 24px; height: 24px; border: none; cursor: pointer; visibility: hidden; }
.cl-clear.show { visibility: visible; }

.cl-sub { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.cl-search { border: 1px solid #747474; border-radius: 8px; margin: 4px 16px 24px; padding: 12px 5px 12px 16px; display: flex; flex-shrink: 0; }
@media (min-width: 428px) { .cl-search { margin: 4px 40px 24px; } }
.cl-search:focus-within { border: 1px solid transparent; outline: 2px solid #008048; outline-offset: -1px; }
.cl-search input { width: 100%; height: 24px; outline: none; border: none; padding-left: 30px; background: url(/itsme/assets/ui/looking-glass.svg) no-repeat; background-position-y: center; flex: 2 0; color: #212121; caret-color: #009eb4; font-family: Roboto, sans-serif; font-size: 16px; }
.cl-search input::placeholder { color: #747474; }

.cl-countries { overflow-y: scroll; padding: 0 16px; flex: 1; }
@media (min-width: 428px) { .cl-countries { padding: 0 40px; } }
.cl-countries h2 { font-family: Roboto, sans-serif; font-size: 18px; font-weight: 700; line-height: 28px; margin: 0 0 4px; }
.cl-countries ul { list-style: none; padding: 0; margin: 0 0 24px; }

.country-row-btn { width: 100%; background: none; border: none; padding: 0; height: 60px; display: flex; align-items: center; box-shadow: inset 0 -1px #e6e6e6; color: #202120; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; cursor: pointer; }
.country-row-btn:hover { background-color: #f9faf9; }
.country-row-btn.selected { font-weight: 700; }
.country-row-sub { width: 100%; display: flex; align-items: center; }
.country-flag-wrap { display: flex; align-items: center; height: 24px; margin: 0 8px; }
.country-flag-wrap img { width: 24px; height: 24px; }
.country-name-lbl { text-align: start; flex: 1; }
.country-dialcode { margin-right: 8px; color: #747474; font-size: 16px; }
.cl-no-results { display: none; color: #747474; font-family: Roboto, sans-serif; font-size: 16px; padding: 16px 0; }
.cl-no-results.show { display: block; }

.confirm-bg { display: none; position: fixed; z-index: 1001; width: 100vw; height: 100vh; inset: 0; }
.confirm-bg.open { display: block; }
.confirm-wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.confirm-box { background: #fff; border-radius: 16px; padding: 48px; text-align: center; max-width: 590px; width: 100%; }
@media (max-width: 959px) { .confirm-box { padding: 24px 16px; } }
.confirm-box img { margin-block-end: 16px; width: 80px; }
p.confirm-sub { margin-block-end: 8px; font-family: Roboto, sans-serif; font-size: 18px; font-weight: 400; line-height: 28px; }
p.confirm-phone { font-family: Roboto Slab, serif; font-size: 28px; font-weight: 700; line-height: 36px; margin-block-end: 32px; color: #202120; }
.confirm-btns { width: 100%; display: flex; flex-direction: row; justify-content: center; gap: 12px; }
@media (max-width: 959px) { .confirm-btns { flex-direction: column; } }

.im-footer { grid-column-end: span 4; margin-inline: 16px; margin-block-end: 24px; }
@media (min-width: 1181px) { .im-footer { display: none; } }

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

h1.form-title {
  font-family: 'Roboto Slab', serif !important;
}

p.form-desc, label.field-label, p.privacy-text, input.phone-input, .btn-primary-im {
  font-family: 'Roboto', sans-serif !important;
}
/* ═══ DARK MODE AUTO ═══ */

@media (prefers-color-scheme: dark) {
  html, body, .tpl-container, .fui-background, .im-content-primary, .im-main, .im-spacer { background: #000 !important; color: #fff !important; }

  h1.form-title { color: #fff; }
  p.form-desc, label.field-label, p.privacy-text { color: #fff; }
  p.privacy-text a { color: #79dcab; }

  .locale-btn { color: #fff; }
  .locale-btn:after { background-color: #fff; }
  .locale-list { background: #1c1c1e; box-shadow: 0 8px 32px rgba(0,0,0,0.6); }
  .locale-list li button { color: #fff; }
  .locale-list li button:hover { background-color: #2c2c2e; }

  .phone-main { background: #1c1c1e; border-color: #3a3a3c; }
  .phone-main:hover, .phone-main:focus-within { outline-color: #79dcab; border-color: transparent; }
  .phone-main.error { border-color: #ff453a; }
  input.phone-input { background: #1c1c1e; color: #fff; caret-color: #79dcab; }
  input.phone-input::placeholder { color: #636366; }
  .phone-separator { background-color: #3a3a3c; }
  .country-code-btn { color: #fff; }
  .country-code-btn:after { background-color: #1c1c1e; }

  .btn-primary-im[aria-disabled="true"] { background-color: #1c1c1e; border-color: #1c1c1e; color: #636366; }
  .btn-ghost-im { color: #79dcab; border-color: #79dcab; }

  .cl-container { background: #1c1c1e; }
  .cl-header h1 { color: #fff; }
  .cl-close { filter: invert(1); }
  .cl-search { border-color: #3a3a3c; background: #2c2c2e; }
  .cl-search input { background: #2c2c2e; color: #fff; }
  .cl-search input::placeholder { color: #636366; }
  .cl-countries h2 { color: #fff; }
  .country-row-btn { color: #fff; box-shadow: inset 0 -1px #2c2c2e; }
  .country-row-btn:hover { background-color: #2c2c2e; }
  .country-dialcode { color: #8e8e93; }

  .confirm-box { background: #1c1c1e !important; }
  p.confirm-sub { color: #ccc; }
  p.confirm-phone { color: #fff; }
  .dialog-bg .skrim-content-wrap { background: transparent !important; }

  .recaptcha-box { background: #1c1c1e; border-color: #3a3a3c; }
  .recaptcha-label { color: #ccc; }

  .skrim-bg { background-color: #000; opacity: 0.7; }
  .field-errors { color: #ff453a; }

  .id-back { background: #2c2c2e; border-radius: 50%; }
  .id-back svg { stroke: #fff; }
  .id-help svg circle { stroke: #79dcab; }
  .id-help svg text { fill: #79dcab; }
}

@media (prefers-color-scheme: dark) {
  .btn-primary-im:hover, .btn-primary-im:active { background-color: #42c587 !important; border-color: #42c587 !important; }
  .btn-ghost-im:hover, .btn-ghost-im:active { color: #42c587 !important; border-color: #42c587 !important; }
  .phone-main:hover, .phone-main:focus-within { outline-color: #79dcab !important; }
}

@media (prefers-color-scheme: dark) {
  .btn-primary-im {
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
  }
}

.btn-primary-im[aria-disabled="true"]:hover {
  background-color: #f0f0f0;
  border-color: #f0f0f0;
  cursor: not-allowed;
}
@media (prefers-color-scheme: dark) {
  .btn-primary-im[aria-disabled="true"]:hover {
    background-color: #1c1c1e !important;
    border-color: #1c1c1e !important;
  }
}

@media (prefers-color-scheme: dark) {
  .confirm-box img[src*="smartphone"] {
    filter: invert(1) hue-rotate(180deg);
  }
}