/*
 * Cams.Zone v2.0 — Main Stylesheet
 * TailAdmin Pro design system, Outfit font, brand #465fff
 * Light/dark mode via Tailwind dark: classes
 */

/* ==================== RESET & BASE ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; font-family: inherit; }

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Scrollbar utilities */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ==================== CSS VARIABLES (brand palette) ==================== */
:root {
    --brand-500: #465fff;
    --brand-600: #3a4fdb;
    --success: #12b76a;
    --error: #f04438;
    --warning: #f79009;
}

/* Age modal — styled via Tailwind in partials/age-modal.blade.php */

/* Cookie banner — styled via Tailwind in partials/cookie-banner.blade.php */

/* ==================== BACK TO TOP ==================== */
.back-to-top {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-500);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(70,95,255,0.3);
}
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(70,95,255,0.4); }
.back-to-top svg { width: 20px; height: 20px; }

/* ==================== HEADER — lh-topbar ==================== */
.lh-cat-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #667085;
    white-space: nowrap;
    transition: all 0.2s;
}
.dark .lh-cat-link { color: #98a2b3; }
.lh-cat-link:hover {
    background: #f2f4f7;
    color: #344054;
}
.dark .lh-cat-link:hover {
    background: #1d2939;
    color: #e4e7ec;
}
.lh-cat-active {
    background: var(--brand-500) !important;
    color: #fff !important;
}

/* ==================== PLATFORM BADGES ==================== */
.lh-platform-chaturbate { background: #f97316; }
.lh-platform-stripchat  { background: #dc2626; }
.lh-platform-bongacams  { background: #db2777; }
.lh-platform-camsoda    { background: #06b6d4; }
.lh-platform-xlovecam   { background: #8b5cf6; }
.lh-platform-cams       { background: #2563eb; }
.lh-platform-cam4       { background: #ea580c; }
.lh-platform-livejasmin { background: #e11d48; }
.lh-platform-cb         { background: #f97316; }
.lh-platform-sc         { background: #dc2626; }
.lh-platform-bc         { background: #db2777; }

/* ==================== VIEW TOGGLE ==================== */
.view-btn.active {
    background: var(--brand-500);
    color: #fff;
}
.dark .view-btn.active {
    background: var(--brand-500);
    color: #fff;
}

/* ==================== QUICK TAGS ==================== */
.quick-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #d0d5dd transparent;
}
.dark .quick-tags { scrollbar-color: #344054 transparent; }
.quick-tags::-webkit-scrollbar { height: 4px; }
.quick-tags::-webkit-scrollbar-track { background: transparent; }
.quick-tags::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 2px; }
.dark .quick-tags::-webkit-scrollbar-thumb { background: #344054; }
.quick-tags-label {
    font-size: 12px;
    color: #98a2b3;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.quick-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 9999px;
    font-size: 13px;
    color: #667085;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}
.dark .quick-tag { background: #1d2939; border-color: #344054; color: #98a2b3; }
.quick-tag:hover {
    border-color: var(--brand-500);
    color: var(--brand-500);
}
.quick-tag.active {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.quick-tag.hot {
    background: linear-gradient(135deg, #f79009, #ea580c);
    border-color: transparent;
    color: #fff;
}
.quick-tag .tag-emoji { font-size: 14px; }

/* ==================== BREADCRUMBS ==================== */
.breadcrumbs {
    background: #f9fafb;
    border-bottom: 1px solid #f2f4f7;
}
.dark .breadcrumbs { background: #0c111d; border-color: #1d2939; }
.breadcrumbs-inner {
    max-width: 1800px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.breadcrumbs a { color: #98a2b3; transition: color 0.15s; }
.breadcrumbs a:hover { color: var(--brand-500); }
.breadcrumbs .separator { color: #d0d5dd; }
.dark .breadcrumbs .separator { color: #344054; }
.breadcrumbs .current { color: #667085; }
.breadcrumbs--hide-mobile { display: block; }
@media (max-width: 768px) { .breadcrumbs--hide-mobile { display: none; } }

/* ==================== SKELETON LOADING ==================== */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f2f4f7 25%, #e4e7ec 50%, #f2f4f7 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 4px;
}
.dark .skeleton {
    background: linear-gradient(90deg, #1d2939 25%, #344054 50%, #1d2939 75%);
    background-size: 200% 100%;
}

/* ==================== NO RESULTS ==================== */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #98a2b3;
}

/* ==================== FILTER SIDEBAR LABEL (legacy compat) ==================== */
.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #98a2b3;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    color: #667085;
    background: #f2f4f7;
    border: 1px solid #e4e7ec;
    transition: all 0.2s;
}
.dark .filter-chip { background: #1d2939; border-color: #344054; color: #98a2b3; }
.filter-chip:hover { border-color: var(--brand-500); color: var(--brand-500); }
.filter-chip-active {
    background: var(--brand-500) !important;
    border-color: var(--brand-500) !important;
    color: #fff !important;
}

/* ==================== ANIMATIONS ==================== */
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:.4} }
.animate-pulse-live { animation: pulse-live 2s ease-in-out infinite; }

/* ========================================================================
   PROFILE PAGE — Layout Grid + Heatmap
   ======================================================================== */

/* Containers */
.profile-container { max-width: 1600px; margin: 0 auto; }
.profile-container-fw { max-width: 1200px; margin: 0 auto; }

/* Two-Column Layout */
.profile-two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}
.profile-two-col__main { min-width: 0; }
.profile-two-col__sidebar { min-width: 0; }

/* Full-Width Layout — Info Row */
.profile-fw-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}
.profile-fw-info-row__left { min-width: 0; }
.profile-fw-info-row__right { min-width: 0; }

/* Heatmap */
.heatmap-wrap { overflow: hidden; }

/* ==================== PROFILE RESPONSIVE ==================== */
@media (max-width: 1024px) {
    .profile-two-col { grid-template-columns: 1fr; }
    .profile-fw-info-row { grid-template-columns: 1fr; }
}