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

@media (max-width: 768px) {
    /* ========================================
       Page Body - Mobile
       ======================================== */
    body.polls-page-body {
        background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 50%, #ce93d8 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 polls-container to be direct child of body
       ======================================== */

    /* When JS has restructured, hide old content */
    body.mobile-restructured > *:not(.polls-container):not(.mobile-header):not(.mobile-bottom-nav):not(.a11y-widget-panel):not(.a11y-toggle-btn):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(.polls-container):not(.a11y-widget-panel):not(.auth-overlay):not(.pull-to-refresh) {
        display: none !important;
    }

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

    /* ========================================
       Polls Container - Mobile
       ======================================== */
    .polls-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 */
    .back-link {
        display: none !important;
    }

    /* ========================================
       Polls Hero - Mobile
       ======================================== */
    .polls-hero {
        border-radius: 16px !important;
        padding: 30px 16px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 4px 15px rgba(156, 39, 176, 0.25) !important;
    }

    .polls-hero h1 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .polls-hero p {
        font-size: 14px !important;
    }

    .polls-hero .stats {
        font-size: 13px !important;
        margin-top: 12px !important;
    }

    .polls-hero .submit-btn {
        padding: 10px 24px !important;
        font-size: 14px !important;
        margin-top: 16px !important;
    }

    /* ========================================
       Poll Card - Mobile
       ======================================== */
    .poll-card {
        border-radius: 16px !important;
        margin-bottom: 20px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    }

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

    .poll-title {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }

    .poll-meta {
        font-size: 13px !important;
    }

    .poll-body {
        padding: 20px 16px !important;
    }

    /* ========================================
       Vote Form - Mobile
       ======================================== */
    .vote-form {
        gap: 10px !important;
    }

    .vote-option {
        padding: 14px 16px !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }

    .vote-option input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
    }

    .vote-option label {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .vote-btn {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        margin-top: 16px !important;
    }

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

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

    /* ========================================
       Results - Mobile
       ======================================== */
    .results-container {
        gap: 12px !important;
    }

    .result-item {
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }

    .result-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .result-text {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .result-stats {
        font-size: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .result-votes {
        font-size: 12px !important;
    }

    .total-votes {
        padding: 14px !important;
        border-radius: 12px !important;
        margin-top: 12px !important;
        font-size: 14px !important;
    }

    /* ========================================
       Polls List - Mobile
       ======================================== */
    .polls-list {
        border-radius: 16px !important;
        margin-bottom: 20px !important;
    }

    .polls-list-header {
        padding: 16px !important;
        font-size: 16px !important;
    }

    .poll-item {
        padding: 14px 16px !important;
    }

    .poll-item-title {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    .poll-item-meta {
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .poll-item-actions {
        margin-top: 10px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .poll-item-actions a {
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* ========================================
       Pagination - Mobile
       ======================================== */
    .pagination {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    .pagination a,
    .pagination span {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

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

    /* ========================================
       Featured Poll - Mobile
       ======================================== */
    .featured-poll {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-top: 16px !important;
    }

    .featured-poll h3 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }

    .featured-poll a {
        font-size: 14px !important;
    }

    /* ========================================
       Touch Feedback
       ======================================== */
    .vote-option,
    .vote-btn,
    .poll-item,
    .poll-item-actions a,
    .pagination a {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

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

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

    .polls-hero {
        padding: 24px 14px !important;
    }

    .polls-hero h1 {
        font-size: 20px !important;
    }

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

    .poll-title {
        font-size: 16px !important;
    }

    .poll-body {
        padding: 18px 14px !important;
    }

    .vote-option {
        padding: 12px 14px !important;
    }

    .vote-option label {
        font-size: 13px !important;
    }
}