@media (max-width:992px) {

    .login-page {
        flex-direction: column;
        gap: 40px;
    }

    .login-illustration img {
        max-width: 450px;
    }

    .join-page {
        flex-direction: column;
        gap: 20px;
    }

    .join-illustration img {
        max-width: 420px;
    }

    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .create-card-layout {

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .create-card-sidebar {

        order: 1;
    }

    .order-summary-card {

        order: 2;
    }

    .create-card-illustration {

        display: none;
    }

    .account-layout {

        grid-template-columns: 1fr;
    }

    .account-sidebar {

        grid-template-rows: auto auto;
    }

    .support-card {

        order: 2;
    }

    .wallet-content {

        grid-template-columns: 1fr;

    }

    .quick-amounts {

        grid-template-columns: repeat(2, 1fr);
    }

    .wallet-info-title,
    .wallet-form-title {

        font-size: 26px;
    }

    .wallet-transfer-wrapper {
        flex-direction: column;
    }



    .wallet-proof-wrapper {
        grid-template-columns: 1fr;
    }


    .wallet-proof-card {
        order: 1;
    }

    .wallet-transfer-image-card {
        order: 2;
    }


    .wallet-transfer-image {
        max-width: 100%;
        height: auto;
    }



    .wallet-proof-section {
        padding: 0 15px 20px;
    }


    .statistics-cards-grid {

        grid-template-columns:
            repeat(2, 1fr);
    }


    .monthly-sales-card {

        order: 1;
    }

    .statistics-chart-card {

        order: 2;
    }


    .statistics-details-grid {

        display: grid;

        grid-template-columns: 1fr !important;
    }


    .reports-analytics-grid {

        grid-template-columns: 1fr;
    }
}

@media (max-width:768px) {

    .login-page {
        padding: 20px;
    }

    .login-card {
        padding: 24px;
    }

    .login-title {
        font-size: 24px;
    }

    .login-illustration {
        display: none;
    }

    .join-page {
        padding: 20px;
    }

    .join-illustration {
        display: none;
    }

    .auth-card {
        padding: 24px;
    }

    .join-title {
        font-size: 22px;
    }

    .join-subtitle {
        font-size: 13px;
    }

    .dashboard-header {
        padding: 12px 16px;
    }

    .dashboard-navbar {
        gap: 10px;
    }

    .navbar-actions {
        gap: 10px;
    }

    .logout-btn {
        padding: 0 10px;
        font-size: 12px;
        height: 38px;
        white-space: nowrap;
    }

    .navbar-logo {
        height: 28px;
    }

    .navbar-avatar {
        width: 36px;
        height: 36px;
    }

    .hero-section {

        padding: 20px 16px 12px;
    }

    .hero-heading {

        gap: 8px;
    }

    .hero-icon {

        width: 24px;

        height: 24px;
    }

    .hero-title {

        font-size: 22px;
    }

    .hero-subtitle {

        font-size: 14px;
    }

    .breadcrumb-section {

        margin-bottom: 18px;
    }

    .custom-breadcrumb {

        gap: 6px;
    }

    .custom-breadcrumb a,
    .custom-breadcrumb .active {

        font-size: 13px;
    }

    .dashboard-cards {
        grid-template-columns: 1fr;
        margin: 15px 0;
    }

    .dashboard-card {

        min-height: auto;

        padding: 16px;
    }

    .card-image {

        width: 70px;
    }

    .card-title {

        font-size: 18px;
    }

    .card-description {

        font-size: 13px;

        line-height: 1.6;
    }

    .wallet-summary {
        margin-bottom: 15px;
    }

    .wallet-summary-card {
        flex-wrap: wrap;
        justify-content: right;
        width: 100%;
    }

    /* ==========================
    CARDS
    ========================== */

    .cards-toolbar {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        padding: 16px;
    }

    .toolbar-counter {

        justify-content: center;

        order: 1;
    }

    .toolbar-actions {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        order: 2;
    }

    .toolbar-actions .filter-dropdown {

        flex: 1;

        min-width: 140px;
    }

    .toolbar-actions .filter-btn {

        width: 100%;
    }

    .add-balance-btn,
    .create-card-btn {
        width: 100%;
        height: 50px;
        justify-content: center;
    }

    .cards-table {
        min-width: 700px;
    }

    .cards-table thead th,
    .cards-table tbody td {
        padding: 14px 10px;
    }

    .table-footer {
        flex-direction: column;
        align-items: center;
    }



    .create-card-page {

        padding: 12px;
    }

    .order-summary-card,
    .create-card-sidebar {

        padding: 16px;
    }

    .sidebar-title,
    .summary-title {

        font-size: 22px;
    }

    .section-title {

        font-size: 16px;
    }


    /* ==========================
    CREATE CARD
    ========================== */

    .create-card-page {

        padding: 16px 0;
    }

    .create-card-layout {

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .order-summary-card,
    .create-card-sidebar {

        padding: 18px;
    }

    .sidebar-title,
    .summary-title {

        font-size: 22px;
    }

    .sidebar-description {

        font-size: 14px;
    }

    .section-title {

        font-size: 17px;
    }

    /* Wallet */

    .wallet-widget {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }

    .wallet-btn {

        justify-content: center;
    }

    /* Card Slider */

    .card-options {

        flex-wrap: nowrap;

        overflow-x: auto;

        overflow-y: hidden;

        scroll-snap-type: x mandatory;

        justify-content: flex-start;

        padding-bottom: 10px;
    }

    .card-option {

        flex: 0 0 240px;

        max-width: none;

        scroll-snap-align: center;
    }

    #offersSummary .card-option {

        flex: 0 0 220px;
    }

    /* Scroll buttons */

    .scroll-btn {

        display: none;
    }

    /* Actions */

    .summary-actions {

        flex-direction: column;

        gap: 12px;
    }

    .btn-create-card,
    .btn-cancel {

        width: 100%;
    }

    .summary-actions {

        flex-direction: column;
    }

    .btn-create-card {

        width: 100%;
    }

    .wallet-widget {

        flex-direction: column;

        gap: 12px;
    }

    .account-page {

        padding: 16px 0;
    }

    .support-card,
    .profile-card,
    .account-info-card {

        padding: 20px;
    }

    .support-title {

        font-size: 24px;
    }

    .profile-info h4 {

        font-size: 22px;
    }

    .support-image {

        max-width: 100%;
    }

    .wallet-steps {

        overflow-x: auto;

        padding-bottom: 10px;
    }

    .step-item {

        min-width: 140px;
    }


    .wallet-bank-title {
        font-size: 28px;
    }


    /* ==========================
    WALLET TRANSFER
    ========================== */

    .wallet-transfer {

        padding-bottom: 16px;
    }

    .wallet-transfer-wrapper {

        flex-direction: column;

        gap: 20px;
    }

    .wallet-bank-card {

        order: 1;
    }

    .wallet-transfer-image-card {

        order: 2;
    }

    .wallet-bank-inner {

        padding: 20px;
    }

    .wallet-bank-title {

        font-size: 24px;

        text-align: center;

        margin-bottom: 20px;
    }

    .wallet-bank-info p {

        font-size: 16px;

        margin-bottom: 14px;

        line-height: 1.8;
    }

    .wallet-copy-wrapper {

        margin-top: 16px;
    }

    .wallet-account-input {

        width: 100%;

        height: 48px;

        padding-left: 85px;

        padding-right: 16px;

        text-align: right;

        font-size: 15px;

        direction: ltr;
    }

    .wallet-copy-btn {

        left: 6px;

        top: 50%;

        transform: translateY(-50%);

        min-width: 64px;

        height: 34px;

        padding: 0 10px;

        font-size: 13px;
    }

    .wallet-transfer-note {

        margin-top: 16px;

        padding: 14px;

        font-size: 15px;

        line-height: 1.8;
    }

    .wallet-transfer-image {

        max-width: 320px;

        margin: auto;
    }

    .wallet-primary-btn {

        margin-top: 20px;

        height: 48px;

        font-size: 16px;
    }

    /* ==========================
    WALLET PROOF
    ========================== */

    .wallet-proof-section {

        padding-bottom: 16px;
    }

    .wallet-proof-wrapper {

        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .wallet-proof-card {

        order: 1;

        padding: 20px;
    }

    .wallet-transfer-image-card {

        order: 2;
    }

    .wallet-proof-amount {

        flex-direction: column;

        border: none;

        gap: 12px;

        margin-bottom: 20px;
    }

    .wallet-currency {

        width: 100%;

        height: 48px;

        border-radius: 8px;
    }

    .wallet-proof-card .wallet-account-input {

        width: 100%;

        height: 48px;

        border: 1px solid var(--border-color);

        border-radius: 8px;

        padding: 0 16px;

        text-align: center;

        font-size: 16px;
    }

    .wallet-upload-box {

        min-height: 220px;

        padding: 24px 16px;
    }

    .wallet-upload-box i {

        font-size: 36px;
    }

    .wallet-upload-box h4 {

        font-size: 20px;

        margin-bottom: 8px;
    }

    .wallet-upload-box p {

        font-size: 14px;

        line-height: 1.7;

        max-width: 100%;
    }

    .wallet-transfer-image {

        max-width: 320px;

        margin: auto;
    }

    .wallet-primary-btn {

        margin-top: 20px;
    }

    /* ==========================
    WALLET TRACKING
    ========================== */

    .tracking-section,
    .tracking-history-section {

        padding-bottom: 16px;
    }

    .tracking-card,
    .tracking-history-card {

        padding: 20px;
    }

    .tracking-card-header h2,
    .tracking-history-header h2 {

        font-size: 24px;

        text-align: center;
    }

    .tracking-row {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;

        padding: 14px 0;
    }

    .tracking-search {

        margin-bottom: 14px;
    }

    .tracking-search input {

        height: 48px;

        font-size: 15px;
    }

    .tracking-filters {

        margin-bottom: 16px;
    }

    .tracking-filters .filter-dropdown {

        width: 100%;
    }

    .tracking-filters .filter-btn {

        width: 100%;
    }

    .table-responsive {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .tracking-table {

        min-width: 650px;
    }

    .tracking-table th,
    .tracking-table td {

        white-space: nowrap;

        padding: 14px 12px;
    }

    /* ==========================
REPORTS
========================== */

    .reports-toolbar {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        padding: 16px;
    }

    .reports-filter {

        width: 100%;

        flex-wrap: wrap;

        gap: 10px;

        justify-content: stretch;
    }

    .reports-filter .filter-dropdown {

        flex: 1;

        min-width: 140px;
    }

    .reports-filter .filter-btn {

        width: 100%;
    }

    .download-report-btn {

        width: 100%;

        justify-content: center;
    }

    /* Stats */

    .reports-stats-grid {

        grid-template-columns: 1fr;

        gap: 16px;
    }

    .report-stat-card {

        padding: 18px;

        min-height: auto;
    }

    .report-stat-image img {

        width: 75px;
    }

    .report-stat-value {

        font-size: 24px;
    }

    /* Analytics */

    .reports-analytics-grid {

        grid-template-columns: 1fr;

        gap: 16px;
    }

    .reports-side-cards {

        order: 3;
    }

    .reports-chart-card {

        order: 1;

        min-height: 320px;
    }

    .reports-category-card {

        order: 2;

        min-height: 320px;
    }

    /* Table */

    .reports-table-card {

        overflow-x: auto;
    }

    .reports-table {

        min-width: 760px;
    }

    .reports-table th,
    .reports-table td {

        white-space: nowrap;

        padding: 14px;
    }

    /* ==========================
    TRANSACTIONS
    ========================== */

    .transactions-toolbar {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

        padding: 16px;
    }

    .transactions-toolbar-actions {

        width: 100%;

        display: flex;

        flex-wrap: wrap;

        gap: 10px;
    }

    .transactions-toolbar-actions .filter-dropdown {

        flex: 1;

        min-width: 140px;
    }

    .transactions-toolbar-actions .filter-btn {

        width: 100%;
    }

    .transactions-toolbar-actions .create-card-btn {

        width: 100%;

        justify-content: center;
    }

    .operations-table-section {

        padding-bottom: 16px;
    }

    .operations-table {

        min-width: 700px;
    }

    .operations-table th,
    .operations-table td {

        white-space: nowrap;

        padding: 14px 12px;
    }

    .table-footer {

        flex-direction: column;

        gap: 14px;

        align-items: center;
    }

    .results-count {

        text-align: center;
    }
}

@media (max-width:576px) {

    .statistics-cards-grid {

        grid-template-columns: 1fr;
    }


    .card-option {

        flex: 0 0 210px;

        height: 140px;
    }

    #offersSummary .card-option {

        flex: 0 0 200px;

        height: 180px;
    }

    .card-inner {

        width: 88px;

        height: 62px;
    }

    .card-price {

        font-size: 16px;
    }

    .card-logo-top img {

        width: 46px !important;
    }

    .card-footer-icon {

        width: 46px;

        height: 46px;
    }

    .card-link {

        font-size: 11px;
    }

    /* ==========================
    WALLET TRACKING
    ========================== */

    .tracking-card,
    .tracking-history-card {

        padding: 16px;
    }

    .tracking-card-header h2,
    .tracking-history-header h2 {

        font-size: 22px;
    }

    .tracking-search input {

        height: 46px;

        font-size: 14px;
    }

    .tracking-search i {

        right: 14px;
    }

    .status-review,
    .status-success,
    .status-rejected {

        font-size: 12px;

        padding: 6px 12px;
    }

    .tracking-table {

        min-width: 620px;
    }

    /* ==========================
    TRANSACTIONS
    ========================== */

    .transactions-toolbar {

        padding: 14px;
    }

    .operations-table {

        min-width: 650px;
    }

    .operations-table th,
    .operations-table td {

        padding: 12px 10px;

        font-size: 13px;
    }

    .date-cell {

        gap: 4px;
    }

    .create-card-btn {

        font-size: 15px;
    }
}