/* Add this CSS */
img.lazyload {
    opacity: 0;
    transition: opacity 0.3s;
}







/* Exchange From-To Container */
.exchange-from-to-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    margin: 30px 0;
    padding: 15px;
    background-color: #1a1730;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

/* Exchange From-To Box */
.exchange-from-to-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #2b2554, #372d6a);
    border: 2px solid #3a336b;
    border-radius: 12px;
    padding: 15px 20px;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.exchange-from-to-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.8);
}

/* From-To Pair Content */
.from-to-pair-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Crypto Item */
.crypto-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.crypto-item:first-child {
    margin-right: 10px;
}

.crypto-item:last-child {
    margin-left: 10px;
}

.crypto-item > .crypto-logo-small {
    width: 35px;
    height: 35px;
    margin-right: 8px;
}

/* Crypto Symbol */
.exchange-crypto-symbol {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

/* Exchange Icon */
.exchange-icon {
    font-size: 26px;
    color: #ff61d2;
    margin: 0 8px;
    transition: transform 0.3s ease;
}

.exchange-from-to-box:hover .exchange-icon {
    transform: rotate(360deg);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .exchange-from-to-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .exchange-from-to-container {
        grid-template-columns: 1fr;
    }
}



.crypto-pairs-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    font-family: 'Poppins', sans-serif;
    background: #1a1a2e; /* Matches the dark purple theme */
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.crypto-pair-heading {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.8em;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    border-bottom: 2px solid #3a3a5e;
    padding-bottom: 10px;
    letter-spacing: 0.05em;
}

.crypto-pairs {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.crypto-pairs li {
    background: #222244;
    border: 1px solid #3a3a5e;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
}

.crypto-pairs li:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.crypto-pairs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    color: #fff;
    gap: 8px;
}

.crypto-pairs a:hover {
    color: #ff6b6b; /* Accent color for hover effect */
}

/* Icon styling for pairs */
.crypto-pairs a img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Responsive Design */
@media (max-width: 768px) {
    .crypto-pairs li {
        padding: 10px;
    }

    .crypto-pair-heading {
        font-size: 1.5em;
    }
}


/* body{
    color: white;
} */

.help-link-container {
    text-align: center;
    margin-top: 20px; /* Reduced margin to bring it closer */
}

.help-link {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.help-link:hover {
    text-decoration: underline; /* Add underline on hover */
}


.crypto-pair-heading {
    cursor: pointer;
    padding: 10px;
    margin: 0;
}

.crypto-pairs {
    list-style-type: none;
    margin: 0;
    padding: 0 20px;
}

.crypto-pairs li {
    padding: 5px 0;
}

.crypto-pairs li a {
    text-decoration: none;
    color: #0073aa;
}

.crypto-pairs li a:hover {
    text-decoration: underline;
}



/* Adjusted CSS */
/* Top Exchange Pairs Container */
.top-exchange-pairs-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    margin: 20px 0;
    padding: 10px;
}

/* Exchange Pair Box */
.exchange-pair-box {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1a3b, #2b2554);
    border: 2px solid #292354;
    border-radius: 15px;
    padding: 15px;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.exchange-pair-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

/* Exchange Pair Content */
.exchange-pair-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Crypto Item */
.crypto-item {
    display: flex;
    align-items: center;
}

.crypto-item:first-child {
    margin-right: 10px;
}

.crypto-item:last-child {
    margin-left: 5px;
}

.crypto-item > .crypto-logo-small {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}
/* Crypto Symbol */
.exchange-crypto-symbol {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

/* Exchange Icon */
.exchange-icon {
    font-size: 24px;
    color: #ff61d2;
    transition: transform 0.3s ease;
}

.exchange-pair-box:hover .exchange-icon {
    transform: rotate(360deg);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .top-exchange-pairs-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .top-exchange-pairs-container {
        grid-template-columns: 1fr;
    }
}














/* Conversion Tables Container */
/* Conversion Tables Container */
.conversion-tables-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    justify-content: center;
    margin: 20px 0;
}

/* Conversion Table Box */
.conversion-table {
    background: linear-gradient(145deg, #1d1831, #1a1431);
    border: 2px solid #292354;
    border-radius: 20px;
    padding: 20px;
    color: #ffffff;
    flex: 1 1 45%; /* Allow the table to grow and shrink */
    max-width: 500px; /* Increased max-width */
    box-sizing: border-box;
}

/* Conversion Table Header */
.conversion-table-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap; /* Allow wrapping */
}

.conversion-table-header .crypto-logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.conversion-table-header h2 {
    font-size: 20px;
    margin: 0;
    color: #ffffff;
    flex: 1; /* Allow h2 to take available space */
    word-wrap: break-word;
}

/* Table Styles */
.conversion-table table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    table-layout: fixed; /* Enforce fixed table layout */
}

.conversion-table th,
.conversion-table td {
    padding: 8px;
    border-bottom: 1px solid #292354;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
    text-align: left; /* Default alignment for all cells */
}

/* Adjusted Column Widths and Alignment */
.conversion-table th:first-child,
.conversion-table td:first-child {
    width: 30%; /* Set width to 30% */
    text-align: left; /* Ensure first column is left-aligned */
}

.conversion-table th:last-child,
.conversion-table td:last-child {
    width: 70%; /* Set width to 70% */
    text-align: right; /* Align second column data to the right */
}

.conversion-table th {
    background-color: #2a2354;
    color: #FF61D2;
}

.conversion-table tr:hover {
    background-color: #292354;
}

/* Styling for amounts and symbols */
.amount {
    font-weight: bold;
    color: #ffffff;
    display: inline; /* Ensure inline display */
}

.symbol {
    margin-left: 5px;
    color: #8a8fbd;
    display: inline; /* Ensure inline display */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .conversion-tables-container {
        flex-direction: column;
        align-items: center;
    }

    .conversion-table {
        flex: 1 1 100%;
        max-width: none;
        width: 90%;
    }
}

@media (max-width: 600px) {
    .conversion-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .conversion-table-header .crypto-logo {
        margin-bottom: 10px;
    }

    .conversion-table-header h2 {
        font-size: 18px;
    }
}




/* Main Container Styling */
.crypto-info-unique-section {
    background: linear-gradient(145deg, #1d1831, #1a1431); /* Matches your theme colors */
    border: 2px solid #292354; /* Subtle border to fit the theme */
    border-radius: 20px; /* Rounded corners for a modern look */
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6); /* Consistent shadow styling */
    color: #ffffff;
}

/* Flexbox Layout for the Whole Section */
.crypto-info-unique-container {
    display: flex;
    justify-content: space-between; /* Space between left and right pairs */
    gap: 40px; /* Space between columns */
}

/* Each Title-Description Pair */
.crypto-info-unique-pair {
    flex: 1; /* Equal space for each pair */
    max-width: 45%; /* Adjust width for balance */
    text-align: left; /* Align content to the left */
}

/* Title Styling */
.crypto-info-unique-pair h2 {
    font-weight: bold; /* Keep titles bold */
    color: #ffffff; /* White for contrast */
    margin-bottom: 15px; /* Space between title and divider */
    text-align: center;
}

/* Larger Divider Line */
.crypto-info-unique-divider {
    width: 100%; /* Larger width for emphasis */
    height: 4px; /* Thicker line */
    background-color: #ff61d2; /* Purple line color */
    margin: 0 0 20px 0; /* Add space below the line */
}

/* Description Styling */
.crypto-info-unique-pair p {
    font-size: 16px; /* Legible font size */
    line-height: 1.8; /* Increase line height for readability */
    color: #c3c6d3; /* Softer white for descriptions */
    margin-top: 0; /* Remove extra margin above */
}

/* Responsive Design */
@media (max-width: 768px) {
    .crypto-info-unique-container {
        flex-direction: column; /* Stack title-description pairs vertically */
        gap: 20px; /* Adjust spacing for vertical stacking */
    }

    .crypto-info-unique-pair {
        max-width: 100%; /* Take full width */
    }

    .crypto-info-unique-divider {
        width: 100%; /* Adjust divider width for mobile */
    }
}






 /* Currency Data Container */
 .currency-data-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the boxes */
    gap: 50px; /* Adjust the gap as needed */
    margin: 20px 0;
}

/* Currency Data Box */
.currency-data-box {
    background: linear-gradient(145deg, #1d1831, #1a1431);
    border: 2px solid #292354;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    padding: 20px;
    margin: 10px 0; /* Only vertical margin */
    color: #ffffff;
    flex: 1; /* Allow boxes to grow equally */
    max-width: 500px; /* Optional: set a max width */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

  /* Currency Header */
  .currency-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .currency-header img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }

  .currency-name-symbol {
    display: flex;
    flex-direction: column;
  }

  .currency-symbol {
    font-size: 18px;
    font-weight: bold;
    color: #ff61d2; /* Accent color */
  }

  .currency-name {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
  }

  /* Currency Info */
  .currency-info {
    display: flex;
    flex-direction: column;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .info-label {
    font-size: 14px;
    color: #8a8fbd; /* Lighter text color */
  }

  .info-value {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
  }

  /* Positive and Negative Change Styling */
  .positive-change {
    color: #4caf50; /* Green for positive change */
  }

  .negative-change {
    color: #f44336; /* Red for negative change */
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .currency-data-container {
      flex-direction: column;
      align-items: center;
    }

    .currency-data-box {
      width: 90%;
    }
  }



/* Tab Navigation Container */
/* =============================================
   TAB NAVIGATION - Modern Design
   ============================================= */
.tab-navigation {
    display: flex;
    width: 100%;
    background: linear-gradient(180deg, #16112a 0%, #1a1431 100%);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

/* Base Tab Styling */
.tab {
    flex: 1;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Active Tab ("Crypto Exchange") */
.crypto-exchange {
    background: linear-gradient(180deg, #2d2458 0%, #2a2354 100%);
    color: #ffffff;
    border-top-left-radius: 24px;
    border-bottom-right-radius: 18px;
    z-index: 2;
    margin-bottom: -1px;
    padding-bottom: 1px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
}

/* Active indicator line */
.crypto-exchange::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F960D3, transparent);
    border-radius: 2px;
}

/* Inactive Tab ("Buy Crypto") */
.buysellcrypto {
    background: transparent;
    color: #6b6892;
    text-decoration: none;
    transition: all 0.3s ease;
}

.buysellcrypto:hover {
    background: rgba(249, 96, 211, 0.05);
    color: #9a97b8;
}

/* Remove skewed background */
.buysellcrypto::before {
    display: none;
}

.buysellcrypto span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
    color: inherit;
    font-weight: 500;
}

.buysellcrypto i {
    font-size: 11px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.buysellcrypto:hover i {
    opacity: 1;
    transform: translate(2px, -2px);
    color: #F960D3;
}
/* "Coming Soon" Label */
/*.buysellcrypto::after {*/
/*    content: " Coming Soon";*/
/*    font-size: 12px;*/
/*    color: #ff61d2;*/
/*    margin-left: 5px;*/
/*    transform: skewX(-15deg);*/
/*    display: inline-block;*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/

/* =============================================
   EXCHANGE CONTAINER
   ============================================= */
.exchange-container {
    background: linear-gradient(180deg, #1d1831 0%, #1a1431 100%);
    padding: 0;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 520px;
    text-align: center;
    margin: 0 auto;
    border: 1px solid #292354;
    position: relative;
}

/* Content Wrapper with Padding */
.exchange-content {
    padding: 32px 28px 28px;
    background: linear-gradient(180deg, #1d1831 0%, #1a1431 100%);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    position: relative;
    z-index: 1;
    margin-top: 0;
}


.exchange-container h2 {
    margin: 0;
    padding: 0;
}


.exchange-container.expanded {
    padding-bottom: 30px; /* Adjust this value as needed */
    transition: padding-bottom 0.3s ease;
}

.address-label-modern .recipient-tooltip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    cursor: pointer;
}

.address-label-modern .recipient-tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 250px;
    background-color: #292354;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    bottom: 100%; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* Increased z-index */
    font-size: 12px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Show tooltip on hover */
.address-label-modern .recipient-tooltip-icon:hover .recipient-tooltip-text {
    visibility: visible;
    opacity: 1;
}
/* Tooltip Icon Styling */
.input-label .tooltip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.input-label .tooltip-icon:hover {
    transform: scale(1.1);
}

.input-label .tooltip-icon:hover svg {
    fill: #F960D3;
    filter: drop-shadow(0 0 4px rgba(249, 96, 211, 0.5));
}

/* Tooltip Text - Modern Glass Design */
.input-label .tooltip-text {
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, rgba(42, 35, 84, 0.95) 0%, rgba(30, 25, 52, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    padding: 6px 10px;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    z-index: 9999;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    border: 1px solid rgba(249, 96, 211, 0.25);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.35),
        0 0 12px rgba(249, 96, 211, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Checkmark icon before text */
.input-label .tooltip-text::before {
    content: '✓';
    display: inline-block;
    margin-right: 5px;
    color: #4ade80;
    font-weight: 700;
    font-size: 9px;
}

/* Tooltip Arrow - Modern */
.input-label .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(42, 35, 84, 0.95) transparent transparent transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Show tooltip on hover with smooth animation */
.input-label .tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =============================================
   CRYPTO BOX - Input Fields
   ============================================= */
.crypto-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2a2354;
    padding: 14px 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    margin-bottom: 10px;
    margin-top: 0px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    overflow: visible;
}

/* Center-out expanding border animation - ink bar effect */
.crypto-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #F960D3, #9b51e0, #F960D3);
    background-size: 200% 100%;
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    z-index: 10;
}

/* Hover effect - subtle glow */
/* Focus state - full ink bar animation (only when clicked/focused) */
.crypto-box:focus-within::after {
    width: 100%;
    opacity: 1;
    animation: inkBarGlow 2s ease-in-out infinite;
}

@keyframes inkBarGlow {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: 0 0 8px rgba(249, 96, 211, 0.6);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 15px rgba(249, 96, 211, 0.8);
    }
}

/* Focus state when input is active */
.crypto-box:focus-within {
    border-color: rgba(249, 96, 211, 0.4);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 0 25px rgba(249, 96, 211, 0.15);
}

/* =============================================
   LOADING ANIMATION - For "You Get" box
   ============================================= */

/* Hide the input value when loading */
.crypto-box.loading .crypto-amount-input {
    color: transparent !important;
}

/* Loading spinner - use flexbox alignment from crypto-box */
/* Position relative to where the input value would be */
.crypto-box.loading::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(249, 96, 211, 0.2);
    border-top-color: #F960D3;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 10;
}

/* Glowing ring effect behind spinner */
.crypto-box.loading::after {
    content: '';
    position: absolute;
    left: 22px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 96, 211, 0.15) 0%, transparent 70%);
    animation: glow-pulse 1.5s ease-in-out infinite;
    z-index: 9;
}

/* Spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Glow pulse animation */
@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Pulsing border on the box while loading */
.crypto-box.loading {
    animation: border-pulse 1.5s ease-in-out infinite;
}

@keyframes border-pulse {
    0%, 100% {
        border-color: rgba(249, 96, 211, 0.2);
    }
    50% {
        border-color: rgba(249, 96, 211, 0.5);
    }
}




/* Active state for payout-input-wrapper when input is focused */
.crypto-box.active-border {
    border: 2px solid #F960D3; /* Change to 2px border when active */
}




@keyframes borderGlow {
    0% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    }
    100% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
}


  .crypto-logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

  
  .crypto-amount {
    font-size: 18px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
  }
  
  .send-info {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
  
/* Crypto Selector Button */
  .crypto-info {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 20px;
    gap: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.crypto-info:hover {
    background: rgba(255, 255, 255, 0.06);
}
  
  .crypto-info img {
    width: 26px;
    height: 26px;
    margin-right: 4px;
  }
  

  /* Send Deposit Section */
/* Send Deposit Info - Modern */
.send-deposit-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 28px;
    background: linear-gradient(145deg, #2a2354, #1e1934);
    border: 1px solid rgba(249, 96, 211, 0.15);
    padding: 18px 24px;
    border-radius: 14px;
}

.send-deposit-text {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.send-deposit-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.send-deposit-logo {
    width: 28px;
    height: 28px;
}

.send-deposit-amount {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.send-deposit-network {
    display: none; /* Using crypto-network class instead */
}

/* Operation Details - Modern */
.operation-details {
    margin-top: 28px;
    padding-top: 0;
    border-top: none;
    text-align: left;
}

/* Payout Merged Box - Single Card Design */
.payout-merged-box {
    background: linear-gradient(145deg, #2a2354, #1e1934);
    border: 1px solid rgba(249, 96, 211, 0.15);
    border-radius: 14px;
    margin-top: 24px;
    overflow: hidden;
}

.payout-receive-row,
.payout-address-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 20px;
}

.payout-divider {
    height: 1px;
    background: rgba(138, 143, 189, 0.15);
    margin: 0 16px;
}

.payout-label {
    font-size: 14px;
    font-weight: 500;
    color: #a9a6c4;
    white-space: nowrap;
    margin-right: 16px;
}

.payout-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payout-value .crypto-logo-small {
    width: 24px;
    height: 24px;
}

.payout-value .operation-amount {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.payout-address {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    word-break: break-all;
    user-select: all;
    cursor: text;
    text-align: left;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 0.3px;
}

.payout-note {
    font-size: 11px;
    color: #6b7094;
    text-align: center;
    margin: 0;
    padding: 10px 16px 6px;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-top: 1px solid rgba(138, 143, 189, 0.1);
    margin-top: 4px;
}


.operation-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
}

.operation-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: transparent;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}




/* You Get Section - Modern */
.you-get {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: #ffffff;
    background: linear-gradient(145deg, #2a2354, #1e1934);
    border: 1px solid rgba(249, 96, 211, 0.15);
    padding: 18px 24px;
    border-radius: 14px;
    margin: 0;
}

.you-get p {
    font-size: 14px;
    font-weight: 500;
    color: #a9a6c4;
    margin: 0;
}

.crypto-logo-small {
    width: 26px;
    height: 26px;
}

/* Additional styling for the crypto amount to make it stand out */
.operation-amount {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

/* .crypto-network-badge {
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 10px;
} */

.recipient-address {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: white;
    margin-top: 15px;
    margin-bottom: 10px;
}

.address-box {
    padding: 10px;
    border-radius: 8px;
    margin-left: 10px;
    display: inline-flex;
    align-items: center;
}

.address-box span {
    word-break: break-all;
}


/* =============================================
   TRANSACTION STATUS PAGE - MODERN REDESIGN
   ============================================= */

/* Transaction ID Box - Matching purple swap box design */
.transaction-id-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(145deg, #2a2354, #1e1934);
    border: 1px solid rgba(249, 96, 211, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(138, 143, 189, 0.15);
}
  
  .transaction-id-content {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .exchange-id {
    font-size: 14px;
    font-weight: 600;
    color: #a9a6c4;
    margin: 0;
  }
  
.exchange-id span {
    color: #F960D3;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    user-select: all;
  }
  
.transaction-id-box .copy-button {
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s ease;
    background: rgba(249, 96, 211, 0.1);
    border: 1px solid rgba(249, 96, 211, 0.2);
}

.transaction-id-box .copy-button:hover {
    background: rgba(249, 96, 211, 0.2);
    border-color: rgba(249, 96, 211, 0.4);
    transform: scale(1.05);
}

.transaction-id-box .copy-button svg {
    fill: #F960D3;
}

.need-help {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #a9a6c4;
    font-size: 12px;
    font-weight: 500;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.need-help:hover {
    color: #F960D3;
    background: rgba(249, 96, 211, 0.1);
}

.need-help i {
    font-size: 13px;
}

/* MEMO / Extra ID Section - Modern */
.memo-text {
    font-size: 12px;
    font-weight: 600;
    color: #8a8fbd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.memo-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1a1432;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(138, 143, 189, 0.15);
    width: 100%;
    box-sizing: border-box;
}

.memo-box p {
    font-size: 13px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    color: #ffffff;
    margin: 0;
    word-break: break-all;
    cursor: pointer;
    flex: 1;
}

.memo-box .copy-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.memo-box .copy-button:hover {
    background: rgba(249, 96, 211, 0.15);
}

.memo-box .copy-icon svg {
    width: 16px;
    height: 16px;
    fill: #8a8fbd;
}

/* Deposit Box - Modern */
.deposit-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    margin-bottom: 28px;
    width: 100%;
    position: relative;
    overflow: visible;
  }
  
  .deposit-address-text {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
    align-self: center;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  
  .deposit-address-text .arrow-down {
    display: block;
    font-size: 20px;
    margin-top: 4px;
    animation: bounceDown 1s ease-in-out infinite;
  }
  
  @keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }
  
/* QR Address Box - Modern */
  .qr-address-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e1a35;
    border-radius: 16px;
    padding: 28px 24px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(138, 143, 189, 0.1);
    overflow: visible;
    position: relative;
  }
  
/* QR Code Container - Modern with pink border */
  .qr-code-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 3px solid #c855c8;
    box-shadow: 0 0 20px rgba(200, 85, 200, 0.3);
    position: relative;
  }
  
.qr-code-container:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(249, 96, 211, 0.4);
}

  .qr-code-wrapper {
    position: relative;
    display: inline-block;
  }
  
  .qr-code-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    pointer-events: none;
  }
  
/* Crypto Address - Modern */
  .crypto-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 14px 18px;
    background: #1a1432;
    border-radius: 10px;
    border: 1px solid rgba(138, 143, 189, 0.15);
    width: 100%;
    box-sizing: border-box;
  }
  
  .crypto-address p,
  p#cryptoAddress {
    font-size: 18px !important;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 !important;
    word-break: break-all;
    cursor: pointer;
    flex: 1;
    line-height: 1.6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 1px rgba(255,255,255,0.4);
    letter-spacing: 0.8px;
  }
  
 /* General Copy Button Styles */
.copy-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: relative; /* For positioning the popup */
    margin-left: 10px;
  }
  
  .copy-icon {
    display: flex;
    align-items: center;
  }
  
  .copy-icon svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }
  
/* Popup Message Styling */
.copy-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #292354;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    pointer-events: none; /* So clicks pass through to the QR code */
  }
  
  .copy-popup.show {
    opacity: 1;
  }
  
  .copy-button.show-popup .copy-popup {
    display: block;
    opacity: 1;
  }
  
  /* Copied State (if any specific styles needed) */
  .copy-button.copied .copy-icon svg {
    fill: #ffffff; /* Ensure the tick icon remains white */
  }
  
  


  /* Adjust the input container to hold both the input and message */
  /* Input container to align left */


/* Positioning for the "You Send" and "You Get" labels */
/* =============================================
   INPUT LABELS
   ============================================= */
.input-label {
    font-size: 12px;
    color: #8a8fbd;
    font-weight: 600;
    position: absolute;
    left: 0px;
    top: -22px;
    padding: 0 5px;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Modern Style for the Address Box */
.address-box-modern {
    background-color: #292354; /* Light background */
    padding: 20px;
    border-radius: 15px;
    margin-top: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease; /* Smooth transition */
}



/* Label Styling */
/* =============================================
   DESTINATION ADDRESS SECTION - Modern Design
   ============================================= */
.destination-address-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* When visible */
.destination-address-container.visible,
#recipientAddressContainer.visible {
    max-height: 200px;
    padding: 0;
    margin-top: 16px;
    overflow: visible;
}

/* Header with badge and label */
.destination-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

/* Label text */
.destination-label {
    font-size: 13px;
    font-weight: 500;
    color: #a9a6c4;
}

/* Crypto info wrapper */
.destination-crypto-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #a9a6c4;
}

#destinationCryptoName {
    color: #ffffff;
    font-weight: 600;
}

/* Network badge - inline style */
.destination-network-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 2px;
}

/* Input wrapper */
.destination-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #1a1432;
    border-radius: 12px;
    padding: 16px 18px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid rgba(138, 143, 189, 0.2);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

/* Center-out expanding border for destination input */
.destination-input-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #F960D3, #9b51e0, #F960D3);
    background-size: 200% 100%;
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
}

.destination-input-wrapper:focus-within {
    border-color: rgba(249, 96, 211, 0.4);
    box-shadow: 0 0 0 3px rgba(249, 96, 211, 0.08);
}

.destination-input-wrapper:focus-within::after {
    width: 100%;
    opacity: 1;
    animation: inkBarGlow 2s ease-in-out infinite;
}

/* Address input - full width, no truncation */
.destination-address-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-sizing: border-box;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    letter-spacing: 0.3px;
}

.destination-address-input::placeholder {
    color: #5a5780 !important;
    -webkit-text-fill-color: #5a5780 !important;
    opacity: 1 !important;
}

/* Remove autofill styling - keep functionality, remove white overlay */
.destination-address-input:-webkit-autofill,
.destination-address-input:-webkit-autofill:hover,
.destination-address-input:-webkit-autofill:focus,
.destination-address-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1432 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #1a1432 !important;
    border-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    caret-color: #ffffff !important;
}

#recipientAddress:-webkit-autofill,
#recipientAddress:-webkit-autofill:hover,
#recipientAddress:-webkit-autofill:focus,
#recipientAddress:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a1432 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-color: #1a1432 !important;
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

/* Firefox autofill */
.destination-address-input:autofill,
#recipientAddress:autofill {
    background-color: #1a1432 !important;
    color: #ffffff !important;
}

/* Remove input number spinners and other browser defaults */
.destination-address-input::-webkit-outer-spin-button,
.destination-address-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#recipientAddress {
    background: transparent !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Legacy support for old class names */
.address-label-modern {
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: #8a8fbd;
    margin-bottom: 8px;
    display: block;
}

#recipientAddressContainer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Legacy payout wrapper (kept for backwards compatibility) */
.payout-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #1a1432;
    border-radius: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #2a2354;
}

.payout-input-wrapper input {
    width: 100%;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 14px;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

.wallet-icon {
    display: none;
}





.crypto-right {
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Style for the input box */
/* Style for the input box */
.crypto-amount-input {
    font-size: 20px;
    font-weight: bold;
    color: white;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    outline: none;
    padding: 5px 10px;
    box-sizing: border-box;
}



@keyframes borderGlow {
    0% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
    }
    100% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
    }
}



.input-container input[type="number"] {
    -moz-appearance: textfield; /* Hide spin buttons in Firefox */
    appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide spin buttons in Chrome */
    appearance: none;
}
  


/* Position the swap button centrally between the two boxes */
.swap-container {
    position: relative;
    justify-content: center;
    align-items: center;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* Container for the separator lines and button */
/* =============================================
   SWAP BUTTON SEPARATOR
   ============================================= */
.separator-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 16px 0;
    position: relative;
}

/* Horizontal lines */
.separator-line {
    height: 1px;
    background-color: rgba(102, 102, 102, 0.25);
    flex-grow: 1;
}

.left-line {
    margin-right: 10px;
}

.right-line {
    margin-left: 0px;
}

/* Transparent swap button with circular border */
/* Swap Icon Button */
.swap-icon-button {
    background: transparent;
    border: 1px solid rgba(102, 102, 102, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    color: #F960D3;
}

.swap-icon-button:hover {
    background: rgba(249, 96, 211, 0.1);
    border-color: rgba(249, 96, 211, 0.3);
}

.swap-icon-button:active {
    transform: scale(0.95);
}

.swap-svg-icon {
    width: 20px; /* Default width for SVG icon */
    height: 20px; /* Default height for SVG icon */
    transition: transform 0.3s ease;
}


/* Rotate the SVG icon 360 degrees */
.rotate-icon {
    transform: rotate(180deg);
}




  
  /* Confirm/Continue Button */
/* =============================================
   EXCHANGE BUTTON - Primary CTA
   ============================================= */
  .swap-button {
    background: linear-gradient(90deg, #ff61d2, #9b51e0);
    padding: 15px 20px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(155, 81, 224, 0.4);
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.swap-button:hover {
    box-shadow: 0 10px 28px rgba(155, 81, 224, 0.5);
    transform: translateY(-1px);
}

.swap-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(155, 81, 224, 0.3);
}

/* =============================================
   EXCHANGE BUTTON - HIDE LOADING ELEMENTS BY DEFAULT
   ============================================= */
.swap-button .btn-spinner,
.swap-button .btn-loading-text,
.swap-button .loading-dots,
.swap-button .btn-success-text {
    display: none !important;
}

.swap-button .btn-text {
    display: inline !important;
}

/* LOADING STATE */
.swap-button.loading {
    pointer-events: none;
    background: linear-gradient(90deg, #9b51e0, #ff61d2, #9b51e0);
    background-size: 200% 100%;
    animation: buttonGradientShift 1.5s ease infinite;
}

.swap-button.loading .btn-text {
    display: none !important;
}

.swap-button.loading .btn-spinner {
    display: inline-block !important;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
}

.swap-button.loading .btn-loading-text {
    display: inline !important;
}

.swap-button.loading .loading-dots {
    display: inline-flex !important;
    gap: 3px;
    margin-left: 4px;
}

.swap-button .loading-dots span {
    width: 4px;
    height: 4px;
    background: #ffffff;
    border-radius: 50%;
    animation: dotPulse 1.2s ease-in-out infinite;
}

.swap-button .loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.swap-button .loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes buttonGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* SUCCESS STATE */
.swap-button.success {
    background: linear-gradient(90deg, #00c853, #00e676);
    pointer-events: none;
}

.swap-button.success .btn-text,
.swap-button.success .btn-spinner,
.swap-button.success .btn-loading-text,
.swap-button.success .loading-dots {
    display: none !important;
}

.swap-button.success .btn-success-text {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

.swap-button .checkmark-icon {
    width: 20px;
    height: 20px;
}

.swap-button .checkmark-icon path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: checkmarkDraw 0.4s ease forwards;
}

@keyframes checkmarkDraw {
    to { stroke-dashoffset: 0; }
}
  
  /* Address Box */
  .address-box {
    margin-top: 20px;
  }
  

/* ============================================
   CRYPTOCURRENCY SELECTOR POPUP - MODERN DESIGN
   ============================================ */

/* Popup Overlay with blur backdrop */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 8, 20, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When popup is active/visible */
.popup-overlay.active {
    display: flex;
    opacity: 1;
}

/* Popup container with glassmorphism effect */
.popup {
    background: linear-gradient(165deg, rgba(35, 28, 65, 0.95) 0%, rgba(22, 18, 45, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 95%;
    max-width: 440px;
    height: auto;
    max-height: 75vh;
    padding: 0;
    border-radius: 24px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.popup-overlay.active .popup {
    transform: scale(1) translateY(0);
}

/* Popup Header */
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.popup-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.3px;
}

/* Close button - modern circular design */
.close-popup {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    cursor: pointer;
    color: #8a8fbd;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.close-popup:hover {
    background: rgba(249, 96, 211, 0.15);
    color: #F960D3;
    transform: rotate(90deg);
}

/* Search bar container */
.search-bar {
    display: flex;
    align-items: center;
    background: rgba(41, 35, 84, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 16px;
    margin: 16px 20px;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.search-bar:focus-within {
    border-color: rgba(249, 96, 211, 0.4);
    background: rgba(41, 35, 84, 0.8);
    box-shadow: 0 0 0 3px rgba(249, 96, 211, 0.1);
}

.search-bar i {
    margin-right: 12px;
    color: #6b6b8d;
    font-size: 14px;
    transition: color 0.2s ease;
}

.search-bar:focus-within i {
    color: #F960D3;
}

.search-bar input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
    outline: none;
    color: #ffffff;
}

.search-bar input::placeholder {
    color: #6b6b8d;
}

/* Currency list container */
#currencyList {
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    max-height: calc(75vh - 140px);
    padding: 8px 12px 16px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Custom scrollbar for currency list */
#currencyList::-webkit-scrollbar {
    width: 6px;
}

#currencyList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

#currencyList::-webkit-scrollbar-thumb {
    background: rgba(249, 96, 211, 0.3);
    border-radius: 3px;
}

#currencyList::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 96, 211, 0.5);
}

 
/* Dropdown Arrow Icon */
.dropdown-icon {
    display: inline-block !important;
    font-size: 10px;
    color: #8a8fbd;
    margin-left: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.crypto-info:hover .dropdown-icon {
    color: #F960D3;
    transform: translateY(1px);
}


/* =============================================
   CRYPTO NAME & SYMBOL DISPLAY
   ============================================= */
.crypto-name-symbol {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.crypto-name-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.crypto-name {
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    color: #ffffff;
}

.crypto-symbol {
    font-size: 14px;
    font-weight: bold;
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 50px;
    color: #333;
    margin-left: 10px; /* Adjust spacing between name and symbol */
    white-space: nowrap; /* Prevent text from wrapping */
}
.crypto-coin{
    font-weight: bold;
}

/* Network Badge */
.crypto-network {
    display: inline-block;
    background-color: #7f8c8d;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    vertical-align: middle;
    transition: background-color 0.3s ease;
}

/* ============================================
   DROPDOWN CURRENCY LIST ITEMS - MODERN DESIGN
   ============================================ */

/* Individual dropdown item */
.dropdown-item {
    cursor: pointer;
    padding: 12px 14px;
    margin: 4px 0;
    border-radius: 12px;
    transition: all 0.2s ease;
    background: transparent;
    border: 1px solid transparent;
}

.dropdown-item:hover {
    background: linear-gradient(135deg, rgba(249, 96, 211, 0.08) 0%, rgba(155, 81, 224, 0.08) 100%);
    border-color: rgba(249, 96, 211, 0.15);
    transform: translateX(4px);
}

.dropdown-item:active {
    transform: translateX(4px) scale(0.99);
}

/* Crypto info container in dropdown */
.dropdown-crypto-info {
    display: flex;
    align-items: center;
    border-bottom: none;
    gap: 12px;
}

/* Logo image styling */
.dropdown-crypto-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
    object-fit: cover;
}

.dropdown-item:hover .dropdown-crypto-info img {
    transform: scale(1.08);
}

/* Text container next to logo */
.dropdown-crypto-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Coin name and network badge container */
.dropdown-crypto-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Coin ticker/symbol */
.dropdown-crypto-coin {
    font-weight: 600;
    font-size: 15px;
    color: #ffffff;
    letter-spacing: 0.3px;
}

/* Network badge */
.dropdown-crypto-network {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(127, 140, 141, 0.3) 0%, rgba(127, 140, 141, 0.15) 100%);
    color: rgba(255, 255, 255, 0.9);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

/* Full name of the coin */
.dropdown-crypto-fullname {
    font-size: 13px;
    color: #8a8fbd;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loading state for list */
#currencyList .loading-placeholder {
    text-align: center;
    padding: 40px 20px;
    color: #6b6b8d;
    font-size: 14px;
}

/* Empty state */
#currencyList .no-results {
    text-align: center;
    padding: 40px 20px;
    color: #6b6b8d;
}

#currencyList .no-results i {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.crypto-network-badge {
    font-size: 12px;
    color: #555;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: auto; /* Push it to the right */
    font-weight: bold;
}


/* Section headers for All, New, Gainers, etc. */
.section-header {
    font-size: 14px;
    font-weight: bold;
    color: #888;
    margin: 20px 0 10px 0;
}

/* Navigation for Popular Cryptos */
.nav-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* Ensure buttons do not overflow */
.nav-tabs button {
    flex: 1;  /* Make the buttons take equal width */
    background-color: #f4f4f9;
    padding: 8px 12px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

.nav-tabs button:hover, 
.nav-tabs button.active {
    background-color: #eaeaea;
    font-weight: bold;
}

  /* Operation Details */
.operation-details {
    margin-top: 30px;
    text-align: center; /* Center the text */
}

.operation-info {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center;     /* Center items vertically */
    flex-direction: column;  /* Stack the items vertically */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* =============================================
   MIN/MAX AMOUNT WARNINGS - Lower Left Position
   ============================================= */
.min-amount-warning,
.max-amount-warning {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: linear-gradient(135deg, #2d1f4e 0%, #1a1234 100%);
    border: 1px solid rgba(249, 96, 211, 0.5);
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(249, 96, 211, 0.3);
    z-index: 100;
    transition: all 0.2s ease;
}

/* Click indicator */
.min-amount-warning::after,
.max-amount-warning::after {
    content: ' ← Click to set';
    font-size: 10px;
    opacity: 0.7;
    margin-left: 6px;
}

/* Show the warning messages when triggered */
.min-amount-warning.show,
.max-amount-warning.show {
    display: inline-block;
}

/* Hover effect - click hint */
.min-amount-warning:hover,
.max-amount-warning:hover {
    background: linear-gradient(135deg, #3d2f5e 0%, #2a1a44 100%);
    border-color: rgba(249, 96, 211, 0.8);
    box-shadow: 0 6px 20px rgba(249, 96, 211, 0.4);
    transform: translateY(-1px);
}


.recipient-address {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* Add spacing between sections */
}

/* Destination Address - Clean row layout */
.recipient-address2 {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-top: 12px;
    padding: 18px 24px;
    background: linear-gradient(145deg, #2a2354, #1e1934);
    border: 1px solid rgba(249, 96, 211, 0.15);
    border-radius: 14px;
}

/* Remove the pseudo-element - using real text now */
.recipient-address2::before {
    display: none !important;
}

/* Destination label - selectable text */
.recipient-address2 .destination-label {
    display: block !important;
    font-size: 13px;
    font-weight: 500;
    color: #a9a6c4;
    white-space: nowrap;
    user-select: text;
    cursor: text;
}

.recipient-address2 .address-box {
    display: block !important;
    background: rgba(26, 20, 50, 0.5);
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(138, 143, 189, 0.1);
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    color: #ffffff;
    word-break: break-all;
    flex: 1;
    text-align: left;
    line-height: 1.4;
    user-select: all;
    cursor: text;
}

.recipient-address2 .address-box span {
    display: inline !important;
    user-select: all;
}
/* .crypto-logo-small {
    width: 24px;
    height: 24px;
    margin-left: 8px;
    margin-right: 8px;
} */



.recipient-address {
    font-weight: bold;
    color: white;
}



.address-box {
    background-color: #292354;
    padding: 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    position: relative;
}

.address-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.wallet-help {
    font-size: 12px;
    color: #0073e6;
    text-decoration: none;
    margin-left: 5px;
}

.wallet-help:hover {
    text-decoration: underline;
}

.address-box input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #333;
}

.address-box input[type="text"]::placeholder {
    color: #999;
    font-style: italic;
}


/* Recipient and Refund Address Styling */
.address-box {
    background-color: #292354; /* Light blue-gray background similar to screenshot */
    padding: 15px 20px; /* Add padding for more space inside the input box */
    border-radius: 10px; /* Rounded corners */
    display: flex;
    flex-direction: column; /* Stack the inputs vertically */
    gap: 10px; /* Space between inputs */
    margin-top: 20px;
}

.address-box input {
    background-color: #eef2f7; /* Lighter background color inside the box */
    border: 1px solid #d0d7e2; /* Soft border color */
    border-radius: 8px;
    padding: 12px;
    color: #333;
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't exceed the input width */
}

.address-box input::placeholder {
    color: #b0b8c1; /* Lighter color for placeholder text */
}

.address-box input:focus {
    outline: none;
    border-color: #99c4e0; /* Slightly darker border on focus */
    box-shadow: 0 0 5px rgba(153, 196, 224, 0.3); /* Soft shadow on focus */
}



  /* Transaction Hash Box */
.transaction-hash-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .transaction-hash-details {
    display: flex;
    align-items: center;
  }
  
  .transaction-hash-text {
    font-weight: bold;
    color: #34495e;
    margin-right: 10px;
  }
  
/* Style for question mark icon */
.info-icon2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    color: #8a8fbd; /* Color for question mark */
    font-weight: bold;
    cursor: pointer;
}

/* Tooltip style */
.tooltip-text {
    visibility: hidden;  /* Hidden by default */
    opacity: 0;  /* Hidden by default */
    width: 220px;
    background-color: #292354;
    color: #ffffff;
    text-align: center;
    border-radius: 5px;
    padding: 8px;
    position: absolute;
    bottom: 120%; /* Position above the icon */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 12px;
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition */
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Show tooltip only on hover */
.info-icon2:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


  
  .need-help {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #2980b9;
    cursor: pointer;
  }
  
  .need-help i {
    margin-right: 5px;
    font-size: 20px;
  }
  
  .need-help span {
    font-size: 16px;
  }
  
  #currencyList {
    overflow-y: auto;
    flex-grow: 1;
  }
  
  /* Animation */
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .transaction-status-wrapper {
    max-width: 760px;
    margin: auto;
  }

  .transaction-status-wrapper::after {
    content: "";
    display: table;
    clear: both;
  }

  .exchange-container2 {
    background: linear-gradient(145deg, #1a1630, #141024);
    padding: 40px 48px;
    border-radius: 24px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(138, 143, 189, 0.08);
    width: 100%;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
    overflow: visible;
}

.exchange-container2 h2 {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}

/* Transaction Status Title - Big & Bold */
.exchange-container2 h2#transaction-status-title {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 1px;
    margin-bottom: 32px;
}


  /* Progress tracking steps */
/* Exchange Container */
/* Exchange Container */

  
  .transaction-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 800px; /* Keep transaction details constrained */
    margin-left: auto;
    margin-right: auto;
  }

.transaction-info {
    text-align: left;
    width: 55%;
}



/* General container for the progress */
/* Progress Container - Modern - restructured with separate track */
.progress-container {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    margin-bottom: 32px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Steps row - contains labels and icons */
.progress-steps {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

/* Track row - contains line and dots together */
.progress-track {
    position: relative;
    width: 100%;
    height: 20px; /* Height to contain dots */
}

/* Progress line background - centered in track */
.progress-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    right: 10%;
    height: 3px;
    background: rgba(138, 143, 189, 0.25);
    z-index: 0;
    border-radius: 3px;
}

/* Line fill for progress */
.progress-line-active {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    height: 3px;
    width: 0%;
    max-width: 80%;
    background: linear-gradient(90deg, #4caf50, #00e676);
    z-index: 1;
    transition: width 0.5s ease-in-out;
    border-radius: 3px;
}

/* Progress dots - positioned on the track */
.progress-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #3a3560;
    border: 2px solid #3a3560;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s ease;
    box-sizing: content-box;
}

/* Position each dot at 10%, 30%, 50%, 70%, 90% to align with steps */
#dot-awaiting-deposit { left: 10%; }
#dot-confirming { left: 30%; }
#dot-exchanging { left: 50%; }
#dot-sending { left: 70%; }
#dot-finished { left: 90%; }

/* Step styling - just label and icon now */
.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    color: #5a5780;
    text-align: center;
    width: 20%;
    gap: 6px;
}

/* Step label */
.step span {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.2px;
    color: #8a8fbd;
}

/* Icons */
.step > i {
    font-size: 26px;
    color: #5a5780;
    animation: none;
    transform: scale(1);
    filter: none;
    transition: color 0.3s ease;
}

/* Hide old .dot inside steps (backwards compatibility) */
.step .dot {
    display: none;
}

/* Active step - Orange for in-progress */
.step.active {
    color: #f5a623;
}

.step.active > i {
    color: #f5a623;
    animation: spin 1.2s linear infinite;
}

/* Spin animation for active step icon */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.step.active span {
    color: #f5a623;
}

/* Completed step - Icons turn green */
.step.completed {
    color: #4caf50;
}

.step.completed > i {
    color: #4caf50;
    animation: none !important;
    transform: scale(1);
    filter: none;
}

.step.completed span {
    color: #4caf50;
}

/* Progress dot states - active */
.progress-dot.active {
    border-color: #4caf50;
    background: #4caf50;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
    animation: dotPulse 1.5s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 16px rgba(76, 175, 80, 0.7); }
}

/* Progress dot states - completed */
.progress-dot.completed {
    border-color: #4caf50;
    background: #4caf50;
}

/* Progress dot states - failed */
.progress-dot.failed {
    border-color: #FA113D;
    background: #FA113D;
}

/* Failed step */
.step.failed {
    color: #FA113D;
}

/* Legacy support - hide old dots in steps */
.step.failed .dot,
.step.active .dot,
.step.completed .dot {
    display: none;
}

/* For backward compatibility with old .dot selectors */
.step .dot {
    border-color: #FA113D;
    background: #FA113D;
}

.step.failed > i {
    color: #FA113D;
}

.step.failed span {
    color: #FA113D;
}

/* Legacy support - keep old class */
/* 
.step.in-progress {
    color: #ffa500;
}
*/

/* Completed and active dots */
/* Animation for the progress line */
@keyframes fillProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* Pulse animation for active step */
@keyframes stepPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); }
    50% { box-shadow: 0 0 16px rgba(76, 175, 80, 0.7); }
}

.step.active .dot {
    animation: stepPulse 1.5s ease-in-out infinite;
}

.recipient-info {
    margin-top: 20px;
    text-align: left;
}

.recipient-info p {
    margin-bottom: 5px;
}


/* Responsive Styles */
@media only screen and (max-width: 600px) {

    /* Prevent horizontal overflow - fixes white line issue */
    html, body {
        overflow-x: hidden;
    }

    /* Force #exchanger to break out of any parent padding */
    #exchanger {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding: 0;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Full width exchange container on mobile - with rounded design */
    .exchange-container {
    width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        max-width: none;
        border-radius: 20px;
 }

 .exchange-container2 {
    width: 100%;
        margin: 0;
        padding: 16px 20px;
        box-sizing: border-box;
        max-width: none;
    }

    /* Tab navigation mobile */
    .tab-navigation {
        border-radius: 20px 20px 0 0;
        padding: 0;
    }

    .tab {
        height: 48px;
        font-size: 13px;
    }

    .crypto-exchange {
        border-top-left-radius: 20px;
        border-bottom-right-radius: 16px;
    }

    /* Exchange content padding */
    .exchange-content {
        padding: 28px 20px 24px !important;
        margin-top: 0 !important;
    }

    /* Adjust headings */
    .exchange-container h2,
    .exchange-container2 h2 {
        font-size: 18px;
    }

    /* Crypto box - improved mobile layout (2-row design) */
    .crypto-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        margin-bottom: 8px;
        border-radius: 16px;
        gap: 0;
        position: relative;
    }

    /* Label inside the box on mobile */
    .crypto-box .input-label {
        position: static;
        width: auto;
        margin: 0 0 10px 0;
        padding: 0;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #8a8fbd;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Input and selector row */
    .crypto-box .input-container {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }

    /* Crypto selector - absolute position at right */
.crypto-box .crypto-info {
        position: absolute;
        right: 14px;
        bottom: 14px;
    order: 2;
        flex: 0 0 auto;
        flex-shrink: 0;
        padding: 6px 10px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.05);
    }

    .crypto-info img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
}

    /* Amount input mobile - full width with room for selector */
.crypto-amount-input {
        width: calc(100% - 120px);
    box-sizing: border-box;
        font-size: 20px;
        padding: 4px 0;
        text-overflow: ellipsis;
    }

    /* Loading spinner mobile - centered where input value appears */
    .crypto-box.loading::before {
        left: 14px;
        top: auto;
        bottom: 18px;
        margin: 0;
        width: 20px;
        height: 20px;
    }

    .crypto-box.loading::after {
        left: 10px;
        top: auto;
        bottom: 14px;
        margin: 0;
        width: 28px;
        height: 28px;
    }

    /* Crypto name and network badges mobile */
    .crypto-name {
        font-size: 14px;
    }

    .crypto-network {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 8px;
    }

    .dropdown-icon {
        display: inline-block !important;
        font-size: 10px;
        margin-left: 6px;
        color: #8a8fbd;
    }

    /* Swap button container */
    .swap-container {
        margin: 12px 0;
    }

    .separator-container {
        margin: 8px 0;
    }

    .swap-icon-button {
        width: 38px;
        height: 38px;
    }

    .swap-svg-icon {
        width: 16px;
        height: 16px;
    }

    /* Recipient wallet section */
    .address-label-modern {
        font-size: 12px;
    }

    .payout-input-wrapper {
        padding: 10px 12px;
        border-radius: 14px;
    }

    .payout-input-wrapper input {
        font-size: 14px;
    }

    .wallet-icon {
        width: 16px;
        height: 16px;
    }

    /* Exchange button mobile */
    .swap-button {
        padding: 14px;
        font-size: 15px;
        border-radius: 14px;
        margin-top: 16px;
    }

    /* Help link */
    .help-link-container {
        margin-top: 14px;
    }

    .help-link {
        font-size: 13px;
    }

    /* Warning messages mobile */
    .min-amount-warning,
    .max-amount-warning {
        font-size: 11px;
        padding: 4px 8px;
    }


    /* Progress container - Mobile vertical layout (centered) */
    .progress-container {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0 20px;
        margin: 24px auto;
        max-width: 280px;
    }

    .progress-container .step {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        padding-bottom: 0;
        border-left: none;
        margin-left: 0;
        padding-left: 0;
        position: relative;
    }

    .progress-container .step:last-child {
        border-left-color: transparent;
    }

    .progress-container .step .dot {
        display: none;
    }

    .progress-container .step > i {
        order: 1;
        margin-bottom: 0;
        font-size: 24px;
        width: 28px;
        text-align: center;
    }

    .progress-container .step span {
        order: 2;
        margin-top: 0;
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        flex: 1;
    }

    /* Mobile step styles - no left border */
    .progress-container .step.completed,
    .progress-container .step.active {
        border-left: none;
    }

    .progress-line,
    .progress-line-active {
        display: none;
    }

    /* Adjust buttons */
    .swap-button {
        font-size: 16px;
        padding: 12px;
    }

    /* Adjust the deposit box */
    .deposit-box {
        width: 100%;
        box-sizing: border-box; /* Include padding in width */
    }

     /* Adjust QR code container size */
     .qr-code-container {
        width: 150px;  /* Set a fixed width */
        height: 150px; /* Set a fixed height */
        padding: 5px;  /* Reduce padding */
        margin: 0 auto; /* Center the container */
    }

    .qr-code-wrapper {
        width: 100%;
        height: 100%;
    }

    #qrCodeContainer canvas {
        width: 100% !important;
        height: auto !important;
    }

    /* Adjust operation details */
    .operation-details {
        text-align: left;
        width: 100%;
        box-sizing: border-box; /* Include padding in width */
    }

    /* Adjust input containers */
    .input-container2,
    .address-box-modern {
        width: 100%;
        box-sizing: border-box; /* Include padding in width */
    }

    /* ============================================
       MOBILE TXS PAGE - Compact Layout
       ============================================ */
    
    /* Transaction ID box - very compact */
    .transaction-id-box {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }

    .transaction-id-box .transaction-id-content {
        flex-direction: row;
        align-items: center;
        width: auto;
        box-sizing: border-box;
        justify-content: flex-start;
        gap: 8px;
    }
    
    .transaction-id-box .exchange-id {
        font-size: 11px !important;
        margin: 0 !important;
    }
    
    .transaction-id-box .exchange-id span {
        font-size: 10px !important;
    }
    
    .transaction-id-box .copy-button {
        padding: 4px !important;
    }
    
    .transaction-id-box .copy-button svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Hide need-help on mobile to save space */
    .transaction-id-box .need-help {
        display: none;
    }
    
    /* Transaction status title - smaller on mobile */
    .exchange-container2 h2#transaction-status-title {
        font-size: 24px !important;
        margin-bottom: 16px !important;
    }
    
    /* Send deposit info - compact */
    .send-deposit-info {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }
    
    .send-deposit-text {
        font-size: 12px !important;
    }
    
    .send-deposit-amount {
        font-size: 18px !important;
    }
    
    /* Deposit box - compact */
    .deposit-box {
        margin-top: 12px !important;
        margin-bottom: 12px !important;
    }
    
    .deposit-address-text {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    /* QR Code smaller on mobile */
    .qr-code-container {
        padding: 10px !important;
    }
    
    .qr-code-wrapper {
        width: 120px !important;
        height: 120px !important;
    }
    
    #qrCodeContainer {
        width: 120px !important;
        height: 120px !important;
    }
    
    #qrCodeContainer canvas,
    #qrCodeContainer img {
        width: 120px !important;
        height: 120px !important;
    }
    
    /* Crypto address compact */
    .crypto-address {
        margin-top: 12px !important;
        padding: 10px 12px !important;
    }
    
    .crypto-address p,
    p#cryptoAddress {
        font-size: 12px !important;
    }
    
    /* ============================================
       MOBILE PROGRESS - Compact Horizontal Pills
       ============================================ */
    .progress-container {
        flex-direction: column !important;
        padding: 12px 8px !important;
        margin: 12px 0 !important;
    }
    
    /* Hide the track (line and dots) on mobile */
    .progress-track {
        display: none !important;
    }
    
    /* Steps become horizontal pill row */
    .progress-steps {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        margin-bottom: 0 !important;
    }
    
    .progress-container .step {
        flex-direction: row !important;
        width: auto !important;
        gap: 0 !important;
        padding: 6px 10px !important;
        background: rgba(58, 53, 96, 0.5) !important;
        border-radius: 20px !important;
    }
    
    .progress-container .step .dot {
        display: none !important;
    }
    
    .progress-container .step span {
        display: none !important;
    }
    
    .progress-container .step > i {
        font-size: 16px !important;
        margin: 0 !important;
    }
    
    /* Active step pill - highlighted */
    .progress-container .step.active {
        background: rgba(245, 166, 35, 0.2) !important;
        border: 1px solid rgba(245, 166, 35, 0.4) !important;
    }
    
    /* Completed step pill */
    .progress-container .step.completed {
        background: rgba(76, 175, 80, 0.2) !important;
        border: 1px solid rgba(76, 175, 80, 0.3) !important;
    }
    
    /* Payout box - move up and compact */
    .payout-merged-box {
        margin-top: 12px !important;
    }
    
    .payout-receive-row,
    .payout-address-row {
        padding: 12px 14px !important;
    }
    
    .payout-label {
        font-size: 12px !important;
    }
    
    .payout-value .operation-amount {
        font-size: 16px !important;
    }
    
    .payout-address {
        font-size: 10px !important;
    }
    
    .payout-note {
        font-size: 10px !important;
        padding: 8px 12px 4px !important;
    }
    
    /* Security note compact */
    .security-note {
        font-size: 10px !important;
        margin-top: 6px !important;
    }

    /* ============================================
       Mobile TXS priority layout
       ============================================ */
    .transaction-status-wrapper {
        margin-top: 8px;
        padding-top: 0;
    }

    .transaction-id-box {
        padding: 6px 10px !important;
        margin: 0 0 6px !important;
        border-radius: 8px !important;
        align-items: center;
        gap: 6px;
    }

    .transaction-id-box .transaction-id-content {
        gap: 6px;
    }

    .transaction-id-box .exchange-id {
        font-size: 10px !important;
    }

    .transaction-id-box .exchange-id span {
        font-size: 9px !important;
    }

    .transaction-id-box .copy-button {
        padding: 3px !important;
    }

    .transaction-id-box .copy-button svg {
        width: 11px !important;
        height: 11px !important;
    }

    .exchange-container2 {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .exchange-container2 h2#transaction-status-title {
        order: 1;
        margin-bottom: 6px !important;
    }

    .payout-merged-box {
        order: 6;
        margin-top: 5px !important;
    }

    .send-deposit-info {
        order: 3;
    }

    .deposit-box {
        order: 4;
    }

    .progress-container {
        order: 5;
    }

    /* Vertical status list */
    .progress-container {
        flex-direction: column !important;
        padding: 12px 0 !important;
        margin: 10px 0 4px !important;
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
    }

    /* Hide track on mobile vertical layout */
    .progress-track {
        display: none !important;
    }

    /* Steps become vertical list */
    .progress-steps {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
    }

    .progress-container .step {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
        padding: 6px 8px !important;
        border-left: 3px solid transparent;
    }

    .progress-container .step > i {
        font-size: 20px !important;
        width: 24px;
        text-align: center;
        margin: 0;
    }

    .progress-container .step span {
        display: block !important;
        font-size: 12px !important;
        text-align: left !important;
    }

    .progress-container .step.active {
        border-left-color: #f5a623 !important;
    }

    .progress-container .step.completed {
        border-left-color: #4caf50 !important;
    }

    /* ============================================
       MOBILE POPUP - Compact Card Style (Not Fullscreen)
       ============================================ */
    
    .popup-overlay {
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }
    
    .popup {
        width: 100%;
        max-width: 360px;
        max-height: 65vh;
        border-radius: 20px;
        transform: scale(0.9) translateY(30px);
        opacity: 0;
        margin: auto;
    }
    
    .popup-overlay.active .popup {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    
    .popup-header {
        padding: 16px 18px 14px;
        position: relative;
    }

    /* Mobile drag handle indicator */
    .popup-header::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 3px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 2px;
    }
    
    .popup-header h2 {
        font-size: 15px;
        margin-top: 4px;
    }
    
    .close-popup {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
    
    .search-bar {
        margin: 10px 14px;
        padding: 10px 12px;
        border-radius: 12px;
    }
    
    .search-bar input {
        font-size: 14px;
    }

    .search-bar i {
        font-size: 13px;
        margin-right: 10px;
    }

    #currencyList {
        max-height: calc(65vh - 120px);
        padding: 4px 8px 16px;
    }
    
    .dropdown-item {
        padding: 10px 10px;
        margin: 3px 0;
        border-radius: 10px;
    }

    .dropdown-crypto-info {
        gap: 10px;
    }
    
    .dropdown-crypto-info img {
        width: 34px;
        height: 34px;
    }
    
    .dropdown-crypto-coin {
        font-size: 13px;
    }

    .dropdown-crypto-network {
        font-size: 9px;
        padding: 2px 6px;
    }
    
    .dropdown-crypto-fullname {
        font-size: 11px;
    }
    
    /* Custom scrollbar for mobile */
    #currencyList::-webkit-scrollbar {
        width: 4px;
    }
    .dot{
        display: none;
    }

    /* Payout Merged Box - Mobile */
    .payout-merged-box {
        margin-top: 20px;
    }
    
    .payout-receive-row,
    .payout-address-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
    }
    
    .payout-label {
        font-size: 13px;
        margin-right: 0;
    }
    
    .payout-value .operation-amount {
        font-size: 16px;
    }
    
    .payout-address {
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        width: 100%;
        letter-spacing: 0.2px;
    }
    
    .payout-divider {
        margin: 0 12px;
    }

    /* Ensure other containers don't exceed viewport width */
    .operation-details,
    .progress-container,
    .deposit-box,
    .qr-code-container,
    .transaction-id-box,
    .transaction-id-box .transaction-id-content,
    .address-box-modern,
    .input-container2 {
        box-sizing: border-box; /* Include padding and border in the element's total width */
    }

    .swap-icon-button {
        width: 50px; 
        height: 50px; 
        background-color: rgba(255, 255, 255, 0.1); 
    }

    .swap-svg-icon {
        width: 20px; /* Adjust icon size */
        height: 20px;
    }
}

/* ============================================
   TABLET STYLES (601px - 768px) - Exchange Box
   ============================================ */
@media screen and (min-width: 601px) and (max-width: 768px) {
    .exchange-content {
        padding: 30px 24px 24px !important;
    }
}

/* ============================================
   TABLET POPUP STYLES (601px - 768px)
   ============================================ */
@media screen and (min-width: 601px) and (max-width: 768px) {
    .popup-overlay {
        padding: 30px;
    }

    .popup {
        max-width: 420px;
        max-height: 70vh;
        border-radius: 22px;
    }

    .popup-header {
        padding: 18px 22px 14px;
    }

    .popup-header h2 {
        font-size: 17px;
    }

    .search-bar {
        margin: 14px 18px;
        padding: 11px 14px;
    }

    #currencyList {
        max-height: calc(70vh - 130px);
        padding: 6px 12px 18px;
    }

    .dropdown-item {
        padding: 11px 12px;
    }

    .dropdown-crypto-info img {
        width: 38px;
        height: 38px;
    }
}

/* ============================================
   VERY SMALL PHONES (below 380px)
   ============================================ */
@media screen and (max-width: 380px) {

    /* Exchange box for very small phones - full width with rounded corners */
    .exchange-container {
        width: 100%;
        margin: 0;
        border-radius: 16px;
    }

    .exchange-content {
        padding: 24px 16px 20px !important;
        margin-top: 0 !important;
    }

    .tab {
        height: 44px;
        font-size: 12px;
    }

    .crypto-box {
        padding: 12px;
        border-radius: 14px;
    }

    .crypto-box .input-label {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .crypto-amount-input {
        font-size: 18px;
        width: calc(100% - 100px);
    }

    .crypto-box .crypto-info {
        right: 12px;
        bottom: 12px;
        padding: 5px 8px;
    }

    .crypto-info img {
        width: 22px;
        height: 22px;
        margin-right: 5px;
    }

    .crypto-name {
        font-size: 12px;
    }

    .crypto-network {
        font-size: 9px;
        padding: 2px 5px;
    }

    .swap-icon-button {
        width: 34px;
        height: 34px;
    }

    .swap-svg-icon {
        width: 14px;
        height: 14px;
    }

    .payout-input-wrapper {
        padding: 8px 10px;
    }

    .payout-input-wrapper input {
        font-size: 13px;
    }

    .swap-button {
        padding: 12px;
        font-size: 14px;
        border-radius: 12px;
    }

    /* Popup styles for very small phones */
    .popup-overlay {
        padding: 12px;
    }

    .popup {
        max-width: 100%;
        max-height: 70vh;
        border-radius: 16px;
    }

    .popup-header {
        padding: 14px 14px 10px;
    }

    .popup-header h2 {
        font-size: 14px;
    }

    .close-popup {
        width: 26px;
        height: 26px;
        font-size: 18px;
    }

    .search-bar {
        margin: 8px 10px;
        padding: 8px 10px;
        border-radius: 10px;
    }

    .search-bar input {
        font-size: 13px;
    }

    #currencyList {
        max-height: calc(70vh - 110px);
        padding: 2px 6px 12px;
    }

    .dropdown-item {
        padding: 8px 8px;
        margin: 2px 0;
        border-radius: 8px;
    }

    .dropdown-crypto-info img {
        width: 30px;
        height: 30px;
    }

    .dropdown-crypto-coin {
        font-size: 12px;
    }

    .dropdown-crypto-network {
        font-size: 8px;
        padding: 2px 5px;
    }

    .dropdown-crypto-fullname {
        font-size: 10px;
    }
}