/* =============== color pallet =============== */
:root {
    --white-color: #ffffff;
    --black-color: #000000;
}


body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/*
   Scoped to ":not(pre) > code" (same pattern Prism itself uses) so this
   only styles short inline code snippets like <code>new</code> written
   directly in a sentence. Without this scoping, the border/padding here
   used to also apply to the multi-line <code class="language-java"> block
   inside <pre>; since <code> is an inline element, a border on it gets
   redrawn on every wrapped text line -- that's what showed up as a thin
   colored line after every line of Java code in dark mode. Prism's own
   syntax-highlighted blocks are left completely alone below.
*/
:not(pre) > code {
    background: var(--bg-section);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 3px 6px;
    border-radius: 4px;
}

.dark_code {
    background: #2a2727;
    color: #a39f9f;
    padding: 3px 3px;
    border-radius: 4px;
}

/* =============== Prism syntax-highlighted code blocks =============== */
/*
   Prism's own theme (prism-tomorrow) fully controls token colors and is
   left untouched here -- it already looks correct in both dark and light
   site themes since it's a permanently-dark code block (like GitHub).
   Only spacing/shape/shadow are added for visual polish, and everything
   uses !important because prism-tomorrow.min.css is linked AFTER this
   file in <head>, so plain rules here would otherwise get overridden.
*/
pre[class*="language-"] {
    border-radius: var(--radius-md, 10px) !important;
    box-shadow: var(--shadow-card, 0 4px 20px rgba(0, 0, 0, 0.18)) !important;
    border: 1px solid var(--border-color) !important;
    /* room on the right so long lines never run under the copy button */
    padding-right: 2.6em !important;
}

/*
   Wrapper div the copy-button script now creates AROUND each <pre>
   (pre.parentNode -> .notes-code-block -> pre). The <pre> itself is
   still the only element that scrolls horizontally (Prism's own
   overflow:auto on long code lines); the copy button lives as a
   SIBLING of <pre> inside this wrapper instead of a child of it, so
   it stays pinned to the corner and never scrolls away with the code.
*/
.notes-code-block {
    position: relative;
    margin: .5em 0;
}

.notes-code-block pre[class*="language-"] {
    margin: 0 !important;
}

/* Small, icon-only button in the corner -- doesn't sit on top of code,
   and a CSS-only tooltip on hover/focus explains what it does instead
   of a permanent text label taking up space. */
.notes-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: .85rem;
    color: #ddd;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    z-index: 3;
}

/* Text label is intentionally hidden -- icon alone is a universally
   understood convention; the tooltip below covers anyone unsure. */
.notes-copy-btn span {
    display: none;
}

.notes-copy-btn::after {
    content: "Copy";
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: .68rem;
    font-weight: 500;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.notes-copy-btn:hover::after,
.notes-copy-btn:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.notes-copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.notes-copy-btn:active {
    transform: scale(0.92);
}

.notes-copy-btn.copied {
    background: rgba(107, 203, 119, 0.25);
    border-color: rgba(107, 203, 119, 0.6);
    color: #6BCB77;
}

.notes-copy-btn.copied::after {
    content: "Copied!";
}

@media (max-width: 576px) {
    .notes-copy-btn {
        width: 26px;
        height: 26px;
        top: 6px;
        right: 6px;
        font-size: .78rem;
    }

    pre[class*="language-"] {
        padding-right: 2.3em !important;
    }
}

h2 {
    color: var(--text-primary);
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

h3 {
    color: var(--text-primary);
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

h4 {
    color: var(--text-primary);
    /* text-shadow: .5px .5px 1px rgba(0, 0, 0, 0.3); */
}

h5 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

h6 {
    font-size: .9rem;
    color: var(--primary);
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */
}

/* =============== user restriction css starts =============== */
.restrict-body-content {
    user-select: none;
    /* Disable for modern browsers */
    -webkit-user-select: none;
    /* Disable for Safari */
    -moz-user-select: none;
    /* Disable for Firefox */
    -ms-user-select: none;
    /* Disable for IE/Edge */
}

/* stop right click and copy
div {
    -webkit-user-select: none; Safari
    -ms-user-select: none; IE 10 and IE 11
    user-select: none; Standard syntax
} */



/* =============== notes designing starts =============== */

.nextline-nowrap {
    white-space: nowrap;
}

.notes-header-navlinks {
    text-decoration: none;
    color: white;
    white-space: nowrap;
}

.notes-header-navlinks:hover {
    color: #c1c1c1;
}

/*
   On desktop #notes-sidebar just sticks under the main navbar while the
   page scrolls (normal column in the .row). On mobile (max-width:992px
   block below) it becomes a real off-canvas drawer that slides in from
   the left when the "All Topics" button (#notes-all-topics-btn) is
   tapped.

   Note on #notes-all-topics-btn: no such trigger button ever existed
   anywhere in the PHP markup (checked across the whole project) --
   that missing button, not any CSS, was the entire reason the mobile
   menu never opened. Since editing 2000 PHP files isn't practical, the
   button is created once automatically (for every tutorial page) by a
   small addition to the shared assets/js/script.js -- it is inserted
   right above the topic list, directly under the main navbar -- and
   styled entirely here. This is separate from, and does not affect,
   the site's main navbar hamburger (Bootstrap's .navbar-toggler).
*/
.notes-sidebar {
    height: calc(100vh - var(--navbar-height, 72px));
    width: auto;
    position: sticky;
    /* Make the sidebar sticky */
    top: var(--navbar-height, 72px);
    /* Stick right under the sticky main navbar */
    left: 0;
    background-color: var(--bg-section);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 16px);
    box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.08));
    padding-top: 20px;
    overflow-y: auto;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 5;
}

/* Keep these for the collapsed sidebar behavior */
.notes-sidebar.collapsed {
    transform: translateX(-100%);
}

#notes-sidebar-close-btn {
    display: none;
}

/* Hidden by default (desktop doesn't need it); shown at <992px below */
#notes-all-topics-btn {
    display: none;
}

.notes-sidebar-closeBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    /* Reduce the width */
    height: 20px;
    /* Reduce the height */
    font-size: 10px;
    /* Reduce the font size */
    border: none;
    cursor: pointer;
    background-color: transparent;
    /* No background color */
    color: white;
    background-color: white;
}

#notes-navBar {
    display: block;
}

/* ===============================================================
   MOBILE (<992px) OFF-CANVAS TOPIC MENU + "All Topics" BUTTON
   =================================================================== */
@media (max-width: 992px) {
    .notes-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, 84vw);
        height: 100vh;
        max-height: none;
        border-radius: 0 var(--radius-lg, 24px) var(--radius-lg, 24px) 0;
        transform: translateX(-100%);
        padding-top: 20px;
        margin: 0;
        z-index: 2000;
    }

    .notes-sidebar.active {
        transform: translateX(0);
        /* Full-screen dim backdrop with zero extra markup */
        box-shadow: 0 0 0 100vmax rgba(4, 9, 30, 0.6);
    }

    .notes-content {
        margin-left: 0;
    }

    /* Full-width bar button, inserted by script.js right above the
       topic list -- i.e. just below the navbar, above the topics --
       visible on mobile only. Tapping it opens the drawer above. */
    #notes-all-topics-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 16px;
        margin: 16px 0;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md, 12px);
        background: var(--bg-card);
        color: var(--text-primary);
        font-weight: 600;
        font-size: .95rem;
        cursor: pointer;
        box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
        transition: transform 0.15s ease, background-color 0.2s ease;
    }

    #notes-all-topics-btn i {
        font-size: 1.1rem;
        color: var(--primary);
    }

    #notes-all-topics-btn:active {
        transform: scale(0.98);
    }

    #notes-sidebar-close-btn {
        display: block;
    }

    #notes-navBar {
        display: none;
    }

    .notes-sidebar .nav-item {
        padding: 0 6px;
    }

    .notes-sidebar a.nav-link {
        padding: 9px 12px;
        font-size: .85rem;
    }
}

/* Prevent background scroll while the mobile drawer is open
   (class is toggled on <body> by script.js alongside the sidebar) */
body.notes-sidebar-open {
    overflow: hidden;
}


.notes-sidebar a.nav-link {
    color: var(--text-secondary);
    /* Default link color */
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    border-radius: var(--radius-sm, 8px);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.notes-sidebar a.nav-link:hover {
    background-color: var(--bg-card);
    /* Background color change on hover */
    color: var(--primary);
    /* Text color change on hover */
}

.notes-sidebar a.nav-link.active {
    background-color: var(--primary);
    /* Active link background */
    color: var(--text-white, #fff);
    /* Active link text color */
}


.notes-content {
    transition: margin-left 0.3s ease;
}

.notes-div {
    padding: 20px;
}

/* =============== notes content: lists (ol/ul/li) =============== */
.notes-div ol,
.notes-div ul {
    color: var(--text-secondary);
}

.notes-div li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.notes-div li strong {
    color: var(--text-primary);
}

.notes-div ul ul,
.notes-div ol ol,
.notes-div ul ol,
.notes-div ol ul {
    margin-top: 6px;
}

/* =============== notes content: Bootstrap alerts =============== */
/*
   Bug fix: .notes-div li strong above (needed to make bold text stand
   out inside plain list items) was, by coincidence of specificity,
   ALSO winning over Bootstrap's own alert text color whenever an
   <div class="alert ..."> happened to sit inside an <li> with a
   <strong> in it -- in dark mode that meant the strong text turned
   near-white and became illegible against the alert's own light
   background. This restores the alert's intended color for any
   strong/em/text inside it, then themes the alerts themselves (colors
   only, same Bootstrap classes) so they fit both site themes properly
   instead of being fixed light boxes that ignore dark mode.
*/
.notes-div .alert {
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary);
}

.notes-div .alert strong,
.notes-div .alert em,
.notes-div .alert a {
    color: inherit;
}

.notes-div .alert-danger {
    background-color: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.4);
}

.notes-div .alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.4);
}

.notes-div .alert-success {
    background-color: rgba(25, 135, 84, 0.14);
    border-color: rgba(25, 135, 84, 0.4);
}

.notes-div .alert-info {
    background-color: rgba(13, 202, 240, 0.14);
    border-color: rgba(13, 202, 240, 0.4);
}

.notes-div .alert-secondary {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}

.notes-div .alert-primary {
    background-color: rgba(108, 99, 255, 0.12);
    border-color: rgba(108, 99, 255, 0.4);
}

/* =============== notes content: Bootstrap tables =============== */
/*
   Bootstrap 5 tables theme themselves through their own CSS custom
   properties (--bs-table-bg, --bs-table-color, --bs-table-striped-bg,
   --bs-table-hover-bg, --bs-table-border-color, etc.), which are NOT
   linked to this site's [data-theme] system. Left alone, a
   <table class="table table-striped table-hover table-bordered"> would
   always render with Bootstrap's light defaults (white background,
   dark text) even when the site is in dark mode. Re-pointing those same
   variables at this site's own design tokens fixes that everywhere a
   table appears inside notes content, in both themes, with no HTML
   changes needed.
*/
.notes-div .table {
    --bs-table-bg: var(--bg-card);
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: var(--bg-section);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: var(--bg-section);
    --bs-table-hover-color: var(--text-primary);
    --bs-table-active-bg: var(--bg-section);
    --bs-table-active-color: var(--text-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    font-size: .9rem;
    border-radius: var(--radius-sm, 8px);
}

.notes-div .table td,
.notes-div .table th {
    border-color: var(--border-color);
    vertical-align: middle;
}

/* thead.table-dark is left as-is on purpose -- a permanently dark
   header row reads fine and looks intentional in both themes, the
   same way the "always-dark" code blocks do elsewhere on this page. */
.notes-div .table thead.table-dark th {
    border-color: rgba(255, 255, 255, 0.15);
}

/* thead.table-primary (e.g. the Access Control table) is re-themed to
   the site's own brand purple instead of Bootstrap's fixed light-blue
   default, so it doesn't look like a mismatched pale box in dark mode. */
.notes-div .table thead.table-primary th {
    background-color: var(--primary);
    color: var(--text-white, #fff);
    border-color: rgba(255, 255, 255, 0.15);
}

/*
   IMPORTANT (fixes content overflowing into the right sidebar/ads, and
   the whole page scrolling sideways on mobile instead of just the
   table): many of the ~2000 tutorial pages have a plain
   <table class="table ..."> with no <div class="table-responsive">
   wrapper around it (that wrapper can't be retrofitted onto every
   page without editing PHP). A wide table with long, un-wrapping
   content used to be able to grow past its column's width, and since
   Bootstrap's .row is a flex container, an overflowing flex item
   doesn't get clipped by its siblings by default -- so the table
   visually spilled out and rendered underneath/behind the right
   sidebar's ad column, and forced the whole page to scroll
   horizontally on mobile instead of just the table.

   Giving every table its own horizontal scrollbar directly (instead
   of relying on a wrapper div that may or may not exist) fixes this
   everywhere, with zero HTML changes: the table now always scrolls
   within its own box, keeps its normal column layout (display isn't
   touched), and can never push its column -- or the page -- wider
   than intended.
*/
.notes-div table {
    display: table;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The flex column that holds the notes content must be allowed to
   shrink below its content's natural size (Flexbox items don't do
   this by default), otherwise a wide table can still force the whole
   .row wider than the viewport even with the scrolling above. */
.notes-content,
.notes-div {
    min-width: 0;
}

/*
   Pages that DO wrap their table in Bootstrap's own
   <div class="table-responsive"> still get that div's default
   scrolling behaviour, plus the same touch-scroll smoothing and a
   slimmer, theme-aware scrollbar here for polish.
*/
.notes-div .table-responsive {
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm, 8px);
}

.notes-div table::-webkit-scrollbar,
.notes-div .table-responsive::-webkit-scrollbar {
    height: 6px;
}

.notes-div table::-webkit-scrollbar-thumb,
.notes-div .table-responsive::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

.notes-imp-div {
    padding: 15px;
    background-color: #1d1d1d;
    color: white;
    box-shadow: 0px 0px 5px rgb(108, 108, 108);
    border-radius: 5px;
}

.flag-notes-imp-div {
    border-left: 5px solid var(--primary);
}

/* .notes-heading {
    font-size: 1.4rem;
    color: #141414;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.notes-subheading {
    font-size: 1.1rem;
    color: #414141;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
} */

.notes-sub-subheading {
    font-size: .9rem;
    color: #563cff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.more-advanced-concepts-div {
    padding: 10px;
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm, 0px 0px 5px rgb(187, 187, 187));
    border-radius: 3px;
    text-decoration: none;
}

.more-advanced-concepts-href {
    text-decoration: none;
    font-weight: bold;
}

.notes-red-border-box {
    border: 2px solid red;
    border-radius: 3px;
    padding: 10px;
}

.notes-red-border-box-text {
    position: relative;
    bottom: 25px;
    padding: 0px 10px 0px 10px;
    color: #0088cc;
    left: 15px;
    font-size: 1.3rem;
    background-color: var(--bg-main);
    display: inline;
}

.para-note {
    padding: 10px;
    background-color: var(--bg-section);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm, 0px 0px 5px rgb(180, 180, 180));
    border-radius: 5px;
    border-left: 2px solid var(--primary);
}

.feedback-div {
    padding: 10px;
    color: var(--text-primary);
    box-shadow: var(--shadow-sm, 0px 0px 5px rgb(180, 180, 180));
    border-radius: 5px;
}

.feedback-div-java-bg {
    background-color: var(--bg-card);
    border-left: 2px solid var(--primary);
}

.feedback-div-spring-bg {
    background-color: var(--bg-section);
    border-left: 2px solid #007204;
}

.feedback-para {
    font-size: 14px;
}

.feedback-href {
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    background-image: var(--gradient-primary, linear-gradient(to right, #0c7ae8 0%, #3714c2 100%));
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.feedback-href:hover {
    opacity: .9;
    color: white;
}

.image-shadow {
    box-shadow: 0px 0px 10px #363636;
}

/* =============== notes designing ends =============== */


/* =============== tutorials page designing starts =============== */
.card-item {
    box-sizing: border-box;
    width: 300px;
    border-radius: 5px;
    margin: 20px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-card, 12px 15px 30px rgba(0, 0, 0, 0.22));
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-color);
    border-radius: 17px;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    color: var(--text-primary);
}

.card-item:hover {
    transform: scale(1.10);
}

/* .card-item:active 
{
  transform: scale(0.95) rotateZ(1.7deg);
} */
.tech-card-design {
    background-color: var(--bg-section);
    width: 100%;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    padding: 20px;
}

/* =============== tutorials page designing ends =============== */


/* =============== notes starting watch youtube video starts =============== */
.video-container {
    background: var(--gradient-primary, linear-gradient(135deg, #007bff, #0056b3));
    /* Gradient background */
    padding: 20px;
    border-radius: 20px;
    align-items: center;
    justify-content: space-between;
    margin: 50px auto;
    box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.2));
    /* Shadow for 3D effect */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Hover effect: lift with shadow */
.video-container:hover {
    transform: translateY(-5px);
    /* Lift on hover */
    box-shadow: var(--shadow-lg, 0 15px 40px rgba(0, 0, 0, 0.3));
    /* Deeper shadow on hover */
}

/* Video section styling */
.video-section {
    position: relative;
    border-radius: 15px;
    transition: transform 0.3s ease-in-out;
}

/* Video thumbnail */
.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play button styling */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 3D effect on play button */
}

.play-button img {
    width: 24px;
}

.play-button:hover {
    background: rgba(255, 255, 255, 1);
    /* Slightly brighter on hover */
}

/* Hover effects for the video section */
.video-container:hover .video-section {
    transform: scale(1.1);
    /* Zoom effect on hover */
}

.video-container:hover h5 {
    color: #ffdd57;
    /* Yellow color on hover */
}

/* Styling for the text section */
.text-section h5 {
    color: white;
    margin-left: 20px;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

/* =============== notes starting watch youtube video ends =============== */


/* =============== notes designing starts =============== */
.question-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 15px;
    background-color: var(--bg-card);
    padding: 15px;
    overflow: auto;
}

.question-title {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 1.1rem;
}

.answer-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.pagination {
    justify-content: center;
    margin-top: 30px;
}

/*
   Program "Output" window, redesigned to read as a terminal/console
   rather than just another gray box -- so it's instantly recognisable
   as "this is what the code prints" and doesn't blend in with the
   alert boxes or .para-note callouts nearby. Kept permanently dark
   (like the Prism code blocks) regardless of site theme, since a
   console output is conventionally a dark box either way.
*/
.output-window {
    position: relative;
    background-color: #1a1d29;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 4px solid #27c93f;
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-card, 0 4px 18px rgba(0, 0, 0, 0.28));
    padding: 34px 18px 18px;
    margin: 14px 0;
    overflow: hidden;
}

/* macOS-style terminal window dots, purely decorative, signal
   "this is a console/output" at a glance */
.output-window::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 18px 0 0 #ffbd2e, 36px 0 0 #27c93f;
}

/* The "Output:" label becomes a small title-bar tag in the top-right
   corner instead of a regular heading, reinforcing the console look */
.output-window .notes-sub-subheading {
    position: absolute;
    top: 10px;
    right: 16px;
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: none;
}

.output-window-font {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    color: #6BCB77;
    line-height: 1.7;
}

/* "Click Here" type links in notes – highlighted chip so students
   clearly see they can click. Second selector beats
   ".notes-div .alert a { color: inherit }" (links inside note boxes). */
.notes-link-style,
.notes-div .alert a.notes-link-style {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    background-color: rgba(108, 99, 255, 0.12);
    border: 1px solid rgba(108, 99, 255, 0.35);
    border-radius: 6px;
    padding: 1px 8px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.notes-link-style:hover,
.notes-link-style:focus-visible,
.notes-div .alert a.notes-link-style:hover,
.notes-div .alert a.notes-link-style:focus-visible {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

[data-theme="dark"] .notes-link-style,
[data-theme="dark"] .notes-div .alert a.notes-link-style {
    color: #a59fff;
    background-color: rgba(108, 99, 255, 0.18);
    border-color: rgba(165, 159, 255, 0.45);
}

[data-theme="dark"] .notes-link-style:hover,
[data-theme="dark"] .notes-div .alert a.notes-link-style:hover {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

/*
   Right sidebar (course promo + Google Ads):
   Hidden below 768px (mobile only) since mobile gets a single
   bottom sticky ad instead (google-ads-mobile-sticky.php).
   From 768px up (tablet AND desktop) it becomes visible — sticky
   column that stays in view while the page scrolls. The actual
   <ins class="adsbygoogle"> ad unit itself is injected by
   assets/js/script.js (see "initNotesSidebarAd") into the
   .right-sidebar-ad-slot box below -- no PHP file needs to be
   touched for this.
*/
.right-sidebar {
    display: none;
}

@media (min-width: 768px) {
    .right-sidebar {
        display: flex;
        flex-direction: column;
        background-color: var(--bg-section);
        border-left: 1px solid var(--border-color);
        position: sticky;
        top: calc(var(--navbar-height, 72px) + 16px);
        align-self: flex-start;
        max-height: calc(100vh - var(--navbar-height, 72px) - 32px);
        overflow-y: auto;
        padding-bottom: 16px;
    }
}

/* Container the ad script injects the <ins class="adsbygoogle"> into.
   flex:1 makes it stretch to fill the WHOLE right-sidebar height
   (course promo removed — this sidebar is now 100% ad space),
   min-height keeps a sensible floor if the sidebar itself is short. */
.right-sidebar-ad-slot {
    flex: 1;
    margin: 16px 10px 0;
    padding: 8px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
    overflow: hidden;
}

.right-sidebar-ad-slot .adsbygoogle {
    width: 100%;
}

#youtube-icon {
    color: red;
}

#youtube-icon:hover {
    color: darkred;
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        /* Adjust scale to increase size */
        opacity: 0;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.animate-ping {
    display: inline-block;
    /* Ensure the element is inline-block */
    position: relative;
}

.animate-ping::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100%;
    /* Base size of the animation */
    height: 100%;
    border: 2px solid rgb(255, 138, 138);
    /* Outline for the ping effect */
    border-radius: 50%;
    /* Circular shape */
    animation: ping 1s infinite;
    /* Ping animation with 1s duration */
    opacity: 0;
    pointer-events: none;
}


.right-sidebar-top-heading {
    background: var(--bg-card);
    border-radius: 5px;
    margin: 15px;
    box-shadow: var(--shadow-card, 5px 5px 15px rgba(0, 0, 0, 0.1));
    /* 3D shadow effect */
    font-size: .9rem;
    color: var(--text-primary);
    /* Neutral text color */
}

.text-image-item {
    display: flex;
    /* justify-content: space-between; */
    /* align-items: center; */
}

.text-image-item img {
    max-width: 100px;
    /* Adjust the image size as needed */
    height: auto;
}


/* -----java programs list designing------ */
.program-list {
    max-width: 600px;
    margin: 50px auto;
}

.program-item {
    display: flex;
    justify-content: space-between;
    /* Distribute items across the container */
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
    color: var(--text-primary);
}

.program-title {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-primary);
    flex-grow: 1;
    /* Allow title to take available space */
    padding-left: 10px;
}

.solution-btn {
    text-decoration: none;
    font-size: 0.8rem;
    color: var(--primary);
    display: flex;
    align-items: center;
    font-weight: bold;
}

.solution-btn:hover {
    color: var(--primary-dark, #0056b3);
}

.solution-btn i {
    margin-left: 5px;
}

.large-badge {
    font-size: .9rem;
    /* Increase font size */
    padding: 0.3rem .6rem;
    /* Adjust padding for larger badge */
}

.star-program-item {
    justify-content: space-between;
    /* Distribute items across the container */
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.1));
    color: var(--text-primary);
}

/* =============== notes designing ends =============== */

/* =============== horizontal scroll fix (tutorial pages) ===============
   1. Page ka main layout <div class="row"> body ke andar bina .container
      ke hai, isliye Bootstrap ke -12px side margins se page 12px chauda
      ho jata tha. Sirf us top-level row ke margins 0 kiye.
   2. Footer ka "row g-5" mobile par 24px gutter margin deta hai jo
      container padding (12px) se zyada hai – mobile par gutter chhota kiya. */
body > .row {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 575.98px) {
    #footer .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* 3. Footer me lamba email (992-1199px par patle column me) bahar nikal
      raha tha – ab zarurat padne par next line me toot jayega. */
#footer .footer-contact-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 4. Feedback form pages: Google Form iframe ki fixed width 640px mobile
      par screen se badi thi – ab screen ki width tak hi rahegi. */
.page-under-construction iframe {
    max-width: 100%;
}

/* 5. Notes ke andar ki badi tables (comparison tables) mobile par screen
      se chaudi thi – ab table apne andar side-scroll hogi, poora page nahi. */
@media (max-width: 767.98px) {
    .notes-div table.table {
        display: block;
        overflow-x: auto;
    }
}