/* Add Your Custom Styles Here */
@media (max-width: 991px) {
  .hide-on-mobile {
    display: none !important;
  }
}
/* floating button styling*/
.forest-floating-tab {
    position: fixed;
    right: 0;
    top: 35%;
    transform: translateY(-50%);
    z-index: 99999;
    background-color: #14362a;
    color: #f9f9f5;
    text-decoration: none !important;
    border-radius: 8px 0 0 8px;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    /*             animation: slideInTab 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; */
    transition: all 0.3s ease;
}

.tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tab-text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    line-height: 1;
}

.tab-icon {
    display: flex;
    color: #d4af37;
}

.forest-floating-tab:hover {
    background-color: #1a4738;
    color: #ffffff;
    animation: pulseGlow 3s infinite;
}

/* Slide in from the left edge on page load */
@keyframes slideInTab {
    0% {
        transform: translate(100%, -50%);
        opacity: 0;
    }

    100% {
        transform: translate(0, -50%);
        opacity: 1;
    }
}

/* Subtle pulse glow to catch the eye */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(20, 54, 42, 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(20, 54, 42, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(20, 54, 42, 0);
    }
}

@media (max-width: 849px) {
    .forest-floating-tab {
        padding: 10px 8px;
    }

    .tab-text {
        font-size: 11px;
    }

    .forest-floating-tab {
        top: 70%;
    }
}

/* ========
Builder box bar styling
======== */
/* Styling for the new Build a Box Bar */
#build-a-box-bar {
    background-color: #14362a;
    color: #ffffff;
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
}

.header-sticky-gift-box {
    gap: 10px 24px;
}

.header-sticky-gift-box::after {
    content: none;
}

.header-sticky-gift-box .sticky-bar-content {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.header-sticky-gift-box .sticky-bar-content p {
    margin-bottom: 0;
}

.header-sticky-gift-box .sticky-bar-icon {
    margin-right: 12px;
    color: #d4af37;
    display: flex;
}

.header-sticky-gift-box .sticky-bar-content strong {
    margin-right: 8px;
    letter-spacing: 0.05em;
}

/* Button Styling */
.header-sticky-gift-box .sticky-cta-btn {
    margin-bottom: 0 !important;
    border-radius: 99px !important;
    background-color: #f9f9f5 !important;
    color: #14362a !important;
    font-weight: bold;
    border: none !important;
    transition: all 0.3s ease;
    padding: 8px 10px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: unset;
    height: unset;
    line-height: 1.5;
}

.header-sticky-gift-box .sticky-cta-btn i {
    top: 0 !important;
}

.header-sticky-gift-box .sticky-cta-btn:hover {
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Sticky Logic: Ensure it stays with the header */
/* .has-sticky .header-wrapper.stuck #build-a-box-bar {
   display: none;
} */

@media (max-width: 991px) {
    .header-sticky-gift-box {
        flex-direction: column;
        padding-block: 4px;
    }
    
    .header-sticky-gift-box .sticky-cta-btn {
        padding-block: 5px;
    }

    .header-sticky-gift-box .sticky-bar-content p {
        font-size: 12px;
    }
}

.nav li.has-icon-left > a > .ux-sidebar-menu-icon, .nav li.has-icon-left > a > .ux-menu-icon{
    margin-top: -4px;
}

/* menu build a box*/
.header-main .nav > li.header-divider{
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 1100px){
	.header-main .nav > li.build-a-box > a{
		font-size: 0;
	}	
}