/* =========================================================================
   STYLE.CSS - Unified Stylesheet (Courses + Blog + Navigation + Cards)
   ========================================================================= */

/* -------------------------------------------------------------------------
   VARIABLES & THEME CONFIGURATION
   ------------------------------------------------------------------------- */
/* Light Theme (Blog) Overrides */
html[data-bs-theme="light"] {
    --main-color: #212529;
    --meta-color: rgb(92, 99, 106);
    --bg-color: #ecf0f3;
    --alt-bg-color: #fcfcfc;
    --nav-link-color: #212529;

    /* ACCENT FOR LIGHT THEME: Indigo/Blurple */
    --accent-color: #4f46e5;
    --accent-text-color: #ffffff;
    
    /* Link Colors (Light) - Matching Indigo Accent */
    --link-color: #4f46e5;
    --link-hover-color: #3730a3;

    /* Soft Button Vars (Light) */
    --btn-soft-bg: #ffffff;
    --btn-soft-color: #212529;
    --btn-soft-hover-bg: #f8f9fa;
    --btn-soft-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:root {
    /* DEFAULT (Dark Theme / Courses) */
    --main-color: #dfdfdf;
    --meta-color: #adb5bd;
    --bg-color: #1a1d20;
    --alt-bg-color: #313131; 
    --focus-color: #b90503;
    --nav-link-color: #dfdfdf;
    
    /* ACCENT FOR DARK THEME: Amber/Yellow */
    --accent-color: #ffc107;
    --accent-text-color: #000000;

    /* Link Colors (Dark) - Matching Amber Accent */
    --link-color: #ffc107;
    --link-hover-color: #ffca2c;

    /* Soft Button Vars (Dark) */
    --btn-soft-bg: rgba(255, 255, 255, 0.05);
    --btn-soft-color: #e0e0e0;
    --btn-soft-hover-bg: rgba(255, 255, 255, 0.1);
    --btn-soft-shadow: none;
}




/* -------------------------------------------------------------------------
   RESET & BASE STYLES
   ------------------------------------------------------------------------- */
html,
body {
    color: var(--main-color);
    background: var(--bg-color);
    height: 100%;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

a:hover {
    color: var(--link-hover-color);
}

/* Typography Overrides */
/* Default font sizes (Courses) */
h1 {
    text-align: center;
    font-size: calc(1rem + 1.5vw);
    padding-top: 40px;
    padding-bottom: 20px;
}

h2 {
    font-size: calc(0.9rem + .9vw);
}

h3 {
    font-size: calc(0.7rem + .9vw);
}

/* Blog Typography Overrides */
html[data-bs-theme="light"] body {
    font-size: 18px;
}

@media (min-width: 992px) {
    html[data-bs-theme="light"] body {
        font-size: 17px;
    }
}

html[data-bs-theme="light"] h1 {
    font-size: 34px;
    padding-top: 40px;
}

html[data-bs-theme="light"] h2 {
    font-size: 28px;
    margin: 20px 0 8px;
}

html[data-bs-theme="light"] h3 {
    font-size: 24px;
    margin: 36px 0 8px;
}

@media (max-width: 992px) {
    html[data-bs-theme="light"] h1 {
        font-size: 30px;
    }

    html[data-bs-theme="light"] h2 {
        font-size: 24px;
    }

    html[data-bs-theme="light"] h3 {
        font-size: 20px;
    }
}

/* -------------------------------------------------------------------------
   NAVIGATION (Merged from navigation.css)
   ------------------------------------------------------------------------- */
header nav {
    background-color: var(--bg-color);
    /* In blog: var(--main-bg-color) was white. Here bg-color is white in light mode. */
    /* Wait, navigation.css said header nav bg is --main-color (#212529). 
       In dark mode color is white.
       Let's stick to existing logic from navigation.css but adapted.
    */
}

/* Fix header nav back to what navigation.css intended if relevant, 
   but navigation.css had conflicting definitions for light/dark.
   Let's assume universal header behavior or keep it specific.
*/

html[data-bs-theme="light"] header nav {
    background-color: white;
    color: black;
}

html[data-bs-theme="dark"] header nav {
    background-color: #212529;
    color: #dfdfdf;
}

/* SIDEBAR LAYOUT */
@media (max-width: 992px) {
    .sidebar {
        display: none;
    }
}

.sidebar-menu {
    position: sticky;
    top: 100px;
}

.sidebar-menu-buttons-block {
    list-style: none;
    padding-left: 0;
}

.sidebar-menu-button {
    margin-bottom: 5px;
    border-radius: 12px;
    transition: all 0.6s;
}

.sidebar-menu-button:hover {
    background-color: rgba(92, 99, 106, 0.09);
    transition: all 0.6s;
}

.sidebar-menu-button.active {
    background-color: rgba(92, 99, 106, 0.15);
}

.sidebar-nav-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    width: 100%;
}

/* Sidebar colors */
html[data-bs-theme="light"] .sidebar-nav-link {
    color: var(--main-color);
}

html[data-bs-theme="dark"] .sidebar-nav-link {
    color: #dfdfdf;
}

/* BOTTOM MENU */
@media (min-width: 992px) {
    .bottom-menu {
        display: none;
    }
}

/* HEADER/FOOTER SHARED */
header,
header .navbar {
    height: 55px;
}

header nav.navbar {
    padding: 0px;
}

.navbar-brand {
    font-size: 0.8rem;
    padding: 9px 0;
}

.logo {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 7px;
}

footer {
    height: 58px;
}

footer>nav.fixed-bottom {
    font-size: 0.7rem;
    padding: 3px 0;
}

.footer-docs {
    padding-bottom: 3rem;
}
@media (max-width: 992px) {
    .footer-docs {
        padding-bottom: 7rem;
    }
}

.nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 0.7rem;
}

.nav-link i {
    font-size: 18px;
}

.nav-pills {
    max-width: 600px;
    margin: 0 auto;
}

.nav-pills .nav-link {
    color: #5c636a;
}

.nav-pills .nav-link.active {
    background-color: inherit;
}

.description {
    z-index: 3;
}

.top-menu-user-image {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 7px;
}

/* -------------------------------------------------------------------------
   CARD STYLES (Merged from card.css)
   ------------------------------------------------------------------------- */
.card {
    --bs-card-border-radius: 1rem;
}

.post-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow .3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

html[data-bs-theme="light"] .post-card {
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bought-course-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: var(--alt-bg-color);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none !important;
    color: inherit !important;
}

.bought-course-card:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

.bought-course-card-arrow {
    opacity: 0.2;
    transition: all 0.3s ease;
    font-size: 1.5rem;
}

.bought-course-card:hover .bought-course-card-arrow {
    opacity: 1;
    transform: translateX(5px);
    color: var(--accent-color);
}

.post-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-card:hover {
    transition: all 0.3s ease;
    border-color: rgba(255, 255, 255, 0.2);
    background: var(--btn-soft-hover-bg);
    opacity: 0.7;
    box-shadow: none;
}

html[data-bs-theme="light"] .post-card:hover {
    background: var(--btn-soft-hover-bg);
    border-color: rgba(0, 0, 0, 0.1);
    opacity: 0.7;
    box-shadow: none;
}

.card-post-link {
    top: 0;
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
    border-radius: 20px;
    outline: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.card-post-description {
    padding: 12px;
    border: var(--alt-bg-color) 1px solid;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-size: 15px;
    background-color: var(--alt-bg-color);
}

.card-post-description a {
    text-decoration: none;
    font-weight: 500;
    color: var(--main-color);
}

.card-post-description-meta {
    font-size: calc(0.7rem + 0.1vw);
    font-weight: 300;
    color: var(--meta-color);
    margin-top: 5px;
    margin-bottom: 0;
}

/* 16:9 Image Container */
.post-card-image-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 aspect ratio */
    overflow: hidden;
}

/* 1:1 Image Container (Square) */
.product-card-image-box {
    position: relative;
    width: 100%;
    padding-top: 100%;
    /* 1:1 aspect ratio */
    overflow: hidden;
}

@media (max-width: 768px) {
    .card-post-description {
        font-size: calc(0.7rem + .6vw);
    }
}

br-20 {
    border-radius: 20px !important;
}

/* -------------------------------------------------------------------------
   PRODUCT SPECIFIC STYLES (Merged from products.css)
   ------------------------------------------------------------------------- */
.product-cover img {
    margin-top: 50px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

.price {
    display: inline-block;
    font-size: 25px;
    margin-bottom: 18px;
    font-weight: 700;
}

/* -------------------------------------------------------------------------
   BLOG SPECIFIC STYLES (Merged from style-blog.css)
   ------------------------------------------------------------------------- */
article h1 {
    text-align: left;
    padding-bottom: 0;
}

article h2 {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

article hr {
    margin: 2rem 0;
}

.post-header {
    margin-bottom: 20px;
}

.post-description {
    font-size: calc(0.7rem + 0.1vw);
    font-weight: 300;
    color: var(--meta-color);
    margin-bottom: 8px;
    /* Adapted color to var */
}

html[data-bs-theme="light"] .post-description {
    font-size: calc(0.7rem + 0.1vw);
    /* Keep consistency */
}

.hashtag,
.author,
.author a {
    display: inline-block;
    font-weight: 600;
    text-decoration: none;
    border-radius: 1rem;
    padding: 0.35em 0.8em;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    line-height: normal;
}

/* Light Theme - Harmonious grey chips */
html[data-bs-theme="light"] .hashtag,
html[data-bs-theme="light"] .author,
html[data-bs-theme="light"] .author a {
    color: var(--main-color);
    background-color: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-bs-theme="light"] .hashtag:hover,
html[data-bs-theme="light"] .author:hover,
html[data-bs-theme="light"] .author a:hover {
    background-color: rgba(0, 0, 0, 0.15); /* Darker on hover */
    color: var(--main-color);
}

/* Dark Theme - Amber accents with subtle tint */
html[data-bs-theme="dark"] .hashtag,
html[data-bs-theme="dark"] .author,
html[data-bs-theme="dark"] .author a {
    color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.2);
    opacity: 1;
}

html[data-bs-theme="dark"] .hashtag:hover,
html[data-bs-theme="dark"] .author:hover,
html[data-bs-theme="dark"] .author a:hover {
    background-color: rgba(255, 193, 7, 0.25); /* Richer/Darker on hover */
    color: #ffca2c;
}


.hashtag::before,
.post-card-hashtag::before {
    content: '#';
}

.article-footer {
    padding-bottom: 6rem;
    height: auto;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.image-description {
    text-indent: 0;
    font-style: italic;
    font-size: 14px;
    text-align: center;
    color: #707070;
    margin-bottom: 20px;
    margin-top: 10px;
}

/* BLOCKQUOTE (Blog specific) */
blockquote {
    font-style: italic;
    margin: 20px 0;
    padding: 15px 20px;
    border-left: 2px solid #3A3A3A;
    background-color: #f9f9f9;
    color: #555;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

blockquote p {
    margin: 0;
}

/* CASES (Blog/Portfolio) */
.case-student-ava {
    object-fit: cover;
    width: 45px;
    height: 45px;
    margin-right: 7px;
}

.case-student-about {
    display: flex;
}

.case-student-about-image img {
    object-fit: cover;
    width: 45px;
    height: 45px;
}

/* -------------------------------------------------------------------------
   COURSES SPECIFIC (Merged from style.css)
   ------------------------------------------------------------------------- */
/* MAIN LAYOUT */
main {
    padding-bottom: 110px;
}

main img {
    width: 100%;
}

main,
.content-width {
    max-width: 854px;
    margin: 0 auto;
}

@media (min-width: 992px) {

    main,
    .content-width {
        max-width: 854px;
    }
}

/* Modal Windows */
.modal-content {
    border: none;
    background: none;
}

.modal-header {
    border-bottom: none;
}

.modal-body {
    margin: 0 auto;
}

.modal-body img {
    max-height: 80vh;
}

/* Courses Cards extra */
.payed-course-card {
    transition: all 0.3s;
}

.shadow-glow:hover {
    cursor: pointer;
    box-shadow: 0 0 2px yellow;
    transition: all 0.1s;
    opacity: 0.9;
}

.course-card {
    margin-top: 10px;
    margin-bottom: 15px;
}

.course-card>img {
    border-radius: 5px;
}

.course-card-description h3 {
    font-size: calc(0.9rem + .6vw);
    padding-top: 7px;
    margin-bottom: 5px;
}

.course-card-description p {
    font-size: calc(0.5rem + .6vw);
    color: var(--meta-color);
    margin-bottom: 2px;
}

.progress-description {
    font-size: calc(0.5rem + .6vw);
    color: var(--meta-color);
    margin-bottom: 2px;
}

.progress {
    --bs-progress-height: 0.4rem;
    margin-bottom: 0.8rem;
}

.course-card-description p.non-pay {
    font-size: calc(0.7rem + .6vw);
    color: #5c636a;
    margin-bottom: 1px;
    padding-left: 7px;
    padding-right: 7px;
    padding-bottom: 7px;
    text-align: center;
}

/* SHOW COURSE */
.course-item-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 400px;
    margin-bottom: 28px;
    background-size: cover;
    background-position: center;
    filter: blur(100px);
}

.course-item img {
    width: 60%;
    max-width: 350px;
    margin-top: 55px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.course-item .btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding-top: 13px;
    margin-left: 5px;
    margin-right: 5px;
    font-size: 1.2rem;
}

.course-and-tariff-info {
    margin-top: 25px;
}

.accordion-button::after {
    font-family: "fontello";
    background-image: none;
    content: '\f004';
    color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: none;
}

.accordion-button:focus {
    border: none;
    box-shadow: none;
}

.accordion {
    --bs-accordion-border-color: none;
}

/* -------------------------------------------------------------------------
   COMMON UTILITIES (Chat, Profile, etc.)
   ------------------------------------------------------------------------- */
/* Avatars */
.ava img {
    float: left;
    object-fit: cover;
    width: 45px;
    height: 45px;
}

/* Tests */
.btn-test {
    width: 100%;
}

/* Messenger & Chat */
.truncate {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.chat-title {
    margin-top: 1px;
    width: 72%;
    float: left;
}

.last-messages-info {
    position: absolute;
    top: 8px;
    right: 1px;
    text-align: right;
}

.chat-name {
    position: absolute;
    left: 25%;
    right: 25%;
    text-align: center;
    font-size: 0.9rem;
}

.chat-main {
    display: flex;
    flex-direction: column;
    height: calc(100% - 111px);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.chat-content {
    overflow-y: auto;
    margin-top: auto;
    padding-right: 10px;
    padding-left: 10px;
}

.messages-date {
    display: flex;
    justify-content: center;
    opacity: 75%;
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 30px;
}

.message,
.my-message {
    display: flex;
    margin-bottom: 14px;
}

.my-message {
    justify-content: flex-end;
}

.message .sender-ava {
    align-self: flex-end;
    margin-right: 10px;
}

.message .sender-ava img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
}

.my-message .message-body {
    display: flex;
    flex-direction: column;
    background: #6610f2;
    padding: 5px 10px;
    border-radius: 10px;
    max-width: 85%;
}

.message .message-body {
    display: flex;
    flex-direction: column;
    background-color: rgba(26, 29, 32, 0.8);
    padding: 5px 10px;
    border-radius: 10px;
    max-width: 85%;
}

.message-body .message-content>* {
    width: auto;
}

.message-body .message-content .attachments,
.homework .attachments {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 4px;
}

@media (min-width: 992px) {
    .attachments a {
        margin-right: 10px;
        width: 170px;
    }

    .attachments a:last-of-type,
    .attachments a:nth-child(5n) {
        margin-right: 0;
    }
}

.message-body .message-content .attachments .img-thumbnail,
.homework .attachments .img-thumbnail {
    margin-bottom: 9px;
    padding: 0;
    border: none;
}

.message .message-author {
    font-weight: bold;
    font-size: 0.8rem;
}

.message-content {
    word-wrap: break-word;
}

.message-text a {
    text-decoration: none;
    font-weight: bold;
}

.message-details {
    float: right;
    margin-left: 10px;
}

.message .message-details .message-time {
    font-size: 0.7rem;
    color: #6c757d;
}

.my-message .message-details .message-time {
    font-size: 0.7rem;
    color: #adb5bd;
}

.message-details .who-seen {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    margin-left: 3px;
    object-fit: cover;
}

.message-form {
    min-height: 56px;
    max-width: 668px;
    margin: 0 auto;
}

.message-form form {
    display: flex;
    padding: 5px;
    align-items: center;
    min-height: 56px;
}

.attachment-icon {
    color: #ffc107;
    display: flex;
    font-size: 14px;
    cursor: pointer;
    border-radius: 50%;
    height: 35px;
    width: 45px;
    justify-content: center;
    align-items: center;
}

.message-input {
    width: 100%;
    height: 35px;
    max-height: 112px;
    resize: none;
    border-radius: 15px;
    margin: 0 5px;
    padding-left: 12px;
    padding-top: 4px;
    overflow-y: auto;
    border: none;
}

.submit-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffc107;
    font-size: 14px;
    background-color: unset;
    border: 2px solid #ffc107;
    border-radius: 50%;
    height: 35px;
    width: 35px;
    margin-left: 5px;
    margin-right: 5px;
}

#scroll-down-container {
    display: none;
    width: 100%;
    max-width: 668px;
    position: fixed;
    bottom: 70px;
    justify-content: flex-end;
}

.scroll-down-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    margin-right: 9px;
    border-radius: 50%;
    background-color: #2b2f32;
    opacity: 0.9;
    cursor: pointer;
}

.scroll-down i {
    padding-top: 9px;
}

/* PROFILE */
.profile-ava {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.ava-file-input {
    visibility: hidden;
    position: absolute;
}

.ava-file-label {
    cursor: pointer;
}

.ava-file-label::before {
    content: 'Изменить фото';
    display: inline-block;
    background-color: #ffc107;
    color: #000;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.ava-file-input:disabled+.ava-file-label::after {
    background-color: #ccc;
    cursor: not-allowed;
}

/* HOMEWORK FORM */
.homework-form-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 2rem;
}

.homework-input {
    width: 100%;
    height: 250px;
    resize: none;
    border-radius: 12px;
    padding: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--main-color);
    transition: all 0.3s ease;
}

.homework-input:focus {
    outline: none;
    border-color: var(--accent-color);
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.05);
}

.homework-form-checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.homework-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

@media (max-width: 576px) {
    .homework-form-buttons {
        flex-direction: column;
    }
    .homework-form-buttons > * {
        width: 100%;
    }
}

/* Glassmorphism Components */
.glass-card {
    background: var(--alt-bg-color);
    padding: 24px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

html[data-bs-theme="light"] .glass-card {
    background: rgba(252, 252, 252, 0.8);
    border: 1px solid rgba(13, 110, 253, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Homework Submission & Curator Answer Cards */
.homework.alert {
    border-radius: 16px !important;
    padding: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: var(--alt-bg-color) !important; /* Base secondary bg */
    color: var(--main-color) !important;
}

/* Override standard Bootstrap alert styles to look like cards */
.alert-warning.homework {
    background-color: rgba(255, 193, 7, 0.03) !important;
    border-color: rgba(255, 193, 7, 0.1) !important;
}

.alert-primary.homework {
    background-color: rgba(13, 110, 253, 0.03) !important;
    border-color: rgba(13, 110, 253, 0.1) !important;
}

.homework hr {
    opacity: 0.1;
    margin: 20px 0;
}

/* Author Header in Homework Cards */
.homework-author-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.homework-author-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.homework-author-ava {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.homework-author-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.homework-author-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: 2px;
}

.homework-date {
    font-size: 0.85rem;
    opacity: 0.6;
    font-weight: 400;
}

.homework-status-badge .badge {
    font-size: 0.75rem;
    padding: 6px 12px;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.2);
}

/* -------------------------------------------------------------------------
   APPLESQUE LIQUID GLASS MENU
   ------------------------------------------------------------------------- */
header nav.navbar.glass-navbar {
    background-color: transparent !important;
    backdrop-filter: none;
    padding-top: 15px;
    padding-bottom: 0;
    pointer-events: none; /* Allow clicks to pass through the empty bar */
}

/* Prevent wrapping of navbar items */
.glass-navbar .container-fluid {
    pointer-events: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* Force single line */
}

/* Glass Pill Buttons */
.glass-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background: rgba(44, 44, 46, 0.55); /* Dark Apple-like grey, more transparent */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px; /* Full pill shape */
    color: #f5f5f7 !important; /* Apple white */
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background 0.3s ease, 
                box-shadow 0.3s ease;
    font-weight: 500;
    font-size: 0.95rem;
    gap: 8px; /* Space between icon/image and text */
    height: 48px; /* Fixed height for consistency */
    box-sizing: border-box;
    white-space: nowrap;
}

/* Hover State */
.glass-btn:hover {
    background: rgba(44, 44, 46, 0.35); /* More transparent */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Keep minimal shadow */
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3);
    opacity: 0.7;
    transition: all 0.2s ease;
}

/* Active/Focus State */
.glass-btn:active {
    background: rgba(30, 30, 32, 0.9);
    filter: brightness(90%);
}

/* Center Logo/Title adjustments */
.glass-btn-center {
    padding: 2px 20px 2px 2px;
    flex-shrink: 1; /* Allow shrinking if needed */
    min-width: 0;   /* enable shrinking below content size */
    max-width: 60%; /* Reasonable max width to leave space for others */
}

.glass-btn-center .logo {
    width: 42px; 
    height: 42px;
    border-radius: 50%;
    margin-right: 5px; 
    object-fit: cover;
    flex-shrink: 0; /* Don't shrink logo */
}

.glass-btn-center .site-title {
    font-weight: 600;
    letter-spacing: -0.3px;
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile Image Button adjustments */
.glass-btn-profile {
    padding: 0; /* No padding so image hits the edge */
    width: 48px;
    height: 48px;
    border-radius: 50%; /* Perfect circle */
    overflow: hidden; /* Clip anything outside */
    flex-shrink: 0; /* Prevent squashing */
}

.glass-navbar .glass-btn-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0; /* Parent handles radius */
    margin: 0;
}

/* Ensure text colors are overridden */
.navbar-brand,
.glass-btn i {
    color: inherit;
}

/* Responsive tweaking */
@media (max-width: 768px) {
    .glass-navbar .container-fluid {
        gap: 10px; /* Force spacing between buttons */
    }

    .glass-btn {
        padding: 8px 14px;
        font-size: 0.9rem;
    }
    
    /* Specific override for center button on mobile */
    .glass-btn-center {
        padding: 2px 14px 2px 2px;
        max-width: 85%; /* Allow more width to prevent truncated text when space exists */
    }

    /* Fix for profile button on mobile to prevent padding override */
    .glass-btn-profile {
        padding: 0 !important;
        width: 48px !important;
        min-width: 48px; /* Prevent flex shrinking width below 48px */
    }
}

/* =========================================
   Glass Bottom Menu (Mobile)
   ========================================= */
.glass-bottom-nav {
    display: none;
}

@media (max-width: 992px) {
    .glass-bottom-nav {
    position: fixed;
    bottom: 15px; /* More compact floating look */
    left: 15px;
    right: 15px;
    background: rgba(30, 30, 32, 0.65); /* Slightly darker for contrast, more transparent */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px; /* Tighter radius */
    padding: 0 5px; /* Removed vertical padding for height control */
    height: 64px; /* Fixed compact height */
    z-index: 1050;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
}

.glass-bottom-nav ul {
    margin-bottom: 0;
    height: 100%;
}

.glass-bottom-nav .nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glass-bottom-nav .nav-link {
    color: #d1d1d6; /* Lighter grey for better readability */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    gap: 2px;
}

.glass-bottom-nav .nav-link i {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; /* Fixed width for circle */
    height: 38px; /* Fixed height for circle */
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-bottom: 0;
}

.glass-bottom-nav .nav-link span {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* Active State */
.glass-bottom-nav .nav-link.active {
    color: #FFD60A !important; /* Yellow text */
    background: transparent !important;
}

.glass-bottom-nav .nav-link.active i {
    background: rgba(255, 214, 10, 0.15); /* Yellow glass circle background */
    color: #FFD60A;
    transform: translateY(-2px); /* Subtle lift */
    /* box-shadow: 0 4px 12px rgba(255, 214, 10, 0.25); */
}

/* Hover/Touch State */
.glass-bottom-nav .nav-link:active {
    transform: scale(0.95);
}

    /* Ensure padding at bottom of page so menu doesn't cover content */
    body {
        padding-bottom: 90px;
    }
}

/* =========================================================================
   NEW PRODUCT PAGE STYLES (Refactored from product.html)
   ========================================================================= */

/* Hero Section */
.product-hero-section {
    margin-top: 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.product-hero-bg {
    background-size: cover;
    background-position: center;
    filter: blur(50px) saturate(200%) brightness(1.1);
    transform: scale(1.3);
    z-index: 0;
}

.product-hero-overlay {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 240, 240, 0.5) 100%);
    backdrop-filter: blur(0px);
    z-index: 1;
}

.product-content-layer {
    z-index: 2;
}

.product-category-label {
    font-size: 0.75rem;
    letter-spacing: 3px;
    opacity: 0.8;
}

.product-title {
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.product-subtitle {
    line-height: 1.6;
    max-width: 95%;
}

.product-image-shadow {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important;
}

.product-image-cover {
    object-fit: cover;
}

/* CTA Elements */
.cta-price-pill {
    min-width: 140px;
}

.cta-btn-main {
    font-size: 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-btn-main:hover {
    opacity: 0.8;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Keep existing shadow */
}

/* Sticky CTA */
.sticky-cta-container {
    z-index: 1050;
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    pointer-events: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    justify-content: center;
}

.sticky-cta-pill {
    background: rgba(30, 30, 32, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    pointer-events: auto;
    user-select: none;
}

.sticky-price-text {
    font-size: 0.95rem;
}

.sticky-btn-text {
    font-size: 1rem;
    white-space: nowrap;
}

/* Mobile Responsive Overrides */
@media (max-width: 992.98px) {
    .sticky-cta-container {
        bottom: 95px;
    }

    .mobile-w-70 {
        width: 70% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .responsive-cta-price {
        padding: 0.5rem 1rem !important;
        font-size: 0.95rem !important;
        min-width: auto !important;
    }

    .responsive-cta-btn {
        padding: 0.5rem 1.5rem !important;
        font-size: 1rem !important;
    }

    .hero-mobile-compact {
        margin-top: 20px !important;
    }

    .hero-mobile-compact .row.p-4 {
        padding: 1rem !important;
        padding-top: 0 !important;
    }

    .hero-mobile-compact h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
    }

    .product-hero-section .ratio-1x1 {
        margin-bottom: 0 !important;
    }
}

/* -------------------------------------------------------------------------
   GLOBAL FORM CONTROLS
   ------------------------------------------------------------------------- */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--main-color);
    border-radius: 10px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.1);
    color: var(--main-color);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.01);
    border-color: rgba(255, 255, 255, 0.05);
    opacity: 0.6;
}

.form-label {
    font-weight: 500;
    margin-bottom: 8px;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Light theme overrides for forms */
html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #111827;
}

html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
}

/* Utility classes */
.cursor-pointer {
    cursor: pointer;
}

.opacity-50 {
    opacity: 0.5;
}

/* =========================================================================
   CUSTOM BUTTON SYSTEM
   ========================================================================= */

/* 1. SOFT BUTTON (Navigation / Secondary) 
   Use this for "All Courses", "Read More" links. 
   Adaptive: White/Shadow on Light, Glass/Translucent on Dark. */
.btn-soft {
    background-color: var(--btn-soft-bg);
    color: var(--btn-soft-color);
    box-shadow: var(--btn-soft-shadow);
    border: 1px solid transparent; 
    border-radius: 50px; 
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-soft:hover {
    background-color: var(--btn-soft-hover-bg); /* Already soft */
    color: var(--btn-soft-color);
    box-shadow: none;
    opacity: 0.7;
}

/* Dark theme border adjustment */
html[data-bs-theme="dark"] .btn-soft {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-bs-theme="dark"] .btn-soft:hover {
    border-color: var(--accent-color); /* Subtle hint of accent on hover */
    color: #ffffff;
}

/* 2. ACCENT BUTTON (Primary Action)
   Use this for "Buy Now", "Start Lesson".
   Uses Indigo (Light) or Yellow (Dark). */
.btn-accent {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    border: none;
    border-radius: 50px;
    padding: 0.6rem 2rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-accent:hover {
    opacity: 0.8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: var(--accent-text-color);
}

/* ACCENT UTILITIES */
.text-accent {
    color: var(--accent-color) !important;
}

.bg-accent {
    background-color: var(--accent-color) !important;
    color: var(--accent-text-color);
}

.btn-accent-circle {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1.2rem;
}

.btn-accent-circle:hover {
    opacity: 0.9;
    color: var(--accent-text-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    transform: scale(1.05); /* Scales up instead of jumping */
}

.btn-secondary-circle {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 1.2rem;
}

.btn-secondary-circle:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: scale(1.05);
}

/* Accordion Customization */
.accordion-custom-item {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 1rem;
}

.accordion-custom-header .accordion-button {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: var(--main-color) !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1rem 1.25rem;
}

.accordion-custom-header .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--accent-color) !important;
}

.accordion-custom-header .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%); /* Make caret white/light */
}
.accordion-custom-header .accordion-button:not(.collapsed)::after {
    filter: none; /* Reset if needed or colorize */
    /* If we want colored caret, we can use SVG manipulation or just keep white */
}

.accordion-custom-body {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Lesson Cards in Accordion */
.lesson-card {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    transition: all 0.2s ease;
    text-decoration: none !important; /* Ensure no underline if it's an <a> */
    color: inherit !important; /* Keep text color same as parent */
    display: block; /* Make <a> behave like a block */
}

.lesson-card:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.lesson-card-arrow {
    opacity: 0.3;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    padding-left: 10px;
}

.lesson-card:hover .lesson-card-arrow {
    opacity: 1;
    transform: translateX(3px);
    color: var(--accent-color);
}

.lesson-status-badge {
    border-radius: 6px;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
}

.badge-status-closed {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.badge-status-success {
    background-color: rgba(25, 135, 84, 0.2);
    color: #75b798;
    border: 1px solid rgba(25, 135, 84, 0.3);
}

.badge-status-warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffda6a;
    border: 1px solid rgba(255, 193, 7, 0.25);
}

/* =========================================================================
   BLOG PROFILE HEADER (Extracted from home.html)
   ========================================================================= */

.profile-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    margin-top: 2.8rem !important;
}

.profile-cover {
    position: relative;
    height: 200px;
    transition: height 0.3s ease;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.profile-cover-gradient {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

.profile-header-container {
    padding-left: 3rem;
    padding-right: 3rem;
    margin-top: -50px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center; /* Desktop default from previous steps? No, prev steps had specific alignment */
}

/* Desktop override based on logic: Desktop was align-items: flex-end? 
   No, Step 405 had 'd-flex align-items-center align-items-md-end'. 
   So Base is center, MD is End.
*/
.profile-header-container {
    align-items: center;
}
@media (min-width: 768px) {
    .profile-header-container {
        align-items: flex-end;
    }
}
/* But I see I put logic in media query max-width 768px in Step 405. 
   Let's standardize. 
   Desktop: align-items-end (implied by previous desired logic).
   Mobile (<768): align-items-end !important per Step 399/405? 
   Wait, Step 405 says: 
   class="d-flex align-items-center align-items-md-end"
   CSS media <768: align-items: flex-end !important;
   This is conflicting. 'align-items-center' applies to <768 (xs). 'align-items-md-end' applies to >=768.
   But content inside media query <768 says 'align-items: flex-end !important'.
   This effectively makes it ALWAYS flex-end. 
   Let's check user intent. 
   Avatar 130px. Cover 200px. Margin -50px.
   If flex-end: Avatar bottom aligns with Text Block bottom.
   Avatar sticks out 80px above container bottom.
   Bottom of container is bottom of text block? No, they are flex items.
   Let's stick to the latest working state properties.
*/

.profile-avatar {
    width: 130px;
    height: 130px;
    min-width: 130px;
    border: 4px solid rgba(255,255,255,0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
    object-fit: cover;
    border-radius: 50%;
}

.profile-text-block {
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Base */
}
@media (min-width: 768px) {
    .profile-text-block {
        align-items: flex-end;
    }
}

.profile-title {
    font-size: 1.75rem !important;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 0;
    margin-right: 1rem;
}

.social-buttons-block {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 768px) {
    .social-buttons-block {
        margin-top: 0;
    }
}

.social-btn {
    width: 42px;
    height: 42px;
    color: #495057;
    background-color: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.05); /* shadow-sm implies some border usually or just shadow? btn-light has border-color transparent */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    text-decoration: none;
    transition: all 0.2s ease;
}
.social-btn:hover {
    color: #495057;
    background-color: #e2e6ea;
}

.social-btn-icon {
    font-size: 1.3rem; 
}

/* Mobile Breakpoint */
@media (max-width: 768px) {
    .profile-cover {
        height: 140px;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
        min-width: 100px;
        margin-top: 0;
    }

    .profile-header-container {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-top: -45px;
        align-items: flex-end !important;
    }

    .profile-text-block {
        align-items: flex-end !important;
        padding-bottom: 0 !important;
    }

    .profile-title {
        font-size: 1.3rem !important;
        margin-bottom: 5px !important;
        margin-top: 30px;
    }
}

/* Narrow Mobile Breakpoint for Social Buttons */
@media (max-width: 500px) {
    .social-buttons-block {
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
        justify-content: space-evenly !important;
        z-index: 5;
    }
}

/* -------------------------------------------------------------------------
   CODE SNIPPET COPY CONTAINER (Added for CKEditor code blocks)
   ------------------------------------------------------------------------- */
.code-wrapper {
    position: relative;
    margin: 1.5rem 0;
    background-color: var(--alt-bg-color);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

html[data-bs-theme="light"] .code-wrapper {
    background-color: #f8f9fa;
    border-color: rgba(0,0,0,0.1);
}

.code-wrapper pre {
    margin: 0;
    padding: 1.5rem;
    padding-bottom: 4rem; /* Space for button */
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    background: transparent !important;
    border: none !important;
    color: var(--main-color);
    font-family: monospace; /* Ensure monospace */
}

.code-wrapper .copy-btn {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    color: var(--meta-color);
    border: none;
    transition: all 0.2s;
    z-index: 10;
    font-weight: 500;
}

html[data-bs-theme="light"] .code-wrapper .copy-btn {
    background: rgba(0, 0, 0, 0.08);
    color: var(--main-color);
}

.code-wrapper .copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--main-color);
}

html[data-bs-theme="light"] .code-wrapper .copy-btn:hover {
    background: rgba(0, 0, 0, 0.15);
}

.code-wrapper .copy-btn.copied {
    background: var(--accent-color);
    color: var(--accent-text-color);
}