*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: "IBM Plex Sans Arabic", sans-serif;
    direction: rtl;
    display: flex;
    background-color: rgb(246, 248, 250);;
}

span, a{display: inline-block;}

a{text-decoration: none;}

img{width: 100%;}

.icon{width: 20px;}

.icon-16{width: 16px;}

.icon-35{width: 35px;}

/* Side Menu */

.side-menu{
    background-color: white;
    width: 240px;
    border: 1px solid #e5e7eb;
    position: fixed;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1000;
    overflow: scroll;
    /* This part taken directly from website */
    scrollbar-width: thin;
    scrollbar-color: #9ca3af4d transparent;
    overflow-y: auto;
}

.menu-container{
    width: 80%;
    margin: auto;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
}

.menu-header{
    display: flex;
    margin-bottom: 30px;
}

.menu-header .logo{
    width: 60px;
    height: 60px;
    background-color: oklch(48.8% .243 264.376);
    border-radius: 18px;
    margin-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-header .logo .logo-icon{
    width: 30px;
}

.menu-name{
    display: flex;
    flex-direction: column;
}

.menu-name h1{
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    color: oklch(0.21 0.034 264.665);
}

.menu-name p{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.446 0.03 256.802);
}

.menu-pages{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-page, .transactions-page, .balance-page, .savings-page, .bills-page{
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: oklch(0.446 0.03 256.802);
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    transition: 250ms;
}

.main-page{
    color: oklch(48.8% .243 264.376);
    background-color: oklch(97% .014 254.604);
    border: 1px solid oklch(93.2% .032 255.585);
    border-radius: 12px;
}

.transactions-page:hover, .balance-page:hover, .savings-page:hover, .bills-page:hover{
    background-color: oklch(98.5% .002 247.839);
    border-radius: 12px;
    transition: 250ms;
}

.menu-shortcuts{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.menu-shortcuts h3{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.373 0.034 259.733);
    margin-bottom: 6px;
}

.send-short, .deposit-short, .bill-short, .invest-short{
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: oklch(0.446 0.03 256.802);
    padding: 12px;
    width: 100%;
    cursor: pointer;
}

.send-icon, .deposit-icon, .bill-icon, .invest-icon{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.send-icon{
    background-color: oklch(97% .014 254.604);
}

.deposit-icon{
    background-color: oklch(98.2% .018 155.826);
}

.bill-icon{
    background-color: oklch(94.6% .033 307.174);
}

.invest-icon{
    background-color: oklch(93.6% .032 17.717);
}

.menu-shortcuts img{
    width: 20px;
}

.button-screen{
    padding: 10px;
    border-radius: 12px;
    background-color: transparent;
    gap: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    transition: 250ms;
}

.button-screen:hover{
    background-color: #00000005;
    transform: translate(2px, 0px);
    transition: 250ms;
}

.general-div{
    margin-right: 270px;
    width: calc(100% - 270px);
}

.general-container{
    width: 97%;
    margin: 30px auto;
}

/* Navbar */

.navbar{
    background-color: #f9fbff;
    border-radius: 16px;
    padding: 12px;
    border: 1px solid #dadbdd80;
    /* All box shadows taken from the website to accurately replicate complicated design */
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

.navbar-container{
    width: 100%;
    margin: 10px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right-navbar{
    width: 25%;
    display: flex;
    justify-content: space-between;
}

.profile-card{
    background-color: white;
    width: 160px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-left: 20px;
    padding: 0px 10px;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #dadbdd80;
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    transition: 250ms;
}

.profile-card:hover{
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    transition: 250ms;
}

.profile-img{
    width: 40px;
    position: absolute;
    left: 15px;
    margin-top: 5px;
}

.profile-img img{
    border-radius: 12px;
}

.profile-details p{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.21 0.034 264.665);
}

.profile-details .account{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.551 0.027 264.364);
}

.notifications, .search{
    width: 40px;
    height: 40px;
    border: 1px solid oklch(92.8% .006 264.531);
    border-radius: 12px;
    background-color: oklch(98.5% .002 247.839);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    transition: 250ms;
}

.notifications{
    position: relative;
}

.notifications .banner{
    position: absolute;
    right: 0;
    top: -10px;
    background-color: oklch(63.7% .237 25.331);
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.search{
    width: 40px;
    height: 40px;
    border: 1px solid oklch(92.8% .006 264.531);
    border-radius: 12px;
    background-color: oklch(98.5% .002 247.839);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    transition: 250ms;
}

.notifications:hover, .search:hover{
    background-color: oklch(96.5% .002 247.839);
    transition: 250ms;
}

.left-navbar{
    display: flex;
    justify-content: space-between;
    width: 23%;
    align-items: center;
}

.left-navbar .menu-header{
    margin: auto;
}

.status{
    width: 80px;
    height: 36px;
    background-color: oklch(98.2% .018 155.826);
    border: 1px solid oklch(96.2% .044 156.743);
    gap: 8px;
    margin-left: -12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: oklch(0.527 0.154 150.069);
}

.status .circle{
    background-color: oklch(72.3% .219 149.579);
    width: 8px;
    height: 8px;
    border-radius: 25px;
}

/* Top Content */

.top-content-container{
    height: 150px;
    margin-top: 40px;
    margin-bottom: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.spending-card, .income-card, .balance-card{
    background-color: white;
    width: 100%;
    border: 1px solid #dadbdd80;
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top-content-container p{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.551 0.027 264.364);
}

.top-content-container .amount{
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    color: oklch(0.21 0.034 264.665);
}

.rate{
    display: flex;
    gap: 5px;
}

.rate p{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.spending-card .rate p{
    color: oklch(0.577 0.245 27.325);
}

.income-card .rate p, .balance-card .rate p{
    color: oklch(0.627 0.194 149.214);
}

.income-card img, .balance-card img{
    transform: rotate(180deg);
}

/* Middle-Bottom Content */

.general-grid{
    display: grid;
    grid-template-areas: 
        "recent-activity latest-transactions latest-transactions"
        "monthly-bills latest-transactions latest-transactions"
        "balance-overview incomeXspending payment-methods"
        "balance-overview account-summary payment-methods";
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.general-grid h3{
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: oklch(0.21 0.034 264.665);
    margin-bottom: 24px;
}

.recent-activity, .monthly-bills, .latest-transactions, .balance-overview, .incomeXspending, .account-summary, .payment-methods{
    background-color: white;
    padding: 24px;
    border: 1px solid #ebe6e7;
    border-radius: 16px;
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
}

/* RECENT ACTIVITY ==========> 111*/

.recent-activity{
    grid-area: recent-activity;
}

.activity-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-1, .notification-2{
    padding: 12px;
    border-left: 4px solid;
    border-radius: 8px;
    gap: 12px;
    display: flex;
    align-items: flex-start;
}

.notification-1{
    background-color: oklch(97% .014 254.604);
    border-color: oklch(62.3% .214 259.815);
}

.new-account{
    background-color: oklch(93.2% .032 255.585);
    width: 36px;
    height: 32px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.details{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.details .description{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.446 0.03 256.802);
    margin-bottom: 12px;
}

.details span{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.551 0.027 264.364);
}

.details .topic{
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.details .topic h4{
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: oklch(0.21 0.034 264.665);
}

.notification-1 .topic p{
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: oklch(0.546 0.245 262.881);
}

.notification-2{
    background-color: oklch(98.2% .018 155.826);
    border-color: oklch(72.3% .219 149.579);
}

.new-card{
    background-color: oklch(96.2% .044 156.743);
    width: 36px;
    height: 32px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notification-2 .topic p{
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: oklch(0.627 0.194 149.214);
}

.see-more{
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid oklch(96.7% .003 264.542);
}

.see-more button{
    width: 100%;
    cursor: pointer;
    text-align: center;
    border: none;
    background-color: white;

    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: oklch(54.6% .245 262.881);
    transition: 250ms;
}

.see-more button:hover{
    color: oklch(48.8% .243 264.376);
    transition: 250ms;
}

/* MONTHLY BILLS ==========> 222*/

.monthly-bills{
    grid-area: monthly-bills;
}

.card-topper{
    display: flex;
    justify-content: space-between;

}

.card-topper span{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: oklch(44.6% .03 256.802);
    cursor: pointer;
    transition: 250ms;
}

.card-topper span:hover{
    color: oklch(21% .034 264.665);
    transition: 250ms;
}

.card-topper svg{
    margin-bottom: -3px;
}

.total-monthly-bills{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
}

.total-monthly-bills p{
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    color: oklch(0.21 0.034 264.665);
}

.total-monthly-bills span{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.551 0.027 264.364);
}

.bills-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.internet, .electricity, .phone, .netflix{
    background-color: oklch(98.5% .002 247.839);
    padding: 12px;
    text-align: center;
    border: 1px solid oklch(96.7% .003 264.542);
    border-radius: 12px;
}

.internet{
    display: flex;
    flex-direction: column;
}

.bills-grid .label{
    width: 32px;
    height: 32px;
    margin: auto;
    margin-bottom: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.internet .label{
    background-color: oklch(93.2% .032 255.585);
}

.bills-grid .bill{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.551 0.027 264.364);
}

.bills-grid .price{
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: oklch(0.21 0.034 264.665);
}

.bills-grid .timeline{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.637 0.237 25.331);
}

.electricity .label{
    background-color: oklch(97.3% .071 103.193);
}

.phone .label{
    background-color: oklch(96.2% .044 156.743);
}

.netflix .label{
    background-color: oklch(93.6% .032 17.717);
}

/* LATEST TRANSACTIONS ==========> 333*/

.latest-transactions{
    grid-area: latest-transactions;
}

.transactions-table{
    width: 100%;
    border-collapse: collapse;
    overflow-x: auto;
}

.transactions-table th, .transactions-table td{
    padding: 16px 8px;
    border-bottom: 1px solid oklch(98.5% .002 247.839);
}

.transactions-table th{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.373 0.034 259.733);
    text-align: right;
}

.transaction-info{
    display: flex;
    align-items: center;
    gap: 12px;
}

.transaction-info .text-details h4{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: oklch(0.21 0.034 264.665);
    margin-bottom: 4px;
}

.transaction-info .text-details p{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.551 0.027 264.364);
}

.avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.badge{
    background-color: oklch(96.2% .044 156.743);
    border-radius: 25px;
    padding: 2px 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;


    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: oklch(44.8% .119 151.328);
}

.date{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.446 0.03 256.802);
}

.badge-completed{
    background-color: oklch(96.2% .044 156.743);
    border-radius: 25px;
    padding: 2px 10px;
    display: inline-flex;
    align-items: center;


    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: oklch(44.8% .119 151.328);
}

.amount{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.amount.positive{
    color: oklch(0.627 0.194 149.214);
}

.tr-4 .badge{
    background-color: oklch(94.6% .033 307.174);
    color: oklch(43.8% .218 303.724);
}

.food, .cart, .fuel, .movie, .weights, .education{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tr-2 .food{
    background-color: oklch(95.4% .038 75.164);
}

.tr-2 .badge{
    background-color: oklch(95.4% .038 75.164);
    color: oklch(0.47 0.157 37.304);;
}

.tr-3 .cart{
    background-color: oklch(93.2% .032 255.585);
}

.tr-3 .badge{
    background-color: oklch(93.2% .032 255.585);
    color: oklch(0.424 0.199 265.638);;
}

.tr-6 .fuel{
    background-color: oklch(93.6% .032 17.717);
}

.tr-6 .badge{
    background-color: oklch(93.6% .032 17.717);
    color: oklch(0.444 0.177 26.899);
}

.tr-6 .badge-pending{
    background-color: oklch(97.3% .071 103.193);
    border-radius: 25px;
    padding: 2px 10px;
    display: inline-flex;
    align-items: center;
    gap: 2px;


    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: oklch(47.6% .114 61.907);
}

.tr-7 .movie{
    background-color: oklch(93% .034 272.788);
}

.tr-7 .badge{
    background-color: oklch(93% .034 272.788);
    color: oklch(39.8% .195 277.366);
}

.tr-8 .weights{
    background-color: oklch(95.6% .045 203.388);
}

.tr-8 .badge{
    background-color: oklch(95.6% .045 203.388);
    color: oklch(45% .085 224.283);
}

.tr-9 .education{
    background-color: oklch(95% .052 163.051);
}

.tr-9 .badge{
    background-color: oklch(95% .052 163.051);
    color: oklch(43.2% .095 166.913);
}

/* BALANCE OVERVIEW ==========> 444*/

.balance-overview{
    grid-area: balance-overview;
}

.balance-division{
    display: flex;
    flex-direction: column;
}

.total-balance{
    background-color: #eef2ff;
    padding: 16px;
    border: 1px solid oklch(93.2% .032 255.585);
    border-radius: 12px;
    margin-bottom: 24px;
}

.balance-summary{
    display: flex;
    justify-content: space-between;
}

.overall p{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: oklch(0.546 0.245 262.881);
}

.overall .value{
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: oklch(0.379 0.146 265.522);
}

.remaining p{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: oklch(0.551 0.027 264.364);
}

.remaining .value{
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: oklch(0.627 0.194 149.214);
}

.balance-representation{
    display: flex;
    flex-direction: column;
    margin-top: 12px;
}

.balance-representation .numbers{
    display: flex;
    justify-content: space-between;
    color: oklch(44.6% .03 256.802);
    margin-bottom: 4px;
}

.balance-representation .numbers p{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.446 0.03 256.802);
}

.visualisation{
    background-color: oklch(92.8% .006 264.531);
    border-radius: 1.5rem;
    height: 8px;
}

.progress-bar{
    border-radius: 1.5rem;
    height: 8px;
}

.balance-representation .progress-bar{
    background-color: oklch(0.546 0.245 262.881);
    width: 84%;
}

.division-cards{
    display: flex;
    flex-direction: column;
}

.card{
    background-color: #f9fafb80;
    border: 1px solid #e5e7ebcc;
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: 250ms;
}

.card:hover{
    background-color: #f3f4f6cc;
    border-color: #d1d5dbe6;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
}

.card h4{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: oklch(0.21 0.034 264.665);
}

.card p{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.551 0.027 264.364);
}

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

.overall{
    display: flex;
    align-items: center;
    gap: 12px;
}

.balance-summary .overall{
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
}

.balance-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.card-1 .balance-icon{
    background-color: oklch(95.4% .038 75.164);
}

.spent p{
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: oklch(0.21 0.034 264.665);
}

.spent .remaining{
    background-color: oklch(96.2% .044 156.743);
    border-radius: 25px;
    padding: 2px 10px;
    display: inline-flex;
    align-items: center;


    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: oklch(44.8% .119 151.328);
}

.card-1 .progress-bar{
    background-color: rgba(255, 105, 0, 1.00);
    width: 50%;
}

.card-2 .balance-icon{
    background-color: #fee2e2;
}

.card-2 .remaining{
    background-color: #fee2e2;
    color: #991b1b;
}

.card-2 .progress-bar{
    background-color: rgba(231, 0, 11, 1.00);
}

.card-3 .balance-icon{
    background-color: oklch(94.8% .028 342.258);
}

.card-3 .remaining{
    background-color: #fef3c7;
    color: #92400e;
}

.card-3 .progress-bar{
    background-color: oklch(65.6% .241 354.308);
    width: 80%;
}

.card-4 .balance-icon{
    background-color: #dcfce7;
}

.card-4 .remaining{
    background-color: #dcfce7;
    color: #166534;
}

.card-4 .progress-bar{
    background-color: oklch(72.3% .219 149.579);
    width: 86%;
}

/* INCOME-X-SPENDING ==========> 555*/

.incomeXspending{
    grid-area: incomeXspending;
}

.legend{
    display: flex;
    justify-content: center;
    gap: 16px;
}

.legend p, .chart p{
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: rgb(100, 116, 139);
}

.income-legend, .spending-legend{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.legend-color{
    border-radius: 2px;
    width: 12px;
    height: 12px;
}

.income-legend .legend-color{
    background-color: #10b981;
}

.spending-legend .legend-color{
    background-color: #ef4444;
}

.chart-bars{
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px;
    width: 100%;
}

.chart{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    height: 192px;
}

.bars{
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 160px;
    margin: 0 4px;
}

.income-bar{
    background-color: #10b981;
    width: 16px;
    border-radius: 3px 3px 0 0;
}

.expense-bar{
    background-color: #ef4444;
    width: 16px;
    border-radius: 3px 3px 0 0;
}

.income-bar:hover, .expense-bar:hover{
    opacity: 0.8;
    transition: 250ms;
}

.chart p{
    margin-top: 8px;
}

.chart-1 .income-bar{
    height: 95px;
    transition: 250ms;
}

.chart-1 .expense-bar{
    height: 42px;
    transition: 250ms;
}

.chart-2 .income-bar{
    height: 98px;
    transition: 250ms;
}

.chart-2 .expense-bar{
    height: 45px;
    transition: 250ms;
}

.chart-3 .income-bar{
    height: 92px;
    transition: 250ms;
}

.chart-3 .expense-bar{
    height: 38px;
    transition: 250ms;
}

.chart-4 .income-bar{
    height: 96px;
    transition: 250ms;
}

.chart-4 .expense-bar{
    height: 45px;
    transition: 250ms;
}

/* ACCOUNT SUMMARY ==========> 666*/

.account-summary{
    grid-area: account-summary;
}

.account-card{
    background-color: oklch(98.5% .002 247.839);
    border: 1px solid oklch(96.7% .003 264.542);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-card .overall h4{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: oklch(0.21 0.034 264.665);
}

.account-card .overall p{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.551 0.027 264.364);
}

.current-account .balance-icon{
    background-color: oklch(93.2% .032 255.585);
}

.savings-account .balance-icon{
    background-color: oklch(96.2% .044 156.743);
}

.credit-card .balance-icon{
    background-color: oklch(94.6% .033 307.174);
}

.credit-card .spent p{
    color: oklch(0.577 0.245 27.325);;
}

/* Payment Methdos ==========> 777*/

.payment-methods{
    grid-area: payment-methods;
}

.payment-methods .card-topper h3{
    margin-bottom: 16px;
}

.credit-card-animated{
    width: 100%;
    height: 205px;
    perspective: 1200px; 
    margin-bottom: 16px;
}

.cc{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1);;
    transform-style: preserve-3d;
}

.credit-card-animated:hover .cc{
    transform: rotateY(180deg);
}

.card-face{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    border-radius: 12px;
}

.card-front{
    background-color: oklch(39.8% .195 277.366);
    padding: 28px;
    color: white;
}

.primary{
    backdrop-filter: blur(4px);
    font-size: 0.72rem;
    font-weight: 700;
    position: absolute;
    top: 10px;
    left: 12px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 25px;
    padding: 6px 10px;
}

.cc-top{
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

.watermark{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    width: 48px;
    height: 32px;
}

.credit-card-animated .watermark{
    background-color: #ffffff33;
}

.watermark-inner{
    border-radius: 4px;
    width: 24px;
    height: 16px;
}

.credit-cards-list .watermark-inner{
    background-color: #ffffff66;
}

.cc-bottom{
    margin-bottom: 16px;
}

.cc-bottom>p{
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    line-height: 1.4;
    font-weight: bolder;
    margin-bottom: 8px;
}

.card-info{
    display: flex;
    justify-content: space-between;
}

.card-info p{
    font-size: 13px;
    line-height: 1.33;
    font-weight: 700;
}

.info-color{
    color: oklch(93.2% .032 255.585);
}

.card-back{
    /* Taken from website directly */
    background: linear-gradient(120deg, rgb(5, 16, 38), rgb(11, 18, 32) 45%, rgb(15, 23, 36));
    transform: rotateY(180deg); 
    padding: 16px;
}

.mag-stripe{
    background: linear-gradient(90deg, rgb(0, 0, 0), rgb(17, 17, 17) 40%, rgb(43, 43, 43));
    border-radius: 3px;
    height: 40px;
    margin-top: 2px;
}

.microprint{
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    color: rgba(255, 255, 255, 0.48);
    margin: 6px 0px;
}

.signature{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, rgb(248, 250, 252), rgb(238, 242, 246));
    border-radius: 4px;
    height: 36px;
    padding: 6px 8px;
    overflow: hidden;
}

.scribble{
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.06));
    width: 86%;
    height: 12px;
    border-radius: 2px;
}

.signature p{
    font-family: monospace;
    font-size: 14.4px;
    font-weight: 700;
    line-height: 21.6px;
    color: rgba(0, 0, 0, 0.85);
}

.cvv-row{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 4px;
    gap: 12px;
}

.cvv-row span{
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: oklch(0.872 0.01 258.338);
}

.cvv-num{
    background-color: white;
    text-align: center;
    min-width: 48px;
    border-radius: 6px;
    padding: 8px 12px;

    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: rgb(17, 24, 39);
}

.cc-2 .card-front{
    background-color: oklch(51.4% .222 16.935);
}

.cc-2 .info-color{
    color: oklch(93.6% .032 17.717);
}

.cc-3{
    margin-bottom: 0px;
}

.cc-3 .card-front{
    background-color: oklch(42.4% .199 265.638);
}

.cc-3 .info-color{
    color: oklch(87.2% .01 258.338);
}

.cc-3 .cc-bottom>p{
    font-family: monospace;
    font-size: 20px;
    line-height: 1.555;
    font-weight: 500;
}

.cc-3 .acc-status{
    font-weight: 500;
    font-size: 14px;
    line-height: 1.42;
    color: oklch(79.2% .209 151.711);
}