/* --- 1. MAIN WRAPPER (CENTERED APP LOOK) --- */
#zoom-app-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
    width: 100%;
}

#zoom-app-wrapper * {
    box-sizing: border-box;
    outline: none;
}

.zoom-app-box {
    width: 100%;
    max-width: 450px; /* মোবাইলের সাইজ */
    height: 600px; /* ফিক্সড হাইট অ্যাপের মতো */
    background: #f8f9fa;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e1e4e8;
    position: relative;
    margin: 0 auto;
}

/* --- 2. HEADER & SEARCH --- */
.zoom-app-header {
    background: #ffffff;
    padding: 20px;
    border-bottom: 1px solid #eee;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.zoom-brand {
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.zoom-brand h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #2f3542;
    text-transform: uppercase;
}

/* Stylish Search Bar */
.zoom-search-bar {
    display: flex;
    background: #f1f2f6;
    border-radius: 50px;
    padding: 5px;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.zoom-search-bar:focus-within {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.zoom-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 15px;
    font-size: 15px;
    color: #333;
    width: 100%;
}

.zoom-search-bar button {
    width: 45px;
    height: 45px;
    border: none;
    background: linear-gradient(135deg, #2563eb, #2ed573);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.zoom-search-bar button:hover {
    transform: scale(1.05);
}

/* --- 3. SCROLLABLE CONTENT --- */
.zoom-content-area {
    flex: 1; /* বাকি জায়গা নিবে */
    overflow-y: auto; /* শুধু এখানে স্ক্রল হবে */
    padding: 15px;
    scroll-behavior: smooth;
    background: #f8f9fa;
}

/* Scrollbar Customization */
.zoom-content-area::-webkit-scrollbar { width: 5px; }
.zoom-content-area::-webkit-scrollbar-track { background: #f1f1f1; }
.zoom-content-area::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }

/* --- 4. RESULT CARD --- */
.zoom-res-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #fff;
    animation: zoomSlideUp 0.4s ease;
    text-align: center; /* সেন্টারড কন্টেন্ট */
    position: relative;
    overflow: hidden;
}

.zoom-res-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #2563eb, #2ed573);
}

.zoom-row {
    margin-bottom: 12px;
    border-bottom: 1px dashed #f1f2f6;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
}
.zoom-row:last-child { border: none; margin: 0; padding: 0; }

.zoom-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #a4b0be;
    font-weight: 700;
    margin-bottom: 4px;
}

.zoom-value {
    font-size: 15px;
    font-weight: 500;
    color: #2f3542;
    word-wrap: break-word; /* ব্রেক সিস্টেম */
}

/* Image */
.zoom-img-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
.zoom-res-img {
    width: 128px;
    height: 128px;
    border-radius: 50%; /* গোল */
    object-fit: cover;
    border: 4px solid #f1f2f6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- 5. FOOTER & LOADER --- */
.zoom-footer {
    text-align: center;
    padding: 12px;
    font-size: 11px;
    color: #b2bec3;
    background: #fff;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.zoom-loader {
    display: none;
    margin: 30px auto;
    width: 35px; height: 35px;
    border: 3px solid #f1f2f6;
    border-top: 3px solid #ff4757;
    border-radius: 50%;
    animation: zoomSpin 0.8s linear infinite;
}

.zoom-empty-state {
    text-align: center;
    color: #ced6e0;
    margin-top: 60px;
}
.zoom-empty-state i { font-size: 40px; margin-bottom: 10px; }

@keyframes zoomSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes zoomSlideUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }