/* Custom Colors */
:root {
    --primary-color: #287e9f;
    --secondary-color: #c9615e;
}

/* Apply Custom Colors */
header, footer {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--secondary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: darken(var(--primary-color), 10%);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-secondary:hover {
    background-color: lighten(var(--secondary-color), 10%);
}

/* CSS to move the logo to the right */
.header .logo {
    float: right; /* Aligns the logo to the right */
    margin-right: 20px; /* Optional: Adds some spacing from the right edge */
}

@media only screen and (max-width: 768px){
    .header .logo {
        float: right; /* Aligns the logo to the right */
        margin-right: -3px; /* Optional: Adds some spacing from the right edge */
   }
}

/* General styles for the logo */
.header .logo img {
    max-width: 100%; /* Default for desktop */
    height: auto; /* Maintains aspect ratio */
}

/* Specific styles for mobile devices */
@media only screen and (max-width: 768px) {
    .header .logo img {
        max-width: 43%;/* Adjust to fit smaller screens */
        margin-left:85px;
    }
}

.page-header {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

@media (max-width: 768px) {
    body[dir="rtl"] .block.newsletter .field .control:before {
        color: var(--secondary-color);
    }
}

.page-header, .header.panel, .page-header .header.content {
    background-color: var(--primary-color); /* Apply to the full header */
}

.page-header .panel.wrapper .panel.header {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.copyright {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body .page-header .panel.wrapper {
    border-bottom: 1px solid #ffffff !important;
    background-color: var(--primary-color) !important;
}

@media only screen and (max-width: 767px) {
    .block-search input {
        position: unset !important; /* Removes absolute positioning */
    }
}

/* Medium Screens (e.g., tablets) */
@media (min-width: 768px) and (max-width: 1024px) {
     .block-search {
         width: 50% !important;
         max-width: 500px;
         margin-right: 20px;
         margin-left: 20px;
         margin-top: 40px;
         border: 2px solid var(--secondary-color); /* Add a border */
         border-radius: 5px; /* Smooth corners */
         box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
         padding: 2px; /* Add some padding */
         padding-left: unset !important;
     }
}

/* Large Screens (e.g., desktops) */
@media (min-width: 1025px) {
    .block-search {
       width: 65% !important;
       max-width: 650px;
       margin-right: 20px;
       margin-left: 20px;
       margin-top: 40px;
       border: 2px solid var(--secondary-color); /* Add a border */
       border-radius: 5px; /* Smooth corners */
       box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
       padding: 2px; /* Add some padding */
       padding-left: unset !important;
    }
}

@media (min-width: 768px) {
    .minicart-wrapper .action.showcart:before {
        font-size: 52px;
        line-height: 50px;
        color: var(--secondary-color);
        margin-top: 27px;
    }
}

@media (max-width: 768px) {
    .minicart-wrapper .action.showcart:before {
        color: var(--secondary-color);
        margin-left: -29px !important;
        margin-right: 4px !important;
    }
}

.nav-toggle:before {
   color: var(--secondary-color);
}

.block-search .label:before {
   color: var(--secondary-color);
}

@media only screen and (max-width: 768px) {
    .logo {
        margin-left: -1px !important;
    }
}


@media only screen and (max-width: 768px) {
    .abs-toggling-title-mobile,
    .block-wishlist-management .wishlist-select .wishlist-name,
    .block-collapsible-nav .title {
        border: 2px solid #04AA6D; /* Main border color */
        border-radius: 8px; /* Rounded corners */
        background-color: white; /* Default background */
        color: #333; /* Default text color */
        font-weight: 500; /* Slightly bold font */
        padding: 4px 26px; /* Space inside */
        text-align: center; /* Center align text */
        display: flex; /* Ensures proper inline block rendering */
        margin: 38px auto; /* Add spacing between elements */
        cursor: pointer; /* Pointer cursor on hover */
        transition: all 0.3s ease-in-out; /* Smooth transition effect */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

    /* Hover Effect */
    .abs-toggling-title-mobile:hover,
    .block-wishlist-management .wishlist-select .wishlist-name:hover,
    .block-collapsible-nav .title:hover {
        color: #000000; /* Text changes to white */
        border-color: var(--secondary-color); /* Darker border color */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Deep shadow on hover */
        transform: translateY(-3px); /* Slight lift effect */
    }

    /* Active/Pressed State (Optional) */
    .abs-toggling-title-mobile:active,
    .block-wishlist-management .wishlist-select .wishlist-name:active,
    .block-collapsible-nav .title:active {
        transform: translateY(1px); /* Button-like press effect */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Reduced shadow */
    }
}

@media only screen and (max-width: 768px) {
    body[dir="rtl"] .block-wishlist-management .wishlist-select .wishlist-name:after, .block-collapsible-nav .title:after {
        position: absolute;
        right: 65px;
        top: 10px;
        shape-outside: border-box;
    }
}

@media only screen and (max-width: 768px) {
    body[dir="ltr"] .block-wishlist-management .wishlist-select .wishlist-name:after, .block-collapsible-nav .title:after {
        position: absolute;
        left: 5px;
        top: 9px;
        shape-outside: border-box;
    }
}

.field-tooltip {
    right: auto !important;
    left: 0 !important;
}

/* ===== MEGAMENU IMPROVEMENTS ===== */

/* Desktop — nav bar */
.nav-sections {
    background-color: #1e6a87 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
.navigation-megamenu .navigation {
    background-color: #1e6a87 !important;
}

/* Desktop — each tab gets a separator and hover highlight */
.navigation-megamenu .megamenu-mainmenu > li {
    border-right: 1px solid rgba(255,255,255,0.18) !important;
    transition: background-color 0.2s ease !important;
}
.navigation-megamenu .megamenu-mainmenu > li:last-child {
    border-right: none !important;
}
.navigation-megamenu .megamenu-mainmenu > li:hover,
.navigation-megamenu .megamenu-mainmenu > li.active {
    background-color: var(--secondary-color) !important;
}

/* Desktop — top-level link text */
.navigation-megamenu .megamenu-mainmenu > li > a {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    padding: 0 12px !important;
}
.navigation-megamenu .megamenu-mainmenu > li > a:hover,
.navigation-megamenu .megamenu-mainmenu > li > a:focus {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Desktop — dropdown panel */
.navigation-megamenu .megamenu-mainmenu .dropdown-menu {
    border: none !important;
    border-top: 3px solid var(--secondary-color) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
    padding: 18px 20px !important;
}

/* Desktop — sub-menu links */
.navigation-megamenu .megamenu-mainmenu .sub-menu a {
    color: #333 !important;
    font-size: 1.3rem !important;
    font-weight: 500 !important;
    padding: 6px 0 !important;
    transition: color 0.15s ease, padding-right 0.15s ease !important;
    display: block !important;
}
.navigation-megamenu .megamenu-mainmenu .sub-menu a:hover {
    color: var(--secondary-color) !important;
    padding-right: 6px !important;
}
.navigation-megamenu .megamenu-mainmenu .mega-menu-sub-title {
    font-weight: 700 !important;
}

/* Mobile — top tabs (תפריט / חשבון / הגדרות) */
@media (max-width: 767px) {
    .nav-sections-item-title {
        flex: 1 !important;
        text-align: center !important;
        padding: 14px 8px !important;
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        border-bottom: 3px solid transparent !important;
        transition: background-color 0.2s ease !important;
    }
    .nav-sections-item-title a {
        color: rgba(255,255,255,0.75) !important;
        text-decoration: none !important;
    }
    .nav-sections-item-title.active {
        background-color: var(--secondary-color) !important;
        border-bottom: 3px solid #fff !important;
    }
    .nav-sections-item-title.active a {
        color: #ffffff !important;
    }
    .nav-sections-item-title:not(.active):hover {
        background-color: rgba(255,255,255,0.15) !important;
    }
}

/* Mobile — drawer background and rows */
@media (max-width: 767px) {
    .nav-sections {
        background-color: #ffffff !important;
    }
    .navigation-megamenu .navigation > ul > li {
        border-bottom: 1px solid #e8e8e8 !important;
        border-top: none !important;
        position: relative !important;
    }
    .navigation-megamenu .navigation > ul > li:first-child {
        border-top: 1px solid #e8e8e8 !important;
    }

    /* top-level link — full-width tap area with right padding for button */
    .navigation-megamenu .megamenu-mainmenu > li > a {
        font-size: 1.45rem !important;
        padding: 14px 60px 14px 16px !important;
        color: #222 !important;
        display: block !important;
        font-weight: 600 !important;
    }
    body[dir="rtl"] .navigation-megamenu .megamenu-mainmenu > li > a {
        padding: 14px 16px 14px 60px !important;
    }

    /* sub-menu links */
    .navigation-megamenu .navigation ul li .sub-menu a {
        padding: 10px 20px !important;
        font-size: 1.3rem !important;
        color: #555 !important;
    }
    .navigation-megamenu .navigation ul li .sub-menu a:hover {
        color: var(--secondary-color) !important;
    }

    /* ── toggle arrow — large colored circle ── */
    .navigation-megamenu .navigation ul li .toggle-menu {
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        height: auto !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .navigation-megamenu .navigation ul li .toggle-menu > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background-color: var(--primary-color) !important;
        color: #ffffff !important;
        font-size: 22px !important;
        line-height: 1 !important;
        padding: 0 !important;
        transition: background-color 0.2s ease, transform 0.25s ease !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
        text-decoration: none !important;
    }
    .navigation-megamenu .navigation ul li .toggle-menu > a:hover {
        background-color: var(--secondary-color) !important;
    }
    /* open state */
    .navigation-megamenu .navigation ul li .toggle-menu a.active {
        background-color: var(--secondary-color) !important;
        transform: rotate(180deg) !important;
    }
    .navigation-megamenu .navigation ul li .toggle-menu a.active .fa:before {
        content: "\f107" !important;
    }
    /* RTL — move circle to left */
    body[dir="rtl"] .navigation-megamenu .navigation ul li .toggle-menu {
        right: auto !important;
        left: 10px !important;
    }
}
/* Mobile — fix RTL text clipping */
@media (max-width: 767px) {
    /* Remove overflow:hidden that clips Hebrew text on the left */
    .navigation-megamenu .navigation > ul > li,
    .navigation-megamenu .navigation > ul {
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Let link text wrap and fill full row width */
    .navigation-megamenu .megamenu-mainmenu > li > a {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Fix colored empty blocks — ensure text is visible */
    .navigation-megamenu .megamenu-mainmenu > li > a span,
    .navigation-megamenu .megamenu-mainmenu > li > a {
        color: #222 !important;
    }
    body[dir="rtl"] .navigation-megamenu .megamenu-mainmenu > li > a span,
    body[dir="rtl"] .navigation-megamenu .megamenu-mainmenu > li > a {
        color: #222 !important;
        text-align: right !important;
        display: block !important;
    }
}
/* ===== END MEGAMENU IMPROVEMENTS ===== */

@media (max-width: 768px)  {
    .header-wrapper .header-login-icon {
        display: inline-block !important;
        float: left !important ;
        padding-left: 37px !important;
        padding-top: 7px !important;
        font-size: 24px !important;
        color: var(--secondary-color) !important;
    }
}