/* 
===========================================
MODERN TOKEN PAGE STYLES
===========================================
Using design tokens for consistent UI
*/

/* Import design tokens */
@import url('design-tokens.css');

/* Container styles */
.modern-container {
    max-width: 28rem; /* max-w-md */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-outer-padding);
    padding-right: var(--spacing-outer-padding);
    padding-top: var(--spacing-outer-padding);
    padding-bottom: 6rem; /* Keep space for sticky button */
}

/* Card styles - Actualizado con kit de contraste */
.modern-card, .position-card {
    border-radius: var(--radius-card);
    background: rgba(17, 24, 39, 0.7) !important; /* Always use the darker hover background permanently */
    backdrop-filter: blur(var(--card-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--card-backdrop-blur));
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-card-padding);
    border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Always use the hover border color permanently */
    transition: all var(--transition-slow);
}

.modern-card:hover, .position-card:hover {
    background: rgba(17, 24, 39, 0.7) !important; /* No change on hover - same background */
    border-color: rgba(255, 255, 255, 0.25) !important; /* No change on hover - same border */
}

/* Segmented control wrapper */
.modern-segmented-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: var(--radius-input);
    background-color: var(--color-bg-primary);
    padding: 4px;
    margin-bottom: var(--spacing-outer-padding);
}

/* Segmented button styles */
.modern-segmented-button {
    border-radius: var(--radius-button);

/* Pre-selected branch styling */
.position-input.default-selected {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
}

.modern-field-group.default-selected .modern-field-header {
    color: var(--color-primary) !important;
}

.modern-field-group.default-selected .input-group-text {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
    padding: var(--spacing-vertical-gap-sm) var(--spacing-vertical-gap-lg);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-inverse-muted);
    border: none;
    background: transparent;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-button);
}

.modern-segmented-button.active {
    background-color: var(--brand-600);
    color: var(--text-inverse-strong);
}

.modern-segmented-button:hover:not(.active) {
    background-color: var(--color-bg-secondary);
}

/* Focus styles for accessibility */
.modern-segmented-button:focus {
    outline: 2px solid var(--brand-500);
    outline-offset: var(--focus-ring-offset);
}

/* Modern input styles - Actualizado con kit de contraste */
.modern-input, .position-input {
    width: 100%;
    border-radius: var(--radius-input);
    border: 1px solid var(--divider);
    background-color: var(--color-white);
    color: var(--text-strong);
    padding: var(--spacing-input-padding);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-body);
    transition: all var(--transition-normal);
    margin-bottom: 0;
    min-height: 56px; /* Ensure consistent height across browsers */
    box-sizing: border-box;
}

.modern-input:focus, .position-input:focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    border-color: var(--brand-500);
}

.modern-input::placeholder, .position-input::placeholder {
    color: var(--text-placeholder);
}

/* Form validation states for modern inputs */
.modern-input.is-invalid,
.modern-input:invalid,
.position-input.is-invalid,
.position-input:invalid {
    border-color: var(--error);
    background-color: var(--color-error-light);
}

.modern-input.is-invalid:focus,
.modern-input:invalid:focus,
.position-input.is-invalid:focus,
.position-input:invalid:focus {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-error);
    border-color: var(--error);
}

.modern-input.is-valid {
    border-color: var(--success);
    background-color: var(--color-success-light);
}

.modern-input.is-valid:focus {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-success);
    border-color: var(--success);
}

/* Invalid feedback styling */
.invalid-feedback {
    color: var(--error);
    font-size: var(--font-size-small);
    margin-top: 4px;
    display: block;
    font-weight: var(--font-weight-small);
}

.valid-feedback {
    color: var(--success);
    font-size: var(--font-size-small);
    margin-top: 4px;
    display: block;
    font-weight: var(--font-weight-small);
}

/* Enhanced field validation styling */
.modern-field-group.has-error .modern-field-header {
    color: var(--error);
}

.modern-field-group.has-error .modern-field-header i {
    color: var(--error);
}

.modern-field-group.has-success .modern-field-header {
    color: var(--success);
}

.modern-field-group.has-success .modern-field-header i {
    color: var(--success);
}

/* Input group modifications for modern style */
.modern-input-group {
    position: relative;
    margin-bottom: 0;
}

.modern-input-group .input-group-prepend {
    position: absolute;
    left: 14px; /* Reduced from var(--spacing-vertical-gap-lg) for better alignment */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    pointer-events: none; /* Ensure icon doesn't interfere with input */
}

.modern-input-group .input-group-prepend .input-group-text {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-muted); /* Changed from placeholder color to be more visible */
    font-size: 16px; /* Ensure consistent icon size */
}

.modern-input-group .modern-input,
.modern-input-group .position-input {
    padding-left: 52px; /* Increased from 48px to provide more space for the icon */
    margin-bottom: 0;
}

/* Phone input without prepend icon - use normal padding */
.modern-input-group:not(:has(.input-group-prepend)) .modern-input,
.modern-input-group:not(:has(.input-group-prepend)) .position-input {
    padding-left: 16px;
}

/* Specific override for Bootstrap select elements */
select.modern-input,
select.position-input {
    padding-left: 52px !important; /* Force left padding for select dropdowns with icons */
}

/* Fallback for browsers that don't support :has() */
#phone {
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: left;
}

/* Styling for intl-tel-input plugin */
.iti {
    width: 100%;
    display: block;
    position: relative;
}

.iti__flag-container {
    padding: 0;
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: auto;
    min-width: 60px; /* Minimum width for country code area */
}

/* Style the selected country display */
.iti__selected-flag {
    padding: 8px 8px 8px 12px;
    background: transparent;
    border: none;
    outline: none;
}

/* Ensure the dial code text doesn't overlap with input */
.iti--separate-dial-code .iti__selected-dial-code {
    color: var(--text-strong) !important;
    padding-right: 12px !important;
    font-size: var(--font-size-body) !important;
    min-width: 40px;
    text-align: left;
}

.iti__country-list {
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border-light);
    background: var(--color-white);
    z-index: var(--z-index-dropdown);
    max-height: 200px;
    overflow-y: auto;
}

/* Style country list items */
.iti__country {
    padding: 8px 12px;
    border-bottom: 1px solid var(--divider);
    color: var(--text-strong);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: var(--color-blue-50);
}

.iti__country:last-child {
    border-bottom: none;
}

/* Style the country name and dial code in dropdown */
.iti__country-name {
    color: var(--text-strong);
    margin-right: auto;
}

.iti__dial-code {
    color: var(--text-muted);
    font-size: var(--font-size-small);
}

/* Additional spacing for phone input */
input[type="tel"] {
    text-align: left;
    direction: ltr;
    cursor: text;
}

/* ABSOLUTE OVERRIDE - Force phone input text positioning */
.iti--separate-dial-code .iti__tel-input,
.iti.iti--separate-dial-code input[type="tel"],
body .iti--separate-dial-code #phone {
    padding-left: 140px !important;
    text-indent: 0 !important;
    padding-right: 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    direction: ltr !important;
}

/* Ensure the input content starts after the dial code visually */
.iti--separate-dial-code .iti__tel-input::placeholder {
    padding-left: 0 !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
}

/* Additional specificity for input focus state */
.iti--separate-dial-code .iti__tel-input:focus,
.iti--separate-dial-code .iti__tel-input:active {
    padding-left: 140px !important;
    outline-offset: 0 !important;
}

/* JavaScript-applied class for extra control */
.phone-input-fixed,
input.phone-input-fixed {
    padding-left: 140px !important;
    text-indent: 0 !important;
    text-align: left !important;
    direction: ltr !important;
    box-sizing: border-box !important;
}

/* Mobile version of JavaScript-applied class */
@media (max-width: 768px) {
    .phone-input-fixed,
    input.phone-input-fixed {
        padding-left: 120px !important;
    }
}

/* Ensure phone input allows typing after country code */
.iti__tel-input {
    background: var(--color-bg-input) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-input) !important;
    color: var(--text-strong) !important;
    padding: var(--spacing-input-padding) !important;
    font-size: var(--font-size-body) !important;
    width: 100% !important;
    padding-left: 70px !important; /* Increased space for country code and flag */
}

/* Focus state for phone input with intl-tel-input */
.iti__tel-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color) !important;
    border-color: var(--brand-500) !important;
}

.iti__tel-input::placeholder {
    color: var(--text-placeholder) !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}

/* Ensure country code doesn't overlap with typed phone number */
.iti--separate-dial-code .iti__tel-input {
    padding-left: 120px !important; /* Much more space when dial code is shown separately */
    margin-left: 0 !important;
}

/* Style the country dropdown container */
.iti__flag-container {
    padding: 0;
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: auto;
    min-width: 60px; /* Minimum width for country code area */
}

/* Style the selected country display */
.iti__selected-flag {
    padding: 8px 8px 8px 12px;
    background: transparent;
    border: none;
    outline: none;
}

/* Ensure the dial code text doesn't overlap with input */
.iti--separate-dial-code .iti__selected-dial-code {
    color: var(--text-strong) !important;
    padding-right: 12px !important;
    font-size: var(--font-size-body) !important;
    min-width: 40px;
    text-align: left;
}

/* Field group styling - Actualizado con kit de contraste */
.modern-field-group {
    margin-bottom: var(--spacing-outer-padding);
}

.modern-field-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-vertical-gap-sm);
    color: var(--inv-muted);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-label);
    line-height: var(--line-height-label);
}

.modern-field-header i {
    color: var(--brand-400);
    margin-right: var(--spacing-vertical-gap-sm);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.modern-field-label {
    flex: 1;
}

/* CTA button - Actualizado con kit de contraste */
.modern-cta-button, .position-button-primary {
    width: 100%;
    border-radius: var(--radius-button);
    background-color: var(--brand-600);
    color: var(--color-white);
    padding: var(--spacing-button-padding);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    line-height: var(--line-height-button);
    box-shadow: var(--shadow-lg);
    border: none;
    transition: all var(--transition-normal);
    cursor: pointer;
    min-height: 56px; /* Ensure consistent height with inputs */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-cta-button:hover, .position-button-primary:hover {
    background-color: var(--brand-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-xl);
}

.modern-cta-button:active, .position-button-primary:active {
    transform: translateY(0);
}

.modern-cta-button:disabled, .position-button-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.modern-cta-button:focus, .position-button-primary:focus {
    outline: 2px solid var(--brand-500);
    outline-offset: var(--focus-ring-offset);
}

/* Secondary button for cancel actions */
.position-button-secondary {
    width: auto; /* Changed from 100% to auto to fit text content */
    display: inline-block; /* Added to allow proper sizing */
    border-radius: var(--radius-button);
    background-color: #6b7280; /* gray-500 */
    color: var(--color-white);
    padding: var(--spacing-button-padding);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-button);
    line-height: var(--line-height-button);
    box-shadow: var(--shadow-lg);
    border: none;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.position-button-secondary:hover {
    background-color: #ef4444; /* red-500 for danger action */
    transform: translateY(-1px);
    box-shadow: var(--shadow-xl);
}

.position-button-secondary:active {
    transform: translateY(0);
}

.position-button-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.position-button-secondary:focus {
    outline: 2px solid #6b7280;
    outline-offset: var(--focus-ring-offset);
}

/* Sticky CTA styles */
.modern-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-vertical-gap-lg);
    background: linear-gradient(to top, var(--color-bg-overlay), transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-index-sticky);
}

/* Logo styles */
.modern-logo {
    margin-bottom: var(--spacing-outer-padding);
    text-align: center;
}

.modern-logo img {
    max-height: 80px;
    filter: brightness(1.2);
}

/* Title styles - Actualizado con kit de contraste */
.modern-title, .position-title {
    text-align: center;
    font-size: 2.67rem !important;
    font-weight: 300 !important;
    line-height: var(--line-height-title);
    margin-bottom: 1rem !important;
    color: white !important;
    text-shadow: var(--text-shadow-subtle);
}

/* OR text styles - Actualizado con kit de contraste */
.modern-or-text {
    text-align: center;
    color: var(--inv);
    font-weight: var(--font-weight-button);
    margin: var(--spacing-outer-padding) 0 var(--spacing-outer-padding) 0;
    position: relative;
}

.modern-or-text::before,
.modern-or-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: var(--card-border);
}

.modern-or-text::before {
    left: 0;
}

.modern-or-text::after {
    right: 0;
}

/* Select dropdown modern styles */
select.modern-input,
select.position-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center; /* Moved further right to avoid overlap with prepended icon */
    background-size: 1rem;
    padding-right: 48px; /* Space for dropdown arrow */
}

/* Special handling for select elements inside input groups with prepended icons */
.modern-input-group select.modern-input,
.modern-input-group select.position-input {
    padding-left: 52px !important; /* Space for prepended icon */
    padding-right: 48px !important; /* Space for dropdown arrow */
    background-position: right 16px center; /* Position dropdown arrow */
}

/* Modern masthead override - Con vignette para mejor contraste */
header.modern-masthead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

header.modern-masthead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--vignette-overlay),
                radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

/* Override any existing masthead overlay */
header.modern-masthead .overlay {
    display: none !important;
}

/* Animation for smooth transitions */
.modern-fade-in {
    animation: var(--animation-fade-in);
}

/* Success state (for when token is displayed) */
.modern-success-card {
    border: 2px solid rgba(16, 185, 129, 0.3);
    background-color: rgba(16, 185, 129, 0.05);
}

.modern-token-display {
    text-align: center;
    padding: 24px 20px;
}

/* Primary ticket number - BLANCO con sombra, NO azul */
.modern-token-number, .position-ticket-number {
    font-family: var(--font-family-ticket);
    font-size: var(--font-size-ticket);
    font-weight: var(--font-weight-ticket);
    line-height: var(--line-height-ticket);
    letter-spacing: var(--letter-spacing-ticket);
    color: var(--inv-strong);
    text-shadow: var(--text-shadow-ticket);
    margin-bottom: 16px;
    margin-top: 8px;
    padding: 0 10px;
}

/* Token info - Actualizado con kit de contraste */
.modern-token-info {
    color: var(--inv-muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-outer-padding);
}

/* Current token number - BLANCO con sombra sutil */
.modern-current-token, .position-current-number {
    font-family: var(--font-family-ticket);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
    color: var(--inv-strong);
    text-shadow: var(--text-shadow-soft);
    transition: all var(--transition-slow);
}

/* Odometer animation for token changes */
.modern-current-token.token-updating, .position-current-number.token-updating {
    transform: scale(1.1);
    color: var(--warn);
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
}

.modern-current-token.token-updated, .position-current-number.token-updated {
    animation: var(--animation-token-highlight);
}

/* Token pulse animation keyframes */
@keyframes token-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Loading state */
.modern-loading {
    opacity: 0.7;
    pointer-events: none;
}

.modern-loading .modern-cta-button {
    background-color: var(--color-gray-500);
}

/* Confetti container */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-index-toast);
    overflow: hidden;
}

/* Individual confetti piece */
.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--color-error);
    animation: confetti-fall 2s linear forwards;
    border-radius: 2px;
}

/* Confetti color variations using new design token colors */
.confetti-piece:nth-child(8n+1) { background: var(--error); }
.confetti-piece:nth-child(8n+2) { background: var(--success); }
.confetti-piece:nth-child(8n+3) { background: var(--brand-500); }
.confetti-piece:nth-child(8n+4) { background: var(--warn); }
.confetti-piece:nth-child(8n+5) { background: var(--brand-600); }
.confetti-piece:nth-child(8n+6) { background: var(--color-blue-400); }
.confetti-piece:nth-child(8n+7) { background: var(--brand-700); }
.confetti-piece:nth-child(8n+8) { background: var(--color-blue-300); }

/* Shape variations */
.confetti-piece:nth-child(3n) { border-radius: 50%; }
.confetti-piece:nth-child(4n) { 
    border-radius: 0; 
    transform: rotate(45deg);
}

/* Confetti falling animation */
@keyframes confetti-fall {
    from {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Email form in token display */
.modern-email-form {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-button);
    padding: var(--spacing-vertical-gap-lg);
    margin: var(--spacing-outer-padding) 0;
    max-width: 100%;
    box-sizing: border-box;
}

.modern-email-form .form-row {
    display: flex;
    gap: var(--spacing-vertical-gap-sm);
    align-items: flex-end;
}

.modern-email-form .col-12.col-md-9 {
    flex: 1;
}

.modern-email-form .col-12.col-md-3 {
    flex-shrink: 0;
}

.modern-email-form .modern-input {
    margin-bottom: 0;
    padding: var(--spacing-vertical-gap-sm) var(--spacing-vertical-gap-sm);
    font-size: var(--font-size-small);
}

.modern-email-form .modern-cta-button {
    position: static;
    width: auto;
    padding: var(--spacing-vertical-gap-sm) var(--spacing-vertical-gap-lg);
    font-size: var(--font-size-small);
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-container {
        padding-left: var(--spacing-vertical-gap-lg);
        padding-right: var(--spacing-vertical-gap-lg);
        padding-top: var(--spacing-vertical-gap-lg);
        padding-bottom: 4rem;
    }
    
    .modern-card {
        margin: 0 var(--spacing-vertical-gap-sm);
        padding: var(--spacing-vertical-gap-lg);
    }
    
    .modern-sticky-cta {
        padding: var(--spacing-vertical-gap-sm);
    }
    
    .modern-cta-button {
        padding: 14px var(--spacing-vertical-gap-lg);
        font-size: var(--font-size-body);
    }
    
    .modern-input-group .modern-input,
    .modern-input-group .position-input,
    .modern-input-group .form-control,
    .modern-input-group input,
    .modern-input-group select {
        padding-left: 44px !important; /* Reduce space for icon on mobile but ensure no overlap */
    }
    
    .modern-input-group .input-group-prepend {
        left: 12px; /* Adjust icon position for mobile */
    }
    
    .modern-input-group .input-group-prepend .input-group-text i {
        font-size: 14px !important; /* Smaller icon size for mobile */
    }
    
    /* Mobile adjustments for phone input */
    .iti__tel-input {
        padding-left: 60px !important; /* Reduced space for mobile */
    }
    
    .iti--separate-dial-code .iti__tel-input {
        padding-left: 100px !important; /* More space for dial code on mobile */
    }
    
    /* Enhanced mobile phone input overrides */
    .modern-input-group .iti__tel-input,
    #phone.iti__tel-input {
        padding-left: 110px !important; /* Mobile-specific spacing */
    }
    
    .modern-input-group .iti--separate-dial-code .iti__tel-input,
    .iti--separate-dial-code #phone.iti__tel-input {
        padding-left: 120px !important; /* Mobile separate dial code spacing */
    }
    
    /* MOBILE ABSOLUTE OVERRIDE - Force phone input text positioning */
    .iti--separate-dial-code .iti__tel-input,
    .iti.iti--separate-dial-code input[type="tel"],
    body .iti--separate-dial-code #phone {
        padding-left: 120px !important; /* Mobile spacing */
        text-indent: 0 !important;
        text-align: left !important;
        direction: ltr !important;
        box-sizing: border-box !important;
    }
    
    .modern-input-group .iti--separate-dial-code .iti__flag-container {
        min-width: 85px !important;
        max-width: 105px !important;
    }
    
    .modern-input-group .iti--separate-dial-code .iti__selected-dial-code {
        min-width: 45px !important;
        max-width: 70px !important;
        font-size: 14px !important;
    }
    
    .iti__flag-container {
        min-width: 50px; /* Smaller country code area on mobile */
    }
    
    .iti__selected-flag {
        padding: 6px 6px 6px 8px; /* Reduced padding for mobile */
    }
    
    .modern-field-group {
        margin-bottom: var(--spacing-card-padding);
    }
    
    .modern-field-header {
        font-size: var(--font-size-small);
    }
    
    .modern-email-form .form-row {
        flex-direction: column;
        gap: var(--spacing-vertical-gap-lg);
    }
    
    .modern-email-form .modern-cta-button {
        width: 100%;
    }
    
    .modern-email-form {
        padding: var(--spacing-vertical-gap-sm);
        margin: var(--spacing-vertical-gap-lg) 0;
    }
}

@media (max-width: 480px) {
    .modern-container {
        padding-left: var(--spacing-vertical-gap-sm);
        padding-right: var(--spacing-vertical-gap-sm);
    }
    
    .modern-logo img {
        max-height: 60px;
    }
    
    .modern-card {
        padding: 14px;
        margin: 0 4px;
    }
    
    .modern-field-group {
        margin-bottom: var(--spacing-card-padding);
    }
    
    .modern-field-header {
        font-size: var(--font-size-small);
        margin-bottom: 6px;
    }
    
    .modern-field-header i {
        margin-right: 6px;
        width: 14px;
    }
}

/* Accessibility and preferences */
@media (prefers-contrast: high) {
    .modern-card, .position-card {
        border: 2px solid rgba(255, 255, 255, 0.25);
        background: rgba(17, 24, 39, 0.7); /* Keep the dark background even in high contrast */
    }
    
    .modern-input {
        border: 2px solid var(--color-gray-500);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-card,
    .modern-input,
    .modern-cta-button,
    .modern-segmented-button,
    .position-card,
    .position-input,
    .position-button-primary {
        transition: none;
    }
    
    .modern-fade-in {
        animation: none;
    }
}

/* Kit de Contraste - Utilidades adicionales */
.text-inv-strong { color: var(--inv-strong) !important; }
.text-inv { color: var(--inv) !important; }
.text-inv-muted { color: var(--inv-muted) !important; }
.text-brand-link { color: var(--brand-300) !important; }
.text-brand-accent-light { color: var(--brand-400) !important; }

/* Additional fix for input field spacing to prevent text overlap with icons */
.modern-input-group .form-control,
.modern-input-group input[type="text"],
.modern-input-group input[type="email"],
.modern-input-group input[type="tel"],
.modern-input-group select {
    padding-left: 52px !important; /* Ensure all input types have proper left padding */
    box-sizing: border-box;
}

/* Specific targeting for Laravel HTML Collective form elements */
.modern-input-group select.position-input,
.modern-input-group input.position-input {
    padding-left: 52px !important;
    text-indent: 0 !important; /* Prevent any text indentation that might cause overlap */
}

/* Ensure icons are properly positioned and visible */
.modern-input-group .input-group-prepend .input-group-text i {
    color: var(--text-muted) !important;
    font-size: 16px !important;
    width: 16px !important;
    text-align: center;
    display: inline-block;
}

/* ENHANCED PHONE INPUT FIXES - Override all previous styles */
.modern-input-group .iti__tel-input,
#phone.iti__tel-input {
    padding-left: 130px !important; /* Much more space for separate dial code */
}

/* More specific override for intl-tel-input with separate dial code */
.modern-input-group .iti--separate-dial-code .iti__tel-input,
.iti--separate-dial-code #phone.iti__tel-input {
    padding-left: 140px !important; /* Even more space to ensure no overlap */
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-input) !important;
}

/* CRITICAL FIX: Force text to start after dial code - highest specificity */
.iti--separate-dial-code .iti__tel-input,
.iti.iti--separate-dial-code .iti__tel-input,
body .iti--separate-dial-code .iti__tel-input {
    padding-left: 140px !important;
    text-indent: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    direction: ltr !important;
}

/* Force input text cursor to start after dial code */
.iti--separate-dial-code .iti__tel-input:focus,
.iti--separate-dial-code .iti__tel-input:not(:placeholder-shown) {
    padding-left: 140px !important;
    text-align: left !important;
}

/* Enhanced dial code container styling */
.modern-input-group .iti--separate-dial-code .iti__flag-container {
    min-width: 100px !important;
    max-width: 120px !important;
    z-index: 11 !important;
}

/* Enhanced dial code text styling */
.modern-input-group .iti--separate-dial-code .iti__selected-dial-code {
    min-width: 55px !important;
    max-width: 85px !important;
    font-weight: 500 !important;
    padding-right: 8px !important;
}

/* Clases específicas para los elementos del token */
.position-info-label { 
    color: var(--inv-muted);
    font-weight: var(--font-weight-label);
}

.position-info-value { 
    color: var(--inv-strong);
    font-weight: 600;
}

.position-info-value-accent { 
    color: var(--brand-300);
    font-weight: normal;
}

.position-current-label { 
    color: var(--inv-muted);
    font-size: var(--font-size-current-served);
}

.position-cancelled-label {
    color: var(--inv-muted);
    font-size: var(--font-size-cancelled-label);
}

.position-queue-text { 
    color: var(--inv);
    font-size: 28px;
}

.position-queue-number { 
    color: var(--brand-400);
    font-weight: 700;
}

/* Blinking animation for "Your turn" text */
@keyframes blink-urgent {
    0%, 50% {
        opacity: 1;
        transform: scale(1);
    }
    25% {
        opacity: 0.3;
        transform: scale(1.02);
    }
    75% {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* Apply blinking animation to user turn messages */
.position-queue-text.user-turn {
    animation: blink-urgent 1.5s ease-in-out infinite;
}

/* Alternative: More subtle blinking */
@keyframes blink-subtle {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Class for subtle blinking */
.position-queue-text.user-turn-subtle {
    animation: blink-subtle 2s ease-in-out infinite;
}

/* Pulsing glow effect for urgent messages */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(34, 197, 94, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.4);
        transform: scale(1.02);
    }
}

/* Enhanced user turn styling with glow */
.position-queue-text.user-turn-glow {
    animation: pulse-glow 2s ease-in-out infinite;
    border-radius: 8px;
    padding: 12px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* SweetAlert2 custom styles to match frontend typography */
.swal2-popup .swal2-title {
    font-size: 2.67rem !important;
    font-weight: 300 !important;
    color: var(--text-strong) !important;
    margin-bottom: 1rem !important;
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.swal2-popup {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.swal2-popup .swal2-content {
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-body) !important;
    color: var(--text) !important;
}