/*  Base & Reset Styles (Maintain)  */
* { box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body {
    background-color: #f4f7fc;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; margin: 0;
}

.mobile-frame {
    background: #ffffff; width: 360px; height: 740px;
    border-radius: 40px; padding: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    display: flex; flex-direction: column; 
    overflow: hidden; 
    position: relative; 
}

/* Navigation & Header (Maintain)  */
.top-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.avatars-group { display: flex; align-items: center; }
.mini-avatar { width: 25px; height: 25px; border-radius: 50%; background: #ddd; border: 2px solid white; margin-left: -8px; }
.plus-count { font-size: 10px; color: white; background: #6c5ce7; padding: 3px 6px; border-radius: 10px; margin-left: -5px; }
.main-add-btn { background: #ff7675; color: white; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; cursor: pointer; }

.date-header { margin-bottom: 20px; }
.month-text { color: #3498db; font-size: 12px; margin: 0; font-weight: 600; }
.current-date { font-size: 24px; margin: 5px 0 0 0; color: #2d3436; }

/*  HOME PAGE (Remade with New Styles)  */

/* Header Styling - Centered */
/* Home Header Remake (Matching Settings Page Size) */
.home-header {
    background:  #e3f2fd; 
    padding: 30px 25px; 
    border-radius: 0 0 30px 30px;
    margin: -25px -25px 20px -25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Centering the Title in the Header */
.do-it-now {
    flex: 1;
    text-align: center;
    font-weight: 800;
    color: #3c40c6;
    font-size: 22px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0; 
}

/*Fixing the Notification Bell to the right corner */
.notif-icon-top {
    cursor: pointer;
    font-size: 22px;
    padding-left: 10px;
    transition: 0.3s;
}

.notif-icon-top:hover {
    transform: scale(1.1);
}

/* Keeping the Menu Button on the left*/
.menu-btn {
    font-size: 24px;
    cursor: pointer;
    color: #3c40c6;
    padding-right: 10px;
}
/* Wide Creative Category Cards */
.categories-wide { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    padding: 10px 0px; 
}

.cat-card-long {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 15px 25px; 
    border-radius: 20px; 
    color: white;
    font-weight: 600; 
    font-size: 18px; 
    cursor: pointer; 
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.cat-card-long:hover { 
    transform: scale(1.02); 
}

.icon-circle {
    width: 45px; 
    height: 45px; 
    background: white; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px;
}

/* Gradients for Categories */
.pink-grad { background: linear-gradient(90deg, #ff7eb3, #ff758c); }
.green-grad { background: linear-gradient(90deg, #42e695, #3bb2b8); }
.orange-grad { background: linear-gradient(90deg, #fbb034, #ff8c00); }

/* Sidebar Creative Style */
.sidebar {
    position: absolute; 
    top: 0; 
    left: -280px; 
    width: 260px; 
    height: 100%;
    background: #1a1a2e; 
    color: white; 
    transition: 0.4s; 
    z-index: 1000;
    padding: 40px 25px; 
    box-shadow: 10px 0 30px rgba(0,0,0,0.3);
}

.sidebar.active { 
    left: 0; 
}

.sidebar-nav a {
    display: block; 
    padding: 18px 0; 
    color: #fff; 
    text-decoration: none;
    font-size: 17px; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/*Scroll Area & Footer (Maintain) */
.home-task-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; 
    scrollbar-width: thin;
}

.home-task-list::after {
    content: '↓ scroll for more';
    display: block;
    text-align: center;
    font-size: 10px;
    color: #ccc;
    margin: 10px 0;
}

.footer-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0101b6; 
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    border-radius: 25px 25px 0 0;
    z-index: 100;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    transition: 0.3s;
}

.nav-item.active { color: #fff; }
.nav-icon { font-size: 20px; }
.nav-text { font-size: 10px; margin-top: 4px; }

/*  Login & Signup Styles */
.login-screen, .signup-screen { position: relative; background: #fff; justify-content: center; overflow: hidden; display: flex; flex-direction: column; }
.login-decor .circle-1 { position: absolute; width: 250px; height: 250px; background: #3c40c6; border-radius: 50%; top: -80px; left: -50px; opacity: 0.1; }
.login-decor .circle-2 { position: absolute; width: 150px; height: 150px; background: #ff7675; border-radius: 50%; bottom: -30px; right: -30px; opacity: 0.1; }
.input-group input { width: 100%; padding: 15px 20px; border: 1px solid #f0f0f0; border-radius: 15px; background: #f9f9f9; outline: none; }
.login-btn { background: #3c40c6; color: white; border: none; padding: 15px; border-radius: 15px; font-weight: 600; margin-top: 20px; cursor: pointer; }

/*  Settings Page Styles  */
/* Settings Page Specific */
.user-info-card {
    background: #f8faff; padding: 20px; border-radius: 20px;
    margin-bottom: 30px; text-align: center; border: 1px solid #eef2f6;
}

.settings-list { display: flex; flex-direction: column; gap: 5px; }

.setting-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px; background: #fff; border-radius: 12px;
    cursor: pointer; transition: 0.2s; margin-bottom: 8px;
}

.setting-item:hover { background: #f0f4f8; }

/* Toggle Switch Styling */
.switch { position: relative; display: inline-block; width: 45px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc; transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #3c40c6; }
input:checked + .slider:before { transform: translateX(21px); }




/* SETTING PAGE – BACKGROUND DECOR CIRCLES */  


.settings-screen .login-decor .circle-1 {
    position: absolute;
    width: 250px;
    height: 250px;
    background: #3c40c6;
    border-radius: 50%;
    top: -50px;
    left: -80px;
    opacity: 0.05;
    z-index: 1;
}

.settings-screen .login-decor .circle-2 {
    position: absolute;
    width: 180px;
    height: 180px;
    background: #ff7675;
    border-radius: 50%;
    bottom: 100px;
    right: -50px;
    opacity: 0.05;
    z-index: 1;
}



/* NEW: Pinterest Calendar & Task Page Styles */


/*  1. Manage Tasks Screen Background (Settings Style)  */
.tasks-screen {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.tasks-screen .login-decor .circle-1 {
    position: absolute; width: 250px; height: 250px; background: #3c40c6;
    border-radius: 50%; top: -50px; left: -80px; opacity: 0.05; z-index: 1;
}

.tasks-screen .login-decor .circle-2 {
    position: absolute; width: 180px; height: 180px; background: #ff7675;
    border-radius: 50%; bottom: 100px; right: -50px; opacity: 0.05; z-index: 1;
}

/*  2. Space & Layout Management  */
.tasks-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space reduced for better fit */
    padding: 0 15px;
}

.header-title-center {
    flex: 1;
    text-align: center;
    color: #3c40c6;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 1px;
}

/*  3. Calendar Box Styles */
.calendar-box {
    background: #ffffff; 
    border-radius: 25px; 
    padding: 8px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.04); 
    margin-top: 0px;
    position: relative;
    z-index: 10;
}

.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cal-header span { font-weight: 600; font-size: 15px; color: #2d3436; }
.cal-nav button { background: #f0f2f5; border: none; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: #333; font-weight: bold; }

.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 10px; }
.cal-weekdays div { font-size: 10px; font-weight: 600; color: #cbd5e0; }

.cal-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.day-node {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 11px; cursor: pointer; border-radius: 50%; transition: 0.2s;
}
.day-node:hover { background: #e2e8f0; }
.day-node.active-day { background: #feca57 !important; color: #000; font-weight: 600; box-shadow: 0 5px 15px rgba(254, 202, 87, 0.5); }
.day-node.today-mark { border: 2px solid #3c40c6; color: #3c40c6; font-weight: bold; }
.day-node.other-month { color: #edf2f7; pointer-events: none; }

.selected-date-label { font-size: 12px; color: #3498db; margin: 15px 0 10px 0; font-weight: 600; }


/*  4. Task Row & Cards Styles  */
.task-row-v2 {
    background: white; padding: 16px; border-radius: 25px;
    margin-bottom: 12px; display: flex; flex-direction: column;
    border-left: 8px solid #3c40c6; box-shadow: 0 8px 20px rgba(0,0,0,0.02);
}
.task-row-v2 h4 { margin: 0; font-size: 16px; color: #2d3436; }
.task-date-stamp { font-size: 10px; color: #a0aec0; margin-top: 10px; display: flex; align-items: center; gap: 5px; }

/* Done State */
.task-row-v2.done {
    border-left-color: #2ecc71 !important;
    background-color: #f0fff4 !important;
}
.task-row-v2.done h4::before { content: "✅ "; }
.task-row-v2.done h4 { text-decoration: line-through; color: #a0aec0; }

/* 5. Filtering & Scrolling  */
.filter-container { display: flex; gap: 10px; margin: 15px 0; }
.filter-tab { border: none; padding: 8px 18px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: 0.3s; }

.filter-tab[data-filter="all"] { background: #edf2f7; color: #4a5568; }
.filter-tab[data-filter="all"].active { background: #3c40c6; color: white; }

.filter-tab[data-filter="active"] { background: #fffaf0; color: #dd6b20; }
.filter-tab[data-filter="active"].active { background: #ed8936; color: white; }

.filter-tab[data-filter="done"] { background: #f0fff4; color: #2f855a; }
.filter-tab[data-filter="done"].active { background: #48bb78; color: white; }

/* Scrollable Task Grid */
.task-grid-v2 {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* Space for Footer */
    max-height: 350px; /* Limits height to enable scrolling */
}

/* Custom Scrollbar for better UI */
.task-grid-v2::-webkit-scrollbar { width: 4px; }
.task-grid-v2::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 10px; }




/*profile page*/


/* COMBINED EDIT PROFILE STYLES */

/* 1. Background Decoration Circles (Bola) */
.edit-screen .login-decor .circle-1 {
    position: absolute;
    width: 250px;
    height: 250px;
    background: #3c40c6;
    border-radius: 50%;
    top: -50px;
    left: -80px;
    opacity: 0.05; 
    z-index: 1;
}

.edit-screen .login-decor .circle-2 {
    position: absolute;
    width: 180px;
    height: 180px;
    background: #ff7675;
    border-radius: 50%;
    bottom: 100px;
    right: -50px;
    opacity: 0.05;
    z-index: 1;
}

/* 2. Light Blue Header Bar */
.header-bar-v2 {
    background-color: #e3f2fd !important; 
    display: flex;
    align-items: center;
    padding: 30px 25px;
    margin: -25px -25px 25px -25px; /* To adjust the frame padding */
    border-bottom: 1px solid #bbdefb;
    border-radius: 0 0 20px 20px;
    position: relative;
    z-index: 5; /* To see above the circles */
}

.back-btn-header {
    font-size: 26px;
    cursor: pointer;
    margin-right: 15px;
    color: #3c40c6; /* Dark blue Back Arrow */
    font-weight: bold;
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 18px;
    margin: 0;
    color: #2d3436;
    font-weight: 600;
    flex: 1;
}

/* 3. Profile Upload Section */
.profile-upload-section {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
    z-index: 5;
}

.small-avatar-circle {
    width: 80px; 
    height: 80px;
    background: #f0f2f5;
    border: 2px dashed #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.small-avatar-circle span { 
    font-size: 24px; 
    color: #3498db; 
}

/* 4. Form Fields & Save Button */
.edit-profile-body {
    position: relative;
    z-index: 5;
}

.edit-form-container { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.input-field-v3 { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
}

.input-field-v3 label { 
    font-size: 12px; 
    color: #888; 
    font-weight: 600; 
}

.input-field-v3 input, 
.input-field-v3 select {
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fafafa;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.save-changes-btn {
    background: #1a1a2e;
    color: white;
    padding: 15px;
    border-radius: 15px;
    border: none;
    font-weight: 600;
    margin-top: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.save-changes-btn:hover {
    background: #2d3436;
}

/* 5. Square Footer Navigation (Dark Blue) */
.footer-nav-square {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1a1a2e; /* Dark Blue */
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    z-index: 100;
    /* No border radius for square shape */
}

/*logout page*/
/* Logout Screen Styles */
.logout-screen {
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.logout-content {
    position: relative;
    z-index: 5;
    padding: 0 20px;
}

.logout-icon-container {
    width: 100px;
    height: 100px;
    background: #f0f2f5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px;
    font-size: 50px;
}

.logout-content h2 { color: #2d3436; margin-bottom: 10px; }
.logout-content p { color: #888; margin-bottom: 40px; font-size: 14px; }

.logout-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.confirm-logout-btn {
    background: #ff7675; 
    color: white;
    border: none;
    padding: 15px;
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.cancel-logout-btn {
    background: transparent;
    color: #3c40c6;
    border: 2px solid #3c40c6;
    padding: 13px;
    border-radius: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* Logout Page Decoration logic */
.logout-screen .login-decor .circle-1 {
    position: absolute; width: 250px; height: 250px; background: #3c40c6; border-radius: 50%;
    top: -50px; left: -80px; opacity: 0.05; z-index: 1;
}
.logout-screen .login-decor .circle-2 {
    position: absolute; width: 180px; height: 180px; background: #ff7675; border-radius: 50%;
    bottom: 100px; right: -50px; opacity: 0.05; z-index: 1;
}
/*notification page*/

/* Notification Screen Styles */
.notification-screen { background: #fdfdfd; }

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-bottom: 10px;
    position: relative;
    z-index: 5;
}

.notif-header h2 { font-size: 22px; color: #4a5568; }

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 1px; /* For the line separating cards */
    background: #e2e8f0;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.notif-card {
    display: flex;
    gap: 15px;
    background: #fff;
    padding: 20px 15px;
    border-bottom: 1px solid #f1f5f9;
}

.notif-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.green-bg { background: #f0fff4; color: #38a169; }
.pink-bg { background: #fff5f5; color: #e53e3e; }
.blue-bg { background: #ebf8ff; color: #3182ce; }

.notif-body { flex: 1; }

.notif-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.notif-title-row h4 { font-size: 14px; color: #2d3748; margin: 0; }
.notif-title-row small { font-size: 11px; color: #a0aec0; }

.notif-body p {
    font-size: 13px;
    color: #718096;
    line-height: 1.5;
    margin: 5px 0 12px 0;
}

.notif-actions { display: flex; gap: 15px; }
.action-link { font-size: 12px; font-weight: 600; color: #3182ce; cursor: pointer; }
.action-link.blue { color: #4299e1; }

/* Notification Scrollable Area */
.scrollable-area {
    max-height: 450px; /* App frame ekata galapena size eka */
    overflow-y: auto;
    padding-bottom: 80px; /* Footer ekata vahanne nathiva thiyenna */
    scrollbar-width: thin;
    scrollbar-color: #3c40c6 #f1f1f1;
}

/* Custom Scrollbar for Chrome/Safari */
.scrollable-area::-webkit-scrollbar {
    width: 5px;
}
.scrollable-area::-webkit-scrollbar-thumb {
    background: #3c40c6;
    border-radius: 10px;
}

.notif-card {
    animation: fadeIn 0.5s ease;
}

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

/* Regarding tasks and other cards */
body.dark-theme .task-row-v2, 
body.dark-theme .calendar-box,
body.dark-theme .welcome-box {
    background: #1a1a2e !important;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/*security
/* Security Page Specific Styles  */
.security-screen { background: #fdfdfd; }

.security-content {
    padding: 10px 20px;
    z-index: 5;
    position: relative;
}

.security-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 100px; /* Space for footer */
}

.sec-card {
    background: white;
    padding: 25px;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f4f8;
    transition: 0.3s;
}

.sec-card:hover { transform: translateY(-5px); }

.sec-icon {
    font-size: 50px;
    margin-bottom: 15px;
}

.sec-card h3 {
    font-size: 18px;
    color: #2d3436;
    margin-bottom: 8px;
}

.sec-card p {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 20px;
}

.sec-action-btn {
    background: transparent;
    border: 1.5px solid #3c40c6;
    color: #3c40c6;
    padding: 10px 25px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.sec-action-btn.blue-btn {
    background: #3c40c6;
    color: white;
}

.sec-action-btn:hover {
    background: #3c40c6;
    color: white;
}

/* 9. To avoid changing the background outside the browser */
body {
    background-color: #f4f7fc !important; 
}

/*setting page header*/

/*  Settings Page Header Fix (Matching Home & Task)  */
.settings-screen .header-bar-v2 {
    background: #e3f2fd; 
    padding: 35px 25px; 
    border-radius: 0 0 30px 30px;
    margin: -25px -25px 25px -25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #bbdefb;
    position: relative;
    z-index: 5;
}

/* Centering the Settings Title */
.settings-screen .header-title {
    flex: 1;
    text-align: center;
    font-weight: 800;
    color: #3c40c6;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* Back Button and Notification Icon */
.settings-screen .back-btn-header, 
.settings-screen .notif-icon-top {
    color: #3c40c6;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
}


/*  Notification Highlight Effect  */
.highlight-task {
    border: 2px solid #3c40c6 !important; 
    box-shadow: 0 0 15px rgba(60, 64, 198, 0.3) !important; 
    transform: scale(1.02); 
    transition: 0.5s ease;
}

/*darkmode*/

/* FINAL DARK MODE IMPLEMENTATION (FRAME-ONLY & TEXT) */

/* 1. Dimming the main frame - this affects the entire app */
.mobile-frame.dark-theme {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
}

/* 2.Turn all headers, labels, and paragraphs white */
.mobile-frame.dark-theme h2,
.mobile-frame.dark-theme h3,
.mobile-frame.dark-theme h4,
.mobile-frame.dark-theme p,
.mobile-frame.dark-theme span,
.mobile-frame.dark-theme label,
.mobile-frame.dark-theme small,
.mobile-frame.dark-theme .do-it-now,
.mobile-frame.dark-theme .header-title-center {
    color: #ffffff !important;
}

/* 3. Colors of Cards and other elements (Settings, Tasks, Calendar) */
.mobile-frame.dark-theme .setting-item,
.mobile-frame.dark-theme .task-row-v2, 
.mobile-frame.dark-theme .calendar-box,
.mobile-frame.dark-theme .user-info-card,
.mobile-frame.dark-theme .sec-card,
.mobile-frame.dark-theme .notif-card {
    background-color: #16213e !important;
    border-color: #333 !important;
    color: #ffffff !important;
}

/* 4. Dimming Headers and Footers */
.mobile-frame.dark-theme .header-bar-v2,
.mobile-frame.dark-theme .home-header,
.mobile-frame.dark-theme .footer-nav-square {
    background-color: #0f3460 !important;
    border-color: #16213e !important;
}

/* 5. Input Fields and Selection Boxes */
.mobile-frame.dark-theme input,
.mobile-frame.dark-theme select,
.mobile-frame.dark-theme textarea {
    background-color: #24243e !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
}

/* 6. Color of dates in the calendar */
.mobile-frame.dark-theme .day-node {
    color: #ffffff !important;
}
.mobile-frame.dark-theme .day-node.active-day {
    color: #000000 !important; 
}

/*circle color*/

/*  Dark Mode Background Circles Fix */

/* Circle 1 */
.mobile-frame.dark-theme .circle-1, 
.mobile-frame.dark-theme .login-decor .circle-1 {
    background: #3c40c6 !important; 
    opacity: 0.2 !important; 
    filter: brightness(1.2);
}

/* Circle 2  */
.mobile-frame.dark-theme .circle-2, 
.mobile-frame.dark-theme .login-decor .circle-2 {
    background: #ff7675 !important;
    opacity: 0.2 !important; 
    filter: brightness(1.2);
}

/*allert box*/

/* To hide the modal normally and not interfere with the layout */
.modal-overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6); 
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 9999; 
}

.modal-box {
    background: white;
    padding: 30px;
    border-radius: 20px;
    width: 280px; 
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    animation: popIn 0.3s ease; 
}

/* The animation that occurs when the modal appears */
@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-icon { font-size: 50px; margin-bottom: 10px; }
.modal-box p { color: #2d3436; font-weight: 600; margin: 15px 0; font-size: 16px; }

.modal-box button {
    background: #3c40c6;
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.modal-box button:hover { background: #2d31a3; }

/* Dark Mode Support (to match your app's dark-theme) */
.mobile-frame.dark-theme .modal-box { 
    background: #16213e !important; 
    color: white !important; 
}
.mobile-frame.dark-theme .modal-box p { color: white !important; }