/*
 * Professional design layer, aligned with rolandbal.com.
 * Loaded after the ported page styles; overrides them wholesale.
 * Tokens: Work Sans body / Crimson Pro display, #1a1a1a & #0d0d0d chrome,
 * terracotta #E8724E accent (#D35A3A hover).
 */

:root {
    --rb-dark: #1a1a1a;
    --rb-darker: #0d0d0d;
    --rb-accent: #E8724E;
    --rb-accent-hover: #D35A3A;
    --rb-text: #2b2b2b;
    --rb-muted: #6b7280;
    --rb-border: #e7e5e4;
    --rb-surface: #faf9f7;
    --rb-radius: 8px;
    --rb-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.05);
    --rb-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.10);
}

/* ---------- Typography ---------- */
html, body {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 16px !important;
    color: var(--rb-text);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
p, li, input, button, textarea, select,
.home-welcome-text, .meditations-intro, .ebooks-intro,
.rola-custom-toggle, .courses-wrapper-26012021 .desc,
.pa-article-content p, .entry-content p, .entry-content li {
    font-family: 'Work Sans', sans-serif !important;
}
p, li, .home-welcome-text, .meditations-intro, .ebooks-intro,
.pa-article-content p, .entry-content p {
    font-size: 17px !important;
    line-height: 1.75;
    color: var(--rb-text);
}
h1, h2, h3, h4,
.home-welcome-title, .sleep-title, #page-heading-healing,
.pa-article-title, .page-icon-header-title, .pa-recording-title,
#profile-name-22082020 {
    font-family: 'Crimson Pro', serif !important;
    color: var(--rb-dark);
    letter-spacing: 0;
    font-weight: 600;
}
.home-welcome-title { font-size: 30px !important; line-height: 1.25 !important; margin-bottom: 14px; }
.sleep-title, #page-heading-healing, .pa-article-title { font-size: 34px !important; font-weight: 600 !important; line-height: 1.2; }
.sleep-pretext, #page-title-pretext {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--rb-accent) !important;
    margin-bottom: 4px;
}
.page-icon-header-title, .pa-recording-title {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--rb-dark) !important;
}
.part-title h2 { font-family: 'Work Sans', sans-serif !important; font-size: 17px !important; font-weight: 600 !important; color: var(--rb-dark) !important; }

/* ---------- Page canvas ---------- */
.main-container-row { background: var(--rb-surface); }
main[role="main"] {
    background: #fff !important;
    padding: 40px 48px !important;
}
/* Content sits directly on the canvas, anchored left beside the sidebar —
   no outer card (the course boxes themselves are the cards). Max-width is
   only a readability limit. */
.entry-content, .entry-content.entry.clr {
    max-width: 920px;
    width: auto !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 !important;
    box-shadow: none;
}
@media (max-width: 900px) {
    main[role="main"] { padding: 20px 14px !important; }
    .entry-content { padding: 26px 20px !important; }
}

/* ---------- Top navbar ---------- */
.frontend-nav-bar-13032019, .navbar.bg-dark {
    background-color: var(--rb-dark) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 24px !important;
    min-height: 64px;
}
#go-rolandbal-com-logo { height: 72px !important; width: auto !important; }
.frontend-nav-bar-13032019 .btn-group .btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500;
    padding: 7px 16px !important;
    box-shadow: none !important;
}
.frontend-nav-bar-13032019 .btn-group .btn:hover { border-color: var(--rb-accent) !important; color: var(--rb-accent) !important; }
.dropdown-menu { border-radius: 8px; border: 1px solid var(--rb-border); box-shadow: var(--rb-shadow-hover); font-size: 14.5px; }
.dropdown-item { padding: 9px 18px; }
.dropdown-item:hover { background: #f5f4f2; color: var(--rb-accent-hover); }

/* ---------- Sidebar (light, contrasts the dark header) ---------- */
.sidebar {
    background: var(--rb-surface) !important;
    width: 260px !important;
    border-right: 1px solid var(--rb-border);
}
.sidebar-sticky { padding: 18px 12px; }
.sidebar .nav-item { border: none !important; }
.sidebar .nav-link {
    font-family: 'Work Sans', sans-serif !important;
    color: #4b5563 !important;
    border-radius: 8px;
    border: none !important;
    padding: 10px 14px !important;
    margin: 2px 0;
    display: flex !important;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
.sidebar .nav-link span.text { font-size: 14.5px !important; font-weight: 500; letter-spacing: 0.2px; }
.sidebar .nav-link .parent-feather-icons { display: inline-flex !important; width: 24px !important; margin-right: 8px !important; }
.sidebar .nav-link svg { width: 18px; height: 18px; opacity: 0.65; }
.sidebar .nav-link:hover {
    color: var(--rb-dark) !important;
    background: #efedea !important;
}
.sidebar .nav-link.active {
    color: var(--rb-accent-hover) !important;
    background: rgba(232, 114, 78, 0.10) !important;
}
.sidebar .nav-link.active svg, .sidebar .nav-link:hover svg { opacity: 1; }

/* Collapse control pinned inside the sidebar, matching the light theme */
.expand-collapse-wrapper {
    position: static !important;
    margin-top: auto;
    width: auto !important;
    min-height: 48px !important;
    background: var(--rb-surface) !important;
    border-top: 1px solid var(--rb-border);
}
.shrink-expand { filter: brightness(0) !important; opacity: 0.45; }
.shrink-expand:hover { filter: brightness(0) !important; opacity: 0.9; }

/* ---------- App shell: fixed viewport, only the content pane scrolls ---------- */
@media (min-width: 901px) {
    body { overflow: hidden; }
    .main-container-row {
        display: flex !important;
        height: calc(100vh - 92px);
        overflow: hidden;
        margin: 0 !important;
    }
    nav.sidebar {
        position: static !important;
        top: auto !important;
        height: 100% !important;
        overflow-y: auto;
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column;
        float: none !important;
    }
    main[role="main"] {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        margin-left: 0 !important;
        width: auto !important;
        /* landing-inner caps main at 960px, which strands the scrollbar
           mid-screen and left-aligns the content — span the full pane. */
        max-width: none !important;
    }
    main[role="main"]::-webkit-scrollbar, nav.sidebar::-webkit-scrollbar { width: 8px; }
    main[role="main"]::-webkit-scrollbar-thumb, nav.sidebar::-webkit-scrollbar-thumb {
        background: #d6d3d1;
        border-radius: 4px;
    }
    main[role="main"]::-webkit-scrollbar-track, nav.sidebar::-webkit-scrollbar-track { background: transparent; }
}

/* ---------- Buttons ---------- */
.next-lesson-button, .rola-eboo-complete-course, a.no-original-content-btn,
.sleep-back-button .elementor-button, .courses-wrapper-26012021 .cta a, .btn-primary {
    background-color: var(--rb-accent) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-shadow: none !important;
    padding: 10px 22px !important;
    transition: background 0.15s, transform 0.1s;
}
.next-lesson-button:hover, .rola-eboo-complete-course:hover, a.no-original-content-btn:hover,
.sleep-back-button .elementor-button:hover, .courses-wrapper-26012021 .cta a:hover, .btn-primary:hover {
    background-color: var(--rb-accent-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.courses-wrapper-26012021 .cta a.completed { background-color: #16a34a !important; }
.btn-outline-secondary { border-radius: 6px !important; font-size: 13px !important; }

/* ---------- Course / article cards ---------- */
.courses-wrapper-26012021 .course-box {
    border-radius: var(--rb-radius);
    overflow: hidden;
    border: 1px solid var(--rb-border);
    box-shadow: var(--rb-shadow) !important;
    background: #fff;
    transition: transform 0.18s, box-shadow 0.18s;
}
.courses-wrapper-26012021 .course-box:hover { transform: translateY(-3px); box-shadow: var(--rb-shadow-hover) !important; }
.courses-wrapper-26012021 .title {
    font-family: 'Crimson Pro', serif !important;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.3 !important;
    padding: 20px !important;
    background-size: cover !important;
    background-position: center !important;
}
.courses-wrapper-26012021 .desc { font-size: 15px !important; color: var(--rb-muted) !important; line-height: 1.65; padding: 16px 20px 0 !important; }
.courses-wrapper-26012021 .cta { padding: 16px 20px 20px !important; }

/* ---------- Icon headers / accents ---------- */
.page-icon-header { align-items: center; gap: 12px; margin: 0 0 22px 0 !important; }
.page-icon-header-icon, .page-icon-header-icon svg,
.pa-recording-title .elementor-icon svg, .pa-recording-title .elementor-icon svg path,
.part-title svg path, .download-link-roland svg path,
.material-row svg, .meditations-download-all svg { color: var(--rb-accent) !important; fill: var(--rb-accent) !important; }
.rola-custom-toggle .item svg { color: var(--rb-accent) !important; }

/* ---------- Sections & toggles ---------- */
.section-healing-course { border-bottom: 1px solid var(--rb-border) !important; margin-bottom: 26px !important; padding-bottom: 26px !important; }
.part-title > span { margin-top: 3px; }
.rola-custom-toggle {
    background: var(--rb-surface) !important;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius);
    padding: 4px 0;
}
.rola-custom-toggle .title { font-size: 15px; font-weight: 600; padding: 10px 16px; }
.rola-custom-toggle .item { font-size: 15px; padding: 4px 16px; color: var(--rb-text); }
.breadcrumb1 { font-size: 14px; color: var(--rb-muted); margin-bottom: 1.4rem; }
.breadcrumb1 a { color: var(--rb-accent-hover) !important; text-decoration: none; }
.breadcrumb1 a:hover { text-decoration: underline; }
.download-link-roland a { color: var(--rb-dark) !important; font-size: 16px !important; font-weight: 500; }
.download-link-roland a:hover { color: var(--rb-accent-hover) !important; }

/* ---------- Tabs ---------- */
.pa-tabs-heading { border-bottom: 1px solid var(--rb-border); gap: 4px; }
.pa-tab-title { font-size: 13px !important; font-weight: 600; letter-spacing: 1.5px; padding: 12px 18px !important; color: var(--rb-muted) !important; background: transparent !important; }
.pa-tab-title[aria-selected="true"] { color: var(--rb-accent) !important; border-bottom: 2px solid var(--rb-accent) !important; }
.pa-tab-title[aria-selected="true"] .pa-tab-icon svg { fill: var(--rb-accent) !important; }
.pa-tab-title .pa-tab-icon svg { fill: currentColor; }

/* ---------- Meditation list rhythm & icons ---------- */
.rola-custom-toggle { margin-top: 1.75rem !important; margin-bottom: 10px; }
.rola-custom-toggle:first-of-type { margin-top: 1rem !important; }
.rola-custom-toggle .title svg, .rola-custom-toggle .title svg path,
#tcb-icon-caret-right-solid path { fill: var(--rb-accent) !important; color: var(--rb-accent) !important; }
.barun-kumar-audio-player-23112017-wrapper { margin-bottom: 1.75rem; }
.meditations-download-all { margin: 1.75rem 0 0.5rem !important; }
.meditations-download-all .page-icon-header-title a { color: var(--rb-dark) !important; text-decoration: none; }
.meditations-download-all .page-icon-header-title a:hover { color: var(--rb-accent-hover) !important; }

/* Volume popup anchored to the speaker icon, arrow attached at its base.
   The base player CSS has a higher-specificity rule
   (".barun-kumar-audio-player-23112017-controls span { display: inline-block;
   flex: 1; ... }") that stretches every span (including this wrapper) to fill
   the row — that's what was pushing the popup away from the icon. Beat it
   with matching specificity + !important so the wrap hugs just the icon. */
.barun-kumar-audio-player-23112017-controls span.volume-wrap {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    align-items: center;
    padding-left: 0 !important;
    margin-right: 16px;
}
/* Bootstrap's .mr-3 (1rem) lived on the icon itself, which widened this
   flex item beyond the icon's visible box and threw off centering — move
   the spacing to the wrapper instead so the icon is the box's full width. */
.volume-wrap .volume-icon.mr-3 { margin-right: 0 !important; }
.volume-wrap .volume-control {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(100% + 12px) !important;
    transform: translateX(-50%);
    border: 1px solid var(--rb-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.volume-wrap .arrow-down {
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    margin-left: -8px;
    border-top-color: #fff !important;
}

/* Icons inside the dark player bar are white */
.barun-kumar-audio-player-23112017-controls svg.download-icon,
.barun-kumar-audio-player-23112017-controls svg.download-icon path {
    fill: #fff !important;
    color: #fff !important;
}
.barun-kumar-audio-player-23112017-controls img.volume-icon {
    filter: brightness(0) invert(1);
}

/* ---------- Audio player ---------- */
.barun-kumar-audio-player-23112017-controls {
    background: var(--rb-dark) !important;
    border-radius: 8px 8px 0 0;
    padding: 9px 6px !important;
}
.barun-kumar-audio-player-23112017-controls span { font-size: 14.5px !important; }
.barun-kumar-audio-player-23112017-controls em { font-size: 12.5px !important; opacity: 0.85; }
.barun-kumar-audio-player-23112017-controls-ext { border-radius: 0 0 8px 8px; background: #2c2a28 !important; height: 10px !important; }
.barun-kumar-audio-player-23112017-controls-progress { background: rgba(232, 114, 78, 0.6) !important; }
.barun-kumar-audio-player-23112017-play-pause { background: var(--rb-accent) !important; }
.meditation-incomlete-20042018 i { color: var(--rb-accent) !important; border-color: transparent !important; }

/* ---------- Profile ---------- */
#profile-name-22082020 { font-size: 26px !important; text-transform: none !important; }
.roland-profile-section-14052019 { border-color: var(--rb-border) !important; padding: 1.4rem 0 !important; font-size: 15.5px; }
.roland-profile-section-14052019 .user-field-edit { color: var(--rb-accent-hover); font-weight: 500; text-decoration: none; }
.form-control { border-radius: 6px !important; border-color: var(--rb-border) !important; font-size: 15px !important; }
.form-control:focus { border-color: var(--rb-accent) !important; box-shadow: 0 0 0 3px rgba(232, 114, 78, 0.15) !important; }

/* ---------- Recordings ---------- */
.rpa-week-header h3 { font-family: 'Work Sans', sans-serif !important; font-size: 15px !important; letter-spacing: 0.5px; color: var(--rb-dark) !important; }
.rpa-week-description { color: var(--rb-accent-hover) !important; font-size: 13.5px !important; }
.rpa-video-item { border-radius: 8px !important; border: 1px solid var(--rb-border) !important; }
.rpa-video-item:hover { background: #fdf3ef !important; border-color: #f3c4b2 !important; }
.rpa-video-item.active { background: #fbe9e2 !important; border-color: var(--rb-accent) !important; box-shadow: none !important; }
.rpa-video-item h4 { font-family: 'Work Sans', sans-serif !important; font-size: 14.5px !important; }
.rpa-materials-section { background: var(--rb-surface) !important; border: 1px solid var(--rb-border) !important; border-radius: var(--rb-radius) !important; }
.rpa-materials-title { color: var(--rb-dark) !important; }
.rpa-materials-list a { color: var(--rb-accent-hover) !important; }

/* ---------- Auth pages ---------- */
.login-card { border-radius: 14px; padding: 44px 40px !important; }
.middle-box { border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.login-card h1 { font-family: 'Crimson Pro', serif !important; font-size: 27px !important; font-weight: 600; }
.login-card input[type="email"], .login-card input[type="text"] {
    font-family: 'Work Sans', sans-serif !important; font-size: 15px !important;
}
.login-card input[type="email"]:focus, .login-card input[type="text"]:focus { border-bottom-color: var(--rb-accent) !important; }
.login-card input[type="submit"] {
    background: var(--rb-accent) !important; border: none !important;
    border-radius: 6px !important; font-weight: 600 !important;
    font-size: 13px !important; letter-spacing: 1.5px !important;
    transition: background 0.15s;
}
.login-card input[type="submit"]:hover { background: var(--rb-accent-hover) !important; }
.login-card .sub-line { font-size: 13.5px !important; color: var(--rb-muted); }
.login-card .sub-line a, .login-card .btn-link { color: var(--rb-accent-hover) !important; }
.login-card .form-message { font-size: 13.5px !important; }
.login-card .form-message-info { color: var(--rb-accent-hover) !important; font-size: 13.5px !important; }
body.auth-page { font-family: 'Work Sans', sans-serif !important; }

/* ---------- Mobile navbar: hamburger on the left ---------- */
@media (max-width: 900px) {
    .frontend-nav-bar-13032019 { flex-wrap: nowrap !important; }
    #left-menu-icon { order: -1; }
    #left-menu-icon i.fa.fa-bars, #left-menu-icon span.close-icon {
        padding-right: 5px !important;
        padding-left: 0 !important;
    }
    /* keep the logo visually centered between hamburger (left) and account button (right) */
    .frontend-nav-bar-13032019 .flex-1.text-center { flex: 1; }
}

/* ---------- Misc ---------- */
.entry-content a:not(.elementor-button):not(.no-original-content-btn):hover { color: var(--rb-accent-hover); }
.pa-divider { border-top: 1px solid var(--rb-border) !important; margin: 1.75rem 0 !important; }
.material-link { color: var(--rb-accent-hover) !important; font-size: 16px !important; }
.ebook-row { border-bottom: 1px solid var(--rb-border) !important; border-radius: 0; }
.ebook-row:hover .page-icon-header-title { color: var(--rb-accent-hover) !important; }
.ebook-desc { font-size: 14px !important; }
/* Book mockups: blend white JPEG backgrounds into the surface */
.ebook-cover img { mix-blend-mode: multiply; max-width: 240px !important; transition: transform 0.2s; }
.ebook-row:hover .ebook-cover img { transform: scale(1.02); }
.toast { border-radius: 8px; overflow: hidden; }
::selection { background: rgba(232, 114, 78, 0.25); }