/* GLOBAL */
body {
    background: #f2f3f8;
    font-family: "Inter", sans-serif;
    padding-bottom: 85px;
}

.section-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #333;
}

/* ============================
   TOP BAR (new compact)
============================ */
.top-bar {
    padding: 12px 15px;
    background:#fff;
    border-bottom:1px solid #e6e6e6;
}

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

/* Bell Icon */
.notif-icon i {
    font-size: 22px;
    color:#444;
}

/* Avatar circle (image OR initials) */
.avatar-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background:#f0f0f0;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position:relative;
}

.avatar-img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-text {
    font-weight:700;
    color:#555;
    font-size: 0.85rem;
    letter-spacing: -0.5px;
}

/* BALANCE CARD */
.balance-card {
    background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
    border-radius: 20px;
    padding: 25px;
    color: #fff;
    margin: 20px 0;
}

.balance-card .label {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* ACTION BUTTONS */
.action-btn {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 22px;
    color:#555;
    margin:auto;
}

.action-name {
    font-size: 0.70rem;
    margin-top: 4px;
    font-weight: 500;
}

.action-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.action-item:hover .action-btn {
    transform: scale(1.08);
    transition: .18s;
}

/* ACTION BUTTON COLORS */
.action-btn.receive {
    background: #FF396F;
    color: #fff;
}

.action-btn.pay {
    background: #6236FF;
    color: #fff;
}

.action-btn.deposit {
    background: #1DCC70;
    color: #fff;
}

.action-btn.cards {
    background: #FFB400;
    color: #fff;
}

.action-btn.settings {
    background: #242E47;
    color: #fff;
}

/* ============================================================
   TRANSACTIONS — CARDURI DE TRANZACȚII (comun)
============================================================ */
.tx-item {
    background:#fff;
    border-radius:16px;
    padding:14px;
    display:flex;
    align-items:center;
    margin-bottom:12px;
    box-shadow:0 3px 10px rgba(0,0,0,0.04);
}

.tx-icon {
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f2f2f5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-right:12px;
}

/* Sume intrare/ieșire */
.tx-out { color:#e74c3c; font-weight:700; }
.tx-in  { color:#2ecc71; font-weight:700; }

/* ============================================================
   TRANSACTIONS — SUME FAILED (EȘUATE)
============================================================ */
.tx-failed {
    color: #000 !important;
    font-weight: 700;
}

/* ============================================================
   TRANSACTIONS — ICON FAILED (OCTOGON ROȘU)
============================================================ */
.tx-item .tx-icon .icon-failed,
.tx-icon .icon-failed {
    color: #e53935 !important;
    fill: #e53935 !important;
    stroke: #e53935 !important;
}

/* ============================================================
   TRANSACTIONS — LABEL GRUP ZI/LUNĂ (Azi, Ieri, Luna aceasta, etc.)
============================================================ */
.tx-group-label {
    font-weight: 700;
    font-size: 0.9rem;
    margin: 18px 5px 6px 5px;
    color: #444;
    opacity: 0.9;
}

/* Hover subtil pe desktop pentru cardurile de tranzacții */
@media (hover: hover) {
    .tx-item {
        transition: background 0.15s ease, transform 0.15s ease;
    }
    .tx-item:hover {
        background: #f8f9fa;
        transform: translateY(-2px);
    }
}


/* BOTTOM NAV */
.bottom-nav {
    position: fixed;
    bottom: 0; 
    left: 0; 
    right: 0;
    background:#fff;
    border-top:1px solid #ddd;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    box-shadow: 0 -4px 18px rgba(0,0,0,0.08);
}

.bottom-nav .nav-item-link {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #777;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bottom-nav .nav-item-link.active {
    color: #4776e6;
}

.bottom-nav i {
    font-size: 22px;
    margin-bottom: 2px;
}

.bottom-nav span {
    font-size: 0.70rem;
    line-height: 1;
    margin-top: -2px;
}


/* REZERVA 1,2 (ACCOUNTS, horizontal scroll) */
.news-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    gap: 15px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.news-scroll::-webkit-scrollbar {
    display: none;
}

.news-card {
    min-width: 240px;
    max-width: 240px;
    background:#fff;
    border-radius:18px;
    padding:15px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.account-card-label {
    font-size:0.75rem;
    color:#999;
}

.account-card-value {
    font-size:1rem;
    font-weight:600;
}

.news-text {
    font-size:0.85rem;
    color:#666;
}

/* CONTACTE — Scroll orizontal */
.contacts-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.contacts-scroll::-webkit-scrollbar {
    display: none;
}

.contact-item {
    min-width: 80px;
    text-align: center;
    text-decoration: none;
    color: #333;
}

.contact-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #eee;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    margin: auto;
    box-shadow:0 3px 8px rgba(0,0,0,0.08);
}

.contact-img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.contact-init {
    font-weight:700;
    font-size: 0.9rem;
    color:#555;
}

.contact-name {
    margin-top:6px;
    font-size:0.80rem;
    font-weight:500;
    white-space:nowrap;
}

/* CONTACTE — buton add new */
.add-link {
    font-size: 0.85rem;
    color: #4776e6;
    text-decoration: none;
    font-weight: 500;
}

.add-link:hover {
    text-decoration: underline;
}

/* === CONTACT ITEM HOVER EFFECT === */

.contact-item {
    transition: 0.25s ease;
}

.contact-item:hover .contact-avatar {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.contact-item:hover .contact-name {
    color: #000;
}

.contact-avatar {
    transition: 0.25s ease;
}

.contact-name {
    transition: 0.25s ease;
}


/* === Limitare nume contacte doar pe telefoane === */
@media (max-width: 480px) {
    .contact-item {
        min-width: 95px;  /* implicit este 80px */
    }
}

@media (max-width: 480px) {
    .contact-name {
        max-width: 120px;       /* suficient pentru 15–16 caractere */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}



/* CARD DE CREDIT — NOU (proporție reală) */
.card-iban {
    position: relative;
    min-width: 300px;
    max-width: 300px;
    height: 170px;

    padding: 22px 22px 18px 22px;
    border-radius: 18px;

    background: linear-gradient(135deg, #2E3A59 0%, #1B2437 100%); /* <<< NOU, MAI ÎNCHIS */
    color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    overflow: hidden;
}

/* Codul țării (fundal) — mai mare acum */
.card-country-code {
    position: absolute;
    left: 16px;
    top: 0px; /* ALINIAT CU DRAPELUL */
    font-size: 64px;
    font-weight: 800;
    color: rgba(255,255,255,0.22);
    pointer-events: none;
}

/* Drapel (mărit, pus în cerc premium) */
.flag-circle {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 48px;
    height: 48px;

    border-radius: 50%;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(5px);

    overflow: hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.flag-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text */
.card-iban .account-card-label {
    position: relative;
    top: 11px;
}
.card-iban .account-card-value {
    margin-top: 8px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;

}

.card-iban .news-text {
    font-size: 0.90rem;
    opacity: 1;
}

.card-iban:hover {
    transform: scale(.98);
    transition: .15s ease;
    cursor: pointer;
}



/* MINI STATS CARDS (income / expenses) */
.mini-stats-card {
    background:#fff;
    border-radius:18px;
    padding:16px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);

    min-height: 90px;
    height: 90px;
}

.mini-stats-card .icon {
    width:42px;
    height:42px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.income-card .icon {
    background:rgba(46, 204, 113, 0.15);
    color:#2ecc71;
}

.expenses-card .icon {
    background:rgba(231, 76, 60, 0.15);
    color:#e74c3c;
}

.mini-stats-card .label {
    font-size:0.75rem;
    color:#777;
    margin-bottom:2px;
}

.mini-stats-card .value {
    font-size:1rem;
    font-weight:700;
}

/* CARD CU FUNDAL PORTOCALIU */
.refund-orange-card {
    background: linear-gradient(135deg, #FFB86C 0%, #FF9800 100%) !important;
    color: #fff !important;
}

/* ICON pentru card portocaliu */
.refund-orange-card .icon {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.refund-orange-card .label,
.refund-orange-card .value {
    color: #fff !important;
}

/* Wrapper pentru hover (se folosește și la cardul roșu) */
.mini-card-link {
    text-decoration: none;
    display: block;
}

/* Hover — ușor mai închis și puțină ridicare pentru cardul portocaliu */
.mini-card-link:hover .refund-orange-card {
    filter: brightness(0.92) saturate(1.05);
    transform: translateY(-3px);
    transition: all 0.22s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* CARD CU FUNDAL ROȘU DESCHIS */
.dispute-red-card {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4F4F 100%) !important;
    color: #fff !important;
}

/* Icon pentru cardul roșu */
.dispute-red-card .icon {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.dispute-red-card .label,
.dispute-red-card .value {
    color: #fff !important;
}

/* HOVER — ușor mai întunecat + efect de ridicare pentru cardul roșu */
.mini-card-link:hover .dispute-red-card {
    filter: brightness(0.92) saturate(1.07);
    transform: translateY(-3px);
    transition: all 0.22s ease;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Eliminăm underline pe linkul-învelitoare */
.mini-card-link:hover {
    text-decoration: none !important;
}


/* ==== SIDEBAR MENU ==== */
.sidebar-menu {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    background: #fff;
    box-shadow: 3px 0 20px rgba(0,0,0,0.1);
    z-index: 2000;
    padding-top: 30px;
    overflow-y: auto;
    transition: all .35s ease;
}

.sidebar-menu.open {
    left: 0;
}

.sidebar-backdrop {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0.35);
    z-index: 1500;
    display:none;
}

.sidebar-backdrop.show {
    display:block;
}

/* HEADER */
.sidebar-header {
    text-align: center;
    margin-bottom: 25px;
}

.sidebar-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background:#f0f0f0;
    margin: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.sidebar-initials {
    font-weight: 700;
    font-size: 1rem;
    color:#555;
}

.sidebar-name {
    margin-top: 10px;
    font-weight: 700;
    font-size: 1rem;
}

.sidebar-email {
    font-size: .75rem;
    color:#777;
}

/* LINKS */
.sidebar-links a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 20px;
    font-size: 0.95rem;
    color:#333;
    text-decoration:none;
    border-bottom:1px solid #f3f3f3;
}

.sidebar-links a:hover {
    background:#f7f7f7;
}

.sidebar-links i {
    font-size: 1.2rem;
    color:#666;
}

.logout-link {
    color:#e74c3c !important;
}

.menu-badge {
    margin-left:auto;
    background:#4776e6;
    color:#fff;
    padding:2px 8px;
    border-radius:12px;
    font-size:0.75rem;
}


/* ======== MENU BALANCE BOX — Full width like FinApp ======== */
.menu-balance-box {
    width: 100%;
    background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
    padding: 22px 20px 18px 20px;

    border-radius: 0;
    margin: 0;

    color: #fff;
    box-shadow: inset 0 -2px 8px rgba(0,0,0,0.15);
}

/* TEXT */
.mbb-title {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
}

.mbb-amount {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 6px 0 15px 0;
}

.mbb-amount span {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 400;
}

/* ROUND BUTTONS */
.mbb-round-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 6px;
}

.mbb-round-item {
    text-align: center;
}

.mbb-round-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;

    background: rgba(255,255,255,0.22);
    backdrop-filter: blur(4px);

    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: .2s;
}

.mbb-round-btn:hover {
    background: rgba(255,255,255,0.35);
    transform: scale(1.08);
}

.mbb-round-label {
    margin-top: 4px;
    font-size: 0.72rem;
    opacity: 0.95;
}

/* Linkul "My cards" */
.mbb-link a {
    margin-top: 10px;
    display: inline-block;
    color: #fff;
    opacity: 0.9;
    font-size: 0.85rem;
    text-decoration: none;
}
.mbb-link a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* CLOSE BUTTON (X) inside sidebar */
.sidebar-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;

    background: transparent;
    border: none;
    padding: 6px;

    font-size: 22px;
    color: #444;

    cursor: pointer;
    z-index: 2100;
}

.sidebar-close-btn i {
    pointer-events: none;
}

.action-btn.receive  { background: #FF396F; color:#fff; }
.action-btn.pay      { background: #6236FF; color:#fff; }
.action-btn.deposit  { background: #1DCC70; color:#fff; }
.action-btn.cards    { background: #FFB400; color:#fff; }
.action-btn.settings { background: #242E47; color:#fff; }

/* Drag cursor */
.news-scroll, .contacts-scroll {
    cursor: grab;
}
.news-scroll.dragging, .contacts-scroll.dragging {
    cursor: grabbing;
    user-select: none;
}


/* ============================================================
   ACTION SHEET — BLUR + 80vh HEIGHT + SMOOTH
============================================================ */

.action-sheet {
    position: fixed;
    inset: 0;
    z-index: 4000;
    pointer-events: none;
}

/* BACKDROP CU BLUR REAL */
.as-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.20);
    backdrop-filter: blur(10px);         /* 👈 blur real desktop/mobil */
    -webkit-backdrop-filter: blur(10px); /* safari */
    opacity: 0;
    transition: opacity .25s ease;
}

.action-sheet.active {
    pointer-events: auto;
}

.action-sheet.active .as-backdrop {
    opacity: 1;
}

/* CONTENT – NU FULLSCREEN, DOAR 80vh */
.as-content {
    position: absolute;
    bottom: -90vh;     /* ascuns */
    left: 0;
    width: 100%;
    height: 80vh;      /* 👈 cât ai cerut */
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 22px;
    box-shadow: 0 -6px 30px rgba(0,0,0,0.25);
    transition: bottom .32s ease;
    display: flex;
    flex-direction: column;
}

.action-sheet.active .as-content {
    bottom: 0;         /* 👈 urcă doar 80vh */
}

/* GRABBER */
.as-grabber {
    width: 54px;
    height: 6px;
    background: #ccc;
    border-radius: 6px;
    margin: 0 auto 18px auto;
}

/* Titlu */
.as-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* QR CENTER */
.qr-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}