/* קובץ: style-responsive.css */
/* תיאור: סגנונות רספונסיביים עבור מסכים שונים */

/* סגנונות כלליים ל-#debugContainer (פירוט חישוב) */
#debugContainer {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 20px;
}

/* הגדרת גובה ברירת מחדל לפרסומות (שמירת מקום) */
.ad-section .ad-space {
    height: 300px; /* גובה ברירת מחדל - תתאים אם צריך */
    width: 100%;
}

/* רספונסיביות למובייל */
@media (max-width: 480px) {
    .container {
        flex-direction: column;
        top: 60px;
        bottom: 15px;
    }

    .ad-section, .right, .left, .middle {
        width: 100%;
    }

    /* הקטנת גובה הפרסומות במובייל */
    .ad-section .ad-space {
        height: 150px; /* חצי מהגובה המקורי */
    }

    #debugContainer {
        max-height: 150px;
    }

    .header {
        padding: 15px;
        font-size: 20px;
    }

    .footer {
        padding: 3px;
    }

    .auth-buttons button {
        width: 100%;
    }

    .carousel {
        width: 100%;
    }

    .article {
        width: 100%;
    }
}

/* רספונסיביות לטאבלט */
@media (max-width: 768px) and (min-width: 481px) {
    .ad-section {
        width: 10%;
    }

    .right, .left {
        width: 10%;
    }

    .middle {
        width: 60%;
    }

    .article {
        width: 100%;
    }
}

/* סגנונות למחשבים */
@media (min-width: 769px) {
    .ad-side {
        display: block;
        position: fixed;
        right: 20px;
        top: 100px;
        width: 160px;
        height: 600px;
        background-color: #90a4ae;
        border: 1px dashed #78909c;
        text-align: center;
        padding: 10px;
    }

    .ad-side p {
        font-size: 14px;
        color: #fff;
    }

    .article {
        width: 48%;
    }
}

/* פרסומות */
.ad-container {
    display: block;
    background-color: #ddd;
    text-align: center;
    padding: 10px;
    margin: 10px auto;
    border: 1px dashed #999;
    max-width: 450px;
}

.ad-container p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

.ad-container.hidden {
    display: none;
}

.ad-side {
    display: none;
}

/* פס התקדמות */
.progress-bar {
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
}

.progress {
    width: 0;
    height: 10px;
    background: linear-gradient(90deg, #3498db, #2980b9);
    animation: progressAnimation 5s linear infinite;
}

@keyframes progressAnimation {
    0% { width: 0; }
    50% { width: 100%; }
    100% { width: 0; }
}