/**
 * Couple Tasks Mobile Styles
 * עיצוב מובייל לדף משימות זוגיות
 */

@media (max-width: 768px) {
    /* Hide old desktop elements */
    .couple-tasks-page .user-top-bar,
    .couple-tasks-page .online-bar-wrapper,
    .couple-tasks-page .sidebar-menu,
    .couple-tasks-page .activity-feed-column,
    .couple-tasks-page .site-footer,
    .couple-tasks-page td[background*="themes"],
    .couple-tasks-page img[src*="logo.jpg"],
    .couple-tasks-page img[src*="top_"],
    .couple-tasks-page img[src*="rep_"],
    .couple-tasks-page img[src*="b_"],
    .couple-tasks-page img[src*="backg.jpg"],
    .couple-tasks-page table[width="955"],
    .couple-tasks-page td[width="75"],
    .couple-tasks-page td[width="83"],
    .couple-tasks-page td[width="214"] {
        display: none !important;
    }

    /* Page background */
    .couple-tasks-page {
        background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 50%, #f3e5f5 100%) !important;
        min-height: 100vh !important;
        padding-top: 70px !important;
        padding-bottom: 80px !important;
    }

    /* Custom header for couple tasks */
    .couple-tasks-header {
        position: fixed !important;
        top: 56px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        padding: 12px 16px !important;
        margin-bottom: 0 !important;
    }

    .couple-tasks-header-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 100% !important;
    }

    .couple-tasks-logo {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .couple-tasks-logo-icon {
        font-size: 24px !important;
    }

    .couple-tasks-logo-text {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #e91e63 !important;
    }

    .header-stats {
        display: flex !important;
        gap: 8px !important;
    }

    .stat-badge {
        padding: 4px 10px !important;
        font-size: 13px !important;
        background: #fce4ec !important;
        border-radius: 15px !important;
    }

    /* Container */
    .couple-tasks-page .container {
        padding: 16px !important;
        margin-top: 60px !important;
        max-width: 100% !important;
    }

    /* Navigation tabs */
    .nav-tabs {
        display: flex !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
        scrollbar-width: none !important;
    }

    .nav-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .nav-tab {
        padding: 10px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        border-radius: 20px !important;
        flex-shrink: 0 !important;
    }

    .nav-tab.active {
        background: linear-gradient(135deg, #e91e63 0%, #ff6090 100%) !important;
        color: #fff !important;
    }

    /* Track cards */
    .tracks-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .track-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }

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

    .track-icon {
        font-size: 40px !important;
        margin-bottom: 8px !important;
    }

    .track-name {
        font-size: 20px !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
    }

    .track-meta {
        display: flex !important;
        gap: 12px !important;
        font-size: 13px !important;
        opacity: 0.9 !important;
    }

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

    .track-description {
        font-size: 14px !important;
        color: #666 !important;
        margin-bottom: 12px !important;
        line-height: 1.5 !important;
    }

    .track-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Task card */
    .task-card {
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
    }

    .task-header {
        padding: 24px 16px !important;
        text-align: center !important;
    }

    .task-day {
        padding: 6px 16px !important;
        font-size: 13px !important;
        border-radius: 15px !important;
        margin-bottom: 12px !important;
    }

    .task-icon {
        font-size: 50px !important;
        margin-bottom: 12px !important;
    }

    .task-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
    }

    .task-subtitle {
        font-size: 14px !important;
    }

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

    /* Meta tags */
    .task-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }

    .meta-tag {
        padding: 6px 12px !important;
        font-size: 13px !important;
        border-radius: 15px !important;
        background: #f5f5f5 !important;
    }

    /* Task sections */
    .task-section {
        margin-bottom: 20px !important;
    }

    .task-section-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .task-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .task-why {
        padding: 14px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }

    .task-steps {
        list-style: none !important;
        padding: 0 !important;
    }

    .task-step {
        display: flex !important;
        gap: 10px !important;
        padding: 12px 0 !important;
        align-items: flex-start !important;
    }

    .step-number {
        width: 26px !important;
        height: 26px !important;
        font-size: 13px !important;
        flex-shrink: 0 !important;
    }

    .task-tips {
        padding: 14px !important;
        border-radius: 10px !important;
    }

    .task-tips ul {
        padding-right: 16px !important;
        margin: 0 !important;
    }

    .task-tips li {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Buttons */
    .btn {
        padding: 14px 24px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 25px !important;
        min-height: 48px !important;
    }

    .btn-lg {
        padding: 16px 28px !important;
        font-size: 16px !important;
    }

    .btn-block {
        width: 100% !important;
    }

    .btn-primary {
        background: linear-gradient(135deg, #e91e63 0%, #ff6090 100%) !important;
        box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3) !important;
    }

    .btn-success {
        background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
    }

    /* Stats grid */
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .stat-card {
        padding: 16px !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .stat-icon {
        font-size: 28px !important;
        margin-bottom: 6px !important;
    }

    .stat-value {
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    /* Badges grid */
    .badges-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .badge-card {
        padding: 14px 10px !important;
        border-radius: 12px !important;
    }

    .badge-icon {
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }

    .badge-name {
        font-size: 12px !important;
        font-weight: 600 !important;
    }

    .badge-rarity {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Days timeline */
    .days-timeline {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        margin: 16px 0 !important;
    }

    .day-dot {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
        border-radius: 50% !important;
    }

    /* Complete form */
    .complete-form {
        background: #f9f9f9 !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
        margin-top: 20px !important;
    }

    .rating-stars {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        margin: 12px 0 !important;
    }

    .rating-star {
        font-size: 32px !important;
        cursor: pointer !important;
    }

    .form-group {
        margin-bottom: 14px !important;
    }

    .form-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .form-control {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        border: 2px solid #eee !important;
        border-radius: 10px !important;
    }

    textarea.form-control {
        min-height: 90px !important;
    }

    /* Progress bar */
    .progress-bar {
        height: 8px !important;
        border-radius: 4px !important;
        background: #eee !important;
    }

    .progress-fill {
        height: 100% !important;
        border-radius: 4px !important;
    }

    /* Alerts */
    .alert {
        padding: 14px 16px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    /* Back link */
    .back-link {
        font-size: 14px !important;
        margin-bottom: 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Card */
    .card {
        border-radius: 16px !important;
        margin-bottom: 16px !important;
    }

    .card-header {
        padding: 16px !important;
    }

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

    /* Empty state */
    .empty-state {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    .empty-icon {
        font-size: 50px !important;
        margin-bottom: 16px !important;
    }

    .empty-title {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }

    .empty-text {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    /* Hide footer in mobile */
    .couple-tasks-page ~ .site-footer,
    .couple-tasks-page + .site-footer {
        display: none !important;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .couple-tasks-page .container {
        padding: 12px !important;
    }

    .track-header {
        padding: 16px !important;
    }

    .track-icon {
        font-size: 36px !important;
    }

    .track-name {
        font-size: 18px !important;
    }

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

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

    .day-dot {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
}