/**
 * View Page - Mobile Styles
 * App-style design for lovesite.co.il
 * Works with site header and footer
 */

@media (max-width: 768px) {
    /* ========================================
       Page Body - Mobile
       ======================================== */
    body.view-page-body {
        background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 50%, #e8eaf6 100%) !important;
        overflow-x: hidden !important;
        min-height: 100vh !important;
    }

    /* Accessibility widget positioning */
    .a11y-widget-panel {
        z-index: 9999 !important;
        position: fixed !important;
    }

    /* ========================================
       MOBILE RESTRUCTURE SUPPORT
       JS moves content-container to be direct child of body
       ======================================== */

    /* When JS has restructured, hide old content (header.php tables and other elements) */
    body.mobile-restructured > *:not(.content-container):not(.mobile-header):not(.mobile-bottom-nav):not(.a11y-widget-panel):not(.a11y-toggle-btn):not(.report-modal):not(.auth-overlay):not(.pull-to-refresh):not(script):not(style):not(link) {
        display: none !important;
    }

    /* Also hide user-top-bar and footer */
    body.mobile-restructured > .user-top-bar,
    body.mobile-restructured > .site-footer,
    body.mobile-restructured > footer,
    body.mobile-restructured > div:not(.content-container):not(.a11y-widget-panel):not(.report-modal):not(.auth-overlay):not(.pull-to-refresh) {
        display: none !important;
    }

    /* The content-container after JS moves it */
    body.mobile-restructured > .content-container {
        display: block !important;
    }

    /* ========================================
       Content Container - Mobile
       ======================================== */
    .content-container {
        display: block !important;
        padding: 70px 12px 90px !important;
        min-height: 100vh !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    /* Hide desktop back link and nav links */
    .back-link,
    .nav-links {
        display: none !important;
    }

    /* ========================================
       Breadcrumb - Mobile
       ======================================== */
    .breadcrumb {
        display: none !important;
    }

    /* ========================================
       Content Card - Mobile
       ======================================== */
    .content-card {
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
    }

    .content-header {
        padding: 20px 16px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .type-badge {
        font-size: 11px !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
        display: inline-block !important;
    }

    .content-title {
        font-size: 1.3rem !important;
        margin: 0 0 12px !important;
        line-height: 1.4 !important;
    }

    .content-author {
        gap: 10px !important;
    }

    .author-avatar {
        width: 42px !important;
        height: 42px !important;
        border-width: 2px !important;
    }

    .author-name {
        font-size: 14px !important;
    }

    .author-name a {
        color: white !important;
    }

    .content-date {
        font-size: 12px !important;
    }

    .content-stats {
        gap: 15px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }

    .stat-item {
        gap: 4px !important;
    }

    /* ========================================
       Content Body - Mobile
       ======================================== */
    .content-body {
        padding: 20px 16px !important;
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .content-body blockquote {
        font-size: 18px !important;
        padding: 16px 18px !important;
        border-radius: 10px !important;
        line-height: 1.7 !important;
    }

    /* ========================================
       Content Footer - Mobile
       ======================================== */
    .content-footer {
        padding: 16px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .action-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
    }

    .action-btn:hover {
        transform: none !important;
    }

    .action-btn:active {
        transform: scale(0.98) !important;
    }

    /* ========================================
       Share Section - Mobile
       ======================================== */
    .share-section {
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-top: 16px !important;
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    .share-label {
        font-size: 14px !important;
    }

    .share-links {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }

    .share-links a {
        margin-left: 0 !important;
        font-size: 14px !important;
    }

    /* ========================================
       Comments Section - Mobile
       ======================================== */
    .comments-section {
        border-radius: 16px !important;
        margin-top: 16px !important;
        padding: 20px 16px !important;
    }

    .comments-title {
        font-size: 16px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }

    .comment-card {
        border-radius: 12px !important;
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        border-right-width: 3px !important;
    }

    .comment-header {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .comment-author {
        font-size: 14px !important;
    }

    .comment-date {
        font-size: 11px !important;
    }

    .comment-content {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .comment-delete-btn {
        font-size: 12px !important;
        padding: 4px 6px !important;
    }

    .no-comments {
        padding: 16px !important;
        font-size: 14px !important;
    }

    /* ========================================
       Add Comment Form - Mobile
       ======================================== */
    .add-comment-form {
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    .add-comment-form h4 {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    .add-comment-form textarea {
        min-height: 100px !important;
        padding: 12px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }

    .add-comment-form > form > div {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .add-comment-form .action-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Login to comment box */
    .login-to-comment {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    .login-to-comment p {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    /* ========================================
       Report Modal - Mobile
       ======================================== */
    .report-modal {
        z-index: 10000 !important;
    }

    .report-modal-content {
        border-radius: 16px !important;
        padding: 24px 20px !important;
        max-width: 95% !important;
        width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    .report-modal h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }

    .report-options {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .report-option {
        padding: 12px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    .report-modal-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .report-modal-actions .action-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* ========================================
       Alert Messages - Mobile
       ======================================== */
    .alert-success,
    .alert-error {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        font-size: 14px !important;
    }

    /* ========================================
       Touch Feedback
       ======================================== */
    .action-btn,
    .share-links a,
    .comment-delete-btn {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* ========================================
       Safe Area Support (iPhone notch)
       ======================================== */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .content-container {
            padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Small phones */
@media (max-width: 375px) {
    .content-container {
        padding: 65px 10px 85px !important;
    }

    .content-header {
        padding: 18px 14px !important;
    }

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

    .content-body {
        padding: 18px 14px !important;
        font-size: 14px !important;
    }

    .content-body blockquote {
        font-size: 16px !important;
        padding: 14px 16px !important;
    }

    .comments-section {
        padding: 18px 14px !important;
    }

    .comment-card {
        padding: 12px 14px !important;
    }
}