/*
Theme Name: Y.R Furniture
Theme URI: https://your-website.com
Author: mps
Author URI: https://your-website.com
Description: חנות י.ר רהיטים
Version: 1.0
Text Domain: yr-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;600;700&display=swap');

/* --- הגדרות כלליות --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Assistant', sans-serif;
    direction: rtl;
    background-color: #f4f4f4;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- חלק עליון (Header) --- */
.main-header {
    height: 33vh; 
    background-image: url('images/logo-banner.jpg');
    background-size: cover;
    background-position: center bottom;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 25px;
}

.header-content {
    width: 40%;
    max-width: 500px;
}

.search-container {
    display: flex;
    width: 100%;
}

.search-container input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 0 5px 5px 0;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.search-container button {
    padding: 12px 15px;
    border: none;
    background-color: #333;
    color: white;
    cursor: pointer;
    border-radius: 5px 0 0 5px;
}

.header-icons {
    position: absolute;
    top: 25px;
    right: 5%;
    display: flex;
}

.header-icons .icon-link {
    font-size: 22px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8);
    height: 45px;
    width: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    transition: background-color 0.3s;
}

.header-icons .icon-link:hover {
    background-color: #fff;
}


/* --- תפריט ניווט דביק --- */
.main-nav {
    background-color: #333;
    color: white;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 9999;
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.main-nav ul li {
    margin: 0 20px;
    position: relative;
}

.main-nav ul li a {
    font-weight: 600;
    transition: color 0.3s;
    display: block;
}

.main-nav ul li a:hover {
    color: #f0c14b;
}

/* --- תפריט נפתח (רמה ראשונה) --- */
.main-nav ul .dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #444;
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
    min-width: 220px;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.main-nav ul .dropdown:hover > .dropdown-menu {
    display: flex;
}

.main-nav ul .dropdown-menu li {
    margin: 0;
    width: 100%;
}

.main-nav ul .dropdown-menu li a {
    padding: 10px 15px;
    display: block;
}

.main-nav ul .dropdown-menu li a:hover {
    background-color: #555;
    color: white;
}

/* --- תפריט משנה נפתח (רמה שנייה) --- */
.main-nav ul .dropdown-submenu {
    position: relative;
}

.main-nav ul .dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100%;
    border-radius: 5px;
    display: none;
}

.main-nav ul .dropdown-submenu:hover > .dropdown-menu {
    display: flex;
}

.submenu-icon {
    float: left;
    margin-top: 4px;
    font-size: 12px;
}


/* --- סליידר תמונות עם אנימציה --- */
/* --- סליידר תמונות --- */
.hero-slider {
    width: 100%;
    height: 60vh;
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
    /* השארנו פה רק את אנימציית הצל, בלי ההגדלה */
    transition: box-shadow 0.5s ease;
}

.hero-slider:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    z-index: 10;
}

.slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: calc(100% / 3);
    height: 100%;
    background-size: cover;
    background-position: center center;
    flex-shrink: 0;
    /* הוספנו פה אנימציה חלקה לתמונה עצמה */
    transition: transform 0.5s ease;
}

/* כשיש ריחוף על הסליידר - נגדיל רק את השקופיות (התמונות) */
.hero-slider:hover .slide {
    transform: scale(1.02);
}
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 24px;
    padding: 15px;
    cursor: pointer;
    z-index: 10;
}

.prev-btn { right: 15px; } 
.next-btn { left: 15px; }

/* --- רשת קטגוריות בעלת 4 טורים --- */
.category-grid {
    padding: 50px 5%;
    text-align: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 עמודות במסך רגיל */
    gap: 20px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    height: 250px; /* קיבוע גובה אחיד לקוביות */
}

.grid-item:hover {
    transform: scale(1.05);
}

.grid-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
}

/* --- פוטר (חלק תחתון) --- */
.main-footer {
    background-color: #232f3e;
    color: #ddd;
    text-align: center;
    padding: 20px;
}

.footer-links {
    margin-bottom: 10px;
}

.footer-links a {
    margin: 0 10px;
}

.footer-links span {
    color: #555;
}

/* --- התאמה למובייל ולטאבלט --- */
@media (max-width: 992px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 עמודות בטאבלט */
    }
}

@media (max-width: 768px) {
    .main-header {
        height: auto;
        padding-bottom: 20px;
        flex-direction: column;
        gap: 20px;
    }
    .header-content {
        width: 90%;
        order: 2;
    }
    .header-icons {
        position: static;
        width: 100%;
        justify-content: flex-end;
        padding: 0 5%;
        order: 1;
    }
    .hero-slider {
        height: 40vh;
    }
    .main-nav ul {
        flex-direction: column;
        gap: 10px;
    }
    .main-nav ul .dropdown-submenu .dropdown-menu {
        position: static;
        box-shadow: none;
        padding-right: 15px;
    }
    .grid-container {
        grid-template-columns: 1fr; /* עמודה אחת במובייל */
    }
}


/* ========================================= */
/* --- עיצוב עמוד קטגוריה (Category Page) --- */
/* ========================================= */

.category-main {
    padding: 20px 5%;
    max-width: 1400px;
    margin: 0 auto;
}

.breadcrumbs {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.breadcrumbs a {
    color: #333;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.category-layout {
    display: grid;
    grid-template-columns: 250px 1fr; /* עמודה ימנית 250 פיקסלים, עמודה שמאלית תופסת את השאר */
    gap: 30px;
}

/* --- פילטרים מצד ימין --- */
.sidebar-filters {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    align-self: start;
}

.sidebar-filters h3 {
    margin-bottom: 20px;
    border-bottom: 2px solid #f0c14b;
    padding-bottom: 10px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group h4 {
    margin-bottom: 10px;
    font-size: 16px;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    color: #444;
}

.price-slider {
    width: 100%;
}

.price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* --- אזור המוצרים --- */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.sort-box select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
}

/* גריד מוצרים (בתוך הקטגוריה) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 מוצרים בשורה במסך רגיל */
    gap: 20px;
}

.product-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.product-image {
    height: 220px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-info {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-info h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
}

.product-price {
    font-size: 20px;
    font-weight: bold;
    color: #d32f2f;
    margin-bottom: 15px;
    margin-top: auto; /* דוחף את המחיר והכפתור לתחתית הכרטיסייה */
}

.add-to-cart-btn {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 12px;
    width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    transition: background-color 0.3s;
}

.add-to-cart-btn:hover {
    background-color: #f0c14b;
    color: #333;
}

/* התאמה למובייל לעמוד קטגוריה */
@media (max-width: 992px) {
    .category-layout {
        grid-template-columns: 1fr; /* הפילטרים קופצים מעל המוצרים */
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 מוצרים בשורה */
    }
}

@media (max-width: 576px) {
    .products-grid {
        grid-template-columns: 1fr; /* מוצר אחד בשורה במובייל */
    }
    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}


.inner-page .main-header {
    height: 33vh !important;
    min-height: 250px !important; /* מוודא שהתמונה לא תימעך במסכים רחבים מדי */
    padding-top: 25px !important;
    background-position: center bottom !important; /* שינינו כאן מ-center ל-bottom */
}

.inner-page .header-icons {
    top: 25px !important;
}

/* התאמה למובייל שלא ייחתך במסכים קטנים */
@media (max-width: 768px) {
    .inner-page .main-header {
        height: auto !important;
        min-height: 200px !important;
    }
}
.product-main {
    padding: 20px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* החלף את הכלל הקיים בזה */
.single-product-container {
    display: grid;
    /* במקום 1fr 1fr, נותנים לתמונה יותר מקום */
    grid-template-columns: 1.5fr 1fr; 
    gap: 50px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    /* הרחבנו את כל הקונטיינר */
    max-width: 1400px;
}
/* --- צד ימין: גלריית תמונות --- */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* החלף את הכלל הקיים בזה */
.main-image-box {
    width: 100%;
    height: 550px; /* הגדלנו את הגובה */
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    cursor: crosshair;
    position: relative;
}
.main-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnails {
    display: flex;
    gap: 10px;
}

.thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.3s;
}

.thumb:hover, .thumb.active {
    opacity: 1;
    border-color: #f0c14b;
}

/* --- צד שמאל: פרטי המוצר --- */
.product-details {
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 5px;
}

.product-sku {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
}

.product-price {
    font-size: 36px;
    color: #d32f2f;
    font-weight: bold;
    margin-bottom: 25px;
}

.product-description {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.product-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

.option-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.option-group select {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 15px;
}

.product-actions {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px;
}

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

.quantity-box input {
    width: 70px;
    padding: 12px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-add-to-cart-large {
    flex-grow: 1;
    max-width: 300px;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-add-to-cart-large:hover {
    background-color: #f0c14b;
    color: #333;
    transform: translateY(-2px);
}

.product-meta {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
}

.product-meta p {
    margin-bottom: 8px;
}

.product-meta i {
    color: #f0c14b;
    margin-left: 5px;
    width: 20px;
    text-align: center;
}

/* --- התאמה למובייל לעמוד מוצר --- */
@media (max-width: 768px) {
    .single-product-container {
        grid-template-columns: 1fr; /* תמונה עולה מעל הטקסט */
        gap: 30px;
        padding: 15px;
    }
    
    .product-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-add-to-cart-large, .option-group select {
        max-width: 100%;
    }
}

/* --- תיקון ל-Header של עמוד פנימי (שלא יסתיר את הלוגו) --- */
.inner-page .main-header {
    height: 25vh;
    padding-top: 10px; /* העלנו את החיפוש טיפה למעלה */
    background-position: center top; /* מוודא שהחלק העליון של הלוגו ייראה */
}

.inner-page .header-icons {
    top: 10px; /* מיישר את האייקונים עם החיפוש */
}

/* --- עיצוב קוביות בחירת צבע --- */
.color-swatches {
    display: flex;
    gap: 15px;
    margin-top: 5px;
}

.color-swatch {
    width: 35px;
    height: 35px;
    border-radius: 5px; /* אפשר לשנות ל-50% בשביל עיגולים */
    cursor: pointer;
    border: 2px solid #ccc;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* כשהצבע נבחר או כשמרחפים עליו */
.color-swatch:hover, .color-swatch.active {
    border-color: #f0c14b;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* --- עיצוב הגדלת תמונה (זום) בריחוף --- */
.main-image-box {
    width: 100%;
    height: 450px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* חותך את התמונה כדי שלא תצא מהמסגרת כשהיא גדלה */
    cursor: crosshair; /* משנה את העכבר לסמן של מיקוד */
    position: relative;
}

.main-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease; /* כניסה חלקה של הזום */
    transform-origin: center center; /* ממרכז את התמונה כברירת מחדל */
}

/* רק בריחוף התמונה תגדל פי 2 (ה-JS יזיז אותה) */
.main-image-box:hover img {
    transform: scale(2);
}

/* ========================================= */
/* --- עיצוב עמוד עגלת קניות (Cart Page) --- */
/* ========================================= */

.cart-main {
    padding: 40px 5%;
}

.cart-container {
    max-width: 1300px;
    margin: 0 auto;
}

.cart-container h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 36px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 לטבלה, 1/3 לסיכום */
    gap: 40px;
}

/* --- טבלת המוצרים --- */
.cart-items table {
    width: 100%;
    border-collapse: collapse;
}

.cart-items thead {
    background-color: #f9f9f9;
    border-bottom: 2px solid #eee;
}

.cart-items th {
    padding: 15px;
    text-align: right;
    font-weight: 600;
}

.cart-items td {
    padding: 20px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.cart-items td:first-child {
    padding-right: 0;
}

.cart-items img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
}

.cart-items td a {
    color: #333;
    font-weight: bold;
    text-decoration: none;
    display: block;
}
.cart-items td a:hover {
    color: #f0c14b;
}

.cart-items td small {
    color: #888;
    font-size: 13px;
}

.cart-items input[type="number"] {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.remove-btn {
    background: none;
    border: none;
    color: #d32f2f;
    font-size: 18px;
    cursor: pointer;
}

/* --- סיכום הזמנה --- */
.order-summary {
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #eee;
    align-self: start; /* נשאר דבוק למעלה */
}

.order-summary h2 {
    margin-bottom: 20px;
    border-bottom: 2px solid #f0c14b;
    padding-bottom: 10px;
}

.summary-row, .summary-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 16px;
}

.summary-total {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    margin-top: 15px;
}

.coupon-box {
    display: flex;
    margin-top: 30px;
}

.coupon-box input {
    flex-grow: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 4px 4px 0;
}

.coupon-box button {
    padding: 12px 15px;
    border: 1px solid #333;
    background-color: #333;
    color: white;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
}

.btn-checkout {
    width: 100%;
    padding: 15px;
    background-color: #d32f2f;
    color: white;
    border: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn-checkout:hover {
    background-color: #b71c1c;
}

/* התאמה למובייל לעמוד עגלה */
@media (max-width: 992px) {
    .cart-layout {
        grid-template-columns: 1fr; /* סיכום ההזמנה יורד מתחת לטבלה */
    }
}


/* ========================================= */
/* --- טפסים כלליים (משמש גם קופה וגם התחברות) --- */
/* ========================================= */

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.3s;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: #f0c14b;
    outline: none;
    box-shadow: 0 0 5px rgba(240, 193, 75, 0.3);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

/* כפתורים כלליים לטפסים */
.btn-primary, .btn-secondary {
    padding: 15px 25px;
    border: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}

.btn-primary {
    background-color: #333;
    color: #fff;
}

.btn-primary:hover {
    background-color: #f0c14b;
    color: #333;
}

.btn-secondary {
    background-color: #fff;
    color: #333;
    border: 2px solid #333;
}

.btn-secondary:hover {
    background-color: #333;
    color: #fff;
}

/* ========================================= */
/* --- עיצוב עמוד התחברות / הרשמה --- */
/* ========================================= */

.auth-main {
    padding: 60px 5%;
}

.auth-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 50px;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.auth-divider {
    background-color: #eee;
    width: 2px;
    height: 100%;
}

.auth-box h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #333;
}

.auth-box p {
    color: #666;
    margin-bottom: 30px;
    font-size: 15px;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.forgot-password {
    color: #666;
    font-size: 14px;
    text-decoration: underline;
}

.forgot-password:hover {
    color: #d32f2f;
}

/* ========================================= */
/* --- עיצוב עמוד קופה (Checkout) --- */
/* ========================================= */

.checkout-main {
    padding: 40px 5%;
}

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

.checkout-container h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 32px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
}

.checkout-section {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.checkout-section h2 {
    font-size: 20px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f0c14b;
}

/* אמצעי תשלום */
.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.payment-method {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

.payment-method:hover, .payment-method.active {
    border-color: #f0c14b;
    background-color: #fdfbf7;
}

.payment-method input[type="radio"] {
    margin-left: 15px;
    transform: scale(1.2);
}

.method-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.method-details strong {
    font-size: 16px;
    color: #333;
}

.method-details span {
    font-size: 13px;
    color: #888;
}

.payment-method i {
    font-size: 24px;
    color: #555;
}

.credit-card-box {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-top: -5px;
    margin-bottom: 15px;
}

/* סיכום קופה צד שמאל */
.checkout-summary {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    align-self: start;
    position: sticky;
    top: 100px;
    border-top: 5px solid #333;
}

.checkout-summary h2 {
    font-size: 20px;
    margin-bottom: 20px;
}

.summary-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.summary-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #eee;
}

.summary-item-info {
    flex-grow: 1;
}

.summary-item-info h4 {
    font-size: 14px;
    color: #333;
    margin-bottom: 3px;
}

.summary-item-info span {
    font-size: 12px;
    color: #888;
}

.summary-item-price {
    font-weight: bold;
    font-size: 15px;
}

.btn-place-order {
    width: 100%;
    padding: 20px;
    background-color: #d32f2f;
    color: white;
    border: none;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.btn-place-order:hover {
    background-color: #b71c1c;
}

.secure-text {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-top: 15px;
}

.secure-text i {
    color: #27ae60;
}

/* ========================================= */
/* --- התאמות למובייל --- */
/* ========================================= */

@media (max-width: 992px) {
    .auth-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .auth-divider {
        width: 100%;
        height: 2px;
    }
    
    .checkout-layout {
        grid-template-columns: 1fr;
    }
    .checkout-summary {
        position: static;
        order: -1; /* מקפיץ את סיכום ההזמנה מעל הטפסים במובייל */
    }
}

@media (max-width: 576px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* --- עיצוב כפתור Google --- */
.social-login {
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    width: 100%;
}

.social-login p {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.btn-google {
    background-color: #fff;
    color: #444;
    border: 1px solid #ccc;
    padding: 12px 20px;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-google i {
    color: #db9437; /* הצבע האדום של גוגל */
    font-size: 20px;
}

.btn-google:hover {
    background-color: #f9f9f9;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    
    /* ======================================================== */
/* התאמת הטפסים של ווקומרס לעיצוב המקורי של התבנית */
/* ======================================================== */

/* אזור ההוספה לסל (כמות + כפתור) */
form.cart {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* שדה הכמות של ווקומרס */
form.cart .quantity input.qty {
    width: 70px;
    padding: 12px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* כפתור הוספה לסל של ווקומרס */
    
/* ======================================================== */
/* התאמת טופס ווקומרס לעיצוב المקורי - גירסה חזקה */
/* ======================================================== */

/* מסדר את אזור ההוספה לסל באותה שורה */
form.cart {
    display: flex !important;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* מסדר את אזור הכמות שייראה כמו העיצוב שלך */
form.cart .quantity {
    display: flex;
    flex-direction: column;
}

/* מוסיף את המילה "כמות:" מעל המספר */
form.cart .quantity::before {
    content: "כמות:";
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
}

/* מסתיר טקסטים מיותרים שווקומרס מייצר */
form.cart .quantity .screen-reader-text {
    display: none;
}

/* מעצב את הריבוע של המספר */
form.cart .quantity input.qty {
    width: 70px !important;
    padding: 12px !important;
    font-size: 16px !important;
    text-align: center;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    box-sizing: border-box;
    height: 45px;
}

/* מעצב את הכפתור "הוספה לסל" שייראה כמו הכפתור השחור הגדול שלך */
form.cart button.single_add_to_cart_button {
    flex-grow: 1;
    max-width: 300px;
    background-color: #333 !important;
    color: #fff !important;
    border: none !important;
    padding: 0 20px !important;
    height: 45px; /* גובה זהה לתיבת הכמות */
    font-size: 18px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    font-family: inherit;
    /* כדי למרכז את הטקסט והאייקון */
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

form.cart button.single_add_to_cart_button:hover {
    background-color: #f0c14b !important;
    color: #333 !important;
    transform: translateY(-2px);
}

/* מזריק את האייקון של עגלת הקניות (FontAwesome) לתוך הכפתור */
form.cart button.single_add_to_cart_button::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f07a"; /* קוד האייקון של העגלה */
    font-size: 18px;
}    
}

/* --- תפריט נפתח (רמה ראשונה) - מותאם לוורדפרס --- */
.main-nav ul .dropdown-menu,
.main-nav ul .sub-menu { /* הוספנו את הקלאס של וורדפרס */
    display: none; 
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #444;
    border-radius: 0 0 5px 5px;
    padding: 10px 0;
    min-width: 220px;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    z-index: 1000; /* הוספתי זד-אינדקס כדי שזה לא יוסתר מתחת לסליידר */
}

/* כשהעכבר מרחף מעל פריט עם תת-תפריט - מותאם לוורדפרס */
.main-nav ul .dropdown:hover > .dropdown-menu,
.main-nav ul .menu-item-has-children:hover > .sub-menu { 
    display: flex;
}

.main-nav ul .dropdown-menu li,
.main-nav ul .sub-menu li {
    margin: 0;
    width: 100%;
}

.main-nav ul .dropdown-menu li a,
.main-nav ul .sub-menu li a {
    padding: 10px 15px;
    display: block;
}

.main-nav ul .dropdown-menu li a:hover,
.main-nav ul .sub-menu li a:hover {
    background-color: #555;
    color: white;
}

/* --- תפריט משנה נפתח (רמה שנייה) - מותאם לוורדפרס --- */
.main-nav ul .dropdown-submenu,
.main-nav ul .sub-menu .menu-item-has-children {
    position: relative;
}

.main-nav ul .dropdown-submenu .dropdown-menu,
.main-nav ul .sub-menu .menu-item-has-children > .sub-menu {
    top: 0;
    right: 100%;
    border-radius: 5px;
    display: none;
}

.main-nav ul .dropdown-submenu:hover > .dropdown-menu,
.main-nav ul .sub-menu .menu-item-has-children:hover > .sub-menu {
    display: flex;
}

/* הוספת חץ קטן לפריטים שיש להם תפריט נפתח */
.main-nav ul .menu-item-has-children > a::after {
    content: '\f078'; /* הקוד של חץ למטה בפונט אווסום */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    margin-right: 8px; /* מרווח קטן מהטקסט ב-RTL */
    vertical-align: middle;
}

/* החץ בתפריט הרמה השנייה מצביע שמאלה (ב-RTL) */
.main-nav ul .sub-menu .menu-item-has-children > a::after {
    content: '\f053'; /* קוד של חץ שמאלה */
    float: left; /* דוחף את החץ לשמאל */
    margin-top: 4px;
}

/* ======================================================== */
/* עגלת קניות י.ר רהיטים - תיקון רוחב הטבלה (בלי לשבור את האתר) */
/* ======================================================== */

/* 1. מוודאים שהקונטיינר מקבל את ה-1300 שלו בצורה מנומסת */
.cart-main {
    width: 100% !important;
    padding: 40px 5% !important;
    box-sizing: border-box !important;
}

.cart-container {
    max-width: 1300px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* הגריד המקורי שלך! */
.cart-layout {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 40px !important;
    align-items: start !important;
}

/* 2. פקודות הקסם נגד מעיכת הטבלה */
.cart-items table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

/* אוסרים על המספרים (מחיר, כמות, סה"כ) לשבור שורה! */
.cart-items td, 
.cart-items th {
    white-space: nowrap !important; /* אומר לטקסט: תישאר בשורה אחת */
    padding: 15px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #eee !important;
    text-align: right !important; /* יישור לימין */
}

/* העמודה של התמונה - קטנה ומדויקת */
.cart-items td:first-child {
    width: 100px !important;
    padding-left: 0 !important;
}
.cart-items img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 5px !important;
}

/* --- פה הפתרון לטקסט המכווץ! --- */
/* עמודה 2 (שם המוצר) מקבלת אישור לשבור שורה, אבל חייבת להיות מינימום 300 פיקסלים */
.cart-items td:nth-child(2) {
    white-space: normal !important; /* פה מותר לשבור שורה */
    min-width: 300px !important; /* זה מה שימתח את השורה וירחיב אותה כמו במקור!! */
}
.cart-items td:nth-child(2) a {
    font-weight: bold !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

/* עמודת כמות */
.cart-items td:nth-child(4) input.qty {
    width: 60px !important;
    padding: 8px !important;
    text-align: center !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
}

/* עמודת פח אשפה */
.cart-items .remove-btn {
    background: transparent !important;
    border: none !important;
    color: #d32f2f !important;
    font-size: 18px !important;
    cursor: pointer !important;
}

/* התאמה למובייל */
@media (max-width: 992px) {
    .cart-layout { grid-template-columns: 1fr !important; }
    .cart-items td:nth-child(2) { min-width: 150px !important; } /* במובייל מרשים לו להתכווץ קצת */
}


/* ======================================================== */
/* התאמת הקופה של ווקומרס לעיצוב הסטטי (י.ר רהיטים) */
/* ======================================================== */

/* שבירת הרוחב לעמוד הקופה שיתאים ל-1300 כמו בעגלה */
.woocommerce-checkout {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
}

/* 1. התאמת השדות של ווקומרס לעיצוב שלך (.form-group) */
.woocommerce-checkout .form-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

.woocommerce-checkout .form-row label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #444 !important;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: #f0c14b !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(240, 193, 75, 0.3) !important;
}

/* סידור השדות חצי-חצי בשורה */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
    width: 48% !important;
    float: right !important; /* RTL */
}
.woocommerce-checkout .form-row-last {
    float: left !important;
}
.woocommerce-checkout .form-row-wide {
    width: 100% !important;
    clear: both !important;
}

/* 2. עיצוב טבלת הסיכום בקופה (בצד שמאל) */
.woocommerce-checkout #order_review table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

.woocommerce-checkout #order_review th,
.woocommerce-checkout #order_review td {
    padding: 15px 0 !important;
    border-bottom: 1px solid #eee !important;
    text-align: right !important;
}

.woocommerce-checkout #order_review tfoot th {
    font-weight: normal !important;
    color: #555 !important;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
    border-bottom: none !important;
    border-top: 1px solid #ddd !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    padding-top: 20px !important;
}

/* 3. אזור התשלום וכפתור "שליחת הזמנה" */
.woocommerce-checkout #payment {
    background: transparent !important;
    border-radius: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    padding: 0 !important;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 20px !important;
}

.woocommerce-checkout #payment ul.payment_methods li {
    list-style: none !important;
    padding: 15px 20px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    margin-bottom: 15px !important;
    transition: all 0.3s !important;
}

/* כפתור אישור ההזמנה (מחליף את .btn-place-order שלך) */
.woocommerce-checkout button#place_order {
    width: 100% !important;
    padding: 20px !important;
    background-color: #d32f2f !important;
    color: white !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: bold !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
    transition: background-color 0.3s !important;
}

.woocommerce-checkout button#place_order:hover {
    background-color: #b71c1c !important;
}

/* התאמה למובייל לעמוד קופה */
@media (max-width: 992px) {
    .checkout-layout {
        grid-template-columns: 1fr !important;
    }
    /* במובייל סיכום ההזמנה עולה למעלה */
    .checkout-summary {
        order: -1 !important;
        position: static !important;
    }
    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
    }
}

/* ======================================================== */
/* עמוד קופה ותשלום - שחרור רוחב והפעלת הגריד המקורי */
/* ======================================================== */

/* 1. הגדרת הרוחב המקורי שלך (בדיוק כמו בעגלה) */
/* ======================================================== */
/* תיקון קריטי: שחרור ההדר והפוטר מהכיווץ של ווקומרס */
/* ======================================================== */

/* 1. איפוס תגית ה-body כדי שההדר והפוטר יתפרסו על 100% מהמסך */
body.woocommerce-checkout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f4f4f4 !important;
}

/* 2. הגבלת הרוחב ל-1300px אך ורק לקונטיינר של התוכן עצמו (כמו בעגלה) */
.checkout-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 40px 5% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.checkout-container {
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    display: block !important;
}

.checkout-container .woocommerce {
    width: 100% !important;
}
/* 2. נטרול ההפרעות של ווקומרס בעמוד הזה */
.checkout-container .woocommerce {
    width: 100% !important;
}

/* 3. הפעלת הגריד המקורי שלך! (טפסים מימין, סיכום משמאל) */
.checkout-layout {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important; /* 60% ימין, 40% שמאל */
    gap: 40px !important;
    align-items: start !important;
}

/* מוודאים שהקופסאות תופסות את כל המקום בגריד */
.checkout-forms-area,
.checkout-summary {
    width: 100% !important;
}

/* 4. עיצוב קופסת הסיכום משמאל (כמו בעיצוב המקורי שלך) */
.checkout-summary {
    background: #fff !important;
    padding: 30px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

/* 5. תיקון להודעת ה"יש לך קופון?" שווקומרס תוקע מעל הטופס */
.woocommerce-form-coupon-toggle {
    margin-bottom: 20px !important;
    background-color: #f9f9f9 !important;
    padding: 15px !important;
    border-radius: 5px !important;
    border: 1px dashed #ccc !important;
}
.woocommerce-form-coupon {
    margin-bottom: 30px !important;
}

/* ======================================================== */
/* עמוד קופה ותשלום - תיקון הדר וכיוונים */
/* ======================================================== */

/* רקע אפור רק לעמוד הקופה */
body.woocommerce-checkout {
    background-color: #f4f4f4 !important;
}

/* הגריד המרכזי של הקופה בלבד (מונע השפעה על ההדר!) */
.custom-yr-checkout {
    max-width: 1300px !important;
    margin: 40px auto !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
    display: block !important; /* חשוב מאוד כדי לא לדרוס אלמנטים חיצוניים */
}

/* סידור ימין-שמאל מדויק */
.yr-checkout-grid {
    display: flex !important;
    flex-direction: row !important; /* תוקן! סיכום בשמאל, טפסים בימין ב-RTL */
    gap: 40px !important;
    align-items: flex-start !important;
}

/* רוחב מדויק לעמודות */
.yr-checkout-right { 
    width: 60% !important; 
}
.yr-checkout-left { 
    width: 40% !important; 
}

/* --- עיצוב הקופסאות הלבנות (Cards) והקו הצהוב --- */
.yr-card {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    border-top: 4px solid #f0c14b !important;
}

.yr-card-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 25px !important;
    text-align: right !important;
}

/* סידור השדות חצי-חצי בשורה */
.woocommerce-checkout .form-row { padding: 0 !important; margin-bottom: 20px !important; }
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 48% !important; float: right !important; clear: none !important; }
.woocommerce-checkout .form-row-last { float: left !important; }
.woocommerce-checkout .form-row-wide { width: 100% !important; clear: both !important; }

/* הסתרת כותרות (לייבלים) בשדות */
.woocommerce-checkout .form-row label { display: none !important; }

/* עיצוב שדות הקלט */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    background: #fff !important;
    box-sizing: border-box !important; /* מונע פריצה מהקופסה */
}

/* --- עיצוב טבלת הסיכום (צד שמאל) --- */
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 15px 0 !important;
    border-bottom: 1px solid #eee !important;
    text-align: right !important;
}

/* תמונת מוצר ושם מתיישרים יפה */
.checkout-img-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    text-align: right !important;
}

.checkout-img-wrap img {
    border-radius: 5px !important;
    border: 1px solid #eee !important;
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
}

/* שורת סה"כ לתשלום */
.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
    font-size: 18px !important;
    font-weight: bold !important;
    border-bottom: none !important;
    padding-top: 20px !important;
}

/* --- אמצעי תשלום (מופרדים מהכפתור!) --- */
#custom-payment-section .payment_methods {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

#custom-payment-section .payment_method {
    list-style: none !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
}

/* מסתיר את כפתור התשלום המקורי בתוך אמצעי התשלום */
#custom-payment-section .place-order { display: none !important; }

/* --- הכפתור האדום שלנו (סיכום הזמנה) --- */
.yr-place-order-btn {
    width: 100% !important;
    padding: 15px !important;
    background-color: #d32f2f !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: 0.3s !important;
    margin-top: 10px !important;
}

.yr-place-order-btn:hover { background-color: #b71c1c !important; }

.secure-badge {
    text-align: center !important;
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 10px !important;
}

/* עיצוב חלונית הקופון */
.woocommerce-form-coupon-toggle {
    margin: 0 auto 20px auto !important;
    max-width: 1300px !important;
    background-color: #fff !important;
    padding: 15px 25px !important;
    border-radius: 8px !important;
    border: 1px dashed #ccc !important;
    text-align: center !important;
}

.woocommerce-form-coupon {
    max-width: 1300px !important;
    margin: 0 auto 30px auto !important;
}

/* התאמה למובייל */
@media (max-width: 992px) {
    .yr-checkout-grid { flex-direction: column !important; }
    .yr-checkout-right, .yr-checkout-left { width: 100% !important; }
    .woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100% !important; float: none !important; }
    /* במובייל סיכום ההזמנה עולה למעלה */
    .yr-checkout-left { order: -1 !important; }
}

/* ======================================================== */
/* עמוד קופה ותשלום - גריד 60/40 קשיח שלא נמעך */
/* ======================================================== */

/* הופכים את הקונטיינר לגריד מדויק ואוסרים עליו להימעך */
.yr-checkout-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important; /* 60% ימין, 40% שמאל */
    gap: 40px !important;
    align-items: start !important;
    width: 100% !important;
}

/* מניעת פריצה של התוכן אל מחוץ לעמודות הגריד - קריטי! */
.yr-checkout-right, 
.yr-checkout-left {
    width: 100% !important;
    min-width: 0 !important; /* פקודת קסם לגריד: מונע ממשתנים פנימיים להרחיב או למעוך את העמודה */
    box-sizing: border-box !important;
}

/* וידוא ששדות הקלט (Inputs) לא פורצים את הגריד החוצה */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* תיקון טבלת סיכום ההזמנה בצד שמאל שלא תמתח את העמודה */
.woocommerce-checkout-review-order-table {
    width: 100% !important;
    table-layout: fixed !important; /* כופה על הטבלה לציית לרוחב העמודה */
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    word-wrap: break-word !important; /* שובר מילים ארוכות אם צריך */
}

/* --- התאמה למובייל לעמוד קופה (מעיף את הגריד לטור אחד) --- */
@media (max-width: 992px) {
    .yr-checkout-grid {
        grid-template-columns: 1fr !important; /* טור אחד במובייל */
        gap: 20px !important;
    }
    
    .yr-checkout-left {
        order: -1 !important; /* מקפיץ את סיכום ההזמנה מעל הטפסים במובייל */
    }
    
    .woocommerce-checkout .form-row-first, 
    .woocommerce-checkout .form-row-last {
        width: 100% !important;
        float: none !important;
    }
}
/* ======================================================== */
/* עמוד קופה - פינישים אחרונים לעיצוב פיקסל-פרפקט */
/* ======================================================== */

/* --- 1. החזרת הלייבלים (כותרות השדות) ועיצוב הטפסים --- */
.woocommerce-checkout .form-row label { 
    display: block !important; 
    margin-bottom: 8px !important; 
    font-weight: 600 !important; 
    color: #444 !important; 
    font-size: 15px !important;
}

/* ריווח מדויק בין השדות כמו בעיצוב */
.woocommerce-checkout .form-row {
    margin-bottom: 25px !important;
}

/* עיצוב שדות הקלט שייראו בדיוק כמו ה-HTML */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .select2-selection {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    background: #fff !important;
    height: auto !important;
    box-shadow: none !important;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: #f0c14b !important;
    box-shadow: 0 0 5px rgba(240, 193, 75, 0.3) !important;
}

/* --- 2. סיכום הזמנה: הפיכת טבלת ווקומרס ל-Divs (Flexbox) --- */
/* הסתרת הכותרת העליונה של הטבלה (מוצר/סה"כ) שלא קיימת ב-HTML שלך */
.woocommerce-checkout-review-order-table thead {
    display: none !important;
}

/* הפיכת שורות המוצרים ל-Flex כדי שייראו כמו ה-HTML */
.woocommerce-checkout-review-order-table tbody tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eee !important;
}

.woocommerce-checkout-review-order-table tbody td {
    border: none !important;
    padding: 0 !important;
}

/* אזור התמונה והשם */
.woocommerce-checkout-review-order-table td.product-name {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-grow: 1 !important;
    text-align: right !important;
}

/* עיצוב התמונה */
.checkout-img-wrap {
    display: flex !important;
    align-items: center !important;
}

.checkout-img-wrap img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 5px !important;
    border: 1px solid #eee !important;
}

/* עיצוב שם המוצר והכמות (מראה מדויק) */
.checkout-img-wrap span {
    font-size: 14px !important;
    color: #333 !important;
    font-weight: 600 !important;
    display: block !important;
}

/* כמות המוצר מתחת לשם */
.product-quantity {
    display: block !important;
    font-size: 13px !important;
    color: #888 !important;
    font-weight: normal !important;
    margin-top: 3px !important;
}

/* מחיר המוצר (מוצמד לשמאל) */
.woocommerce-checkout-review-order-table td.product-total {
    font-weight: bold !important;
    font-size: 15px !important;
    color: #333 !important;
}

/* --- 3. אזור חישובי ביניים (משלוח וסה"כ) --- */
.woocommerce-checkout-review-order-table tfoot tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eee !important;
}

.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
    border: none !important;
    padding: 0 !important;
    font-weight: normal !important;
    color: #555 !important;
    font-size: 15px !important;
}

/* שורת סה"כ לתשלום מדויקת */
.woocommerce-checkout-review-order-table tr.order-total {
    border-bottom: none !important;
    margin-top: 10px !important;
}

.woocommerce-checkout-review-order-table tr.order-total th {
    font-size: 18px !important;
    color: #333 !important;
    font-weight: bold !important;
}

.woocommerce-checkout-review-order-table tr.order-total td span.woocommerce-Price-amount {
    font-size: 24px !important;
    color: #d32f2f !important; /* אדום כמו בעיצוב */
    font-weight: bold !important;
}

/* --- 4. אמצעי תשלום בדיוק כמו ב-HTML --- */
#custom-payment-section ul.payment_methods {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

#custom-payment-section li.payment_method {
    list-style: none !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    padding: 15px 20px !important;
    margin-bottom: 15px !important;
    display: block !important;
    background: #fff !important;
    transition: all 0.3s !important;
}

#custom-payment-section li.payment_method input[type="radio"]:checked + label {
    color: #333 !important;
}
#custom-payment-section li.payment_method:has(input[type="radio"]:checked) {
    border-color: #f0c14b !important;
    background-color: #fdfbf7 !important;
}

#custom-payment-section li.payment_method label {
    display: flex !important;
    align-items: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#custom-payment-section li.payment_method input[type="radio"] {
    margin-left: 15px !important;
    transform: scale(1.2) !important;
}

#custom-payment-section div.payment_box {
    background-color: #f9f9f9 !important;
    padding: 20px !important;
    border-radius: 5px !important;
    border: 1px solid #eee !important;
    margin-top: 15px !important;
}

#custom-payment-section div.payment_box::before {
    display: none !important; 

#custom-payment-section .place-order { 
    display: none !important; 
}
}

/* ======================================================== */
/* עמוד קופה - תיקון כותרות, קווים, ותצוגת מוצר בסיכום */
/* ======================================================== */

/* 1. ביטול הפס העליון הצהוב מכל הקופסאות (תיקון של קוד קודם) */
.yr-card {
    border-top: none !important;
}

/* 2. הוספת הפס השחור העליון *אך ורק* לקופסת סיכום ההזמנה (בצד שמאל) */
.yr-checkout-left .yr-card {
    border-top: 5px solid #333 !important;
}

/* 3. העברת הקו הצהוב אל מתחת לכותרות עצמן ("1. פרטי משלוח", "סיכום הזמנה" וכו') */
.yr-card-title {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
    text-align: right !important;
    border-bottom: 2px solid #f0c14b !important; /* כאן הקו הצהוב! */
}

/* 4. הסתרת הכותרות המיותרות שווקומרס מזריק ("פרטי חיוב", "פרטי משלוח נוספים") */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {
    display: none !important;
}

/* ======================================================== */
/* 5. תיקון סידור התמונה והטקסט בטבלת המוצרים (כמו במקור) */
/* ======================================================== */

.woocommerce-checkout-review-order-table td.product-name {
    display: flex !important;
    flex-wrap: wrap !important; /* מאפשר שבירת שורות */
    align-items: center !important;
    gap: 5px 15px !important;
    text-align: right !important;
    border: none !important;
    padding: 15px 0 !important;
}

/* פקודת קסם ב-CSS שמאפשרת להוציא את התמונה והטקסט מתוך ה-div שעוטף אותם */
.checkout-img-wrap {
    display: contents !important; 
}

/* עיצוב התמונה */
.checkout-img-wrap img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 5px !important;
    border: 1px solid #eee !important;
    object-fit: cover !important;
}

/* עיצוב שם המוצר (צמוד לתמונה) */
.checkout-img-wrap span {
    width: calc(100% - 75px) !important; /* תופס את שאר המקום בשורה */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.3 !important;
}

/* עיצוב הכמות (דחיפה מתחת לשם המוצר) */
.product-quantity {
    width: calc(100% - 75px) !important; /* באותו רוחב של הטקסט */
    margin-right: 75px !important; /* דוחף את זה בדיוק מתחת לשם המוצר, בלי לעלות על התמונה */
    font-size: 13px !important;
    color: #888 !important;
    font-weight: normal !important;
}

/* סידור המחיר שיישאר ממורכז וברור בצד שמאל */
.woocommerce-checkout-review-order-table td.product-total {
    border: none !important;
    font-weight: bold !important;
    font-size: 15px !important;
    color: #333 !important;
    padding: 15px 0 !important;
}