/* CSS Variables */
:root {
    --sage-green: #8a9d77;
    --light-blue: #E8F4F8;
    --sky-blue: #87CEEB;
    --dark-blue: #2C3E50;
    --text-dark: #333;
    --white: #FFFFFF;
    --border-color: #ddd;
    --light-pink: #FFE4E1;
    --pink: #FFB6C1;
}

/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #E7DECC;
    color: var(--text-dark);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html[dir="rtl"] {
    direction: rtl;
}

html[dir="ltr"] {
    direction: ltr;
}

.container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    flex: 1;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

/* Grid removed - no longer dividing the screen */

/* Header */
header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
}

/* Header styling for home page */
body.home-page header {
    margin-bottom: 0;
    z-index: 10; /* מעל התוכן האחר */
    position: relative;
}

.header-logo {
    max-width: 400px;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 30px;
    filter: blur(0.5px);
}

header h1 {
    color: var(--sage-green);
    font-size: 2.5em;
    margin-bottom: 10px;
}

.subtitle {
    color: var(--text-dark);
    font-size: 1.2em;
}

/* Intro Text Section */
.intro-text-section {
    margin: 0;
    padding: 30px;
    background: #E7DECC; /* רקע האתר */
    border-radius: 0; /* ביטול עיגול פינות */
    box-shadow: none; /* ביטול צל */
    border: none; /* ביטול מסגרת */
    position: relative;
    z-index: 1;
    overflow: visible; /* וידוא שהטקסט לא נחתך */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%; /* לא יעבור את הרוחב של ה-container */
    box-sizing: border-box;
}

/* Welcome and login sections styling for home page */
body.home-page .welcome-section {
    background: #E7DECC; /* רקע האתר */
    border: none; /* ביטול מסגרת */
    box-shadow: none; /* ביטול צל */
    width: auto;
    max-width: none;
    margin: 0;
}

body.home-page .login-section {
    background: #E7DECC; /* רקע האתר */
    border: none; /* ביטול מסגרת */
    box-shadow: none; /* ביטול צל */
    width: auto;
    max-width: none;
    display: flex !important;
}

body.home-page .home-layout-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px;
    align-items: flex-start;
}

body.home-page .home-layout-container .home-left-section {
    flex: 0 0 auto;
    width: auto;
    position: relative;
    order: 3;
    margin-top: 12px;
}

body.home-page .home-layout-container .home-left-section .welcome-section {
    justify-content: flex-start !important;
    width: auto !important;
    max-width: none !important;
}

body.home-page .home-layout-container .home-right-section {
    flex: 0 1 auto;
    width: auto;
    max-width: 675px; /* הגבלת רוחב הטקסט - הורחב ב-175px */
    order: 1;
    margin-top: 0px !important;
    display: block !important; /* תמיד גלוי */
}

body.home-page .home-layout-container {
    position: relative !important;
}

body.home-page .home-layout-container {
    position: relative !important;
    min-height: 600px; /* מינימום גובה כדי לקו ההפרדה */
}

body.home-page .home-layout-container .home-divider {
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    min-height: 600px !important;
    height: 100% !important;
    max-height: none !important;
    background-color: var(--sage-green) !important;
    opacity: 0.3 !important;
    order: 2;
    pointer-events: none;
    z-index: 10 !important; /* גבוה יותר כדי שיראה מעל אלמנטים אחרים */
    display: block !important; /* תמיד גלוי */
    visibility: visible !important; /* תמיד גלוי */
}

.intro-text-content {
    line-height: 1.8;
    color: var(--text-dark);
    font-size: 1.1em;
    overflow: visible; /* וידוא שהטקסט לא נחתך */
    word-wrap: break-word; /* שבירת מילים ארוכות */
    max-width: 100%; /* לא יעבור את הרוחב של ה-container */
    box-sizing: border-box;
}

.intro-text-content p {
    margin-bottom: 15px;
    overflow: visible; /* וידוא שהפסקאות לא נחתכות */
}

.intro-text-content p:last-child {
    margin-bottom: 0;
}

.intro-text-content strong {
    color: var(--sage-green);
    font-weight: 600;
}

.intro-text-content .matcon-book-text {
    color: var(--sage-green);
    font-weight: 600;
}

/* Page Links Section - ריבועי קישור לעמודים */
.page-links-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 15px;
    width: 100%;
}

.page-links-row {
    justify-content: center; /* מרכוז */
    align-items: center;
    flex-wrap: nowrap; /* שורה אחת */
    gap: 20px; /* רווחים שווים בין הכפתורים */
    padding: 20px; /* רווחים צדדיים */
    background: #E7DECC; /* רקע האתר */
    border: none; /* ביטול מסגרת */
    box-shadow: none; /* ביטול צל */
    margin-top: auto; /* דחיפה לתחתית */
}

.page-links-row-second {
    display: none; /* הסתרת השורה השנייה - לא בשימוש יותר */
}

.page-link-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F9F6EE; /* צבע של כרטיסי המתכונים */
    border-radius: 15px;
    padding: 15px 20px; /* הקטנת padding בחצי */
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: 0 4px 15px rgba(138, 157, 119, 0.3); /* צל ירוק */
    border: 3px solid var(--sage-green); /* מסגרת ירוקה */
    transition: all 0.3s ease;
    width: 233.1px; /* רוחב מוגדל ב-20% - 194.25*1.2 */
    height: 216px; /* גובה מוגדל ב-20% - 180*1.2 */
    text-align: center;
    box-sizing: border-box; /* כולל padding ו-border בגובה ורוחב */
    flex: 0 0 auto; /* לא גדל ולא מתכווץ */
}

.page-link-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(138, 157, 119, 0.4); /* צל ירוק חזק יותר ב-hover */
    border: 3px solid var(--sage-green); /* מסגרת ירוקה - כמו במצב רגיל */
    background: #F9F6EE; /* נשאר באותו צבע */
}

.page-link-icon {
    font-size: 2.1em; /* גודל מוגדל ב-20% - 1.75*1.2 */
    margin-bottom: 8px; /* הקטנת רווח בחצי */
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-link-icon img {
    max-width: 48px; /* מוגדל ב-20% - 40*1.2 */
    max-height: 48px; /* מוגדל ב-20% - 40*1.2 */
    width: auto;
    height: auto;
    object-fit: contain;
}

.page-link-text {
    font-size: 1.08em; /* מוגדל ב-20% - 0.9*1.2 */
    font-weight: 600;
    color: var(--sage-green);
    line-height: 1.2;
}

/* Navigation */
.top-nav {
    background: var(--white);
    padding: 15px 0;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* כפתור המבורגר */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-btn span {
    width: 100%;
    height: 3px;
    background-color: var(--sage-green);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-btn.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}

.nav-link {
    color: var(--text-dark);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-link:hover {
    background: var(--sage-green);
    color: var(--white);
}

.nav-link.active {
    background: var(--sage-green);
    color: var(--white);
}

.nav-btn {
    background: none;
    border: none;
    cursor: pointer;
}

/* Language Dropdown */
.language-dropdown {
    position: relative;
}

.language-dropdown-content {
    display: none;
    position: absolute;
    background: var(--white);
    min-width: 120px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    border-radius: 5px;
    overflow: hidden;
}

.language-option {
    display: block;
    padding: 10px 15px;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.3s ease;
}

.language-option:hover {
    background: var(--sage-green);
    color: var(--white);
}

/* Language icons in top nav */
.nav-language-switch {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-language-switch .nav-lang-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.nav-language-switch .nav-lang-icon:hover {
    background-color: rgba(138, 157, 119, 0.15);
}

.nav-language-switch .nav-lang-icon img {
    width: 18px;
    height: 12px;
    object-fit: cover;
}

/* Share modal: "Add user" outline button */
#share-add-user-btn {
    background: transparent !important;
    border: 2px solid var(--sage-green) !important;
    color: var(--sage-green) !important;
}

#share-add-user-btn:hover {
    background: rgba(138, 157, 119, 0.12) !important;
}

/* Welcome Section */
.welcome-section {
    margin: 0;
    float: none;
    width: 100%;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    z-index: 5; /* מתחת ל-header */
    max-height: fit-content; /* מגביל את הגובה */
    overflow: visible; /* מאפשר לתוכן לחרוג */
}

.welcome-box {
    background: #F9F6EE; /* צבע של הכפתורים */
    border-radius: 15px;
    padding: 30px;
    max-width: 550px;
    width: 100%;
    margin: 0;
    margin-right: 0 !important; /* וידוא שהתיבה בצד ימין */
    margin-left: 81px; /* הזזה 81 פיקס לשמאל */
    border: 3px solid var(--sage-green); /* מסגרת ירוקה */
    box-shadow: 0 4px 15px rgba(138, 157, 119, 0.3); /* צל ירוק */
    position: relative;
    z-index: 2;
}

.welcome-content {
    display: flex;
    gap: 30px;
    align-items: center;
}

.welcome-left {
    flex: 1;
}

.welcome-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
}

.welcome-right {
    flex: 1;
}

.welcome-title {
    font-size: 2.5em;
    color: var(--sage-green);
    margin-bottom: 20px;
}

.welcome-logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 20px;
    display: block;
}

.welcome-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.welcome-link {
    color: var(--text-dark);
    text-decoration: none;
    font-size: 1.2em;
    padding: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.welcome-link:hover {
    color: var(--sage-green);
}

.arrow {
    font-size: 1.2em;
}

/* Login Section */
.login-section {
    margin: 0;
    float: none;
    width: auto;
    max-width: none;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 5; /* מתחת ל-header */
    max-height: fit-content; /* מגביל את הגובה */
    overflow: visible; /* מאפשר לתוכן לחרוג */
}

.login-boxes-container {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.login-box-separate {
    background: #F9F6EE; /* צבע של הכפתורים */
    border-radius: 15px;
    padding: 15px;
    max-width: 600px;
    width: 100%;
    border: 3px solid var(--sage-green); /* מסגרת ירוקה */
    box-shadow: 0 4px 15px rgba(138, 157, 119, 0.3); /* צל ירוק */
    position: relative;
    z-index: 2;
}

.login-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.close-login-box-btn {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: var(--text-dark);
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-login-box-btn:hover {
    color: var(--sage-green);
}

.login-form-separate {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Form Groups */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(139, 69, 19, 0.2);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}

.form-group label {
    font-weight: 500;
    color: var(--text-dark);
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1em;
    line-height: 1.5;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--border-color);
    box-shadow: none;
}

/* Buttons */
.submit-btn {
    background: var(--sage-green);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.submit-btn:hover {
    background: #7a8d67;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cancel-btn {
    background: #f2b081;
    color: var(--white);
}

.cancel-btn:hover {
    background: #e0a070;
}

.register-btn {
    background: var(--sage-green);
}

/* Register clear button - orange */
#home-register-clear-btn {
    background: #f2b081;
    color: var(--white);
}

#home-register-clear-btn:hover {
    background: #e0a070;
}

/* Register cancel button - red (same as delete category button) */
#cancel-new-user-btn {
    background: #c05a5a;
    color: var(--white);
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 500;
}

#cancel-new-user-btn:hover {
    background: #a04a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-buttons-container {
    margin-top: 15px;
}

.login-buttons-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.login-buttons-row-first {
    margin-bottom: 10px;
}

.login-buttons-row-second {
    margin-top: 0;
}

/* Login button - green */
.login-submit-btn {
    background: var(--sage-green);
    color: var(--white);
    width: 100%;
}

.login-submit-btn:hover {
    background: #7a8d67;
}

/* Clear button - orange */
.login-clear-btn {
    background: #f2b081;
    color: var(--white);
}

.login-clear-btn:hover {
    background: #e0a070;
}

/* Forgot password button - light blue */
.login-forgot-btn {
    background: #EDF1FE;
    color: var(--text-dark);
}

.login-forgot-btn:hover {
    background: #D4E0FC;
}

/* Cancel button - red (same as delete category button) */
.login-cancel-btn {
    background: #c05a5a;
    color: var(--white);
}

.login-cancel-btn:hover {
    background: #a04a4a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#home-forgot-password-btn {
    background: #EDF1FE;
    color: var(--text-dark);
}

#home-forgot-password-btn:hover {
    background: #D4E0FC;
}

/* Error Messages */
.error-message {
    color: #d32f2f;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Recipe Cards */
.recipe-card {
    background: #F9F6EE;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.recipe-card-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recipe-card-top-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.recipe-card-main-content {
    flex: 1;
    min-width: 0;
}

.recipe-side-frames {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-right: 0;
    margin-left: auto;
    flex: 0 0 auto;
}

body[dir="ltr"] .recipe-side-frames {
    margin-left: 0;
    margin-right: auto;
    order: -1;
}

.recipe-images-frame {
    flex: 0 0 180px;
    width: 180px;
    height: 210px;
    border: 2px solid var(--sage-green);
    border-radius: 8px;
    padding: 10px;
    background: var(--white);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
}

.recipe-images-gallery {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
    max-height: 100%;
    overflow: hidden;
}

.recipe-images-gallery img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.recipe-images-gallery img:hover {
    transform: scale(1.05);
}

.recipe-text-frame {
    flex: 0 0 360px;
    width: 360px;
    height: 210px;
    border: 2px solid var(--sage-green);
    border-radius: 8px;
    padding: 10px;
    background: #faf9f7;
    overflow: hidden;
    position: relative;
}

.recipe-notes-text,
.recipe-content-text {
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--text-dark);
    margin: 0;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    position: relative;
}

.recipe-notes-text::after,
.recipe-content-text::after {
    content: '';
    display: none;
}

.recipe-text-power-btn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--sage-green);
    background: var(--white);
    color: var(--sage-green);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.recipe-text-power-btn:hover {
    background: var(--sage-green);
    color: var(--white);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.recipe-text-power-btn svg {
    width: 16px;
    height: 16px;
}

body[dir="ltr"] .recipe-text-power-btn {
    left: auto;
    right: 10px;
}

.recipe-header-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    gap: 15px;
    flex-wrap: wrap;
}

body[dir="ltr"] .recipe-header-row {
    justify-content: space-between;
    gap: 0;
}

.recipe-name {
    color: var(--sage-green);
    font-size: 1.5em;
    margin: 0;
    flex: 0 0 auto;
}

.recipe-saved-date {
    color: #999;
    font-size: 0.85em;
    font-weight: normal;
    margin-right: 0;
    margin-left: 0;
    flex: 0 0 auto;
}

body[dir="ltr"] .recipe-saved-date {
    margin-left: 0;
    margin-right: 0;
}

.recipe-publisher-source {
    color: #999;
    font-size: 0.85em;
    font-weight: normal;
    margin-bottom: 10px;
    margin-top: -10px;
}

body[dir="ltr"] .recipe-publisher-source {
    margin-left: 0;
    margin-right: 0;
}

body[dir="ltr"] .recipe-name {
    order: 1;
    margin-left: auto;
}

.recipe-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: -60px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-top: 15px;
    width: 100%;
    position: relative;
}

.recipe-like-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
    margin-right: 0;
    order: 999;
    flex-shrink: 0;
}

body[dir="ltr"] .recipe-like-buttons {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body[dir="ltr"] .recipe-card {
    position: relative;
}

.recipe-actions > .recipe-link-btn,
.recipe-actions > .edit-btn,
.recipe-actions > .delete-btn {
    order: 0;
}

.recipe-actions > .copy-recipe-btn {
    order: 1;
}

body[dir="ltr"] .recipe-actions > .share-btn {
    order: 0;
}

body[dir="ltr"] .recipe-actions > .recipe-like-buttons {
    order: 1 !important;
    margin-left: 300px !important;
    margin-right: 0 !important;
    position: static !important;
    z-index: 10 !important;
}

.recipe-like-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.recipe-like-btn:hover {
    transform: scale(1.1);
}

.recipe-like-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Personal recipe card - actions at the bottom */

.recipe-link-btn,
.edit-btn,
.delete-btn,
.share-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 90px;
    line-height: 1.4;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    flex-shrink: 1;
}

.recipe-link-btn {
    background: transparent;
    color: #f2b081;
    border: 1px solid #f2b081;
}

.recipe-link-btn:hover {
    background: rgba(242, 176, 129, 0.1);
    border-color: #e0a070;
    color: #e0a070;
}

.edit-btn {
    background: transparent;
    color: var(--sage-green);
    border: 1px solid var(--sage-green);
    min-width: 101px;
}

.edit-btn:hover {
    background: rgba(107, 125, 90, 0.1);
    border-color: var(--sage-green);
    color: var(--sage-green);
}

.delete-btn {
    background: transparent;
    color: #c05a5a;
    border: 1px solid #c05a5a;
    min-width: 101px;
}

.delete-btn:hover {
    background: rgba(192, 90, 90, 0.1);
    border-color: #a04a4a;
    color: #a04a4a;
}

.share-btn {
    background: transparent;
    color: #555;
    border: 1px solid #555;
    min-width: 101px;
}

.share-btn:hover {
    background: rgba(85, 85, 85, 0.1);
    border-color: #333;
    color: #333;
}

.sort-btn {
    background: transparent;
    color: #555;
    border: 1px solid #999;
    border-radius: 5px;
    padding: 8px 16px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.sort-btn:hover {
    background: rgba(85, 85, 85, 0.1);
    border-color: #999;
    color: #333;
}

/* Sort Dropdown */
.sort-dropdown {
    font-size: 0.9em;
}

.sort-dropdown-item:hover {
    background: #f0f0f0 !important;
}

.sort-dropdown-item.active {
    background: var(--sage-green) !important;
    color: white !important;
}

.recipe-url {
    margin: 10px 0;
    word-break: break-all;
}

.recipe-categories,
.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
}

.recipe-categories-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: flex-start;
    margin-right: 0;
    margin-left: 0;
}

body[dir="ltr"] .recipe-categories-tags {
    margin-right: 0;
    margin-left: 0;
}

.category-tag {
    background: #EDEADE;
    color: var(--sage-green);
    padding: 5px 15px;
    border-radius: 50px;
    border: 2px solid var(--sage-green);
    font-size: 0.9em;
}

.tag {
    background: #EDEADE;
    color: var(--sage-green);
    padding: 5px 15px;
    border-radius: 50px;
    border: 2px solid var(--sage-green);
    font-size: 0.9em;
}

.recipe-notes {
    margin-top: 10px;
    margin-bottom: 20px;
    color: var(--text-dark);
    white-space: pre-wrap;
    width: 100%;
    box-sizing: border-box;
}

/* Increase recipe notes textarea height by 100px at the bottom on new recipe page */
body:has(#recipe-form) #recipe-notes,
body:has(.recipe-type-buttons-section) #recipe-notes,
.new-recipe-page #recipe-notes {
    min-height: calc(1.5em * 12 + 100px) !important;
    height: calc(1.5em * 12 + 100px) !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    will-change: auto !important;
    transform: translateZ(0) !important;
}

.recipe-notes[rows="16"] {
    min-height: calc(1.5em * 16 - 60px);
}

.recipe-notes[rows="8"] {
    min-height: calc(1.5em * 8 - 60px);
}

.form-group > div[style*="position: relative"] {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 100%;
}

.form-group > div[style*="position: relative"] > textarea {
    position: relative;
    z-index: 1;
    background: transparent;
}

.recipe-notes-image {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    width: 100px !important;
    height: 100px !important;
    z-index: 10 !important;
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    pointer-events: none;
}

.recipe-notes-image button {
    pointer-events: auto;
}

.recipe-notes-image {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    width: 100px !important;
    height: 100px !important;
    z-index: 10 !important;
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
}

.recipe-card {
    position: relative;
}

.recipe-card .recipe-notes {
    position: relative;
    padding-bottom: 120px;
}

.recipe-images-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    align-items: flex-start;
}

.personal-recipe-content {
    outline: none;
}

.personal-recipe-content strong {
    font-weight: bold;
    color: var(--dark-blue);
    font-size: 1.1em;
}

.recipe-content-image {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 150px;
    height: 150px;
    z-index: 10;
}

body[dir="ltr"] .recipe-content-image {
    left: auto;
    right: 10px;
}

/* .personal-recipe-card inherits all styles from .recipe-card */
.personal-recipe-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #eff2ea;
}

/* Ensure "Open Recipe" button is always displayed on personal recipe cards */
.personal-recipe-card .recipe-link-btn {
    display: inline-block !important;
    visibility: visible !important;
}

.personal-recipe-card .recipe-card-main-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Categories */
.categories-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.category-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
    align-items: stretch;
}

.category-row:last-child {
    border-bottom: none;
}

.category-row .filter-btn {
    width: 100%;
    min-width: 140px;
    max-width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 5px 12px;
    font-size: 0.75em;
    flex: 0 0 auto;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #EDEADE;
    color: var(--sage-green);
    border: 2px solid var(--sage-green);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: normal;
    min-width: 160px;
    max-width: 220px;
    justify-content: center;
}

.radio-label:hover {
    background: #E0D8C8;
}

.radio-label input[type="checkbox"] {
    margin-left: 8px;
    cursor: pointer;
}

.radio-label:has(input[type="radio"]:checked),
.radio-label:has(input[type="checkbox"]:checked) {
    background: #EDEADE;
    border-color: var(--sage-green);
    box-shadow: 0 4px 12px rgba(138, 157, 119, 0.4);
}

body[dir="ltr"] .radio-label {
    min-width: 170px;
    max-width: 230px;
}

body[dir="ltr"] .edit-box .radio-label {
    min-width: 130px;
    max-width: 190px;
}

/* Filter Buttons */
.filter-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 15px;
    row-gap: 0;
    align-content: flex-start;
    align-items: flex-start;
    margin-top: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

#categories-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
    min-height: fit-content;
}

.filter-btn {
    padding: 10px 20px;
    background: #EDEADE;
    color: var(--sage-green);
    border: 2px solid var(--sage-green);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: normal;
    min-width: 140px;
    max-width: 100%;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    line-height: 1.4;
}

.filter-btn:hover:not(.active) {
    background: #d0d7dc;
}

/* צבע hover לכפתורי קטגוריות לא לחוצים בעמוד מתכון חדש */
#recipe-form .filter-btn:hover:not(.active),
.new-recipe-page .filter-btn:hover:not(.active),
body:has(#recipe-form) .filter-btn:hover:not(.active) {
    background: #d0d7dc !important;
}

/* צבע ארד לכפתורי קטגוריות נבחרות בעמוד מתכון חדש - לא משתנה ב-hover */
#recipe-form .filter-btn.active:hover,
.new-recipe-page .filter-btn.active:hover {
    background: #adc3d3 !important;
    border-color: #8a9d77 !important;
    color: var(--text-dark) !important;
    box-shadow: none !important;
}

.filter-btn.active {
    background: #adc3d3;
    border-color: var(--sage-green);
    box-shadow: none;
}

/* צבע ארד לכפתורי קטגוריות נבחרות בעמוד מתכון חדש */
#recipe-form .filter-btn.active,
.new-recipe-page .filter-btn.active,
body:has(#recipe-form) .filter-btn.active,
.filter-btn.active[data-category] {
    background: #adc3d3 !important;
    border-color: var(--sage-green) !important;
    color: var(--text-dark) !important;
    box-shadow: none !important;
}

body[dir="ltr"] .filter-btn {
    min-width: 150px;
}

/* Edit modal category buttons - smaller size and 4 columns */
.edit-categories-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-height: 600px;
    align-content: flex-start;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Override for English edit form - removed fixed width to allow full container width usage */
body[dir="ltr"] .edit-categories-container:not(#edit-personal-categories-container) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
}

#edit-personal-categories-container,
#edit-personal-categories-container-personal {
    display: none; /* Hidden by default, shown when personal categories exist */
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

/* When personal categories exist, show as block (inside 3rd column) */
#edit-personal-categories-container:not(:empty),
#edit-personal-categories-container-personal:not(:empty) {
    display: block !important;
}

.edit-categories-container .edit-category-btn,
.edit-categories-container .edit-personal-category-btn {
    padding: 5px 12px;
    font-size: 0.75em;
    width: auto;
    min-width: 140px;
    max-width: none;
    flex: 0 0 auto;
    white-space: nowrap;
    box-sizing: border-box;
}

body[dir="ltr"] .edit-categories-container .edit-category-btn,
body[dir="ltr"] .edit-categories-container .edit-personal-category-btn {
    width: auto;
    min-width: 140px;
    padding: 5px 12px;
    max-width: none;
    flex: 0 0 auto;
}

/* Selected Categories Display */
.selected-categories-display {
    margin: 15px 0;
    padding: 12px;
    background: #faf9f7;
    border: 1px solid rgba(139, 69, 19, 0.3);
    border-radius: 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* הסתרת שדה קטגוריות נבחרות בתיבת החיפוש החופשי בעמוד ספר המתכונים */
.search-section #selected-categories-display,
.search-section h2:has(+ #selected-categories-display) {
    display: none !important;
}

/* הסתרת ה-div שמכיל את הכותרת "קטגוריות נבחרות" בתיבת החיפוש החופשי */
.search-section > div > div:has(#selected-categories-display) {
    display: none !important;
}

.selected-categories-label {
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.selected-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-categories-display-new-recipe {
    margin: 10px 0;
    padding: 10px;
    background: #ffffff;
    border-radius: 8px;
    min-height: 50px;
    border: 1px solid rgba(139, 69, 19, 0.3);
}

/* הסתרת תיבת קטגוריות נבחרות בעמוד מתכון חדש */
#selected-categories-display-new-recipe,
#recipe-form #selected-categories-display-new-recipe,
.new-recipe-page #selected-categories-display-new-recipe,
body:has(#recipe-form) #selected-categories-display-new-recipe {
    display: none !important;
}

/* הסתרת ה-form-group שמכיל את תיבת קטגוריות נבחרות בעמוד מתכון חדש */
#recipe-form .form-group:has(#selected-categories-display-new-recipe),
.new-recipe-page .form-group:has(#selected-categories-display-new-recipe),
body:has(#recipe-form) .form-group:has(#selected-categories-display-new-recipe) {
    display: none !important;
}

.selected-categories-list-new-recipe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.selected-category-tag {
    background: #EDEADE;
    color: var(--sage-green);
    padding: 4px 8px;
    border-radius: 50px;
    border: 2px solid var(--sage-green);
    font-size: 0.85em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.remove-category-btn {
    background: none;
    border: none;
    color: #c05a5a;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-category-btn:hover {
    background: rgba(192, 90, 90, 0.2);
    border-radius: 50%;
}

/* Search */
.search-section {
    margin-bottom: 30px;
}

.search-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-input {
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1em;
    width: 100%;
    background: #faf9f7;
}

.search-input:focus {
    outline: none;
    border-color: var(--border-color);
    box-shadow: none;
}

.clear-search-text {
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    color: #f2b081;
    text-decoration: underline;
    font-size: 0.95em;
    transition: color 0.3s ease;
}

.clear-search-text:hover {
    color: #e0a070;
}

/* Side Images */
.side-images-container {
    position: relative;
}

.side-image-frame {
    position: absolute;
    left: -320px;
    top: 195px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    border-radius: 15px;
    padding: 10px;
    background: var(--white);
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-image-frame-second {
    top: 515px;
}

.side-image-frame-third {
    top: 835px;
}

.side-cake-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

body[dir="ltr"] .side-image-frame {
    left: auto;
    right: -320px;
}

/* Floating Buttons */
.floating-home-btn {
    position: fixed;
    right: calc(50% - 850px);
    top: calc(50% - 100px);
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #E7DECC;
    border: 3px solid #E7DECC;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    box-shadow: none;
    transition: all 0.3s ease;
    z-index: 999;
    line-height: 1.2;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.floating-home-btn:hover {
    background: #E7DECC;
    transform: scale(1.05);
    box-shadow: none;
}

body[dir="ltr"] .floating-home-btn {
    left: calc(50% - 850px);
    right: auto;
}

.floating-top-btn {
    position: fixed;
    right: calc(50% - 850px);
    top: calc(50% + 150px);
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #FFD700;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 999;
    line-height: 1.2;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

/* Allow floating-top-btn to be a link */
a.floating-top-btn {
    text-decoration: none;
}

.floating-top-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

body[dir="ltr"] .floating-top-btn {
    left: calc(50% - 850px);
    right: auto;
}

/* Floating buttons position for new-recipe page */
body:has(.recipe-type-buttons-section) .floating-home-btn {
    right: calc(50% - 930px);
    top: calc(50% - 200px);
}

body:has(.recipe-type-buttons-section) .floating-top-btn {
    right: calc(50% - 930px);
    top: calc(50% - 15px);
}

body[dir="ltr"]:has(.recipe-type-buttons-section) .floating-home-btn {
    left: calc(50% - 930px);
    right: auto;
    top: calc(50% - 200px);
}

body[dir="ltr"]:has(.recipe-type-buttons-section) .floating-top-btn {
    left: calc(50% - 930px);
    right: auto;
    top: calc(50% - 15px);
}

/* Additional floating button for new-recipe page */
body:has(.recipe-type-buttons-section) .floating-bottom-btn {
    position: fixed;
    right: calc(50% - 930px);
    top: calc(50% + 170px);
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #FFD700;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 999;
    line-height: 1.2;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

body:has(.recipe-type-buttons-section) .floating-bottom-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

body[dir="ltr"]:has(.recipe-type-buttons-section) .floating-bottom-btn {
    left: calc(50% - 930px);
    right: auto;
    top: calc(50% + 170px);
}

/* Floating bottom button for other pages (my-recipes, conversion-table) */
.floating-bottom-btn {
    position: fixed;
    right: calc(50% - 850px);
    top: calc(50% + 265px);
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #FFD700;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 999;
    line-height: 1.2;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

.floating-bottom-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

body[dir="ltr"] .floating-bottom-btn {
    left: calc(50% - 850px);
    right: auto;
    top: calc(50% + 265px);
}

/* Floating buttons position for my-recipes page - match new-recipe page position */
body:has(.search-section) .floating-top-btn {
    right: calc(50% - 930px);
    top: calc(50% - 15px);
}

body:has(.search-section) .floating-home-btn {
    right: calc(50% - 930px);
    top: calc(50% - 200px);
}

body:has(.search-section) .floating-bottom-btn {
    right: calc(50% - 930px);
    top: calc(50% + 170px);
}

body[dir="ltr"]:has(.search-section) .floating-top-btn {
    left: calc(50% - 930px);
    right: auto;
    top: calc(50% - 15px);
}

body[dir="ltr"]:has(.search-section) .floating-home-btn {
    left: calc(50% - 930px);
    right: auto;
    top: calc(50% - 200px);
}

body[dir="ltr"]:has(.search-section) .floating-bottom-btn {
    left: calc(50% - 930px);
    right: auto;
    top: calc(50% + 170px);
}

/* Conversion table page - match width with new-recipe page */
body:has(.conversion-section) .container {
    max-width: 1700px;
    padding: 20px;
}

body:has(.conversion-section) .conversion-section {
    max-width: 100%;
    width: 100%;
}

/* Additional floating button for conversion-table page */
body:has(.conversion-section) .floating-home-page-btn {
    position: fixed;
    right: calc(50% - 850px);
    top: calc(50% - 385px);
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #FFD700;
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 400;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 999;
    line-height: 1.2;
    padding: 0;
    box-sizing: border-box;
    cursor: pointer;
}

body:has(.conversion-section) .floating-home-page-btn:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

body[dir="ltr"]:has(.conversion-section) .floating-home-page-btn {
    left: calc(50% - 850px);
    right: auto;
    top: calc(50% - 385px);
}

/* Adjust buttons position for conversion-table page */
body:has(.conversion-section) .floating-top-btn {
    top: calc(50% - 200px);
}

body:has(.conversion-section) .floating-home-btn {
    top: calc(50% - 15px);
}

body:has(.conversion-section) .floating-home-page-btn {
    top: calc(50% + 170px);
}

body:has(.conversion-section) .floating-bottom-btn {
    top: calc(50% + 360px);
}

body[dir="ltr"]:has(.conversion-section) .floating-top-btn {
    top: calc(50% - 200px);
}

body[dir="ltr"]:has(.conversion-section) .floating-home-btn {
    top: calc(50% - 15px);
}

body[dir="ltr"]:has(.conversion-section) .floating-home-page-btn {
    top: calc(50% + 170px);
}

body[dir="ltr"]:has(.conversion-section) .floating-bottom-btn {
    top: calc(50% + 360px);
}

/* Sections */
section {
    background: var(--white);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
    width: 100%;
    box-sizing: border-box;
}

/* Filter section - ensure full width */
.filter-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
}

/* Main Content Wrapper */
.main-content-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
}

.main-content-left {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

.main-content-right {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
}

/* New Recipe page - ensure container and split remain stable - match my-recipes page width */
body:has(.recipe-type-buttons-section) .container {
    max-width: 1530px !important;
}

body:has(.recipe-type-buttons-section) .main-content-wrapper {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 30px !important;
    align-items: flex-end !important;
}

body:has(.recipe-type-buttons-section) .main-content-left,
body:has(.recipe-type-buttons-section) .main-content-right {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* יישור התיבות בתחתית */
}

/* יישור כפתורי שמור ונקה עם כפתור פרסם - התאמת גובה תיבת המתכון */
body:has(.recipe-type-buttons-section) #link-recipe-section,
body:has(#recipe-form) #link-recipe-section {
    padding-bottom: 4px !important; /* הוגדל מ-3px ל-4px (הגדלה נוספת של 1px) */
    margin-bottom: 0px !important; /* הוסר margin-bottom כדי לאפשר יישור מדויק */
    display: flex !important;
    flex-direction: column !important;
    min-height: fit-content !important;
    will-change: auto !important;
    align-self: flex-end !important; /* יישור התיבה בתחתית */
}

/* תיבת פרסם בקשה למתכון מוסתרת בעמוד מתכון חדש */
body:has(.recipe-type-buttons-section) #recipe-request-section,
body:has(#recipe-form) #recipe-request-section {
    display: none !important;
}

body:has(.recipe-type-buttons-section) #recipe-form,
body:has(#recipe-form) #recipe-form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

/* יישור הכפתורים עם כפתור פרסם - הוספת margin-top כדי לדחוף את הכפתורים למטה */
body:has(.recipe-type-buttons-section) #recipe-form .form-buttons,
body:has(#recipe-form) #recipe-form .form-buttons {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-top: 7px !important; /* הוקטן מ-22px ל-7px (הרמה נוספת של 15px) */
}

/* My Recipes page - match width with new-recipe page */
body:has(.search-section) .container {
    max-width: 1530px;
}

body:has(.search-section) .main-content-wrapper {
    max-width: 100%;
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* My Recipes page - ensure search and filter sections are full width */
body:has(.search-section) .search-section,
body:has(.search-section) .filter-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;
}

body:has(.search-section) section {
    max-width: 100%;
}

/* Recipes Container */
.recipes-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Recipes Section - background color */
.recipes-section {
    background: #E7DECC;
    padding: 30px 20px;
    border-radius: 12px;
}

/* Add margin-top for recipes container in book of recipes (links) section */
.main-content-right .recipes-section .recipes-container {
    margin-top: 18px;
}

.empty-message {
    text-align: center;
    color: #999;
    padding: 40px;
    font-size: 1.1em;
}

/* Top Recipes Section */
.top-recipes-section {
    margin-bottom: 30px;
    padding: 20px;
    background: #E7DECC;
}


.top-recipes-container {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
    overflow-x: auto;
}

.top-recipes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.25);
    border: 2px solid #999;
}

.top-recipes-table thead {
    background: #c05a5a;
    color: var(--white);
    border: 2px solid #999;
}

.top-recipes-table th {
    padding: 15px;
    text-align: right;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.top-recipes-table td {
    padding: 12px 15px;
    border: 1px solid var(--sage-green);
    text-align: right;
}

.top-recipes-table tbody tr:nth-child(even) {
    background: #F9F6EE;
}

.top-recipes-table tbody tr:hover {
    background: #f0f0f0;
}

.top-recipes-table .position-cell {
    font-weight: bold;
    color: var(--sage-green);
    text-align: center;
    width: 80px;
}

.top-recipes-table .url-cell {
    word-break: break-all;
    max-width: 500px;
    min-width: 300px;
}

.top-recipes-table .copy-button-cell {
    width: 50px;
    text-align: center;
    padding: 8px 4px;
}

.top-recipes-table .url-link {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-recipes-table .url-link:hover {
    color: #004499;
    text-decoration: underline;
}

.top-recipes-table .publisher-cell {
    text-align: right;
    padding: 12px 15px;
    max-width: 100px;
    min-width: 80px;
    word-break: break-word;
}

.top-recipes-table .source-cell {
    text-align: right;
    padding: 12px 15px;
    max-width: 75px;
    min-width: 60px;
    word-break: break-word;
}

.top-recipes-table .share-count-cell {
    text-align: center;
    font-weight: bold;
    color: #d9534f;
    width: 150px;
}

/* Club Recommendations Section */
.club-recommendations-section {
    margin-top: 40px;
    margin-bottom: 40px;
    background: #E7DECC;
    padding: 20px;
    border-radius: 10px;
}

.club-recommendations-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* תמונת win1 - מוצגת במסכים גדולים */
.win1-image-container {
    display: block !important;
}

/* צבעים לטבלת החברים המובילים */
.top-user-row > span:first-child {
    color: #666 !important; /* אפור לטקסט "חברות זהב ניתנת ל:" */
}

.recipe-count {
    color: #000 !important; /* שחור למספר המתכונים */
}

.club-recommendation-card,
.club-announcement-card {
    width: 250px;
    max-width: min(250px, 100%);
    height: 350px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
}

.club-recommendation-card {
    background: #e3eff2;
    border: 5px solid #d4a574;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.club-announcement-card {
    border: 2px solid rgba(139, 69, 19, 0.22);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07), 0 6px 18px rgba(139, 69, 19, 0.12);
}

.club-recommendation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.club-recommendation-name {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    text-align: right;
    word-wrap: break-word;
}

.club-recommendation-publisher {
    font-size: 1em;
    color: #666;
    text-align: right;
    font-style: italic;
    margin-bottom: 15px;
}

.club-recommendation-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: auto;
}

.club-recommendation-btn {
    padding: 8px 16px;
    border: 2px solid var(--sage-green);
    background: transparent;
    color: var(--sage-green);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
}

.club-recommendation-btn:hover {
    background: var(--sage-green);
    color: white;
    border-color: var(--sage-green);
}

.club-recommendation-btn.copy-btn {
    border: 2px solid #4a90e2;
    color: #4a90e2;
    font-weight: bold;
}

.club-recommendation-btn.copy-btn:hover {
    background: #4a90e2;
    color: white;
    border-color: #4a90e2;
}

/* Recommended Recipes */
.recommended-recipe-card {
    background: #c2d9e1;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 2px 8px rgba(139, 69, 19, 0.1);
}

.recipe-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.recommendation-count {
    background: transparent;
    color: red;
    border: 2px solid red;
    border-radius: 4px;
    padding: 8px 30px;
    font-size: 1.4em;
    font-weight: bold;
    min-width: 180px;
    text-align: center;
}

.recipe-url-display {
    flex: 1;
    padding: 5px 10px;
    max-height: 60px;
    overflow: hidden;
    background: #F9F6EE;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    word-break: break-all;
    font-size: 0.9em;
}

.open-recipe-btn {
    border-radius: 4px;
    border: 2px solid var(--sage-green);
    background: var(--sage-green);
    color: var(--white);
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.open-recipe-btn:hover {
    background: #7a8d67;
    border-color: #7a8d67;
}

.copy-recipe-btn {
    border-radius: 4px;
    border: 1px solid #4a90e2;
    background: transparent;
    color: #4a90e2;
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 70px;
    text-align: center;
}

.copy-recipe-btn:hover {
    background: rgba(74, 144, 226, 0.1);
    color: #357abd;
    border-color: #357abd;
}

/* Copy URL Button in Top Recipes Table */
.copy-url-btn {
    border: none;
    background: transparent;
    color: #666;
    font-size: 0.9em;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    opacity: 0.7;
    line-height: 1;
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.copy-url-btn img {
    display: block;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.copy-url-btn:hover {
    opacity: 1;
    background: #f0f0f0;
    color: var(--sage-green);
}

.copy-url-btn:hover img {
    opacity: 1;
}

.copy-url-btn:active {
    transform: scale(0.95);
}

/* Q&A Section Styles */
.qa-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid #ddd;
}

.questions-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    width: 100%;
}

/* Tips Section Styles */
.tips-section {
    margin-top: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 20px;
    padding-left: 20px;
    background: #E7DECC;
}

.tips-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 20px;
    width: 100%;
    justify-content: center;
    position: relative;
}

.tip-card {
    width: 300px;
    height: 200px;
    background: var(--white);
    border-radius: 12px;
    border: 2px solid rgba(139, 69, 19, 0.2);
    box-shadow: 0 4px 16px rgba(139, 69, 19, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
    padding: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.tip-card:hover:not(.tip-card-expanded) {
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.25);
    transform: translateY(-2px);
}

.tip-card-expanded {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px !important;
    height: 400px !important;
    z-index: 1000 !important;
    cursor: default;
    box-shadow: 0 8px 24px rgba(139, 69, 19, 0.4);
    margin: 0 !important;
}

.tip-header {
    background: linear-gradient(135deg, var(--sage-green), #7a8d67);
    color: var(--white);
    padding: 10px 15px;
    font-weight: bold;
    font-size: 1em;
    text-align: center;
    border-bottom: 2px solid rgba(139, 69, 19, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.tip-title {
    display: inline-block;
}

.tip-content {
    flex: 1;
    padding: 15px;
    overflow-y: hidden;
    display: flex;
    align-items: flex-start;
}

.tip-card-expanded .tip-content {
    overflow-y: auto;
}

.tip-message {
    font-size: 0.95em;
    line-height: 1.6;
    color: #333;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
}

.tip-footer {
    padding: 10px 15px;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em;
    color: #666;
}

.tip-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tip-author {
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tip-close-btn {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

.tip-close-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.qa-form-container {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: var(--sage-green);
    box-shadow: 0 0 0 2px rgba(122, 141, 103, 0.2);
}

.question-card {
    background: var(--white);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 0;
    border: 2px solid rgba(139, 69, 19, 0.2);
    box-shadow: 0 4px 12px rgba(139, 69, 19, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.question-card:hover {
    box-shadow: 0 6px 16px rgba(139, 69, 19, 0.25);
    transform: translateY(-2px);
}

.question-number {
    background: linear-gradient(135deg, var(--sage-green), #7a8d67);
    color: var(--white);
    font-weight: bold;
    font-size: 1.1em;
    padding: 12px 20px;
    text-align: center;
    border-bottom: 2px solid rgba(139, 69, 19, 0.2);
}

.question-content-wrapper {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.question-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.question-icon {
    font-size: 2em;
    flex-shrink: 0;
    margin-top: 5px;
}

.question-main-content {
    flex: 1;
}

.question-text {
    font-size: 1.1em;
    line-height: 1.8;
    white-space: pre-wrap;
    color: #333;
    margin-bottom: 12px;
    font-weight: 500;
}

.question-link {
    color: var(--sage-green);
    text-decoration: none;
    word-break: break-all;
    font-size: 0.95em;
    margin-top: 10px;
    display: inline-block;
    padding: 5px 10px;
    background: rgba(122, 141, 103, 0.1);
    border-radius: 5px;
    transition: all 0.2s ease;
}

.question-link:hover {
    background: rgba(122, 141, 103, 0.2);
    text-decoration: underline;
}

.question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

.question-date,
.question-author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.answers-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.answers-header {
    margin-bottom: 15px;
}

.answers-count {
    font-weight: bold;
    color: var(--sage-green);
    font-size: 1.05em;
}

.answer-card {
    background: linear-gradient(to right, #f9f9f9, #ffffff);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
    margin-right: 15px;
    border-right: 4px solid var(--sage-green);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.answer-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateX(-3px);
}

.answer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.answer-icon {
    font-size: 1.3em;
}

.answer-number {
    font-weight: bold;
    color: var(--sage-green);
    font-size: 0.95em;
}

.answer-content {
    margin-right: 30px;
}

.answer-text {
    line-height: 1.7;
    white-space: pre-wrap;
    margin-bottom: 12px;
    color: #444;
    font-size: 1em;
}

.answer-link {
    color: var(--sage-green);
    text-decoration: none;
    word-break: break-all;
    font-size: 0.9em;
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(122, 141, 103, 0.1);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.answer-link:hover {
    background: rgba(122, 141, 103, 0.2);
    text-decoration: underline;
}

.answer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85em;
    color: #666;
    margin-top: 10px;
}

.answer-date,
.answer-author {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.no-answers-message {
    text-align: center;
    padding: 30px 20px;
    color: #999;
    font-style: italic;
    background: #f9f9f9;
    border-radius: 8px;
    margin-top: 15px;
}

.question-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
}

.answer-form {
    margin-top: 20px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.answer-form-header {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--sage-green);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--sage-green);
}

.answer-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-direction: row-reverse;
}

.cancel-btn {
    background: #f2b081;
    color: var(--white);
    border: none;
    border-radius: 4px;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn:hover {
    background: #e0a070;
}

.answer-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    box-sizing: border-box;
}

.answer-form input[type="url"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.reply-btn {
    background: var(--sage-green);
    color: var(--white);
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(122, 141, 103, 0.3);
}

.reply-btn:hover {
    background: #7a8d67;
    box-shadow: 0 4px 8px rgba(122, 141, 103, 0.4);
    transform: translateY(-1px);
}

.reply-btn:active {
    transform: translateY(0);
}

/* Personal Recipes Container */
/* #personal-recipes-container uses same styles as .recipes-container */

.recipe-content {
    white-space: pre-wrap;
    margin: 15px 0;
    line-height: 1.8;
}

.recipe-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 15px 0;
}

/* Tags */
.tags-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tag-input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1em;
}

.tag-input:focus {
    outline: none;
    border-color: var(--border-color);
    box-shadow: none;
}

.add-tag-btn {
    padding: 10px 20px;
    background: var(--sage-green);
    color: var(--white);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-tag-btn:hover {
    background: #7a8d67;
}

.tags-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.tags-display .tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.remove-tag {
    background: none;
    border: none;
    color: #c05a5a;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0;
}

.remove-tag:hover {
    color: #a04a4a;
}

/* Form Buttons */
.form-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 40px;
    gap: 10px;
}

.form-buttons-top {
    margin-top: 0;
    margin-bottom: 0;
}

.form-buttons-bottom {
    margin-top: 40px;
}

.form-buttons-left {
    display: flex;
    gap: 15px;
}

.clear-form-btn {
    background: #f2b081;
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-form-btn:hover {
    background: #e0a070;
}

.add-to-recommended-btn {
    background: var(--light-pink);
    color: var(--text-dark);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-to-recommended-btn:hover {
    background: var(--pink);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.modal[style*="display: flex"],
.modal[style*="display:flex"],
.modal[style*="display: block"],
.modal[style*="display:block"],
.modal.show {
    display: flex !important;
}

/* תיבת בקשת שיתוף – מעל שאר השכבות */
#share-request-popup {
    z-index: 10000;
}

.modal-content {
    background: #faf9f7;
    margin: auto;
    padding: 30px;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(139, 69, 19, 0.3);
    box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
    position: relative;
    top: auto;
    transform: none;
    max-height: 90vh;
    overflow-y: auto;
}

/* Profile update forms - 25% wider than half width and moved down 150px */
#edit-profile-modal .modal-content {
    max-width: 375px !important; /* 300px + 25% = 375px */
    width: 62.5% !important; /* 50% + 25% = 62.5% */
    position: relative !important;
    top: 150px !important; /* Moved down 150px (was -150px) */
    margin-top: 0 !important;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2em;
    cursor: pointer;
    color: var(--text-dark);
    line-height: 1;
}

.close-modal:hover {
    color: var(--sage-green);
}

/* Footer */
footer {
    background: #E7DECC;
    padding: 30px 0;
    margin-top: auto;
    text-align: center;
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(139, 69, 19, 0.3); /* פס הפרדה דק חום */
    box-shadow: none; /* הסרת הצל התכלת */
}

.footer-content {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-link {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--sage-green);
}

.footer-text {
    color: #999;
    font-size: 0.9em;
}

/* User Info */
.user-info {
    color: var(--text-dark);
    padding: 10px 15px;
    margin-right: 100px; /* הזזת הטקסט 100px מהתפריט העליון */
}

.avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.avatar-btn:hover {
    transform: scale(1.1);
}

.avatar-btn img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--sage-green);
    object-fit: cover;
}

#logout-btn {
    margin-right: 0; /* כפתור יציאה יופיע מיד אחרי user-info */
}

/* Responsive Design */

/* Intermediate medium screens - 1500px and below */
/* הסתרת הקו הירוק האנכי במסך בינוני-גדול */
@media (max-width: 1500px) {
    body.home-page .home-layout-container .home-divider {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Medium screens (tablets) - 992px and below */
@media (max-width: 992px) {
    .questions-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .floating-home-btn,
    .floating-top-btn {
        display: none !important;
    }
    
    .side-image-frame,
    .side-image-frame-second,
    .side-image-frame-third,
    .side-images-container {
        display: none !important;
    }
    
    .main-content-wrapper {
        flex-direction: column;
    }
    
    .main-content-left,
    .main-content-right {
        flex: 1;
        width: 100%;
    }
    
    /* בעמוד מתכון חדש - במסך קטן: הסתרת שדות שם המפרסם ומקור המתכון */
    body:has(#recipe-form) #link-recipe-publisher-field,
    body:has(#recipe-form) #link-recipe-source-field,
    .new-recipe-page #link-recipe-publisher-field,
    .new-recipe-page #link-recipe-source-field {
        display: none !important;
    }
    
    /* בעמוד מתכון חדש - במסך קטן: סדר התיבות */
    body:has(#recipe-form) .main-content-wrapper,
    body:has(.recipe-type-buttons-section) .main-content-wrapper,
    .new-recipe-page .main-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* תיבת המתכון - ראשונה */
    body:has(#recipe-form) .main-content-left,
    body:has(.recipe-type-buttons-section) .main-content-left,
    .new-recipe-page .main-content-left {
        order: -1 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    /* תיבת הקטגוריות - שנייה (כולל אישיות וקרוסלה) */
    body:has(#recipe-form) .main-content-right,
    body:has(.recipe-type-buttons-section) .main-content-right,
    .new-recipe-page .main-content-right {
        order: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    
    /* קטגוריות כלליות - section ראשון ב-main-content-right */
    @media (max-width: 768px) {
        body:has(#recipe-form) .main-content-right > section.filter-section:first-child,
        body:has(.recipe-type-buttons-section) .main-content-right > section.filter-section:first-child,
        .new-recipe-page .main-content-right > section.filter-section:first-child {
            order: 0 !important;
        }
        
        /* הסתרת הכפתורים התחתונים (שמור מתכון ונקה) במסך קטן */
        body:has(#recipe-form) #recipe-form .form-buttons,
        body:has(.recipe-type-buttons-section) #recipe-form .form-buttons,
        .new-recipe-page #recipe-form .form-buttons {
            display: none !important;
        }
    }
    
    /* קטגוריות אישיות - section שני ב-main-content-right */
    body:has(#recipe-form) .main-content-right > section#personal-categories-section,
    body:has(.recipe-type-buttons-section) .main-content-right > section#personal-categories-section,
    .new-recipe-page .main-content-right > section#personal-categories-section {
        order: 1 !important;
    }
    
    /* קרוסלה - section שלישי ב-main-content-right */
    body:has(#recipe-form) .main-content-right > section.filter-section:has(.horizontal-carousel-container),
    body:has(.recipe-type-buttons-section) .main-content-right > section.filter-section:has(.horizontal-carousel-container),
    .new-recipe-page .main-content-right > section.filter-section:has(.horizontal-carousel-container) {
        order: 2 !important;
    }
    
    /* הסתרת תמונות הקרוסלה במסך קטן */
    @media (max-width: 768px) {
        body:has(#recipe-form) section.filter-section:has(.horizontal-carousel-container),
        body:has(.recipe-type-buttons-section) section.filter-section:has(.horizontal-carousel-container),
        .new-recipe-page section.filter-section:has(.horizontal-carousel-container) {
            display: none !important;
        }
    }
    
    .container {
        padding: 15px;
    }
    
    header {
        padding: 15px;
    }
    
    .nav-container {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    /* הסתרת הקו המפריד הירוק והעברת תיבת ההתחברות מתחת לטקסט במסך בינוני */
    body.home-page .home-layout-container {
        flex-direction: column !important;
        gap: 20px;
    }
    
    body.home-page .home-layout-container .home-divider {
        display: none !important;
        visibility: hidden !important;
    }
    
    body.home-page .home-layout-container .home-right-section {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }
    
    body.home-page .home-layout-container .home-left-section {
        order: 1 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    /* Home page: center welcome/login boxes on mobile (prevents horizontal cut on LTR pages) */
    body.home-page .welcome-section,
    body.home-page .login-section {
        justify-content: center !important;
    }

    body.home-page .welcome-box,
    body.home-page .login-box-separate {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.home-page .login-boxes-container {
        justify-content: center !important;
    }
    
    /* סידור הכפתורים ב-3 שורות במסך בינוני: 2+2+1 */
    .page-links-section {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .page-link-box {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* שורה 1: מתכון חדש, ספר המתכונים */
    .page-links-section .page-link-box:nth-child(2),
    .page-links-section .page-link-box:nth-child(3) {
        order: 1;
    }
    
    /* שורה 2: המועדון, מחשבונים */
    .page-links-section .page-link-box:nth-child(4),
    .page-links-section .page-link-box:nth-child(5) {
        order: 2;
    }
    
    /* שורה 3: מדריך למשתמש */
    .page-links-section .page-link-box:nth-child(1) {
        order: 3;
        grid-column: 1 / -1; /* תופס את כל הרוחב בשורה השלישית */
    }
}

/* Medium screens (tablets) - 769px to 1200px */
@media (min-width: 769px) and (max-width: 1200px) {
    /* 5 טורים במסכים בינוניים כשממויין לפי א"ב */
    .filter-buttons .category-row {
        flex: 0 0 calc(20% - 12px) !important; /* 5 טורים עם gap */
        max-width: calc(20% - 12px) !important;
    }
    
    /* Keep the same gap between category columns as in small screens for new recipe page */
    body:has(#recipe-form) #categories-container,
    body:has(.recipe-type-buttons-section) #categories-container,
    .new-recipe-page #categories-container {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Make inner divs transparent so category-row become grid items */
    body:has(#recipe-form) #categories-container > div,
    body:has(.recipe-type-buttons-section) #categories-container > div,
    .new-recipe-page #categories-container > div {
        display: contents !important;
        width: auto !important;
        max-width: none !important;
    }
    
    body:has(#recipe-form) #categories-container .category-row,
    body:has(.recipe-type-buttons-section) #categories-container .category-row,
    .new-recipe-page #categories-container .category-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    body:has(#recipe-form) #categories-container .filter-btn,
    body:has(.recipe-type-buttons-section) #categories-container .filter-btn,
    .new-recipe-page #categories-container .filter-btn {
        width: 100% !important;
        flex: unset !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Hide 2 last carousel images on medium screens - show only 3 images */
    body:has(#recipe-form) .horizontal-carousel-frame:nth-child(4),
    body:has(#recipe-form) .horizontal-carousel-frame:nth-child(5),
    body:has(.recipe-type-buttons-section) .horizontal-carousel-frame:nth-child(4),
    body:has(.recipe-type-buttons-section) .horizontal-carousel-frame:nth-child(5),
    .new-recipe-page .horizontal-carousel-frame:nth-child(4),
    .new-recipe-page .horizontal-carousel-frame:nth-child(5) {
        display: none !important;
    }
}

/* Large screens (small desktops) - 1200px and below */
@media (max-width: 1200px) {
    .floating-home-btn,
    .floating-top-btn {
        display: none !important;
    }
    
    .side-image-frame,
    .side-image-frame-second,
    .side-image-frame-third,
    .side-images-container {
        display: none !important;
    }
    
    .main-content-wrapper {
        flex-direction: column;
    }
    
    .main-content-left,
    .main-content-right {
        flex: 1;
    }
    
    /* הסתרת הקו המפריד הירוק והעברת תיבת ההתחברות מתחת לטקסט במסך בינוני */
    body.home-page .home-layout-container {
        flex-direction: column !important;
        gap: 20px;
    }
    
    body.home-page .home-layout-container .home-divider {
        display: none !important;
        visibility: hidden !important;
    }
    
    body.home-page .home-layout-container .home-right-section {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }
    
    body.home-page .home-layout-container .home-left-section {
        order: 1 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
}

/* Small screens (mobile) - 768px and below */
@media (max-width: 768px) {
    /* מניעת גלילה אופקית ומניעת חיתוך מהצדדים */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* הקטנת הלוגו ב-20% במסכים קטנים */
    .header-logo {
        max-width: 320px !important; /* 80% מ-400px */
    }
    
    /* וידוא שהסרגל העליון לא מכסה תוכן */
    .top-nav {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 10px 0 !important; /* הקטנת padding במסכים קטנים */
        left: 0 !important;
        right: 0 !important;
        overflow: visible !important;
    }
    
    .floating-home-btn,
    .floating-top-btn {
        display: none !important;
    }
    
    .side-image-frame,
    .side-image-frame-second,
    .side-image-frame-third,
    .side-images-container {
        display: none !important;
    }
    
    /* העברת תיבת ההתחברות מתחת לטקסט במסך קטן */
    body.home-page .home-layout-container {
        flex-direction: column !important;
        gap: 20px;
    }
    
    body.home-page .home-layout-container .home-divider {
        display: none !important;
        visibility: hidden !important;
    }
    
    body.home-page .home-layout-container .home-right-section {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px !important;
    }
    
    body.home-page .home-layout-container .home-left-section {
        order: 1 !important;
        width: 100% !important;
        margin-top: 0 !important;
    }
    
    /* סידור שדות טופס משתמש חדש בצורה אנכית במסכים קטנים */
    #home-register-form .form-group {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    #home-register-form .form-group > div {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .questions-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .tips-container {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
    }
    
    .tip-card {
        width: 100%;
        max-width: 300px;
    }
    
    .question-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .question-icon {
        align-self: flex-start;
    }
    
    .question-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .answer-card {
        margin-right: 0;
    }
    
    .answer-content {
        margin-right: 0;
    }
    
    .answer-form-actions {
        flex-direction: column;
    }
    
    .answer-form-actions .reply-btn,
    .answer-form-actions .cancel-btn {
        width: 100%;
        justify-content: center;
    }
    
    .nav-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 15px !important; /* padding נכון למסכים קטנים */
        position: relative !important; /* וידוא שהתפריט יחסי לזה */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* כפתור המבורגר - מוצג במסכים קטנים */
    .hamburger-btn {
        display: flex !important;
        margin: 0 !important; /* הסרת margin */
        padding: 5px !important; /* padding נכון */
        z-index: 1001 !important; /* מעל התפריט */
        width: 30px !important;
        height: 30px !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important; /* וידוא שהעכבר משתנה */
        pointer-events: auto !important; /* מאפשר לחיצות */
        position: relative !important; /* וידוא שהכפתור במיקום נכון */
    }
    
    /* טקסט גרסת אלפא - במסכים קטנים */
    .alpha-version-text {
        font-size: 11px !important;
        left: 10px !important;
        position: absolute !important;
    }
    
    html[dir="ltr"] .alpha-version-text {
        left: auto !important;
        right: 10px !important;
    }
    
    /* תפריט נפתח - מוסתר כברירת מחדל */
    .nav-links {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: 0 !important;
        background: var(--white) !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease, padding 0.3s ease !important;
        z-index: 1000 !important;
        display: flex !important; /* וידוא שהתפריט מוצג */
        margin: 0 !important; /* הסרת margin */
        width: 100% !important; /* רוחב מלא */
        box-sizing: border-box !important; /* כולל padding בגודל */
        min-width: 0 !important; /* מניעת overflow */
        max-width: 100vw !important; /* מניעת חיתוך */
        pointer-events: none !important; /* מונע לחיצות כשהתפריט סגור */
    }
    
    .nav-links.active {
        max-height: 70vh !important; /* גובה מקסימלי של 70% מגובה המסך */
        overflow-y: auto !important; /* גלילה אנכית */
        overflow-x: hidden !important; /* ללא גלילה אופקית */
        padding: 10px 0 !important;
        -webkit-overflow-scrolling: touch !important; /* גלילה חלקה ב-iOS */
        pointer-events: auto !important; /* מאפשר לחיצות כשהתפריט פתוח */
    }
    
    /* עיצוב scrollbar לתפריט הגלילה */
    .nav-links.active::-webkit-scrollbar {
        width: 8px;
    }
    
    .nav-links.active::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .nav-links.active::-webkit-scrollbar-thumb {
        background: var(--sage-green);
        border-radius: 4px;
    }
    
    .nav-links.active::-webkit-scrollbar-thumb:hover {
        background: #7a8a6a;
    }
    
    /* במסך קטן: הסתרת האווטאר, הצגת אפשרויות הפרופיל ישירות בתפריט ההמבורגר (הסתרת user-info מוגדרת למטה) */
    .nav-links .profile-menu-container {
        display: none !important;
    }
    
    /* קו מפריד מתחת לדגלי השפה בתפריט המבורגר */
    .nav-links .nav-language-switch {
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
    }
    
    /* הצגת אפשרויות פרופיל ויציאה בתפריט המבורגר רק כשהמשתמש מחובר (נשלט ע"י class על body) */
    body.user-logged-in .nav-links .hamburger-profile-options {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: none !important;
    }
    body:not(.user-logged-in) .nav-links .hamburger-profile-options {
        display: none !important;
    }
    body.user-logged-in .nav-links #logout-btn,
    body.user-logged-in .nav-links .user-info {
        display: block !important;
    }
    body:not(.user-logged-in) .nav-links #logout-btn,
    body:not(.user-logged-in) .nav-links .user-info {
        display: none !important;
    }
    
    .nav-links .hamburger-profile-options .profile-menu-item {
        width: 100% !important;
        padding: 15px 20px !important;
        text-align: right !important;
        border-bottom: 1px solid #eee !important;
        display: block !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        max-width: 100% !important;
        font-size: 14px !important;
        color: #333 !important;
        background: none !important;
        cursor: pointer !important;
    }
    
    html[dir="ltr"] .nav-links .hamburger-profile-options .profile-menu-item {
        text-align: left !important;
    }
    
    /* אנגלית (LTR): הצמדת כל פריטי תפריט ההמבורגר לצד שמאל */
    html[dir="ltr"] .nav-links .nav-link,
    html[dir="ltr"] .nav-links .nav-btn,
    html[dir="ltr"] .nav-links .user-info,
    html[dir="ltr"] .nav-links .avatar-btn {
        text-align: left !important;
    }
    html[dir="ltr"] .nav-links .nav-language-switch {
        justify-content: flex-start !important;
    }
    
    .nav-links .hamburger-profile-options .profile-menu-item:hover {
        background: var(--sage-green) !important;
        color: var(--white) !important;
    }
    
    .nav-links .nav-link,
    .nav-links .nav-btn,
    .nav-links .user-info,
    .nav-links .avatar-btn {
        width: 100% !important;
        padding: 15px 20px !important;
        text-align: right !important;
        border-bottom: 1px solid #eee !important;
        display: block !important;
        flex-shrink: 0 !important; /* מונע כיווץ של הפריטים */
        box-sizing: border-box !important; /* כולל padding בגודל */
        margin: 0 !important; /* הסרת margin */
        max-width: 100% !important; /* מניעת overflow */
    }
    
    /* "שלום, שם המשתמש" בשורה הראשונה בתפריט המבורגר (לפני דף הבית) */
    .nav-links #user-info,
    .nav-links .user-info {
        order: -1 !important;
    }
    
    .nav-links .nav-link:last-child,
    .nav-links .nav-btn:last-child {
        border-bottom: none;
    }
    
    .nav-links .nav-link:hover {
        background: var(--sage-green);
        color: var(--white);
    }
    
    .welcome-content {
        flex-direction: column;
    }
    
    .welcome-section,
    .login-section {
        float: none;
        max-width: 100%;
        width: 100%;
    }
    
    .intro-text-section {
        float: none;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
    
    .home-layout-container {
        flex-direction: column !important;
    }
    
    .home-divider {
        display: none !important;
    }
    
    .home-left-section {
        flex: 1 1 100% !important;
        position: static !important;
        width: 100%;
    }
    
    .home-right-section {
        flex: 1 1 100% !important;
        position: static !important;
        width: 100%;
    }
    
    .page-links-section {
        grid-column: 1 / -1 !important; /* תופס את כל השורה במסכים קטנים */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .page-link-box {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* סידור הכפתורים ב-3 שורות: 2+2+1 */
    /* שורה 1: מתכון חדש, ספר המתכונים */
    .page-links-section .page-link-box:nth-child(2),
    .page-links-section .page-link-box:nth-child(3) {
        order: 1;
    }
    
    /* שורה 2: המועדון, מחשבונים */
    .page-links-section .page-link-box:nth-child(4),
    .page-links-section .page-link-box:nth-child(5) {
        order: 2;
    }
    
    /* שורה 3: מדריך למשתמש */
    .page-links-section .page-link-box:nth-child(1) {
        order: 3;
        grid-column: 1 / -1; /* תופס את כל הרוחב בשורה השלישית */
    }
    
    .login-boxes-container {
        flex-direction: column;
    }
    
    .recipe-header-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .recipe-actions {
        position: static;
        flex-direction: row;
        margin-top: 10px;
    }
    
    .form-buttons {
        flex-direction: column;
    }
    
    .form-buttons-left {
        flex-direction: column;
        width: 100%;
    }
    
    .form-buttons-left button,
    .clear-form-btn {
        width: 100%;
    }
    
    .container {
        padding: 10px;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .filter-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    header {
        padding: 10px;
    }
    
    .welcome-box,
    .login-box-separate {
        padding: 15px;
    }
    
    .welcome-title {
        font-size: 1.8em;
    }
    
    .recipe-card {
        padding: 15px;
    }
    
    .filter-buttons {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .filter-buttons .category-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    
    .filter-btn {
        min-width: 0 !important;
        font-size: 0.6em !important;
        padding: 4px 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }
    
    .filter-buttons .filter-btn {
        min-width: 0 !important;
        font-size: 0.6em !important;
        padding: 4px 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }
    
    .category-row {
        flex-wrap: wrap;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    
    /* סידור קטגוריות ב-3 עמודות במסך קטן (768px) */
    #categories-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* הפיכת כל ה-divs הפנימיים ל-contents כדי שה-category-row יהיו grid items */
    #categories-container > div {
        display: contents !important;
        width: auto !important;
        max-width: none !important;
    }
    
    /* כל category-row הופך ל-grid item */
    #categories-container .category-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #categories-container .filter-btn {
        width: 100% !important;
        flex: unset !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 5px !important;
        font-size: 0.6em !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
        text-align: center !important;
        overflow: hidden !important;
    }
    
    /* מניעת גלילה אופקית בכל הרמות */
    #categories-container,
    #categories-container > div,
    #categories-container .category-row {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .modal-content {
        width: 95%;
        max-width: 95%;
        padding: 20px;
    }
    
    .recipe-actions {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .recipe-link-btn,
    .edit-btn,
    .delete-btn,
    .share-btn {
        min-width: 80px;
        font-size: 0.8em;
        padding: 5px 10px;
    }
    
    /* Ensure "Open Recipe" button is always displayed on personal recipe cards */
    .personal-recipe-card .recipe-link-btn {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    /* הסתרת שדה הטקסט ושדה התמונה בכרטיסי המתכונים במסכים בינוניים */
    .recipe-text-frame,
    .recipe-images-frame {
        display: none !important;
    }
    
    /* הסתרת תוכן ותמונה במתכונים אישיים במסכים בינוניים */
    /* שמירה על גובה מינימלי של כרטיסי המתכונים */
    .recipe-card-top-section {
        min-height: 210px;
    }
    
    /* רספונסיביות לטבלת המתכונים המובילים */
    .top-recipes-table {
        font-size: 0.85em;
    }
    
    .top-recipes-table th,
    .top-recipes-table td {
        padding: 8px 10px;
    }
    
    .top-recipes-table .url-cell {
        max-width: 300px;
        min-width: 200px;
    }
    
    .top-recipes-table .publisher-cell,
    .top-recipes-table .source-cell {
        max-width: 80px;
        min-width: 60px;
        font-size: 0.9em;
    }
    
    .top-recipes-table .share-count-cell {
        width: 100px;
        font-size: 0.9em;
    }
    
    /* לוח המודעות: מסגרת עד 250×350; במסכים צרים הרוחב מותאם לרוחב המסך */
    .club-recommendation-card,
    .club-announcement-card {
        width: min(250px, 100%) !important;
        max-width: 100% !important;
        height: 350px !important;
        margin: 0 auto !important;
    }
    
    /* הקטנת רוחב הקונטיינר של הכרטיסים */
    .club-recommendations-container {
        grid-template-columns: 1fr !important; /* טור אחד במסכים קטנים */
        justify-items: center !important; /* מרכוז הכרטיסים */
    }
    
    /* הסתרת תמונת win1 במסכים קטנים */
    .win1-image-container {
        display: none !important;
    }
    
    /* הסתרת תיבות הסטטיסטיקה (מספר החברים ומספר המתכונים) במסכים קטנים */
    .club-statistics-container .stat-item {
        display: none !important;
    }
}

/* Extra small screens - 480px and below */
@media (max-width: 480px) {
    
    .welcome-title {
        font-size: 1.5em;
    }
    
    .nav-link {
        font-size: 0.9em;
        padding: 8px 12px;
    }
    
    .filter-btn {
        min-width: 100px;
        font-size: 0.85em;
        padding: 6px 10px;
    }
    
    /* הגבלת מספר הטורים ל-3 במסכים קטנים כשממויין לפי א"ב */
    .filter-buttons {
        flex-wrap: wrap !important;
    }
    
    .filter-buttons .category-row {
        flex: 0 0 calc(33.333% - 10px) !important; /* 3 טורים עם gap */
        max-width: calc(33.333% - 10px) !important;
    }
    
    /* סידור קטגוריות בעמוד הוספת מתכון חדש ב-3 עמודות במסכים קטנים */
    #categories-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important; /* הקטנת gap עוד יותר */
        flex-direction: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important; /* מניעת גלילה */
        padding: 0 !important; /* הסרת padding */
        margin: 0 !important; /* הסרת margin */
    }
    
    /* הפיכת כל ה-divs הפנימיים ל-contents כדי שה-category-row יהיו grid items */
    #categories-container > div {
        display: contents !important; /* הופך את ה-div הפנימי לשקוף */
        width: auto !important;
        max-width: none !important;
    }
    
    /* כל category-row הופך ל-grid item */
    #categories-container .category-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important; /* הקטנת gap עוד יותר */
        width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important; /* מניעת overflow */
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    #categories-container .filter-btn {
        width: 100% !important;
        flex: unset !important;
        min-width: 0 !important; /* הסרת min-width */
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px 5px !important; /* הקטנת padding עוד יותר */
        font-size: 0.6em !important; /* הקטנת גודל טקסט עוד יותר */
        white-space: normal !important; /* אפשר לטקסט לחזור שורה */
        word-wrap: break-word !important; /* שבירת מילים ארוכות */
        overflow-wrap: break-word !important;
        line-height: 1.2 !important; /* הקטנת line-height */
        text-align: center !important;
        overflow: hidden !important; /* מניעת overflow */
    }
    
    /* מניעת גלילה אופקית בכל הרמות */
    #categories-container,
    #categories-container > div,
    #categories-container .category-row {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* הסתרת אפשרות המיון במסכים קטנים */
    .filter-section h2 input[type="radio"],
    .filter-section h2 label,
    .filter-section h2 span {
        display: none !important;
    }
    
    .filter-section h2 {
        margin-bottom: 10px !important;
    }
    
    /* הסתרת אפשרות המיון במסכים קטנים בעמוד הוספת מתכון חדש */
    /* הסתרת כפתורי הרדיו */
    h2 input[type="radio"][name="sort-categories"] {
        display: none !important;
    }
    
    /* הסתרת ה-labels של כפתורי הרדיו */
    h2 label:has(input[name="sort-categories"]) {
        display: none !important;
    }
    
    /* הסתרת כל ה-spans ב-h2 חוץ מה-indicator - כולל "מיין לפי:" */
    h2 span:not(.alphabetical-sort-indicator) {
        display: none !important;
    }
    
    /* הסתרת הטקסט "מיין לפי:" ספציפית - אם יש span עם margin-right: 100px או margin-left: 100px */
    h2 span[style*="margin-right: 100px"],
    h2 span[style*="margin-left: 100px"] {
        display: none !important;
    }
    
    /* הצגת הטקסט "(מסודר לפי א"ב)" במסכים קטנים בלבד */
    .alphabetical-sort-indicator {
        display: inline !important;
    }
    
    /* הצגת הטקסט "(מסודר לפי א"ב)" בטופסי עריכה במסכים קטנים */
    .alphabetical-sort-indicator-edit {
        display: inline !important;
    }
    
    /* סידור קטגוריות בטופסי עריכה ב-2 טורים במסכים קטנים */
    .edit-categories-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        max-height: none !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        align-content: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .edit-categories-container .edit-category-btn,
    .edit-categories-container .edit-personal-category-btn {
        flex: unset !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        padding: 4px 5px !important;
        font-size: 0.6em !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
        text-align: center !important;
        overflow: hidden !important;
    }
    
    #edit-personal-categories-container,
    #edit-personal-categories-container,
    #edit-personal-categories-container-personal {
        display: block !important;
        gap: 5px !important;
        max-height: none !important;
        margin-top: 10px !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Hide personal categories container if empty */
    #edit-personal-categories-container:empty,
    #edit-personal-categories-container-personal:empty {
        display: none !important;
    }
    
    /* גם עבור הגרסה האנגלית */
    body[dir="ltr"] .edit-categories-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* בטופסי עריכה, במסכים קטנים, הסתר את ה-div שמכיל את שתי העמודות והצג רק עמודה אחת */
    .form-group > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .form-group > div[style*="display: flex"] > .edit-categories-container:first-child {
        margin-bottom: 0 !important;
    }
    
    .form-group > div[style*="display: flex"] > #edit-personal-categories-container,
    .form-group > div[style*="display: flex"] > #edit-personal-categories-container-personal {
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    
    /* העברת שדה קטגוריות נבחרות מתחת לשדה חיפוש חופשי במסכים קטנים */
    /* שינוי סדר השדות - עמודה אחת */
    .search-section > div:first-child {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;
    }
    
    /* כל עמודה - רוחב מלא במסכים קטנים */
    .search-section > div:first-child > div[style*="flex-direction: column"] {
        width: 100% !important;
        flex: unset !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    /* כפתור נקה - מיקום במסכים קטנים */
    .search-section > div:last-child[style*="justify-content: flex-end"] {
        justify-content: flex-start !important;
        margin-top: 15px !important;
    }
    
    /* גרסה אנגלית - כפתור Clear */
    body[dir="ltr"] .search-section > div:last-child[style*="justify-content: flex-end"] {
        justify-content: flex-end !important;
    }
    
    .recipe-link-btn,
    .edit-btn,
    .delete-btn,
    .share-btn {
        min-width: 70px;
        font-size: 0.75em;
        padding: 4px 8px;
    }
    
    /* Ensure "Open Recipe" button is always displayed on personal recipe cards */
    .personal-recipe-card .recipe-link-btn {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    .container {
        padding: 5px;
    }
    
    section {
        padding: 15px;
    }
    
    /* הסתרת שדה הטקסט ושדה התמונה בכרטיסי המתכונים במסכים קטנים */
    .recipe-text-frame,
    .recipe-images-frame {
        display: none !important;
    }
    
    /* הסתרת תוכן ותמונה במתכונים אישיים במסכים קטנים */
    /* שמירה על גובה מינימלי של כרטיסי המתכונים */
    .recipe-card-top-section {
        min-height: 210px;
    }
    
    /* רספונסיביות לטבלת המתכונים המובילים */
    .top-recipes-table {
        font-size: 0.8em;
    }
    
    .top-recipes-table th,
    .top-recipes-table td {
        padding: 6px 8px;
    }
    
    .top-recipes-table .url-cell {
        max-width: 250px;
        min-width: 150px;
    }
    
    .top-recipes-table .publisher-cell,
    .top-recipes-table .source-cell {
        max-width: 70px;
        min-width: 50px;
        font-size: 0.85em;
    }
    
    .top-recipes-table .share-count-cell {
        width: 80px;
        font-size: 0.85em;
    }
    
    /* רספונסיביות לכרטיסי ההמלצות */
    .club-recommendation-card {
        padding: 15px;
    }
    
    .club-recommendation-name {
        font-size: 1.1em;
    }
}

/* Media Query למסכים בינוניים-גדולים (עד 1400px) */
@media (max-width: 1400px) {
    /* הסתרת שדה הטקסט ושדה התמונה בכרטיסי המתכונים במסכים בינוניים-גדולים */
    .recipe-text-frame,
    .recipe-images-frame {
        display: none !important;
    }
    
    /* הסתרת תוכן ותמונה במתכונים אישיים במסכים בינוניים-גדולים */
    /* שמירה על גובה מינימלי של כרטיסי המתכונים */
    .recipe-card-top-section {
        min-height: 210px;
    }
    
    /* רספונסיביות לטבלת המתכונים המובילים */
    .top-recipes-table {
        font-size: 0.85em;
    }
    
    .top-recipes-table th,
    .top-recipes-table td {
        padding: 8px 10px;
    }
    
    .top-recipes-table .url-cell {
        max-width: 300px;
        min-width: 200px;
    }
    
    .top-recipes-table .publisher-cell,
    .top-recipes-table .source-cell {
        max-width: 80px;
        min-width: 60px;
        font-size: 0.9em;
    }
    
    .top-recipes-table .share-count-cell {
        width: 100px;
        font-size: 0.9em;
    }
}

/* Media Query למסכים בינוניים (עד 1024px) */
@media (max-width: 1024px) {
    /* הסתרת שדה הטקסט ושדה התמונה בכרטיסי המתכונים במסכים בינוניים */
    .recipe-text-frame,
    .recipe-images-frame {
        display: none !important;
    }
    
    /* הסתרת תוכן ותמונה במתכונים אישיים במסכים בינוניים */
    /* שמירה על גובה מינימלי של כרטיסי המתכונים */
    .recipe-card-top-section {
        min-height: 210px;
    }
    
    /* רספונסיביות לטבלת המתכונים המובילים */
    .top-recipes-table {
        font-size: 0.8em;
    }
    
    .top-recipes-table th,
    .top-recipes-table td {
        padding: 6px 8px;
    }
    
    .top-recipes-table .url-cell {
        max-width: 250px;
        min-width: 150px;
    }
    
    .top-recipes-table .publisher-cell,
    .top-recipes-table .source-cell {
        max-width: 70px;
        min-width: 50px;
        font-size: 0.85em;
    }
    
    .top-recipes-table .share-count-cell {
        width: 80px;
        font-size: 0.85em;
    }
    
    /* רספונסיביות לכרטיסי ההמלצות */
    .club-recommendation-card {
        padding: 15px;
    }
    
    .club-recommendation-name {
        font-size: 1.1em;
    }
}


/* Profile Menu Dropdown */
.profile-menu-container {
    position: relative;
    display: inline-block;
}

.profile-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 200px;
    margin-top: 5px;
    display: none;
}

.profile-menu-item {
    display: block;
    width: 100%;
    padding: 12px 15px;
    text-align: right;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.profile-menu-item:last-child {
    border-bottom: none;
}

.profile-menu-item:hover {
    background-color: #f5f5f5;
}

.profile-menu-item:active {
    background-color: #e0e0e0;
}

/* אייקוני דגלים ליד "עדכון שפה" בתפריט - גודל 14x20 */
.profile-menu-flag {
    width: 14px !important;
    height: 20px !important;
    max-width: 14px !important;
    max-height: 20px !important;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 2px;
    flex-shrink: 0;
}

html[dir="ltr"] .profile-menu-flag {
    margin-right: 2px;
    margin-left: 3px;
}

/* וידוא שהדגלים נשארים 14x20 גם בתפריט ההמבורגר והתפריט הנפתח */
.nav-links .profile-menu-flag,
.profile-dropdown-menu .profile-menu-flag,
.hamburger-profile-options .profile-menu-flag {
    width: 14px !important;
    height: 20px !important;
    max-width: 14px !important;
    max-height: 20px !important;
}

/* תפריט המבורגר - אפשרויות פרופיל (מוצג רק במסכים קטנים במקום האווטאר) */
.hamburger-profile-options {
    display: none;
}

@media (min-width: 769px) {
    .hamburger-profile-options {
        display: none !important;
    }
}

html[dir="ltr"] .profile-menu-item {
    text-align: left;
}

html[dir="ltr"] .profile-dropdown-menu {
    right: auto;
    left: 0;
}