/* ============================================
   CRITHIT CSS - MAIN ENTRY POINT
   ============================================
   Modular CSS architecture inspired by PlanShake.
   Import order matters for proper cascade.
   ============================================ */

/* 1. Variables and Core Theme */
@import '_variables.css';

/* 2. Base Styles (reset, typography, scrollbars) */
@import '_base.css';

/* 3. Components (buttons, inputs, modals, cards, datepicker, dropdowns) */
@import '_components.css';
@import '_dropdowns.css';
@import '_datepicker.css';

/* 4. Layout (header, nav, footer) */
@import '_layout.css';

/* 5. Pages and Features */
@import '_pages.css';
@import 'pages/chat.css';
@import 'pages/detail-pages.css';
@import 'pages/write.css';
@import '_rte-table.css';
@import 'admin.css';
@import 'studio.css';
@import 'preview-overlay.css';
@import '_steam-style.css';
@import 'social-post.css';

/* 6. Responsive Styles (Tablets & Phones) */
@import '_responsive.css';

/* 7. Dark Theme Overrides (Must be last) */
@import '_theme-dark.css';

/* Global Card Improvements */
.review-card,
.news-card {
   background: rgba(30, 30, 40, 0.6);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.05);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s, box-shadow 0.2s;
}

.review-card:hover,
.news-card:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
   border-color: rgba(255, 255, 255, 0.1);
}

.review-stats,
.news-stats {
   background: rgba(0, 0, 0, 0.2);
   padding: 10px 15px;
   border-radius: 8px;
   display: flex;
   gap: 15px;
   align-items: center;
   margin-top: 15px;
}

.like-btn,
.dislike-btn {
   background: transparent;
   border: none;
   color: #ccc;
   cursor: pointer;
   transition: all 0.2s;
   font-size: 0.95rem;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 4px 8px;
   border-radius: 4px;
}

.like-btn:hover,
.dislike-btn:hover {
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
}

.like-btn.liked {
   color: #ff4757;
}

.dislike-btn.disliked {
   color: #a4b0be;
}

/* Ensure images in posts don't overflow */
.social-post-card img {
   pointer-events: none;
}