@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');

body {
    background-color: #f1f2f2;
    font-family: 'Hind Siliguri', sans-serif;
    margin: 0;
    padding-top: 60px;
}

/* --- NAVBAR --- */
.q-navbar {
    background: #ffffff;
    height: 50px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    position: fixed; top: 0; width: 100%; z-index: 1000;
    display: flex; justify-content: center;
}
.q-nav-container {
    width: 1100px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.q-logo {
    font-size: 24px; font-weight: 800; color: #b92b27; text-decoration: none;
}
.q-nav-links { display: flex; gap: 30px; font-size: 22px; color: #636466; margin: 0 20px; }
.q-nav-links a { color: #636466; text-decoration: none; padding: 10px 5px; position: relative; }
.q-nav-links a:hover, .q-nav-links a.active { color: #b92b27; }
.q-nav-links a.active::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #b92b27;
}

.q-search-box {
    flex: 1; max-width: 300px; position: relative; margin-right: 15px;
}
.q-search-box input {
    width: 100%; padding: 6px 30px 6px 10px; border: 1px solid #dee0e1; border-radius: 3px; outline: none; font-family: 'Hind Siliguri';
}
.q-search-box i { position: absolute; right: 10px; top: 8px; color: #939598; font-size: 14px; }

.q-btn-add {
    background: #b92b27; color: white; border: none; padding: 6px 15px; border-radius: 20px; font-weight: 600; cursor: pointer; font-size: 14px;
}

/* --- LAYOUT --- */
.q-container {
    max-width: 1100px; margin: 20px auto; display: grid; 
    grid-template-columns: 180px 1fr 280px; gap: 20px; padding: 0 20px;
}

/* --- SIDEBARS --- */
.q-menu-item {
    padding: 10px; font-size: 15px; color: #636466; cursor: pointer; display: flex; align-items: center; gap: 10px; border-radius: 5px;
}
.q-menu-item:hover { background: #e3e4e5; }
.q-menu-item.active { background: #ffebeb; color: #b92b27; font-weight: 600; }

.q-ad-box, .q-stats-box {
    background: white; border: 1px solid #dee0e1; border-radius: 8px; padding: 15px; margin-bottom: 15px;
}

/* --- QUORA STYLE ASK BOX --- */
.q-ask-box {
    background: white; border: 1px solid #dee0e1; border-radius: 8px; padding: 15px; margin-bottom: 15px;
}
.q-ask-header { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }
.q-ask-header img { width: 35px; height: 35px; border-radius: 50%; }
.q-ask-input-fake {
    flex: 1; background: #f1f2f2; border: 1px solid #dee0e1; border-radius: 20px; 
    padding: 8px 15px; color: #666; cursor: pointer; font-weight: 500; font-size: 14px;
}
.q-ask-input-fake:hover { background: #e3e4e5; }

.q-ask-actions { 
    display: flex; justify-content: space-around; padding-top: 5px; 
}
.q-action-btn { 
    background: none; border: none; color: #636466; font-size: 14px; font-weight: 500; 
    cursor: pointer; padding: 5px 15px; border-radius: 20px; display: flex; align-items: center; gap: 5px;
}
.q-action-btn:hover { background: #f0f0f0; }

/* --- FEED CARD --- */
.q-card {
    background: white; border: 1px solid #dee0e1; border-radius: 8px; padding: 15px; margin-bottom: 15px;
}
.q-meta { font-size: 13px; color: #939598; margin-bottom: 8px; display: flex; align-items: center; }
.q-title { 
    font-size: 17px; font-weight: 700; color: #282829; cursor: pointer; margin-bottom: 8px; line-height: 1.4; 
}
.q-title:hover { text-decoration: underline; }

/* --- TEXT FORMATTING --- */
.q-content-text {
    font-size: 15px; color: #282829; line-height: 1.6; 
    white-space: pre-wrap; /* লাইন ব্রেক ঠিক রাখে */
    text-align: justify;   /* জাস্টিফাই মোড */
}

/* --- FOOTER BUTTONS --- */
.q-footer { display: flex; gap: 10px; margin-top: 10px; }
.btn-action {
    background: #fff; border: 1px solid #dee0e1; border-radius: 20px; padding: 5px 12px; font-size: 13px; color: #636466; cursor: pointer; display: flex; align-items: center; gap: 5px; background: #f7f7f8;
}
.btn-action:hover { background: #ebeced; }
.btn-upvoted { background: #e5f2ff; color: #2e69ff; border-color: #2e69ff; }

/* --- CUSTOM TOAST (Better Alert) --- */
.custom-toast {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
    background: #333; color: white; padding: 10px 20px; border-radius: 50px;
    font-size: 14px; z-index: 3000; opacity: 0; transition: opacity 0.3s, top 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); pointer-events: none;
}
.custom-toast.show { opacity: 1; top: 90px; }
.custom-toast.success { background: #2e69ff; }
.custom-toast.error { background: #d50000; }

/* --- MODAL --- */
.q-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 2000;
}
.q-modal {
    background: white; width: 600px; max-width: 95%; border-radius: 12px; padding: 20px; position: relative; max-height: 90vh; overflow-y: auto;
}
.q-close-modal { position: absolute; right: 20px; top: 15px; font-size: 24px; cursor: pointer; }
.q-textarea-title {
    width: 100%; border: none; border-bottom: 1px solid #eee; font-size: 18px; font-weight: 700; outline: none; padding: 10px 0; margin-bottom: 10px;
}
.q-textarea-desc {
    width: 100%; border: none; font-size: 15px; min-height: 120px; outline: none; resize: none; font-family: 'Hind Siliguri', sans-serif;
}
.q-select-cat {
    width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #dee0e1; border-radius: 5px; outline:none; background: #f9f9f9;
}
.q-btn-submit {
    background: #2e69ff; color: white; border: none; padding: 8px 20px; border-radius: 20px; font-weight: 600; cursor: pointer;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .q-container { grid-template-columns: 1fr; padding: 0 10px; margin-top: 10px; }
    .q-left-sidebar, .q-right-sidebar { display: none; }
    .q-nav-links, .q-search-box { display: none; } 
    .q-nav-container { justify-content: space-between; padding: 0 10px; }
    .q-btn-add { padding: 5px 12px; font-size: 12px; }
    .q-ask-actions { justify-content: space-between; }
    .q-action-btn { font-size: 12px; padding: 5px 10px; }
}