/*CAW*/
/* 1. Base Setup (From our previous step) */
/* 1. Base Setup (From our previous step) */
/*Dynamic top gradient when scrolling*/
html {
    /* 1. Sets the minimum height to full viewport */
    min-height: 100vh;
    /* 2. Move the background to HTML so it acts as the canvas base */
    background: radial-gradient( circle at top, rgba(30,80,180,.65), transparent 65% ), linear-gradient( 180deg, #061228, #020918 );
    background-repeat: no-repeat;
    /* 3. Forces the background to scale beautifully without distorting the radial circle */
    background-size: cover;
    /* 4. Keeps the background tracking naturally with the scroll */
    background-attachment: scroll;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: white;
    /* 5. Makes the body transparent so the HTML background shines through */
    background: transparent;
}

/* 2. Clear out the hidden white layout containers */
form,
.main-container,
#wrapper,
.container,
.container-fluid {
    background-color: transparent !important;
    background: transparent !important;
}

/*BRAND COLOR*/
.brand_color {
    color: #e6b800;
}

.brand_border {
    border-top:1px solid gray;
}

.brand_background_color {
    background: linear-gradient(180deg, #00A2E8 0%, #0086C3 100%);
}

.brand_card_template {
    /*Faint hint of white layer*/
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
}

hr {
    border: none;
    height: 1px;
    background-color: #666;
    margin: 20px 0;
}

/*-----------------------------------------------*/
/*FONT CUSTOM*/
/*-----------------------------------------------*/
.title_font {
    font-size: 12pt;
    /*font-weight:bold;*/
    padding: 3px;
    color: #3498DB;
    /* Truncate text with ellipsis if it exceeds the container width */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word; /* Prevent long words from breaking layout */
}

.desc_font {
    font-size: 12pt;
    padding: 3px;
    color: white;
}

/*-----------------------------------------------*/
/*PRECART ITEM STYLES*/
/*-----------------------------------------------*/

.box_precart {
    border: solid lightgray 0px;
    border-radius: 0px; /* card rounded corners */
}

.box_content {
    border-radius: 0px;
}

.box img {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

    /*.caw_font {
    color: #e6b800;
    text-transform: uppercase;
}
*/
    .dataContainerColor {
        background-color: transparent;
    }

    .product {
        border: 0px solid gray;
        border-radius: 0px;
    }

        .product .image-container {
            border-top-left-radius: 0px; /*8px;*/ /*debug*/
            border-top-right-radius: 0px; /*8px;*/ /*debug*/
        }

    .product_description {
        font-weight: normal;
        color: white;
    }

    .button {
        text-transform: uppercase;
    }
    /*-----------------------------------------------*/
    /*---Mouseover underline for hyperlink---*/
    /*-----------------------------------------------*/

    .link {
        COLOR: #e6b800;
        TEXT-DECORATION: none;
    }

        .link:hover {
            TEXT-DECORATION: underline;
        }
    /*----------------------------------*/
    /*BUTTON*/
    /*----------------------------------*/
    .buttonaddtocart {
        color: #FFFFFF; /*background-color: #5B2783; */ /*ori purple*/
        /*background-color: #2D7FE0;*/ /*truepurple */ /*font-weight:bold;*/ /*font-size:10pt;*/
        /*font-family: 'Montserrat' , sans-serif;*/
        border: 0px solid #2D7FE0;
        padding: 5px 5px 5px 5px; /*padding-left:5px;
        padding-right:5px;*/
        text-align: center;
        cursor: pointer;
        /*font-weight: bold;*/
        /*background: linear-gradient(180deg, #00A2E8 0%, #0086C3 100%);*/
        color: #FFFFFF;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 12px;
        /*border-radius: 4px;*/
    }

    .buttonpreorder {
        /*color: #FFFFFF;*/
        /*background-color: #339933; */ /*green*/
        /*background-color: #56B85A;*/ /*lime green*/
        /*font-weight:bold;*/
        /*font-size:10pt;*/
        /*font-family: 'Montserrat', sans-serif;*/
        border: 0px solid #56B85A;
        padding: 5px 5px 5px 5px;
        /*padding-left:5px;
padding-right:5px;*/
        text-align: center;
        cursor: pointer;
        background: linear-gradient( 180deg, #68C86C 0%, #56B85A 100% );
        color: #FFFFFF;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 12px;
    }

    .wishlist {
        color: #FFFFFF;
        background-color: #B00000;
        /*color:#B00000;*/
        /*font-weight:bold;*/
        /*font-size:10pt;*/
        /*font-family: 'Montserrat', sans-serif;*/
        border: 1px solid #B00000;
        padding: 5px 5px 5px 5px;
        /*padding-left:5px;
padding-right:5px;*/
        text-align: center;
        cursor: pointer;
    }

    .buttonsoldout {
        display: inline-flex !important; /* 👈 !important ensures it overrides any ASP.NET engine defaults */
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text */

        background-color: white;
        color: #B00000;
        border: 2px solid #B00000;
        padding: 5px 5px 5px 5px;
        text-align: center;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 12px;
    }

    .buttondiscontinued {
        display: inline-flex !important; /* 👈 !important ensures it overrides any ASP.NET engine defaults */
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text */
        color: #CCCCCC;
        border: 1px solid #CCCCCC;
        padding: 5px 5px 5px 5px;
        padding-right: 5px;
        */ text-align: center;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 12px;
    }

    .buttoncomingsoon {
        display: inline-flex !important; /* 👈 !important ensures it overrides any ASP.NET engine defaults */
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text */

        color: #000000;
        border: 2px solid #000000;
        padding: 5px 5px 5px 5px;
        text-align: center;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 12px;
    }

    .advancesearch {
        /*color: #FFFFFF; background-color: #339933; */ /*green*/
        background-color: #F28E10; /*orangy*/ /*font-family: 'Montserrat' , sans-serif;*/
        border: 1px solid #F28E10;
        padding: 5px 5px 5px 5px; /*padding-left:5px;
padding-right:5px;*/
        text-align: center;
    }

    .buttonmultiplier {
        color: #990099;
        /*background-color: #5B2783; */ /*ori purple*/
        /*background-color: #FFFFFF; truepurple */
        /*font-weight:bold;*/
        /*font-size:10pt;*/
        /*font-family: 'Montserrat', sans-serif;*/
        border: 1px solid #990099;
        padding: 5px 5px 5px 5px;
        /*padding-left:5px;
padding-right:5px;*/
        text-align: center;
        background: linear-gradient( 180deg, #B020B0 0%, #990099 100% );
        color: #FFFFFF;
        font-weight: 700;
        letter-spacing: 0.5px;
        font-size: 12px;
        /*border-radius: 4px;*/
    }
    /*----------------------------------*/
    /*DISCOUNT COUPON*/
    /*----------------------------------*/
    .ticket {
        display: inline-block;
        background-color: #e6b800; /* darkred color */
        color: black;
        font-weight: bold;
        padding: 3px 8px;
        font-size: small;
        border-radius: 5px;
        position: relative;
        text-align: center;
    }

        .ticket::before {
            left: -5px; /* Position left cut-out, half the size of cut-out (10px) so it will appear as semi-circle */
        }

        .ticket::after {
            /*right: -2px;*/ /* Position right cut-out */
            right: -10px; /* Position right cut-out, had it at 8 px the same size of the cut-off so it won't be shown */
        }
    /* HORIZONTAL BADGE */
    .panicBadge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #e6b800;
        color: #fff;
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: medium;
        box-shadow: 0 2px 5px rgba(0,0,0,.25);
    }

    .salesBadge {
        position: absolute;
        top: 10px;
        left: 10px;
        background: red;
        color: #fff;
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: medium;
        box-shadow: 0 2px 5px rgba(0,0,0,.25);
    }
    /*-----------------------------------------------
--FILTER TOGGLE AND SLIDE-OUT PANEL CSS
-----------------------------------------------*/
    /* MOBILE */
    @media (max-width: 768px) {
        /* Vertical tab button hugging the left edge */
        #filterToggle {
            display: block;
            position: fixed;
            left: 0;
            top: 50%;
            transform: translate(0, -50%);
            transition: transform 0.25s ease;
            z-index: 1103;
            width: 24px;
            height: 100px;
            border: 0;
            border-radius: 0 12px 12px 0;
            cursor: pointer;
            background: #021b45; /*dark blue*/ /*#6F3FAA;*/ /*true purple*/
            color: #fff;
            font-weight: 800;
            letter-spacing: 2px;
            font-size: 12px;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 6px 0 16px rgba(0,0,0,0.18);
        }
        /* Slide-out panel */
        #dropdownContainer {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 85vw;
            /*max-width: 360px;*/

            overflow-y: auto;
            /*background: transparent;*/ /*#fff;*/
            background: radial-gradient( circle at top, rgba(30,80,180,.65), transparent 65% ), linear-gradient( 180deg, #061228, #020918 );
            z-index: 1102;
            transform: translateX(-105%);
            transition: transform 0.25s ease;
            box-shadow: 8px 0 20px rgba(0,0,0,0.2);
            /* remove your negative margin on mobile */
            margin-top: 0;
        }
            /* Open state */
            #dropdownContainer.is-open {
                transform: translateX(0);
            }

        #filterOverlay.is-open {
            display: block;
        }
        /* When panel is open, slide the button with it */
        #dropdownContainer.is-open ~ #filterToggle,
        #filterToggle.is-open {
            transform: translate(calc(85vw - 1px), -50%);
        }
        /*workaround stop fix the iphone dropdown view issue, where the text are hidden*/
        select.textbox {
            -webkit-appearance: none;
            appearance: none;
            background-color: #fff;
            color: #000; /* or whatever your site text color is */
        }
    }