:root {
    --bs-primary: #616160;
    /* Define your custom INFO color (currently cyan, changing it to purple) */
    --bs-info: #1E2A36;
    --bs-success: #C5B9AE;
    --bs-danger: #D89C8B;
    /* You should also include the RGB value for utility functions like gradients/shadows */
    --bs-info-rgb: 30, 42, 54;
    --bs-success-rgb: 197, 185, 174;
    --bs-success-rgb: 216, 156, 139;
    --bs-primary: rgba(97, 97, 96, 1);
    --header-bg-color: rgba(232, 231, 247, 1);
    --header-shadow: 2px 2px 1px rgba(0, 0, 0, 0.40);
    --header-text-color: #8641c1;
    --header-text-color-hover: #7d7d7d;
    --footer-bg-color: rgba(22, 5, 36, 1); /*dark purple*/
    --footer-text-color: #adadad;
    --background-image-path: url('../images/plainGradient.png');
    --icon-fill-color: rgba(104, 91,199, 1); /*light purple*/
    /*button*/
    --button-background-color: rgba(195, 207, 193, 1);
    --button-background-color-hover: rgba(195, 207, 193, 1);
    --button-border-color: rgba(195, 207, 193, 1);
    --button-border-color-hover: rgba(195, 207, 193, 1);
    --button-text-color: rgba(30, 42, 54, 1);
    --button-text-color-hover: rgba(30, 42, 54, 1);
    --button-text-font-family: "Poppins", serif;
    --button-text-font-weight: 400;
    --button-text-font-style: normal;
    --button-text-font-size: 1.5rem;
    --button-text-letter-spacing: -1px;
    /*secondary button*/

    --button-secondary-background-color: rgba(216, 156, 139, 1);
    --button-secondary-background-color-hover: rgba(245, 236, 229, 1);
    --button-secondary-border-color: rgba(216, 156, 139, 1);
    --button-secondary-border-color-hover: rgba(245, 236, 229, 1);
    --button-secondary-text-color: rgba(0, 0, 0, 1);
    --button-secondary-text-color-hover: rgba(0, 0, 0, 1);
    --button-secondary-text-font-family: "Poppins", serif;
    --button-secondary-text-font-weight: bold;
    --button-secondary-text-font-style: normal;
    --button-secondary-text-font-size: 2rem;
    --button-secondary-text-letter-spacing: -1px;
    /*nice purple color*/
    --check-size: 200px;
    --check-border-width: 10px;
    --checkmark-width: calc(var(--check-size) / 2);
    --checkmark-height: calc(var(--checkmark-width) / 2);
    --checkmark-left: calc(var(--checkmark-width) / 2);
    --checkmark-top: 50%;
    --checkmark-color: rgba(195, 154, 63, 1);
    /*input*/
    --input-border-color: rgba(197, 185, 174, 1);
    /*toggler*/
    --toggler-hover-color: rgba(255, 255, 255, 0);
    --toggler-hover-line-color: rgba(167, 164, 224, 1);
    /*image variant*/
    --custom-variant-img-border-color: rgba(22, 5, 36, 1);
    --custom-variant-img-border-radius: 3px;
    --custom-variant-img-border-thickness: 2px;
    --custom-variant-img-box-shadow: -5px 5px;
    --custom-variant-img-box-shadow-color: rgba(216, 156, 139, 1);
    /*custom image*/
    --custom-img-border-color: rgba(22, 5, 36, 1);
    --custom-img-border-radius: 3px;
    --custom-img-border-thickness: 2px;
    --custom-img-box-shadow: -5px 5px;
    --custom-img-box-shadow-color: rgba(104, 91, 199, 1);
    /*custom title*/
    /*custom image listing*/
    --custom-img-listing-border-color: rgba(104, 91, 199, 1);
    --custom-img-listing-border-radius: 8px;
    --custom-img-listing-border-thickness: 3px;
    /*custom title*/
    /*--custom-title-font-family: "DM Serif Text", serif;*/
    --custom-title-font-family: "Poppins", serif;
    --custom-title-font-weight: 700;
    --custom-title-font-style: normal;
    --custom-title-color: rgba(47, 62, 77, 1);
    --custom-title-font-size: 2.6rem;
    --custom-title-letter-spacing: -1.2px;
    --custom-title-box-shadow: -5px 5px;
    --custom-title-shadow-color: rgba(100, 100, 100, 1);
    --custom-title-line-height: 1.2em;
    /*custom secondary title*/
    /*--custom--font-family: "DM Serif Text", serif;*/
    --custom-secondary-title-background-color: rgba(255, 255, 255, 1);
    --custom-secondary-title-font-family: "Poppins", serif;
    --custom-secondary-title-font-weight: 500;
    --custom-secondary-title-font-style: normal;
    --custom-secondary-title-color: rgba(22, 5, 36, 1);
    --custom-secondary-title-font-size: 1.8rem;
    --custom-secondary-title-letter-spacing: -1.2px;
    --custom-secondary-title-border-color: rgba(22, 5, 36, 1);
    --custom-secondary-title-border-radius: 3px;
    --custom-secondary-title-border-thickness: 2px;
    --custom-secondary-title-box-shadow: -5px 5px;
    --custom-secondary-title-box-shadow-color: rgba(104, 91, 199, 1);
    /*Custom Container*/
    --custom-container-color: rgba(0, 0, 0, 1);
    --custom-container-background-color: rgba(244, 241, 0, 1);
    --custom-container-width: 100%;
    --custom-container-font-family: "Poppins", serif;
    --custom-container-font-weight: 500;
    --custom-container-font-style: normal;
    --custom-container-font-size: 1.4rem;
    --custom-container-letter-spacing: -1.2px;
    --custom-container-border-color: rgba(22, 5, 36, 1);
    --custom-container-border-radius: 10px;
    --custom-container-border-thickness: 2px;
    --custom-container-box-shadow: -5px 5px;
    --custom-container-box-shadow-color: rgba(255, 128, 139, 1);
    /*modal*/
    --modal-font-family: "Poppins", serif;
    --modal-font-weight: 500;
    --modal-font-color: rgba(22, 5, 36, 1);
    --modal-border-radius: 40px;
    --modal-box-shadow: -5px 5px;
    --modal-box-shadow-color: rgba(216, 156, 139, 1);
    /*-------color palette------------
    purple rgba(104, 91, 199, 1);
    ultra dark purple rgba(22, 5, 36, 1);
    light purple rgba(167, 164, 224, 1);
    fosfo-green *rgba(175, 254, 4, 1);
    militar green rgba(0, 156, 0, 1);
    grey rgba(100, 100, 100, 1);
    pink rgba(255, 128, 139, 1);
    --------------------------------*/
}

/* Custom rule to ensure the text within the collapsible CATEGORY header uses your custom primary color */
.card-body .d-flex[data-bs-toggle="collapse"] h5 {
    color: var(--bs-primary) !important; /* Forces your custom gray color to override the blue link color */
}

/* Ensure no underlines appear on the text within the category header */
.card-body .d-flex[data-bs-toggle="collapse"] h5 {
    text-decoration: none;
}

.card-header.bg-primary {
    /* This rule will now use your new custom color (#1e704a) */
    background-color: var(--bs-primary) !important;
}

html {
    background-color: #000; /*THEME COLOR*/
    font-size: 14px;
    font-family: 'Roboto', sans-serif; /* Apply Google Font globally */
    height: 100%; /* Ensure full height for the layout */
    margin: 0; /* Remove all margins */
    padding: 0; /* Remove any padding */
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}


/*A80A78 es el color del borde*/
/* Focus states for buttons, form controls, etc. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #C5B9AE;
}

body {
    margin: 0;
    font-family: 'Roboto', sans-serif; /* Ensure the body also uses Roboto */
    color: black;
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Ensure full height for the layout */
    /*background-image: var(--background-image-path); /* Path to your background image */
    background-size: cover; /* Ensure the image covers the entire viewport */
    background-color: rgba(242, 232, 222, 1);
    background-position: center; /* Centers the image on the screen */
}

/* Main content should take up the remaining space */
main {
    flex: 1;
    margin: 0; /* Ensure no margin in the main content */
    padding: 0; /* Ensure no padding in the main content */
}


.transparent-box-wrapper {
    width: 98%; /* Occupy 95% of the available horizontal space */
    max-width: 1200px; /* Optional: Set a maximum width for larger screens */
    margin: 0 auto; /* Center the box horizontally */
}

.transparent-box-wrapper-promotions {
    width: 100%;
    max-width: 100%; /* Ensure it can expand fully */
    margin: 0 auto;
    padding: 0; /* Ensure no unwanted padding here */
}

transparent-box-wrapper-membership {
    width: 100%; /* Occupy 95% of the available horizontal space */
    max-width: 100%; /*Optional: Set a maximum width for larger screens */
    margin: 0 auto; /* Center the box horizontally */
    padding: 0; /* Ensure no unwanted padding here */
}
/* Transparent box styling */
.transparent-box {
    background-color: rgba(242, 232, 222, 1); /* Semi-transparent background */
    border-radius: 5px; /* Rounded corners */
    /* border-style: solid;*/
    /*border-width: 3px;*/
    /*border-color: black;*/
    padding: 0px 10px 15px 10px; /* Top & Bottom: 10px, Left & Right: 20px  or Top Right Bottom Left */
    /*box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25); /* Refined shadow for better visibility */
    margin-top: 10px; /* Space between the box and the top of the page */
    width: 100%; /* Occupy 95% of the screen width */
    max-width: 1200px; /* Limit max width on larger screens */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    font-family: 'Roboto', sans-serif; /* Change the font to Roboto */
    color: rgba(22, 5, 36, 1);
    font-size: 1.3rem; /* Slightly increase the font size */
    font-weight: normal; /* Normal weight */
}

/* Transparent box styling */
.transparent-box-secondary {
    background-color: rgba(255, 255, 255, .50); /* Semi-transparent background */
    border-radius: 3px; /* Rounded corners */
    padding: 20px; /* Padding for spacing */
    /*box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25); /* Refined shadow for better visibility */
    margin-top: 4px; /* Space between the box and the top of the page */
    width: 100%; /* Occupy 95% of the screen width */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    font-family: 'Roboto', sans-serif; /* Change the font to Roboto */
    color: rgba(22, 5, 36, 1);
    font-size: 1.2rem; /* Slightly increase the font size */
    font-weight: normal; /* Normal weight */
    justify-content: left;
    align-items: start;
    text-align: left;
}

.transparent-box-text {
    background-color: rgba(255, 255, 255, .50); /* Semi-transparent background */
    border-radius: 3px; /* Rounded corners */
    padding: 20px; /* Padding for spacing */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25); /* Refined shadow for better visibility */
    margin-top: 4px; /* Space between the box and the top of the page */
    width: 100%; /* Occupy 95% of the screen width */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    font-family: 'Roboto', sans-serif; /* Change the font to Roboto */
    color: dimgrey;
    font-size: .9rem; /* Slightly increase the font size */
    font-weight: normal; /* Normal weight */
    justify-content: left;
    align-items: start;
    text-align: left;
}


.secondary-container {
    border-radius: 3px; /* Rounded corners */
    border-style: solid;
    border-width: 1px;
    border-color: rgba(97, 97, 96, 1);
    padding: 10px 5px 5px 10px; /*Top Right Bottom Left*/
}

/* Input size adjustments */
.custom-input-size {
    padding: 0.8rem 1rem; /* Adjust the padding for input height */
    height: auto; /* Remove the incorrect height declaration */
    font-size: 1.3rem; /* Adjust font size */
    line-height: 1.5; /* Line height for readability */
}

/* Custom label styling */
.custom-title {
    /*family was removed*/
    color: var(--custom-title-color);
    font-size: var(--custom-title-font-size); /* Slightly increase the font size */
    font-weight: var(--custom-title-font-weight); /* Normal weight */
    font-style: var(--custom-title-font-style);
    letter-spacing: var(--custom-title-letter-spacing);
    line-height: var(--custom-title-line-height);
}

.custom-secondary-title {
    /*family was removed*/
    width: 98%;
    color: var(--custom-secondary-title-color);
    background-color: var(--custom-secondary-title-background-color);
    /*font-family: var(--custom-secondary-title-font-family);*/
    font-size: var(--custom-secondary-title-font-size); /* Slightly increase the font size */
    font-weight: var(--custom-secondary-title-font-weight); /* Normal weight */
    font-style: var(--custom-secondary-title-font-style);
    letter-spacing: var(--custom-secondary-title-letter-spacing);
    box-shadow: var(--custom-secondary-title-box-shadow) var(--custom-secondary-title-box-shadow-color);
    border-radius: var(--custom-secondary-title-border-radius);
    border: var(--custom-secondary-title-border-thickness) solid var(--custom-secondary-title-border-color); /* Green border with RGBA */
    margin: 0 auto;
}

.custom-container {
    /*family was removed*/
    width: var(--custom-container-width);
    color: var(--custom-container-color);
    background-color: var(--custom-container-background-color);
    /*font-family: var(--custom-container-font-family);*/
    font-size: var(--custom-container-font-size); /* Slightly increase the font size */
    font-weight: var(--custom-container-font-weight); /* Normal weight */
    font-style: var(--custom-container-font-style);
    letter-spacing: var(--custom-container-letter-spacing);
    /*box-shadow: var(--custom-container-box-shadow) var(--custom-container-box-shadow-color);*/
    border-radius: var(--custom-container-border-radius);
    border: var(--custom-container-border-thickness) solid var(--custom-container-border-color); /* Green border with RGBA */
    margin: 0 auto;
    justify-content: left;
    align-items: start;
    text-align: left;
    padding: 4px 4px 4px 8px;
}

    .custom-container a, .custom-container a:visited, .custom-container a:hover, .custom-container a:active {      
        color: var(--custom-container-color); /* Purple for visited links */
        text-decoration: underline;
    }

/*custom map*/
.custom-map {
    border-radius: 5px;
}

/* Custom label styling */
.custom-label {
    font-family: 'Roboto', sans-serif; /* Change the font to Roboto */
    color: white;
    font-size: 1.1rem; /* Slightly increase the font size */
    font-weight: normal; /* Normal weight */
}

/*check inputs*/

/* Change Checkbox Border and Background Color */
.form-check-input:checked {
    background-color: rgba(97, 97, 96, 1); /* Checkbox background when checked */
    border-color: #1E2A36; /* Checkbox border when checked */
}

/* Change the Checkmark Color (if supported by the browser) */
.form-check-input:checked::after {
    color: white; /* Checkmark color */
}

/*-------------------FORM-----------------*/

/* Global color for form-floating labels and inputs */
.form-floating .form-control {
    color: black; /* Text color for input field */
    background-color: white; /* Background color of the input field */
}

    .form-floating .form-control:focus {
        color: dimgrey; /* Change text color when input is focused */
        background-color: #fff; /* Background color when input is focused */
    }

.form-floating label {
    color: lightslategray; /* Color for floating label */
}

.form-floating .form-control::placeholder {
    color: transparent; /* Hides placeholder text when floating label is active */
}

/* Input Styling */
.custom-input-with-placeholder {
    padding-top: 1.2rem; /* Ensure space for the label */
    padding-bottom: 0.3rem;
    border: 1.5px solid var(--input-border-color); /* Optional: Customize border color */
    border-radius: 3px; /* Optional: Add rounded corners */
    font-size: 1.4rem;
    height: 3.7rem; /* Increase the height */
    /* background-color: #fffcad; /* Light blue background */
    background-clip: padding-box;
}

.custom-select-with-placeholder {
    background-color: #fffcad; /* Light blue background */
    border-radius: 3px; /* Optional: To match input fields */
    padding: 0.5rem; /* Consistent padding */
    background-clip: padding-box; /* Ensures the background is clipped correctly */
}

/* Floating Label Styling */
.custom-floating-label {
    position: absolute;
    top: 0.25rem;
    left: 0.75rem;
    color: #A7B2BD; /*default color for floatin label*/
    font-size: 0.9rem;
    pointer-events: none; /* Prevent label from interfering with input */
    transition: all 0.2s ease-in-out;
}

/* When input is focused or has value *** on focus it changes to this color*/
.custom-input-with-placeholder:focus + .custom-floating-label,
.custom-input-with-placeholder:not(:placeholder-shown) + .custom-floating-label {
    top: .25rem;
    left: 0.75rem;
    font-size: 0.75rem;
    color: #9c9c9c; /* Optional: Dim the label color */
    background-color: #FFFFFF;
}

/* Placeholder Styling */
.custom-input-with-placeholder::placeholder {
    color: #000000; /*color del default text*/
    /*font-weight: bold;*/
    font-style: normal;
}

/* Hide placeholder on focus */
.custom-input-with-placeholder:focus::placeholder {
    color: transparent; /* Make placeholder invisible on focus */
}
/*-------------------FORM-----------------*/

/* Customize secondary button CHECK IF USED*/

.btn-primary {
    background-color: #1E2A36; /* Gray background */
    border-color: #1E2A36; /* Gray border */
    color: white;
    font-family: "Poppins", serif;
    font-size: 0.75rem;
}

.btn-secondary {
    background-color: #27B990; /* Gray background */
    border-color: #27B990; /* Gray border */
    color: white; /* White text */
}

.btn-secondary:hover {
    background-color: #107D61; /* Darker gray on hover */
    border-color: #107D61; /* Darker border on hover */
}

.btn-scanner {
    background-color: #616160; /* Gray background */
    border-color: #616160; /* Gray border */
    color: white;
    align-items: center; /* Vertically aligns the spinner and text */
    justify-content: center; /* Centers content horizontally */
    align-content: center;
    font-family: var(--button-text-font-family);
    font-weight: var(--button-text-font-weight);
    font-style: var(--button-text-font-style);
    font-size: 2rem;
    letter-spacing: var(--button-text-letter-spacing);
    padding: 5px 40px;
    /*text-shadow: 1px 1px #363636;*/
    border-radius: 40px;
    margin: 4px;
    outline: none;
    transition: background-color 0.3s ease;
}

#btnClose {
    position: absolute;
    top: 5px; /* Adjust vertical position */
    right: 5px; /* Adjust horizontal position */
    z-index: 10; /* Ensure it floats above the video */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border: none;
    border-radius: 50%; /* Make it round */
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: white; /* Color of the 'X' */
    font-size: 16px;
    line-height: 1;
    padding: 0;
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


.btn-scanner:hover {
    background-color: #D7DDE4; /* darker shade */
    border-color: #D7DDE4;    
    color: #1E2A36;
    font-family: "Poppins", serif;
}

.custom-progress-bar {
    max-width: 180px; /* Limit the image width */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* Prevent unwanted spacing below image */
    margin: 0 auto; /* Center if inside a flex or block container */
}


/*IMAGE VARIANT*/
.custom-variant-img {
    max-width: 140px; /* Limit the maximum width */
    border: var(--custom-variant-img-border-thickness) solid var(--custom-variant-img-border-color);
    border-radius: var(--custom-variant-img-border-radius);
    box-shadow: var(--custom-variant-img-box-shadow) var(--custom-variant-img-box-shadow-color);
}

.custom-img {
    max-width: 140px; /* Limit the maximum width */
    border: var(--custom-img-border-thickness) solid var(--custom-img-border-color);
    border-radius: var(--custom-img-border-radius);
    box-shadow: var(--custom-img-box-shadow) var(--custom-img-box-shadow-color);
}

.custom-img-listing {
    max-width: 100px; /* Limit the maximum width */
    border: var(--custom-img-listing-border-thickness) solid var(--custom-img-listing-border-color);
    border-radius: var(--custom-img-listing-border-radius);
}

/* Global link color */
a {
    color: #5b5c5e; /* Custom link color */
    text-decoration: underline; /* Optionally remove underline */
}

    /* Link hover color */
    a:hover {
        color: #c9deff; /* Same color on hover */
        text-decoration: underline; /* Optionally add underline on hover */
    }

/*header*/

.img-main-logo {
    max-height: 46px;
    padding-left: 20px;
}

.custom-toggler {
    background-color: rgba(255, 255, 255, 0); /* Light gray */
    height: 45px; /* Increase button height */
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .custom-toggler:hover {
        background-color: var(--toggler-hover-color);
    }

    .custom-toggler:focus {
        outline: none; /* Remove focus outline */
        box-shadow: none; /* Remove shadow effect (if any) */
    }

    .custom-toggler .toggler-line {
        display: block;
        width: 30px;
        height: 3px;
        background-color: rgba(22, 5, 36, 1); /* Add your desired color */
        margin: 5px 0; /* Spacing between lines */
        border-radius: 2px; /* Optional: Rounded edges for lines */
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Apply cross effect when the menu is expanded (aria-expanded="true") */
    .custom-toggler[aria-expanded="true"] .toggler-line:nth-child(1) {
        transform: translateY(12px) rotate(45deg); /* Move down and rotate */
    }

    .custom-toggler[aria-expanded="true"] .toggler-line:nth-child(2) {
        opacity: 0; /* Hide the middle line */
    }

    .custom-toggler[aria-expanded="true"] .toggler-line:nth-child(3) {
        transform: translateY(-12px) rotate(-45deg); /* Move up and rotate */
    }

/*Nav bar*/

/*.navbar-padding {
    padding-left: 20px;
    padding-right: 20px;
}*/

.custom-header {
    background-color: var(--header-bg-color); /* Replace with your desired background color */
    box-shadow: var(--header-shadow);
    font-family: "Barlow", serif;
    font-weight: 600;
    font-style: normal;
    color: rgba(22, 5, 36, 1);
}

.nav-link {
    font-family: "Barlow", serif;
    font-weight: 600;
    font-style: normal;
    color: rgba(22, 5, 36, 1) !important; /* Change the text color */
    font-size: 18px; /* Adjust font size */
    /*font-weight: bold; /* Optional: Make the text bold */
    /*text-transform: uppercase; /* Optional: Transform text to uppercase */
    text-decoration: none; /* Remove underline */
    display: flex; /* Align icon and text horizontally */
    align-items: center; /* Vertically align icon with text */
}

.nav-item {
    margin-left: 15px; /* Add spacing to the left of each nav item */
    margin-right: 15px; /* Add spacing to the right of each nav item */
}

    /* Change color on hover */
    .nav-link:hover {
        color: var(--header-text-color-hover) !important; /* Hover color */
        text-decoration: none; /* Optional: Add underline on hover */
    }

.nav-link .icon {
    width: 24px; /* Adjust size as needed */
    height: 24px; /* Maintain aspect ratio */
    margin-right: 6px; /* Space between icon and text */
    vertical-align: top; /* Align SVG with the middle of the text */
    fill: var(--icon-fill-color); /* Inherit color from parent link */
}

/*secondary icon*/

.svg-close-button-wrapper {
    margin-top: 0px; /* Space between text and SVG */
    display: flex;
    justify-content: center; /* Center horizontally */
    cursor: pointer;
}

.secondary-icon {
    width: 50px; /* Adjust size as needed */
    height: 50px;
    fill: rgba(104, 91, 199, 1); /* Default color for the icon */
    transition: fill 0.3s ease;
}

/* Footer Styling */
footer {
    font-family: "Barlow", serif;
    font-weight: 600;
    color: var(--footer-text-color); /* Custom footer text color (white) */
    background-color: var(--footer-bg-color); /* Optional: Set a background color for contrast */
    text-align: right;
    width: 100%;
    margin: 0;
    border: 0;
    margin-top: auto; /* Ensure footer is at the bottom */
    padding: 14px; /* Reduce padding to lessen the height */
}

/*FORM*/


.container-template {
    background-color: rgba(204, 217, 255,.70);
    border-radius: 25px;
    align-content: center; /* Vertically center the content */
    align-items: center; /* Vertically center the content */
    text-align: center; /* Center the text horizontally */
    margin: 2px; /* Ensure no margin */
    padding: 8px; /* Ensure no padding */
}


.myCustomButton {
    /*font-size: 1.2rem; /* Increase font size (adjust as needed) */
    /*padding: 0.50rem 2rem; /* Adjust padding to balance with the larger font */

    font-family: var(--button-text-font-family);
    font-weight: var(--button-text-font-weight);
    font-style: var(--button-text-font-style);
    font-size: var(--button-text-font-size);
    letter-spacing: var(--button-text-letter-spacing);
    color: var(--button-text-color);
    padding: 5px 40px;
    /*text-shadow: 1px 1px #363636;*/
    border-radius: 40px;
    margin: 4px;
    background-color: rgba(195, 207, 193, 1);
    border: 2px solid var(--button-border-color);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);

}

    .myCustomButton:hover {
        background-color: rgba(195, 207, 193, 1);
        border-color: var(--button-border-color-hover);
        color: var(--button-text-color-hover);
    }

.myCustomSecondaryButton {
    /*font-size: 1.2rem; /* Increase font size (adjust as needed) */
    /*padding: 0.50rem 2rem; /* Adjust padding to balance with the larger font */

    font-family: var(--button-secondary-text-font-family);
    font-weight: var(--button-secondary-text-font-weight);
    font-style: var(--button-secondary-text-font-style);
    font-size: var(--button-secondary-text-font-size);
    letter-spacing: var(--button-secondary-text-letter-spacing);
    color: var(--button-secondary-text-color);
    padding: 5px 10px;
    /*text-shadow: 1px 1px #363636;*/
    border-radius: 40px;
    margin: 4px;
    background-color: var(--button-secondary-background-color);
    border: 2px solid var(--button-secondary-border-color);
    /*box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);*/
}

    .myCustomSecondaryButton:hover {
        background-color: var(--button-secondary-background-color-hover);
        border-color: var(--button-secondary-border-color-hover);
        color: var(--button-secondary-text-color-hover);
    }

/*google maps*/

#custom-tooltip-map {
    font-size: 1.2rem;
    /*line-height: 95%;*/
    letter-spacing: -1px;
}
/*
.gm-style .gm-style-iw-c {
    padding: 0px 4px 0px 10px !important;
    margin: 0px 0px 10px 0px !important;    
}

/*google maps*/

/*CheckMark css*/
.checkmark-wrapper {
    width: var(--check-size);
    height: var(--check-size);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

    .checkmark-wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        border: var(--check-border-width) solid #c5b9ae;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        z-index: 0;
    }

    .checkmark-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        border: var(--check-border-width) solid transparent;
        border-left-color: var(--checkmark-color);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: block;
        z-index: 1;
        animation: circle linear forwards .75s;
    }

.checkmark {
    height: var(--checkmark-height);
    width: var(--checkmark-width);
    position: absolute;
    opacity: 0;
    left: var(--checkmark-left);
    top: var(--checkmark-top);
    display: block;
    border-left: var(--check-border-width) solid var(--checkmark-color);
    border-bottom: var(--check-border-width) solid var(--checkmark-color);
    transform-origin: left top;
    transform: rotate(-45deg);
    animation: checkmark linear both 1s;
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    80% {
        height: 0;
        width: 0;
        opacity: 0;
    }

    90% {
        height: var(--checkmark-height);
        width: 0;
        opacity: 1;
    }

    100% {
        height: var(--checkmark-height);
        width: var(--checkmark-width);
        opacity: 1;
    }
}

@keyframes circle {
    0% {
        border-color: transparent;
        border-left-color: var(--checkmark-color);
    }

    90% {
        transform: rotate(-360deg);
        border-color: transparent;
        border-left-color: var(--checkmark-color);
    }

    100% {
        transform: rotate(-360deg);
        border-color: var(--checkmark-color);
    }
}
/*checkmark end*/

/*modal*/

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(100, 100, 100, .85);
}

.modal-content {
    font-family: var(--modal-font-family);
    font-weight: var(--modal-font-weight);
    color: var(--modal-font-color);
    background-color: rgba(255, 255, 255, .90);
    font-size: 1.8rem;
    padding: 0px;
    border-radius: var(--modal-border-radius);
    text-align: center;
    max-width: 100%;
    /*max-height: 60%;*/
    box-shadow: var(--modal-box-shadow) var(--modal-box-shadow-color);
}

.modal-dialog {
    max-width: 100%;    
}


/*flip div*/
.variantImage {
    transition: transform 1s linear;
    transform-style: preserve-3d;
}

.variantImage.flipped {
    transform: rotateY(180deg);
}
/*end flip div*/

.custom-button {
    min-width: 300px;
    min-height: 60px;
    display: inline-flex;
    font-size: 22px;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #313133;
    background: #4FD1C5;
    background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
    border: none;
    border-radius: 1000px;
    box-shadow: 12px 12px 24px rgba(79,209,197,.64);
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
}

    .custom-button::before {
        content: '';
        border-radius: 1000px;
        min-width: calc(300px + 12px);
        min-height: calc(60px + 12px);
        border: 6px solid #00FFCB;
        box-shadow: 0 0 60px rgba(0,255,203,.64);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: all .3s ease-in-out 0s;
    }

    .custom-button:hover,
    .custom-button:focus {
        color: #313133;
        transform: translateY(-6px);
    }

        .custom-button:hover::before,
        .custom-button:focus::before {
            opacity: 1;
        }

    .custom-button::after {
        content: '';
        width: 30px;
        height: 30px;
        border-radius: 100%;
        border: 6px solid #00FFCB;
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: ring 1.5s infinite;
    }

    .custom-button:hover::after,
    .custom-button:focus::after {
        animation: none;
        display: none;
    }

@keyframes ring {
    0% {
        width: 30px;
        height: 30px;
        opacity: 1;
    }

    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

.instruction-inline img {
    height: 32px;
    margin-left: 8px;
    border-radius: 5px;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow */
}

.instruction-block img {
    width: 90%;
    max-width: 600px;
    display: block;
    margin: 10px auto 0 auto;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* slightly more pronounced */
}

.warning-box {
    background-color: rgba(254, 182, 2, 1); /* Semi-transparent background */
    border-radius: 5px; /* Rounded corners */
    padding: 5px 5px 15px 10px; /* Top & Bottom: 10px, Left & Right: 20px  or Top Right Bottom Left */
    /*box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25); /* Refined shadow for better visibility */
    width: 100%; /* Occupy 95% of the screen width */
    margin-right: auto; /* Center horizontally */
    font-family: 'Roboto', sans-serif; /* Change the font to Roboto */
    color: rgba(22, 5, 36, 1);
    /* font-size: 1.3rem; Slightly increase the font size */
    font-weight: normal; /* Normal weight */
}


/* BASE CARD CONTAINER - Defines the card's proportional size */
/* ============================================= */
.card-overlay {
    position: relative;
    max-width: 638px;
    /* Key for responsiveness: maintains the 638x1045 vertical ratio */
    aspect-ratio: 638 / 1045;
    overflow: hidden;
    /* Optional: Add shadow to make it look like a physical card */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: transparent;
}

/* --- LOGO Container Positioning and Size --- */
#logo-div {
    position: absolute;
    /* Sizing the container: Use a single dimension (e.g., width) for square shape */
    width: 38.2%;
    height: 38.2%;
    /* Centering Horizontally and positioning on the upper part */
    left: 50%;
    transform: translateX(-50%);
    top: 1%; /* <<< ADJUST THIS VALUE for vertical position */
    /* Optional: White background for visibility */
    border-radius: 5px;
    padding: 5px;
    z-index: 10;
}

    /* --- LOGO IMAGE FIX --- */
    #logo-div img {
        width: 100%;
        height: 100%;
        /* THE FIX: Ensures the image maintains its square aspect ratio */
        object-fit: contain;
    }

/* ============================================= */
/* TEXT FIELD POSITIONING (You will adjust these) */
/* ============================================= */
.card-field {
    position: absolute;
    color: black;
    font-family: "Poppins", serif;
    font-size: 1.4rem;
    z-index: 10;
    font-weight: 500; /* Adjusted for better readability */
    text-align: center;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

#cardholder-name {
    font-size: 1.4rem;
    font-weight: 550;
    top: 36%;
}

#member-id {
    top: 41%;
}

#expiration-date {
    top: 46%;
}

#membership-type {
    top: 91%;
    color: white;
    font-size: 2.2rem;
}

#membership-otp {
    top: 79%;
}

#membership-otp-expiration {
    top: 83%;
}

/* --- QR CODE Positioning --- */
#qr-code-div {
    position: absolute;
    /* Sizing the container: Use a single dimension (e.g., width) for square shape */
    top: 49%;
    /* Centering Horizontally and positioning on the upper part */
    left: 50%;
    transform: translateX(-50%);
    /* Optional: White background for visibility */
    border-radius: 5px;
    padding: 5px;
    z-index: 10;
    aspect-ratio: 1 / 1;
}

/*back*/

.card-field-back {
    position: absolute;
    color: black;
    font-family: "Poppins", serif;
    font-size: 1.4rem;
    z-index: 10;
    font-weight: 500; /* Adjusted for better readability */
    text-align: center;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

#cardholder-address {
    font-size: 1.4rem;
    line-height: 1;
    text-align: left;
    top: 30%;
}

#cardholder-email {
    font-size: 1.4rem;
    line-height: 1;
    text-align: left;
    top: 50%;
}

#cardholder-phone {
    font-size: 1.4rem;
    line-height: 1;
    text-align: left;
    top: 55%;
}

#cardholder-expiration {
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
    color: white;
    top: 60%;
}

#cardholder-addons {
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
    color: white;
    top: 70%;
}

#member-since {
    text-align: center;
    color: white;
    font-size: 1.4rem;
    line-height: 1;
    top: 65%;
}

#card-back-title {
    font-size: 2.2rem;
    text-align: center;
    color: rgba(245, 216,137 ,1);
    top: 34%;
}

#cardholder-membership {
    font-size: 1rem;
    text-align: center;
    top: 93%;
}

#cardholder-membership-savings {
    font-size: 2.2rem;
    text-align: center;
    color: rgba(24, 47,66,1);
    top: 91%;
}





#qrcode {
    border-radius: 18px;
    display: inline-block;
    margin-top: 20px;
    padding: 10px;
    background-color: white;
}

/*add*/

/* ============================================= */
/* CARD FLIP STYLING (2D FADE-FLIP)              */
/* ============================================= */

/* 1. Base Container Setup (Fixes Height Collapse) */
.transparent-box-wrapper-membership {
    position: relative;
    /* IMPORTANT: Adjust this height to match the actual height of your card image (wgcCard.png). */
    height: 380px; /* Example height to maintain document flow */
}


/* 2. Flipper and Face Setup */
.card-flipper,
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* Smooth transition for the rotation and opacity change */
    transition: transform 0.4s ease-in, opacity 0.4s ease-in;
}

/* 3. Initial State: Front is visible, Back is hidden and pre-rotated */
.card-front {
    z-index: 2; /* Front is on top initially */
    transform: rotateY(0deg);
    opacity: 1;
}

.card-back {
    z-index: 1; /* Back is underneath the front initially */
    transform: rotateY(-90deg); /* Pre-rotate away */
    opacity: 0; /* Hide the back initially */
    /* Optional: Ensure text/content looks centered by adjusting transform origin (helps with 2D look) */
    transform-origin: center center;
}


/* 4. FLIPPED STATE: When 'is-flipped' class is applied */
.card-flipper.is-flipped .card-front {
    z-index: 1; /* Drop front z-index */
    transform: rotateY(90deg); /* Rotate away */
    opacity: 0; /* Hide the face */
}

.card-flipper.is-flipped .card-back {
    z-index: 2; /* Bring back z-index to the top */
    transform: rotateY(0deg); /* Rotate into view */
    opacity: 1; /* Show the face */
}

/* 5. Button Container Styling (Ensures button is visible and below the card) */
#button-container {
    position: relative;
    z-index: 20; /* High z-index to guarantee visibility over any card layering */
    margin-top: 230px; /* Pushes the button down from the card bottom */
}

/*add*/


.collapse-icon {
    transition: transform 0.3s ease;
    display: block; /* Ensures rotation works reliably */
}

/* Style applied when the card-header is NOT collapsed (i.e., when the content is shown) */
.card-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

.highlight {
    background-color: yellow;
    transition: background-color 0.5s ease;
}

[data-bs-toggle="collapse"][aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

#scanner {
    width: 100%;
    max-width: 300px; /* or 40% if you prefer */
    aspect-ratio: 1 / 1; /* or 4/3 -> 4 / 3, or 16/9 -> 16 / 9 */
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* optional */
}

#scanner video, #scanner canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops to fit the box neatly */
}


.panel-host {
    /* Same horizontal feel as your scanner: centered block */
    width: 100%;
    max-width: 300px; /* match your scanner max-width */
    height: 360px; /* pick a height that fits both panels comfortably */
    margin: 0 auto 1rem auto;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center; /* centers children nicely */
    background-color: transparent;
}

.panel-host .panel {
    /* Make each panel fill the host area */
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
/* Optional fade switch */
.panel-host .panel {
    opacity: 0;
    transition: opacity 180ms ease-in-out;
    position: absolute;
    inset: 0;
}

    .panel-host .panel.active {
        opacity: 1;
        position: absolute;
        inset: 0;
    }

/*OTP*/
.otp-group {
    display: grid;
    grid-template-columns: repeat(6, 48px);
    gap: 3px;
    justify-content: center;
}

.otp-input {
    text-align: center;
    font-size: 1.25rem;
    padding: .5rem 0;
    border: 1px solid #ced4da;
    border-radius: .5rem;
    outline: none;
    width: 46px;
    height: 46px;
}

    .otp-input:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
    }
/* Optional: bigger boxes on very small screens */
@media (max-width: 360px) {
    .otp-group {
        grid-template-columns: repeat(6, 42px);
        gap: 8px;
    }

    .otp-input {
        width: 42px;
        height: 42px;
    }
}


/*TOGGLE*/

/* ---- WGC Stylish Toggle ---- */
.wgc-toggle {
    position: relative;
    display: inline-block;
    user-select: none;
}

.wgc-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wgc-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    position: relative;
}

.wgc-toggle-slider {
    width: 50px;
    height: 26px;
    border-radius: 999px;
    background: #F5ECE5; /* light gray */
    position: relative;
    transition: background 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

    .wgc-toggle-slider::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #D7DDE4;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        box-shadow: 0 1px 2px rgba(0,0,0,.15);
    }

.wgc-toggle-input:checked + .wgc-toggle-label .wgc-toggle-slider {
    background: #C3CFC1; /* Bootstrap primary */
}

    .wgc-toggle-input:checked + .wgc-toggle-label .wgc-toggle-slider::before {
        transform: translateX(24px);
    }

.wgc-toggle-text {
    font-size: inherit; /* or remove font-size entirely */
    line-height: 1;
    color: #6c757d;
    position: relative;
    min-width: 64px;
    width: 64px;
    text-align: left;
    display: inline-block;
}

.wgc-toggle-input:checked + .wgc-toggle-label .wgc-toggle-text {
    color: #0bb868; /* Bootstrap success */
}

.wgc-toggle-text::after {
    content: attr(data-off);
}

.wgc-toggle-input:checked + .wgc-toggle-label .wgc-toggle-text::after {
    content: attr(data-on);
}

/* Sparkles container (no clicks) */
.wgc-sparkles {
    position: absolute;
    right: -9px; /* nudged to the right edge of the slider */
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    pointer-events: none;
    /* opacity: 0;  <-- REMOVE THIS LINE */
}

    /* Use a single pseudo-element with multiple box-shadows as particles */
    .wgc-sparkles::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(0.2);
        /* Multiple colored particles radiating out */
        box-shadow: 0 -18px 0 0 #ffd166, 12.7px -12.7px 0 0 #06d6a0, 18px 0 0 0 #ef476f, 12.7px 12.7px 0 0 #118ab2, 0 18px 0 0 #f78c6b, -12.7px 12.7px 0 0 #83c5be, -18px 0 0 0 #ffd6e0, -12.7px -12.7px 0 0 #cdb4db;
        opacity: 0;
    }

/* Trigger the burst on toggle ON */
.wgc-toggle-input:checked + .wgc-toggle-label .wgc-sparkles::before {
    animation: wgc-burst 520ms ease-out forwards;
}

/* Optional: tiny pop on the knob, feels snappier */
.wgc-toggle-input:checked + .wgc-toggle-label .wgc-toggle-slider::before {
    animation: wgc-pop 160ms ease-out;
}

@keyframes wgc-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
        filter: blur(0px);
    }

    15% {
        opacity: 1;
    }

    60% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0;
        filter: blur(0.5px);
    }
}

@keyframes wgc-pop {
    0% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(12px) scale(1.06);
    }

    100% {
        transform: translateX(24px) scale(1);
    }
}

.wgc-discountvalue {
    background-color: #ffc107; /* Bootstrap’s bg-warning */
    color: #212529; /* Bootstrap’s text-dark */
    border-radius: 0.375rem; /* same as .badge */
    font-weight: 500; /* 👈 reset to normal */
    font-size: 0.875em; /* same scale */


    display: inline-flex; /* 👈 switch from inline-block to inline-flex */
    align-items: center; /* 👈 vertically centers text inside */
    justify-content: center; /* keeps text centered horizontally too */
    padding: 0.35em 0.65em;
    line-height: 1;

    visibility: hidden; /* hidden until toggle ON */
    opacity: 0; /* fade control */
    transform: translateY(-2px); /* subtle lift */
    pointer-events: none; /* not clickable while hidden */
    transition: opacity 250ms cubic-bezier(0.22, 1, 0.36, 1), transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce) {
    .wgc-discountvalue {
        transition: none;
    }
}

.wgc-toggle-input:checked ~ p .wgc-discountvalue {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.wgc-toggle-label,
.wgc-code-label {
    font-size: 0.875em;
}

.wgc-toggle-input:checked ~ p .wgc-discountvalue {
    visibility: visible;
}

.wgc-code-label .badge {
    vertical-align: middle; /* centers badge with text baseline */
    position: relative;
}


/* Show the code badge when the toggle is already activated (locked) */
.wgc-discountvalue.wgc-show {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}


/* ===== Promotion Activation Line Layout ===== */
/* Wrapper to reserve space even when activation info is empty */
.activation-slot {
    min-height: 1.25rem; /* always keeps one line of space */
    display: block;
    margin-top: 0.5rem;
}

/* The actual <small> element that displays the activation text */
.activation-info {
    display: block; /* ensure it stacks properly */
    min-height: 1.25rem; /* keeps consistent vertical rhythm */
    line-height: 1.25rem; /* aligns text nicely within the slot */
    color: #198754; /* Bootstrap text-success color */
}

/* When not yet activated: hide text but preserve space */
.invisible {
    visibility: hidden; /* hides text, keeps space occupied */
}

/* Fade-in animation for a smoother reveal when activated */
.activation-info.revealed {
    animation: activation-fade-in 180ms ease-out;
}

@keyframes activation-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Optional: if you want slight spacing above/below activation line */
.activation-info.mt-1 {
    margin-top: 0.25rem; /* standard Bootstrap spacing */
}



/* Make this a positioning context for the overlay */
#qrSection {
    position: relative;
}

/* Overlay that sits on top of the scanner box */
#qrScannedBanner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Match scanner width & centering (max-width:300, margin:auto) */
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    /* Full cover of the scanner area (nice overlay look) */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: rgba(25, 135, 84, 0.85);  green semi-transparent */
    background: transparent;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 40px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none; /* so it doesn't block clicks/taps if visible */
}
/* ==== PRODUCT LIST CARD ==== */
.custom-product-list {
    background-color: #DEE5ED;
    border-radius: 24px;
    padding: 18px 20px;
    margin-top: 1.5rem;
    font-family: "Poppins", serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

    /* each product row */
    .custom-product-list .list-group-item {
        background-color: transparent;
        border: none;
        padding: 12px 0 10px 0;
        margin-bottom: 0;
    }

/* header: name + thin hr */
/*.product-header strong {
    display: block;
    font-size: 1.15rem;*/ /* a bit bigger */
    /*font-weight: 700;
    color: #1E2A36;
}*/


.product-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}

    /* Checkbox styling so it aligns better */
    .product-header .product-toggle {
        transform: scale(1.2); /* make it slightly bigger */
        cursor: pointer;
        margin-left: 12px;
    }

        /* When product is locked (IdType=1) */
        .product-header .product-toggle[disabled] {
            cursor: not-allowed;
            opacity: 0.7;
        }

.product-title-separator {
    border: none;
    border-top: 1px solid #cfd7e2; /* thin separator under name */
    margin: 6px 0 8px 0;
    opacity: 0.9;
}

/* body: description + price columns */
.product-body {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* left side: description (70%) */
.product-description {
    flex: 0 0 70%;
    font-size: 0.9rem; /* smaller */
    line-height: 1.5;
    color: #394a5a;
}

/* right side: price (30%) */
.product-price-column {
    flex: 0 0 30%;
    text-align: right;
    font-size: 0.95rem;
    padding-right: 8px; /* 👈 space from card border */
    display: flex; /* price + checkbox column */
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.product-price {
    font-weight: 700;
}

/* HR between products – heavier */
.product-separator {
    border: none;
    border-top: 2px solid #b4c0cf;
    margin: 14px 0 4px 0;
    opacity: 0.9;
}

/* Checkbox styling (optional subtle tweak) */
.product-check .form-check-input {
    cursor: pointer;
    transform: scale(1.1);
}

.price-label {
    display: block;
    margin-bottom: 2px;
}



/* dog line (label + dropdown) */
.dog-line {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.dog-label {
    font-size: 0.95rem;
    font-weight: 500;
    margin-right: 6px;
}

.dog-dropdown {
    width: 70px !important;
    min-width: 70px;
    font-size: 0.9rem;
}

/* ==== GRAND TOTAL STRIP ==== */
.grand-total {
    font-family: "Poppins", serif;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 2px solid #c6d0dc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grand-total-label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.grand-total-amount {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Optional: on very small screens, stack description + price */
@media (max-width: 480px) {
    .product-body {
        flex-direction: column;
        gap: 8px;
    }

    .product-price-column {
        text-align: left;
    }
}




/* Wrapper for customer form */
.customer-form-wrapper {
    background-color: #f7f9fc;
    padding: 15px 18px;
    border-radius: 20px;
    border: 1px solid #e1e7ef;
    font-family: "Poppins", serif;
}

/* Labels */
.customer-form-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #3e4a59;
}

/* Inputs */
.customer-form-input {
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 10px;
    font-family: "Poppins", serif;
}

/* Checkbox label */
.customer-form-wrapper .form-check-label {
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 5px;
}


.title-card {
    font-family: "Fredoka", sans-serif;
    background: #DEE5ED; /* clean white card */
    border-radius: 16px; /* soft rounded look */
    padding: 20px 25px;
    margin: 0 auto 5px auto;
    max-width: 100%; /* keeps it elegant */
    text-align: center;
    font-size: 2.2rem; /* slightly bigger */
    font-weight: 600; /* strong heading */
    color: #616160; /* dark readable text */
    border: 2px solid #DEE5ED; /* beige outline (matches pet theme) */
    line-height: 1.9rem; /* 👈 Optional: tighter spacing */
}

.title-card-small {
    font-family: "Fredoka", sans-serif;
    background: #DEE5ED; /* clean white card */
    border-radius: 16px; /* soft rounded look */
    padding: 15px 20px;
    margin: 0 auto 5px auto;
    max-width: 100%; /* keeps it elegant */
    text-align: center;
    font-size: 1.8rem; /* slightly bigger */
    font-weight: 600; /* strong heading */
    color: #616160; /* dark readable text */
    border: 2px solid #DEE5ED; /* beige outline (matches pet theme) */
    line-height: 1.6rem; /* 👈 Optional: tighter spacing */
}


.sub-title-card {
    font-family: "Poppins", serif;
    border-radius: 16px; /* soft rounded look */
    padding: 5px 5px;
    margin: 0 auto 5px auto;
    max-width: 100%; /* keeps it elegant */
    text-align: center;
    font-size: 1.4rem; /* slightly bigger */
    font-weight: 500; /* strong heading */
    color: #1E2A36; /* dark readable text */
}


.pulse-button {
    align-items: center; /* Vertically aligns the spinner and text */
    justify-content: center; /* Centers content horizontally */
    align-content: center;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.8rem;
    letter-spacing: -1px;
    color: #1E2A36;
    padding: 14px 14px;
    /*text-shadow: 1px 1px #363636;*/
    border-radius: 40px;
    margin: 5px;
    background-color: rgba(195, 207, 193, 1);
    border: 2px solid rgba(195, 207, 193, 1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    outline: none;
    transition: background-color 0.3s ease;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(195, 207, 193, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(195, 207, 193, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(195, 207, 193, 0);
    }
}

.pulse-button {
    animation: pulse 2s infinite;
}

    .pulse-button:hover {
        background-color: rgba(195, 207, 193, 1);
        border-color: rgba(195, 207, 193, 1);
        color: rgba(30, 42, 54, 1);
    }


.pulse-button-secondary {
    align-items: center; /* Vertically aligns the spinner and text */
    justify-content: center; /* Centers content horizontally */
    align-content: center;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.4rem;
    letter-spacing: -1px;
    color: #1E2A36;
    padding: 5px 10px;
    /*text-shadow: 1px 1px #363636;*/
    border-radius: 30px;
    margin: 4px;
    background-color: rgba(216, 156, 139, 1);
    border: 2px solid rgba(216, 156, 139, 1);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5);
    outline: none;
    transition: background-color 0.3s ease;
}

@keyframes pulse2 {
    0% {
        box-shadow: 0 0 0 0 rgba(195, 207, 193, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(195, 207, 193, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(195, 207, 193, 0);
    }
}

.pulse-button-secondary {
    animation: pulse2 2s infinite;
}

    .pulse-button-secondary:hover {
        background-color: rgba(216, 156, 139, 1);
        border-color: rgba(216, 156, 139, 1);
        color: rgba(30, 42, 54, 1);
    }

/**/
.purchase-type-card {
    border: 2px solid rgba(97, 97, 96, 1);
    border-radius: 12px;
    padding: 20px 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: rgba(97, 97, 96, 0.5);
    background: rgba(195, 207, 193, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

    .purchase-type-card:hover {
        background: rgba(195, 207, 193, 0.4);
        color: rgba(195, 154, 63, 0.7);
    }

    .purchase-type-card.active {
        border-color: #2F3E4D; /* Cyan theme color */
        background: rgba(195, 207, 193, 1);
        color: #616160;
        font-weight: bold;
    }

    .purchase-type-card i {
        margin-bottom: 10px;
        width: 36px;
        height: 36px;
    }

/* Loading Spinner Animation */
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.spin-animation {
    animation: spin 1.5s linear infinite;
}

#loadingOverlay {
    backdrop-filter: blur(5px);
}

/*gracias por tu compra*/

.order-info-overlay {
    font-size: 0.9rem; /* Smaller font */
    text-align: left; /* Align to the left */
    font-weight: normal; /* Remove bold from general text */
    margin-top: 10px;
    padding: 10px;
    line-height: 1.4;
    border-top: 1px solid rgba(0,0,0,0.1); /* Optional: subtle separator */
}