/* ==========================================================================
   Prostuty — Modern Theme Layer
   Loaded after indexstyles.css. Restyles colors/typography/shadows/radius
   on the existing markup and class names only — no structural (float/
   position/width) rules are touched except inside the mobile media
   queries at the bottom, where layout is intentionally adapted for small
   screens. Nothing here renames a class or removes functionality.
   ========================================================================== */

:root{
    /* Golden-yellow accent (was teal). Kept dark enough (#A6790E) to stay
       legible both as text-on-white and as white-text-on-fill, since the
       same variable is reused both ways across the site. */
    --brand-primary: #87764c;
    --brand-primary-dark: #7A5A0A;
    --brand-primary-light: #E8C766;
    --brand-accent: #d92d20;
    --brand-warm: #f59e0b;

    --ink-900: #111827;
    --ink-700: #374151;
    --ink-500: #6b7280;
    --ink-300: #d1d5db;
    --ink-100: #f3f4f6;

    --surface: #ffffff;
    --page-bg: #eef1f4;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(17, 24, 39, .08), 0 1px 2px rgba(17, 24, 39, .06);
    --shadow-md: 0 6px 16px rgba(17, 24, 39, .10);
    --shadow-lg: 0 14px 32px rgba(17, 24, 39, .14);

    --font-body: 'Siyam Rupali', 'SolaimanLipi', Roboto, Arial, Helvetica, sans-serif;
}

/* ---------- Global base ---------- */
body{
    background-color: var(--page-bg) !important;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
a{ color: var(--brand-primary); }
::selection{ background: var(--brand-primary-light); color: #2b2106; }

.pagewrapper{ background-color: var(--page-bg) !important; }
.pagecontainer{ background-color: var(--page-bg) !important; }
.content_body{ background-color: transparent !important; }
.content{
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ---------- Top bar ---------- */
.container_topbar{
    background-color: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    border-bottom: none !important;
}
#container_topbarholder{
    box-shadow: none !important;
}
.sitelogo{
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.06));
}
.firstletter{
    color: var(--brand-accent) !important;
}
.home_button{ color: var(--brand-primary) !important; }
.signinholder, .signout_holder{
    font-weight: 600;
}
.loggedinitemholder{
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--ink-100);
}

/* ---------- Custom scrollbars ---------- */
/* Thin, brand-colored scrollbars everywhere instead of the chunky OS default. */
*{
    scrollbar-width: thin;
    scrollbar-color: var(--ink-300) transparent;
}
*::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track{
    background: transparent;
}
*::-webkit-scrollbar-thumb{
    background-color: var(--ink-300);
    border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover{
    background-color: var(--ink-500);
}

/* The left nav rail specifically: fully hide its scrollbar (it still scrolls
   with the wheel/touch) so it doesn't compete visually with the logo/menu. */
.leftbarholder{
    display: block !important;
    background-color: var(--surface) !important;
    box-shadow: var(--shadow-md);
    border-right: 1px solid var(--ink-100);
    scrollbar-width: none;
}
.leftbarholder::-webkit-scrollbar{
    display: none;
    width: 0;
    height: 0;
}

/* ---------- Left sidebar nav items ---------- */
.topicstxt{
    color: var(--ink-900) !important;
    font-family: var(--font-body) !important;
    letter-spacing: .2px;
}
.cat-icon{
    display: inline-block;
    width: 22px;
    margin-right: 8px;
    text-align: center;
    font-size: 15px;
    filter: saturate(1.1);
}
.modeltest{
    font-family: var(--font-body) !important;
    color: var(--ink-700) !important;
    border-radius: var(--radius-sm);
    margin: 2px 6px;
    width: calc(100% - 12px) !important;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.modeltest:hover{
    background-color: var(--ink-100) !important;
    color: var(--brand-primary) !important;
    box-shadow: none !important;
    transform: translateX(2px);
}
.modeltest:active{
    background-color: var(--ink-100) !important;
}
.leftnavbartabSelected{
    background-color: rgba(166, 121, 14, .12) !important;
    color: var(--brand-primary-dark) !important;
    border-left: 3px solid var(--brand-primary);
}

/* ---------- Category tabs (হোম / মডেল টেষ্ট / ...) ---------- */
.indextab{
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 10px 15px !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
    font-size: 15px !important;
    letter-spacing: .1px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.indextab:active{
    transform: scale(.96);
}
.indextab-icon{
    font-size: 15px;
    line-height: 1;
    filter: saturate(1.15);
}

/* ---------- Readability bump: a few home-page text spots were set quite
   small (11-14px) in the legacy CSS; nudged up ~1px each for a more
   comfortable reading size with the new Siyam Rupali body font. ---------- */
.examnamenew,
.questionsname{ font-size: 13px !important; }
.questioinnametxt{ font-size: 15px !important; }
.modeltesttxt{ font-size: 16px !important; }
.indextabbackground{
    background-color: var(--surface) !important;
    color: var(--ink-700) !important;
    border: 1px solid var(--ink-300) !important;
    box-shadow: var(--shadow-sm);
}
.indextab:hover{
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.indextabselected{
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
    box-shadow: var(--shadow-md);
}

/* ---------- Hero banner ----------
   Black + gold "luxury" treatment, scoped to just this banner (doesn't
   touch the site-wide --brand-* teal used elsewhere).
   The source graphic (background_new.webp) is a white-background black
   line-art illustration, not a photo. Multiply-blending it onto a colored
   gradient works when the base is light, but multiply onto black just
   erases everything (black * anything = black). For a black base we
   instead invert the image first (white bg -> black, black linework ->
   white) and run it through sepia/hue-rotate/saturate to tint that
   inverted linework gold, then screen-blend it onto the black gradient —
   screen keeps the bright gold lines vivid while its own near-black
   background disappears seamlessly into the backdrop. The title and
   search bar sit in dark frosted "glass" panels with a thin gold hairline
   border on top of that. */
.bannerholder{
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 20%, rgba(212,175,55,.22) 0%, transparent 45%),
        linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 55%, #000000 100%);
}
.index_bg_img_new{
    filter: invert(1) sepia(1) hue-rotate(6deg) saturate(5) brightness(.8);
    mix-blend-mode: screen;
}
.index_gradientovetlay{
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.85) 100%) !important;
    visibility: visible !important;
}
.indextitleholder{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    /* justify-content: flex-end !important; */
    height: 100%;
    padding-bottom: 22px !important;
    box-sizing: border-box;
    gap: 15px;
    margin-top: 5px;
}
.indextitletextdescriptionholder{
    width: auto !important;
    background: rgba(10,8,4,.45);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(212,175,55,.4);
    border-radius: var(--radius-lg);
    padding: 5px 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.indextitletextdescription{
    font-size: 15px;
    font-weight: 100;
    color: #f2d585;
    letter-spacing: .2px;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.searchoptionholder{
    max-width: 480px;
    width: calc(100% - 32px);
    margin: 0 auto !important;
}
.searchboxtext{
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.5);
    overflow: hidden;
    background: rgba(10,8,4,.55) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(212,175,55,.45);
}
.seachbox{
    border: none !important;
    background: transparent !important;
    color: #fff !important;
}
.seachbox::placeholder{
    color: rgba(255,255,255,.55) !important;
}
.searchicon{
    opacity: .85 !important;
    top: 4px !important;
}
.searchsuggestionholder{
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--ink-100) !important;
    overflow: hidden;
}

/* ---------- "চলমান পরীক্ষা" today's-exam widget ----------
   currentexamcontainer/loadsyllabusbtnholder used to split via a fixed
   calc(100% - 265px)/255px pair, which looked fine at typical desktop
   widths but crushed the title text at in-between widths (e.g. a
   left+right sidebar squeezing the middle column) since neither box could
   shrink below its hard-coded size. Flex with a wrap fallback lets both
   sides shrink together and drop to a stacked layout once they no longer
   fit side by side — the same visual result, but it can't crush text. */
.currentexamholder{
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}
.todaysexamtitle{ flex-basis: 100%; }
.currentquestion{
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    background-color: var(--surface);
    transition: box-shadow .2s ease, transform .2s ease;
}
.currentquestion:hover{
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.todaysexamimageholder{
    box-shadow: var(--shadow-sm);
}
.todaysexamimage{
    border-radius: var(--radius-sm) !important;
}
.todayexamtitletext{ color: var(--ink-900) !important; font-weight: 700; }
.todayexamsyllabustext:empty{ display: none; }
.todayexamstarttimetext{
    display: inline-block;
    font-family: var(--font-body) !important;
    font-size: 11.5px !important;
    color: var(--brand-primary-dark) !important;
    background-color: var(--ink-100);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

/* "পরবর্তী পরীক্ষার সময়সূচি ও সিলেবাস" / Load syllabus row */
.currentexamcontainer{
    flex: 1 1 320px;
    width: auto !important;
}
.loadsyllabusbtnholder{
    box-sizing: border-box;
    flex: 1 1 260px;
    width: auto !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--ink-100);
    padding: 10px !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 95px;
}
.indexsyllabustitletextholder,
.syllabustitlebtnholder{
    width: 100% !important;
    margin: 0 !important;
}
.syllabusupdatetext{
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    line-height: 1.4;
    color: var(--ink-700) !important;
}
.syllabusupdatetext::before{
    content: "\1F4C5  ";
}
.getsyllabusiconbutton{
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
}
.getindexhomesyllabusbutton{
    box-sizing: border-box;
    flex: 1 1 auto;
    width: auto !important;
    white-space: nowrap;
    text-align: center;
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600;
    padding: 8px 12px !important;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill) !important;
}
.syllabusbtndownarrowicon, .syllabusbtnuparrowicon{
    flex: 0 0 auto;
    background-color: var(--brand-primary) !important;
}

/* ---------- Section title bars ----------
   Every collapsible section (বিষয়ভিত্তিক পড়াশোনা, মডেল টেস্ট পরীক্ষা,
   বিগত বছরের প্রশ্নসমূহ and its per-category sub-headers) shares one of
   these row wrapper classes, already grouped under one legacy selector in
   indexhomecontent.css. Turning the row into a flex container instead of
   float:left (flex simply overrides float per spec, so this is safe even
   though the base rule still says float:left) gets the title and the arrow
   perfectly centered on each other regardless of their own heights, which
   the old margin-top:8px hand-tuning never quite did. The row itself gets a
   light tinted background + padding + rounded top corners so each header
   reads as its own distinct band instead of text floating on the card's
   own white background. */
.titletoggleholder,
.modeltesttitletoggleholder,
.previousyeartitletoggleholder,
.previousexamtitletoggleholder{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background-color: var(--ink-100) !important;
    padding: 12px 14px !important;
    box-sizing: border-box;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin-bottom: 10px;
}
.subjectwisequestionholdertitletext,
.previousexamholdertitletext,
.indexlistsfeedtitlebartext,
.todaysexamtitle{
    box-sizing: border-box !important;
    font-family: var(--font-body) !important;
    color: var(--ink-900) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--brand-primary);
    padding-left: 12px !important;
    width: auto !important;
    float: none !important;
}
.syllabussubjectbtnuparrowicon,
.syllabussubjectbtndownarrowicon{
    margin-top: 0 !important;
    float: none !important;
    flex: none;
}
.previousexamholdertitletext{ text-align: left !important; }
.indexlistsfeedtitlebar{ border-top-color: var(--ink-100) !important; }

/* ---------- Subject icon carousel ---------- */
.natvatholder{
    background-color: var(--surface) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.natvatholder:hover{
    background-color: var(--surface) !important;
    opacity: 1 !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md) !important;
}
.subjecttitletextnew{
    font-family: var(--font-body) !important;
    font-style: normal !important;
    font-weight: 600;
    color: var(--ink-700);
}

/* ---------- Model-test / exam cards (examsholder_new grid) ---------- */
.examsholder_new{
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    background-color: var(--surface) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.examsholder_new:hover{
    background-color: var(--surface) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}
.examimage{
    border-radius: var(--radius-sm) !important;
}
.examnamenew{
    font-family: var(--font-body) !important;
    color: var(--ink-900) !important;
}
.modeltesttextbtn_new,
.practicebtn_new{
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
    border: none !important;
    background-color: var(--ink-100) !important;
    color: var(--ink-700) !important;
    transition: background-color .15s ease, color .15s ease;
}
.modeltesttextbtn_new:hover,
.practicebtn_new:hover{
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ---------- Blog / feed cards (newlistviewholderouter_grid) ---------- */
.newlistviewholderouter_grid{
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease;
}
.newlistviewholderouter_grid:hover{
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.newlistviewlistthumbnail img{
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.newlistviewlisttitle_grid{
    font-family: var(--font-body) !important;
    color: var(--ink-900) !important;
    font-weight: 600;
}
.newlistviewlistcontenttypeholder{
    background: rgba(166, 121, 14, .85) !important;
    transform: none;
    border-radius: var(--radius-pill) !important;
}
.newindexhomeseemorebuttonholder,
.homepageloadmorebutton{
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
    background-color: var(--surface) !important;
    color: var(--brand-primary) !important;
    border: 1px solid var(--ink-300);
    box-shadow: var(--shadow-sm);
    transition: background-color .15s ease, color .15s ease;
}
.newindexhomeseemorebuttonholder:hover,
.homepageloadmorebutton:hover{
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ---------- Right sidebar widgets ---------- */
.newquestionsholder,
.newmodeltestquestionsholder{
    background-color: var(--surface) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);
}
.rightsidebar h2,
.content_rightside h2{
    color: var(--ink-900) !important;
    border-left: 4px solid var(--brand-primary);
    padding-left: 10px !important;
}
.jobcircularcontentholder,
.jobcircularimgholder{
    border-radius: var(--radius-sm) !important;
}
.jobcirculartitle{ color: var(--ink-900) !important; }

/* ---------- Buttons used across the page (generic) ---------- */
.practicebtntext_new,
.modeltestbtntext_new{
    border-radius: var(--radius-pill) !important;
}

/* ---------- Hamburger button (replaces the old images/nav/test.png icon)
   and the drawer backdrop it opens on narrow screens ---------- */
.sidebar_controller_image_holder{
    display: flex;
    align-items: center;
    height: 100%;
}
#sidebar_controller_image{
    background-image: none !important;
    background-color: transparent !important;
    position: relative;
    width: 24px;
    height: 18px;
    margin: 0 0 0 8px;
    cursor: pointer;
}
#sidebar_controller_image .hamburger-bar{
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background-color: var(--ink-900);
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
#sidebar_controller_image .hamburger-bar:nth-child(1){ top: 0; }
#sidebar_controller_image .hamburger-bar:nth-child(2){ top: 7.75px; }
#sidebar_controller_image .hamburger-bar:nth-child(3){ top: 15.5px; }
body.sidebar-open #sidebar_controller_image .hamburger-bar:nth-child(1){
    top: 7.75px;
    transform: rotate(45deg);
}
body.sidebar-open #sidebar_controller_image .hamburger-bar:nth-child(2){
    opacity: 0;
}
body.sidebar-open #sidebar_controller_image .hamburger-bar:nth-child(3){
    top: 7.75px;
    transform: rotate(-45deg);
}

.sidebar-backdrop{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 5040;
}
body.sidebar-open .sidebar-backdrop{
    display: block;
}

/* ==========================================================================
   Responsive 3-column shell
   Below 992px: the left category rail becomes an off-canvas drawer (opened
   by the hamburger, closed by tapping the backdrop or a category), main
   content goes full-width, and the right sidebar — instead of being hidden
   like it used to be — drops below the content so its content (job
   circulars etc.) stays reachable by scrolling instead of disappearing.
   ========================================================================== */
@media only screen and (max-width: 992px){
    .leftbarholder{
        display: block !important;
        left: -270px !important;
        width: 260px !important;
        z-index: 5045 !important;
        transition: left .3s ease;
        box-shadow: var(--shadow-lg);
    }
    body.sidebar-open .leftbarholder{
        left: 0 !important;
    }
    .pagecontentholder{
        margin-left: 0 !important;
        width: 100% !important;
    }
    .content_body{
        display: flex !important;
        flex-direction: column;
    }
    .content{
        float: none !important;
        width: calc(100% - 20px) !important;
        margin: 0 10px 10px 10px !important;
    }
    .content_rightside{
        display: block !important;
        float: none !important;
        position: static !important;
        right: auto !important;
        width: calc(100% - 20px) !important;
        margin: 0 10px 16px 10px !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   Mobile responsiveness
   ========================================================================== */
@media only screen and (max-width: 768px){
    .indextitletextdescription{ font-size: 16px; }
    .indexlistsfeedbox{
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    }
    .natvatholder{ width: 78px !important; }
}

@media only screen and (max-width: 480px){
    .bannerholder{ height: 190px !important; }
    .indextitletextdescription{ font-size: 14px; }
    .indextab{
        margin-right: 5px !important;
        margin-top: 4px !important;
        padding: 6px 11px !important;
        font-size: 12px !important;
        gap: 4px;
    }
    .indextab-icon{
        font-size: 11.5px;
    }
    .indexlistsfeedbox{
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        width: calc(100% - 16px) !important;
        margin: 0 8px !important;
    }
    .subjectwisedatatabcontainer{
        width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
    .natvatholder{ width: 72px !important; }
    .subjectwisetabtext{ font-size: 10.5px !important; }
    .previousexamholdertitletext,
    .subjectwisequestionholdertitletext,
    .indexlistsfeedtitlebartext{
        font-size: 15px !important;
        padding-left: 8px !important;
        border-left-width: 3px;
    }
}

/* ==========================================================================
   Question Create page (createquestions.php / includes/layouts/questioncreate.php)
   Colors/typography/radius/shadow only — every rule here targets an existing
   class or ID and none of them touch width/float/position math the legacy
   layout relies on (the .questionnumber/.questionsnamefield pair, the
   .questionsclose absolute-position trick, the form's AJAX submit flow via
   .savebutton/.publishbutton living outside </form>) so nothing here can
   change what the page's JS does, only how it looks.
   ========================================================================== */
.questioncratetitleholder{ margin-bottom: 14px; }
.questioncreatetext{
    font-family: var(--font-body) !important;
    font-size: 20px !important;
    color: var(--ink-900) !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
}

/* Top options bar (category/exam year/privacy + time/negative-marking/auto-disable) */
#createquestionstitleholder{
    background-color: var(--surface) !important;
    border: 1px solid var(--ink-100) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 16px !important;
    box-sizing: border-box;
}
.selectcategory,
.selectprivacytext,
.selectnegetivemarkingtext,
.selectquestiontimetext,
.selectautodisabletext{
    color: var(--ink-700) !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
    font-size: 12.5px !important;
    margin: 5px 5px 4px 5px !important;
}
.selectsubject,
.selectprivacy,
.selectnegetivemarking,
.selecttime{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--surface) !important;
    color: var(--ink-900) !important;
    height: 36px !important;
    font-family: var(--font-body) !important;
    cursor: pointer;
}
#createquestiontitletextboxnew{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-family: var(--font-body) !important;
}
#createquestiontitletextboxnew:focus{
    border-color: var(--brand-primary) !important;
    outline: none;
}
#examtitledescriptiontextarea{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
}

/* Question cards */
.questionsli{
    background-color: var(--surface) !important;
    border: 1px solid var(--ink-100) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 16px !important;
    box-sizing: border-box;
    transition: box-shadow .2s ease;
}
.questionsli:hover{ box-shadow: var(--shadow-md) !important; }
.questionsnamefield{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
}
.questionnumber{
    color: #fff !important;
    background-color: var(--brand-primary) !important;
    border-radius: var(--radius-pill) !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    font-size: 13px !important;
    text-align: center;
    font-weight: 700;
    margin-top: 8px !important;
}
.optionsnumber{
    color: var(--brand-primary-dark) !important;
    font-family: var(--font-body) !important;
    font-weight: 700;
}
.inputoptions{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    font-family: var(--font-body) !important;
    height: 38px !important;
}
.inputoptions:focus{
    border-color: var(--brand-primary) !important;
    outline: none;
}
.selecansoption, .selecanstext{
    font-family: var(--font-body) !important;
}
.ansoptionselect{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-sm) !important;
}
.descriptiontext{
    border: 1px solid var(--ink-300) !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-body) !important;
}
.questionsclose{
    width: 26px !important;
    height: 26px !important;
    border-radius: var(--radius-pill) !important;
    background-color: var(--ink-100) !important;
    color: var(--ink-700) !important;
    text-align: center;
    line-height: 26px !important;
    font-size: 13px;
    top: -10px !important;
}
.questionsclose:hover{
    background-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* "Add another question" button */
.questioncreatebtn{
    background-color: var(--surface) !important;
    border: 1px dashed var(--ink-300) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 10px 0 !important;
    box-sizing: border-box;
}
.questioncreatebtn:hover{
    border-color: var(--brand-primary) !important;
    background-color: var(--ink-100) !important;
}
.questioncreatebuttontext{
    color: var(--brand-primary-dark) !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
    font-size: 14px !important;
}

/* Save / Publish buttons.
   Important: .savebutton/.publishbutton MUST stay float:left. The <form>
   above them has floated children and no clearfix, so it collapses to
   height:0 — these two buttons only end up visually below the form
   because floats flow past collapsed non-floated ancestors, stacking under
   whatever floated content came before them on the page. Removing the
   float (e.g. for a flex layout) drops them out of that float flow and
   they render up near the top of the collapsed container instead. */
.savepublishedbuttonholder{ width: 240px !important; }
.savebutton, .publishbutton{
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
    padding: 10px 20px !important;
    margin: 6px !important;
    border: none !important;
}
.savebutton{ background-color: var(--ink-700) !important; }
.publishbutton{ background-color: var(--brand-primary) !important; }
.savebutton:hover{ background-color: var(--ink-900) !important; }
.publishbutton:hover{ background-color: var(--brand-primary-dark) !important; }

@media only screen and (max-width: 600px){
    #createquestionstitleholder{ padding: 12px !important; }
    .selectcontenttypeholder,
    .selectcontenttypetimeholder{
        width: 100% !important;
        margin-right: 0 !important;
    }
    .selectsubject, .selectprivacy, .selectnegetivemarking, .selecttime{
        width: 100% !important;
        max-width: none !important;
    }
    .questionsli{ padding: 12px !important; }
}

/* ==========================================================================
   Exam Date — sidebar widget (rightsidebar.php #examdateholder) and the
   full "Exam Date" tab (includes/layouts/examdatecontent.php .examdatecard).
   Both read from the same exam_date_notice table; kept visually related
   (same icon, same accent color) so "See more" feels like a continuation
   of the sidebar teaser rather than a jump to an unrelated page.
   ========================================================================== */
#examdateholder{
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm);
    padding-bottom: 6px;
}
#examdateholder .examdatetitletext{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: var(--font-body) !important;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-900);
    border-bottom: 1px solid var(--ink-100);
}
#examdateholder .examdatecontainerli{
    background-color: transparent !important;
    float: none !important;
    width: calc(100% - 28px) !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--ink-100);
    transition: background-color .15s ease;
    position: relative;
}
.examdateseemorebtn{ clear: both; }
#examdateholder .examdatecontainerli:hover{
    background-color: var(--ink-100);
}
#examdateholder .examdatecategorybadge{
    display: inline-block;
    background-color: rgba(166,121,14,.12);
    color: var(--brand-primary-dark);
    font-family: var(--font-body) !important;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    margin-bottom: 4px;
}
#examdateholder .examdatetimeexamname{
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 4px;
}
#examdateholder .examdatetimeexamtime{
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}
#examdateholder .examdateicon{ font-size: 12px; }
#examdateholder .examdate{
    font-family: var(--font-body) !important;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-accent) !important;
}
.examdateseemorebtn{
    display: block;
    width: calc(100% - 20px);
    margin: 10px auto 4px;
    text-align: center;
    background-color: var(--ink-100);
    color: var(--brand-primary-dark);
    font-family: var(--font-body) !important;
    font-weight: 700;
    font-size: 13px;
    padding: 9px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background-color .15s ease;
}
.examdateseemorebtn:hover{ background-color: var(--ink-300); }

/* ---------- Full "Exam Date" tab content ---------- */
.examdatecardcontainer{
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    padding: 4px 0;
}
.examdatecard{
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.examdatecard:hover{
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.examdatecard-thumb{
    width: 100%;
    height: 140px;
    overflow: hidden;
}
.examdatecard-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.examdatecard-body{ padding: 14px; }
.examdatecard-category{
    display: inline-block;
    background-color: rgba(166,121,14,.12);
    color: var(--brand-primary-dark);
    font-family: var(--font-body) !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    margin-bottom: 8px;
}
.examdatecard-name{
    font-family: var(--font-body) !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.examdatecard-date{
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body) !important;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-accent);
    margin: 0 0 6px;
}
.examdatecard-description{
    font-family: var(--font-body) !important;
    font-size: 12.5px;
    color: var(--ink-500);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media only screen and (max-width: 480px){
    .examdatecardcontainer{ grid-template-columns: 1fr 1fr; gap: 10px; }
    .examdatecard-thumb{ height: 90px; }
}

/* ==========================================================================
   Right sidebar — remaining sections (rightsidebar.php). #examdateholder
   above already covers the Exam Date widget; this covers everything else
   in the same column: today's-date badge, job circular list, daily English
   words, and the two "most viewed / newest model test" link lists. All
   selectors are scoped under the sidebar's own exclusive wrapper classes
   (.newmodeltestquestionsholder / .mostviewedquestionsholder) since bare
   class names like .modeltesttoprow, .circularinfo and .loadmorebuttonholder
   are reused by other unrelated templates (questionrightsidebar.php,
   govjobcircular.php, currentaffairs.php) that must stay untouched.
   ========================================================================== */

/* Shared card shell + header for every sidebar widget */
.newmodeltestquestionsholder,
.mostviewedquestionsholder{
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}
.newmodeltestquestionsholder .modeltesttoprow,
.mostviewedquestionsholder .modeltesttoprow{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--ink-900) !important;
    border-bottom: 1px solid var(--ink-100);
}

/* ---------- Today's date badge ---------- */
.todaydateholder{
    padding: 10px !important;
}
.todaydate{
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background-color: rgba(166,121,14,.1);
    color: var(--brand-primary-dark) !important;
    font-family: var(--font-body) !important;
    font-size: 12.5px !important;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
}

/* ---------- সরকারি চাকরির বিজ্ঞপ্তি (job circular list) ---------- */
.jobcircularcontentholder{
    border-radius: var(--radius-md) !important;
    transition: background-color .15s ease;
    font-family: var(--font-body) !important;
}
.jobcircularcontentholder:hover{
    background-color: var(--ink-100) !important;
    font-weight: normal !important;
    color: var(--ink-900) !important;
}
.jobcircularimg{
    border-radius: var(--radius-sm) !important;
    object-fit: cover;
}
.jobcirculartitle{
    font-family: var(--font-body) !important;
    color: var(--ink-900) !important;
    font-weight: 600;
}
.jobcircularexpire{
    display: inline-block;
    font-family: var(--font-body) !important;
    color: var(--brand-accent) !important;
    font-weight: 600;
    margin-top: 2px !important;
}
.newmodeltestquestionsholder .loadmorebuttonholder{
    height: auto !important;
    margin: 6px 10px 10px !important;
    width: calc(100% - 20px) !important;
}
.indexrightcircularloadmorebutton{
    background-color: var(--ink-100) !important;
    color: var(--brand-primary-dark) !important;
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    height: auto !important;
    padding: 9px !important;
    border-radius: var(--radius-pill) !important;
    transition: background-color .15s ease;
}
.indexrightcircularloadmorebutton:hover{ background-color: var(--ink-300) !important; }
.emptycirculardiv{
    font-family: var(--font-body) !important;
    color: var(--ink-500) !important;
    height: auto !important;
    margin: 20px 0 !important;
}

/* ---------- Daily English words ---------- */
.englishwordmeaningholder{ margin-bottom: 0 !important; }
.englishwordholder{
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 14px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--ink-100);
    transition: background-color .15s ease;
}
.englishwordholder:hover{ background-color: var(--ink-100); }
.englishword{
    width: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    color: var(--brand-primary-dark) !important;
    font-family: var(--font-body) !important;
    background-color: rgba(166,121,14,.1);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}
.banglaword{
    width: auto !important;
    flex: 1 1 auto;
    height: auto !important;
    min-width: 0;
    color: var(--ink-700) !important;
    font-family: var(--font-body) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Most viewed / newest model test lists ---------- */
.mostviewedquestionsholder .modeltestbottomrow{ padding-bottom: 6px; }
.rightsidenewquestions{
    box-sizing: border-box;
    width: calc(100% - 20px) !important;
    margin: 8px 10px !important;
    background-color: var(--ink-100) !important;
    box-shadow: none !important;
    border-radius: var(--radius-md) !important;
    transition: background-color .15s ease, transform .15s ease;
}
.rightsidenewquestions:hover{
    background-color: rgba(166,121,14,.1) !important;
    color: var(--brand-primary-dark) !important;
    box-shadow: none !important;
    transform: translateX(2px);
}
.questioinnametxt{
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 9px 12px;
    font-family: var(--font-body) !important;
}