/* Custom Global Styles for Mix Conect */

html {
    scroll-behavior: smooth;
}

body {
    background-color: #ffffff;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.icon-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.input-corporate:focus {
    outline: none;
    border-color: #000099;
    border-width: 2px;
    box-shadow: none;
}

/* Mascot Images */
.mascot-img {
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
    mix-blend-mode: multiply;
}

/* Transitions */
.expand-transition {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover scale effect for cards */
.hover-scale {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@media (hover: hover) {
    .hover-scale:hover {
        transform: translateY(-6px) scale(1.04) !important;
        box-shadow: 0px 10px 30px rgba(0, 0, 153, 0.08) !important;
    }
}

/* Active tap feedback for touch devices */
@media (hover: none) {
    .hover-scale:active {
        transform: scale(0.98) !important;
        transition: transform 0.15s ease !important;
    }
    
    /* Override sticky hover transforms */
    .hover\:scale-105:hover,
    .hover\:scale-110:hover,
    .hover\:translate-x-1:hover {
        transform: none !important;
    }
    
    /* Global tap performance and accessibility */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }
}

/* Custom Waves for Indique e Ganhe Section (displayed immediately without entry animation) */
.family-waves {
    transform: translate(-50%, -50%) scale(1) !important;
}

.family-waves .circle-1,
.family-waves .circle-2,
.family-waves .circle-3,
.family-waves .center-icon {
    opacity: 1;
    transform: scale(1);
}

/* Custom scrollbar for blog modal overlay */
#blog-modal-overlay::-webkit-scrollbar {
    width: 8px;
}
#blog-modal-overlay::-webkit-scrollbar-track {
    background: transparent;
}
#blog-modal-overlay::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 153, 0.15);
    border-radius: 9999px;
}
#blog-modal-overlay::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 153, 0.35);
}

/* Responsive Styles for Hero Section (Screens under 1024px) */
@media (max-width: 1023px) {
    #hero-scroll-container {
        height: auto !important;
        min-height: 0 !important;
    }
    #hero-sticky-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
        z-index: 20;
    }
    #hero-card {
        height: 55vh !important;
        min-height: 520px !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        box-shadow: none !important;
    }

    /* Global mobile/responsive centering overrides for content areas */
    main h1, main h2, main h3, main h4, main h5, main h6, main p, main span:not(.material-symbols-outlined) {
        text-align: center !important;
    }

    main .flex-col,
    main .flex.flex-col {
        align-items: center !important;
        text-align: center !important;
    }
    
    main .items-start {
        align-items: center !important;
        text-align: center !important;
    }
    
    main .justify-start {
        justify-content: center !important;
    }

    main a.inline-flex,
    main button {
        align-self: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    main ul {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    main li {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Restore Hero Card Layout */
    #hero-card main #parallax-logo {
        align-items: flex-start !important;
    }

    /* Specific overrides for plan/combo/business-plan cards to align content to the left */
    #planos .grid > div,
    #combos-secao .grid > div,
    #planos-empresariais .grid > div {
        align-items: flex-start !important;
        text-align: left !important;
    }

    #planos .grid > div h3,
    #planos .grid > div h4,
    #planos .grid > div p:not(.text-center),
    #planos .grid > div span:not(.material-symbols-outlined),
    #combos-secao .grid > div h3,
    #combos-secao .grid > div h4,
    #combos-secao .grid > div p:not(.text-center),
    #combos-secao .grid > div span:not(.material-symbols-outlined),
    #planos-empresariais .grid > div h3,
    #planos-empresariais .grid > div h4,
    #planos-empresariais .grid > div p:not(.text-center),
    #planos-empresariais .grid > div span:not(.material-symbols-outlined) {
        text-align: left !important;
    }

    #planos .grid > div .flex-col,
    #planos .grid > div .flex.flex-col,
    #planos .grid > div .items-start,
    #combos-secao .grid > div .flex-col,
    #combos-secao .grid > div .flex.flex-col,
    #combos-secao .grid > div .items-start,
    #planos-empresariais .grid > div .flex-col,
    #planos-empresariais .grid > div .flex.flex-col,
    #planos-empresariais .grid > div .items-start {
        align-items: flex-start !important;
        text-align: left !important;
    }

    #planos .grid > div .justify-start,
    #combos-secao .grid > div .justify-start,
    #planos-empresariais .grid > div .justify-start {
        justify-content: flex-start !important;
    }

    #planos .grid > div ul,
    #combos-secao .grid > div ul,
    #planos-empresariais .grid > div ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    #planos .grid > div li,
    #combos-secao .grid > div li,
    #planos-empresariais .grid > div li {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }

    #planos .grid > div .mt-auto,
    #combos-secao .grid > div .mt-auto,
    #planos-empresariais .grid > div .mt-auto {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    #planos .grid > div .mt-auto a.inline-flex,
    #combos-secao .grid > div .mt-auto a.inline-flex,
    #planos-empresariais .grid > div .mt-auto a.inline-flex {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    #planos .grid > div .flex-wrap,
    #combos-secao .grid > div .flex-wrap,
    #planos-empresariais .grid > div .flex-wrap {
        justify-content: flex-start !important;
    }

    /* Specific overrides for hero card bottom elements alignment on tablet */
    #hero-card .absolute.left-8 p {
        text-align: left !important;
    }
    #hero-card .absolute.right-8 {
        align-items: flex-end !important;
        text-align: right !important;
    }
    #hero-card .absolute.right-8 p {
        text-align: right !important;
    }
    #hero-card .absolute.right-8 a {
        align-self: flex-end !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 767px) {
    #hero-card {
        height: 52vh !important;
        min-height: 460px !important;
    }
    .mobile-hide-controls {
        display: none !important;
    }
}

/* Fluid percentage padding for content edges instead of fixed pixels */
.px-responsive,
.px-gutter {
    padding-left: 5% !important;
    padding-right: 5% !important;
}

@media (min-width: 768px) {
    .px-responsive,
    .px-gutter {
        padding-left: 6% !important;
        padding-right: 6% !important;
    }
}

@media (min-width: 1024px) {
    .px-responsive,
    .px-gutter {
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
}

@media (min-width: 1440px) {
    .px-responsive,
    .px-gutter {
        padding-left: 10% !important;
        padding-right: 10% !important;
    }
}

@media (max-width: 1023px) {
    /* Mobile left-alignment overrides for specific pages/sections */
    .mobile-left-align,
    .mobile-left-align h1, 
    .mobile-left-align h2, 
    .mobile-left-align h3, 
    .mobile-left-align h4, 
    .mobile-left-align h5, 
    .mobile-left-align h6, 
    .mobile-left-align p, 
    .mobile-left-align span:not(.material-symbols-outlined),
    .mobile-left-align a,
    .mobile-left-align li,
    .mobile-left-align label,
    .mobile-left-align input,
    .mobile-left-align textarea {
        text-align: left !important;
    }

    .mobile-left-align.flex-col,
    .mobile-left-align .flex-col,
    .mobile-left-align .flex.flex-col {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .mobile-left-align.items-start,
    .mobile-left-align .items-start {
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    .mobile-left-align.justify-start,
    .mobile-left-align .justify-start {
        justify-content: flex-start !important;
    }

    .mobile-left-align a.inline-flex,
    .mobile-left-align button,
    .mobile-left-align input[type="submit"] {
        align-self: stretch !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mobile-left-align ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .mobile-left-align li {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }
}

/* Dynamic positioning for Hero Mascot to prevent text overlap as screen size decreases */
#parallax-mascot {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    z-index: 20;
    transition: transform 0.075s;
}

#parallax-mascot img {
    position: relative;
    /* We use translateY on the image itself to control the visual overlap relative to its own height. */
    transform: translateY(-2%);
}

@media (min-width: 640px) {
    #parallax-mascot img {
        transform: translateY(-2.5%);
    }
}

@media (min-width: 768px) {
    #parallax-mascot img {
        transform: translateY(-3%);
    }
}

@media (min-width: 1024px) {
    #parallax-mascot img {
        transform: translateY(-4%);
    }
}

@media (min-width: 1440px) {
    #parallax-mascot img {
        transform: translateY(-5%);
    }
}