/* I-Class Shared Base CSS - All structural styles for templates 58-64 */
/* Color values come from i-color-XX.css via CSS variables */

:root{--radius:12px;--shadow:0 4px 15px rgba(0,0,0,.08);--shadow-hover:0 8px 30px rgba(0,0,0,.15);--transition:all .3s ease}

/* Reset & Base */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6}
a{color:var(--color-secondary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--color-primary)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.3}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Buttons */
.btn{display:inline-block;padding:12px 28px;border-radius:var(--radius);font-weight:700;text-decoration:none;transition:var(--transition);cursor:pointer;font-size:.9rem;border:none;line-height:1.5}
.btn:hover{color:#fff;text-decoration:none}
.btn-lg{padding:16px 40px;font-size:1.05rem}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{opacity:.9;transform:translateY(-2px);color:#fff}
.btn-outline{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}
.btn-download{background:linear-gradient(135deg,var(--color-secondary),var(--color-primary));color:#fff;box-shadow:0 4px 15px rgba(0,0,0,.2)}
.btn-download:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3);color:#fff}

/* Header Top Bar */
.header-top-bar{background:var(--color-dark);color:#fff;padding:6px 0;font-size:.8rem;text-align:center}
.header-top-bar a{color:rgba(255,255,255,.8);margin:0 8px}
.header-top-bar a:hover{color:var(--color-secondary)}

/* Header */
.site-header{background:linear-gradient(135deg,var(--color-primary),var(--color-dark));position:sticky;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,.2);transition:var(--transition)}
.site-header.scrolled{box-shadow:0 4px 25px rgba(0,0,0,.3)}
.header-inner{display:flex;justify-content:space-between;align-items:center;height:70px}
.site-logo .logo-img{height:45px;width:auto}
.main-nav{display:flex}
.nav-menu{display:flex;list-style:none;gap:25px}
.nav-menu a{color:#fff;font-weight:600;text-decoration:none;padding:5px 0;border-bottom:2px solid transparent;transition:var(--transition);display:inline-block;font-size:.9rem}
.nav-menu a:hover{border-color:var(--color-secondary);color:var(--color-secondary)}
.header-actions{display:flex;gap:10px}
.header-actions .btn-outline{border-color:rgba(255,255,255,.8);color:#fff}
.header-actions .btn-outline:hover{background:rgba(255,255,255,.15)}
.header-actions .btn-primary{background:var(--color-secondary);border:none}
.header-actions .btn-primary:hover{opacity:.9}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:5px}
.nav-toggle-icon{display:block;width:25px;height:3px;background:#fff;position:relative;transition:var(--transition)}
.nav-toggle-icon::before,.nav-toggle-icon::after{content:'';position:absolute;left:0;top:-8px;width:25px;height:3px;background:#fff;transition:var(--transition)}
.nav-toggle-icon::after{top:8px}
.nav-toggle.active .nav-toggle-icon{background:transparent}
.nav-toggle.active .nav-toggle-icon::before{transform:rotate(45deg);top:0}
.nav-toggle.active .nav-toggle-icon::after{transform:rotate(-45deg);top:0}

/* Megamenu (T59, T62) */
.megamenu-wrapper{position:relative}
.megamenu-trigger{cursor:pointer;display:flex;align-items:center;gap:5px}
.megamenu-panel{display:none;position:absolute;top:100%;left:0;min-width:600px;background:var(--color-card);border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.15);padding:25px;z-index:1001}
.megamenu-wrapper:hover .megamenu-panel,.megamenu-panel.active{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mega-col h4{color:var(--color-primary);margin-bottom:10px;font-size:.95rem}
.mega-col ul{list-style:none;padding:0}
.mega-col ul li{margin-bottom:6px}
.mega-col ul li a{color:var(--color-text-light);font-size:.85rem;transition:var(--transition)}
.mega-col ul li a:hover{color:var(--color-primary)}

/* Icon Nav (T60, T63) */
.icon-nav{display:flex;gap:12px;align-items:center}
.icon-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--color-text);font-size:.75rem;transition:var(--transition)}
.icon-nav a:hover{color:var(--color-primary)}

/* Theme Toggle (T64) */
.theme-toggle{background:none;border:2px solid rgba(255,255,255,.5);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);color:#fff;font-size:1rem}
.theme-toggle:hover{background:rgba(255,255,255,.15);border-color:#fff}

/* Category Icons */
.category-section{padding:30px 0;background:var(--color-bg)}
.category-icons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.category-icon-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;border-radius:var(--radius);background:var(--color-card);box-shadow:var(--shadow);transition:var(--transition);text-decoration:none;color:var(--color-text);min-width:90px}
.category-icon-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);color:var(--color-primary)}
.cat-emoji{font-size:1.8rem}
.cat-name{font-size:.75rem;font-weight:600;text-align:center}

/* Hero */
.hero{padding:60px 0;background:linear-gradient(160deg,var(--color-primary) 0%,var(--color-dark) 100%);text-align:center;color:#fff}
.hero h1{font-size:2.5rem;font-weight:900;margin-bottom:12px}
.hero p{font-size:1.1rem;color:rgba(255,255,255,.85);margin-bottom:25px;max-width:600px;margin-left:auto;margin-right:auto}

/* Section Title */
.section-title{text-align:center;font-size:1.8rem;color:var(--color-primary);margin-bottom:35px;font-weight:800;position:relative;padding-bottom:12px}
.section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(90deg,var(--color-secondary),var(--color-primary));border-radius:4px}

/* Search/Filter Bar */
.search-filter-bar{display:flex;gap:12px;margin-bottom:25px;flex-wrap:wrap}
.search-filter-bar input,.search-filter-bar select{padding:10px 16px;border:2px solid var(--color-border);border-radius:var(--radius);font-size:.9rem;font-family:inherit;transition:var(--transition);background:var(--color-card);color:var(--color-text);flex:1;min-width:150px}
.search-filter-bar input:focus,.search-filter-bar select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.05)}

/* Tab Nav (T60) */
.tab-nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.tab-nav button{padding:8px 20px;border:2px solid var(--color-border);border-radius:20px;background:var(--color-card);cursor:pointer;font-weight:600;font-size:.85rem;transition:var(--transition);font-family:inherit;color:var(--color-text)}
.tab-nav button.active,.tab-nav button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}

/* Products Section */
.products-section{padding:50px 0;background:var(--color-card)}

/* Product Grid */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--color-card);box-shadow:var(--shadow);cursor:pointer;transition:var(--transition)}
.product-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-hover)}
.product-img{width:100%;height:200px;object-fit:cover;transition:transform .5s}
.product-card:hover .product-img{transform:scale(1.08)}
.hover-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s;z-index:2}
.product-card:hover .hover-overlay{opacity:1}
.product-info{padding:15px}
.product-name{font-size:1rem;color:var(--color-primary);font-weight:700;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-rating{color:var(--color-accent);font-size:.85rem;margin-bottom:6px}
.product-rating span{color:var(--color-text-light);margin-left:4px}
.product-price{font-size:.85rem;color:var(--color-secondary);font-weight:600}
.product-download{display:inline-block;margin-top:6px;color:var(--color-primary);font-weight:600;font-size:.85rem}
.product-download:hover{color:var(--color-accent)}

/* Bento Grid */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
.bento-item{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);cursor:pointer;transition:var(--transition)}
.bento-item:hover{transform:translateY(-4px) scale(1.02);box-shadow:var(--shadow-hover)}
.bento-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bento-item:hover img{transform:scale(1.08)}
.bento-item-large{grid-column:span 2;grid-row:span 2}
.bento-item-wide{grid-column:span 2;grid-row:span 1}
.bento-item-tall{grid-column:span 1;grid-row:span 2}
.bento-content{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,transparent 100%);color:#fff}
.bento-content .product-name{color:#fff}
.bento-content .product-rating{color:var(--color-accent)}
.bento-content .btn{margin-top:8px}

/* Horizontal Scroll */
.h-scroll-section{padding:50px 0;background:var(--color-bg)}
.h-scroll-container{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:10px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.h-scroll-container::-webkit-scrollbar{display:none}
.h-scroll-item{flex:0 0 220px;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);background:var(--color-card)}
.h-scroll-item:hover{transform:scale(1.03);box-shadow:var(--shadow-hover)}
.h-scroll-item img{width:220px;height:160px;object-fit:cover}
.scroll-info{padding:10px 12px}
.scroll-info h4{font-size:.9rem;color:var(--color-primary);font-weight:700}

/* TI List (T60) */
.ti-section{padding:50px 0;background:var(--color-card)}
.ti-list{display:flex;flex-direction:column;gap:12px}
.ti-list-item{display:flex;gap:15px;align-items:center;padding:15px;background:var(--color-bg);border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition)}
.ti-list-item:hover{transform:translateX(4px);box-shadow:var(--shadow-hover)}
.ti-list-item img{width:70px;height:70px;border-radius:var(--radius);object-fit:cover;flex-shrink:0}
.ti-info h4{color:var(--color-primary);font-size:1rem;margin-bottom:4px}
.ti-info p{color:var(--color-text-light);font-size:.85rem;margin-bottom:4px}

/* Compare Table (T62) */
.compare-section{padding:50px 0;background:var(--color-card)}
.compare-table{width:100%;border-collapse:collapse;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.compare-table thead{background:var(--color-primary);color:#fff}
.compare-table th{padding:14px 16px;text-align:left;font-weight:700;font-size:.9rem}
.compare-table td{padding:12px 16px;border-bottom:1px solid var(--color-border);font-size:.9rem;color:var(--color-text)}
.compare-table tbody tr:hover{background:var(--color-bg)}
.compare-table tbody tr:last-child td{border-bottom:none}

/* Download Priority (T63) */
.download-priority{padding:50px 0;background:linear-gradient(135deg,var(--color-primary),var(--color-dark));text-align:center;color:#fff}
.download-priority h2{font-size:2rem;font-weight:900;margin-bottom:12px}
.download-priority p{font-size:1.1rem;color:rgba(255,255,255,.85);margin-bottom:25px;max-width:600px;margin-left:auto;margin-right:auto}

/* Recent Posts */
.recent-posts{padding:50px 0;background:var(--color-card)}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{border-radius:var(--radius);overflow:hidden;background:var(--color-card);box-shadow:var(--shadow);transition:var(--transition)}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.post-link{text-decoration:none;color:inherit;display:block}
.post-link:hover{color:inherit}
.post-thumb{overflow:hidden;height:180px}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.post-card:hover .post-thumb img{transform:scale(1.08)}
.post-title{font-size:1rem;color:var(--color-primary);font-weight:700;margin:12px 15px 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{font-size:.8rem;color:var(--color-text-light);padding:0 15px 15px;display:flex;gap:12px;flex-wrap:wrap}
.post-author,.post-category,.post-date{font-size:.8rem;color:var(--color-text-light)}
.post-author a,.post-category a{text-decoration:none;color:var(--color-secondary)}
.post-author a:hover,.post-category a:hover{color:var(--color-primary)}
.post-excerpt{padding:0 15px 15px;font-size:.85rem;color:var(--color-text-light);line-height:1.5}
.no-posts{text-align:center;padding:40px 0;color:var(--color-text-light);font-size:1.1rem;grid-column:1/-1}

/* Sidebar */
.sidebar-right{padding:30px 0}
.sidebar-widget{background:var(--color-card);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.widget-title{color:var(--color-primary);font-size:1.1rem;margin-bottom:15px;font-weight:700}
.widget{margin-bottom:15px}

/* Single Post */
.single-post{padding:50px 0}
.single-post .container{max-width:800px}
.single-post .post-title{font-size:2.2rem;color:var(--color-primary);font-weight:800;margin-bottom:15px;padding:0}
.single-post .post-meta{padding:0;margin-bottom:15px;display:flex;gap:15px;flex-wrap:wrap;color:var(--color-text-light)}
.post-content{line-height:1.8;font-size:1.05rem}
.post-content p{margin-bottom:20px}
.post-content img{max-width:100%;height:auto;border-radius:var(--radius);margin:20px 0}
.post-content h2,.post-content h3{margin:25px 0 15px;color:var(--color-primary)}
.post-content h2{font-size:1.6rem}
.post-content h3{font-size:1.3rem}
.post-content a{color:var(--color-secondary);text-decoration:underline}
.post-content blockquote{border-left:4px solid var(--color-secondary);padding:10px 20px;margin:20px 0;background:var(--color-bg);font-style:italic}
.post-content ul,.post-content ol{padding-left:25px;margin-bottom:20px}
.single-post .post-thumb img{width:100%;border-radius:var(--radius);margin:15px 0 25px;height:auto}
.single-post .post-thumb{overflow:hidden;margin:15px 0 25px}
.single-post .btn-download{margin-top:25px}
.related-posts{padding:40px 0;background:var(--color-bg)}

/* Archive */
.archive-header{background:linear-gradient(135deg,var(--color-primary),var(--color-dark));padding:50px 0;text-align:center}
.archive-title{color:#fff;font-size:2rem;font-weight:800}
.posts-section{padding:40px 0}

/* Modal */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:2000;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal-box{background:var(--color-card);border-radius:var(--radius);padding:30px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .3s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.modal-close{position:absolute;top:10px;right:15px;background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--color-text-light);transition:var(--transition)}
.modal-close:hover{color:var(--color-primary)}
.modal-box img{width:100%;height:200px;object-fit:cover;border-radius:var(--radius);margin-bottom:15px}
.modal-box h3{color:var(--color-primary);font-size:1.3rem;margin-bottom:8px}
.modal-rating{color:var(--color-accent);margin-bottom:10px;font-size:1rem}
.modal-desc{color:var(--color-text-light);font-size:.9rem;margin-bottom:15px;line-height:1.6}

/* Page Links */
.page-links{margin:20px 0;text-align:center}
.page-links a,.page-links span{display:inline-block;padding:6px 12px;margin:0 3px;border-radius:8px;background:var(--color-bg);color:var(--color-primary);text-decoration:none;font-size:.85rem;border:1px solid var(--color-border);transition:var(--transition)}
.page-links span.current{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.page-links a:hover{background:var(--color-primary);color:#fff}

/* Scroll Reveal */
.scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.scroll-reveal.visible{opacity:1;transform:translateY(0)}

/* Pagination */
.pagination,.wp-pagination,.nav-links{text-align:center;margin:40px 0;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.pagination .page-numbers,.page-numbers,.nav-links a,.nav-links span{display:inline-block;padding:10px 16px;margin:0 3px;border-radius:var(--radius);background:var(--color-card);color:var(--color-primary);text-decoration:none;border:1px solid var(--color-border);font-weight:600;transition:var(--transition)}
.pagination .page-numbers.current,.page-numbers.current,.nav-links .current{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.pagination a.page-numbers:hover,a.page-numbers:hover,.nav-links a:hover{background:var(--color-bg);color:var(--color-primary)}
.pagination .page-numbers.dots,.page-numbers.dots{border:none;background:transparent}

/* Footer */
.site-footer{background:linear-gradient(135deg,var(--color-primary),var(--color-dark));color:#fff;padding:40px 0 20px}
.footer-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:30px}
.footer-widget h3,.footer-widget .widget-title{color:var(--color-secondary);font-size:1.1rem;margin-bottom:15px;font-weight:700}
.footer-widget ul{list-style:none;padding:0}
.footer-widget ul li{margin-bottom:8px}
.footer-widget ul li a,.footer-widget a{color:rgba(255,255,255,.75);text-decoration:none;transition:var(--transition)}
.footer-widget ul li a:hover,.footer-widget a:hover{color:var(--color-secondary)}
.footer-widget p{color:rgba(255,255,255,.75);line-height:1.6}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:25px}
.footer-bottom a{display:inline-block;margin-bottom:10px}
.disclaimer-text{color:rgba(255,255,255,.6);font-size:.85rem;max-width:800px;margin:15px auto 0;line-height:1.6}

/* Misc */
.page-content{max-width:800px;margin:0 auto}
.page-title{font-size:2rem;color:var(--color-primary);margin-bottom:20px}
.site-main{min-height:400px}
.site-content{min-height:60vh}