/* ========================================
   MOBILE RESPONSIVE STYLES - PERFECT EDITION
   ======================================== */

/* ===== GLOBAL MOBILE FIXES ===== */
@media (max-width: 1024px) {

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    * {
        max-width: 100vw;
    }

    /* Header Full Width Fix */
    header {
        width: 100% !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .top-bar,
    .header-main,
    .category-bar,
    .nav-top {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Force Close All Drawers */
    #mobileDrawer,
    #gamesDrawer,
    .drawer,
    .side-drawer,
    .mobile-menu {
        transform: translateX(-100%) !important;
        display: none !important;
        visibility: hidden !important;
    }

    #drawerOverlay,
    #gamesOverlay,
    .drawer-overlay,
    .overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Force Body Centered */
    body {
        transform: translateX(0) !important;
        left: 0 !important;
        position: relative !important;
    }

    .header-fluid {
        padding: 0 15px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .nav-top {
        padding: 10px 15px;
    }

    .search-form {
        min-width: 200px;
        width: 220px;
    }

    .search-form:focus-within {
        width: 300px;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .detail-container {
        grid-template-columns: 1fr;
    }

    .sidebar,
    .left-sidebar,
    .right-sidebar {
        display: none !important;
    }

    .header-spacer {
        height: 160px !important;
    }

    /* Main Layout Full Width */
    .main-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .main-content {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 !important;
    }

    .container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }
}

/* ===== TABLET ADJUSTMENTS (768px - 1024px) ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    .hero-grid {
        grid-template-columns: 1fr !important;
    }

    .text-hero-area {
        grid-column: span 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .personalized-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .news-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===== MOBILE ONLY (max-width: 768px) ===== */
@media (max-width: 768px) {
    .header-spacer {
        height: 140px !important;
    }

    /* ===== TOP BAR ===== */
    .top-bar {
        height: auto;
        min-height: 50px;
        padding: 8px 15px !important;
    }

    .header-fluid {
        padding: 0 10px !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Ticker Adjustments */
    .ticker-wrap {
        order: 3;
        width: 100% !important;
        margin: 10px 0 0 0 !important;
        min-width: 100% !important;
    }

    .ticker-label {
        font-size: 0.6rem !important;
        padding: 0 10px !important;
        height: 26px !important;
        margin-right: 10px !important;
    }

    .ticker-content {
        padding-left: 15px !important;
    }

    .breaking-news-link {
        font-size: 0.8rem !important;
        gap: 8px !important;
    }

    .news-flash-icon {
        font-size: 0.9rem !important;
    }

    /* Auth Links */
    .auth-links {
        flex-wrap: wrap;
        gap: 6px !important;
        font-size: 0.65rem !important;
    }

    .auth-links a {
        font-size: 0.65rem !important;
        padding: 5px 10px !important;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        white-space: nowrap;
    }

    .live-clock-wrapper {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
        height: auto !important;
    }

    /* ===== NAVIGATION ===== */
    .nav-top {
        min-height: auto;
        padding: 10px 15px !important;
        flex-wrap: wrap;
        gap: 10px;
    }

    .nav-left {
        gap: 10px;
        flex-wrap: wrap;
    }

    .nav-right {
        width: 100%;
        margin-top: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .logo {
        font-size: 1.4rem !important;
        letter-spacing: -1px !important;
    }

    .finance-band {
        display: none !important;
    }

    .search-form {
        min-width: 100% !important;
        width: 100% !important;
        margin-top: 10px;
        order: 10;
    }

    .search-form:focus-within {
        width: 100% !important;
        transform: none !important;
    }

    .header-extras,
    .weather-widget,
    .prayer-widget {
        display: none !important;
    }

    /* Category Bar */
    .category-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-links {
        justify-content: flex-start;
        padding: 10px 15px !important;
        gap: 5px;
    }

    .nav-links a {
        font-size: 0.75rem !important;
        padding: 8px 14px !important;
        white-space: nowrap;
    }

    /* ===== MAIN CONTENT ===== */
    .container,
    .main-content,
    .content-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* ===== HERO SECTION ===== */
    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }

    .text-hero-area {
        grid-column: span 1 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .text-hero-area>a {
        padding: 30px 20px !important;
    }

    .text-hero-area h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 15px !important;
    }

    .text-hero-area p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    .text-hero-area>div {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .text-hero-area>div>a {
        padding: 15px !important;
    }

    .text-hero-area>div>a h3 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .text-hero-area>div>a span {
        font-size: 0.6rem !important;
    }

    /* ===== SENTIMENT WIDGET ===== */
    .sentiment-trend-widget {
        margin-bottom: 25px !important;
        padding: 20px 15px !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .sentiment-trend-widget>div:first-child {
        gap: 15px !important;
    }

    .sentiment-trend-widget>div:first-child>div:first-child {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }

    .sentiment-trend-widget h4 {
        font-size: 0.9rem !important;
    }

    .sentiment-trend-widget span {
        font-size: 0.75rem !important;
    }

    .sentiment-trend-widget>div:last-child {
        text-align: left !important;
        min-width: 100% !important;
    }

    /* ===== PERSONALIZED SECTION ===== */
    .personalized-section {
        padding: 20px 15px !important;
        margin-bottom: 25px !important;
    }

    .personalized-header h2 {
        font-size: 1.3rem !important;
    }

    .personalized-header span {
        font-size: 0.65rem !important;
    }

    .personalized-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .personalized-item {
        padding: 15px !important;
    }

    .personalized-item>div:first-child {
        height: 140px !important;
    }

    .personalized-item h3 {
        font-size: 0.95rem !important;
    }

    /* ===== NEWS GRID ===== */
    .section-title {
        margin: 30px 0 20px !important;
        padding-bottom: 15px !important;
    }

    .section-title h2 {
        font-size: 1.5rem !important;
        letter-spacing: -1px !important;
    }

    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .news-card {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px !important;
    }

    .featured-card {
        grid-column: span 1 !important;
    }

    .card-img-container {
        aspect-ratio: 16 / 9 !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .card-body-wrapper {
        padding: 18px !important;
    }

    .card-meta {
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 10px !important;
    }

    .card-category-badge {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }

    .calendar-meta {
        font-size: 0.7rem !important;
    }

    .card-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .featured-card .card-title {
        font-size: 1.3rem !important;
    }

    .card-sentiment-bar {
        padding-top: 12px !important;
    }

    .card-sentiment-bar span {
        font-size: 0.7rem !important;
    }

    .card-confidence {
        font-size: 0.75rem !important;
    }

    /* AI Badge */
    .ai-badge {
        top: 12px !important;
        right: 12px !important;
        padding: 5px 10px !important;
        font-size: 0.6rem !important;
        gap: 6px !important;
    }

    .ai-dot {
        width: 5px !important;
        height: 5px !important;
    }

    /* Save Button */
    .card-save-btn {
        width: 40px !important;
        height: 40px !important;
        bottom: 15px !important;
        right: 15px !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ===== LOAD MORE BUTTON ===== */
    .load-more-btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 0.85rem !important;
    }

    /* ===== NUDGE BAR ===== */
    .nudge-bar {
        flex-direction: column !important;
        padding: 15px 20px !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .nudge-content {
        gap: 12px !important;
    }

    .nudge-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.2rem !important;
    }

    .nudge-text b {
        font-size: 0.95rem !important;
    }

    .nudge-text span {
        font-size: 0.8rem !important;
    }

    .btn-nudge {
        width: 100%;
        text-align: center;
        padding: 12px 20px !important;
    }

    /* ===== DETAIL PAGE ===== */
    .detail-container {
        padding: 15px !important;
    }

    .article-main {
        padding: 20px 15px !important;
        border-radius: 16px !important;
    }

    .article-title {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }

    .article-meta {
        flex-wrap: wrap;
        gap: 10px;
        font-size: 0.8rem !important;
    }

    .article-content {
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    .article-content h2 {
        font-size: 1.4rem !important;
    }

    .article-content h3 {
        font-size: 1.2rem !important;
    }

    .article-content p {
        margin-bottom: 15px !important;
    }

    /* ===== COMMENTS ===== */
    .comment-form {
        padding: 15px !important;
    }

    .comment-item {
        padding: 15px !important;
    }

    /* ===== FOOTER ===== */
    footer {
        padding: 30px 15px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .footer-section h4 {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }

    .footer-section a,
    .footer-section p {
        font-size: 0.85rem !important;
    }

    .newsletter-form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .newsletter-form input {
        width: 100% !important;
    }

    .newsletter-form button {
        width: 100% !important;
    }

    .social-links {
        justify-content: center !important;
        gap: 15px !important;
    }

    .social-links a {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 15px !important;
    }

    /* ===== WIDGETS (if visible) ===== */
    .widget {
        margin-bottom: 20px !important;
    }

    .widget-header {
        padding: 15px 20px !important;
    }

    .widget-header h3 {
        font-size: 0.95rem !important;
    }

    .widget-body {
        padding: 15px !important;
    }

    /* ===== ZODIAC GRID FIX ===== */
    .zodiac-grid,
    .horoscope-grid,
    .burc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .zodiac-card,
    .horoscope-card,
    .burc-card {
        padding: 12px !important;
    }

    .zodiac-card h4,
    .horoscope-card h4,
    .burc-card h4 {
        font-size: 0.85rem !important;
    }

    /* ===== MOBILE DRAWER ===== */
    .mobile-drawer {
        width: 85% !important;
        max-width: 320px !important;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media (max-width: 480px) {
    .header-spacer {
        height: 160px !important;
    }

    /* Logo */
    .logo {
        font-size: 1.2rem !important;
    }

    /* Menu Toggle */
    .menu-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.9rem !important;
    }

    /* Ticker */
    .ticker-label {
        font-size: 0.55rem !important;
        padding: 0 8px !important;
        height: 24px !important;
    }

    .breaking-news-link {
        font-size: 0.75rem !important;
    }

    /* Auth Links */
    .auth-links a {
        font-size: 0.6rem !important;
        padding: 4px 8px !important;
    }

    /* Navigation */
    .nav-links a {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }

    /* Hero Section */
    .text-hero-area>a {
        padding: 25px 15px !important;
    }

    .text-hero-area h1 {
        font-size: 1.5rem !important;
    }

    .text-hero-area p {
        font-size: 0.85rem !important;
    }

    /* News Cards */
    .news-card {
        border-radius: 16px !important;
    }

    .card-body-wrapper {
        padding: 15px !important;
    }

    .card-title {
        font-size: 1rem !important;
    }

    .featured-card .card-title {
        font-size: 1.15rem !important;
    }

    /* Article */
    .article-main {
        padding: 15px !important;
    }

    .article-title {
        font-size: 1.4rem !important;
    }

    .article-content {
        font-size: 0.95rem !important;
    }

    /* Badges */
    .badge,
    .category-badge {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }

    /* Section Titles */
    .section-title h2 {
        font-size: 1.3rem !important;
    }

    /* Sentiment Widget */
    .sentiment-trend-widget {
        padding: 15px !important;
    }

    /* Personalized Section */
    .personalized-section {
        padding: 15px !important;
    }

    .personalized-header h2 {
        font-size: 1.1rem !important;
    }

    /* Zodiac Grid */
    .zodiac-grid,
    .horoscope-grid,
    .burc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .header-spacer {
        height: 140px !important;
    }

    .top-bar {
        min-height: 45px !important;
    }

    .nav-top {
        min-height: auto !important;
        padding: 8px 15px !important;
    }

    .text-hero-area h1 {
        font-size: 1.6rem !important;
    }
}

/* ===== VERY SMALL SCREENS (max-width: 360px) ===== */
@media (max-width: 360px) {
    .header-fluid {
        padding: 0 10px !important;
    }

    .nav-top {
        padding: 8px 10px !important;
    }

    .logo {
        font-size: 1.1rem !important;
    }

    .container {
        padding: 0 10px !important;
    }

    .news-grid {
        padding: 0 !important;
        gap: 15px !important;
    }

    .article-main {
        padding: 12px !important;
    }

    .text-hero-area h1 {
        font-size: 1.3rem !important;
    }

    .card-title {
        font-size: 0.95rem !important;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets */
    .nav-links a,
    .auth-links a,
    button,
    .btn,
    a[role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Remove hover effects on touch devices */
    .news-card:hover {
        transform: none !important;
    }

    .card-save-btn {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Improve scrolling */
    .ticker-content,
    .category-bar,
    .nav-links {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {

    .news-card,
    .widget,
    .personalized-item {
        border-width: 2px !important;
    }

    .card-title a,
    .text-hero-area h1 {
        color: #ffffff !important;
    }
}