/* --- General Styles --- */
:root {
    --primary-color: #005a8d; /* כחול עמוק */
    --secondary-color: #f7a000; /* כתום-זהב חם */
    --background-color: #f8f9fa;
    --text-color: #333;
    --card-bg: #ffffff;
    --border-color: #dee2e6;
    --font-family: 'Assistant', sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
}

/* --- Layout --- */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* --- Hero Section --- */
.hero-section {
    text-align: center;
    padding: 40px 20px;
    background-color: var(--card-bg);
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

    .hero-section h1 {
        font-size: 2.5rem;
        color: var(--primary-color);
        margin-bottom: 10px;
    }

    .hero-section p {
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: 700px;
        margin: 0 auto;
    }

    .hero-section .highlight {
        color: var(--secondary-color);
        font-weight: 700;
    }

    .hero-section a {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
    }

        .hero-section a:hover {
            text-decoration: underline;
        }


/* --- User Notifications --- */
.user-notification {
    display: block;
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
}

    .user-notification:hover {
        background-color: #ffe69c;
    }


/* --- Books Section --- */
.books-section h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--secondary-color);
    text-align: right;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 25px;
}

/* עדכון לעיצוב המידע בכרטיסייה כדי לתמוך בכפתור החדש */
.book-card__info {
    padding: 15px;
    display: flex;
    flex-direction: column; /* סידור הפריטים אחד מתחת לשני */
    flex-grow: 1; /* מאפשר לחלק הזה לגדול ולמלא את הכרטיסייה */
}

.book-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    flex-grow: 1; /* דוחף את הכפתור לתחתית הכרטיסייה */
}

/* עיצוב חדש עבור ה'כפתור' שהוספנו */
.book-card__cta {
    background-color: var(--primary-color); /* משתמש בצבע הראשי של האתר */
    color: white;
    text-align: center;
    padding: 8px 10px;
    border-radius: 5px;
    margin-top: 10px; /* רווח קטן מהטקסט שמעליו */
    font-weight: 600;
    transition: background-color 0.2s;
}

/* אפקט עדין כשעוברים על כל הכרטיסייה */
.book-card:hover .book-card__cta {
    background-color: var(--secondary-color); /* שינוי צבע לכתום-זהב */
}

.book-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

    .book-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.12);
    }

.book-card__image-wrapper {
    width: 100%;
    padding-top: 140%; /* Aspect ratio for the book cover */
    position: relative;
    background-color: #eee;
}


.book-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* <--- שנה את השורה הזאת */
}

.book-card__info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Makes info fill space */
}

.book-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    flex-grow: 1; /* Pushes author down */
}

.book-card__author {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

/* --- General UI Elements --- */
.styled-link {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
    margin-top: 20px;
}

    .styled-link:hover {
        background-color: #00466f;
    }

.no-results {
    text-align: center;
    padding: 40px;
}

/* Collectibles/Default.aspx */
.subcategory-list {
    list-style-type: none;
    padding: 0;
}

    .subcategory-list li {
        margin-bottom: 10px;
    }

.subcategory-link {
    font-size: 1.2em;
    text-decoration: none;
    color: #0056b3; /* צבע קישור לדוגמה */
}

    .subcategory-link:hover {
        text-decoration: underline;
    }

/* ProductList.aspx & MyProducts.aspx - כרטיס מוצר */
.product-list-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* רווח בין כרטיסים */
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    width: calc(33.333% - 20px); /* לדוגמה, 3 בשורה עם רווח */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
}

    .product-card .product-thumbnail { /* ודא שהסלקטור הזה מתאים למבנה שלך */
        max-width: 100%; /* התמונה לא תהיה רחבה יותר מהאלמנט המכיל אותה (הכרטיס) */
        height: auto; /* שומר על יחס הגובה-רוחב המקורי של התמונה */
        display: block; /* פרקטיקה טובה לתמונות, מונעת רווחים מיותרים */
        margin-bottom: 10px; /* אם יש תוכן מתחת לתמונה בכרטיס */
        /* אופציונלי: אם תרצה גובה מקסימלי קבוע לכל התמונות בכרטיסים */
        max-height: 200px;
    }

    .product-card h3 {
        font-size: 1.3em;
        margin-top: 0;
        color: #333;
    }

    .product-card .product-price {
        font-weight: bold;
        color: #28a745; /* צבע ירוק למחיר */
        font-size: 1.1em;
    }

    .product-card .product-condition,
    .product-card .product-location {
        font-size: 0.9em;
        color: #555;
        margin-bottom: 5px;
    }

.add-product-button {
    display: inline-block;
    margin-bottom: 20px;
}

/* ProductDetail.aspx */
.product-detail-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.product-images .primary-product-image {
    max-width: 100%; /* התמונה לא תהיה רחבה יותר מהאלמנט המכיל אותה */
    height: auto; /* שומר על יחס הגובה-רוחב המקורי של התמונה */
    display: block; /* מונע רווחים מיותרים מתחת לתמונה ומאפשר שימוש ב-margin: auto; למרכוז */
    margin-left: auto; /* מרכוז התמונה אופקית (אם האלמנט המכיל רחב יותר) */
    margin-right: auto; /* מרכוז התמונה אופקית */
    border: 1px solid #ccc; /* מסגרת קיימת מהדוגמה הקודמת */
    margin-bottom: 10px; /* רווח תחתון קיים מהדוגמה הקודמת */
    /* ניתן להוסיף גם max-height אם רוצים להגביל את הגובה המקסימלי */
    max-height: 500px;
}

.product-images .thumbnail-gallery {
    display: flex;
    gap: 10px;
}

.product-images .product-thumbnail-small {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #ddd;
    cursor: pointer; /* אם תוסיף לוגיקה להגדלה */
}

.product-info p {
    margin-bottom: 8px;
    line-height: 1.6;
}

.product-actions .button-primary,
.product-actions .button-secondary {
    margin-right: 10px;
}

.sold-message {
    color: red;
    font-weight: bold;
}


/* UploadProduct.aspx & EditProduct.aspx - טפסים */
.form-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    max-width: 700px; /* הגבלת רוחב טופס */
    margin: 20px auto; /* מרכוז טופס */
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-input,
.form-textarea,
.form-select,
.form-input-file {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box; /* חשוב ל-padding ו-border */
}

.opening-title h1#lblOpeningTitle { /* מיקוד על ה-h1 הספציפי עם ה-ID */
    font-size: 1.6em; /* לדוגמה. שנה את הערך לגודל הרצוי. 
                           גודל ברירת מחדל של h1 הוא לרוב כ-2em או 32px. */
    /* תוכל להוסיף כאן עוד הגדרות כלליות ל-h1 אם צריך, כמו margin או line-height */
}

    .opening-title h1#lblOpeningTitle .collectible-item-prefix {
        font-weight: normal; /* לדוגמה: להפוך את הקידומת לפחות מודגשת משם המוצר */
        /* color: #444; */ /* אם תרצה צבע מעט שונה לקידומת */
    }

body.high-contrast .opening-title h1#lblOpeningTitle .collectible-item-prefix {
    color: white; /* לדוגמה: הקידומת בלבן */
}

.form-textarea {
    min-height: 100px;
}

.LogoutDiv { /* פונה ל-div באמצעות ה-ID שלו */
    max-width: 960px; /* הגדר רוחב מקסימלי רצוי לאזור הזה, לדוגמה */
    width: 100%; /* נסה למלא את הרוחב עד למקסימום */
    margin-left: auto; /* ממורכז אופקית */
    margin-right: auto; /* ממורכז אופקית */
    padding: 10px 0; /* רווח פנימי עליון ותחתון לנוחות */
    /* עכשיו, איך ליישר את התוכן שבתוך ה-LogoutDiv הממורכז? */
    /* אופציה א': יישור התוכן לימין (טבעי ל-RTL) */
    text-align: center;
    /* אופציה ב': יישור התוכן למרכז */
    /* text-align: center; */
}

/* כללי להודעות סטטוס (lblStatus) */
.status-message,
.success-message, /* הקלאס שמוחל לאחר שליחה מוצלחת */
.error-message {
    display: block; /* ודא שהוא תופס שורה מלאה */
    padding: 10px 15px;
    margin-top: 15px; /* רווח מעל */
    margin-bottom: 20px; /* !!! חשוב: רווח מתחת להודעה, לפני הניווט !!! */
    border-radius: 4px;
    position: relative; /* !!! חשוב: מאפשר שימוש ב-z-index בצורה יעילה !!! */
    z-index: 100; /* !!! חשוב: ערך גבוה כדי להבטיח שהוא מעל אלמנטים אחרים !!! */
}

.success-message {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.error-message {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* ניווט ההודעות */
.messages-navigation {
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    /* ודא שאין כאן הגדרות position או z-index שמתנגשות,
       אלא אם כן הן מכוונות. אם כן, ה-z-index של status-message צריך להיות גבוה יותר. */
}

/* מיכל רשימת ההודעות */
.message-list-container {
    /* ודא שאין כאן הגדרות position או z-index שמתנגשות */
}

/* EditProduct.aspx - ניהול תמונות */
.current-images-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.current-image-item {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    background-color: #fff;
}

    .current-image-item .product-thumbnail-medium {
        max-width: 150px;
        max-height: 150px;
        display: block;
        margin-bottom: 5px;
    }

.primary-image-label {
    color: green;
    font-weight: bold;
    font-size: 0.8em;
}

/* MyProducts.aspx - GridView */
.gridview-style {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.gridview-header th {
    background-color: #e9ecef;
    color: #495057;
    padding: 10px;
    text-align: right; /* התאמה לעברית */
    border: 1px solid #dee2e6;
}

.gridview-row td,
.gridview-alt-row td {
    padding: 8px;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

.gridview-alt-row {
    background-color: #f8f9fa;
}

.product-thumbnail-small-grid {
    width: 60px;
    height: auto;
}

.status-active {
    color: green;
}

.status-inactive {
    color: #6c757d;
}

.status-sold {
    color: red;
    font-weight: bold;
}

.button-small { /* כפתורים קטנים בטבלה */
    padding: 3px 8px;
    font-size: 0.9em;
    margin-left: 5px;
}


/* User/Messages.aspx */
.messages-navigation {
    margin-bottom: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

    .messages-navigation .button-tab {
        padding: 10px 15px;
        text-decoration: none;
        margin-left: 5px; /* התאמה לעברית */
        border-radius: 5px 5px 0 0;
        background-color: #f0f0f0;
        color: #333;
        border: 1px solid #ddd;
        border-bottom: none;
    }

        .messages-navigation .button-tab.active, /* קלאס שתוסיף דינמית לקוד לטאב הפעיל */
        .messages-navigation .button-tab:hover {
            background-color: #007bff;
            color: white;
        }

.messages-grid .unread-message td { /* להדגשת הודעות שלא נקראו */
    font-weight: bold;
    background-color: #fff3cd; /* צבע רקע עדין */
}

.compose-message-panel {
    margin-top: 20px;
    border-top: 2px solid #007bff;
}

.message-thread-display {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

    .message-thread-display .message-item {
        margin-bottom: 10px;
        padding: 8px;
        border-radius: 5px;
    }

    .message-thread-display .sent-by-me {
        background-color: #d1e7dd; /* רקע להודעה שלי */
        text-align: right; /* אם רוצים להצמיד לצד מסוים */
    }

    .message-thread-display .sent-by-other {
        background-color: #e9ecef; /* רקע להודעה של האחר */
    }


/* --- כעת, כללי ניגודיות גבוהה לאלמנטים החדשים --- */

/* Collectibles/Default.aspx */
body.high-contrast .subcategory-link {
    color: yellow;
}

    body.high-contrast .subcategory-link:hover {
        color: cyan;
    }

/* ProductList.aspx & MyProducts.aspx - כרטיס מוצר */
body.high-contrast .product-card {
    background-color: black;
    border: 1px solid yellow;
    color: white; /* טקסט כללי בתוך הכרטיס */
}

    body.high-contrast .product-card .product-thumbnail {
        border-bottom-color: yellow;
        filter: invert(1) hue-rotate(180deg); /* אפקט לתמונות בניגודיות גבוהה */
    }

    body.high-contrast .product-card h3,
    body.high-contrast .product-card h3 a {
        color: yellow;
    }

    body.high-contrast .product-card .product-price {
        color: cyan; /* צבע מודגש למחיר */
    }

    body.high-contrast .product-card .product-condition,
    body.high-contrast .product-card .product-location {
        color: white;
    }

body.high-contrast .add-product-button { /* אם זה כפתור ראשי */
    background-color: yellow;
    color: black;
    border: 1px solid black;
}

/* ProductDetail.aspx */
body.high-contrast .product-detail-container {
    background-color: black;
    color: white;
}

body.high-contrast .product-images .primary-product-image,
body.high-contrast .product-images .product-thumbnail-small {
    border-color: yellow;
    filter: invert(1) hue-rotate(180deg);
}

body.high-contrast .product-info p strong {
    color: yellow; /* הדגשת התוויות */
}

body.high-contrast .sold-message {
    color: red; /* אדום נשאר לרוב קריא על רקע שחור */
    background-color: black;
    border: 1px solid red;
}


/* UploadProduct.aspx & EditProduct.aspx - טפסים */
body.high-contrast .form-container {
    background-color: black;
    border: 1px solid yellow;
}

body.high-contrast .form-label {
    color: yellow;
}

body.high-contrast .form-input,
body.high-contrast .form-textarea,
body.high-contrast .form-select {
    background-color: #111; /* רקע כהה יותר מהשחור של ה-body */
    color: yellow;
    border: 1px solid yellow;
}

body.high-contrast .form-input-file {
    background-color: #222;
    color: yellow;
    border: 1px dashed yellow; /* להבדיל ויזואלית */
}

body.high-contrast .error-message {
    color: #FF6666; /* אדום בהיר יותר על רקע שחור */
    background-color: black; /* הסרת רקע אדמדם אם היה */
    border: 1px dashed #FF6666;
}

body.high-contrast .success-message {
    color: #66FF66; /* ירוק בהיר */
    background-color: black;
    border: 1px dashed #66FF66;
}

/* EditProduct.aspx - ניהול תמונות */
body.high-contrast .current-image-item {
    background-color: #1a1a1a;
    border-color: yellow;
}

    body.high-contrast .current-image-item .product-thumbnail-medium {
        filter: invert(1) hue-rotate(180deg);
    }

body.high-contrast .primary-image-label {
    color: lightgreen; /* שינוי מירוק רגיל */
}

/* MyProducts.aspx - GridView */
body.high-contrast .gridview-style {
    color: white;
}

body.high-contrast .gridview-header th {
    background-color: #222;
    color: yellow;
    border-color: yellow;
}

body.high-contrast .gridview-row td,
body.high-contrast .gridview-alt-row td {
    border-color: yellow;
}

body.high-contrast .gridview-alt-row {
    background-color: #111; /* רקע מעט שונה לשורות מתחלפות */
}

body.high-contrast .product-thumbnail-small-grid {
    filter: invert(1) hue-rotate(180deg);
}

body.high-contrast .status-active {
    color: lightgreen;
}

body.high-contrast .status-inactive {
    color: #aaa;
}

body.high-contrast .status-sold {
    color: #FF8888;
}


/* User/Messages.aspx */
body.high-contrast .messages-navigation {
    border-bottom-color: yellow;
}

    body.high-contrast .messages-navigation .button-tab {
        background-color: black;
        color: yellow;
        border-color: yellow;
    }

        body.high-contrast .messages-navigation .button-tab.active,
        body.high-contrast .messages-navigation .button-tab:hover {
            background-color: yellow;
            color: black;
        }

body.high-contrast .messages-grid .unread-message td {
    font-weight: bold; /* נשאר */
    background-color: #333300; /* רקע כהה יותר אך עדיין שונה להדגשה */
    color: yellow;
}

body.high-contrast .compose-message-panel {
    border-top-color: yellow;
}

body.high-contrast .message-thread-display {
    background-color: #111;
    border-color: yellow;
}

    body.high-contrast .message-thread-display .message-item {
        color: white;
    }

    body.high-contrast .message-thread-display .sent-by-me {
        background-color: #003300; /* רקע ירוק כהה */
    }

    body.high-contrast .message-thread-display .sent-by-other {
        background-color: #222;
    }

/* כפתורים כלליים (דוגמה אם יש לך קלאסים גנריים לכפתורים) */
body.high-contrast .button-primary {
    background-color: yellow;
    color: black;
    border: 1px solid black;
}

body.high-contrast .button-secondary {
    background-color: black;
    color: yellow;
    border: 1px solid yellow;
}

body.high-contrast .button-danger {
    background-color: #FF4136; /* אדום */
    color: black;
    border: 1px solid black;
}

body.high-contrast .button-info {
    background-color: #7FDBFF; /* תכלת */
    color: black;
    border: 1px solid black;
}

a {
    cursor: pointer;
}

.high-contrast {
    background-color: black;
    color: white;
}

    .high-contrast a {
        color: yellow;
    }

.highlighted-link {
    background-color: yellow;
    font-weight: bold;
    padding: 5px; /* שיהיה טיפה ריווח פנימי, שיהיה יותר יפה */
    display: inline-block; /* כדי שרקע הצהוב ייראה מסביב לטקסט */
}

.hidden {
    display: none;
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.message-box {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.message-header {
    font-weight: bold;
}

.thread-box {
    border: 2px solid #ccc;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
}

.message-box {
    border-bottom: 1px solid #ddd;
    padding: 8px 0;
}

.message-button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    background-color: #f8f9fa;
    color: #212529; /* צבע כהה יותר */
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold; /* הדגשה */
    font-size: 16px; /* גודל פונט */
    transition: background-color 0.2s;
}

.btn-custom-message {
    background-color: #6f42c1;
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 18px;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    padding: 0 18px; /* במקום padding: 10px 18px */
}




    .btn-custom-message:hover {
        background-color: #5a34a3;
        color: white;
        text-decoration: none;
    }


.message-button:hover {
    background-color: #e2e6ea;
}

.button-group > * {
    display: block;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    box-sizing: border-box;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    white-space: normal;
}

.button-group .whatsapp-panel a.whatsapp-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}



.message-badge {
    position: absolute;
    right: -8px;
    background-color: #dc3545;
    color: white;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: bold;
    min-width: 20px;
    min-height: 20px;
    text-align: center;
    line-height: 1.4;
}


.category-title {
    font-size: 1.2em;
    margin-top: 20px;
}

.summary {
    font-weight: bold;
    color: #555;
}

.reply-panel {
    padding: 5px;
    margin-top: 10px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    /* display: none; /* רק אם אין style="display:none" ב-inline */
}

.reply-textbox {
    width: 100%;
}

.reply-button {
    margin-top: 5px;
}


.form-control {
    width: 100%;
    padding: 6px;
}

.btn-primary {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
}

.error-box {
    background-color: #ffe5e5;
    color: red;
    padding: 10px;
    width: 300px;
    display: block;
    border-radius: 5px;
    margin: 0 auto;
}


.opening-title {
    text-align: center;
    padding: 30px;
    margin-bottom: 40px;
    border-bottom: 5px solid #007bff; /* גבול תחתון כחול בולט */
    padding-bottom: 40px; /* כדי ליצור מרווח מתחת לגבול */
}

    .opening-title #lblOpeningTitle {
        font-size: 2.6em;
        color: #333;
        margin-bottom: 20px;
        display: block;
    }

    .opening-title p {
        font-size: 1.15em;
        color: #555;
        line-height: 1.65;
        margin-bottom: 25px;
    }

    .opening-title .highlight {
        color: #ff6f61; /* צבע הדגשה - אדום/כתום */
        font-weight: bold;
    }

    .opening-title .header-title {
        font-size: 1.3em;
        color: #444;
        margin-top: 35px;
    }

/* ====== מצב ניגודיות גבוהה ====== */
body.high-contrast .opening-title {
    background-color: black;
    border-bottom-color: yellow;
}

    body.high-contrast .opening-title #lblOpeningTitle {
        color: yellow;
    }

    body.high-contrast .opening-title p {
        color: white;
    }

    body.high-contrast .opening-title .highlight {
        color: cyan;
    }

    body.high-contrast .opening-title .header-title {
        color: yellow;
    }

.books-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.book-card {
    width: 250px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s;
}

    .book-card:hover {
        transform: scale(1.03);
    }

.book-image {
    width: 100%;
    max-width: 350px; /* לא יעלה על 350 פיקסלים */
    height: auto; /* ישמור על פרופורציות נכונות */
    display: block;
    margin: 0 auto; /* ימרכז את התמונה */
    border: 1px solid #ccc; /* גבול דק סביב התמונה */
    border-radius: 8px; /* פינות מעוגלות, אפשר להוריד אם רוצים */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* צל עדין */
    object-fit: cover; /* יחתוך טיפה אם צריך, כדי לשמור על מבנה */
    background-color: white; /* רקע לבן אם אין תמונה טעונה */
}

/* ====== מצב ניגודיות גבוהה עבור .book-info ====== */
body.high-contrast .book-info {
    background-color: black;
    border: 2px solid yellow; /* הוספתי גבול צהוב כדי שיהיה בולט */
    padding: 15px;
}

    body.high-contrast .book-info h3 {
        color: yellow;
    }

    body.high-contrast .book-info p {
        color: white;
    }



.join-us-button {
    display: inline-block;
    padding: 15px 25px;
    color: white;
    background-color: #007bff;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Helvetica', sans-serif;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    .join-us-button:hover { /* אופציונלי: סגנון במעבר עכבר */
        background-color: #0056b3; /* דוגמה לצבע כהה יותר */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

.carousel-title {
    text-align: center;
    margin: 20px 10px;
    font-size: 1.5em;
    color: #333;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ====== מצב ניגודיות גבוהה עבור carousel-title ====== */
body.high-contrast .carousel-title {
    color: yellow;
    background-color: black; /* אם תרצה גם רקע */
}



.no-animations * {
    animation: none !important;
    transition: none !important;
}

.readable-font {
    font-family: Arial, sans-serif !important;
}

.highlight-links a {
    border-bottom: 4px dashed red !important;
}


input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    background-image: url('../Images/closeX.png');
    background-repeat: no-repeat;
    background-position: center;
    outline: 0;
}

/* ====== מצב ניגודיות גבוהה עבור ul.breadcrumb ====== */
body.high-contrast ul.breadcrumb {
    background-color: black;
    border: 2px solid yellow; /* גבול בולט */
    padding: 1px 1px;
    list-style: none;
    max-width: 600px;
    margin: 0 auto;
}


#readMoreButton, #readLessButton {
    color: blue;
    cursor: pointer;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 1);
}

.carousel-control-prev,
.carousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
}

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        background-color: rgba(255, 255, 255, 1);
    }

.float {
    display: inline-block;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 20px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    padding: 10px 20px;
    text-decoration: none;
    margin: 10px 0;
}

.my-float {
    margin-left: 10px;
}

.whatsapp-panel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-size: 16px;
}



.buy-now-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}


.btn-add-cart,
.btn-buy-now {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .btn-add-cart i,
    .btn-buy-now img {
        margin-right: 5px;
    }


.grid-view-modern {
    display: grid;
    gap: 20px;
    padding: 10px;
    justify-items: center;
    border: none;
}

.card.seller-card {
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    background-color: #fff;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card .card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

.card .card-text {
    font-size: 14px;
    color: #666;
    text-align: center;
}

.seller-details {
    margin-top: 10px;
    font-weight: bold;
    color: #2d572c;
    text-align: center;
}

.seller-images img {
    width: 100px;
    height: 150px;
    margin-right: 10px;
    border-radius: 5px;
}

.empty-label {
    font-size: 20px;
    color: red;
    background-color: yellow;
    text-align: center;
    padding: 10px;
}

.pager-modern {
    text-align: center;
    margin-top: 20px;
}

    .pager-modern a {
        padding: 10px 15px;
        margin: 0 5px;
        background-color: #007bff;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
    }

        .pager-modern a:hover {
            background-color: #0056b3;
        }

.DefaultPageTable {
    width: 100%;
    border-collapse: collapse;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    direction: rtl;
    border: 1px solid #ddd;
    border-top: 2px solid #007BFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


    .DefaultPageTable tr:first-child td {
        border-top: 2px solid #007BFF;
    }


    .DefaultPageTable td {
        padding: 8px;
        border: 1px solid #ddd;
    }


#tblBookDetails {
    margin-top: 20px;
}



#rptBooks {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}


.header-title {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
}


.book-image img {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}


.book-name {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    padding: 5px;
    text-align: center;
}


.book-remarks {
    font-size: 14px;
    color: #555;
    padding: 5px;
    font-style: italic;
    text-align: center;
}


.book-author {
    font-size: 16px;
    font-weight: 600;
    color: #444;
    padding: 5px;
    text-align: center;
}


.book-pages,
.book-publisher,
.book-year {
    font-size: 14px;
    color: #666;
    padding: 5px;
    text-align: center;
}

.required {
    color: red;
}

input.largerCheckbox {
    transform: scale(10);
}

.max-line {
    width: 30%;
    margin: 0 auto;
    border: 1px solid black;
}

.book-details-link .linkbutton {
    display: inline-block;
    background-color: #007BFF;
    color: blue;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


    .book-details-link .linkbutton:hover {
        background-color: #0056b3;
        color: royalblue;
        border-color: #fff;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
    }


    .book-details-link .linkbutton:active {
        background-color: #003d82;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transform: scale(0.98);
    }

.DefaultPageTable td {
    border: 1px solid #ddd;
    padding: 8px;
}

/* General container styling for the book items */
.book-item {
    border: 1px solid #ddd; /* Adds a light border around the book item */
    padding: 15px; /* Adds space inside the item */
    margin-bottom: 20px; /* Adds space between rows */
    text-align: center; /* Centers the content */
    background-color: #f9f9f9; /* Light background for book items */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for better visual separation */
}

    /* Ensure the image is responsive and fits within the container */
    .book-item img {
        width: 100%; /* Image takes full width of the container */
        height: auto; /* Height adjusts automatically */
        max-height: 300px; /* Sets a maximum height for large images */
        object-fit: cover; /* Keeps the aspect ratio and crops images if necessary */
        margin-bottom: 10px; /* Adds space below the image */
    }

    /* Styling for the book title */
    .book-item h3 {
        font-size: 1.5em; /* Increases the font size of the book title */
        margin-bottom: 10px; /* Adds space below the title */
        color: #333; /* Dark text color for readability */
        font-weight: 600; /* Makes the title bold */
    }

    /* Styling for the author name */
    .book-item p {
        font-size: 1.1em; /* Slightly larger font size for the author name */
        color: #666; /* Lighter text color for secondary information */
        margin-bottom: 0; /* No margin after the author name */
    }

/* Ensures the layout adapts to mobile devices */
@media (max-width: 768px) {
    .book-item {
        padding: 10px; /* Reduce padding on smaller screens */
    }

        .book-item img {
            max-height: 200px; /* Reduce max image height on smaller screens */
        }
}


.main-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.mobile-friendly-gridview {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS */
}

ul.breadcrumb li {
    display: inline;
    font-size: 12px;
}

    ul.breadcrumb li + li:before {
        padding: 1px;
        color: black;
        content: "/\00a0";
    }

    ul.breadcrumb li a {
        color: #0275d8;
        text-decoration: none;
    }

        ul.breadcrumb li a:hover {
            color: #01447e;
            text-decoration: underline;
        }



@media (max-width: 768px) {
    .breadcrumbs .d-flex {
        display: block !important;
    }

    .breadcrumbs ol {
        display: block;
    }

        .breadcrumbs ol li {
            display: inline-block;
        }
}

.ui.menu .item.marginless {
    position: static;
}

.dropdown {
    left: 0 !important;
    margin: auto !important;
    right: 0 !important;
    width: 40%;
    height: 25px;
}

.inline-block-child {
    display: inline-block;
    position: relative;
}


.BookSearch {
    display: flex; /* <-- הוסף את השורה הזו */
    align-items: center; /* (מומלץ) ממקם את הפריטים אנכית במרכז */
    margin: auto;
    max-width: 400px;
    /* אפשר להסיר את צבע הרקע לאחר שהבעיה נפתרת */
    /*background-color: blueviolet;*/
}

.suggesetionbox {
    flex-grow: 1; /* <-- הוסף את השורה הזו */
    width: auto; /* מחליף את width: 100% במצב flex */
    height: 37px;
    font-size: 18px;
    box-sizing: border-box;
}

/* -- התאמה למסכים קטנים (טלפונים) -- */
@media (max-width: 768px) {
    .BookSearch {
        /* במסכים צרים, קבע רוחב מקסימלי קטן יותר, למשל 95% מרוחב המסך */
        max-width: 90%;
    }
}

.footer {
    margin: 0 auto;
    text-align: center;
    background-color: #f1f1f1;
    max-width: 595px;
}

.ltor {
    direction: ltr;
    text-align: left;
    background-color: aquamarine;
}

.footerLink {
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.bigFooterLink {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.cartAndLogoTableCenter {
    border: none;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    max-width: 400px;
}

.policy-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 25px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: right;
    line-height: 1.7;
}

    .policy-container h1 {
        font-size: 2.2rem;
        color: #005a8d; /* Primary color from previous design */
        border-bottom: 2px solid #f7a000; /* Secondary color */
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .policy-container h2 {
        font-size: 1.6rem;
        color: #005a8d;
        margin-top: 30px;
    }

    .policy-container p {
        font-size: 1.1rem;
        color: #333;
    }

    .policy-container strong {
        font-weight: 600;
    }


.alnright {
    text-align: right;
}

.alnleftt {
    text-align: left;
}

h1 {
    font-weight: bold;
    font-size: 16px;
}

h2 {
    font-weight: bold;
    ;
    font-size: 12px;
}

.ratingStar {
    font-size: 0pt;
    width: 50px;
    height: 33px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.DefaultPageTable {
    border-top: 3px dotted #000;
    margin: auto;
    min-width: 325px;
    max-width: 325px;
}

/* --- Footer Styles --- */
.footer {
    background-color: #f8f9fa; /* צבע רקע אפרפר בהיר */
    padding: 40px 20px;
    text-align: center;
    border-top: 1px solid #e7e7e7;
    color: #555;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Footer Links --- */
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* מאפשר לקישורים לרדת שורה במסכים קטנים */
    gap: 15px 25px; /* רווח בין הקישורים */
    margin-bottom: 30px;
}

    .footer-links a {
        color: #337ab7;
        text-decoration: none;
        font-size: 1rem;
        transition: color 0.2s;
    }

        .footer-links a:hover {
            color: #23527c;
            text-decoration: underline;
        }

/* --- Promo Button --- */
.footer-promo {
    margin-bottom: 30px;
}

/* (אתה כבר אמור להיות עם עיצוב לכפתור הזה, זה רק וידוא) */
.join-us-button {
    color: white;
    background-color: #005a8d;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s;
}

    .join-us-button:hover {
        background-color: #00466f;
    }

/* --- Bottom Section (Copyright & CC) --- */
.footer-bottom {
    border-top: 1px solid #e7e7e7;
    padding-top: 20px;
}

.credit-cards-img {
    max-width: 300px; /* התאמת רוחב מקסימלי */
    height: auto; /* שמירה על פרופורציות */
    margin-bottom: 15px;
}

.copyright {
    margin: 0;
    font-size: 0.9rem;
    color: #777;
}


.LittleratingStar {
    font-size: 0pt;
    width: 18px;
    height: 16px;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    display: block;
    background-repeat: no-repeat;
}

.filledRatingStar {
    background-image: url('../Images/FilledStar.png');
}

.emptyRatingStar {
    background-image: url('../Images/EmptyStar.png');
}

.savedRatingStar {
    background-image: url('../Images/SavedStar.png');
}

.LittlefilledRatingStar {
    background-image: url('../Images/LittleFilledStar.png');
}

.LittleemptyRatingStar {
    background-image: url('../Images/LittleEmptyStar.png');
}

.LittlesavedRatingStar {
    background-image: url('../Images/LittleSavedStar.png');
}

* {
    box-sizing: border-box;
}

.reportDiv {
    display: flex;
    justify-content: center;
}

.reportColumn {
    display: flex;
    flex-direction: column;
    align-items: center; /* שינוי מ alignment במידה ורוצים ימין או שמאל */
}

.actionButton {
    margin: 5px;
    /* אפשר להוסיף עיצוב נוסף */
}

.reportTextArea {
    width: 100%;
    margin-top: 10px;
    /* הוספת עיצוב לטקסט בוקס אם צריך */
}

.clickable-card {
    cursor: pointer;
}


/* Create two equal columns that floats next to each other */
.column {
    float: right;
    width: 50%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

textarea {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}*/

.page {
    margin: 0 auto;
    text-align: center;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.loading {
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid #67CFF5;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: White;
    z-index: 999;
}

.markedLabel {
    font-family: arial,sans-serif;
    font-size: large;
    background-color: yellow;
}

.linkbutton {
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: arial,sans-serif;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
    font-size: large;
}

.GreenLabel {
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    color: green;
}

.ErrorLabel {
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    color: red;
}

.ConfirmTitleLabel {
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
}


.markedLable {
    color: #006600;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    background-color: Yellow;
    width: 400px;
    height: 5px;
}

.GoodMessageLabel {
    font-size: medium;
    font-family: Arial;
    font-weight: bold;
    color: green;
}

.ButtonAsLink {
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0px;
    font-size: large;
}

.autoDiv {
    margin: 0 auto;
    max-width: 700px;
    min-height: 500px;
}

.RightDiv {
    margin: 0 auto;
    max-width: 600px;
    min-height: 500px;
}

.card {
    background-color: White;
    width: 245px;
    height: 100px;
    margin: 0 auto;
}

.per_card {
    padding: 2px 0px 0px 0px;
    background-color: White;
    width: 245px;
    height: 100px;
    padding: 2px 2px auto 2px;
}

.table_card {
    border-collapse: separate;
    border-spacing: 5px 4px;
}

.title_right {
    font-size: medium;
    font-weight: bolder;
    color: #585858;
    float: right;
    margin: 2px 4px 0px 0px;
}

.right {
    margin: 2px 4px 0px 0px;
}



.result {
    margin: 0 auto;
    width: 300px;
}

.topnav {
    overflow: hidden;
    background-color: #333;
    min-height: 75px;
    position: relative; /* חשוב בשביל positioning פנימי */
}

    .topnav a {
        float: right;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 16px 18px;
        text-decoration: none;
        font-size: 17px;
    }

        .topnav a:hover {
            background-color: transparent;
            color: #fff;
        }

.active {
    background-color: #f00;
    color: white;
}

.redLbl {
    font-size: 18px;
    color: red;
    font-weight: bold;
}




.topnav .icon {
    top: 0px;
    right: 0px;
    position: absolute;
    display: none;
    min-height: 50px;
}

.topnav-left {
    top: 0px;
    left: 10px;
    position: absolute;
}

.topnav-middle {
    top: 0px;
    left: 150px;
    position: absolute;
}

@media screen and (max-width: 1500px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: left;
        display: block;
    }
}


@media screen and (max-width: 1500px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav-toggle:before {
        font-size: 18px;
    }

    .topnav.responsive .icon {
        position: absolute;
        left: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: right;
    }
}


.cssPager td {
    padding-left: 14px;
    padding-right: 14px;
}

.pagination {
    display: inline-block;
}

    .pagination a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
        margin: 0 4px;
    }

        .pagination a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        .pagination a:hover:not(.active) {
            background-color: #ddd;
        }

input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    /*max-width:calc(100% - 140px);*/
    max-width: 400px;
    width: 80%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    border: 2px solid #bbb;
    direction: rtl;
}

.textInput {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    border: 2px solid #bbb;
    direction: rtl;
}

.MultiLine {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    height: 130px;
    font-size: 14px;
    border: 2px solid #bbb;
    direction: rtl;
}

.AbstractMultiLine {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
    height: 200px;
    font-size: 14px;
    border: 2px solid #bbb;
    direction: rtl;
}

input[type=checkbox] {
    width: 44px;
    height: 44px;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    border: 1px solid #bbb;
}


input[type=radio] {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    border-radius: 22px;
    border: 1px solid #bbb;
}

input[type=range] {
    width: 50%;
}

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 44px;
        height: 64px;
        background: #fdfdfd;
        background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe));
        background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
        background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
        background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
        background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
        border: 2px solid #bbb;
        -webkit-border-radius: 22px;
        -moz-border-radius: 22px;
        border-radius: 22px;
    }

.greenSubmitButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    font-size: 1em;
    line-height: 2.1em;
    color: #333;
    font-weight: bold;
    height: 2.1em;
    max-width: 150px;
    width: 80%;
    background: #00FF00;
    background: -moz-linear-gradient(top, #00FF00 0%, #bebebe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00FF00), color-stop(100%,#00FF00));
    background: -webkit-linear-gradient(top, #00FF00 0%,#00FF00 100%);
    background: -o-linear-gradient(top, #00FF00 0%,#00FF00 100%);
    background: -ms-linear-gradient(top, #00FF00 0%,#00FF00 100%);
    background: linear-gradient(to bottom, #00FF00 0%,#00FF00 100%);
    border: 1px solid #bbb;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.submitButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    font-size: 1em;
    line-height: 2.5em;
    color: #333;
    font-weight: bold;
    height: 2.5em;
    max-width: 400px;
    width: 90%;
    background: #fdfdfd;
    background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe));
    background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
    border: 1px solid #bbb;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.smallSubmitButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    font-size: 0.8em;
    line-height: 2.0em;
    color: #333;
    font-weight: bold;
    height: 2.0em;
    max-width: 300px;
    width: 80%;
    background: #fdfdfd;
    background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe));
    background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%);
    background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
    border: 1px solid #bbb;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.ddl {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    max-width: 400px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 17px;
    border: 2px solid #bbb;
    direction: rtl;
}

.ddlSmall {
    -webkit-appearance: none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    width: 70px;
    height: 60px;
    line-height: 40px;
    font-size: 17px;
    border: 2px solid #bbb;
    direction: rtl;
}

.tbHight {
    border: 2px solid #7d6754;
    border-radius: 5px;
    width: 60px;
    -webkit-appearance: none;
    text-indent: 0.01px; /*In Firefox*/
    text-overflow: ''; /*In Firefox*/
}

.failureNotification {
    font-size: 1.0em;
    color: Red;
    direction: rtl;
}

.BigfailureNotification {
    font-size: 2.0em;
    color: Red;
}

div.accountInfo {
    max-width: 600px;
    margin: 0 auto;
    direction: rtl;
}

.middleDiv {
    max-width: 600px;
    margin: 0 auto;
    direction: rtl;
}



fieldset.login label, fieldset.register label, fieldset.changePassword label {
    display: block;
}

fieldset label.inline {
    display: inline;
}


.Grid {
    background-color: #fff;
    margin: 0 auto;
    border: none;
    border-collapse: collapse;
    font-family: Arial, Helvetica, sans-serif;
    color: #485A68;
    font-weight: bolder;
    max-width: 98%;
    min-width: 30%;
}

    .Grid td {
        border: none;
        font-size: 1.0em;
        font-family: Arial, Helvetica, sans-serif;
    }

    .Grid th {
        color: #fff;
        background: #85C1F5;
        border-left: solid 1px #525252;
        font-size: 1.0em;
        font-family: Arial, Helvetica, sans-serif;
    }

    .Grid .alt {
        /*background: #fcfcfc url(Images/grid-alt.png) repeat-x top;*/
        background: #fcfcfc;
    }

    .Grid .pgr {
        background: #85C1F5;
    }

        .Grid .pgr table {
            direction: rtl;
        }

        .Grid .pgr td {
            border-width: 0;
            padding: 0 2px;
            border-left: none;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .Grid .pgr a {
            color: Gray;
            text-decoration: none;
        }

            .Grid .pgr a:hover {
                color: #000;
                text-decoration: none;
            }

.bold-highlight {
    font-weight: bold;
    font-size: 1.2em; /* אופציונלי - להגדלת הגופן */
    color: green; /* צבע כהה, אפשר לשנות לפי העיצוב שלך */
    background-color: #f8f9fa; /* רקע בהיר עדין */
    padding: 5px;
    display: inline-block;
    text-decoration: underline;
}

.imgPnl {
    border: 1px solid #000;
}

.TitleLabel {
    font-size: 14px;
    font-family: Arial;
}

.BigtitleLabel {
    font-size: 18px;
    font-family: Arial;
}

.BigtitleGreenLabel {
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
    color: black;
}


.RatingScoreLabel {
    font-size: 18px;
    font-family: Arial;
    background-color: yellow;
}

.SmallTitleLabel {
    font-size: 12px;
    font-family: Arial;
}

.MediumleLabel {
    font-size: 14px;
    font-family: Arial;
}

.ContenteLabel {
    font-size: 14px;
    font-family: Arial;
    font-weight: bold;
    color: brown;
    direction: rtl;
    text-align: right;
    align-content: center;
    align-items: center;
}

.ContenteAbstract {
    font-size: 14px;
    font-family: Arial;
    font-weight: bold;
    color: brown;
    direction: rtl;
    text-align: right;
    align-content: center;
    align-items: center;
    margin: 10px;
}


.BoldLabel {
    font-weight: bold;
    font-size: 14px;
    font-family: Arial;
}

.SemiBoldLabel {
    font-weight: 600;
    font-size: 12px;
    font-family: Arial;
}

.WelcomeLabel {
    font-weight: bold;
    background-color: yellow;
}


.buttonStyleCart {
    background-color: transparent;
    background-image: url('/Images/shooping_cart.png');
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    font-weight: bold;
    width: 100px;
    height: 58px;
    background-repeat: no-repeat;
    color: red;
}

.sellerButton {
    background-color: #75E6DA;
    font-size: 0.9em;
    font-family: Arial;
    font-weight: bold;
    color: black;
    padding: 0.9em 1.3em;
    text-decoration: none;
}

.addToCartButton {
    border: none;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    color: white;
    display: inline-block;
    font-size: 16px;
    background-color: #0000FF;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.noBorderTable {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.ttd {
    border: none;
}



.openPanelButton {
    cursor: pointer;
    border: none;
    background-image: url(/Images/_plus.png);
    width: 30px;
    height: 30px;
}

.closePanelButton {
    cursor: pointer;
    border: none;
    background-image: url(/Images/_minus.png);
    width: 30px;
    height: 30px;
}

.rightAlign {
    float: right;
}

* {
    box-sizing: border-box;
}



.BookSearch input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
    width: 80%;
    background: #f1f1f1;
}

.BookSearch button {
    /*float: left;
    width: 20%;
    padding: 10px;*/
    height: 37px;
    width: 55px;
    background: #2196F3;
    color: white;
    font-size: 17px;
    border: none;
    cursor: pointer;
}

    .BookSearch button:hover {
        background: #0b7dda;
    }

.BookSearch::after {
    content: "";
    clear: both;
    display: table;
    float: left;
}

.AlertButton {
    color: white;
    background-color: red;
    font-family: Arial;
    font-size: 14px;
}

.buttonHolder {
    text-align: center;
}

.card img {
    width: 90px !important; /* קביעת רוחב גדול וברור יותר */
    height: auto !important; /* גובה אוטומטי לשמירה על פרופורציות */
    flex-shrink: 0; /* מונע מהתמונה להתכווץ */
}

.category-title {
    font-size: 1.6em;
    margin-bottom: 30px;
    color: #222;
    text-align: center;
}

.filters-container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.filter-row {
    margin-bottom: 15px;
}

.filter-dropdown {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.filter-button {
    background: linear-gradient(to bottom, #fdfdfd 0%, #bebebe 100%);
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 10px 25px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    width: 100%;
}

    .filter-button:hover {
        background: linear-gradient(to bottom, #ffffff 0%, #999999 100%);
    }

.content-wrapper {
    width: 80%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* ================================== */
/* ## הגדרות נגישות - ניגודיות ## */
/* ================================== */

/* הגדרה כללית למצב ניגודיות גבוהה */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

    /* שינוי צבע הרקע של אלמנטים מרכזיים */
    body.high-contrast .main-container,
    body.high-contrast .hero-section,
    body.high-contrast .book-card,
    body.high-contrast .no-results {
        background-color: #1c1c1c !important;
        border-color: #ffffff !important;
    }

    /* הבטחת צבע טקסט לבן לכותרות ופסקאות */
    body.high-contrast h1,
    body.high-contrast h2,
    body.high-contrast h3,
    body.high-contrast p {
        color: #ffffff !important;
    }

    /* הדגשת קישורים בצבע בולט */
    body.high-contrast a,
    body.high-contrast .styled-link {
        color: #ffff00 !important; /* צהוב */
        text-decoration: underline !important;
    }

    /* התאמת הכפתורים בתפריט הנגישות עצמו */
    body.high-contrast #accessibilityMenu {
        background-color: #252525 !important;
        border-color: #ffffff !important;
    }

        body.high-contrast #accessibilityMenu button {
            background-color: #333333 !important;
            color: #ffffff !important;
            border-color: #ffffff !important;
        }

    /* היפוך צבעי התמונות (אופציונלי - יכול להיראות פחות טוב) */
    /*
body.high-contrast img {
    filter: invert(1) hue-rotate(180deg);
}
*/

    /* מניעת היפוך צבעים לאייקון הנגישות עצמו */
    body.high-contrast #accessibilityToggle img {
        filter: none;
    }
    /* ================================== */
    /* ## הגדרות ניגודיות - פוטר (Footer) ## */
    /* ================================== */

    /* עיצוב כללי לאזור הפוטר במצב ניגודיות */
    body.high-contrast .footer {
        background-color: #000000 !important;
        border-top: 2px solid #ffffff !important; /* קו הפרדה לבן ובולט */
    }

        /* ודוא שהטקסט בפוטר יהיה לבן */
        body.high-contrast .footer p.copyright {
            color: #ffffff !important;
        }

        /* הקישורים בפוטר כבר אמורים להיות צהובים מההגדרה הכללית, */
        /* אבל ניתן לדרוס אותם כאן אם רוצים צבע אחר. */
        body.high-contrast .footer a {
            color: #ffff00 !important; /* צהוב */
        }

        /* עיצוב מיוחד לכפתור "הצטרפו אלינו" */
        body.high-contrast .footer .join-us-button {
            background-color: #ffff00 !important; /* רקע צהוב */
            color: #000000 !important; /* טקסט שחור */
            border: 1px solid #ffffff !important;
        }

        /* טיפול בתמונת כרטיסי האשראי כדי שתהיה נראית היטב */
        body.high-contrast .footer .credit-cards-img {
            filter: invert(1) !important; /* היפוך צבעים לתמונה */
            background-color: white; /* רקע לבן כדי לשפר נראות */
        }
    /* ======================================= */
    /* ## הגדרות ניגודיות - דפי מדיניות ותוכן ## */
    /* ======================================= */

    body.high-contrast .policy-container {
        background-color: #151515 !important; /* רקע כהה לקופסת התוכן */
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
        padding: 20px; /* ריווח פנימי לנוחות קריאה */
    }

        /* מוודא שהכותרות בדף יהיו לבנות וברורות */
        body.high-contrast .policy-container h1,
        body.high-contrast .policy-container h2 {
            color: #ffffff !important;
        }

        /* מוודא שהטקסט ברשימות יהיה בהיר */
        body.high-contrast .policy-container li {
            color: #f1f1f1 !important;
        }
    /* ======================================= */
    /* ## הגדרות ניגודיות - טבלאות GridView ## */
    /* ======================================= */

    /* עיצוב כללי למעטפת ולטבלה */
    body.high-contrast .middleDiv,
    body.high-contrast #grdSellerReview {
        background-color: #111111 !important;
        color: #ffffff !important;
    }

        /* דריסת צבע הרקע והטקסט של כל תא ושורה בטבלה */
        body.high-contrast #grdSellerReview tr,
        body.high-contrast #grdSellerReview td,
        body.high-contrast #grdSellerReview th {
            background-color: transparent !important; /* מבטל את צבעי הרקע של השורות */
            color: #ffffff !important; /* מוודא שהטקסט לבן */
            border: 1px solid #cccccc !important; /* מוסיף גבולות כדי להפריד בין התאים */
        }

        /* עיצוב מיוחד לשורת הכותרת של הטבלה */
        body.high-contrast #grdSellerReview th {
            background-color: #333333 !important;
            color: #ffff00 !important; /* צבע צהוב בולט לכותרות */
        }

        /* עיצוב תיבת הטקסט להוספת תגובה */
        body.high-contrast #grdSellerReview textarea {
            background-color: #222222 !important;
            color: #ffffff !important;
            border: 1px solid #ffffff !important;
        }

        /* עיצוב הקישורים בתוך הטבלה */
        body.high-contrast #grdSellerReview a {
            color: #ffff00 !important;
            text-decoration: underline !important;
        }

    /* עיצוב הדירוג (כוכבים) - נדרש ידע על ה-CSS של הרכיב הזה */
    /* כלל זה מנסה להפוך את הכוכבים הריקים לגלויים יותר */
    body.high-contrast .LittleemptyRatingStar {
        filter: invert(1);
    }
    /* =============================================== */
    /* ## הגדרות ניגודיות - אזור התחברות והודעות ## */
    /* =============================================== */

    /* עיצוב כללי למעטפות של האזור */
    body.high-contrast #LogoutDiv,
    body.high-contrast #LoginDiv {
        background-color: #111111 !important;
        border-bottom: 1px solid #ffffff;
        padding-bottom: 10px;
    }

    /* טיפול בתווית "ברוך הבא" */
    body.high-contrast .BigtitleLabel {
        color: #ffffff !important;
    }

    /* טיפול בכפתורים שנראים כמו קישור (התנתק, התחבר, הרשמה) */
    body.high-contrast .ButtonAsLink,
    body.high-contrast .linkbutton {
        color: #ffff00 !important; /* צבע צהוב זוהר לקישורים */
        background-color: transparent !important;
        text-decoration: underline !important;
        border: none !important;
    }

    /* טיפול בתווית מודגשת */
    body.high-contrast .markedLable {
        background-color: #ffff00 !important;
        color: #000000 !important;
        padding: 2px 5px !important;
    }

    /* טיפול בכפתורי ההודעות */
    body.high-contrast .message-button {
        background-color: #333333 !important;
        color: #ffffff !important;
        border: 1px solid #ffffff !important;
        padding: 5px 10px !important;
    }

        /* הדגשת מונה ההודעות שלא נקראו */
        body.high-contrast .message-button span {
            background-color: #ffff00 !important;
            color: #000000 !important;
            padding: 1px 6px !important;
            border-radius: 10px;
            font-weight: bold;
        }
    /* ======================================= */
    /* ## הגדרות ניגודיות - התראות משתמש ## */
    /* ======================================= */

    body.high-contrast .user-notification {
        background-color: #ffff00 !important; /* רקע צהוב בוהק לנראות מקסימלית */
        color: #000000 !important; /* טקסט שחור для ניגודיות על הרקע הצהוב */
        border: 2px solid #ffffff !important; /* גבול לבן להפרדה מהתוכן */
        font-weight: bold !important; /* טקסט מודגש */
        padding: 12px !important; /* ריווח פנימי */
        display: block; /* מוודא שההתראה תוצג כבלוק */
        text-align: center;
    }