/**
 * Base Button Styles (Unified mobile/desktop)
 *
 * Core button styling shared across all button variants.
 * Uses CSS feature queries for hover effects on desktop devices.
 */

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

.T2TtbdzV81pwWqzQ0XkO {
  min-width: 120px;
  width: fit-content;
  height: 35px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: var(--font-button);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* =============================================================================
   DESKTOP HOVER EFFECTS
   Only applied on devices that support hover (not touch devices)
   ============================================================================= */

@media (hover: hover) {
  .T2TtbdzV81pwWqzQ0XkO:hover {
    transform: var(--hover-lift-sm);
    box-shadow: var(--shadow-md);
  }
}

/* =============================================================================
   TEXT STYLING
   ============================================================================= */

.Z42T0dC1RZbyxRHWCPnO {
  color: white;
  cursor: pointer;
}

/* =============================================================================
   DISABLED STATE
   ============================================================================= */

._s2jTPc3og6yjsa3R7du {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Prevent hover effects on disabled buttons */
@media (hover: hover) {
  ._s2jTPc3og6yjsa3R7du:hover {
    transform: none;
    box-shadow: none;
  }
}

/* =============================================================================
   LOADING STATE (SPINNER)
   ============================================================================= */

.NOi30IbgnjMo78cwxxnP {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}


.BK3SFNG5ZYkHdY_Fg4aR {
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.lzHIr8GcCX27EQkn0Un1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 18px;
  min-width: 240px;
  padding-bottom: 40px;
}

.mihhC1rETrWyXVdBykQG {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 2px solid white;
  box-sizing: border-box;
}

.XLqd80zvcbjsrK62zhMA {
  background-color: white;
}

.g9XVYkivyfL2ifQ8Y4Ab {
  display: flex;
  width: 100%;
  max-width: 380px;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding: 0 10px;
}

.Sl_VJJtay_0VOyrnq53e {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 12px;
}

.WEYVgmdMX0sG6N_hla7O {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wMlg4wQyivKgSN1_Ez_5 {
  height: 68px;
  width: 68px;
  color: white;
  background: none;
  border: none;
  font-size: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wMlg4wQyivKgSN1_Ez_5:active {
  background-color: rgba(200,200,200,0.3);
}

.nWJZ0A_wXyLs7W3V4elw {
  height: 68px;
  width: 100px;
}

.ioTGXfRpalo2Vjbos_rt {
  width: 36px;
  height: auto;
}

.Jj1RFMx8abprsZBrKtcS {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.D2hMivT1Js331aAhJ6J2 {
  /* No circle background - clean minimal design */
  width: 80px;
  height: 80px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.D2hMivT1Js331aAhJ6J2:active {
  transform: scale(0.92);
  opacity: 0.8;
}

.D2hMivT1Js331aAhJ6J2:hover {
  opacity: 0.9;
}

.BeBz7kNDKbP2LGYKVx7i {
  width: 72px;
  height: 72px;
  fill: white;
  stroke: white;
}

.IgRFEt8AtICD02dHrDap {
  color: white;
  font-size: var(--font-caption);
  opacity: 0.8;
  text-align: center;
}

.ANyK_K6ETRUr_cxIvDgW {
  opacity: 0.5;
  cursor: not-allowed;
}

.ANyK_K6ETRUr_cxIvDgW:hover,
.ANyK_K6ETRUr_cxIvDgW:active {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
}


/**
 * Filled Button Styles (Unified mobile/desktop)
 *
 * Filled action buttons for various UI patterns.
 * Using doubled class selectors for higher specificity to override base button styles.
 */

/* =============================================================================
   BUTTON TYPE VARIANTS
   ============================================================================= */

/* Brand brown variant */
.Sr7zpxpc4G5DjG45BDYB.Sr7zpxpc4G5DjG45BDYB {
  background-color: var(--filled-action-button-brand-brown-bg);
}

.zflFgG4nvT6f8nQ7VqZs.zflFgG4nvT6f8nQ7VqZs {
  color: var(--filled-action-button-brand-brown-text);
}

/* Brand gold variant */
.rvW9V_wsWtFh_0U5FkAg.rvW9V_wsWtFh_0U5FkAg {
  background-color: var(--filled-action-button-brand-gold-bg);
}

.SoFHehCPe7_y6MbZgZ7V.SoFHehCPe7_y6MbZgZ7V {
  color: var(--filled-action-button-brand-gold-text);
}

/* White variant - for colored backgrounds */
.Fh2C7ZrswWUdcxwtu0KM.Fh2C7ZrswWUdcxwtu0KM {
  background-color: var(--filled-action-button-white-bg);
}

.HsJWcfSzoSQ8Rmjd3p7b.HsJWcfSzoSQ8Rmjd3p7b {
  color: var(--filled-action-button-white-text);
}


/**
 * Base Input Styles
 *
 * Centralized CSS for all input elements to ensure consistent focus effects.
 * Import this file in page-specific CSS when using raw input elements,
 * or use TextInput component which includes these styles automatically.
 *
 * Usage with CSS Modules composition:
 *   .textInput { composes: baseInput from '../baseInput.css'; }
 */

/* =============================================================================
   CORE INPUT STYLES
   ============================================================================= */

.yj776bEs8xQpCOvhP_g2 {
  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);
  cursor: text;
}

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

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

._Ev2fxNssJ1FNC1MWbVO {
  background-color: var(--bg-input-disabled);
  cursor: default;
}

/* =============================================================================
   FIELD CONTAINERS
   ============================================================================= */

.sYXBq1enNsIJIojebtak {
  width: 100%;
}

/* =============================================================================
   VALIDATION STATES
   ============================================================================= */

.WK70IooMfq6UwFPsAo5U {
  position: relative;
  display: flex;
  align-items: center;
}

.ZpjaEZvxGoGmw3Fo5znD {
  padding-right: var(--space-2xl);
}

.F2YPMnZQ2Qn_gMK3_3jP {
  border-color: var(--status-error) !important;
}

.F2YPMnZQ2Qn_gMK3_3jP:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.Y_nNofjGHjYz67kjjfl7 {
  position: absolute;
  right: var(--space-sm);
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.pEuLDukr5PfOhJkAOnok {
  color: var(--status-error);
}

/* =============================================================================
   DESKTOP FORM SECTION STYLES
   ============================================================================= */

.ad8jvep63PNpRzYJop_2 {
  width: 360px;
}

.xLVnXqXOqI4W2zieouug {
  margin-top: var(--space-sm);
}

.QQOFEw8TeqgrgI5fMNvx {
  margin-bottom: var(--space-2xl);
}

.B5jDzep0Fs7JL580J_FA {
  color: var(--brand-brown);
  font-weight: bold;
}

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

.yeUboDumrprDHnBRIlrZ {
  margin-top: var(--space-sm);
}

.KPEmBrkE7uCWhBcerJim {
  margin-top: var(--space-sm);
}

/* =============================================================================
   PREFIX SUPPORT
   ============================================================================= */

.v5Zr5Y2JzkJ9NiYkDgVQ {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.AAzZpG6pcDmFNCiANkFx {
  color: var(--text-primary);
  font-size: var(--input-font-size);
  white-space: nowrap;
  margin-right: var(--space-sm);
}

.iG3rbZzmSdvTBv4aMNaB {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}


/**
 * Transparent Button 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.
 * Using .transparentButton.transparentButton for higher specificity
 * to override base button styles without !important.
 */

/* =============================================================================
   BASE STYLES (shared between mobile and desktop)
   ============================================================================= */

/* Base transparent button styling */
.Qa9SZKRKoE8G_PphdhK9.Qa9SZKRKoE8G_PphdhK9 {
  background-color: transparent;
  border-style: solid;
  border-width: thin;
}

/* Light variant - for dark/colored backgrounds */
.Qa9SZKRKoE8G_PphdhK9.aj1YcACZWdCUFF00Ucxd {
  border-color: var(--transparent-button-light-border);
}

.q7dQPYR0WhMjrqGdqbUV.q7dQPYR0WhMjrqGdqbUV {
  color: var(--transparent-button-light-text);
}

/* Neutral variant - for light backgrounds */
.Qa9SZKRKoE8G_PphdhK9.u5qcdODEamSLUHkvlUvT {
  border-color: var(--transparent-button-neutral-border);
}

.LHuGo0bs0Xr0XaQHd2hD.LHuGo0bs0Xr0XaQHd2hD {
  color: var(--transparent-button-neutral-text);
}

/* Branded variant - for brand emphasis */
.Qa9SZKRKoE8G_PphdhK9.Aa5PrDdz0UBLDWzsYa6l {
  border-color: var(--transparent-button-branded-border);
}

.uc89TLyX8XVg37FwuOrE.uc89TLyX8XVg37FwuOrE {
  color: var(--transparent-button-branded-text);
}

/* Positive variant - for domain actions like "Reforçar", "Utilizar", "Aprovar" */
.Qa9SZKRKoE8G_PphdhK9.aXA_Y_vQqxCwXs9LdGbx {
  border-color: var(--initiate-domain-action-positive);
}

.tnxj9HtYcw7p4qQEO0W7.tnxj9HtYcw7p4qQEO0W7 {
  color: var(--initiate-domain-action-positive);
}

/* Caution variant - for domain actions like "Mobilizar", "Cancelar" */
.Qa9SZKRKoE8G_PphdhK9.tiLxjyLWRe2dnyyHlO_y {
  border-color: var(--initiate-domain-action-caution);
}

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

/* Top Green variant */
.Qa9SZKRKoE8G_PphdhK9.Rjja9QZJJpBGkaoFjVr8 {
  border-color: var(--initiate-domain-action-positive);
}

.wDakwlBYXWnC18_IetTz.wDakwlBYXWnC18_IetTz {
  color: var(--initiate-domain-action-positive);
}

/* =============================================================================
   MOBILE-SPECIFIC STYLES
   ============================================================================= */

/* Top variant - for page header actions (mobile) */
.Qa9SZKRKoE8G_PphdhK9.KXioJAEMrfmw2nD3Hqe7 {
  margin: 5px;
  border-color: var(--transparent-button-neutral-border);
}

.rm34qdOSPSnnKGOKGPoG.rm34qdOSPSnnKGOKGPoG {
  color: var(--transparent-button-neutral-text);
}

/* Top Grey variant (mobile only) */
.Qa9SZKRKoE8G_PphdhK9.rpwMlv0elb77_HDcGLQQ {
  border-color: var(--grey-border);
}

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

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

/* Top variant - for page header actions (desktop) */
.Qa9SZKRKoE8G_PphdhK9.pukuZCBsjpkzpBkprwEY {
  width: 120px;
  margin-right: 10px;
  margin-left: 10px;
  border: 1px solid;
  border-color: var(--transparent-button-neutral-border);
  border-radius: 15px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}


/* Selected Account Display (for accounts only) */
.aNV8p6hfg3ziOItCvlsU {
  display: flex;
  flex-direction: row;
  background-color: rgba(190, 158, 85, 0.2);
  padding: var(--space-sm);
  align-items: center;
  height: 43px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

.aNV8p6hfg3ziOItCvlsU:hover {
  background-color: rgba(190, 158, 85, 0.3);
}

/* Read-only variant for selected account (e.g., fixed DP escolhido field) */
.h3MdZZsglsaOQcgOMpIk {
  background-color: var(--border-light);
  cursor: default;
}

.h3MdZZsglsaOQcgOMpIk:hover {
  background-color: var(--border-light);
}

.vrZNwsr9hsNeDopa9gYg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  width: 40px;
  height: 40px;
  background-color: rgba(190, 158, 85, 0.1);
  border-radius: 50%;
  flex-shrink: 0;
}

.Vd5NoH0mQafiHRlZx1tX {
  padding-left: var(--space-sm);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.VRAixzhiFBekZow3vhrA {
  color: var(--brand-brown);
  font-size: var(--font-subtitle);
  font-weight: 500;
}

.AblDA6tv8JERa57WjBcy {
  font-size: var(--font-list-item-subtitle);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: var(--space-2xs);
}

/* Drag Handle */
.pRYJoQu7nlCKMxRftFhk {
  width: 40px;
  height: 4px;
  background-color: rgba(0,0,0,0.3);
  border-radius: 2px;
  margin: var(--space-sm) auto var(--space-xs) auto;
  cursor: grab;
}

.pRYJoQu7nlCKMxRftFhk:active {
  cursor: grabbing;
}

/* Item List */
.TfCRdVf7ZeJerNxVGE8X {
  padding: var(--space-md);
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* List Item - Using beneficiarios guardados aesthetics */
.jpPqxXoTBRZX6HYhmzmg {
  display: flex;
  flex-direction: row;
  background-color: rgba(190, 158, 85, 0.05);
  padding: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(190, 158, 85, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}

.jpPqxXoTBRZX6HYhmzmg:hover {
  background-color: rgba(190, 158, 85, 0.1);
  border-color: rgba(190, 158, 85, 0.4);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.jpPqxXoTBRZX6HYhmzmg:last-child {
  margin-bottom: 0;
}

.jFSJ6HGA9vEpcSuXAEGg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(190, 158, 85, 0.1);
  border-radius: 50%;
  margin-right: var(--space-sm);
  flex-shrink: 0;
}

.hogNGsvoo9TS1RTIh_Eq {
  display: flex;
  flex-direction: column;
  flex: 1;
  cursor: pointer;
}

.vjN1rSFwQXVt0gT7wsSO {
  font-size: var(--font-subtitle);
  font-weight: 500;
  color: var(--brand-brown);
  margin-bottom: var(--space-2xs);
  cursor: pointer;
}

.F78_eu13lTZ8Gpi1Bt98 {
  font-size: var(--font-list-item-subtitle);
  color: var(--text-muted);
  font-weight: 400;
  cursor: pointer;
  margin-bottom: var(--space-2xs);
}

.CCj5_MbPbejea4ahXXLa {
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: flex-start;
}

.KibK_KylOFcg0geWrtQ0 {
  font-size: var(--font-list-item-subtitle);
  font-weight: 500;
  color: var(--text-muted);
  margin-top: var(--space-2xs);
}

._5ynELO1C1gPrP4b47OE {
  padding-left: var(--space-xs);
  font-size: var(--font-currency);
  color: var(--brand-brown);
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 480px) {
  .jpPqxXoTBRZX6HYhmzmg {
    padding: var(--space-sm);
  }
}

/*
 * FIX: Removed fadeInUp animation that caused flickering on iOS
 * The animation would replay on every re-render, causing visible flicker
 * when the sheet opened and state synced between parent and child.
 *
 * The react-modal-sheet library already provides smooth open/close animations,
 * so additional item animations are unnecessary and counterproductive.
 */

/* Focus states for accessibility */
.aNV8p6hfg3ziOItCvlsU:focus,
.jpPqxXoTBRZX6HYhmzmg:focus {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Loading state (for future use) */
.TfCRdVf7ZeJerNxVGE8X.AhXrTd2QI4txfyzPlXAY {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty state */
.MTTQ6MyUSwaji7Z5z1aW {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--text-muted);
  font-size: var(--font-body);
}

/* Custom scrollbar for webkit browsers */
.TfCRdVf7ZeJerNxVGE8X::-webkit-scrollbar {
  width: 6px;
}

.TfCRdVf7ZeJerNxVGE8X::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  border-radius: 3px;
}

.TfCRdVf7ZeJerNxVGE8X::-webkit-scrollbar-thumb {
  background: rgba(190, 158, 85, 0.5);
  border-radius: 3px;
}

.TfCRdVf7ZeJerNxVGE8X::-webkit-scrollbar-thumb:hover {
  background: rgba(190, 158, 85, 0.7);
}

/* Sheet Content */
.AaVVbPitzSVsM23lF9C7 {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  padding-bottom: var(--space-md);
}

.dxe_EGWR_gyHTfEI4Sh5 {
  font-size: var(--font-title);
  font-weight: 600;
  color: var(--brand-brown);
  margin-bottom: var(--space-md);
  text-align: center;
}

.BT7hl3WdnDsyFCb0hKl2 {
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.RstcBoYE5VDPK5d4ooRH {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.BCcUa7MZEN2PimxiHw6J {
  background-color: rgba(190, 158, 85, 0.15);
  border-color: rgba(190, 158, 85, 0.5);
}

/**
 * DateInput Styles
 *
 * Unified date input styles for both mobile and desktop views.
 * Uses data-view attribute for responsive styling.
 * Composes from baseInput.css for shared input styling.
 */

/* =============================================================================
   CORE DATE INPUT STYLES
   ============================================================================= */

/* Core date input - composes from base for consistent styling */
.HzXgMdGK1ty9jQSs_0jk {
  /* Reset iOS native styling that can cause width/alignment issues */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Ensure text is left-aligned (iOS centers date input text by default) */
  text-align: left;
  /* Prevent iOS from adding extra width */
  min-width: 0;
  max-width: 100%;
}

/* iOS-specific fixes for date input text alignment */
.HzXgMdGK1ty9jQSs_0jk::-webkit-date-and-time-value {
  text-align: left;
}

/* Ensure calendar picker icon is visible and properly positioned */
.HzXgMdGK1ty9jQSs_0jk::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
}

/* =============================================================================
   NATIVE PICKER TRIGGER STYLES (Mobile iOS/Android)
   ============================================================================= */

/* Native picker trigger - styled button that opens native date picker */
.S17E_ai1BReDAvAtaMLT {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.S17E_ai1BReDAvAtaMLT.iHOebP3wBoY4cCR3OFL3 {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Date value text */
.E36EIdQ1Q6kYFl6cAtPB {
  color: var(--text-primary, #333);
}

/* Placeholder text when no date selected */
.q1vXJJUxk8H2VmxO9k5J {
  color: var(--text-tertiary, #999);
}

/* Calendar icon */
.yAR32EhV1TJgy2nSmRGn {
  width: 20px;
  height: 20px;
  color: var(--brand-brown, #5b4838);
  flex-shrink: 0;
  margin-left: var(--space-sm, 8px);
}

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

/* Base container - shared structure */
._YP7ew_SK5z96AWcAbrf {
  /* Base styles applied to both views */
}

/* Mobile-specific: full width */
[data-view="mobile"] ._YP7ew_SK5z96AWcAbrf {
  width: 100%;
}

/* Desktop-specific: fixed width */
[data-view="desktop"] ._YP7ew_SK5z96AWcAbrf {
  width: 360px;
}

/* Bottom margin modifier (used on mobile) */
.cekf1BmwtmU1ofKulf4D {
  margin-bottom: var(--space-md);
}


/**
 * NativeSelect Styles
 *
 * Unified native select styles for both mobile and desktop views.
 * Uses data-view attribute for responsive styling.
 * Composes from baseInput.css for shared input styling.
 */

/* =============================================================================
   CORE NATIVE SELECT STYLES
   ============================================================================= */

/* Core native select - composes from base for consistent styling */
.e5mfSJOkMRgVW5O9HVXA {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23666%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.e5mfSJOkMRgVW5O9HVXA:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

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

/* Base container - shared structure */
.VCZh3Bk5MKl_LUq944zy {
  /* Base styles applied to both views */
}

/* Mobile-specific: full width */
[data-view="mobile"] .VCZh3Bk5MKl_LUq944zy {
  width: 100%;
}

/* Desktop-specific: fixed width */
[data-view="desktop"] .VCZh3Bk5MKl_LUq944zy {
  width: 360px;
}

/* Bottom margin modifier (used on mobile) */
.VX0NbX3XgZXacO1TZU3c {
  margin-bottom: var(--space-md);
}


/* Base SelectionIcon styles - based on finalidades icon pattern */
.xc0GyET6OWN7pzLeAA9D {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-normal), background-color var(--transition-normal), transform var(--transition-normal);
  background-color: var(--bg-card);
  min-width: 130px;
  min-height: 100px;
}

/* Ensure all child elements have pointer cursor */
.xc0GyET6OWN7pzLeAA9D * {
  cursor: pointer;
}

/* Ensure SVG icons are properly centered */
.xc0GyET6OWN7pzLeAA9D svg {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

/* Hover effects only for devices that support hover (desktop) */
@media (hover: hover) {
  .xc0GyET6OWN7pzLeAA9D:hover {
    border-color: var(--brand-brown);
    background-color: var(--bg-card-alt);
    transform: var(--hover-lift-sm);
  }
}

.LZcOm4xgAYit9Dz3ty__ {
  margin-top: var(--space-xs);
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--brand-brown);
  text-align: center;
  cursor: pointer;
}

/* Wide variant - for longer text labels */
.pYP90Dfax4V54PPbHQI0 {
  min-width: 160px;
  padding: var(--space-md) var(--space-md);
}

/* Horizontal variant - icon and text side by side */
.eAFJROQOI6J3HgrxvnrN {
  flex-direction: row;
  min-width: 150px;
  min-height: 80px;
  padding: var(--space-md) var(--space-md);
}

.eAFJROQOI6J3HgrxvnrN .LZcOm4xgAYit9Dz3ty__ {
  margin-top: 0;
  margin-left: var(--space-sm);
  text-align: left;
}

/* Logo variant - for icons that contain text (like KWiK) */
.Bu9Ny0oPi1tSP2mCDIVn .LZcOm4xgAYit9Dz3ty__ {
  display: none;
}

/* Mobile-specific adjustments */
.pvVAgYjqvsCTyzUmLKg3 {
  min-width: 100px;
  min-height: 100px;
  padding: var(--space-md);
}

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

/* SelectionIconGroup styles */

/* Base group */
.wrmjIWDWGRZsdaE7syBt {
  display: flex;
  justify-content: center;
}

/* Ensure icons within the same group share the same width by filling the group cell */
.wrmjIWDWGRZsdaE7syBt .xc0GyET6OWN7pzLeAA9D {
  width: 100%;
  box-sizing: border-box;
}


/* Grid layout - default for desktop finalidades */
.EhpOZZA8pgGrF_upEX9f {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  max-width: 600px;
  width: 100%;
}

/* Column layout - for mobile or single column */
.fWebRaUX7JTL2vkhUnwa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
}

/* In column layout, icons should size to content, not stretch to full width */
.fWebRaUX7JTL2vkhUnwa .xc0GyET6OWN7pzLeAA9D {
  width: fit-content;
}

/* Row layout - for horizontal arrangements (matches finalidades pattern) */
.IMZKOvqwawxRvp1uXpMS {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  max-width: 600px;
  margin: 0 auto;
  justify-self: center;
}

/* Mobile adjustments */
.hwj6t3rfjBkUT6_i1kyt {
  padding: var(--space-md);
}

/* Mobile grid layout - size to content for properly sized icons */
.hwj6t3rfjBkUT6_i1kyt.EhpOZZA8pgGrF_upEX9f {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: fit-content; /* Size to content, not container */
  margin: 0 auto;
  margin-top: var(--space-xl);
  gap: var(--space-md);
  padding: var(--space-sm);
  box-sizing: border-box;
}

/* Mobile column layout - use grid to ensure equal width icons */
.hwj6t3rfjBkUT6_i1kyt.fWebRaUX7JTL2vkhUnwa {
  display: grid;
  grid-template-columns: 1fr;
  width: fit-content; /* Size to content, not container */
  margin: 0 auto;
  margin-top: var(--space-xl);
  gap: var(--space-md);
  padding: var(--space-md);
}

/* Override fit-content to allow grid stretch for equal widths */
.hwj6t3rfjBkUT6_i1kyt.fWebRaUX7JTL2vkhUnwa .xc0GyET6OWN7pzLeAA9D {
  width: 100%;
}

/* Mobile row layout - size to content like grid */
.hwj6t3rfjBkUT6_i1kyt.IMZKOvqwawxRvp1uXpMS {
  width: fit-content; /* Size to content, not container */
  margin: 0 auto;
  gap: var(--space-md);
}

/* Legacy compatibility classes for existing implementations */
.yVV8rcdJKHJdh04vy6du {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  border: 2px solid var(--border-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-normal), background-color var(--transition-normal), transform var(--transition-normal);
  background-color: var(--bg-card);
  min-width: 120px;
  min-height: 100px;
}

/* Hover effects only for devices that support hover (desktop) */
@media (hover: hover) {
  .yVV8rcdJKHJdh04vy6du:hover {
    border-color: var(--brand-brown);
    background-color: var(--bg-card-alt);
    transform: var(--hover-lift-sm);
  }
}

/* Ensure all child elements of legacy finalidade icons have pointer cursor */
.yVV8rcdJKHJdh04vy6du * {
  cursor: pointer;
}

.EPY8c1kb3nP_Aqt61ngv {
  margin-top: var(--space-xs);
  font-size: var(--font-label);
  font-weight: 500;
  color: var(--brand-brown);
  text-align: center;
  cursor: pointer;
}

/* Media queries for better mobile responsiveness */
@media (max-width: 480px) {
  .hwj6t3rfjBkUT6_i1kyt.EhpOZZA8pgGrF_upEX9f {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    padding: var(--space-xs);
  }

  .pvVAgYjqvsCTyzUmLKg3 {
    min-width: 80px;
    min-height: 80px;
    padding: var(--space-sm);
  }

  .pvVAgYjqvsCTyzUmLKg3 .LZcOm4xgAYit9Dz3ty__ {
    font-size: var(--font-caption);
  }
}

@media (max-width: 360px) {
  .hwj6t3rfjBkUT6_i1kyt.EhpOZZA8pgGrF_upEX9f {
    gap: var(--space-xs);
    padding: 3px;
  }

  .pvVAgYjqvsCTyzUmLKg3 {
    min-width: 70px;
    min-height: 70px;
    padding: var(--space-xs);
  }
}

/* Mobile adjustments - applied via useView() in component */
/* Note: .selectionIconMobile and .selectionIconGroupMobile classes are already
   applied by the component based on useView(). These additional adjustments
   are for very small screens within the mobile experience. */

/* Very small screen adjustments (within mobile) */
@media (max-width: 480px) {
  .pvVAgYjqvsCTyzUmLKg3 {
    min-width: 90px;
    min-height: 100px;
    padding: var(--space-sm);
  }

  .pvVAgYjqvsCTyzUmLKg3 .LZcOm4xgAYit9Dz3ty__ {
    font-size: var(--font-caption);
  }

  .hwj6t3rfjBkUT6_i1kyt.EhpOZZA8pgGrF_upEX9f {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .hwj6t3rfjBkUT6_i1kyt.fWebRaUX7JTL2vkhUnwa {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .hwj6t3rfjBkUT6_i1kyt.IMZKOvqwawxRvp1uXpMS {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

/**
 * Unified Dropdown Styles
 *
 * Consolidated CSS for Dropdown component (mobile and desktop).
 * Note: Most dropdown styling is handled by react-select styles in code.
 * These classes provide container/layout styling.
 */

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

.Gn2jGwz4KJKOkNNdi6lK {
  width: 100%;
}

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

.XUKara3bR9vAgRxe5OQ3 {
  width: 360px;
}

.PnUE3RPJTSKCzTkXcFY8 {
  margin-top: var(--space-sm);
}

.zSqGn9yoZvtrSC9nQdAK {
  margin-bottom: var(--space-2xl);
}

.JEDssOlAeuHhiBO79VZl {
  color: var(--brand-brown);
  font-weight: bold;
}

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

.PvV1h_nTKqZeHZNJVP3f {
  margin-top: var(--space-sm);
}

.o792dNJB0_XNxl38bQBQ {
  margin-top: var(--space-sm);
}

.fs8a4wTUUVHPwBvM8Bop {
  margin-left: var(--space-sm);
  margin-top: var(--space-xs);
  color: var(--grey-text);
  font-size: var(--font-caption);
}


/**
 * Unified Text Input Styles
 *
 * Consolidated CSS for TextInput component (mobile and desktop).
 * Composes from baseInput.css for shared input styling.
 */

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

/* Core input - composes from base */
.djMxdDAQ3nWbgFR9Edad {
}

/* Field container - composes from base */
.ClFDnrEzQ2kjDv4vCHDC {
}

/* Validation wrapper - composes from base */
.UvU8u68WsgXlWQMPvg4L {
}

/* Input with validation icon needs extra padding */
.UvU8u68WsgXlWQMPvg4L .djMxdDAQ3nWbgFR9Edad {
  padding-right: var(--space-2xl);
}

/* Invalid state - composes from base */
.Aqj9UOjGOWzzcvg5PA71 {
}

/* Prefix support - composes from base */
.RXxNoc0WXmSYlOTwUJD_ {
}

.tbsvZ9GD6EsyDbIouP5S {
}

.N7DibdtzuviUsgQBy30O {
}

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

/* Desktop form section - composes from base */
.b1V_8kG4IQt_3ggWJOvQ {
}

.EaA8xqaMk3owwOueMTVW {
}

.xE5cNBBtPEr8rRlKsSnS {
}

.dY0KFoqwusIT2AQUcMEo {
}

.sc7Y6n1lUadAoNCkytyW {
}

.uHxndqWPCppWauK1q5Ix {
}

.hsx_MIxyfYMejnMBFx4h {
}

/* Desktop core input (alias for consistency) */
.nPbrA5lw61FwVbTSFsP_ {
}

/* Blocked state - composes from base */
.Cec7OapoGuAVJpQTn1XA {
}

/* Input with validation icon needs extra padding (desktop) */
.UvU8u68WsgXlWQMPvg4L .nPbrA5lw61FwVbTSFsP_ {
  padding-right: var(--space-2xl);
}

/* Validation icon - composes from base */
.AWI37GPCOLDzWB3htNZg {
}

/* Invalid icon - composes from base */
.ffDbaxMQXSjKJ9EdwrX8 {
}

/* Supplementary text (always visible, e.g., entity name, account details) */
.D6crSA08OVz_sZ0X2c2R {
  margin-left: var(--space-sm);
  margin-top: var(--space-xs);
  color: var(--grey-text);
  font-size: var(--font-caption);
}

/**
 * FieldFeedback CSS
 * 
 * Styles for inline form field validation feedback messages.
 * Uses CSS animations for smooth appearance/disappearance.
 */

/* Container for the feedback message */
.UdBMClyRrUVUo7k8XEVy {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.2s ease-out, opacity 0.2s ease-out, margin 0.2s ease-out;
  margin-top: 0;
}

.UdBMClyRrUVUo7k8XEVy._2OpBnZt8in0Vj9LyAJA {
  max-height: 60px;
  opacity: 1;
  margin-top: var(--space-xs);
}

/* Base feedback message styles */
.vS5h4DBPMPVbqdINtWk5 {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-size: var(--font-field-hint);
  line-height: 1.4;
  padding: 0 2px;
}

/* Error state */
.aNzbFbxVuv5Q2iMdlP66 {
  color: var(--status-error, #dc3545);
}

.aNzbFbxVuv5Q2iMdlP66 .DaW5D6S3qAiR7nwbgUSc {
  color: var(--status-error, #dc3545);
}

/* Success state */
.GgnXVBRdkNBBdA_t1pld {
  color: var(--status-success, #28a745);
}

.GgnXVBRdkNBBdA_t1pld .DaW5D6S3qAiR7nwbgUSc {
  color: var(--status-success, #28a745);
}

/* Warning state (for hints) */
.u8dLgYLbO2hyFnmP4Ss3 {
  color: var(--status-warning, #ffc107);
}

/* Info state (for hints) */
.T4AFZo61GRhFwEAao_pL {
  color: var(--text-muted, #6c757d);
}

/* Icon container */
.DaW5D6S3qAiR7nwbgUSc {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: var(--space-2xs);
}

.DaW5D6S3qAiR7nwbgUSc svg {
  width: 100%;
  height: 100%;
}

/* Message text */
.sYQApvPcnUeSbCGZ2E2A {
  flex: 1;
}

/* Shake animation for errors */
@keyframes n_jb_oe8j2q1qFiNEjC1 {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.gr8sbJIYwUEIsSryC2Ka {
  animation: n_jb_oe8j2q1qFiNEjC1 0.4s ease-in-out;
}

/* Helper text (always visible, below feedback) */
.j6eYzICRhapizai1gVI5 {
  font-size: var(--font-field-hint);
  color: var(--text-muted, #6c757d);
  margin-top: var(--space-2xs);
  padding: 0 2px;
}

/* Character count indicator
 * Uses negative margin-bottom to overlap with form field gap,
 * preventing it from adding extra visual height between fields.
 * The counter visually sits in the gap space below the input.
 */
.jdQO1_3RrHRwVD_8cDfQ {
  font-size: var(--font-field-hint);
  color: var(--text-muted, #6c757d);
  text-align: right;
  /* Negative margin makes the counter overlap with the gap below,
   * so it doesn't increase perceived spacing between fields.
   */
  margin-bottom: -16px;
}

.jdQO1_3RrHRwVD_8cDfQ.OHYVdTorxTIfw5HwsRag {
  color: var(--status-warning, #ffc107);
}

.jdQO1_3RrHRwVD_8cDfQ.BhuEjawI6S4GH2t49r7W {
  color: var(--status-error, #dc3545);
}


/**
 * Unified Numeric Input Styles
 *
 * Consolidated CSS for NumericInput component (mobile and desktop).
 * Uses data-view attribute for responsive styling.
 * Composes from baseInput.css for shared input styling.
 */

/* =============================================================================
   CORE INPUT STYLES
   ============================================================================= */

/* Core input - composes from base (used for both mobile and desktop) */
.XrVCJOWowlHX3U4QY6U3 {
}

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

/* Base container - shared structure */
.s41hX0qDP2_BG9gadd1M {
  /* Base styles applied to both views */
}

/* Mobile-specific: full width */
[data-view="mobile"] .s41hX0qDP2_BG9gadd1M {
  width: 100%;
}

/* Desktop-specific: fixed width */
[data-view="desktop"] .s41hX0qDP2_BG9gadd1M {
  width: 360px;
}


.ir2wj2YDFjEdGnRhRV2P {
  width: 100%;
}

.CVGgMxr1oXDMQ2XoV0dJ {
  margin-bottom: var(--space-md);
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

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

.MGQJI7Rs95ZicNOl0Ig8 {
  position: absolute;
  left: var(--space-sm);
  color: var(--text-muted);
}

.wjAiAVhfk4MVvg9xNRtb {
  height: calc(100vh - 350px);
  width: 100%;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
}

/* Desktop variant - applied via useView() in component */
.eWv8ep0jVeNmIDpaKpyS {
  height: calc(100vh - 470px);
}

.UHFOqrshgQEaDv1UBa7v {
  width: 100%;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-2xl);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: var(--font-body);
}

.u21N2zOq8CNzmCeDHlXX {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  flex-direction: row;
}

.u21N2zOq8CNzmCeDHlXX:hover {
  background-color: var(--bg-card-alt);
}

.ZDolkqUgC1X8OjR76NYw {
  font-size: var(--font-body);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

._OiEFp7WafYMOF_F8eln {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-xl);
  cursor: pointer;
}

.Amq7CxJlSCdvxByESs5f {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-medium);
  cursor: pointer;
}
.M8iop10XP5xdpuUBnMXV {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.DaMMGui0GxGJLe2INtcQ {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Form field label - uses semantic spacing for label-to-input gap */
.T__NixD08bhs9ddQ0RjU {
  font-size: var(--font-field-title);
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: var(--form-title-content-spacing);
}

.ADZ9OCnUZ0p3rGRN4PNp {
  color: var(--status-error);
  margin-left: var(--space-2xs);
}

.xaRv_iu33ECfMtmM3D54 {
  position: relative;
  overflow: visible;
  width: 100%;
}

.suHr4Z1S9yXNFvbaiUdW {
  width: 100%;
  cursor: 'pointer';
}

/* Ensure the dropdown appears above other elements */
.suHr4Z1S9yXNFvbaiUdW div[class*="-menu"] {
  z-index: 10;
}

.Vu_UzMg_dJBVKKDtmnjh {
  width:calc(100% - 32px);
  height: 48px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  font-size: var(--font-body);
  color: var(--text-primary);
  background-color: var(--bg-card);
  transition: border-color 0.2s ease;
}

.Vu_UzMg_dJBVKKDtmnjh:focus {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-xs);
}

.Vu_UzMg_dJBVKKDtmnjh::placeholder {
  color: var(--grey-button);
}

.h615sgqaC2Q054jyK5pL {
  cursor: text;
}

.m9MRz7ZcBNbz4fhWcmn3 {
  font-size: var(--font-field-hint);
  color: var(--text-muted);
  margin-top: var(--space-2xs);
}

/* Error state */
.Vu_UzMg_dJBVKKDtmnjh.Ld9v7oQtXBH83VXKEuwf {
  border-color: var(--status-error);
}

/* Disabled state */
.Vu_UzMg_dJBVKKDtmnjh.TbgohGb6AMWBTr2eutRP {
  background-color: var(--bg-input-disabled);
  color: var(--text-muted);
  cursor: not-allowed;
  border-color: var(--border-strong);
}

.Vu_UzMg_dJBVKKDtmnjh.TbgohGb6AMWBTr2eutRP:focus {
  border-color: var(--border-strong);
  box-shadow: none;
}

/* Mobile variant - applied via useView() in component */
.juQTxXuSwitB8rS7tl3K {
  height: 44px;
  font-size: var(--font-field-value);
}

.lbeRBo2p34eyWYlyXLDW {
  font-size: var(--font-field-title);
}
/**
 * PdfInput - Unified PDF file input styles for mobile and desktop
 *
 * Uses data-view attribute for responsive styling.
 * Uses CSS variables for responsive sizing and theming.
 */

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

/* Base container - shared structure */
.nbxNcdZ63VQxLYc0ZbAX {
  /* Base styles applied to both views */
}

/* Mobile-specific: full width */
[data-view="mobile"] .nbxNcdZ63VQxLYc0ZbAX {
  width: 100%;
}

/* Desktop-specific: fixed width */
[data-view="desktop"] .nbxNcdZ63VQxLYc0ZbAX {
  width: 360px;
}

/* Bottom margin modifier (used on mobile) */
.Qx0JUE_UQkZP1n2XgXnw {
  margin-bottom: var(--space-md);
}

/* Shared upload container - works for both mobile and desktop */
.NwmK03sVcIpT6pMFxnSn {
  width: 100%;
  border: 2px dashed var(--grey-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  cursor: pointer;
  background-color: var(--bg-page);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.NwmK03sVcIpT6pMFxnSn:hover {
  border-color: var(--brand-brown);
  background-color: var(--bg-input-disabled);
}

.cfMI4iRVaTPEM2yu9x1w {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.CvLsz0RYlC6A5Mb6RAQQ {
  font-size: var(--font-title);
  font-weight: bold;
  color: var(--brand-brown);
  margin-bottom: var(--space-xs);
}

.NNLmuCuZYxCjjG15RLBF {
  font-size: var(--font-field-hint);
  color: var(--text-tertiary);
}

/* Selected file display */
.CVWxCk3EsXL5ZpYUtZ59 {
  display: flex;
  align-items: center;
  margin-top: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--bg-input-disabled);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  box-sizing: border-box;
  width: 100%;
}

.kKjuIR3PlPbK7MsUHfu_ {
  font-size: var(--font-subtitle);
  color: var(--brand-brown);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w3uUlcCXbM92Fm2wOlhq {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--border-light);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: var(--space-sm);
}

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