:root {
    --gap: 24px;
    --radius: 12px;
    --shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --shadow-hover: rgba(0, 0, 0, 0.15) 0px 8px 16px;
    /* Cores de Status */
    --color-approved: #28a745;
    --color-rejected: #dc3545;
    --color-pending: #ffc107;
    --color-pending-text: #333;
    --primary-brown-50: #FFF8F5;
    --primary-brown-100: #FFE1D6;
    --primary-brown-200: #F5BBA6;
    --primary-brown-300: #E09175;
    --primary-brown-400: #CC785A;
    --primary-brown-500: #B86142;
    --primary-brown-600: #A3573B;
    --primary-brown-700: #7A412C;
    --primary-brown-800: #522B1D;
    --primary-brown-900: #3D2016;
    --primary-brown-950: #29160F;
    --primary-green-50: #F5FFFC;
    --primary-green-100: #D6FFF1;
    --primary-green-200: #ADFFE4;
    --primary-green-300: #85FFD6;
    --primary-green-400: #3FE0AB;
    --primary-green-500: #08CC8B;
    --primary-green-600: #00A36D;
    --primary-green-700: #007A52;
    --primary-green-800: #005236;
    --primary-green-900: #003D29;
    --primary-green-950: #00291B;
    --primary-10: #fffaf7;
    --primary-20: #fff5ef;
    --primary-30: #ffeae0;
    --primary-40: #ffd8c2;
    --primary-50: #ffb590;
    --primary-60: #ffa47a;
    --primary-70: #ff9364;
    --primary-80: #ff824e;
    --primary-90: #ff7138;
    --primary-100: #ff6032;
    --primary-200: #e65300;
    --primary-300: #cc4b00;
    --primary-400: #b34300;
    --primary-500: #993b00;
    --primary-600: #803300;
    --primary-700: #662b00;
    --primary-800: #4d2200;
    --primary-900: #331900;
    --secondary-orange-50: #FFF9F5;
    --secondary-orange-100: #FFE5D6;
    --secondary-orange-200: #FFB185;
    --secondary-orange-300: #E07A3F;
    --secondary-orange-400: #B85116;
    --secondary-orange-500: #A34814;
    --secondary-orange-600: #7A360F;
    --secondary-orange-700: #662D0C;
    --secondary-orange-800: #52240A;
    --secondary-orange-900: #3D1B07;
    --secondary-orange-950: #291205;
    --secondary-pink-50: #FFF5F7;
    --secondary-pink-100: #FFD6E0;
    --secondary-pink-200: #FFADC2;
    --secondary-pink-300: #E07590;
    --secondary-pink-400: #CC5A76;
    --secondary-pink-500: #B8425F;
    --secondary-pink-600: #A33B55;
    --secondary-pink-700: #7A2C40;
    --secondary-pink-800: #521D2A;
    --secondary-pink-900: #3D1620;
    --secondary-pink-950: #290F15;
    --secondary-blue-50: #F5FBFF;
    --secondary-blue-100: #D6EEFF;
    --secondary-blue-200: #ADDDFF;
    --secondary-blue-300: #85CCFF;
    --secondary-blue-400: #45ABF5;
    --secondary-blue-500: #0A93F5;
    --secondary-blue-600: #005FA3;
    --secondary-blue-700: #003C66;
    --secondary-blue-800: #00243D;
    --secondary-blue-900: #001829;
    --secondary-blue-950: #000C14;
    --secondary-red-50: #FFF5F5;
    --secondary-red-100: #FFD6D6;
    --secondary-red-200: #FFADAD;
    --secondary-red-300: #FF8585;
    --secondary-red-400: #FF5C5C;
    --secondary-red-500: #FF3333;
    --secondary-red-600: #B80000;
    --secondary-red-700: #7A0000;
    --secondary-red-800: #7A0000;
    --secondary-red-900: #3D0000;
    --secondary-red-950: #290000;
    --secoundary-10: #fff9f4;
    --secoundary-20: #fff4e8;
    --secoundary-30: var(--primary-brown-100);
    --secoundary-40: #ffd6af;
    --secoundary-50: #ffba70;
    --secoundary-60: #ffad5a;
    --secoundary-70: #ffa045;
    --secoundary-80: #ff932f;
    --secoundary-90: #ff8619;
    --secoundary-100: #ff7904;
    --secoundary-200: #e66b04;
    --secoundary-300: #cc5d04;
    --secoundary-400: #b34f04;
    --secoundary-500: #994104;
    --secoundary-600: #803304;
    --secoundary-700: #662504;
    --secoundary-800: #4d1704;
    --secoundary-900: #330904;
    --secondary-white-50: #FFFFFF;
    --secondary-white-100: #F7F7F7;
    --secondary-white-200: #E3E3E3;
    --secondary-white-300: #A3A3A3;
    --secondary-white-400: #737373;
    --secondary-white-500: #3A3A3A;
    --text-10: #fafafa;
    --text-20: #f6f6f6;
    --text-30: #edece;

    --text-40: #e1e1e1;
    --text-50: #c6c6c5;
    --text-60: #b8b8b7;
    --text-70: #acacac;
    --text-80: #9e9e9e;
    --text-90: #919190;
    --text-100: #838382;
    --text-200: #757574;
    --text-300: #676767;
    --text-400: #5c5c5b;
    --text-500: #4e4e4d;
    --text-600: #424242;
    --text-700: #323231;
    --text-800: #252524;
    --text-900: #191918;
    --background-1: var(--secoundary-30);
    --banner-1: url('images/banner-light-orange.png');
    --color-primary: #5C8AC7;
    --color-accent: #00386F;
    --light-gray: #F7F7F7;
    --light-gray-vector: #C3C3C9;
    --dark-gray: #6E6E6E;
    --color-red: #CD0000;
    --link-color: #0094FF;
    --success-color: var(--primary-green-500);
    --warning-color: var(--secondary-orange-400);
    --error-color: var(--secondary-red-500);
    --focus-ring: 0 0 0 3px var(--secondary-blue-200);
    --hover-bg: var(--secondary-blue-50);

    /* ===================== */
    /* Design System Tokens  */
    /* ===================== */
    /* Base */
    --color-base-black: #000000;
    --color-base-white: #FFFFFF;
    --light: rgba(255, 255, 255, 0.2);

    /* Gray scale */
    --color-neutral-50: #F5F5F5;
    --color-neutral-100: #E9E9E9;
    --color-neutral-200: #D9D9D9;
    --color-neutral-300: #C4C4C4;
    --color-neutral-400: #9D9D9D;
    --color-neutral-500: #5F5F5F;
    --color-neutral-600: #555555;
    --color-neutral-700: #434343;
    --color-neutral-800: #262626;
    --color-neutral-900: #111827;
    --color-neutral-950: #030712;

    /* Background */
    --color-surface-neutral: #C9CBCA;
    --color-surface-app: #FAFAFA;

    /* Primary brand scale */
    --color-brand-primary-50: #EFFFF7;
    --color-brand-primary-100: #DAFEED;
    --color-brand-primary-200: #87FBDC;
    --color-brand-primary-300: #7FF6C1;
    --color-brand-primary-400: #32E696;
    --color-brand-primary-500: #17D07E;
    --color-brand-primary-600: #0DAC66;
    --color-brand-primary-700: #0E8752;
    --color-brand-primary-800: #116A44;
    --color-brand-primary-900: #10573A;
    --color-brand-primary-950: #02311F;

    /* Feedback / Information */
    --color-feedback-info-100: #EBF3FF;
    --color-feedback-info-500: #85A1CC;
    --color-feedback-info-700: #1952A6;

    /* Feedback / Warning */
    --color-feedback-warning-100: #FFF6EB;
    --color-feedback-warning-500: #CCAD85;
    --color-feedback-warning-700: #A66919;

    /* Feedback / Negative */
    --color-feedback-negative-100: #FFEBF4;
    --color-feedback-negative-500: #CC8585;
    --color-feedback-negative-700: #A61919;

    /* Feedback / Positive */
    --color-feedback-positive-100: #EEFFEB;
    --color-feedback-positive-500: #90CC84;
    --color-feedback-positive-700: #27B812;

    /* Borders */
    --color-border-input: #7B7B7B;
    --color-border-container: #E5E7EB;

    /* Specific colors */
    --yellow: #FFDD00;
    --sky-blue: #28ABE3;
    --cold-green: #07B59A;
    --red: #FF0000;
    --orange: #FF8000;
    --pink: #E4097D;
    --green: #23E589;

    /* Aliases & compatibility with existing CSS usages */
    --gray-color-neutral-50: var(--color-neutral-50);
    --gray-color-neutral-100: var(--color-neutral-100);
    --gray-color-neutral-200: var(--color-neutral-200);
    --gray-color-neutral-300: var(--color-neutral-300);
    --gray-color-neutral-400: var(--color-neutral-400);
    --gray-color-neutral-500: var(--color-neutral-500);
    --gray-color-neutral-600: var(--color-neutral-600);
    --gray-color-neutral-700: var(--color-neutral-700);
    --gray-color-neutral-800: var(--color-neutral-800);
    --gray-color-neutral-900: var(--color-neutral-900);
    --gray-color-neutral-950: var(--color-neutral-950);

    --background-color-surface-app: var(--color-surface-app);

    --primary-color-brand-primary-400: var(--color-brand-primary-400);
    --Primary-color-brand-primary-500: var(--color-brand-primary-500);

    --Border-inputs: var(--color-border-input);
    --Border-Containers: var(--color-border-container);

    /* Radius & Shadows */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);

    /* Surfaces */
    --surface: #ffffff;
    --surface-alt: #f8fafc;

    /* Text & Links helpers */
    --color-link: #006bb7;
    --color-body-text: var(--color-neutral-800);
    --color-body-text-light: var(--color-neutral-600);
    --color-secondary: var(--color-accent);
    --color-danger: #dc3545;
    --color-divider: #E5E7EB;
    --default-border-radius: 8px;
}

html, body {
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: var(--color-neutral-800);
    background-color: var(--color-surface-app) !important;
}

.custom-paragraph {
    color: var(--gray-color-neutral-800, #262626);
    /* Body/Large */
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px; /* 150% */
}

.home-banners {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .home-banners.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.slick-slider-container {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .slick-slider-container.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.cards-estrellas {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .cards-estrellas.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.cards-sorteos {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

    .cards-sorteos.slick-initialized {
        visibility: visible;
        opacity: 1;
    }

.carousel-desktop {
    display: none;
}

.carousel-mobile {
    display: none;
}

@media (min-width: 768px) {
    .carousel-desktop {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .carousel-mobile {
        display: block;
    }
}

.slick-dots {
    position: !important;
    bottom: -25px !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    justify-content: center;
}

    .slick-dots li {
        display: flex !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer !important;
    }

        .WMBSC .slick-dots li.slick-active:hover,
        .WMBSC .slick-dots li.slick-active:hover button,
        .slick-dots li:hover {
            opacity: .7 !important;
        }

        .slick-dots li button {
            font-size: 0 !important;
            line-height: 0 !important;
            display: block !important;
            width: 12px !important;
            height: 12px !important;
            padding: 5px !important;
            cursor: pointer !important;
            color: black !important;
            border: 0 !important;
            outline: none !important;
            background: transparent !important;
            fill: var(--gray-color-neutral-200, #D9D9D9) !important;
        }

            /* Inactive dots - darker blue-gray circles */
            .slick-dots li button:before {
            }

.WMBSC .slick-dots li.slick-active button,
.WMBSC .slick-dots li.slick-active {
    width: 24px !important;
    height: 12px !important;
    opacity: 1 !important;
    border-radius: 16px;
    background: var(--Primary-color-brand-primary-500, #17D07E);
}

/* Active dot - lighter blue-gray circle */
.slick-dots li.slick-active button:before {
}

input {
    caret-color: var(--color-accent);
}

/* FONT */
.f-10 {
    font-size: 10px;
}

.f-12 {
    font-size: 12px;
}

.f-14 {
    font-size: 14px;
}

.f-16 {
    font-size: 16px;
}

.f-18 {
    font-size: 18px;
}

.f-20 {
    font-size: 20px;
}

.f-22 {
    font-size: 22px;
}

.f-24 {
    font-size: 24px;
}

.f-40 {
    font-size: 40px;
}

.f-bold, button, .btn {
    font-weight: bold;
}

.f-semibold {
    font-weight: 500;
}

.f-accent {
    color: var(--color-accent);
}

.f-red {
    color: var(--color-red);
}

/* ASSET */
.color-primary {
    color: var(--color-primary);
}

.color-accent {
    color: var(--color-accent);
}

.color-dark-gray {
    color: var(--dark-gray);
}

.color-ligth-gray-vector {
    color: var(--light-gray-vector);
}

.bg-red {
    background-color: var(--color-red) !important;
}
/* WIDTH */
.w-50px {
    width: 50px;
}
/* MARGINS & PADDINGS*/
.no-margin-b {
    margin-bottom: 0px;
}

.m-5 {
    margin: 5px !important;
}

.mblock-20 {
    margin-block: 20px;
}

.mblock-30 {
    margin-block: 30px;
}

.p-20 {
    padding: 20px;
}

.mb-4-c {
    margin-bottom: 4px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-14 {
    margin-bottom: 14px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.margin-bottom-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-32 {
    margin-top: 32px !important;
}

.mb-48 {
    margin-bottom: 48px !important;
}

.mt-16 {
    margin-top: 16px !important;
}
/* PADDING */
.pl-20 {
    padding-left: 20px !important;
}

.p-24 {
    padding: 24px !important;
}

/* BACKGROUND */
.bg-accent {
    background-color: var(--color-accent);
}

.bg-primary {
    background-color: var(--color-primary) !important;
}
/* BORDER RADIUS*/
.border-radius-4 {
    border-radius: 4px;
}

.border-radius-6 {
    border-radius: 6px;
}

.border-radius-8 {
    border-radius: 8px;
}

.border-radius-16 {
    border-radius: 16px;
}

a {
    text-decoration: none;
}

.link {
    color: var(--link-color);
    font-weight: bold;
}
/* INPUT */
.border-05-accent {
    border: 0.5px solid var(--color-accent);
}
/* INPUT */
.input-light-gray {
    color: var(--dark-gray);
    background-color: var(--light-gray);
}

.input-44 {
    height: 44px;
    padding-block: 14px;
    padding-left: 18px;
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    color: #fff;
    height: auto;
    background-color: var(--color-base-black);
}

    .footer a {
        color: white;
        font-weight: 600;
    }

    .footer .footer-title {
        font-size: 25px;
    }

    .footer .store {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        padding-top: 30px;
    }

@media(max-width: 767px) {
    .footer {
        margin: 50px 0 0 0;
    }

        .footer .links, .footer .store {
            text-align: center;
        }

        .footer .store {
            border: none;
            padding: 0;
            margin-top: 20px;
        }
}

.footer .BrandFooter img {
    width: 160px;
}

.footer .footer-copyright {
    font-size: 10px;
    font-weight: 400;
}

.links ul {
    padding-left: 0px;
}

.RedesFooter {
    padding-top: 30px;
}

    .RedesFooter img {
        width: 40px;
    }

.appStore img {
    width: 123px;
}

.footer-phone-svg {
    width: 54px;
    margin-right: 15px;
}

a, .btn-link {
    color: #006bb7;
}

.btn {
    min-width: fit-content;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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 #258cfb;
}

.content {
    padding: 2%;
    max-width: 1440px;
    margin: auto;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.navbar {
    min-height: 74px;
    background: var(--primary-color-brand-primary-400, #32E696);
    padding: 0.5rem 3rem;
    border-bottom: 1px solid var(--color-base-black, #000);
    /* Shadow/shadow.surface.lg */
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.08);
}

@media (max-width: 991px) {
    .navbar {
        padding: 0.5rem 1.5rem;
    }
}

.navbar-options {
    gap: 20px;
}

.navbar-brand img {
    width: 130px;
    height: 45px;
}

a.nav-link {
    color: white !important;
}

.navbar-light .navbar-nav .active > .nav-link {
    color: white;
    font-weight: bold;
}

.navbar-collapse {
    justify-content: space-between;
}

#search-top-bar {
    color: var(--gray-color-neutral-500, #5F5F5F);
    /* Body/Large */
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px; /* 150% */
}

    #search-top-bar:focus {
        border-color: inherit;
        box-shadow: none;
    }

.btn-primary {
    background-color: var(--color-accent);
    border-color: #00386F;
    height: 48px;
    padding-inline: 24px;
}

.btn-secondary {
    background-color: #5C89C6;
    border-color: #5C89C6;
    height: 48px;
    padding-inline: 24px;
}

.btn-tertiary {
    background-color: white;
    color: #00386F;
    border-color: #00386F;
}

@media(max-width: 400px) {
    .navbar-options {
        gap: 10px;
    }
}

@media(max-width: 992px) {
    #btn-add-my-brand {
        display: none !important;
    }
}

.navbar-search-box {
    /*    min-width: 333px;
    max-width: 333px;*/
    border: 1px solid var(--Border-inputs, #7B7B7B);
    background: var(--gray-color-neutral-50, #F5F5F5);
    background-color: white;
    border-radius: 32px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 15px;
}

    .navbar-search-box > i {
        font-size: 20px;
        color: #777;
    }

    .navbar-search-box > input {
        flex: 1;
        height: 40px;
        border: none;
        outline: none;
        font-size: 18px;
        padding-left: 10px;
    }

    .navbar-search-box input:focus,
    .navbar-search-box .form-control:focus {
        outline: none !important;
        box-shadow: none !important;
        border-color: #ccc !important;
    }

    .navbar-search-box > input::placeholder {
        color: rgba(0, 0, 0, 0.25);
    }

    .navbar-search-box > img {
        height: 21px;
    }

.nav-icon {
    width: 25px;
}

@media (max-width: 768px) {
    .nav-icon {
        width: 38px;
    }
}

    /*.bottom-navbar {
    overflow: hidden;
    background-color: white;
    position: fixed;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: -2px -2px 4px 0px #00000040;
    padding-inline: 16px;
}*/
    /*
    .bottom-navbar a {
        text-align: center;
        text-decoration: none;
        font-size: 17px;
    }*/

    .menu-desplegable {
        width: 230px;
        background-color: #fff;
        display: none;
        float: inline-end;
        position: relative;
        height: 0px;
        z-index: 1;
    }

    .menu-items-container {
        background-color: white;
        height: 91.5vh;
        box-shadow: -2px 2px 4px 0px #00000040;
    }

    @media(max-width: 400px) {
        .menu-desplegable {
            background-color: white;
            font-size: 0.8em;
            width: 190px;
        }
    }

    .box-shadow {
        box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.05)
    }

    .menu-item {
        display: flex;
        align-items: center;
        padding: 10px;
        color: #00386F;
        border-bottom: 1px solid #EAEAEA;
        text-decoration: none;
        background-color: white;
    }

        .menu-item:hover {
            text-decoration: none;
        }

        .menu-item img.icon {
            margin-right: 10px;
            width: 20px;
            height: 20px;
        }

        .menu-item:hover {
            background-color: #F2F2F2;
        }

    .menu-separador {
        height: 1px;
        background: var(--Border-Containers, #E5E7EB);
    }

    .usuario-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        background-color: var(--color-primary);
        color: #fff;
        height: 74px;
    }

        .usuario-info .usuario-icono {
            width: 36px;
            height: 36px;
        }

        .usuario-info .usuario-nome {
            flex-grow: 1;
            padding-left: 10px;
        }

        .usuario-info .nome,
        .usuario-info .apellido {
            display: block;
        }

        .usuario-info .cerrar-menu {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
        }

            .usuario-info .cerrar-menu:hover {
                color: #eaeaea;
            }

    .valid.modified:not([type=checkbox]) {
        outline: none !important;
    }

    .custom-checkbox {
        background-color: black;
        accent-color: black;
        width: 1.2rem;
        height: 1.2rem;
        border: 1px solid black;
    }

    .promo-card {
        position: relative;
        width: 365px;
        height: 220px;
        border-radius: 10px;
        overflow: hidden;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .promo-background {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

.promo-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

    .promo-content {
        position: absolute;
        top: 40px;
        left: 20px;
    }

        .promo-content h2 {
            font-size: 18px;
            margin: 0 0 10px;
            margin-top: 30px;
        }

    .promo-price {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .price {
        font-size: 24px;
        font-weight: bold;
        color: white;
    }

    .points {
        font-size: 16px;
        color: #fff;
    }

    .promo-details {
        font-size: 14px;
        margin: 0;
    }

    .promo-star {
        position: absolute;
        top: -40px;
        left: -20px;
        border-radius: 50%;
        padding: 10px;
    }

    .star-icon {
        content: url('full-star.svg');
        width: 20px;
        height: 20px;
    }

    .star-icon-logo {
        content: url('Images/navbar-logo.svg');
        width: 110px;
        height: 40px;
    }








    .sorteo-card {
        position: relative;
        width: 365px;
        height: 220px;
        border-radius: 10px;
        overflow: hidden;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .sorteo-background {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    .sorteo-overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: rgba(0, 64, 128, 0.9);
        color: white;
        clip-path: polygon(0 0, 48% 0, 59% 100%, 0% 100%)
    }

    .sorteo-content {
        position: absolute;
        top: 40px;
        left: 20px;
    }

        .sorteo-content h2 {
            font-size: 18px;
            margin: 0 0 10px;
            margin-top: 30px;
        }

    .sorteo-price {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .sorteo-details {
        font-size: 14px;
        margin: 0;
    }

    .sorteo-star {
        position: absolute;
        top: -40px;
        left: -20px;
        border-radius: 50%;
        padding: 10px;
    }

    .star-icon {
        content: url('full-star.svg');
        width: 20px;
        height: 20px;
    }

    .star-icon-logo {
        content: url('Images/navbar-logo.svg');
        width: 110px;
        height: 40px;
    }

    .bg-warning {
        background-color: #FFBA19 !important;
    }

    .f-dark {
        color: #4A4A4A !important;
    }


    .my-account-panel {
        display: flex;
        justify-content: center;
        gap: 16px;
        align-items: flex-start;
        align-content: center;
    }

    @media(max-width: 769px) {
        .my-account-panel {
            gap: 0;
        }
    }

    .my-account-panel .panel-sidebar {
    }


    .my-account-panel .panel-main-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }


    .buttons-container {
        display: flex;
        gap: 10px;
    }


    .padding-0 {
        padding: 0 !important;
    }

    hr {
        width: 100%;
    }

    .footer-content button {
        color: var(--color-base-black, #000);
        text-align: center;
        /* Button/Label Medium */
        font-family: var (--font-family-Poppins, Poppins);
        font-size: 14px;
        font-style: normal;
        font-weight: var(--font-weight-medium, 500);
        line-height: 20px; /* 142.857% */
    }

    .picker-arrow-container {
        height: -webkit-fill-available;
        align-items: center;
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .navbar .container .navbar-search-box {
            width: auto;
            margin-bottom: 0;
        }
    }

    .header-title .back-container .back-button {
        display: none;
    }

    @media(max-width: 769px) {
        .consultant-card {
            max-width: 100%;
        }

        .container-indication {
            max-width: 100%;
        }

        .header-title .back-container .back-button {
            display: block;
        }

        .main-menu-container,
        .back-container {
            display: none;
        }
    }


    @media(max-width: 769px) {
    }



    .header-title {
        display: flex;
    }


    .upload-card {
        border-radius:12px;
    }

        .upload-card.empty .upload-icon {
            width: 48px;
            height: 48px;
        }


    /* Botão ver mais */
    .btn-see-more {
        font-size: .95rem;
        color: var(--color-brand-primary-500, #24CB80);
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
        border: none;
        background: none;
        padding: 4px 12px;
    }

        .btn-see-more:hover {
            opacity: .85;
        }


    .WMBSC .slick-prev,
    .WMBSC .slick-next {
    }

    .WMBSC .slick-prev {
        left: -25px !important;
    }

    .WMBSC .slick-next {
        right: -25px !important;
    }

    .slick-dotted.slick-slider {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .panel-main-content {
        max-width: 664px;
    }

    @media(max-width: 769px) {
        .panel-main-content {
            margin: 0 auto;
            max-width: 100%;
        }
    }

.post-reason-card {
    display: flex;
    min-width: 224px;
    max-width: 354px;
    padding: var(--8, 32px) var(--4, 16px) var(--6, 24px) var(--4, 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 8px;
    background: var(--color-base-white, #FFF);
    /* Shadow/shadow.surface.lg */
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.08);
}

.post-reason-card .ph:before {
    width: 32px !important;
    height: 32px !important;
    font-size: 48px;
}

@media(max-width: 1024px){
    .post-reason-card {
        display: flex;
        min-width: 224px;
        max-width: 354px;
        padding: var(--8, 32px) var(--4, 16px) var(--6, 24px) var(--4, 16px);
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
    }

    .post-reason-card__body {
        padding: 0;
        min-height: 230px;
    }

}

@media(max-width: 768px) {
    .post-reason-card {
        min-width: 100%;
        max-width: 100%;
    }

    .post-reason-card__body {
    }

    .post-reason-card__body {
        padding: 0;
        min-height: 0;
    }
}


.post-intro {
    max-width: 720px;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.post-intro__title {
    color: var(--gray-color-neutral-800, #262626);
    /* Title/Semibold/32 */
    font-family: var(--font-family-Poppins, Poppins);
    font-size: 32px;
    font-style: normal;
    font-weight: var(--font-weight-semibold, 600);
    line-height: 32px; /* 100% */
    max-width: 900px;
}

.post-intro__desc {
    color: var(--color-base-black, #000);
    /* Body/Regular/20 */
    font-family: var(--font-family-Nunito-Sans, "Nunito Sans");
    font-size: 20px;
    font-style: normal;
    font-weight: var(--font-weight-regular, 400);
    line-height: 24px; /* 120% */
}

@media (max-width:600px) {
    .post-reasons__grid {
        grid-template-columns: 1fr;
    }

    .post-intro {
        padding: 48px 24px;
    }

    .post-reasons__title {
        font-size: 1.5rem;
    }
}

.content-area {
    max-width: 992px;
    margin: 0 auto;
    width: 100%;
}

.post-flags {
    display: flex;
    justify-content: flex-end;
    margin: 8px auto 8px;
    padding: 0 16px;
    max-width: 992px;
}


.post-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.components-reconnect-dialog,
.components-reconnect-overlay {
    display: none !important;
}

.post-section-content .e-ddl.e-input-group .e-input-value {
    padding:10px;
}

.components-reconnect-overlay.components-reconnect-visible,
.components-reconnect-dialog {
    display: none !important;
}

.banner-container .banner-image, .post-hero__image {
    width: 100%;
    height: auto;
    display: block;
}

.e-carousel .e-carousel-items .e-carousel-item{
    height:fit-content !important;
}

.e-toast-container .e-toast{
    background:none !important;
    border:none !important;
    box-shadow:none !important;
}

/* ── Shared loader overlay (image upload / cropper) ── */
.local-loader-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    animation: localLoaderFadeIn 0.3s ease;
}

.local-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--primary-color-brand-primary-600, #00C853);
    border-radius: 50%;
    animation: localLoaderSpin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes localLoaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes localLoaderFadeIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(4px); }
}