/* ===============================
   Red Social - Design System Global
   Reusable visual layer for all pages
   =============================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap');

:root {
    --ds-bg-900: #030b1a;
    --ds-bg-800: #071a37;
    --ds-bg-700: #0f2d56;
    --ds-surface-700: rgba(18, 47, 90, 0.82);
    --ds-surface-500: rgba(43, 106, 194, 0.28);
    --ds-line: rgba(174, 213, 255, 0.35);
    --ds-line-strong: rgba(201, 230, 255, 0.6);
    --ds-text-main: #e9f3ff;
    --ds-text-soft: #b9d3f1;
    --ds-accent: #62bbff;
    --ds-accent-2: #8ddcff;
    --ds-panel-gradient: linear-gradient(140deg, rgba(6, 16, 34, 0.95) 0%, rgba(16, 46, 97, 0.88) 56%, rgba(55, 128, 220, 0.72) 100%);
    --ds-pill-gradient: linear-gradient(180deg, #8edbff 0%, #4a98ea 68%, #2e64c4 100%);
    --ds-ease: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.01em;
}

.navbar-fixed {
    border-bottom: 1px solid rgba(209, 233, 255, 0.22);
    background:
        linear-gradient(110deg, rgba(0, 4, 14, 0.96) 0%, rgba(2, 20, 50, 0.95) 50%, rgba(27, 84, 169, 0.92) 100%);
    box-shadow: 0 16px 28px rgba(4, 9, 20, 0.38);
    backdrop-filter: blur(14px);
}

.navbar-logo span,
.nav-tab,
.btn-login,
.btn-register,
.action-btn,
.user-name,
.user-email {
    color: #e7f2ff;
}

.nav-tab:hover,
.nav-tab.active {
    color: #ffffff;
}

.nav-tab.active::after {
    background: linear-gradient(90deg, #8ddcff, #61b9ff);
}

.navbar-search {
    border: 1px solid rgba(176, 214, 255, 0.45);
    background: rgba(8, 29, 58, 0.55);
}

.navbar-search input,
.navbar-search i {
    color: #def0ff;
}

.navbar-search input::placeholder {
    color: #a9c8e8;
}

.guest-actions .btn-login,
.guest-actions .btn-register {
    border-radius: 999px;
    padding: 0.58rem 1.05rem;
    font-weight: 500;
    transition: all var(--ds-ease);
}

.guest-actions .btn-login {
    border: 1px solid rgba(170, 210, 255, 0.6);
    background: rgba(11, 34, 69, 0.56);
}

.guest-actions .btn-register {
    border: 1px solid rgba(175, 218, 255, 0.7);
    background: linear-gradient(120deg, rgba(74, 152, 234, 0.7), rgba(141, 220, 255, 0.66));
}

.guest-actions .btn-login:hover,
.guest-actions .btn-register:hover {
    transform: translateY(-2px);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-primary {
    border-radius: 12px;
}

.form-control,
input[type='text'],
input[type='email'],
input[type='password'],
select,
textarea {
    border-radius: 10px;
}

.card,
.professional-card,
.category-card,
.testimonial-card {
    border-radius: 20px;
}

.site-footer {
    margin-top: 0;
    background:
        linear-gradient(115deg, rgba(2, 8, 20, 0.98) 0%, rgba(4, 25, 54, 0.97) 52%, rgba(26, 83, 163, 0.95) 100%);
    border-top: 1px solid rgba(181, 218, 255, 0.25);
}

.footer-links a {
    color: #d6e9ff;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-copyright p {
    color: #b9d6f4;
}

/* Generic reusable section shell for future pages */
.retrofitted-section {
    position: relative;
    background: var(--ds-panel-gradient);
    color: var(--ds-text-main);
    border-top: 1px solid var(--ds-line);
    border-bottom: 1px solid var(--ds-line);
}

.retrofitted-panel {
    background: linear-gradient(175deg, rgba(115, 182, 255, 0.28) 0%, rgba(39, 101, 186, 0.2) 60%, rgba(10, 29, 60, 0.24) 100%);
    border: 1px solid var(--ds-line);
    border-radius: 24px;
    box-shadow: 0 20px 42px rgba(2, 10, 24, 0.35);
    backdrop-filter: blur(4px);
}

.retrofitted-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--ds-line-strong);
    color: #f6fbff;
    background: var(--ds-pill-gradient);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: transform var(--ds-ease), box-shadow var(--ds-ease);
}

.retrofitted-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(62, 136, 228, 0.35);
}

@media (max-width: 768px) {
    .navbar-container {
        padding: 0 1rem;
    }
}

/* ===============================
   Cross-Page Visual Unification
   =============================== */

body:not(.homepage) .main-container,
body:not(.homepage) .app-full-width,
body:not(.homepage) .stats-main,
body:not(.homepage) .profile-wrapper,
body:not(.homepage) .messages-wrapper,
body:not(.homepage) .settings-wrapper,
body:not(.homepage) .register-main {
    background:
    radial-gradient(circle at 18% 22%, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 34%),
    radial-gradient(circle at 85% 18%, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0) 30%),
    linear-gradient(135deg, #0d1117 0%, #161b22 50%, #21262d 100%);
}

body:not(.homepage) .explore-header,
body:not(.homepage) .stats-header,
body:not(.homepage) .messages-header,
body:not(.homepage) .settings-header,
body:not(.homepage) .register-intro,
body:not(.homepage) .results-header {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 24px;
    padding: 1.25rem 1.4rem;
    background: linear-gradient(160deg, rgba(13, 17, 23, 0.95), rgba(22, 27, 34, 0.92) 58%, rgba(33, 38, 45, 0.9));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32);
    color: var(--text-primary);
}

body:not(.homepage) .explore-header h1,
body:not(.homepage) .stats-header h1,
body:not(.homepage) .messages-header h1,
body:not(.homepage) .settings-header h1,
body:not(.homepage) .register-intro h1,
body:not(.homepage) .results-header h2,
body:not(.homepage) .section-header h2,
body:not(.homepage) .panel-header h2,
body:not(.homepage) .widget h3,
body:not(.homepage) .sidebar-card h3,
body:not(.homepage) .form-section h2 {
    color: var(--text-primary);
}

body:not(.homepage) .explore-header p,
body:not(.homepage) .stats-header p,
body:not(.homepage) .messages-header p,
body:not(.homepage) .settings-header p,
body:not(.homepage) .register-intro p,
body:not(.homepage) .results-header p,
body:not(.homepage) .section-description {
    color: var(--text-secondary);
}

body:not(.homepage) .content-section,
body:not(.homepage) .widget,
body:not(.homepage) .promo-widget,
body:not(.homepage) .sidebar-card,
body:not(.homepage) .stats-card,
body:not(.homepage) .panel-header,
body:not(.homepage) .conversations-panel,
body:not(.homepage) .chat-panel,
body:not(.homepage) .settings-main,
body:not(.homepage) .settings-sidebar,
body:not(.homepage) .user-section,
body:not(.homepage) .kpi-card,
body:not(.homepage) .chart-section,
body:not(.homepage) .tips-section,
body:not(.homepage) .verification-card,
body:not(.homepage) .register-form-section,
body:not(.homepage) .register-info-section,
body:not(.homepage) .form-container,
body:not(.homepage) .profile-main,
body:not(.homepage) .profile-sidebar {
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    background: linear-gradient(170deg, rgba(13, 17, 23, 0.94), rgba(22, 27, 34, 0.9) 56%, rgba(33, 38, 45, 0.92));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
    color: var(--text-primary);
}

body:not(.homepage) .professional-card,
body:not(.homepage) .user-card,
body:not(.homepage) .webinar-card,
body:not(.homepage) .conversation-item,
body:not(.homepage) .recent-post-item,
body:not(.homepage) .contact-type-card,
body:not(.homepage) .tip-card,
body:not(.homepage) .step-item {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(170deg, rgba(13, 17, 23, 0.9), rgba(22, 27, 34, 0.88) 56%, rgba(33, 38, 45, 0.9));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

body:not(.homepage) .search-form,
body:not(.homepage) .filters-form,
body:not(.homepage) .search-section,
body:not(.homepage) .period-selector,
body:not(.homepage) .sort-options {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(13, 17, 23, 0.9), rgba(22, 27, 34, 0.86) 62%, rgba(33, 38, 45, 0.9));
    color: var(--text-primary);
}

body:not(.homepage) .form-control,
body:not(.homepage) input[type='text'],
body:not(.homepage) input[type='email'],
body:not(.homepage) input[type='password'],
body:not(.homepage) select,
body:not(.homepage) textarea {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(13, 17, 23, 0.94);
    color: var(--text-primary);
}

body:not(.homepage) input::placeholder,
body:not(.homepage) textarea::placeholder {
    color: var(--text-tertiary);
}

body:not(.homepage) .btn,
body:not(.homepage) .btn-primary,
body:not(.homepage) .search-btn,
body:not(.homepage) .btn-secondary,
body:not(.homepage) .btn-outline,
body:not(.homepage) .page-btn,
body:not(.homepage) .quick-link,
body:not(.homepage) .professional-link,
body:not(.homepage) .pro-link,
body:not(.homepage) .rp-view {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

body:not(.homepage) .btn-primary,
body:not(.homepage) .search-btn {
    color: #f8fafc;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

body:not(.homepage) .btn-secondary,
body:not(.homepage) .btn-outline,
body:not(.homepage) .page-btn,
body:not(.homepage) .quick-link,
body:not(.homepage) .rp-view {
    color: var(--text-primary);
    background: rgba(13, 17, 23, 0.8);
}

body:not(.homepage) .btn-primary:hover,
body:not(.homepage) .search-btn:hover,
body:not(.homepage) .btn-secondary:hover,
body:not(.homepage) .btn-outline:hover,
body:not(.homepage) .page-btn:hover,
body:not(.homepage) .quick-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.25);
}

body:not(.homepage) p,
body:not(.homepage) label,
body:not(.homepage) span,
body:not(.homepage) li,
body:not(.homepage) .form-help,
body:not(.homepage) .last-message,
body:not(.homepage) .user-meta-line,
body:not(.homepage) .kpi-label,
body:not(.homepage) .kpi-detail,
body:not(.homepage) .stat-label,
body:not(.homepage) .section-subtitle,
body:not(.homepage) .author-role {
    color: var(--text-secondary);
}

body:not(.homepage) .kpi-value,
body:not(.homepage) .stat-number,
body:not(.homepage) .n,
body:not(.homepage) .rating-text,
body:not(.homepage) .page-title,
body:not(.homepage) .user-display-name {
    color: var(--text-primary);
}

body:not(.homepage) .pagination .page-btn.active,
body:not(.homepage) .quick-link.active {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #f8fafc;
}

@media (max-width: 992px) {
    body:not(.homepage) .content-section,
    body:not(.homepage) .widget,
    body:not(.homepage) .promo-widget,
    body:not(.homepage) .sidebar-card,
    body:not(.homepage) .stats-card,
    body:not(.homepage) .kpi-card,
    body:not(.homepage) .chart-section,
    body:not(.homepage) .tips-section,
    body:not(.homepage) .form-container,
    body:not(.homepage) .profile-main,
    body:not(.homepage) .profile-sidebar {
        border-radius: 18px;
    }
}