.dashboard-card {
    border-radius: var(--br-16);
    background-color: var(--bg-light-6);
    position: relative;
    overflow: hidden;
    padding: 24px;
    transition: all 0.2s ease-in-out;

    @include m {
        padding: .6rem;
    }

    &:hover {
        background-color: var(--bg-light-7);
    }

    .uk-icon {
        color: var(--primary-color);
    }

    .card-icon {

        @include m {
            width: 26px;
            margin: 0 auto;
            margin-bottom: 0 !important;
        }
    }

    .card-title {
        margin-top: 20px;
        margin-bottom: 0 !important;
        font-size: 1rem;
        color: var(--secondary-color);
        font-weight: 600;

        @include m {
            font-weight: 500;
            margin-bottom: 0 !important;
            margin-top: 0;
        }
    }
    .card-description {
        counter-reset: var(--color-text);
    }
}

/* Page Header */
.page-header {
    background: linear-gradient(270deg, var(--primary-color) 0%, var(--primary-color-3) 100%);
    color: white;
    border-radius: var(--br-16);
    position: relative;
    overflow: hidden;
    padding: 24px;

    @include s {
        padding: 1rem;
    }

    .uk-button-default {
        border-color: #fff;
        color: #fff;

        &:hover {
            opacity: 0.7;
        }
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--br-8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;

    @include s {
        width: 50px;
        height: 50px;
    }
}

.header-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #fff;

    @include s {
        font-size: 1.4rem;
    }
}

.header-subtitle {
    font-size: 0.875rem;
}

.header-left {
    @include s {
        display: grid;
    }
}

.header-balance {
    text-align: right;
    @include s {
        text-align: left;
    }
}

.balance-amount {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
}

.balance-label {
    color: rgba(255, 255, 255, 0.7);
}

/* Filter & Search */
.filter-section {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--br-16);
    padding: 26px 24px;

    @include s {
        padding: 1rem;
    }
}

.filter-label {
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 6px;
    font-size: 0.875rem;
    display: block;
}

/* Transaction List */
.user-profile-container {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--br-16);
    padding: 26px 24px;

    @include s {
        padding: 1rem;
    }
}

.transactions-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.transaction-item {
    padding: 16px;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-left: -16px;
    margin-right: -16px;
    border-radius: var(--br-8);

    &:hover {
        background-color: var(--bg-light-6);
    }
}

.transaction-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.transaction-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include s {
        display: grid;
    }
}

.transaction-left {
    display: flex;
    align-items: center;
    gap: 1rem;

    @include s {
        display: grid;
    }
}

.transaction-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.transaction-icon.deposit {
    background-color: #5cb85c;
}

.transaction-icon.withdraw {
    background-color: #e5ac00;
}

.transaction-icon.payment {
    background-color: #b1884f;
}

.transaction-icon.refund {
    background-color: #433623;
}

.transaction-details h4 {
    margin: 0;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
}

.transaction-details p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.transaction-meta {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

.transaction-right {
    text-align: right;

    @include s {
        text-align: inherit;
        margin-top: 20px;
    }
}

.transaction-amount {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.transaction-amount.positive {
    color: var(--color-secondary);
}

.transaction-amount.negative {
    color: #ce4e50;
}

.session-status,
.transaction-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
}

.session-status {
    display: inline-flex;
    background-color: var(--bg-light-12);
    align-items: center;
}

.completed,
.status-completed {
    background: rgba(81, 207, 102, 0.1);
    color: #5cb85c;
}

.upcoming,
.status-pending {
    background: #fff2cc;
    color: #e5ac00;
}

.cancelled,
.status-failed {
    background: #f9ebeb;
    color: #ce4e50;
}



/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-light);
}

.empty-icon {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Modal-dialog */
.uk-modal-dialog {
    padding: 24px;
    border-radius: var(--br-8);
}

/* My Sessions */
.sessions-list {
    display: grid;
    gap: 16px;
}

.session-id {
    color: var(--text-color);
}
.session-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.0225rem;
}
.session-item {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--br-16);
    padding: 26px 24px;

    @include s {
        padding: 1rem;
    }
}

.session-item-upcoming {
    border: 3px solid var(--bg-light-11);
}

.session-note {
    margin-top: 20px;
    background-color: var(--bg-light-7);
    border: 1px solid var(--border-color);
    border-radius: var(--br-8);
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    color: var(--primary-color);
}

.detail-item {
    background-color: var(--bg-light-2);
    border: 1px solid var(--border-color);
    border-radius: var(--br-8);
    padding: 24px 12px;
    text-align: center;

    .detail-label {
        text-transform: uppercase;
        color: var(--color-text);
        font-weight: 600;
        font-size: 0.75rem;
    }

    .detail-value {
        font-size: 1rem;
        font-weight: 600;
        color: var(--secondary-color);
    }
}

.session-actions .uk-flex {
    @include s {
        display: grid;
    }
}

/* filter-tabs */
.filter-tabs {
    justify-content: space-between;
    background-color: var(--bg-light-3);
    padding: 24px;
    border-radius: var(--br-8);

    @include s {
        padding: 1rem;
    }

    .uk-tab {
        margin: 0;
        > * {
            padding-left: 0;
        }

        &:before {
            display: none;
        }

        > li {
            flex: 1;
            text-align: center;

            @include s {
                flex: auto;
            }

            a {
                font-weight: 600;
                color: var(--secondary-color);
                text-transform: capitalize;
                padding: 8px 12px;
                transform: all 0.2s ease-in-out;
            }
        }

        .uk-active {
            a {
                background-color: var(--secondary-color);
                color: #fff;
                border-radius: var(--br-8);
                border: none;
            }
        }
    }
}

/* Star Rating Styles */
.star-rating {
    display: flex;
    gap: 4px;
    align-items: center;
}

.star {
    font-size: 24px;
    color: #ffc107; /* Gold color for filled stars */
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.star.empty {
    color: #e0e0e0; /* Light gray for empty stars */
}

.star:hover {
    transform: scale(1.1);
}

/* Interactive rating hover effects */
.rating-section .star-rating .star:hover,
.rating-section .star-rating .star:hover ~ .star {
    color: #e0e0e0; /* Reset following stars on hover */
}

.rating-section .star-rating .star:hover {
    color: #ffc107; /* Highlight hovered star */
}

/* Hover effect for rating selection */
.rating-section .star-rating:hover .star {
    color: #e0e0e0; /* Reset all on hover */
}

.rating-section .star-rating .star:hover,
.rating-section .star-rating .star:hover ~ .star {
    color: #e0e0e0;
}

.rating-section .star-rating .star:hover {
    color: #ffc107;
}

/* Fix the hover logic with nth-child selectors */
.rating-section .star-rating:hover .star:nth-child(1):hover,
.rating-section .star-rating:hover .star:nth-child(1):hover ~ .star {
    color: #e0e0e0;
}

.rating-section .star-rating:hover .star:nth-child(1):hover {
    color: #ffc107;
}

.rating-section .star-rating:hover .star:nth-child(2):hover ~ .star {
    color: #e0e0e0;
}

.rating-section .star-rating:hover .star:nth-child(1):hover,
.rating-section .star-rating:hover .star:nth-child(2):hover {
    color: #ffc107;
}

.rating-section .star-rating:hover .star:nth-child(3):hover ~ .star {
    color: #e0e0e0;
}

.rating-section .star-rating:hover .star:nth-child(1):hover,
.rating-section .star-rating:hover .star:nth-child(2):hover,
.rating-section .star-rating:hover .star:nth-child(3):hover {
    color: #ffc107;
}

.rating-section .star-rating:hover .star:nth-child(4):hover ~ .star {
    color: #e0e0e0;
}

.rating-section .star-rating:hover .star:nth-child(1):hover,
.rating-section .star-rating:hover .star:nth-child(2):hover,
.rating-section .star-rating:hover .star:nth-child(3):hover,
.rating-section .star-rating:hover .star:nth-child(4):hover {
    color: #ffc107;
}

.rating-section .star-rating:hover .star:nth-child(1):hover,
.rating-section .star-rating:hover .star:nth-child(2):hover,
.rating-section .star-rating:hover .star:nth-child(3):hover,
.rating-section .star-rating:hover .star:nth-child(4):hover,
.rating-section .star-rating:hover .star:nth-child(5):hover {
    color: #ffc107;
}

/* Simpler approach using CSS variables and modern selectors */
.rating-section .star-rating {
    --star-color: #e0e0e0;
    --star-hover-color: #ffc107;
    --star-active-color: #ffc107;
}

/* Non-interactive (display only) stars */
.star-rating:not(.rating-section .star-rating) .star {
    cursor: default;
}

.star-rating:not(.rating-section .star-rating) .star:hover {
    transform: none;
}

.rate-is-done .star {
    cursor: inherit;
}

/* Notification  */
.notifications-list {
    display: grid;
    gap: 12px;
}
.notification-item {
    background-color: var(--white);
    border-radius: var(--br-16);
    border-left: 4px solid var(--bg-light-3);
    padding: 24px;
    box-shadow: 0 1px 0 rgba(122, 105, 82, 0.08);

    @include s {
        padding: 1rem;
    }

    .notification-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0;
    }

    .status-badge {
        background-color: var(--bg-light-11);
        padding: 2px 4px;
        border-radius: var(--br-4);
        color: var(--primary-color);
        font-size: 12px;
    }
}

.notification-item.unread {
    background-color: var(--bg-light-3);
    border-left: 4px solid var(--bg-light-11);
}

.notification-type {
    text-transform: capitalize;
    font-weight: 600;
    color: var(--secondary-color);
}

.notification-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.notification-calendar {
    background-color: #3b82f6;
}
.notification-credit-card {
    background-color: #0d9488;
}

.notification-mail {
    background-color: #f97316;
}

.notification-settings {
    background-color: #6b7280;
}

.notification-cancelled {
    background-color: #ce4e50;
}

.uk-notification-message {
    color: #fff;
    border-radius: var(--br-8);
    text-align: center;
    font-size: 1rem;
}

.uk-notification-message-primary {
    background: rgba(112, 104, 92, 0.9);
    color: #fff;
}

.uk-notification-message-success {
    background: rgba(215, 240, 194, 0.9);
    color: #5cb85c;
}

.uk-notification-message-warning {
    background: rgba(240, 228, 194, 0.9);
    color: #433623;
}

.uk-notification-message-danger {
    color: #ce4e50;
    background: rgba(240, 194, 195, 0.9);
}

/* Dashboard */
.phone-change-step {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#otpCode {
    text-align: center;
    font-family: monospace;
}

/* My Wallet */
.wallet-card {
    border-radius: var(--br-16);
    background-color: var(--bg-light-6);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);

    .wallet-icon {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background-color: #fff;
    }

    .total-icon {
        background-color: #5cb85c;
        color: #fff;
    }

    .withdrawable-icon {
        background-color: #e5ac00;
        color: #fff;
    }

    .non-withdrawable-icon {
        background-color: #222;
        color: #fff;
    }

    .wallet-card-title {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 1.2rem;
        color: var(--color-text-2);
    }

    .wallet-balance {
        color: var(--secondary-color);
    }
}

.wallet-card {
    @include s {
        padding: 1.5rem 1rem;
    }
}

.action-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;

    &:hover {
        border-color: var(--border-color-5);
        background-color: var(--bg-light-9);

        .action-icon {
            background-color: #fff !important;
        }
    }

    @include s {
        display: grid;
        padding: 1rem;
    }
}

.action-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;

    @include s {
        margin-right: 0;
        margin-bottom: 1.4rem;
    }
}

.charge-wallet .action-icon {
    background: #edf7ed;
    color: #5cb85c;
}

.withdraw-request .action-icon {
    background: #fff9e5;
    color: #e5ac00;
}

.action-content {
    flex: 1;
}

.action-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--secondary-color);
}

.action-description {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
}
