._FNpPLfL1T81S8t_iUK0 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms, margin 500ms;
}

.l3GllVAfa56JOFeaFG3_ {
  overflow: hidden;
}

.BBHkUL9_EYcjdbk9jO8C {
  grid-template-rows: 1fr;
}

.Vu4zP31lgLDS4n59vfUV {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background-color: var(--bg-card);
}

.NXAzDRX05xfBn9PLAITW {
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 120px; /* Ensure content clears the fixed bottom navigator (94px height + 26px safe spacing) */
  background-color: white;
}

.bU0NDVDqvITDeMHdMkTg {
  width: 100%;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-lg);
  box-shadow: var(--shadow-lg);
  background-color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
}

.fSpAQ2xrWhcH6ZeOUAvc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: var(--mobile-page-title-top-spacing);
  margin-bottom: var(--mobile-page-title-content-spacing);
  background-color: white;
  position: relative;
  z-index: 10;
}

.xRNlF0gKGbvaOKlsyeja {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
}

.KoUx8VkZ3HA6YQaYr7Yg {
  font-weight: bold;
  font-size: var(--font-page-title);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 5%;
  margin-right: 5%;
}

.FhXeFzPSQFqpswM04Zoe {
  text-align: center;
}

/* Note: Page subtitle styling is handled by PageSubTitle component with position="header" */

.lSWKtj8z7cxVHOy6BR4U {
  width: 90%;
  padding-left: 5%;
  padding-right: 5%;  position: absolute;
}


.XaFUnESH5qyVMH_i5AwR {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f3GeoDkdZlCU7wbad5wu {
  color: #535353;
}

.cjaGoXJR94YjejbBkZaz {
  color: var(--text-tertiary);
  font-size: var(--font-body);
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
}

.c8Pmik10xf8nqH8tPWXA {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/**
 * PageSubTitle - Device-based responsive styles
 *
 * Uses device-based view detection (via useView hook) instead of CSS media queries.
 * This matches the app's pattern of detecting device type rather than screen width.
 *
 * Positions:
 * - 'header': Rendered in page header below title, minimal margins
 * - 'content': Rendered in page content area with bottom margin (default, legacy)
 *
 * Layout:
 * - Mobile: Centered bold text with brand color
 * - Desktop: Centered section subheading with muted color
 */

/* =============================================================================
 * BASE STYLES (shared by both positions)
 * ============================================================================= */

/* Container - centered on both views */
.LJegPkXrLPpldf6y5jX3 {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Text styling - mobile defaults */
.tD2bVHYtPLXj6MGOxncI {
  color: var(--brand-brown);
  font-weight: bold;
  font-size: var(--font-section-subtitle);
  text-align: center;
}

/* =============================================================================
 * POSITION: CONTENT (default - used when rendered in page content area)
 * ============================================================================= */

.chWTcfKTBPMZ_rzcQlXj {
  margin-bottom: var(--space-lg);  /* 24px - spacing between subtitle and form content */
}

.ld5ewwEfRsw5mtuF1ZAn {
  margin-bottom: var(--space-2xl);  /* 40px - larger spacing on desktop */
}

.lz9xXVmQWTkt8EVOfaF1 {
  margin-bottom: 0;
}

/* =============================================================================
 * POSITION: HEADER (used when rendered in page header)
 * Uses darker color to differentiate from section headers in content
 * ============================================================================= */

.CzF5SBFZ909jzpJj8KAH {
  margin-top: var(--space-lg); 
}
  
.DQl_pql3El71brwDhOra {
  color: var(--brand-brown-dark);  /* Darker than section headers for visual distinction */
}

/* Mobile header container - negative margin to collapse subtitle vertical space
 * The pageTitleContainer has margin-bottom for title-to-content spacing.
 * When subtitle exists, we reduce that spacing since subtitle provides visual separation.
 * Calculation: Cancels margin-top (8px) + some of the text height to bring content closer */
.VrV_raudN1qTv54MO8Gw {
  margin-bottom: calc(-1 * var(--space-sm));  /* -8px to cancel the margin-top */
}

/* =============================================================================
 * DESKTOP STYLES
 * ============================================================================= */

.PjkhniMtsPkU8FRpsdEx {
  color: var(--text-tertiary);
  font-weight: normal;
}

.ELhx7sUggKDMJ6YvLQ_0 {
  color: var(--text-secondary);  /* Darker than tertiary for header position on desktop */
}

/* Desktop header container - negative margin to collapse subtitle vertical space */
.EMYHSluZkG4efYBiyjmb {
  margin-bottom: -30px;  /* Cancels: margin-top (8px) + text height (~22px) */
}


/* =============================================================================
   CSS VARIABLES FOR NAVIGATION
   ============================================================================= */
:root {
  /* Navigation colors - clean light sidebar */
  --nav-bg: var(--bg-card);
  --nav-item-selected-bg: var(--brand-gold);
  --nav-item-hover-bg: rgba(190, 158, 85, 0.12);
  --nav-item-text: var(--brand-brown);
  --nav-item-text-muted: var(--grey-text);
  --nav-chevron-color: var(--grey-text);
  --nav-level2-selected-border: var(--brand-gold);
  --nav-level2-hover-bg: rgba(190, 158, 85, 0.08);
  --nav-icon-size: 20px;
}

.CxwVkfuiAHRgDxNuoRls {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
}

svg path {
  cursor: pointer;
}

.K5N9Iz6lIkxRIooXEzLh {
  position: fixed;
  height: 60px;
  width: 100%;
  background: var(--bg-card);
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.K1YJXAZLFTQK9h7EAPVl {
  position: relative;
  height: 60px;
  width: 100%;
  background: var(--bg-page);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: inset -5px 5px 25px var(--border-medium);
}

.K1YJXAZLFTQK9h7EAPVl::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 100%;
  background: var(--bg-card);
  clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
}

.oEWTpWNMRtoEUScR_VU3 {
  cursor: pointer;
  height: 40px;
  width: auto;
}

.VwQn3r2YoWLXT_b6wCH_ {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 55px;
  cursor: pointer;
}

.GTMkP8Ss04wja_bof98J {
  font-size: var(--font-caption);
  cursor: pointer;
}

.gCV49I67D_6YfwREDI57 {
  color: var(--grey-text);
}

.xOMjRICWFh22LwPmcI88 {
  color: var(--initiate-domain-action-caution);
}

.pWioPk3UDYHvzVG7yu7N {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.D_NzPbvgaHLVmjuxjDm4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.wup_3HGl90hW6ddQNchz {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 50px;
}

.rskM5Kp2_XHywMtKzUg0 {
  cursor: pointer;
}

.cwCVpk7kxXPKQAwcdBBE {
  margin-left: var(--space-sm);
  cursor: pointer;
}

.wxgzKh9AxNaaqwlO9oj1 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 50px;
  gap: 2px;
}

.qeGkKObkzNvXEJ2pi6zY {
  font-size: var(--font-caption);
  color: var(--grey-text);
}

._e4ShUz0W8327xn0Cvnl {
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--brand-brown);
}

.ejuaeQM2kdjz1DZVNcD6 {
  font-size: var(--font-caption);
  color: var(--grey-text);
}

.pghG9KAGYnAU7yE38E7g {
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  position: fixed;
  height: 100%;
  width: var(--desktop-navigator-width);
  z-index: 200;
  border-right: 1px solid var(--border-color);
}

.G70Z0znt3VUAEFJNomxK {
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-md);
  justify-content: space-between;
  flex: 1;
}

.bmjjCB_pKxujSMWBSfjg {
  display: flex;
  flex-direction: column;
}

.fdZYfwYMOAB4fnlq4Raz {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

/* =============================================================================
   LEVEL 1 NAVIGATION ITEMS
   ============================================================================= */

.raYTsRxTFTRdjzc3kwz6 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.raYTsRxTFTRdjzc3kwz6:not(:first-child) {
  margin-top: 2px;
}

/* Selected state - gold background with white text */
.V4g6xOMvi1Qcw8CBnJ0w {
  background-color: var(--nav-item-selected-bg);
  border: 1px solid transparent;
}

.V4g6xOMvi1Qcw8CBnJ0w .GlY20vOaoKYvzLiQ5E_Z,
.V4g6xOMvi1Qcw8CBnJ0w .hKqNbJwSChvN6Ea_1SVt svg,
.V4g6xOMvi1Qcw8CBnJ0w .RHANYlWft6ROpqJJN1Cl {
  color: white;
  fill: white;
  stroke: white;
}

/* Not selected state - subtle border to define the item */
.XTcV72B5Wibt5_6D5gp3 {
  background-color: transparent;
  border: 1px solid rgba(150, 150, 150, 0.4);
}

/* Hover state (only for non-selected items) */
.XTcV72B5Wibt5_6D5gp3:hover {
  background-color: var(--nav-item-hover-bg);
  border-color: rgba(190, 158, 85, 0.5);
}

/* Focus state for accessibility */
.raYTsRxTFTRdjzc3kwz6:focus-visible {
  outline: 2px solid var(--nav-item-selected-bg);
  outline-offset: 2px;
}

.uu8a6rQ939d8kGO51vMa {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  cursor: inherit;
}

.Zsd0wHTq5JRO9_5lN7Hi {
  display: flex;
  cursor: inherit;
  align-items: center;
}

/* Nav item icon */
.hKqNbJwSChvN6Ea_1SVt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  cursor: inherit;
}

.hKqNbJwSChvN6Ea_1SVt svg {
  width: 100%;
  height: 100%;
  fill: var(--nav-item-text);
  stroke: var(--nav-item-text);
  transition: fill 0.15s ease, stroke 0.15s ease;
  cursor: inherit;
}

/* Nav item label */
.GlY20vOaoKYvzLiQ5E_Z {
  font-size: var(--font-nav-item);
  color: var(--nav-item-text);
  transition: color 0.15s ease;
  cursor: inherit;
}

/* Chevron */
.RHANYlWft6ROpqJJN1Cl {
  fill: var(--nav-chevron-color);
  transition: transform 0.2s ease;
  cursor: inherit;
}

.wVVVF8Fyh0u2iXy8MQfy:hover {
  background-color: rgba(91, 72, 56, 0.1);
}

.wVVVF8Fyh0u2iXy8MQfy:focus-visible {
  outline: 2px solid var(--nav-item-selected-bg);
  outline-offset: 2px;
}

/* =============================================================================
   LEVEL 2 NAVIGATION ITEMS (Sub-items)
   ============================================================================= */

.Jmw71amX6KWz80rp5Hl8 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* Match Level 1 height with same vertical padding */
  padding: var(--space-sm) var(--space-md);
  margin-left: calc(var(--nav-icon-size) + var(--space-md) + var(--space-sm));
  cursor: pointer;
  border-radius: var(--radius-sm);
  /* Thicker left border for better visibility */
  border-left: 3px solid var(--border-strong);
  background-color: rgba(190, 158, 85, 0.06);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Selected state */
.KE3Z39F1zbslIxj6yHK3 {
  border-left-color: var(--nav-level2-selected-border);
  background-color: rgba(190, 158, 85, 0.15);
}

/* Hover state */
.Jmw71amX6KWz80rp5Hl8:hover {
  background-color: rgba(190, 158, 85, 0.12);
  border-left-color: var(--brand-gold);
}

/* Focus state */
.Jmw71amX6KWz80rp5Hl8:focus-visible {
  outline: 2px solid var(--nav-item-selected-bg);
  outline-offset: 2px;
}

.vE4YbZPlLOfE4b0HjGhM {
  font-size: var(--font-nav-item-sub);
  cursor: inherit;
}

.N7XoLBnahr9VQHAElyLi {
  color: var(--brand-brown);
  font-weight: 600;
}

.P56I8vbiwzVmokGnDZhZ {
  color: var(--brand-brown);
  font-weight: 400;
}

.a21K0hB9YhTHkQvEGj_Q {
  margin-top: 60px;
  margin-left: var(--desktop-navigator-width);
  width: calc(100% - var(--desktop-navigator-width));
  background-color: var(--bg-page);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset var(--border-medium) 5px 5px 25px;
  flex: 1;
}

.gEzLaIwpTvUKuCUhLygP {
  margin-top: 50px;
  width: min(1000px,calc(100% - 140px));
  padding-bottom: var(--space-3xl);
}

.Pe1BQ7vA7RlmaoeCbQVc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--desktop-page-title-content-spacing);
  align-items: center;
}

.uhAD6itRhE4IdxXDQoB7 {
  margin-top: var(--space-md);
  margin-bottom: -20px;
}

.GCdxxICMBIfEXvA5Eejn {
  width: 120px;
  margin-right: var(--space-sm);
  margin-left: var(--space-sm);
  text-align: center;
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-radius: var(--radius-xl);
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
}

/* Title row - positions return arrow relative to title */
.nmHiJmA7unnQFF9nOWWd {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.gTOJhVqj7A6UZXZFiQSg {
  color: var(--brand-brown);
  font-size: var(--font-page-title);
}

/* Note: Page subtitle styling is handled by PageSubTitle component with position="header" */

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

.OgujvVHlY7aBVa3melMC {
  color: var(--text-tertiary);
  font-size: var(--font-body);
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
}

/**
 * FieldTitle - Device-based responsive styles
 *
 * Uses device-based view detection (via useView hook) instead of CSS media queries.
 * This matches the app's pattern of detecting device type rather than screen width.
 */

/* =============================================================================
 * MOBILE STYLES
 * ============================================================================= */

/* Container for standalone usage */
.Xn03YpI0M2OS4mQ5HFpG {
  /* Default: no width restriction on mobile */
}

/* Main title - uses semantic spacing for title-to-content gap */
.fzN1yHTJpJ5li1YuoDcY {
  font-weight: bold;
  font-size: var(--font-card-title);
  color: var(--brand-brown);
  margin-bottom: var(--form-title-content-spacing);
}

/* Subtitle */
.ui36v6uCzINRTcxsKUmp {
  color: var(--grey-text);
  font-size: var(--font-label);
  margin-top: var(--space-xs);
}

/* =============================================================================
 * DESKTOP STYLES (applied via className in component when view === 'desktop')
 * ============================================================================= */

/* Standalone container has fixed width on desktop */
.eZSD0jJ2cEwJrXYE9ohj {
  width: 360px;
}

/*
 * Desktop title styling - now inherits margin-bottom from base .fieldTitle
 * since both use the same semantic variable --form-title-content-spacing.
 * This class exists for any future desktop-specific title styling.
 */
.Ye635bX6B6jGdPQdpbdQ {
  /* Currently inherits from .fieldTitle - no overrides needed */
}

/* =============================================================================
 * MODIFIER CLASSES
 * ============================================================================= */

/* Add bottom margin (for section spacing) */
.JaSl3eKgwCQmgG76sFoD {
  margin-bottom: var(--space-lg);
}

/* Remove bottom margin */
.TpG2bUd9aOqmLHl99knw {
  margin-bottom: 0;
}

/* Subtitle spacing when following a title */
.WQWCyaH_HYeMQstaOOKf {
  margin-top: var(--space-sm);
}


/**
 * SectionHeader - Styles for section/subflow headers
 *
 * Used for headers within page content, subflows, and sections.
 * Different from PageSubTitle which is for page-level subtitles in the header.
 *
 * Layout:
 * - Mobile: Centered bold text with brand color
 * - Desktop: Centered section subheading with muted color
 */

/* =============================================================================
 * BASE STYLES
 * ============================================================================= */

.qeKTv38Ms__mtkrNN_Sq {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--section-header-content-spacing);  /* 24px - consistent spacing to content below */
}

/* Text styling - mobile defaults */
.R6yP9Q7wN7DTt_A5nY2Q {
  color: var(--brand-brown);
  font-weight: bold;
  font-size: var(--font-section-subtitle);
  text-align: center;
}

/* =============================================================================
 * DESKTOP STYLES
 * ============================================================================= */

.cLl801JfBU8I0SNqbqBw {
  font-weight: normal;
}


.xw0LSNKIskw2N7GjZpvA {
  color: var(--status-link);
  text-decoration: underline;
  cursor: pointer;
}

/* Using doubled selector for higher specificity */
.iGaVB1gBeUDXMV7qGEVZ.iGaVB1gBeUDXMV7qGEVZ {
  width: 443px;
  padding-top: 0px;
}

.RPaPm3tn3fKIW1OV_oTQ {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 55px;
}

.Iyvg8aSPu39Fu_uyhdKw {
  font-size: var(--font-card-title);
}

.CcslAqLASJYo5nVW53Tn {
  margin-bottom: 20px;
}

.Ev2foxzmvxONS6AbyUPd {
  margin-bottom: 20px;
}

.J9suibDOig0yvefvfVNF {
  color: var(--status-error);
  font-weight: 500;
  margin-bottom: 15px;
  padding: 8px 16px;
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
}

/* Countdown timer styles */
.QTQK5ENSGpr4A8njTpeq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-body);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 15px;
  padding: 10px 20px;
  background-color: rgba(0, 123, 255, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(0, 123, 255, 0.2);
}

.eXwiHavBe_KQ8uHRvGtr {
  color: var(--status-warning, #f0ad4e);
  background-color: rgba(240, 173, 78, 0.1);
  border-color: rgba(240, 173, 78, 0.3);
}

.K9KFIYMOxfN4DzdXTOcf {
  flex-direction: column;
  gap: 12px;
  color: var(--status-error);
  background-color: rgba(220, 53, 69, 0.1);
  border-color: rgba(220, 53, 69, 0.3);
}

.l8skXtLiOtir8emBnTjz {
  background-color: var(--brand-brown);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.l8skXtLiOtir8emBnTjz:hover {
  background-color: var(--brand-brown-dark, #5a4a3a);
}

.l8skXtLiOtir8emBnTjz:active {
  transform: scale(0.98);
}

.s48NWeTBHllQUzbLUhOQ {
  margin-bottom: var(--space-lg);
  width: 100%;
  max-width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Hidden input for iOS SMS autofill - positioned off-screen but still focusable */
.sT6GCKQTItbEkptdDffP {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Style the OtpInput container (the div wrapper from react-otp-input) */
.s48NWeTBHllQUzbLUhOQ > div {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Ensure OTP input boxes don't overflow */
.s48NWeTBHllQUzbLUhOQ > div > input {
  flex-shrink: 1;
  min-width: 0;
}

/* Mobile-specific styles for better OTP display */
@media (max-width: 480px) {
  .RPaPm3tn3fKIW1OV_oTQ {
    padding: 20px 5px;
  }

  .s48NWeTBHllQUzbLUhOQ {
    padding: 0 5px;
  }

  .s48NWeTBHllQUzbLUhOQ > div {
    gap: 4px;
  }

  .Iyvg8aSPu39Fu_uyhdKw {
    font-size: var(--font-label);
  }

  .CcslAqLASJYo5nVW53Tn, .Ev2foxzmvxONS6AbyUPd {
    padding: 0 10px;
    word-wrap: break-word;
  }
}

.EEA6vixhmpN9D2h8X4fG {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.BI3tOaWddUNiRVvQHLFv {
  max-width: 300px;
  font-size: var(--font-caption);
  text-align: center;
  margin-bottom: 25px;
}

/* Desktop - international transfer message */
.NcQ_1p1mvAK0XCgk9AWM {
  max-width: 380px;
  font-size: var(--font-body);
  text-align: left;
  margin-bottom: var(--space-lg);
  padding: 50px var(--space-lg) 20px var(--space-lg);
  background: linear-gradient(135deg, var(--brand-gold-light) 0%, var(--brand-gold-lighter) 100%);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand-gold);
  box-shadow: var(--shadow-md);
  position: relative;
  line-height: 1.6;
  color: var(--brand-brown);
  font-weight: 500;
}

.NcQ_1p1mvAK0XCgk9AWM::before {
  content: '⚠️';
  position: absolute;
  top: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-title);
  background: var(--brand-gold);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
}

.NcQ_1p1mvAK0XCgk9AWM .vBBGT0UXb_vBj4QwjA1D {
  color: var(--status-warning);
  font-weight: 600;
}

/* Mobile variant - applied via useView() in component */
.rTt2RYW6h7B7HpnWPDXn {
  max-width: 320px;
  padding: 45px 20px 18px 20px;
  font-size: var(--font-caption);
  text-align: center;
}

.rTt2RYW6h7B7HpnWPDXn::before {
  width: 28px;
  height: 28px;
  font-size: var(--font-card-title);
  top: 10px;
}

/* Using doubled selector for higher specificity without !important */
.puXOeBgj7Ucc8RW7AfY1.puXOeBgj7Ucc8RW7AfY1 {
  color: white;
  background: linear-gradient(135deg, var(--grey-border) 0%, var(--text-muted) 100%);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  border: 2px solid var(--grey-border);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  font-size: var(--font-caption);
  margin: 0 var(--space-xs);
  position: relative;
  top: -1px;
}

/* Mobile variant for section link - applied via useView() in component */
.w88wGd8dWmbgMms4bhbz.w88wGd8dWmbgMms4bhbz {
  display: block;
  margin: 12px auto 0 auto;
  width: fit-content;
}

.gdDDnFxPwvFT_2ZprEI1 {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 25px;
}

.ClQqM30dm9fABjTJq59L {
  max-width: 300px;
  width: 200px;
  background-color: var(--border-strong);
  border-radius: 25px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.olwH7cTbbdI5k9ueHMWY {
  padding: 10px;
  margin-bottom: 20px;
  color: var(--text-tertiary);
  font-size: var(--font-card-title);
}

.AVxJago_2wccYkH3_VGI {
  text-decoration: underline;
  color: red;
}

.cExroYA3iB_aRmt6lnDh {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zlLjOQGo70juJQNMY67V {
  color: var(--brand-brown);
  font-weight: bold;
  padding: 10px;
}

.V2J3mDcI3W6Y14IBsHJo {
  border-spacing: 15px;
  margin-bottom: 40px;
  border-collapse: collapse;
}

.ez6ruDTHQO7SvxXvUWzK td {
  padding: 0;
}

.o0zfppBzJWE8IIAl6DFQ {
  background-color: var(--border-medium);
}

.NCvecisH02dggszNQ1Wt {
  padding: 10px; 
}

.h8bMozzXd8XxpehH6fhc {
  text-align: end;
}

.ZYCBoEGBcUdS5G6rX5VR {
  color: black;
  font-size: var(--font-button);
  cursor: pointer;
  text-align: center;
}

/* =============================================================================
   UNIFIED SUCCESS PAGE STYLES
   ============================================================================= */

/* Base container - shared structure */
.KHNX7ZiuN2XEIT8IkHTS {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Green check section - responsive margins */
.YN0KkdkvTlaCop0Mhh5i {
  margin-bottom: 20px;
}

[data-view="mobile"] .YN0KkdkvTlaCop0Mhh5i {
  margin-top: 20px;
}

[data-view="desktop"] .YN0KkdkvTlaCop0Mhh5i {
  margin-top: 40px;
}

/* Text section - shared styles */
.n9_Y_7yhXdfRFi4lOg6J {
  margin-bottom: 25px;
}

/* Text line - mobile has larger font */
.JiEIp7iCXCVmtURdH7El {
  text-align: center;
}

[data-view="mobile"] .JiEIp7iCXCVmtURdH7El {
  font-size: var(--font-card-title);
}

/* =============================================================================
   ADDITIONAL SECTIONS (shared between mobile and desktop)
   ============================================================================= */

.TIKHmX7gZtcu8WN2i3A1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.UR44pgbuM5Eg4sXe4KtA {
  display: flex;
  flex-direction: column;
  min-width: 250px;
}

.BW3YpAsn5zcKZIZactWA:not(:first-child) {
  padding-top: 10px; 
}

.BW3YpAsn5zcKZIZactWA:not(:last-child) {
  border-bottom-style: solid;
  border-bottom-color: var(--grey-border);
  border-width: thin;
  padding-bottom: 10px;
}

.RblDwU8ET_2fwMMNLj3U {
  color: var(--brand-brown);
  font-weight: bold;
  padding-bottom: 5px;
}

.TMkNoQMW49nALboi7Tin {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.NdA5RSBtdH8IG0yWaxRd {
  color: var(--brand-brown);
}

.wSbyebx8iTEYma2zLqOH {
  color: var(--brand-brown);
}

.UWFoWPWPYxt1sDjJZpdw {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  cursor: pointer;
}

.tBGEKSxeKOZ7rq0CijWQ {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.wSbyebx8iTEYma2zLqOH {
  color: var(--brand-brown);
  margin-left: 5px;
  cursor: pointer;
}

.iZjlRPWbZEuTatqylyb7 {
  margin-bottom: 25px;
}

.PvLExxX7E0fnYEsy8OQv {
  margin-bottom: 10px;
}

.nB10pTwtSav9pLqP1vjB {
  color: var(--brand-brown);
  font-weight: bold;
  margin-bottom: 2px;
}

.cmdpD9IQNG88VC8To7qc {
  color: var(--text-tertiary);
}



/* =============================================================================
   CONFIRMATION PAGE STYLES - UNIFIED RESPONSIVE
   ============================================================================= */

/* Base container - shared structure */
.dTMX8nqrgmtpH2BE7Ngd {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Fields wrapper - centers content */
.yGC76rjTErzN7ZZxCiCV {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Fields container - holds the DisplayFieldWithText components */
.hQJALtCaMikTuAwXB1Bi {
  width: fit-content;
}

/* Mobile-specific: constrain width and add top margin */
[data-view="mobile"] .hQJALtCaMikTuAwXB1Bi {
  max-width: 300px;
  width: 100%;
  margin-top: var(--space-2xl);
}

/* Desktop-specific: smaller top margin */
[data-view="desktop"] .hQJALtCaMikTuAwXB1Bi {
  margin-top: var(--space-sm);
}

/* Mobile-specific: bottom margin for button container */
[data-view="mobile"] .T9SKkoHorZicVQQwzr6a {
  margin-bottom: var(--space-lg);
}

/* ============================================
   NACIONAL TRANSFER FLOW STYLES
   ============================================ */

/* Mobile Container */
.Bwdst2UYhhgpEYcEZZw2 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Section Styling */
.HgKl0oMlU50T6QnxesWB {
  margin-bottom: var(--space-lg);
  width: 100%;
}

/* Radio Group */
.R7kiwnjHvhCUasJgk3Yr {
  display: flex;
  flex-direction: row;
}

.cnn8VgcxMTJBWNLpgCnb {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 50%;
}

.nVVDLYUgwVIMgV3k3bDg {
  margin-left: var(--space-xs);
}

.Vp7CyK2fhLQsNre1OCIY {
  height: 20px;
  width: 20px;
  accent-color: var(--brand-brown);
  margin: 0px;
}

/* Input Text - base styles for raw input elements */
.qHoRm29NzjDms4BFX2Gg {
  width: 100%;
  height: var(--input-height-md);
  padding: var(--input-padding-y) var(--input-padding-x);
  border: 1px solid var(--input-border-color);
  color: var(--text-primary);
  background-color: var(--bg-card);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: var(--input-font-size);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.qHoRm29NzjDms4BFX2Gg::placeholder {
  color: var(--grey-text);
}

.qHoRm29NzjDms4BFX2Gg:focus {
  border-color: var(--input-border-color-focus);
  box-shadow: var(--input-focus-ring);
}

/* Note: .inputTextNotFirst removed - spacing now handled by FormFieldGroup gap system */

/* IBAN Input */
.hPNXjUDwPF8ZYZYBlZ60 {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: text;
}

.dHwbo17AzXoA4dZ5kRWw {
}

.jxRorAUYNW436wP94KeY {
  margin-left: var(--space-sm);
  cursor: text;
}

/* Note: .paraQuemBvContasMinhas removed - spacing now handled by FormSection gap system */

/* Note: containerContinuarButton removed - button spacing now handled by FormButtonGroup */

/* Desktop section groupings */
.GQMwgjzg6psPMcao73Qs {
}

.DpKNhi2RyJx2oYL_vY50 {
}

/* Transf Inst Switch */
.AHiElji07YWESzQy2iMf {
}

/* Transferencia instantanea switch container
 * Note: No margin-top here - spacing is handled by FormSection/FormFieldGroup gap system
 */
.s1Vjk89nMBWSJlT_38cR {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.OizvOo6dVemUdvfn3bpf {
  color: var(--text-tertiary);
  padding-right: var(--space-sm);
}

.BDUIMYBZYVeghVL3nhYc {
  width: 60px;
  margin-left: var(--space-sm);
}

/* Note: Segmented button toggle groups now use MUI ToggleButtonGroup with inline sx styles */

/* ============================================
   DESKTOP STYLES
   ============================================ */

.ZYypXjl69M1Oh8vvAMSX {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.no4d1JON9VRsxkR_RPlW {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
}

/* Note: containerDesktopContinuarButton removed - button spacing now handled by FormButtonGroup */

.oBpBzExcLSL4_bQ_84Qs {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Desktop IBAN Field */
.XqUyxsBZLKX230wRLQVj {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: var(--space-sm);
  cursor: text;
}

.V4BprcjPZIefU1FA_hOB {
  margin-left: var(--space-sm);
  padding: var(--space-sm);
  border-color: var(--grey-border);
  color: black;
  border-width: thin;
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-size: var(--font-caption);
  width: 100%;
  cursor: text;
}

.V4BprcjPZIefU1FA_hOB::placeholder {
  color: var(--grey-text);
}

.V4BprcjPZIefU1FA_hOB:focus {
  outline-color: var(--brand-brown);
}

/* Desktop Numero Interno Conta A Creditar Outro Cliente Input */
.s_Gyt4WkBijhD4RV3aow {
  width: 360px;
}

/* Mobile styles */
.Tasmx8bRtKIztf1709j_ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
}

.GCrpcqa8H9K3H6qsDpt7 {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.TYzUlruWY5GOI3stwOzS {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: white;
  min-width: 120px;
  min-height: 100px;
}

.TYzUlruWY5GOI3stwOzS:hover {
  border-color: var(--brand-brown);
  background-color: var(--bg-card-alt);
}

.TqahXfUo15rrhZWsbGh1 {
  margin-top: 8px;
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--brand-brown);
  text-align: center;
}

/* Desktop styles */
.JCiw7AaxlbaCzPJSs36O {
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  margin: 20px 0;
}

.rwJWcyN2Wsr_MHo2JlBQ {
  font-size: var(--font-section-subtitle);
  font-weight: 600;
  color: var(--brand-brown);
  margin-bottom: 20px;
  text-align: center;
}

.IXRjV4MEpytAfhtlj4Bw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 520px;
  margin: 0 auto;
}

.ajZp2gmASQvVSxeT9KDq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 600px;
  width: 100%;
}

.YZCG4ZBD6JNayDLvQ0g8 {
  display: flex;
  justify-content: center;
}

/* Small screen adjustments within mobile view */
@media (max-width: 480px) {
  .Tasmx8bRtKIztf1709j_ {
    padding: var(--space-md);
    gap: var(--space-md);
  }
}

/* Note: Desktop layouts (.desktopFinalidadeChoices, etc.) do not need
   width-based media queries because useView() already handles mobile/desktop
   distinction at the component level. Desktop users get desktop layout
   regardless of browser window size. */

/* Note: Viagem Info Modal now uses ConfirmationModal component */

/* Account/Amount Step Styles */
.IzQSJ2YU8XrvVjGtlgdT {
  margin-top: 40px;
}

.GxHDNcOAbGyvz4u_UzOA {
  margin-top: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Acceptance Step Styles */
.PBjJA23pCn8zrnN_VPTt {
  text-align: justify;
  padding-left: 10px;
  padding-right: 10px;
}

.w8sEcmGt3NdNsL_i2iEN {
  margin-bottom: 20px;
}

.YqjfaMLFEcDD9GvGa8wt {
  margin-bottom: 20px;
}

.Ntd77ERuzndtmdsiv_NH {
  margin-top: 40px;
  text-align: justify;
  max-width: 900px;
  font-size: var(--font-card-title);
}

.gIHo8OZLJCOk1SgSeCPu {
  margin-bottom: 20px;
}

.K4EiYJlImtYM8LV8ERxX {
  margin-bottom: 20px;
}

/* ============================================
   CONTAINER STYLES
   ============================================ */

.jcY1HsP7qNlJHxeFwiQ9 {
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

.YqoBeU4OYpibwoxI6T6_ {
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================
   ACCEPTANCE WARNING
   ============================================ */

.CbQM4X69DP_X23sFY3IR {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--bg-warm);
  border-radius: 8px;
  border: 1px solid var(--brand-gold);
  margin-bottom: 20px;
}

.r67YZoU3F7oH5deJHH4f {
  color: var(--brand-brown);
  font-size: var(--font-label);
  line-height: 1.5;
}