/*
 * This file contains the static, structural CSS for all front-end components.
 * Dynamic styles (colors, fonts) are injected inline by public-renderer.php.
 */

/* --- Global & Layout --- */
body {
    font-family: var(--font-family);
    color: var(--text-color);
    margin: 0;
    background-color: #f0f2f5;
    transition: background-color 0.3s, color 0.3s;
}
h1,h2,h3,h4,h5,h6 { color: var(--heading-color); }
.onley-container { max-width: 1280px; margin: 0 auto; width: 90%; }
a { color: var(--primary-color); text-decoration: none; }
.onley-main-content-pusher { transition: margin-left 0.3s ease-in-out; }

/* --- Keyframe Animations --- */
@keyframes onley-gift-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes onley-button-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }

/* --- Top Bar --- */
.onley-site-topbar { background: linear-gradient(90deg, var(--bg-start), var(--bg-end)); color: var(--text-color); font-size: var(--font-size); padding: var(--padding) 0; font-weight: 500; }
.onley-site-topbar .onley-container { display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; }
.onley-site-topbar a { color: inherit; text-decoration: none; }
.onley-site-topbar .fa-gift { margin-right: 12px; font-size: 1.2em; animation: onley-gift-bounce 1.5s ease-in-out infinite; }
.onley-site-topbar .cta-button { margin-left: 20px; background-color: #ff9800; color: #fff !important; padding: 0.5em 1.2em; border-radius: 50px; font-weight: 700; animation: onley-button-pulse 2s infinite; }
@media (max-width: 768px) { .onley-site-topbar .onley-container { flex-direction: column; gap: 8px; text-align: center; } .onley-site-topbar .cta-button { margin-left: 0; } }

/* --- LMS Header --- */
.onley-learning-app-header-container { background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); z-index: 100; position: relative; transition: background-color 0.3s; }
.onley-learning-app-header-container.onley-sticky-header { position: sticky; top: 0; z-index: 1010; }
.onley-lms-primary-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; height: 60px; border-bottom: 1px solid #e5e7eb; }
.onley-lms-brand { display: flex; align-items: center; gap: 1rem; }
.onley-hamburger-menu { background: none; border: none; font-size: 1.5rem; cursor: pointer; display: block; }
.onley-lms-logo { height: 30px; }
.onley-app-name { font-weight: 700; font-size: 1.25rem; }
.onley-lms-icon-group { display: flex; align-items: center; gap: 0.25rem; }
.onley-icon-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: #4b5563; font-size: 1.2rem; cursor: pointer; position: relative; width: 40px; height: 40px; border-radius: 50%; transition: background-color 0.2s, color 0.2s; }
.onley-icon-btn:hover { background-color: #f3f4f6; color: var(--primary-color); }
.onley-notification-bell .onley-badge { position: absolute; top: 5px; right: 5px; background-color: #ef4444; color: #fff; font-size: 0.65rem; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; }
.onley-lms-page-title { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background-color: #fafafa; border-bottom: 1px solid #e5e7eb; transition: background-color 0.3s; }
.onley-back-btn { background: none; border: 1px solid #d1d5db; border-radius: 50%; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.onley-lms-page-title h2 { font-size: 1.125rem; font-weight: 600; margin: 0; }
.onley-lms-tabs-nav { display: flex; overflow-x: auto; padding: 0 1rem; border-bottom: 1px solid #e5e7eb; background: #fff; transition: background-color 0.3s; }
.onley-lms-tab-item { padding: 0.75rem 1rem; font-size: 0.9rem; color: #6b7280; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; }
.onley-lms-tab-item.onley-active, .onley-lms-tab-item:hover { color: var(--primary-color); font-weight: 600; border-bottom-color: var(--primary-color); }
@media (max-width: 768px) { .onley-lms-brand .onley-app-name { display: none; } }

/* --- LMS Sidebar --- */
.onley-lms-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width); background-color: #fff; z-index: 2000; display: flex; flex-direction: column; border-right: 1px solid #e5e7eb; transform: translateX(-100%); transition: transform 0.3s ease-in-out, background-color 0.3s; }
body.onley-sidebar-open .onley-lms-sidebar { transform: translateX(0); }
.onley-lms-sidebar-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 1999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
body.onley-sidebar-open .onley-lms-sidebar-overlay { opacity: 1; visibility: visible; }
.onley-lms-sidebar-brand { display: flex; align-items: center; padding: 1rem; height: 60px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.onley-lms-sidebar-logo { height: 40px; object-fit: contain; }
.onley-lms-sidebar-sitename { margin-left: 0.75rem; line-height: 1.2; }
.onley-lms-sidebar-sitename strong { font-weight: 600; }
.onley-lms-sidebar-sitename small { font-size: 0.8rem; color: #6b7280; }
.onley-lms-sidebar-content { flex-grow: 1; overflow-y: auto; padding: 0.5rem; }
.onley-lms-sidebar-nav { border-bottom: 1px solid #e5e7eb; padding: 0.5rem 0; margin-bottom: 0.5rem; }
.onley-lms-sidebar-nav:last-child { border: none; }
.onley-lms-sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.onley-lms-sidebar-nav ul li a { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem; border-radius: 6px; font-weight: 500; color: #374151; overflow: hidden; white-space: nowrap; }
.onley-lms-sidebar-nav ul li a:hover { background-color: #f3f4f6; }
.onley-lms-sidebar-nav ul li a i { width: 20px; text-align: center; color: #9ca3af; flex-shrink: 0; }

/* --- Notification & Search Overlays --- */
.onley-notification-sidebar, .onley-lms-search-overlay { transition: all 0.3s ease-in-out; }
.onley-notification-sidebar { position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 90%; background-color: #fff; z-index: 2010; display: flex; flex-direction: column; box-shadow: -2px 0 8px rgba(0,0,0,0.1); transform: translateX(100%); }
body.onley-notification-sidebar-open .onley-notification-sidebar { transform: translateX(0); }
.onley-notification-sidebar-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.4); z-index: 2009; opacity: 0; visibility: hidden; }
body.onley-notification-sidebar-open .onley-notification-sidebar-overlay { opacity: 1; visibility: visible; }
.onley-notification-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.onley-notification-sidebar-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
#close-notification-sidebar-btn { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #6b7280; }
.onley-lms-search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(243, 244, 246, 0.9); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; }
body.onley-search-active .onley-lms-search-overlay { opacity: 1; visibility: visible; }
.onley-lms-search-form { display: flex; width: 90%; max-width: 550px; background-color: #fff; border-radius: 999px; padding: 0.5rem 0.75rem 0.5rem 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.onley-lms-search-form input { flex-grow: 1; border: none; font-size: 1rem; outline: none; background: transparent; }
.onley-lms-search-form button { background: transparent; border: none; font-size: 1.2rem; cursor: pointer; }
#lms-search-close-btn { position: absolute; top: 20px; right: 30px; font-size: 3rem; color: #374151; background: none; border: none; cursor: pointer; }

/* --- Product Ticker --- */
.ptb-ticker-public-view .ticker-wrap { flex-grow:1; overflow:hidden; display:flex; }
.ptb-ticker-public-view .ticker-move { display:flex; white-space:nowrap; animation-timing-function:linear; animation-iteration-count:infinite; }
.ptb-ticker-public-view .product-ticker-container.paused .ticker-move { animation-play-state:paused; }
.ptb-ticker-public-view .ticker-item { all:unset; display:flex; align-items:center; padding:.25rem 1.25rem; gap:.75rem; color:var(--text-color); flex-shrink:0; transition:background-color .3s; border-right:1px solid #e5e7eb; position:relative; box-sizing:border-box; cursor: pointer; }
.ptb-ticker-public-view .ticker-item * { all:unset; box-sizing:border-box; }
.ptb-ticker-public-view .ticker-item:hover { background-color: #f9fafb; }
.ptb-ticker-public-view .ticker-item-image { display:block; height:32px; aspect-ratio:16/9; object-fit:cover; border-radius:.25rem; flex-shrink:0; }
.ptb-ticker-public-view .ticker-item-content { display:flex; flex-direction:column; min-width:0; white-space:normal; flex-grow:1; max-width:250px; }
.ptb-ticker-public-view .ticker-item-title { display:block; font-weight:600; font-size:.85rem; color:var(--heading-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ptb-ticker-public-view .ticker-item-desc { display:block; font-size:.75rem; color:var(--text-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ptb-ticker-public-view .ticker-item-price-wrapper { display:flex; align-items:baseline; gap:.5rem; margin-left:auto; padding-left:1rem; white-space:nowrap; }
.ptb-ticker-public-view .ticker-item-price { font-weight:700; color:var(--primary-color); font-size:.9rem; }
.ptb-ticker-public-view .ticker-item-discount-price { font-weight:700; font-size:.9rem; color:var(--primary-color); }
.ptb-ticker-public-view .ticker-item-original-price { text-decoration:line-through; color:#9ca3af; font-size:.75rem; }
.ptb-ticker-public-view .ticker-item-tag { display:inline-block; background-color:var(--secondary-color); color:#fff !important; font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:1rem; margin-left:.75rem; white-space:nowrap; }
.ptb-ticker-public-view .ticker-play-pause { all:unset; background:rgba(255,255,255,.8); border:1px solid #e5e7eb; border-radius:50%; width:28px; height:28px; cursor:pointer; flex-shrink:0; margin:0 .5rem; transition:all .2s; z-index:10; display:flex; align-items:center; justify-content:center; }
.ptb-ticker-public-view .ticker-play-pause:hover { background-color:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.product-ticker-container { position:relative; background-color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); display:flex; align-items:center; overflow:hidden; padding:.125rem 0; }
.product-ticker-container.has-edge-gradient::before, .product-ticker-container.has-edge-gradient::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; }
.product-ticker-container.has-edge-gradient::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.product-ticker-container.has-edge-gradient::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
[id*="product-ticker-details-container-"] { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10000; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
[id*="product-ticker-details-container-"].visible { opacity:1; visibility:visible; }
.details-card { position:relative; display:flex; flex-wrap:wrap; gap:1.5rem; max-width:680px; width:90%; background:#fff; padding:1.5rem; border-radius:.5rem; box-shadow:0 4px 20px rgba(0,0,0,.15); transform:scale(.95); transition:transform .3s; }
[id*="product-ticker-details-container-"].visible .details-card { transform:scale(1); }
.details-card-close-btn { all:unset; box-sizing:border-box; position:absolute; top:.5rem; right:.75rem; font-size:2rem; font-weight:300; line-height:1; color:#6b7280; cursor:pointer; padding:.25rem; transition:color .2s; z-index:10; }
.details-card-image { width:100%; max-width:250px; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:.375rem; }
.details-card-content { flex:1; min-width:280px; display:flex; flex-direction:column; }
.details-card-content h3 { font-size:1.5rem; font-weight:700; color:var(--heading-color); margin:0 0 .5rem; }
.details-card-tag { display:inline-block; background-color:var(--secondary-color); color:#fff; font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:99px; margin-bottom:.5rem; }
.details-card-content > div:not(.details-card-footer) { font-size:.9rem; line-height:1.6; color:var(--text-color); margin:1rem 0; flex-grow:1; }
.details-card-footer { border-top:1px solid #f3f4f6; padding-top:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:auto; }
.details-card-footer a { display:inline-block; text-align:center; background-color:var(--primary-color); color:#fff!important; padding:.5rem 1rem; border-radius:.375rem; text-decoration:none; font-weight:600; transition:opacity .2s; }

/* --- Dark Mode --- */
body.onley-dark-mode { background-color: #1f2937; color: #d1d5db; }
body.onley-dark-mode h1, body.onley-dark-mode h2, body.onley-dark-mode h3, body.onley-dark-mode h4 { color: #f9fafb; }
body.onley-dark-mode .onley-lms-sidebar, body.onley-dark-mode .onley-learning-app-header-container, body.onley-dark-mode .onley-lms-page-title, body.onley-dark-mode .onley-lms-tabs-nav { background-color: #111827; border-color: #374151; }
body.onley-dark-mode .onley-lms-sidebar-nav ul li a, body.onley-dark-mode .onley-icon-btn, body.onley-dark-mode .onley-back-btn { color: #f9fafb; }
body.onley-dark-mode .onley-lms-sidebar-nav ul li a:hover, body.onley-dark-mode .onley-icon-btn:hover { background-color: #374151; }

/* --- Custom HTML Section --- */
.onley-custom-html-section { padding: 2rem 0; }