.currency-calculator-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.65);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
    }

    .currency-calculator-modal.active {
        display: flex;
    }

    /* Respect user's motion preferences */
    @media (prefers-reduced-motion: reduce) {
        .currency-calculator-modal,
        .currency-calculator,
        .currency-swap-icon,
        .form-control {
            animation: none !important;
            transition: none !important;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .currency-calculator {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 18px;
        margin-bottom: 0;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        max-width: 420px;
        width: 90%;
        position: relative;
        animation: slideUp 0.3s ease;
    }

    .currency-calculator h4 {
        margin-bottom: 18px;
        font-size: 20px;
        color: #333;
        font-weight: 600;
    }

    .currency-calculator h5 {
        margin: 5px 0 12px;
        font-size: 16px;
        color: #333;
        font-weight: 500;
    }

    .currency-calculator .form-group {
        margin-bottom: 16px;
    }

    .currency-form-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        position: relative;
    }

    .currency-form-col {
        flex: 1;
        position: relative;
    }

    .currency-swap-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #ff6b61;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        z-index: 2;
        align-self: flex-end;
        margin-bottom: 2px; /* Выравнивание с нижней частью полей select */
        border: none; /* Remove default button border */
        padding: 0; /* Remove default button padding */
    }

    .currency-swap-icon:hover {
        background-color: #f85b51;
    }

    .currency-swap-icon:active {
        background-color: #e33d32;
    }

    .currency-rates-table {
        max-height: 200px;
        overflow-y: auto;
        margin-top: 20px;
        border-radius: 8px;
        border: 1px solid #f0f0f0;
        background-color: #fcfcfc;
    }

    .currency-rates-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .currency-rates-table th, .currency-rates-table td {
        padding: 8px 12px;
        text-align: left;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    .currency-rates-table tr:last-child td {
        border-bottom: none;
    }

    .currency-rates-table th {
        background-color: #f7f7f7;
        position: sticky;
        top: 0;
        z-index: 1;
        font-weight: 500;
    }

    .currency-rates-table td:nth-child(2) {
        text-align: right;
        font-family: 'Courier New', monospace;
    }

    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 2px solid #d0d0d0;
        border-radius: 8px;
        font-size: 16px;
        background-color: #ffffff;
        transition: all 0.2s ease;
        color: #212529;
        font-weight: 500;
    }

    .form-control:focus {
        border-color: #2a5db0;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(42, 93, 176, 0.25);
        background-color: #fff;
        color: #000;
    }

    .form-control:hover:not(:focus) {
        border-color: #999;
        background-color: #f8f9fa;
    }

    .form-control.is-invalid {
        border-color: #dc3545;
        background-color: #fff5f5;
    }

    .form-control.is-invalid:focus {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
    }

    /* Specific styles for select elements */
    select.form-control {
        cursor: pointer;
        -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='currentColor' 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 10px center;
        background-size: 20px;
        padding-right: 40px;
    }

    /* Specific styles for number input */
    input[type="number"].form-control {
        -moz-appearance: textfield;
    }

    input[type="number"].form-control::-webkit-inner-spin-button,
    input[type="number"].form-control::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    label {
        display: block;
        margin-bottom: 6px;
        font-size: 14px;
        color: #212529;
        font-weight: 500;
    }

    .form-text {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        color: #6c757d;
    }

    .error-message {
        display: none;
        margin-top: 4px;
        font-size: 13px;
        color: #dc3545;
        font-weight: 500;
    }

    .error-message.active {
        display: block;
    }

    #result {
        font-weight: 700;
        color: #000000;
        background-color: #e8f4f8;
        font-size: 18px;
        text-align: center;
        border: 2px solid #2a5db0;
    }

    #result[aria-invalid="true"] {
        background-color: #fff5f5;
        border-color: #dc3545;
        color: #dc3545;
        font-weight: 700;
    }

    .rates-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .rates-header h5 {
        margin: 0;
    }

    .toggle-rates {
        font-size: 13px;
        color: #2a5db0;
        cursor: pointer;
        background: none;
        border: none;
        padding: 4px 8px;
        font-weight: 500;
    }

    .toggle-rates:hover,
    .toggle-rates:focus {
        text-decoration: underline;
        color: #1a4d90;
    }

    .modal-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #f5f5f5;
        border: 2px solid transparent;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #495057;
        transition: all 0.2s ease;
        font-weight: 700;
        line-height: 1;
    }

    .modal-close:hover,
    .modal-close:focus {
        background-color: #dc3545;
        color: #fff;
        border-color: #dc3545;
    }

    @media (max-width: 767px) {
        .currency-calculator {
            padding: 15px;
            width: 95%;
        }
    }

    /* Screen reader only class for accessibility */
    .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;
    }

    /* Focus visible styles for better keyboard navigation */
    .currency-calculator *:focus-visible {
        outline: 3px solid #2a5db0;
        outline-offset: 2px;
    }

    /* Required field indicator */
    .required {
        color: #dc3545;
        margin-left: 2px;
        font-weight: 700;
    }

    /* Center text in table cells */
    .text-center {
        text-align: center;
    }

    /* Improve touch targets for mobile */
    @media (hover: none) and (pointer: coarse) {
        .form-control,
        .currency-swap-icon,
        .toggle-rates,
        .modal-close {
            min-height: 44px;
            min-width: 44px;
        }
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .currency-calculator {
            border: 3px solid currentColor;
        }
        
        .form-control {
            border-width: 3px;
        }
        
        .currency-calculator *:focus-visible {
            outline-width: 4px;
        }
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .currency-calculator-modal {
            background-color: rgba(0, 0, 0, 0.85);
        }
        
        .currency-calculator {
            background-color: #1e1e1e;
            color: #f0f0f0;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        }
        
        .currency-calculator h4,
        .currency-calculator h5,
        label {
            color: #f0f0f0;
        }
        
        .form-control {
            background-color: #2d2d2d;
            border-color: #4a4a4a;
            color: #ffffff;
            font-weight: 500;
        }
        
        .form-control:focus {
            background-color: #3a3a3a;
            border-color: #5a9fd4;
            color: #ffffff;
        }
        
        .form-control:hover:not(:focus) {
            border-color: #666;
            background-color: #333;
        }
        
        .form-control.is-invalid {
            background-color: #3d1f1f;
            border-color: #dc3545;
            color: #ffffff;
        }
        
        /* Dark mode select dropdown arrow */
        select.form-control {
            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='%23ffffff' 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");
        }
        
        /* Dark mode option elements */
        select.form-control option {
            background-color: #2d2d2d;
            color: #ffffff;
        }
        
        .form-text {
            color: #b0b0b0;
        }
        
        .error-message {
            color: #ff6b6b;
        }
        
        #result {
            background-color: #1e3a4a;
            border-color: #5a9fd4;
            color: #ffffff;
            font-weight: 700;
        }
        
        #result[aria-invalid="true"] {
            background-color: #3d1f1f;
            border-color: #ff6b6b;
            color: #ff6b6b;
        }
        
        .currency-rates-table {
            background-color: #252525;
            border-color: #4a4a4a;
        }
        
        .currency-rates-table th,
        .currency-rates-table td {
            color: #f0f0f0;
            border-bottom-color: #3a3a3a;
        }
        
        .currency-rates-table th {
            background-color: #2d2d2d;
        }
        
        .toggle-rates {
            color: #5a9fd4;
        }
        
        .toggle-rates:hover,
        .toggle-rates:focus {
            color: #7bb9e8;
        }
        
        .modal-close {
            background-color: #3a3a3a;
            color: #f0f0f0;
        }
        
        .modal-close:hover,
        .modal-close:focus {
            background-color: #dc3545;
            color: #ffffff;
        }
        
        .currency-swap-icon {
            background-color: #ff6b61;
        }
        
        .currency-swap-icon:hover {
            background-color: #ff8577;
        }
        
        .required {
            color: #ff6b6b;
        }
    }