/* 📁 File: style.css / / অ্যাপ-লাইক মোবাইল-ফ্রেন্ডলি লেআউট এবং কালার স্কিম */

/* STREAMING_CHUNK:Importing Google Fonts for proper Bengali Rendering */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;600;700&display=swap');

:root {

--primary: #2563eb;

--danger: #dc2626;

--success: #16a34a;

--dark: #111827;

--light: #f3f4f6;

--accent: #db2777;

--card-bg: #ffffff;

}

/* STREAMING_CHUNK:Configuring Global Reset and Typography */

{

box-sizing: border-box;

/* ফন্ট সমস্যা সমাধানের জন্য Noto Sans Bengali যুক্ত করা হলো */

font-family: 'Noto Sans Bengali', system-ui, -apple-system, sans-serif;

margin: 0;

padding: 0;

}

body {

background-color: var(--light);

color: var(--dark);

padding-bottom: 50px;

}

/* STREAMING_CHUNK:Styling the App Header */

.app-header {

background: linear-gradient(135deg, #2563eb, #db2777);

color: white;

padding: 25px 20px 45px 20px;

text-align: center;

border-bottom-left-radius: 25px;

border-bottom-right-radius: 25px;

box-shadow: 0 4px 10px rgba(0,0,0,0.15);

}

.app-header h2 { font-size: 1.4rem; font-weight: 700; }

.app-header p { font-size: 0.9rem; opacity: 0.9; margin-top: 5px; }

/* STREAMING_CHUNK:Defining Card and Container Layouts */

.container { padding: 0 15px; max-width: 600px; margin: 0 auto; }

.card {

background: var(--card-bg); border-radius: 15px; padding: 20px;

margin-top: -30px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);

position: relative; z-index: 10; border-top: 4px solid #2563eb;

}

/* STREAMING_CHUNK:Customizing Form Inputs */

.input-group { margin-bottom: 15px; }

.input-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; color: var(--dark); }

.input-group input, .input-group select {

width: 100%; padding: 12px; border: 1px solid #d1d5db;

border-radius: 8px; font-size: 1rem; outline: none; transition: all 0.3s ease; background-color: #f9fafb;

}

.input-group input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); background-color: white; }

.input-group input[type="file"] { padding: 9px; background-color: white; }

/* STREAMING_CHUNK:Setting up Button Variants */

.btn {

width: 100%; padding: 12px 15px; border: none; border-radius: 8px;

font-size: 1rem; font-weight: bold; cursor: pointer; color: white;

transition: transform 0.1s; display: inline-block; text-align: center;

}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--primary); }

.btn-danger { background: var(--danger); }

.btn-success { background: var(--success); }

.btn-accent { background: var(--accent); }

/* STREAMING_CHUNK:Designing the Wallet Display */

.wallet-box {

background: linear-gradient(to right, var(--dark), #1f2937); color: white;

padding: 20px; border-radius: 15px; text-align: center; margin-bottom: 20px;

margin-top: -30px; position: relative; z-index: 10;

}

.wallet-box span.title { font-size: 0.9rem; color: #9ca3af; }

.wallet-box span#walletBalance { font-size: 2.2rem; font-weight: 800; color: #16a34a; display: block; margin: 5px 0 15px 0; }

/* STREAMING_CHUNK:Constructing the Custom Modal UI */

.modal-overlay {

display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;

background: rgba(17, 24, 39, 0.7); z-index: 9999; justify-content: center;

align-items: center; backdrop-filter: blur(4px);

}

.modal-box {

background: white; width: 90%; max-width: 400px; border-radius: 20px;

padding: 25px; text-align: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

}

.modal-box img.api-image {

width: 128px; height: 128px; border-radius: 5px; object-fit: cover;

margin: 0 auto 15px auto; border: 4px solid #db2777; display: block;

}

.modal-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; color: var(--dark); }

.modal-body { font-size: 0.95rem; margin-bottom: 20px; color: #4b5563; line-height: 1.5; }

.modal-input { width: 100%; padding: 12px; margin-bottom: 15px; border: 2px solid #e5e7eb; border-radius: 8px; display: none; text-align: center; }

/* STREAMING_CHUNK:Adding Animations and Utility Classes */

@keyframes popIn { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.text-center { text-align: center; }

.mt-2 { margin-top: 10px; }

.mt-3 { margin-top: 15px; }