/* 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:11px;
    }
}

.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;
}

@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;
    }
}