/* ============================================
   Font Import - Proxima Nova (Official Mercado Pago Fonts)
   ============================================ */
@font-face {
    font-family: 'Proxima Nova';
    font-weight: 300;
    font-style: normal;
    src: url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-light.woff2) format("woff2"),
         url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-light.woff) format("woff"),
         url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-light.ttf) format("truetype");
}

@font-face {
    font-family: 'Proxima Nova';
    font-weight: 400;
    font-style: normal;
    src: url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-regular.woff2) format("woff2"),
         url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-regular.woff) format("woff"),
         url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-regular.ttf) format("truetype");
}

@font-face {
    font-family: 'Proxima Nova';
    font-weight: 600;
    font-style: normal;
    src: url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-semibold.woff2) format("woff2"),
         url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-semibold.woff) format("woff"),
         url(https://http2.mlstatic.com/ui/webfonts/v3.0.0/proxima-nova/proximanova-semibold.ttf) format("truetype");
}

/* ============================================
   Reset and Base Styles
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ===== ANDES COLOR SYSTEM (Mercado Pago) ===== */
    
    /* Basic colors */
    --andes-white: #fff;
    --andes-black: #000;
    --andes-transparent: #ffffff00;
    
    /* Translucent Grays */
    --andes-gray-900: rgba(0, 0, 0, 0.9); /* primary text */
    --andes-gray-800: rgba(0, 0, 0, 0.8);
    --andes-gray-550: rgba(0, 0, 0, 0.55); /* secondary text */
    --andes-gray-450: rgba(0, 0, 0, 0.45);
    --andes-gray-250: rgba(0, 0, 0, 0.25); /* disabled text */
    --andes-gray-150: rgba(0, 0, 0, 0.15);
    --andes-gray-100: rgba(0, 0, 0, 0.1);
    --andes-gray-070: rgba(0, 0, 0, 0.07);
    --andes-gray-040: rgba(0, 0, 0, 0.04);
    
    /* Solid Grays */
    --andes-gray-900-solid: #1a1a1a; /* primary text */
    --andes-gray-800-solid: #333333;
    --andes-gray-550-solid: #737373; /* secondary text */
    --andes-gray-450-solid: #8c8c8c;
    --andes-gray-250-solid: #bfbfbf; /* disabled text */
    --andes-gray-150-solid: #d9d9d9;
    --andes-gray-100-solid: #e5e5e5;
    --andes-gray-070-solid: #ededed;
    --andes-gray-040-solid: #f5f5f5;
    
    /* Green */
    --andes-green-100: rgba(0, 166, 80, 0.1);
    --andes-green-150: rgba(0, 166, 80, 0.15);
    --andes-green-200: rgba(0, 166, 80, 0.2);
    --andes-green-300: rgba(0, 166, 80, 0.3);
    --andes-green-400: rgba(0, 166, 80, 0.4);
    --andes-green-500: #00a650;
    --andes-green-600: #008744;
    --andes-green-700: #063;
    --andes-green-800: #004d27;
    
    /* Orange */
    --andes-orange-100: rgba(255, 119, 51, 0.1);
    --andes-orange-150: rgba(255, 119, 51, 0.15);
    --andes-orange-200: rgba(255, 119, 51, 0.2);
    --andes-orange-300: rgba(255, 119, 51, 0.3);
    --andes-orange-400: rgba(255, 119, 51, 0.4);
    --andes-orange-500: #f73;
    --andes-orange-600: #e6540b;
    --andes-orange-700: #cc3e0a;
    --andes-orange-800: #a62a08;
    
    /* Red */
    --andes-red-100: rgba(242, 61, 79, 0.1);
    --andes-red-150: rgba(242, 61, 79, 0.15);
    --andes-red-200: rgba(242, 61, 79, 0.2);
    --andes-red-300: rgba(242, 61, 79, 0.3);
    --andes-red-400: rgba(242, 61, 79, 0.4);
    --andes-red-500: #f23d4f;
    --andes-red-600: #d12440;
    --andes-red-700: #a61d33;
    --andes-red-800: #801627;
    
    /* Yellow */
    --andes-yellow-500: #ffe600;
    
    /* Blue (Mercado Pago Theme) */
    --andes-blue-100: rgba(71, 154, 209, 0.1);
    --andes-blue-150: rgba(71, 154, 209, 0.15);
    --andes-blue-200: rgba(71, 154, 209, 0.2);
    --andes-blue-300: rgba(71, 154, 209, 0.3);
    --andes-blue-400: rgba(71, 154, 209, 0.4);
    --andes-blue-500: #009ee3;
    --andes-blue-600: #007eb5;
    --andes-blue-700: #005e88;
    --andes-blue-800: #004766;
    
    /* Brand Colors (Mercado Pago) */
    --andes-brand-main: #009ee3;
    --andes-brand-text: #fff;
    
    /* Semantic Colors */
    --andes-accent-color: #009ee3;
    --andes-bg-primary: #ededed;
    --andes-bg-secondary: #f5f5f5;
    --andes-bg-white: #fff;
    
    /* Feedback Colors */
    --andes-success-green: #00a650;
    --andes-success-green-secondary: #008744;
    --andes-warning-orange: #f73;
    --andes-warning-orange-secondary: #e6540b;
    --andes-error-red: #f23d4f;
    --andes-error-red-secondary: #d12440;
    
    /* Simplified color aliases for easy use */
    --color-primary: var(--andes-blue-500);
    --color-mp-blue: var(--andes-blue-500);
    --color-mp-yellow: var(--andes-yellow-500);
    --color-text-primary: var(--andes-gray-900);
    --color-text-secondary: var(--andes-gray-550);
    --color-text-light: var(--andes-gray-450-solid);
    --color-background: var(--andes-bg-secondary);
    --color-white: var(--andes-white);
    --color-border: var(--andes-gray-100-solid);
    --color-hover: var(--andes-gray-040-solid);
    
    /* Andes Spacing */
    --andes-spacing-4: 4px;
    --andes-spacing-8: 8px;
    --andes-spacing-12: 12px;
    --andes-spacing-16: 16px;
    --andes-spacing-20: 20px;
    --andes-spacing-24: 24px;
    --andes-spacing-28: 28px;
    --andes-spacing-32: 32px;
    --andes-spacing-40: 40px;
    --andes-spacing-48: 48px;
    --andes-spacing-64: 64px;
    /* Aliases */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border Radius (Andes) */
    --border-radius-6: 6px;
    --border-radius-5: 5px;
    --border-radius-4: 4px;
    --border-radius-3: 3px;
    --border-radius-2: 2px;
    /* Aliases */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;
    
    /* Shadows (Andes) */
    --shadow-flat: 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    --shadow-elevated: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
    /* Aliases */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    --shadow-card: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    
    /* Typography - Font Families */
    --font-family-primary: 'Proxima Nova', -apple-system, 'Roboto', Arial, sans-serif;
    --font-family: 'Proxima Nova', -apple-system, Roboto, Arial, sans-serif;
    
    /* Typography - Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-base: 600;
    --font-weight-normal: 400;
    
    /* Typography - Font Sizes */
    --font-size-base: 16px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-44: 44px;
    /* Aliases */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 20px;
    
    /* Typography - Line Heights */
    --line-height-xs: 1;
    --line-height-s: 1.25;
    --line-height-base: 1.35;
    --line-height-m: 1.45;
    --line-height-sm: 12px;
    
    /* Typography - Text Colors */
    --andes-text-color-primary: var(--andes-gray-900);
    --andes-text-color-secondary: var(--andes-gray-550);
    --andes-text-color-disabled: var(--andes-gray-250);
    
    /* Focus Indicator (Andes - Triple ring effect) */
    --focus-indicator-shadow: 0 0 0 2px #fff, 0 0 0 3px #007eb5, 0 0 0 5px rgba(71, 154, 209, 0.3);
    --focus-indicator-inset-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #007eb5, inset 0 0 0 5px rgba(71, 154, 209, 0.3);
    
    /* Feedback Colors */
    --andes-success-green: #00a650;
    --andes-success-green-secondary: #008744;
    --andes-warning-orange: #f73;
    --andes-warning-orange-secondary: #e6540b;
    --andes-error-red: #f23d4f;
    --andes-error-red-secondary: #d12440;
    
    /* Feedback Screen Variables */
    --andes-feedback-screen-text-color-secondary: var(--andes-gray-900);
    --andes-feedback-screen-text-color-primary: var(--andes-text-color-primary);
    --andes-feedback-screen-header-font-size: 16px;
    --andes-feedback-screen-overline-font-size: 14px;
    --andes-feedback-screen-congrats-title-font-size: 20px;
    --andes-feedback-screen-title-font-size: 24px;
    --andes-feedback-screen-line-height-small: 18px;
    --andes-feedback-screen-line-height-medium: 20px;
    --andes-feedback-screen-line-height-large: 30px;
    --andes-feedback-screen-container-width: 560px;
    --andes-feedback-screen-actions-width: 568px;
    --andes-feedback-screen-header-asset-32: 32px;
    --andes-feedback-screen-header-asset-52: 52px;
    --andes-feedback-screen-header-asset-58: 58px;
    --andes-feedback-screen-header-asset-64: 64px;
    
    /* Background Colors */
    --andes-bg-primary: #ededed;
    --andes-bg-secondary: #f5f5f5;
    --andes-bg-white: #fff;
}

body {
    font-family: var(--font-family-primary);
    background-color: var(--color-background);
    color: var(--andes-text-color-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-weight: var(--font-weight-regular);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Andes Utility Classes
   ============================================ */

/* Visually Hidden (Accessibility) */
.andes-visually-hidden,
.andes-visually-hidden-focusable:not(:focus):not(:focus-within) {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

/* Focus Styles (Andes - Triple ring effect) */
.andes-focus-visible:focus {
    box-shadow: var(--focus-indicator-shadow);
    -moz-box-shadow: var(--focus-indicator-shadow);
    -webkit-box-shadow: var(--focus-indicator-shadow);
    outline: none;
}

.andes-focus-visible:focus-visible {
    box-shadow: var(--focus-indicator-shadow);
    -moz-box-shadow: var(--focus-indicator-shadow);
    -webkit-box-shadow: var(--focus-indicator-shadow);
    outline: none;
}

.andes-focus-visible:focus:not(:focus-visible) {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    outline: none;
}

/* Focus Relative Fix */
.focus-relative-fix:focus,
.focus-relative-fix:focus-visible {
    position: relative;
}

/* Remove Focus Utility */
.no-focus:focus,
.no-focus:focus-visible {
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    outline: none !important;
}

/* ============================================
   Container
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================
   Header
   ============================================ */
.header {
    margin-bottom: 32px;
    min-height: 20px;
}

.logo-text {
    color: var(--color-white);
    font-weight: 700;
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
}


/* ============================================
   Main Content
   ============================================ */
.main-content {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    flex: 1;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================
   Payment Section
   ============================================ */
.payment-section {
    width: 100%;
}

.main-title {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    color: var(--andes-text-color-primary);
    margin-bottom: 32px;
    line-height: var(--line-height-s);
}

.payment-group {
    margin-bottom: 32px;
}

.section-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    color: var(--andes-text-color-primary);
    margin-bottom: 16px;
    line-height: var(--line-height-s);
}

/* ============================================
   Payment Options
   ============================================ */
.payment-option {
    width: 100%;
    background: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--andes-gray-100-solid);
    border-radius: 0;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.15s ease;
    margin-bottom: 0;
    font-family: var(--font-family-primary);
    min-height: 72px;
}

.payment-option:first-child {
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.payment-option:last-child {
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    border-bottom: none;
}

.payment-option:hover {
    background-color: var(--andes-gray-040);
}

.payment-option:active {
    background-color: var(--andes-gray-070);
}

.option-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.option-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--andes-gray-040-solid);
    border-radius: var(--radius-full);
}

.option-icon svg {
    width: 24px;
    height: auto;
    color: rgba(0, 0, 0, 0.9);
}

.option-icon svg [fill="currentColor"] {
    fill: rgba(0, 0, 0, 0.9);
}

.option-icon svg path[fill="currentColor"] {
    fill: rgba(0, 0, 0, 0.9);
}

.mp-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}

.option-icon svg[width="40"] {
    width: 40px;
    height: 40px;
}

.mp-account .option-icon {
    background-color: transparent;
    padding: 0;
    width: 48px;
    height: 48px;
}

.mp-account .option-icon svg {
    width: 48px;
    height: 48px;
}

.option-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.option-text {
    font-size: var(--font-size-16);
    color: var(--andes-text-color-primary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
}

.option-subtitle {
    font-size: var(--font-size-14);
    color: var(--andes-text-color-secondary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
    margin-top: 2px;
}

.chevron-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.chevron-icon path {
    fill: rgba(0, 0, 0, 0.55);
}

/* Andes Button - Back to store link */
.andes-button.cow-button-back-to-site {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-regular);
    color: var(--andes-blue-500);
    font-size: var(--font-size-16);
    line-height: var(--line-height-base);
    margin-top: 24px;
    padding: 0;
    transition: opacity 0.2s ease;
}

.andes-button.cow-button-back-to-site:hover {
    opacity: 0.8;
}

.andes-button__content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.andes-button__content svg {
    flex-shrink: 0;
}

.andes-button__content svg path {
    fill: var(--andes-blue-500);
}

/* Payment Group Container */
.payment-group-container {
    background: var(--andes-white);
    border-radius: var(--radius-md);
    padding: 0 24px;
    border: 1px solid var(--andes-gray-100-solid);
    overflow: hidden;
    width: 100%;
}

.payment-group-container .payment-option {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}

.payment-group-container .payment-option:first-child {
    border-top: none;
}

.payment-group-container .payment-option:last-child {
    border-bottom: none;
}

/* Mercado Pago Account Button */
.mp-account {
    border-bottom: none;
}

/* ============================================
   Sidebar / Layout Column
   ============================================ */
.layout__col-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 320px;
    max-width: 400px;
}

/* Brand/Merchant Section */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.brand__thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.brand__thumbnail--image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.andes-thumbnail-container {
    display: flex;
}

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

.andes-thumbnail--circle {
    border-radius: var(--radius-full);
}

.andes-thumbnail--40 {
    width: 40px;
    height: 40px;
}

.brand__name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-18);
    color: var(--andes-text-color-primary);
    line-height: var(--line-height-base);
}

/* Payment Summary Card */
.andes-card {
    background: var(--andes-white);
    border-radius: var(--radius-md);
}

.andes-card--flat {
    border: 1px solid var(--andes-gray-100-solid);
}

.andes-card--padding-32 {
    padding: 32px;
}

.cow-payment_summary__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cow-payment_summary__title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-semibold);
    color: var(--andes-text-color-primary);
    margin: 0;
    line-height: var(--line-height-s);
}

.cow-payment_summary__items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.row-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.row-item__label--container {
    flex: 1;
}

.row-item__label--product span {
    font-size: var(--font-size-16);
    color: var(--andes-text-color-primary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-s);
    display: block;
}

.row-item__observation {
    flex-shrink: 0;
}

.andes-money-amount {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.andes-money-amount__currency-symbol,
.andes-money-amount__fraction {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    color: var(--andes-text-color-primary);
}

/* Andes Typography Classes */
.andes-typography {
    font-family: var(--font-family-primary);
}

.andes-typography--type-body {
    line-height: var(--line-height-base);
}

.andes-typography--type-title {
    line-height: var(--line-height-s);
}

.andes-typography--size-xs {
    font-size: var(--font-size-12);
}

.andes-typography--size-s {
    font-size: var(--font-size-14);
}

.andes-typography--size-m {
    font-size: var(--font-size-16);
}

.andes-typography--size-l {
    font-size: var(--font-size-18);
}

.andes-typography--color-primary {
    color: var(--andes-text-color-primary);
}

.andes-typography--color-secondary {
    color: var(--andes-text-color-secondary);
}

.andes-typography--weight-regular {
    font-weight: var(--font-weight-regular);
}

.andes-typography--weight-semibold {
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   Footer
   ============================================ */
.footer {
    margin-top: auto;
    padding-top: 48px;
    text-align: center;
}

.footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--andes-gray-100-solid);
    margin-bottom: 24px;
}

.footer-text {
    font-size: var(--font-size-12);
    color: var(--andes-text-color-secondary);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 968px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .layout__col-sidebar {
        order: -1;
        margin-bottom: 0;
        max-width: 100%;
    }
    
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 16px;
    }
    
    .main-title {
        font-size: var(--font-size-18);
    }
    
    .payment-option {
        padding: 16px 0;
    }
    
    .option-content {
        gap: 16px;
    }
    
    .option-icon {
        width: 40px;
        height: 40px;
    }
    
    .option-icon svg {
        width: 20px;
        height: auto;
    }
    
    .merchant-logo {
        width: 36px;
        height: 36px;
    }
    
    .merchant-name {
        font-size: var(--font-size-16);
    }
    
    .payment-group-container {
        padding: 0 16px;
    }
}

/* ============================================
   Loading Spinner (Mercado Pago Style)
   ============================================ */
.andes-pi-circular--indeterminate .andes-pi-circular__svg {
    animation: andes-pi-circular-rotate 2s linear infinite;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 10;
}

.andes-pi-circular--indeterminate .andes-pi-circular__circle {
    stroke-linecap: round;
    animation: andes-pi-circular-dash-reduce-motion 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: no-preference) {
    .andes-pi-circular--indeterminate .andes-pi-circular__circle {
        animation: andes-pi-circular-dash 1.5s ease-in-out infinite;
    }
}

@keyframes andes-pi-circular-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes andes-pi-circular-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes andes-pi-circular-dash-reduce-motion {
    0% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 0;
    }
    10% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    60% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* ============================================
   Loading Overlay
   ============================================ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    position: relative;
}

.loading-spinner svg {
    animation: andes-pi-circular-rotate 2s linear infinite;
    left: 0;
    position: absolute;
    top: 0;
}

.loading-spinner circle {
    stroke: #009EE3;
    stroke-linecap: round;
    fill: none;
    animation: andes-pi-circular-dash-reduce-motion 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: no-preference) {
    .loading-spinner circle {
        animation: andes-pi-circular-dash 1.5s ease-in-out infinite;
    }
}

/* Andes Circular Progress Animations */
@keyframes andes-pi-circular-rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes andes-pi-circular-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

@keyframes andes-pi-circular-dash-reduce-motion {
    0% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 0;
    }
    10% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    60% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* ============================================
   Checkbox Styles (Mercado Pago)
   ============================================ */
.andes-checkbox__input:hover::after {
    background-color: var(--andes-gray-070-solid);
    border-color: var(--andes-gray-450);
}

.andes-checkbox__input:checked:hover::after {
    background-color: var(--andes-blue-600);
}

/* ============================================
   Focus States (Accessibility) - Mercado Pago Style
   ============================================ */
*:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #007EB5, 0 0 0 5px rgba(71, 154, 209, 0.3);
    outline: none;
}

*:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #007EB5, 0 0 0 5px rgba(71, 154, 209, 0.3);
    outline: none;
}

*:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
}

.focus-relative-fix:focus,
.focus-relative-fix:focus-visible {
    position: relative;
}

/* Remove focus styles when explicitly needed */
.no-focus:focus,
.no-focus:focus-visible {
    box-shadow: none;
    outline: none;
}

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