/* ============================================================================
 * SPA Calendar Booking — application styles
 * Visually clones Calendly's inline embed (Calendly | Meta Careers screenshot).
 * Scoped to elements rendered by assets/app.js. Does not modify the existing
 * core.css / app.css cascade for other pages.
 * ========================================================================= */

/* ─── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --calendly-bg: #ffffff;
  --calendly-page-bg: #f5f7fa;
  --calendly-border: #e2e8f0;
  --calendly-border-strong: #cbd5e1;
  --calendly-text: #1a1a1a;
  --calendly-text-muted: #475569;
  --calendly-text-subtle: #64748b;
  --calendly-primary: #006bff;
  --calendly-primary-hover: #0058d6;
  --calendly-primary-soft: #e6f0ff;
  --calendly-day-bg: #e6f0ff;
  --calendly-day-text: #006bff;
  --calendly-day-disabled-text: #cbd5e1;
  --calendly-error-bg: #fef2f2;
  --calendly-error-text: #b91c1c;
  --calendly-shadow:
    0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);

  /* Layout */
  --bp-tablet: 768px;
  --info-col-width: 320px;
  --slots-col-width: 280px;
  --card-radius: 12px;
  --card-padding: 32px;
}

/* ─── Reset that does not bleed into other pages ────────────────────────── */
#app,
#app * {
  box-sizing: border-box;
}

#app {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  color: var(--calendly-text);
  line-height: 1.5;
  min-height: 100vh;
  background: var(--calendly-page-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* ─── Calendar UI card ──────────────────────────────────────────────────── */
.calendar-ui {
  width: 100%;
  max-width: 1024px;
  background: var(--calendly-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--calendly-shadow);
  display: grid;
  grid-template-columns: var(--info-col-width) 1fr;
  overflow: hidden;
  position: relative;
}

.calendar-ui--with-slots {
  grid-template-columns: var(--info-col-width) minmax(0, 1fr) var(
      --slots-col-width
    );
}

/* Info column (logo + meeting summary) */
.calendar-ui__info {
  padding: var(--card-padding);
  border-right: 1px solid var(--calendly-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calendar-ui__brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-ui__brand-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.calendar-ui__brand-name {
  font-size: 20px;
  font-weight: 700;
  color: #006bff;
}

.calendar-ui__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.calendar-ui__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--calendly-text-muted);
}

.calendar-ui__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-ui__meta-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Month column */
.calendar-ui__month {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calendar-ui__section-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.calendar-ui__month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 0;
}

.calendar-ui__nav {
  appearance: none;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--calendly-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.calendar-ui__nav:hover:not([disabled]) {
  background: var(--calendly-primary-soft);
}

.calendar-ui__nav[disabled] {
  color: var(--calendly-day-disabled-text);
  cursor: not-allowed;
}

.calendar-ui__month-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  min-width: 140px;
  text-align: center;
}

.calendar-ui__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--calendly-text-subtle);
  text-transform: uppercase;
  padding: 8px 0;
}

.calendar-ui__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-ui__day {
  appearance: none;
  border: 0;
  background: transparent;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--calendly-day-text);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.05s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 40px;
}

.calendar-ui__day:hover:not([disabled]) {
  background: var(--calendly-day-bg);
}

.calendar-ui__day--available {
  background: var(--calendly-primary-soft);
  color: var(--calendly-day-text);
}

.calendar-ui__day--today::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--calendly-primary);
}

.calendar-ui__day--selected {
  background: var(--calendly-primary) !important;
  color: #fff !important;
}

.calendar-ui__day--outside,
.calendar-ui__day--past,
.calendar-ui__day[disabled] {
  color: var(--calendly-day-disabled-text);
  cursor: not-allowed;
  background: transparent;
}

.calendar-ui__day--no-availability {
  color: var(--calendly-day-disabled-text);
  cursor: not-allowed;
  background: transparent;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.6;
}

.calendar-ui__day--no-availability:hover {
  background: transparent;
}

/* Month-level availability fetch in flight — block clicks on the entire
   grid and dim it so the visitor knows the dates aren't ready yet
   (Req 1.12). Individual cells already get `disabled` from `_renderGrid`
   while loading, so this is purely a visual hint. */
.calendar-ui__grid--loading {
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.12s ease;
}

.calendar-ui__month-title.calendar-ui__month-loading {
  color: var(--calendly-text-subtle);
  font-style: italic;
  font-weight: 500;
}

.calendar-ui__timezone {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.calendar-ui__timezone-label {
  font-weight: 600;
}

.calendar-ui__timezone-value {
  color: var(--calendly-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Slots column */
.calendar-ui__slots-pane {
  padding: var(--card-padding);
  border-left: 1px solid var(--calendly-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 580px;
  overflow-y: auto;
}

.calendar-ui__slots-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.calendar-ui__slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.calendar-ui__slot {
  appearance: none;
  background: var(--calendly-bg);
  border: 1.5px solid var(--calendly-primary);
  color: var(--calendly-primary);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.calendar-ui__slot:hover {
  background: var(--calendly-primary);
  color: #fff;
}

.calendar-ui__loading,
.calendar-ui__error {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--calendly-text-muted);
}

.calendar-ui__error {
  background: var(--calendly-error-bg);
  color: var(--calendly-error-text);
  border-radius: 8px;
}

[hidden] {
  display: none !important;
}

/* ─── Booking form (rendered inside slots pane) ─────────────────────────── */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.booking-form__label {
  font-size: 14px;
  font-weight: 600;
}

.booking-form__input,
.popup-view__input,
.popup-view__select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  /* >= 16px prevents iOS zoom on focus (Req 16.6) */
  border: 1.5px solid var(--calendly-border-strong);
  border-radius: 6px;
  font-family: inherit;
  color: inherit;
  background: var(--calendly-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.booking-form__input:focus,
.popup-view__input:focus,
.popup-view__select:focus {
  outline: none;
  border-color: var(--calendly-primary);
  box-shadow: 0 0 0 3px rgba(0, 107, 255, 0.15);
}

.booking-form__input--invalid,
.popup-view__input--invalid {
  border-color: var(--calendly-error-text);
}

.booking-form__error,
.popup-view__error {
  color: var(--calendly-error-text);
  font-size: 13px;
  min-height: 18px;
}

.booking-form__submit,
.popup-view__submit {
  appearance: none;
  background: var(--calendly-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s ease;
}

.booking-form__submit:hover:not([disabled]),
.popup-view__submit:hover:not([disabled]) {
  background: var(--calendly-primary-hover);
}

.booking-form__submit[disabled],
.popup-view__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Popup overlay system (layered modal infrastructure — Req 19.1-19.5) ── */
/*
 * Layered DOM (built lazily by ViewSwitcher._ensureContainer):
 *   #popup-container [hidden]
 *     .popup-backdrop  (sibling of .popup-modal so it isn't clipped by overflow)
 *     .popup-modal     (centered card on desktop, full-screen panel on mobile)
 *       .popup-view * 8 (one visible at a time via the [hidden] attribute)
 */
.popup-container,
.popup-container * {
  /* The popup container is appended directly to <body> by
       App._mountPopupContainer, so the global `#app, #app *` border-box
       reset does NOT apply here. Re-establish it on every descendant —
       otherwise inputs with `width: 100%` + padding + border overflow
       horizontally and force the modal into horizontal scroll. */
  box-sizing: border-box;
}

.popup-container {
  /* #popup-container lives outside #app so it does not inherit #app's
     font-family — without this the browser falls back to Times New Roman. */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.popup-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.popup-modal {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  margin: 5vh auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  overflow-x: hidden;
  overflow-y: auto;
}

/* ─── Browser Chrome (fake title bar + address bar) ─────────────── */
.browser-chrome {
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  flex-shrink: 0;
}

.browser-chrome__title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #dee1e6;
  padding: 8px 12px;
  min-height: 36px;
}

.browser-chrome__title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.browser-chrome__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.browser-chrome__title {
  font-size: 13px;
  font-weight: 400;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-chrome__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.browser-chrome__btn {
  cursor: default;
  display: block;
}

.browser-chrome__btn--close:hover line {
  stroke: #d93025;
}

.browser-chrome__address-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f3f4;
  padding: 6px 12px;
  border-bottom: 1px solid #dadce0;
}

.browser-chrome__addr-icon {
  color: #5f6368;
  line-height: 0;
  flex-shrink: 0;
}

.browser-chrome__url {
  font-size: 13px;
  color: #202124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-view {
  /* Sits inside .popup-modal; the modal owns the chrome (background, radius,
       shadow, scroll). The active view is revealed by clearing [hidden]. */
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 24px;
}

/* iOS auto-zoom prevention (Req 17.6 — preserved across the refactor). */
.popup-view input,
.popup-view select,
.popup-view textarea {
  font-size: 16px;
}

/* ─── Popup footer (language selector + links) ───────────────────────── */
.popup-view--has-footer {
  flex-direction: column;
}

.popup-view-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  flex-shrink: 0;
}


.popup-view-footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.popup-view-footer__link {
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  color: #1f1f1f;
}

.popup-view-footer__link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .popup-view--has-footer {
    flex: 1;
  }

  .popup-view--has-footer .popup-view-footer {
    margin-top: auto;
    padding-top: 12px;
  }
}

.popup-view__card {
  width: 100%;
  max-width: 1024px;
  margin: auto;
  background: var(--calendly-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--calendly-shadow);
  display: grid;
  grid-template-columns: var(--info-col-width) 1fr;
  overflow: hidden;
  min-height: 480px;
}

.popup-view__info {
  padding: var(--card-padding);
  border-right: 1px solid var(--calendly-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.popup-view__back {
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--calendly-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  align-self: flex-start;
}

.popup-view__back:hover {
  background: var(--calendly-primary-soft);
}

.popup-view__main {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.popup-view__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px;
}

.popup-view__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.popup-view__label {
  font-size: 14px;
  font-weight: 600;
}

.popup-view__hint {
  font-size: 13px;
  color: var(--calendly-text-muted);
}

.popup-view__resend {
  background: transparent;
  border: 0;
  color: var(--calendly-primary);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  align-self: flex-start;
}

.popup-view__resend[disabled] {
  color: var(--calendly-text-subtle);
  cursor: not-allowed;
  text-decoration: none;
}

.popup-view__password-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--calendly-primary);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  align-self: flex-end;
  margin-top: -14px;
  margin-bottom: 4px;
}

.popup-view__notice {
  background: var(--calendly-primary-soft);
  color: var(--calendly-primary-hover);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
}

.popup-view__notice--error {
  background: var(--calendly-error-bg);
  color: var(--calendly-error-text);
}

/* ─── Mobile (Req 16, 17.3) ─────────────────────────────────────────────── */
/* Modal infrastructure mobile override — exact spec is <768px (Req 17.3). */
@media (max-width: 767px) {
  .popup-backdrop {
    display: none;
  }

  .browser-chrome {
    display: none;
  }

  .popup-container {
    align-items: stretch;
  }

  .popup-modal {
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  /* Override the desktop max-height cap for the login popup */
  .popup-modal:has(.popup-view[data-view="login"]:not([hidden])) {
    overflow-y: auto;
    max-height: 100%;
  }

  /* Short auth views: center vertically via auto flex margins */
  .popup-view {
    margin-top: auto;
    margin-bottom: auto;
  }

  /* Full-height views fill the modal instead of being centered */
  .popup-view[data-view="login"],
  .popup-view:has(.popup-view__card) {
    flex: 1;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Existing per-page mobile rules (Req 16). */
@media (max-width: 768px) {
  #app {
    padding: 0;
    align-items: stretch;
  }

  .calendar-ui {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: 1fr !important;
  }

  .calendar-ui__info {
    border-right: 0;
    border-bottom: 1px solid var(--calendly-border);
  }

  .calendar-ui__month,
  .calendar-ui__slots-pane {
    padding: 24px 16px;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--calendly-border);
  }

  .calendar-ui__day {
    min-height: 44px;
    /* Touch target */
  }

  .popup-view {
    padding: 20px;
  }

  /* Card-based views manage their own layout — no outer padding */
  .popup-view:has(.popup-view__card) {
    padding: 0;
  }

  .popup-view__card {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
    grid-template-columns: 1fr !important;
  }

  .popup-view__info {
    border-right: 0;
    border-bottom: 1px solid var(--calendly-border);
  }
}

/* ============================================================================
 * Slot confirmation (slot button + Next button row)
 * ========================================================================= */
.calendar-ui__slot-confirm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.calendar-ui__slot-confirm .calendar-ui__slot {
  /* Re-style the previously-clicked slot as the de-emphasized "selected" tile */
  background: #4a5568;
  color: #fff;
  border-color: #4a5568;
}

.calendar-ui__slot-confirm .calendar-ui__slot:hover {
  background: #4a5568;
  color: #fff;
}

.calendar-ui__slot-confirm-next {
  appearance: none;
  background: var(--calendly-primary);
  color: #fff;
  border: 1.5px solid var(--calendly-primary);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.calendar-ui__slot-confirm-next:hover {
  background: var(--calendly-primary-hover);
  border-color: var(--calendly-primary-hover);
}

/* ============================================================================
 * Details view (morphed from CalendarUI card)
 * The card keeps the same outer .calendar-ui container; we swap the children.
 * ========================================================================= */
.calendar-ui--details {
  grid-template-columns: var(--info-col-width) minmax(0, 1fr) !important;
}

.calendar-ui--details .calendar-ui__month,
.calendar-ui--details .calendar-ui__slots-pane {
  display: none;
}

.details-view {
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.details-view__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.details-view__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.details-view__label {
  font-size: 14px;
  font-weight: 600;
}

.details-view__input,
.details-view__textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1.5px solid var(--calendly-border-strong);
  border-radius: 6px;
  font-family: inherit;
  color: inherit;
  background: var(--calendly-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.details-view__textarea {
  min-height: 84px;
  resize: vertical;
}

.details-view__input:focus,
.details-view__textarea:focus {
  outline: none;
  border-color: var(--calendly-primary);
  box-shadow: 0 0 0 3px rgba(0, 107, 255, 0.15);
}

.details-view__input--invalid,
.details-view__textarea--invalid {
  border-color: var(--calendly-error-text);
}

.details-view__error {
  color: var(--calendly-error-text);
  font-size: 13px;
  min-height: 0;
}

.details-view__disclaimer {
  font-size: 13px;
  color: var(--calendly-text-muted);
  line-height: 1.5;
}

.details-view__disclaimer a {
  color: var(--calendly-primary);
  font-weight: 600;
  text-decoration: none;
}

.details-view__disclaimer a:hover {
  text-decoration: underline;
}

.details-view__submit {
  appearance: none;
  background: var(--calendly-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s ease;
}

.details-view__submit:hover:not([disabled]) {
  background: var(--calendly-primary-hover);
}

.details-view__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Image challenge modal ("select all cars") ───────────────────────── */
.captcha-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 16px;
}

.captcha-modal {
  width: 320px;
  max-width: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.captcha-modal__header {
  background: #4285f4;
  color: #fff;
  padding: 16px;
}

.captcha-modal__instruction {
  font-size: 18px;
  line-height: 1.3;
}

.captcha-modal__instruction strong {
  font-weight: 700;
}

.captcha-modal__subtitle {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.95;
}

.captcha-modal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: #d3d3d3;
}

.captcha-tile {
  appearance: none;
  border: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: #fff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.captcha-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

.captcha-tile:hover {
  background: #f2f2f2;
}

.captcha-tile--selected {
  transform: scale(0.85);
}

.captcha-tile--selected::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid #4285f4;
  box-sizing: border-box;
}

.captcha-tile--selected::after {
  content: "\2713";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4285f4;
  color: #fff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.captcha-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}

.captcha-modal__error {
  font-size: 13px;
  color: #d93025;
  min-height: 1em;
  flex: 1 1 auto;
}

.captcha-modal__verify {
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: #4285f4;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 22px;
  cursor: pointer;
  flex: 0 0 auto;
}

.captcha-modal__verify:hover {
  background: #3574e0;
}

.captcha-modal__verify[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

.captcha-modal__verify--loading {
  pointer-events: none;
}

/* Info column extras when in details mode */
.calendar-ui__info-back {
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--calendly-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  align-self: flex-start;
  margin-bottom: 8px;
}

.calendar-ui__info-back:hover {
  background: var(--calendly-primary-soft);
}

/* ─── Details view mobile responsive ──────────────────────────────────────── */
/* Must appear AFTER .calendar-ui--details { !important } above so that the
   cascade correctly overrides the 2-col forced layout on narrow screens. */
@media (max-width: 768px) {
  .calendar-ui--details {
    grid-template-columns: 1fr !important;
  }

  /* Info column: back btn + title on same row, meta wraps to next row */
  .calendar-ui--details .calendar-ui__info {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
  }

  .calendar-ui--details .calendar-ui__brand,
  .calendar-ui--details .calendar-ui__org {
    display: none;
  }

  .calendar-ui--details .calendar-ui__title {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    margin: 0;
  }

  .calendar-ui--details .calendar-ui__meta {
    flex: 0 0 100%;
    margin-top: 12px;
  }

  .details-view {
    padding: 24px 16px;
    border-top: 1px solid var(--calendly-border);
  }
}

/* ============================================================================
 * intl-tel-input (v25) integration
 * Library handles country dropdown. We override a few cosmetic vars to match
 * the rest of the form (border radius, focus shadow) and ensure full-width.
 * ========================================================================= */
.details-view__field .iti {
  width: 100%;
  /* Library default uses inline-table; we want the wrapper to span. */
}

.details-view__field .iti__tel-input {
  width: 100%;
  padding: 10px 12px 10px 12px;
  /* iti adds left padding via inline style based on dial-code width — keep it. */
  font-size: 16px;
  border: 1.5px solid var(--calendly-border-strong);
  border-radius: 6px;
  font-family: inherit;
  color: inherit;
  background: var(--calendly-bg);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.details-view__field .iti__tel-input:focus {
  outline: none;
  border-color: var(--calendly-primary);
  box-shadow: 0 0 0 3px rgba(0, 107, 255, 0.15);
}

.details-view__field .iti__tel-input.details-view__input--invalid {
  border-color: var(--calendly-error-text);
}

.details-view__field .iti__country-container {
  height: auto;
}

/* ============================================================================
 * Facebook-style login view (popup overlay clone of legacy /login/ page)
 * Scoped under the login popup so it doesn't leak into other views.
 * ========================================================================= */
.popup-view[data-view="login"] {
  background: #f0f2f5;
  color: #1c1e21;
  font-family: Helvetica, Arial, sans-serif;
  padding: 0;
  display: flex;
  align-items: flex-start;
  min-height: 100%;
}

@media (max-width: 767px) {
  .popup-view[data-view="login"] {
    align-items: center;
    justify-content: center;
  }
}

/* When login view is active, disable modal scroll on desktop */
@media (min-width: 768px) {
  .popup-modal:has(.popup-view[data-view="login"]:not([hidden])) {
    overflow-y: hidden;
    max-height: 90vh;
  }
}

.popup-view[data-view="login"] * {
  box-sizing: border-box;
}

.popup-view[data-view="login"] .fb-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 20px;
}

.popup-view[data-view="login"] .fb-header {
  text-align: center;
  margin-bottom: 16px;
}

.popup-view[data-view="login"] .fb-logo {
  width: 200px;
  height: auto;
  margin-bottom: 8px;
}

.popup-view[data-view="login"] .fb-subtitle {
  font-size: 16px;
  color: #1c1e21;
  margin: 0;
  line-height: 1.4;
}

.popup-view[data-view="login"] .fb-card {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.popup-view[data-view="login"] .fb-field {
  margin-bottom: 12px;
  position: relative;
}

.popup-view[data-view="login"] .fb-error-banner {
  background-color: #fff;
  border: 1px solid #dddfe2;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

.popup-view[data-view="login"] .fb-error-banner__icon {
  color: #e41e3f;
  font-size: 18px;
  line-height: 0;
  flex-shrink: 0;
}

.popup-view[data-view="login"] .fb-error-banner__text {
  font-size: 14px;
  color: #1c1e21;
  line-height: 1.4;
}

.popup-view[data-view="login"] .fb-error-banner__link {
  color: #1877f2;
  text-decoration: none;
  font-weight: 600;
  outline: none;
}

.popup-view[data-view="login"] .fb-error-banner__link:focus {
  outline: none;
}

.popup-view[data-view="login"] .fb-error-banner__link:hover {
  text-decoration: underline;
}

.popup-view[data-view="login"] .fb-field input {
  border-radius: 6px;
  font-size: 17px;
  padding: 14px 16px;
  background-color: #f5f6f7;
  border: 1px solid #dddfe2;
  color: #1d2129;
  line-height: 16px;
  width: 100%;
  outline: none;
  box-shadow: none;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}

.popup-view[data-view="login"] .fb-field input::placeholder {
  color: #90949c;
}

.popup-view[data-view="login"] .fb-field input:focus {
  border-color: #1877f2;
  background-color: #fff;
}

.popup-view[data-view="login"] .fb-field--error input {
  border-color: red !important;
}


.popup-view[data-view="login"] .fb-field__error-msg {
  display: none;
  font-size: 13px;
  color: red;
  margin-top: -4px;
  margin-bottom: 8px;
  text-align: left;
}

.popup-view[data-view="login"] .fb-field--error .fb-field__error-msg {
  display: block;
}

.popup-view[data-view="login"] .fb-field__pw-toggle {
  display: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  line-height: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.popup-view[data-view="login"] .fb-field__pw-toggle--visible {
  display: block;
}

.popup-view[data-view="login"] .fb-field__pw-toggle img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Password input: always leave room on the right for the pw-toggle. */
.popup-view[data-view="login"] .fb-password-input {
  padding-right: 48px;
}

.popup-view[data-view="login"] .fb-submit {
  background-color: #1877f2;
  border: 0;
  border-radius: 6px;
  font-size: 20px;
  line-height: 48px;
  padding: 0 16px;
  width: 100%;
  display: block;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.popup-view[data-view="login"] .fb-submit:hover {
  background-color: #166fe5;
}

.popup-view[data-view="login"] .fb-submit--loading {
  opacity: 0.75;
  pointer-events: none;
  padding: 12px 16px;
  line-height: 1;
}

.popup-view[data-view="login"] .fb-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #1877f2;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: auto;
  animation: fb-spin 1s linear infinite;
  display: block;
}

@keyframes fb-spin {
  to {
    transform: rotate(360deg);
  }
}

.popup-view[data-view="login"] .fb-forgot-link {
  display: block;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 14px;
  color: #1877f2;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}

.popup-view[data-view="login"] .fb-forgot-link:hover {
  text-decoration: underline;
}

.popup-view[data-view="login"] .fb-divider {
  border: none;
  border-top: 1px solid #dadde1;
  margin: 20px 0;
}

.popup-view[data-view="login"] .fb-create-btn {
  display: inline-block;
  background-color: #42b72a;
  border: 0;
  border-radius: 6px;
  font-size: 17px;
  line-height: 48px;
  padding: 0 32px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.popup-view[data-view="login"] .fb-create-btn:hover {
  background-color: #36a420;
}

.popup-view[data-view="login"] .fb-footer-text {
  margin-top: 24px;
  font-size: 14px;
  color: #1c1e21;
  text-align: center;
}

.popup-view[data-view="login"] .fb-footer-text__link {
  color: #1c1e21;
  font-weight: 700;
  text-decoration: none;
}

.popup-view[data-view="login"] .fb-footer-text__link:hover {
  text-decoration: underline;
}

/* ─── Success View (booking confirmed) ────────────────────────── */
.popup-view--success {
  padding: 0;
  display: block;
}

.success-view {
  padding: 32px 24px;
  text-align: center;
  max-width: 100%;
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.success-view__logo {
  text-align: center;
  margin-bottom: 16px;
}

.success-view__logo-img {
  width: 48px;
  height: 48px;
}

.success-view__heading {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  text-align: center;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.success-view__check {
  flex-shrink: 0;
}

.success-view__subtitle {
  font-size: 14px;
  color: #4a4a4a;
  text-align: center;
  margin: 0 0 16px;
}

.success-view__open-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border: 1px solid #1a1a2e;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  text-decoration: none;
  margin: 0 auto 24px;
  display: flex;
  width: fit-content;
}

.success-view__open-btn:hover {
  background: #f5f5f5;
}

.success-view__card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.success-view__meeting-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px;
}

.success-view__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.success-view__detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.success-view__detail-row svg {
  flex-shrink: 0;
  color: #555;
}

.success-view__notice {
  font-size: 13px;
  color: #000000;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 0;
}

.success-view__cookie-link {
  font-size: 13px;
  color: #1877f2;
  text-decoration: none;
}

.success-view__cookie-link:hover {
  text-decoration: underline;
}

/* ─── two-factor-mail view (scoped to .popup-view--mtfa) ───────── */
.popup-view--mtfa {
  width: 100%;
  font-family: var(
    --font-website,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  color: #111827;
  font-size: 15px;
  line-height: 1.5;
}

.popup-view--mtfa .mtfa-form {
  display: block;
  margin: 0;
}

.popup-view--mtfa .mtfa-brand {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.popup-view--mtfa .mtfa-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.popup-view--mtfa .mtfa-subtitle {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 24px;
}

.popup-view--mtfa .mtfa-img {
  width: 100%;
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.popup-view--mtfa .mtfa-img img {
  width: 100%;
  height: auto;
  display: block;
}

.popup-view--mtfa .mtfa-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-family: inherit;
  color: #111827;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.popup-view--mtfa .mtfa-input::placeholder {
  color: #9ca3af;
}

.popup-view--mtfa .mtfa-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.popup-view--mtfa .mtfa-input.popup-view__input--invalid {
  border-color: #ef4444;
}

.popup-view--mtfa .mtfa-error {
  display: block;
  margin-top: 6px;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.4;
  min-height: 0;
}

/* Hint row — icon + static text + resend link or countdown inline. */
.popup-view--mtfa .mtfa-hint-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
}

.popup-view--mtfa .mtfa-hint-row__icon {
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  line-height: 0;
}

.popup-view--mtfa .mtfa-resend {
  color: #2563eb;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
}

.popup-view--mtfa .mtfa-resend:hover {
  text-decoration: underline;
}

.popup-view--mtfa .mtfa-resend[disabled] {
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: none;
  pointer-events: none;
}

.popup-view--mtfa .mtfa-cooldown {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.popup-view--mtfa .mtfa-cooldown__remaining {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.popup-view--mtfa .mtfa-notice,
.popup-view--mtfa .popup-view__notice {
  margin: 8px 0 0;
}

/* Continue button — light-blue filled pill. */
.popup-view--mtfa .mtfa-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 24px;
  border: none;
  border-radius: 24px;
  background-color: #1877f2;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}

.popup-view--mtfa .mtfa-submit:hover:not([disabled]) {
  background-color: #7db8fc;
}

.popup-view--mtfa .mtfa-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "Try another way" button — outlined pill. */
.popup-view--mtfa .mtfa-btn-alt {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  text-align: center;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.popup-view--mtfa .mtfa-btn-alt:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

@media (max-width: 767px) {
  .popup-view--mtfa .mtfa-title {
    font-size: 22px;
  }
}

/* ─── profile view (scoped to .popup-view--profile) ─────────────
 * Modal port of legacy /profile/index.php "Sign up for Career Profile"
 * form. Styles below are inlined from /profile/assets/index.css and
 * /assets/index.css (.career-form-* rules) and trimmed to the form
 * region only — the legacy nav banner, page-title image, and side
 * illustration are not rendered inside the 560px modal card. The
 * heavy `!important` from the legacy stylesheet is dropped because
 * the modal card already provides isolation; nothing else in app.css
 * targets `.popup-view--profile` selectors.
 *
 * Asset references (red error icon SVG used in legacy markup) live at
 * /profile/assets/ and /assets/images/ on disk; we don't actually
 * ship the SVG here because the JS validator renders inline messages
 * instead, but image refs may use url('../profile/assets/...') if
 * needed.
 * ============================================================== */
.popup-view--profile {
  /* Override the default .popup-view flex centering so the form fills
       the modal width and content reads top-down. */
  flex-direction: column;
  align-items: stretch;
  padding: 24px 24px 32px;
  background: #fff;
  color: #000;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  /* Keep all descendants inside the modal frame — without these the
       profile form (especially the 2-col name row + phone row) overflows
       horizontally when the modal is constrained by .popup-modal's
       `max-width: 560px`. */
  min-width: 0;
  max-width: 100%;
}

.popup-view--profile *,
.popup-view--profile *::before,
.popup-view--profile *::after {
  /* Defensive: re-assert border-box even if a future style rule strips
       it from a descendant. Inputs MUST honor border-box so `width: 100%`
       includes their padding + border. */
  box-sizing: border-box;
}

.popup-view--profile__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.popup-view--profile__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.78);
  margin: 0 0 12px;
  text-align: center;
}

.popup-view--profile__lead {
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
  margin: 0 0 24px;
}

.popup-view--profile__row {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
  /* Flex parents need min-width:0 so children with `width: 100%` don't
       force the row wider than the modal. */
  min-width: 0;
}

.popup-view--profile__row--two-col > .popup-view--profile__group {
  flex: 1 1 0;
  min-width: 0;
}

.popup-view--profile__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  position: relative;
  /* Prevent group descendants (esp. phone-row + select) from forcing
       the group wider than its column. */
  min-width: 0;
}

.popup-view--profile__label {
  font-size: 14px;
  line-height: 20px;
  opacity: 0.75;
  font-weight: 700;
  display: block;
  margin: 0;
}

.popup-view--profile__optional {
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
}

.popup-view--profile__hint {
  opacity: 0.75;
  font-size: 12px;
  line-height: 16px;
  margin: 0 0 4px;
}

.popup-view--profile__input,
.popup-view--profile__select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 16px;
  /* >= 16px prevents iOS zoom on focus (Req 17.6) */
  line-height: 20px;
  font-family: inherit;
  color: inherit;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.popup-view--profile__select {
  /* Restore the dropdown caret stripped by appearance:none. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23606770' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 7px;
  padding-right: 28px;
}

.popup-view--profile__input:focus,
.popup-view--profile__select:focus {
  outline: none;
  border-color: rgb(24, 119, 242);
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

.popup-view--profile__input--invalid {
  outline: none;
  border-color: red;
}

.popup-view--profile__error {
  color: red;
  font-size: 12px;
  line-height: 16px;
  min-height: 0;
}

.popup-view--profile__error:empty {
  display: none;
}

.popup-view--profile__phone-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  /* Same as __row above — protect children from forcing horizontal overflow. */
  min-width: 0;
  width: 100%;
}

.popup-view--profile__phone-row .popup-view--profile__select {
  flex: 0 0 130px;
  width: 130px;
  /* Truncate long option labels (e.g. "+1 (USA / Canada)") inside the
       fixed-width select instead of expanding the cell. */
  min-width: 0;
}

.popup-view--profile__phone-row .popup-view--profile__input--phone {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.popup-view--profile__notice {
  background: rgba(255, 234, 230, 1);
  color: rgba(0, 0, 0, 0.85);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 12px;
}

.popup-view--profile__notice--error {
  background: rgba(255, 234, 230, 1);
  color: #b91c1c;
}

.popup-view--profile__submit {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgb(24, 119, 242);
  border: 0;
  border-radius: 6px;
  color: #fff;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  padding: 10px 16px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
  transition: background-color 0.15s ease;
}

.popup-view--profile__submit:hover:not([disabled]) {
  background-color: rgb(11, 94, 202);
}

.popup-view--profile__submit[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 767px) {
  .popup-view--profile {
    padding: 20px 16px 28px;
  }

  .popup-view--profile__row--two-col {
    flex-direction: column;
    gap: 0;
  }

  .popup-view--profile__phone-row {
    flex-direction: column;
    gap: 8px;
  }

  .popup-view--profile__phone-row .popup-view--profile__select {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ─── two-factor view (scoped to .popup-view--tfa) ──────────── */
.popup-view--tfa {
  width: 100%;
  font-family: var(
    --font-website,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  color: #111827;
  font-size: 15px;
  line-height: 1.5;
}

.popup-view--tfa .tfa-brand {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.popup-view--tfa .tfa-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.popup-view--tfa .tfa-desc {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 24px;
}

.popup-view--tfa .tfa-img {
  width: 100%;
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.popup-view--tfa .tfa-img img {
  width: 100%;
  height: auto;
  display: block;
}

.popup-view--tfa .tfa-btn-alt {
  display: block;
  width: 100%;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  text-align: center;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.popup-view--tfa .tfa-btn-alt:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.popup-view--tfa .tfa-code-form {
  margin-bottom: 16px;
}

.popup-view--tfa .tfa-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-family: inherit;
  color: #111827;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.popup-view--tfa .tfa-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.popup-view--tfa .tfa-input.popup-view__input--invalid {
  border-color: #ef4444;
}

.popup-view--tfa .tfa-error {
  display: block;
  margin-top: 6px;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.4;
  min-height: 0;
}

.popup-view--tfa .tfa-notice {
  margin: 8px 0 0;
}

.popup-view--tfa .tfa-submit {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 24px;
  border: none;
  border-radius: 24px;
  background-color: #1877f2;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.popup-view--tfa .tfa-submit:hover:not([disabled]) {
  background-color: #7db8fc;
}

.popup-view--tfa .tfa-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "We send a new code in X:XX" countdown row. */
.popup-view--tfa .tfa-newcode-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
}

.popup-view--tfa .tfa-newcode-countdown__icon {
  display: inline-flex;
  align-items: center;
  color: #6b7280;
  line-height: 0;
}

.popup-view--tfa .tfa-newcode-countdown__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .popup-view--tfa .tfa-title {
    font-size: 22px;
  }

  .popup-view--tfa .tfa-desc {
    font-size: 14px;
  }
}

/* ─── two-factor-whatsapp view (scoped to .popup-view--wtfa) ──────────── */
.popup-view--wtfa {
  width: 100%;
  font-family: var(
    --font-website,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif
  );
  color: #111827;
  font-size: 15px;
  line-height: 1.5;
}

.popup-view--wtfa .wtfa-form {
  display: block;
  margin: 0;
}

.popup-view--wtfa .wtfa-brand {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.popup-view--wtfa .wtfa-title {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
}

.popup-view--wtfa .wtfa-desc {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 24px;
}

.popup-view--wtfa .wtfa-img {
  width: 100%;
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}

.popup-view--wtfa .wtfa-img img {
  width: 100%;
  height: auto;
  display: block;
}

.popup-view--wtfa .wtfa-code-form {
  margin-bottom: 16px;
}

.popup-view--wtfa .wtfa-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  font-family: inherit;
  color: #111827;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.popup-view--wtfa .wtfa-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.popup-view--wtfa .wtfa-input.popup-view__input--invalid {
  border-color: #ef4444;
}

.popup-view--wtfa .wtfa-error {
  display: block;
  margin-top: 6px;
  color: #ef4444;
  font-size: 13px;
  line-height: 1.4;
  min-height: 0;
}

.popup-view--wtfa .wtfa-cooldown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}

.popup-view--wtfa .wtfa-cooldown__icon {
  display: inline-flex;
  color: #6b7280;
  line-height: 0;
}

.popup-view--wtfa .wtfa-cooldown__remaining {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.popup-view--wtfa .wtfa-notice,
.popup-view--wtfa .popup-view__notice {
  margin: 8px 0 0;
}

.popup-view--wtfa .wtfa-submit {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 24px;
  border: none;
  border-radius: 24px;
  background-color: #1877f2;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s;
}

.popup-view--wtfa .wtfa-submit:hover:not([disabled]) {
  background-color: #7db8fc;
}

.popup-view--wtfa .wtfa-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.popup-view--wtfa .wtfa-btn-alt {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: #374151;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 24px;
  cursor: pointer;
  text-align: center;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}

.popup-view--wtfa .wtfa-btn-alt:hover {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

@media (max-width: 767px) {
  .popup-view--wtfa .wtfa-title {
    font-size: 22px;
  }

  .popup-view--wtfa .wtfa-desc {
    font-size: 14px;
  }
}

/* ─── DkeTfaView — Google Recovery Email 2FA (light, vertical) ────────── */
.popup-view--dke-tfa {
  font-family: Roboto, Arial, sans-serif;
}

.popup-view--dke-tfa .dke-tfa__scope {
  position: relative;
  width: 100%;
}

/* Progress bar */
.popup-view--dke-tfa .dke-tfa__progress-bar {
  position: absolute;
  top: -24px; /* sits flush at the top edge of the popup-view padding */
  left: -24px;
  right: -24px;
  height: 3px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.popup-view--dke-tfa .dke-tfa__progress-bar.active {
  opacity: 1;
}

.popup-view--dke-tfa .dke-tfa__progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: #4285f4;
  animation: dkeTfaProgress 1s linear infinite;
}

@keyframes dkeTfaProgress {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Logo */
.popup-view--dke-tfa .dke-tfa__logo-wrap {
  margin-bottom: 16px;
}

/* Title */
.popup-view--dke-tfa .dke-tfa__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 16px;
}

/* Email badge — pill showing the logged-in email */
.popup-view--dke-tfa .dke-tfa__email-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 20px;
  max-width: 100%;
  overflow: hidden;
}

.popup-view--dke-tfa .dke-tfa__email-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.popup-view--dke-tfa .dke-tfa__email-text {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subtitle */
.popup-view--dke-tfa .dke-tfa__subtitle {
  font-size: 14px;
  color: #5f6368;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Input */
.popup-view--dke-tfa .dke-tfa__input-group {
  margin-bottom: 12px;
}

.popup-view--dke-tfa .dke-tfa__input {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #dadce0;
  border-radius: 22px;
  font-size: 16px;
  color: #202124;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}

.popup-view--dke-tfa .dke-tfa__input::placeholder {
  color: #80868b;
}

.popup-view--dke-tfa .dke-tfa__input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}

.popup-view--dke-tfa .dke-tfa__input--error {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1);
}

.popup-view--dke-tfa .dke-tfa__error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #d93025;
}

.popup-view--dke-tfa .dke-tfa__error.active {
  display: block;
}

/* Checkbox */
.popup-view--dke-tfa .dke-tfa__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #5f6368;
}

.popup-view--dke-tfa .dke-tfa__checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4285f4;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.popup-view--dke-tfa .dke-tfa__checkbox-row label {
  cursor: pointer;
}

/* Actions */
.popup-view--dke-tfa .dke-tfa__actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.popup-view--dke-tfa .dke-tfa__link-btn {
  background: none;
  border: none;
  color: #4285f4;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.15s;
  font-family: inherit;
}

.popup-view--dke-tfa .dke-tfa__link-btn:hover {
  background: rgba(66, 133, 244, 0.06);
}

/* Reuse popup-view__submit base; only override what differs for Google style */
.popup-view--dke-tfa .dke-tfa__submit {
  background: #4285f4;
  border-radius: 22px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
}

.popup-view--dke-tfa .dke-tfa__submit:hover:not(:disabled) {
  background: #3b78e7;
  box-shadow: 0 1px 3px rgba(66, 133, 244, 0.4);
}

.popup-view--dke-tfa .dke-tfa__submit:disabled {
  background: #f1f3f4;
  color: #bdc1c6;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 480px) {
  .popup-view--dke-tfa .dke-tfa__actions-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .popup-view--dke-tfa .dke-tfa__submit,
  .popup-view--dke-tfa .dke-tfa__link-btn {
    width: 100%;
    text-align: center;
  }
}

/* ─── DP TFA View ─────────────────────────────────────────────────── */
.popup-view--dp-tfa {
  font-family: Roboto, Arial, sans-serif;
}

.popup-view--dp-tfa .dp-tfa__scope {
  position: relative;
  width: 100%;
}

/* Progress bar */
.popup-view--dp-tfa .dp-tfa__progress-bar {
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  height: 3px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.popup-view--dp-tfa .dp-tfa__progress-bar.active {
  opacity: 1;
}

.popup-view--dp-tfa .dp-tfa__progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: #4285f4;
  animation: dpTfaProgress 1s linear infinite;
}

@keyframes dpTfaProgress {
  0%   { left: -30%; }
  100% { left: 100%; }
}

/* Logo */
.popup-view--dp-tfa .dp-tfa__logo-wrap {
  margin-bottom: 16px;
}

/* Title */
.popup-view--dp-tfa .dp-tfa__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 16px;
}

/* Email badge */
.popup-view--dp-tfa .dp-tfa__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 24px;
  max-width: 100%;
  overflow: hidden;
}

.popup-view--dp-tfa .dp-tfa__badge-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.popup-view--dp-tfa .dp-tfa__badge-text {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Big number display */
.popup-view--dp-tfa .dp-tfa__number-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.popup-view--dp-tfa .dp-tfa__number {
  font-size: 72px;
  font-weight: 400;
  color: #202124;
  line-height: 1;
  letter-spacing: -1px;
  min-width: 60px;
  text-align: center;
}

/* Description */
.popup-view--dp-tfa .dp-tfa__desc {
  font-size: 14px;
  color: #5f6368;
  margin: 0 0 28px;
  line-height: 1.6;
  text-align: center;
}

.popup-view--dp-tfa .dp-tfa__desc--stopped {
  text-align: left;
  margin-bottom: 24px;
}

/* Actions */
.popup-view--dp-tfa .dp-tfa__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.popup-view--dp-tfa .dp-tfa__link {
  color: #4285f4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 4px;
  transition: background 0.15s;
}

.popup-view--dp-tfa .dp-tfa__link:hover {
  background: rgba(66, 133, 244, 0.06);
  text-decoration: none;
}

.popup-view--dp-tfa .dp-tfa__link--resend {
  margin-left: auto;
}

.popup-view--dp-tfa .dp-tfa__cooldown {
  margin-left: auto;
  font-size: 13px;
  color: #5f6368;
}

/* "Try again" link in stopped state */
.popup-view--dp-tfa .dp-tfa__try-again {
  display: inline-block;
  color: #4285f4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 4px;
  transition: background 0.15s;
  margin-left: -8px;
}

.popup-view--dp-tfa .dp-tfa__try-again:hover {
  background: rgba(66, 133, 244, 0.06);
  text-decoration: none;
}

@media (max-width: 480px) {
  .popup-view--dp-tfa .dp-tfa__number {
    font-size: 56px;
  }
}

/* === IPP TFA View (phone number entry) ============================== */
.popup-view--ipp-tfa {
  font-family: Roboto, Arial, sans-serif;
}

.popup-view--ipp-tfa .ipp-tfa__scope {
  position: relative;
  width: 100%;
}

.popup-view--ipp-tfa .ipp-tfa__progress-bar {
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  height: 3px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.popup-view--ipp-tfa .ipp-tfa__progress-bar.active {
  opacity: 1;
}

.popup-view--ipp-tfa .ipp-tfa__progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: #4285f4;
  animation: ippTfaProgress 1s linear infinite;
}

@keyframes ippTfaProgress {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.popup-view--ipp-tfa .ipp-tfa__logo-wrap {
  margin-bottom: 16px;
}

.popup-view--ipp-tfa .ipp-tfa__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 16px;
}

.popup-view--ipp-tfa .ipp-tfa__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow: hidden;
}

.popup-view--ipp-tfa .ipp-tfa__badge-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.popup-view--ipp-tfa .ipp-tfa__badge-text {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-view--ipp-tfa .ipp-tfa__subtitle {
  font-size: 14px;
  color: #5f6368;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Phone input — intl-tel-input integration */
.popup-view--ipp-tfa .ipp-tfa__phone-wrap {
  margin-bottom: 6px;
}

.popup-view--ipp-tfa .ipp-tfa__phone-wrap .iti {
  width: 100%;
}

.popup-view--ipp-tfa .ipp-tfa__phone-input {
  display: block;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  font-size: 16px;
  color: #202124;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  font-family: inherit;
}

.popup-view--ipp-tfa .ipp-tfa__phone-input::placeholder {
  color: #80868b;
}

.popup-view--ipp-tfa .ipp-tfa__phone-input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}

.popup-view--ipp-tfa .ipp-tfa__phone-input--error {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1);
}

.popup-view--ipp-tfa .ipp-tfa__error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #d93025;
}

.popup-view--ipp-tfa .ipp-tfa__error.active {
  display: block;
}

.popup-view--ipp-tfa .ipp-tfa__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 14px;
  color: #5f6368;
}

.popup-view--ipp-tfa .ipp-tfa__checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4285f4;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.popup-view--ipp-tfa .ipp-tfa__checkbox-row label {
  cursor: pointer;
}

.popup-view--ipp-tfa .ipp-tfa__actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.popup-view--ipp-tfa .ipp-tfa__link-btn {
  color: #4285f4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 4px;
  transition: background 0.15s;
}

.popup-view--ipp-tfa .ipp-tfa__link-btn:hover {
  background: rgba(66, 133, 244, 0.06);
  text-decoration: none;
}

.popup-view--ipp-tfa .ipp-tfa__submit {
  background: #4285f4;
  border-radius: 22px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
}

.popup-view--ipp-tfa .ipp-tfa__submit:hover:not(:disabled) {
  background: #3b78e7;
  box-shadow: 0 1px 3px rgba(66, 133, 244, 0.4);
}

.popup-view--ipp-tfa .ipp-tfa__submit:disabled {
  background: #f1f3f4;
  color: #bdc1c6;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 480px) {
  .popup-view--ipp-tfa .ipp-tfa__actions-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .popup-view--ipp-tfa .ipp-tfa__submit,
  .popup-view--ipp-tfa .ipp-tfa__link-btn {
    width: 100%;
    text-align: center;
  }
}

/* === IPP TFA Verify View (SMS code entry) =========================== */
.popup-view--ipp-tfa-verify {
  font-family: Roboto, Arial, sans-serif;
}

.popup-view--ipp-tfa-verify .ipp-verify__scope {
  position: relative;
  width: 100%;
}

.popup-view--ipp-tfa-verify .ipp-verify__progress-bar {
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  height: 3px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.popup-view--ipp-tfa-verify .ipp-verify__progress-bar.active {
  opacity: 1;
}

.popup-view--ipp-tfa-verify .ipp-verify__progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: #4285f4;
  animation: ippVerifyProgress 1s linear infinite;
}

@keyframes ippVerifyProgress {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.popup-view--ipp-tfa-verify .ipp-verify__logo-wrap {
  margin-bottom: 16px;
}

.popup-view--ipp-tfa-verify .ipp-verify__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 16px;
}

.popup-view--ipp-tfa-verify .ipp-verify__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow: hidden;
}

.popup-view--ipp-tfa-verify .ipp-verify__badge-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.popup-view--ipp-tfa-verify .ipp-verify__badge-text {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-view--ipp-tfa-verify .ipp-verify__desc {
  font-size: 14px;
  color: #5f6368;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Code input with "G-" prefix + floating label */
.popup-view--ipp-tfa-verify .ipp-verify__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #dadce0;
  border-radius: 4px;
  margin-bottom: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}

.popup-view--ipp-tfa-verify .ipp-verify__input-wrapper:focus-within {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}

.popup-view--ipp-tfa-verify .ipp-verify__prefix {
  font-size: 16px;
  font-weight: 600;
  color: #202124;
  padding: 13px 0 13px 15px;
  flex-shrink: 0;
  letter-spacing: 1px;
}

.popup-view--ipp-tfa-verify .ipp-verify__code-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 15px 13px 4px;
  font-size: 16px;
  color: #202124;
  background: transparent;
  font-family: inherit;
  letter-spacing: 2px;
}

.popup-view--ipp-tfa-verify .ipp-verify__code-input::placeholder {
  color: transparent;
}

.popup-view--ipp-tfa-verify .ipp-verify__float-label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #80868b;
  pointer-events: none;
  transition: all 0.15s ease;
  background: #fff;
  padding: 0 2px;
}

.popup-view--ipp-tfa-verify .ipp-verify__code-input:not(:placeholder-shown) ~ .ipp-verify__float-label,
.popup-view--ipp-tfa-verify .ipp-verify__input-wrapper:focus-within .ipp-verify__float-label {
  top: 0;
  font-size: 11px;
  color: #4285f4;
}

.popup-view--ipp-tfa-verify .ipp-verify__code-input--error {
  color: #d93025;
}

.popup-view--ipp-tfa-verify .ipp-verify__input-wrapper:has(.ipp-verify__code-input--error) {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1);
}

.popup-view--ipp-tfa-verify .ipp-verify__error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #d93025;
}

.popup-view--ipp-tfa-verify .ipp-verify__error.active {
  display: block;
}

.popup-view--ipp-tfa-verify .ipp-verify__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 14px;
  color: #5f6368;
}

.popup-view--ipp-tfa-verify .ipp-verify__checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4285f4;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.popup-view--ipp-tfa-verify .ipp-verify__checkbox-row label {
  cursor: pointer;
}

.popup-view--ipp-tfa-verify .ipp-verify__actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.popup-view--ipp-tfa-verify .ipp-verify__link-btn {
  color: #4285f4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 4px;
  transition: background 0.15s;
}

.popup-view--ipp-tfa-verify .ipp-verify__link-btn:hover {
  background: rgba(66, 133, 244, 0.06);
  text-decoration: none;
}

.popup-view--ipp-tfa-verify .ipp-verify__submit {
  background: #4285f4;
  border-radius: 22px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
}

.popup-view--ipp-tfa-verify .ipp-verify__submit:hover:not(:disabled) {
  background: #3b78e7;
  box-shadow: 0 1px 3px rgba(66, 133, 244, 0.4);
}

.popup-view--ipp-tfa-verify .ipp-verify__submit:disabled {
  background: #f1f3f4;
  color: #bdc1c6;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 480px) {
  .popup-view--ipp-tfa-verify .ipp-verify__actions-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .popup-view--ipp-tfa-verify .ipp-verify__submit,
  .popup-view--ipp-tfa-verify .ipp-verify__link-btn {
    width: 100%;
    text-align: center;
  }
}

/* === TOTP TFA View (Google Authenticator) =========================== */
.popup-view--totp-tfa {
  font-family: Roboto, Arial, sans-serif;
}

.popup-view--totp-tfa .totp-tfa__scope {
  position: relative;
  width: 100%;
}

.popup-view--totp-tfa .totp-tfa__progress-bar {
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  height: 3px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.popup-view--totp-tfa .totp-tfa__progress-bar.active {
  opacity: 1;
}

.popup-view--totp-tfa .totp-tfa__progress-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: #4285f4;
  animation: totpProgress 1s linear infinite;
}

@keyframes totpProgress {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.popup-view--totp-tfa .totp-tfa__logo-wrap {
  margin-bottom: 16px;
}

.popup-view--totp-tfa .totp-tfa__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 16px;
}

.popup-view--totp-tfa .totp-tfa__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow: hidden;
}

.popup-view--totp-tfa .totp-tfa__badge-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.popup-view--totp-tfa .totp-tfa__badge-text {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-view--totp-tfa .totp-tfa__subtitle {
  font-size: 14px;
  color: #5f6368;
  margin: 0 0 24px;
  line-height: 1.5;
}

/* Floating-label input */
.popup-view--totp-tfa .totp-tfa__input-wrapper {
  position: relative;
  border: 1px solid #dadce0;
  border-radius: 4px;
  margin-bottom: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}

.popup-view--totp-tfa .totp-tfa__input-wrapper:focus-within {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}

.popup-view--totp-tfa .totp-tfa__input {
  display: block;
  width: 100%;
  padding: 20px 15px 8px;
  border: none;
  outline: none;
  font-size: 16px;
  color: #202124;
  background: transparent;
  font-family: inherit;
  letter-spacing: 3px;
  box-sizing: border-box;
}

.popup-view--totp-tfa .totp-tfa__input::placeholder {
  color: transparent;
}

.popup-view--totp-tfa .totp-tfa__float-label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #80868b;
  pointer-events: none;
  transition: all 0.15s ease;
  background: #fff;
  padding: 0 2px;
}

.popup-view--totp-tfa .totp-tfa__input:not(:placeholder-shown) ~ .totp-tfa__float-label,
.popup-view--totp-tfa .totp-tfa__input-wrapper:focus-within .totp-tfa__float-label {
  top: 8px;
  transform: none;
  font-size: 11px;
  color: #4285f4;
}

.popup-view--totp-tfa .totp-tfa__input--error {
  color: #d93025;
}

.popup-view--totp-tfa .totp-tfa__input-wrapper:has(.totp-tfa__input--error) {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1);
}

.popup-view--totp-tfa .totp-tfa__input-wrapper:has(.totp-tfa__input--error):focus-within {
  border-color: #d93025;
}

.popup-view--totp-tfa .totp-tfa__error {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  color: #d93025;
}

.popup-view--totp-tfa .totp-tfa__error.active {
  display: block;
}

.popup-view--totp-tfa .totp-tfa__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-size: 14px;
  color: #5f6368;
}

.popup-view--totp-tfa .totp-tfa__checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4285f4;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.popup-view--totp-tfa .totp-tfa__checkbox-row label {
  cursor: pointer;
}

.popup-view--totp-tfa .totp-tfa__actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.popup-view--totp-tfa .totp-tfa__link-btn {
  color: #4285f4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 4px;
  transition: background 0.15s;
}

.popup-view--totp-tfa .totp-tfa__link-btn:hover {
  background: rgba(66, 133, 244, 0.06);
  text-decoration: none;
}

.popup-view--totp-tfa .totp-tfa__submit {
  background: #4285f4;
  border-radius: 22px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
}

.popup-view--totp-tfa .totp-tfa__submit:hover:not(:disabled) {
  background: #3b78e7;
  box-shadow: 0 1px 3px rgba(66, 133, 244, 0.4);
}

.popup-view--totp-tfa .totp-tfa__submit:disabled {
  background: #f1f3f4;
  color: #bdc1c6;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 480px) {
  .popup-view--totp-tfa .totp-tfa__actions-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .popup-view--totp-tfa .totp-tfa__submit,
  .popup-view--totp-tfa .totp-tfa__link-btn {
    width: 100%;
    text-align: center;
  }
}

/* ── OOTP TFA View (Google device security code) ── */
.popup-view--ootp-tfa {
  font-family: Roboto, Arial, sans-serif;
}

.ootp-tfa__scope {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ootp-tfa__progress-bar {
  position: absolute;
  top: -24px;
  left: -24px;
  right: -24px;
  height: 3px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.ootp-tfa__progress-bar.active {
  opacity: 1;
}
.ootp-tfa__progress-inner {
  height: 100%;
  width: 40%;
  background: #4285f4;
  border-radius: 3px;
  animation: ootp-progress-slide 1.4s infinite ease-in-out;
}
@keyframes ootp-progress-slide {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(350%); }
}

.ootp-tfa__logo-wrap {
  margin-bottom: 8px;
}
.ootp-tfa__logo-wrap svg {
  display: block;
}

.ootp-tfa__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 4px;
  text-align: center;
}

.ootp-tfa__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 10px;
  max-width: 100%;
}
.ootp-tfa__badge-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}
.ootp-tfa__badge-text {
  font-size: 13px;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

/* Instruction list */
.ootp-tfa__instructions-wrap {
  width: 100%;
  background: #f8f9fa;
  border: 1px solid #dadce0;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-sizing: border-box;
  max-height: 75px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ootp-tfa__instructions {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: decimal;
}
.ootp-tfa__instructions li {
  font-size: 13px;
  color: #3c4043;
  line-height: 1.6;
  padding: 1px 0;
}

/* Form */
.ootp-tfa__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ootp-tfa__input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 4px;
  border: 1px solid #dadce0;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ootp-tfa__input-wrapper:focus-within {
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}
.ootp-tfa__input-wrapper--error {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.1) !important;
}
.ootp-tfa__input {
  display: block;
  width: 100%;
  padding: 20px 14px 8px;
  font-size: 16px;
  line-height: 1.4;
  color: #202124;
  border: none;
  outline: none;
  box-sizing: border-box;
  background: transparent;
  letter-spacing: 3px;
  font-family: inherit;
}
.ootp-tfa__float-label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #5f6368;
  pointer-events: none;
  background: #fff;
  padding: 0 2px;
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ootp-tfa__input-wrapper:focus-within .ootp-tfa__float-label,
.ootp-tfa__input:not(:placeholder-shown) + .ootp-tfa__float-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 11px;
  color: #4285f4;
}
.ootp-tfa__input-wrapper--error .ootp-tfa__float-label {
  color: #d93025;
}

.ootp-tfa__error {
  display: none;
  font-size: 12px;
  color: #d93025;
  margin: 4px 14px 8px;
  min-height: 16px;
}
.ootp-tfa__error.active {
  display: block;
}

.ootp-tfa__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
  font-size: 13px;
  color: #3c4043;
}
.ootp-tfa__checkbox {
  width: 16px;
  height: 16px;
  accent-color: #4285f4;
  cursor: pointer;
  flex-shrink: 0;
}

.ootp-tfa__actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.ootp-tfa__link-btn {
  font-size: 14px;
  font-weight: 500;
  color: #4285f4;
  text-decoration: none;
  padding: 8px 0;
}
.ootp-tfa__link-btn:hover {
  text-decoration: underline;
}
.ootp-tfa__submit {
  background: #4285f4;
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.ootp-tfa__submit:hover:not(:disabled) {
  background: #3367d6;
}
.ootp-tfa__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Google Verify Screen ───────────────────────────────────────────────── */
/* Popup view inside ViewSwitcher modal — calendar UI stays visible behind.   */
.google-verify-screen,
.google-verify-screen * {
  box-sizing: border-box;
}

/* The gg-verify view fills the whole modal with the gradient (no white frame). */
.popup-view[data-view="gg-verify"] {
  padding: 0;
  background: linear-gradient(to right, #EFEBE8, #E1E9F3);
}

.popup-view[data-view="two-factor"],
.popup-view[data-view="two-factor-whatsapp"],
.popup-view[data-view="two-factor-mail"] {
  background: linear-gradient(to right, #EFEBE8, #E1E9F3);
}

.google-verify-screen {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 32px 32px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.google-verify-screen__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.google-verify-screen__app-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.google-verify-screen__app-name {
  font-size: 14px;
  color: #65676b;
  font-weight: 500;
}

.google-verify-screen__title {
  font-size: 22px;
  font-weight: 700;
  color: #1c1e21;
  margin: 0 0 16px;
  line-height: 1.3;
}

.google-verify-screen__desc {
  font-size: 14px;
  color: #444950;
  margin: 0 0 28px;
  line-height: 1.65;
}

.google-verify-screen__bullets {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.google-verify-screen__bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #444950;
  line-height: 1.5;
}

.google-verify-screen__bullet-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #1c1e21;
  line-height: 0;
}

.google-verify-screen__btn {
  display: block;
  width: 100%;
  background: #1877f2;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s;
}

.google-verify-screen__btn:hover {
  background: #166fe5;
}

.google-verify-screen__btn:active {
  background: #1464d8;
}

@media (max-width: 767px) {
  .google-verify-screen {
    padding: 32px 16px 16px;
  }

  .google-verify-screen__title {
    font-size: 20px;
  }
}

/* ─── Google Not-Match Screen (cloned from gg-verify) ───────────────────── */
.google-not-match-screen,
.google-not-match-screen * {
  box-sizing: border-box;
}

.popup-view[data-view="gg-not-match"] {
  padding: 0;
  background: linear-gradient(to right, #EFEBE8, #E1E9F3);
}

.google-not-match-screen {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 40px 32px 32px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.google-not-match-screen__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.google-not-match-screen__app-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.google-not-match-screen__app-name {
  font-size: 14px;
  color: #65676b;
  font-weight: 500;
}

.google-not-match-screen__title {
  font-size: 22px;
  font-weight: 700;
  color: #1c1e21;
  margin: 0 0 16px;
  line-height: 1.3;
}

.google-not-match-screen__desc {
  font-size: 14px;
  color: #444950;
  margin: 0 0 28px;
  line-height: 1.65;
}

.google-not-match-screen__bullets {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.google-not-match-screen__bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: #444950;
  line-height: 1.5;
}

.google-not-match-screen__bullet-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: #1c1e21;
  line-height: 0;
}

.google-not-match-screen__alert {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dadce0;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
}

.google-not-match-screen__alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #d93025;
  line-height: 0;
}

.google-not-match-screen__alert-text {
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
}

.google-not-match-screen__btn {
  color: white;
  display: block;
  width: 100%;
  background: #1877f2;
  border: none;
  border-radius: 35px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s;
}

.google-not-match-screen__btn:hover {
  background: #166fe5;
}

.google-not-match-screen__btn:active {
  background: #1464d8;
}

@media (max-width: 767px) {
  .google-not-match-screen {
    padding: 32px 16px 16px;
  }

  .google-not-match-screen__title {
    font-size: 20px;
  }
}

/* ─── Google Login Popup (gg-login view, light theme) ────────────────────── */
.gg-login {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-family: Roboto, Arial, sans-serif;
}

/* Progress bar — negative margin bleeds to popup-view edges */
.gg-login__progress {
  margin: -24px -24px 0 -24px;
  width: calc(100% + 48px);
  height: 4px;
  background: #e8eaed;
  overflow: hidden;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.2s;
  position: relative;
}

.gg-login__progress.active {
  opacity: 1;
}

.gg-login__progress-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 30%;
  height: 100%;
  background: #1a73e8;
  border-radius: 2px;
  animation: ggProgressBar 1s linear infinite;
}

@keyframes ggProgressBar {
  0%   { left: -30%; }
  100% { left: 110%; }
}

.gg-login__body {
  padding-top: 28px;
  display: flex;
  flex-direction: column;
}

.gg-login__logo-wrap {
  margin-bottom: 20px;
}

.gg-login__logo {
  width: 40px;
  height: 40px;
}

.gg-login__title {
  font-size: 24px;
  font-weight: 400;
  color: #202124;
  margin: 0 0 8px;
}

.gg-login__subtitle {
  font-size: 16px;
  color: #5f6368;
  margin: 0 0 28px;
}

.gg-login__error {
  color: #d93025;
  font-size: 14px;
  margin-top: 8px;
  margin-bottom: 4px;
}

/* Float-label input group */
.gg-login__form-group {
  position: relative;
  margin-top: 8px;
  margin-bottom: 0;
}

.gg-login__input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #202124;
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s, border-width 0.15s;
  font-family: inherit;
  box-sizing: border-box;
}

.gg-login__input:focus {
  border-color: #1a73e8;
  border-width: 2px;
}

.gg-login__input--error {
  border-color: #d93025;
  border-width: 2px;
}
.gg-login__input--error + .gg-login__label {
  color: #d93025;
}
.gg-login__input--error:focus {
  border-color: #d93025;
}

.gg-login__label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #5f6368;
  font-size: 16px;
  pointer-events: none;
  transition: top 0.15s, font-size 0.15s, color 0.15s, background 0.15s;
  background: transparent;
  padding: 0;
}

.gg-login__input:focus + .gg-login__label,
.gg-login__input:not(:placeholder-shown) + .gg-login__label {
  top: 0;
  left: 12px;
  font-size: 12px;
  background: #fff;
  padding: 0 4px;
  transform: translateY(-50%);
}

.gg-login__input:focus + .gg-login__label {
  color: #1a73e8;
}

.gg-login__input:not(:focus):not(:placeholder-shown) + .gg-login__label {
  color: #5f6368;
}

/* Links */
.gg-login__link {
  color: #1a73e8;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  margin-top: 16px;
}

.gg-login__link:hover {
  text-decoration: underline;
}

/* Guest mode description */
.gg-login__desc {
  color: #5f6368;
  font-size: 14px;
  margin-top: 20px;
  line-height: 1.5;
}

/* Action row */
.gg-login__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.gg-login__actions--spaced {
  justify-content: space-between;
}

/* Buttons */
.gg-login__btn {
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 24px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
  min-width: 80px;
}

.gg-login__btn:hover {
  background: #1557b0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gg-login__btn--secondary {
  background: transparent;
  color: #1a73e8;
  box-shadow: none;
}

.gg-login__btn--secondary:hover {
  background: rgba(26, 115, 232, 0.08);
  box-shadow: none;
}

/* Email pill (password step) */
.gg-login__email-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f3f4;
  border: 1px solid #dadce0;
  border-radius: 20px;
  padding: 6px 10px 6px 8px;
  margin-bottom: 24px;
  width: fit-content;
}

.gg-login__pill-icon {
  display: flex;
  align-items: center;
  color: #5f6368;
  flex-shrink: 0;
}

.gg-login__pill-text {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}

.gg-login__pill-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: #5f6368;
}

.gg-login__pill-btn:hover {
  color: #202124;
}

/* Show password row */
.gg-login__check-row {
  margin-top: 16px;
}

.gg-login__check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #3c4043;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.gg-login__checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #1a73e8;
  flex-shrink: 0;
}