/**
 * Lovesite Mobile App Styles
 * חוויית אפליקציית אהבה במובייל
 *
 * צבעי האתר המקוריים נשמרים:
 * - אדום כהה: #8B0000, #c41e3a, #990000
 * - זהב: #ffd700
 * - בז'/קרם: #F2EFE0, #f9f6ed
 * - כחול: #4A93BD
 */

/* ========================================
   CSS Variables - משתני עיצוב
   ======================================== */
:root {
    /* צבעי האתר המקוריים */
    --love-primary: #8B0000;
    --love-secondary: #c41e3a;
    --love-accent: #990000;
    --love-gold: #ffd700;
    --love-blue: #4A93BD;

    /* גרדיאנטים */
    --love-gradient: linear-gradient(135deg, #8B0000 0%, #c41e3a 100%);
    --love-gradient-light: linear-gradient(135deg, #c41e3a 0%, #e05555 100%);
    --gold-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4a 100%);

    /* רקעים */
    --bg-cream: #F2EFE0;
    --bg-light: #f9f6ed;
    --bg-card: #ffffff;
    --bg-dark: #505050;

    /* טקסט */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #948571;
    --text-light: #ffffff;

    /* מרווחים */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* פינות מעוגלות */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* צללים */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-bottom-nav: 0 -2px 10px rgba(0,0,0,0.1);

    /* גבהים */
    --touch-target: 48px;
    --bottom-nav-height: 64px;
    --header-mobile-height: 56px;

    /* Safe areas לאייפון */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* אנימציות */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
}

/* ========================================
   Mobile-Only / Desktop-Only Classes
   ======================================== */
.mobile-only {
    display: none !important;
}

.desktop-only {
    display: block !important;
}

/* ========================================
   Mobile Styles - מתחת ל-768px
   ======================================== */
@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

    /* הניווט התחתון וההדר צריכים להיות flex, לא block */
    .mobile-bottom-nav.mobile-only {
        display: flex !important;
    }

    .mobile-header.mobile-only {
        display: flex !important;
    }

    .desktop-only {
        display: none !important;
    }

    /* ========================================
       Reset & Base - איפוס בסיסי
       ======================================== */
    html {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    body {
        background: var(--bg-cream) !important;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom)) !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       הסתרת כל הטמפלט הישן של הדסקטופ
       ======================================== */

    /* הסתרת כל ההדר הישן ואלמנטים לא רצויים */
    .user-top-bar,
    .online-bar-wrapper,
    .sidebar-menu,
    .activity-feed-column,
    .site-footer,
    .stats-section,
    .stats-bar {
        display: none !important;
    }

    /* הסתרת תמונות ההדר הישנות */
    img[src*="logo.jpg"],
    img[src*="top_1"],
    img[src*="top_2"],
    img[src*="top_3"],
    img[src*="rep_left"],
    img[src*="rep_right"],
    img[src*="h7.jpg"],
    img[src*="b_1"],
    img[src*="b_2"],
    img[src*="b_3"],
    img[src*="backg.jpg"],
    img[src*="1308066288"],
    img[src*="1247420832"],
    img[src*="1250930783"] {
        display: none !important;
    }

    /* הסתרת תאי טבלה עם רקע מהתבנית */
    td[background*="themes/8369"],
    td[background*="backg.jpg"] {
        background: transparent !important;
        background-image: none !important;
    }

    /* הסתרת אלמנטים ספציפיים של ההדר */
    td[height="253"],
    td[width="75"],
    td[width="83"],
    td[width="214"] {
        display: none !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* הסתרת תמונות רקע של התבנית הישנה */
    td {
        background-image: none !important;
    }

    /* במקרה שיש TDs עם רקע מהתבנית - הסתרה מלאה */
    td[style*="rep_top"],
    td[style*="rep_right"],
    td[style*="rep_left"],
    td[style*="b_1"],
    td[style*="b_2"],
    td[style*="b_3"] {
        height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* שמירה על תמונות בגודל נכון */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ========================================
       הגדרות בסיסיות לגוף העמוד
       ======================================== */
    body {
        background: var(--bg-cream) !important;
        background-image: none !important;
        padding-top: calc(var(--header-mobile-height) + var(--safe-area-top) + 16px) !important;
        padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 16px) !important;
        min-height: 100vh;
        margin: 0 !important;
    }

    /* איפוס div[align="center"] */
    div[align="center"] {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* הצגת הבלוקים */
    .homepage-blocks-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* הסתרת רקעי תמונות מהטמפלט הישן */
    td[background*="themes"],
    td[background*="backg"] {
        background-image: none !important;
        background: transparent !important;
    }

    /* ========================================
       Mobile Header - הדר מובייל
       ======================================== */
    .mobile-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: var(--header-mobile-height) !important;
        background: var(--love-gradient) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 var(--spacing-md) !important;
        padding-top: var(--safe-area-top) !important;
        z-index: 1000 !important;
        box-shadow: var(--shadow-card) !important;
    }

    .mobile-header-logo {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-light);
        text-decoration: none;
        font-weight: bold;
        font-size: 20px;
    }

    .mobile-logo-icon {
        font-size: 24px;
    }

    .mobile-logo-text {
        font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: #ffffff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        white-space: nowrap;
        letter-spacing: 0.5px;
    }

    .mobile-header-logo img,
    .mobile-logo-img {
        height: 36px;
        width: auto;
        max-width: 120px;
        object-fit: contain;
        filter: brightness(1.1);
        display: block !important;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .mobile-header-btn {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-full);
        background: var(--love-blue);
        border: 2px solid rgba(255,255,255,0.7);
        color: var(--text-light);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all var(--transition-fast);
        position: relative;
        box-shadow: 0 2px 8px rgba(74, 147, 189, 0.4);
        text-decoration: none;
    }

    .mobile-header-btn:active {
        background: #3a7da3;
        transform: scale(0.95);
    }

    .mobile-header-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        min-width: 18px;
        height: 18px;
        background: var(--love-gold);
        color: var(--love-primary);
        font-size: 11px;
        font-weight: bold;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    /* רווח לתוכן מתחת להדר */
    body.has-mobile-header {
        padding-top: calc(var(--header-mobile-height) + var(--safe-area-top)) !important;
    }

    /* ========================================
       Mobile Search Bar - סרגל חיפוש
       ======================================== */
    .mobile-search-container {
        padding: var(--spacing-md);
        background: var(--bg-cream);
        position: sticky;
        top: calc(var(--header-mobile-height) + var(--safe-area-top));
        z-index: 100;
    }

    .mobile-search {
        display: flex;
        align-items: center;
        background: var(--bg-card);
        border-radius: var(--radius-xl);
        padding: var(--spacing-sm) var(--spacing-md);
        box-shadow: var(--shadow-sm);
        border: 1px solid rgba(0,0,0,0.05);
    }

    .mobile-search-icon {
        font-size: 18px;
        color: var(--text-muted);
        margin-left: var(--spacing-sm);
    }

    .mobile-search input {
        flex: 1;
        border: none;
        background: none;
        font-size: 15px;
        color: var(--text-primary);
        outline: none;
        padding: var(--spacing-sm) 0;
        font-family: inherit;
    }

    .mobile-search input::placeholder {
        color: var(--text-muted);
    }

    /* ========================================
       Mobile Cards - כרטיסים
       ======================================== */
    .mobile-card {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        margin: var(--spacing-md);
        overflow: hidden;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .mobile-card:active {
        transform: scale(0.98);
    }

    .mobile-card-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .mobile-card-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: var(--love-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        flex-shrink: 0;
    }

    .mobile-card-title {
        flex: 1;
    }

    .mobile-card-title h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mobile-card-title p {
        margin: 2px 0 0;
        font-size: 13px;
        color: var(--text-muted);
    }

    .mobile-card-body {
        padding: var(--spacing-md);
    }

    .mobile-card-footer {
        padding: var(--spacing-md);
        border-top: 1px solid rgba(0,0,0,0.05);
        display: flex;
        gap: var(--spacing-sm);
    }

    /* ========================================
       Mobile Buttons - כפתורים
       ======================================== */
    .mobile-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        min-height: var(--touch-target);
        padding: 0 var(--spacing-lg);
        border-radius: var(--radius-xl);
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all var(--transition-fast);
        font-family: inherit;
    }

    .mobile-btn-primary {
        background: var(--love-gradient);
        color: var(--text-light);
        box-shadow: 0 2px 8px rgba(139,0,0,0.3);
    }

    .mobile-btn-primary:active {
        transform: scale(0.96);
        box-shadow: 0 1px 4px rgba(139,0,0,0.3);
    }

    .mobile-btn-secondary {
        background: var(--bg-light);
        color: var(--love-primary);
        border: 1px solid rgba(139,0,0,0.2);
    }

    .mobile-btn-secondary:active {
        background: var(--bg-cream);
    }

    .mobile-btn-gold {
        background: var(--gold-gradient);
        color: var(--love-primary);
        box-shadow: 0 2px 8px rgba(255,215,0,0.4);
    }

    .mobile-btn-full {
        width: 100%;
    }

    .mobile-btn-sm {
        min-height: 36px;
        padding: 0 var(--spacing-md);
        font-size: 13px;
    }

    /* ========================================
       Homepage Blocks - בלוקים
       ======================================== */

    /* וידוא שכל אלמנטי הטבלה בנתיב לבלוקים מוצגים */
    table:has(.homepage-blocks-container),
    tbody:has(.homepage-blocks-container),
    tr:has(.homepage-blocks-container),
    td:has(.homepage-blocks-container),
    table:has(.homepage-block),
    tbody:has(.homepage-block),
    tr:has(.homepage-block),
    td:has(.homepage-block) {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    .homepage-blocks-container {
        display: block !important;
        padding: var(--spacing-sm) 0 !important;
        width: 100% !important;
    }

    .blocks-row {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .homepage-block {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
        min-height: auto !important;
    }

    /* סגנון כללי לכל הבלוקים במובייל */
    .homepage-block > div,
    .homepage-block > section,
    .homepage-block .block-content-wrapper > div {
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-card) !important;
        margin: var(--spacing-xs) var(--spacing-md) !important;
        overflow: hidden !important;
        border: none !important;
    }

    /* הבלוקים הצבעוניים שומרים על הסגנון שלהם מה-inline style */
    /* לא דורסים להם רקע */

    /* הסתרת כפתורי העריכה של הבלוקים */
    .block-header-bar,
    .block-collapsed-header,
    .block-ctrl-btn,
    .block-drag-handle {
        display: none !important;
    }

    /* ========================================
       Dating Block - בלוק הכרויות
       ======================================== */
    .dating-promo-block,
    .homepage-block[data-block-type="dating_promo"] > div {
        background: var(--love-gradient) !important;
        padding: var(--spacing-lg);
        text-align: center;
        color: var(--text-light);
    }

    .dating-promo-block h2 {
        font-size: 22px;
        margin: 0 0 var(--spacing-sm);
    }

    .dating-promo-block p {
        margin: 0 0 var(--spacing-md);
        opacity: 0.9;
    }

    .dating-promo-block .mobile-btn {
        background: var(--gold-gradient);
        color: var(--love-primary);
    }

    /* ========================================
       Content Blocks - בלוקי תוכן
       ======================================== */
    /* שירים */
    .content-box,
    .guides-box,
    .poll-box,
    .commandment-box,
    .dictionary-box,
    .certs-box {
        border: none !important;
        border-radius: var(--radius-lg) !important;
    }

    /* כותרות בלוקים */
    .content-box h3,
    .guides-box h3,
    .poll-box h3,
    .commandment-box h3 {
        background: var(--love-gradient) !important;
        color: var(--text-light) !important;
        padding: var(--spacing-md) !important;
        margin: 0 !important;
        font-size: 16px !important;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* תוכן בלוקים */
    .content-box .content-list,
    .guides-box .guides-list {
        padding: var(--spacing-sm) 0;
    }

    .content-box .content-item,
    .guides-box .guide-item {
        padding: var(--spacing-md);
        border-bottom: 1px solid rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        min-height: var(--touch-target);
    }

    .content-box .content-item:last-child,
    .guides-box .guide-item:last-child {
        border-bottom: none;
    }

    .content-box .content-item a,
    .guides-box .guide-item a {
        color: var(--text-primary);
        text-decoration: none;
        font-size: 15px;
        flex: 1;
    }

    .content-box .content-item:active,
    .guides-box .guide-item:active {
        background: var(--bg-light);
    }

    /* ========================================
       Poll Block - בלוק סקר
       ======================================== */
    .poll-box .poll-options {
        padding: var(--spacing-md);
    }

    .poll-box .poll-option {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        background: var(--bg-light);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
        cursor: pointer;
        transition: background var(--transition-fast);
        min-height: var(--touch-target);
    }

    .poll-box .poll-option:active {
        background: var(--bg-cream);
    }

    .poll-box .poll-option input[type="radio"] {
        width: 22px;
        height: 22px;
        accent-color: var(--love-primary);
    }

    .poll-box .poll-submit {
        width: 100%;
        margin-top: var(--spacing-md);
    }

    /* ========================================
       Dictionary Block - מילון
       ======================================== */
    .dictionary-box .dictionary-content {
        flex-direction: column !important;
        padding: var(--spacing-md);
    }

    .dictionary-box .dict-column {
        width: 100% !important;
        padding: var(--spacing-md);
        background: var(--bg-light);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
    }

    .dictionary-box .dict-column h4 {
        color: var(--love-primary);
        font-size: 15px;
        margin: 0 0 var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    /* ========================================
       Love Actions - פעולות אהבה
       ======================================== */
    .love-actions-input-block,
    .love-actions-feed-block {
        background: var(--bg-card) !important;
        border-radius: var(--radius-lg) !important;
        margin: var(--spacing-sm) var(--spacing-md) !important;
    }

    .love-actions-input-block textarea {
        width: 100% !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        border-radius: var(--radius-md) !important;
        padding: var(--spacing-md) !important;
        font-size: 15px !important;
        resize: none !important;
        min-height: 80px !important;
    }

    .love-actions-input-block .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .love-actions-input-block .tag {
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--bg-light);
        border-radius: var(--radius-xl);
        font-size: 13px;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .love-actions-input-block .tag.selected {
        background: var(--love-gradient);
        color: var(--text-light);
    }

    /* ========================================
       Stats Section - סטטיסטיקות
       ======================================== */
    .stats-section {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: var(--spacing-md) !important;
        gap: var(--spacing-sm) !important;
        background: var(--bg-card) !important;
        margin: var(--spacing-sm) var(--spacing-md) !important;
        border-radius: var(--radius-lg) !important;
    }

    .stats-section .stat-item {
        flex: 1;
        min-width: 70px;
        text-align: center;
        padding: var(--spacing-sm) !important;
    }

    .stats-section .stat-icon {
        font-size: 24px !important;
    }

    .stats-section .stat-count {
        font-size: 18px !important;
        display: block;
    }

    .stats-section .stat-label {
        font-size: 11px !important;
        color: var(--text-muted);
    }

    /* ========================================
       Bottom Navigation - ניווט תחתון
       ======================================== */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-height);
        background: var(--bg-card);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-bottom: var(--safe-area-bottom);
        box-shadow: var(--shadow-bottom-nav);
        z-index: 1000;
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    .mobile-bottom-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: -1;
    }

    .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 10px;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        transition: all var(--transition-fast);
        min-width: 60px;
        position: relative;
    }

    .nav-item .nav-icon {
        font-size: 22px;
        margin-bottom: 2px;
        transition: transform var(--transition-fast);
    }

    .nav-item .nav-label {
        font-weight: 500;
    }

    .nav-item.active {
        color: var(--love-primary);
    }

    .nav-item.active .nav-icon {
        transform: scale(1.1);
    }

    .nav-item.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        background: var(--love-gradient);
        border-radius: 0 0 3px 3px;
    }

    .nav-item:active {
        background: var(--bg-light);
    }

    .nav-item .nav-badge {
        position: absolute;
        top: 2px;
        right: 12px;
        min-width: 16px;
        height: 16px;
        background: var(--love-secondary);
        color: var(--text-light);
        font-size: 10px;
        font-weight: bold;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }

    /* ========================================
       כפתורים צפים - הזזה מעל הניווט התחתון
       ======================================== */
    /* כפתור נגישות */
    .a11y-toggle-btn {
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 15px) !important;
    }

    /* פאנל הנגישות */
    .a11y-widget-panel {
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 85px) !important;
    }

    /* כפתור עריכת דף הבית (אם קיים) */
    .edit-mode-toggle,
    .homepage-edit-btn,
    [class*="edit-toggle"],
    [class*="admin-float"] {
        bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 15px) !important;
    }

    /* ========================================
       Animations - אנימציות
       ======================================== */
    @keyframes heartPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }

    @keyframes floatHeart {
        0% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(-100px) scale(1.5);
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .animate-heart {
        animation: heartPulse 0.6s ease;
    }

    .floating-heart {
        position: fixed;
        font-size: 30px;
        pointer-events: none;
        z-index: 9999;
        animation: floatHeart 1s ease-out forwards;
    }

    .animate-slide-up {
        animation: slideUp 0.3s ease;
    }

    .animate-fade-in {
        animation: fadeIn 0.3s ease;
    }

    /* ========================================
       Pull to Refresh - משיכה לרענון
       ======================================== */
    .pull-to-refresh {
        position: fixed;
        top: calc(var(--header-mobile-height) + var(--safe-area-top));
        left: 50%;
        transform: translateX(-50%) translateY(-60px);
        width: 40px;
        height: 40px;
        background: var(--bg-card);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-card);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99;
        transition: transform 0.3s ease;
    }

    .pull-to-refresh.visible {
        transform: translateX(-50%) translateY(10px);
    }

    .pull-to-refresh .spinner {
        width: 24px;
        height: 24px;
        border: 3px solid var(--bg-light);
        border-top-color: var(--love-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* ========================================
       Forms - טפסים
       ======================================== */
    .mobile-input {
        width: 100%;
        min-height: var(--touch-target);
        padding: var(--spacing-md);
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: var(--radius-md);
        font-size: 16px; /* מונע זום באייפון */
        font-family: inherit;
        background: var(--bg-card);
        color: var(--text-primary);
        transition: border-color var(--transition-fast);
    }

    .mobile-input:focus {
        outline: none;
        border-color: var(--love-primary);
    }

    .mobile-input::placeholder {
        color: var(--text-muted);
    }

    .mobile-textarea {
        min-height: 100px;
        resize: vertical;
    }

    /* ========================================
       Swipe Cards - כרטיסי החלקה
       ======================================== */
    .swipe-container {
        position: relative;
        overflow: hidden;
        touch-action: pan-y pinch-zoom;
    }

    .swipe-card {
        position: absolute;
        width: 100%;
        transition: transform 0.3s ease;
        will-change: transform;
    }

    .swipe-card.swiping {
        transition: none;
    }

    .swipe-indicator {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 40px;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .swipe-indicator.left {
        left: 20px;
    }

    .swipe-indicator.right {
        right: 20px;
    }

    /* ========================================
       Login/Register Modal - חלון התחברות
       ======================================== */
    .mobile-auth-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-normal);
    }

    .mobile-auth-modal.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-auth-content {
        width: 100%;
        max-height: 90vh;
        background: var(--bg-card);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: var(--spacing-lg);
        padding-bottom: calc(var(--spacing-lg) + var(--safe-area-bottom));
        transform: translateY(100%);
        transition: transform var(--transition-normal);
        overflow-y: auto;
    }

    .mobile-auth-modal.active .mobile-auth-content {
        transform: translateY(0);
    }

    .mobile-auth-header {
        text-align: center;
        margin-bottom: var(--spacing-lg);
    }

    .mobile-auth-header h2 {
        color: var(--love-primary);
        margin: 0 0 var(--spacing-sm);
    }

    .mobile-auth-close {
        position: absolute;
        top: var(--spacing-md);
        left: var(--spacing-md);
        width: 36px;
        height: 36px;
        background: var(--bg-light);
        border: none;
        border-radius: var(--radius-full);
        font-size: 20px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Google Login Button */
    .google-login-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-md);
        width: 100%;
        min-height: 52px;
        background: var(--bg-card);
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: var(--radius-md);
        font-size: 16px;
        font-weight: 500;
        color: var(--text-primary);
        cursor: pointer;
        transition: all var(--transition-fast);
        margin-bottom: var(--spacing-md);
    }

    .google-login-btn:active {
        background: var(--bg-light);
    }

    .google-login-btn img {
        width: 24px;
        height: 24px;
    }

    /* Divider */
    .auth-divider {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin: var(--spacing-lg) 0;
        color: var(--text-muted);
        font-size: 13px;
    }

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(0,0,0,0.1);
    }

    /* ========================================
       Utilities - כלי עזר
       ======================================== */
    .text-center { text-align: center; }
    .text-right { text-align: right; }
    .text-left { text-align: left; }

    .text-love { color: var(--love-primary); }
    .text-gold { color: var(--love-gold); }
    .text-muted { color: var(--text-muted); }

    .bg-love { background: var(--love-gradient); }
    .bg-gold { background: var(--gold-gradient); }

    .rounded { border-radius: var(--radius-md); }
    .rounded-lg { border-radius: var(--radius-lg); }
    .rounded-full { border-radius: var(--radius-full); }

    .shadow { box-shadow: var(--shadow-card); }
    .shadow-lg { box-shadow: var(--shadow-elevated); }

    .p-sm { padding: var(--spacing-sm); }
    .p-md { padding: var(--spacing-md); }
    .p-lg { padding: var(--spacing-lg); }

    .m-sm { margin: var(--spacing-sm); }
    .m-md { margin: var(--spacing-md); }
    .m-lg { margin: var(--spacing-lg); }

    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .gap-sm { gap: var(--spacing-sm); }
    .gap-md { gap: var(--spacing-md); }

    .w-full { width: 100%; }
    .h-full { height: 100%; }

    .overflow-hidden { overflow: hidden; }
    .overflow-auto { overflow: auto; }

    .hidden { display: none !important; }
    .visible { display: block !important; }
}

/* ========================================
   Small Phones - טלפונים קטנים (עד 380px)
   ======================================== */
@media (max-width: 380px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 20px;
        --bottom-nav-height: 56px;
    }

    .mobile-card {
        margin: var(--spacing-sm) var(--spacing-sm);
    }

    .nav-item {
        min-width: 50px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .nav-item .nav-icon {
        font-size: 20px;
    }

    .nav-item .nav-label {
        font-size: 9px;
    }

    .mobile-btn {
        padding: 0 var(--spacing-md);
        font-size: 14px;
    }
}

/* ========================================
   Tablets - טאבלטים (481px - 768px)
   ======================================== */
@media (min-width: 481px) and (max-width: 768px) {
    .homepage-blocks-container {
        padding: var(--spacing-md);
    }

    .blocks-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-md) !important;
    }

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

    .homepage-block > div,
    .homepage-block > section {
        margin: 0 !important;
    }

    /* בלוקים רחבים */
    .homepage-block[data-block-type="dating_promo"],
    .homepage-block[data-block-type="dictionary"],
    .homepage-block[data-block-type="youtube"] {
        grid-column: span 2;
    }
}

/* ========================================
   Landscape Mode - מצב אופקי
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
    :root {
        --header-mobile-height: 48px;
        --bottom-nav-height: 48px;
    }

    .mobile-bottom-nav {
        flex-direction: row;
    }

    .nav-item {
        flex-direction: row;
        gap: var(--spacing-sm);
    }

    .nav-item .nav-icon {
        margin-bottom: 0;
    }
}

/* ========================================
   Print Styles - הדפסה
   ======================================== */
@media print {
    .mobile-bottom-nav,
    .mobile-header,
    .pull-to-refresh {
        display: none !important;
    }

    body {
        padding: 0 !important;
    }
}

/* ========================================
   Reduced Motion - הפחתת תנועה
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   Dark Mode Support (Future)
   ======================================== */
@media (prefers-color-scheme: dark) {
    /* יתווסף בעתיד אם נרצה */
}