/*
 * FOTO RATTS V156
 *
 * 1) Menu/submenus com fundo #f8f9fa
 * 2) Posição/tamanho do logo e campo Buscar aproximados da referência enviada
 * 3) Cor antiga #f7f3ea substituída visualmente por #f1f1f1 em todo o site
 * 4) Tipografia aprovada da V152 mantida: Arial/Helvetica, peso 400
 */

/* =========================================================
   IDENTIDADE CLARA GLOBAL
   Substitui as áreas que usavam #f7f3ea por #f1f1f1
   sem sobrescrever os arquivos funcionais de cada módulo.
   ========================================================= */
:root {
    --fr-cream: #f1f1f1 !important;
    --fr-events-cream: #f1f1f1 !important;
    --fr-partner-cream: #f1f1f1 !important;
    --fr-book-cream: #f1f1f1 !important;
    --fr-album-cream: #f1f1f1 !important;
}

/* Usos diretos de #f7f3ea existentes no projeto */
html body .fr-signature--compact,
html body .fr-product-banners-page {
    background: #f1f1f1 !important;
}

/* Páginas que recebem o creme por variável */
html body .fr-events-page,
html body .fr-partners-page,
html body .fr-albums-page,
html body .fr-album-viewer-page {
    background-color: #f1f1f1 !important;
}

/* =========================================================
   CABEÇALHO / MENU — FUNDO #f8f9fa EM TODAS AS PÁGINAS
   ========================================================= */
html body header,
html body .navbar,
html body .fr-navbar,
html body .fr-navbar.navbar,
html body .navbar.bg-light,
html body .navbar.bg-body-tertiary,
html body .navbar.scrolled {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
}

html body .fr-navbar {
    border-bottom: 1px solid #e2e3e5 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
}

/* =========================================================
   SUBMENUS — EVENTOS, PARCEIROS E DEMAIS DROPDOWNS
   MESMO FUNDO DO MENU
   ========================================================= */
html body .fr-navbar .dropdown-menu,
html body .fr-navbar .fr-navbar__dropdown {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    border-color: #dedfe1 !important;
}

html body .fr-navbar .dropdown-item,
html body .fr-navbar .fr-navbar__dropdown .dropdown-item {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    color: #5f5c58 !important;
}

html body .fr-navbar .dropdown-item:hover,
html body .fr-navbar .dropdown-item:focus,
html body .fr-navbar .dropdown-item.active,
html body .fr-navbar .dropdown-item:active,
html body .fr-navbar .fr-navbar__dropdown .dropdown-item:hover,
html body .fr-navbar .fr-navbar__dropdown .dropdown-item:focus {
    background: #f1f1f1 !important;
    background-color: #f1f1f1 !important;
    color: #9a6518 !important;
}

html body .fr-navbar .dropdown-divider {
    border-top-color: #d7d8da !important;
}

/* =========================================================
   DESKTOP GRANDE — REFERÊNCIA DA SEGUNDA IMAGEM
   Logo ~220px; menu central; busca ~400px
   ========================================================= */
@media (min-width: 1320px) {
    html body .fr-navbar {
        min-height: 144px !important;
        padding: 8px 0 !important;
    }

    html body .fr-navbar .fr-navbar__container {
        width: min(1240px, calc(100% - 48px)) !important;
        max-width: 1240px !important;
        min-height: 128px !important;
        margin: 0 auto !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 28px !important;
    }

    /* Logo com tamanho/posição próximos da referência */
    html body .fr-navbar .fr-navbar__brand {
        flex: 0 0 260px !important;
        width: 260px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    html body .fr-navbar .fr-navbar__logo {
        display: block !important;
        width: 260px !important;
        max-width: 260px !important;
        height: auto !important;
        max-height: 124px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* Menu central + campo de busca no tamanho da referência */
    html body .fr-navbar .fr-navbar__collapse {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: max-content minmax(240px, 320px) !important;
        align-items: center !important;
        column-gap: 24px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .fr-navbar .fr-navbar__links,
    html body .fr-navbar .fr-navbar__links.mx-xl-auto {
        justify-self: start !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .fr-navbar .navbar-nav .nav-link,
    html body .fr-navbar .navbar-nav .nav-item > .nav-link,
    html body .fr-navbar .fr-navbar__links > .nav-item > a.nav-link {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        font-style: normal !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: nowrap !important;
        padding: 13px 9px !important;
    }

    html body .fr-navbar .fr-navbar__actions {
        justify-self: end !important;
        width: 320px !important;
        min-width: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    html body .fr-navbar .fr-navbar__search-inline {
        width: 320px !important;
        min-width: 320px !important;
        margin: 0 !important;
    }

    html body .fr-navbar .fr-navbar__search-inline .form-control {
        height: 50px !important;
        padding-left: 20px !important;
        padding-right: 52px !important;
        background: #fff !important;
        border: 1px solid #d7d9dc !important;
        border-radius: 4px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        box-shadow: none !important;
    }

    html body .fr-navbar .fr-navbar__search-inline .btn,
    html body .fr-navbar .fr-navbar__search-inline button {
        min-width: 52px !important;
        height: 50px !important;
    }
}

/* =========================================================
   NOTEBOOK / DESKTOP MENOR
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    html body .fr-navbar {
        min-height: 124px !important;
        padding: 10px 0 !important;
    }

    html body .fr-navbar .fr-navbar__container {
        width: min(1140px, calc(100% - 24px)) !important;
        max-width: 1140px !important;
        min-height: 104px !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    html body .fr-navbar .fr-navbar__brand {
        flex: 0 0 245px !important;
        width: 245px !important;
        margin: 0 !important;
        padding: 0 0 0 6px !important;
    }

    html body .fr-navbar .fr-navbar__logo {
        width: 238px !important;
        max-width: 238px !important;
        max-height: 104px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    html body .fr-navbar .fr-navbar__collapse {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 250px !important;
        align-items: center !important;
        column-gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .fr-navbar .fr-navbar__links,
    html body .fr-navbar .fr-navbar__links.mx-xl-auto {
        justify-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .fr-navbar .navbar-nav .nav-link,
    html body .fr-navbar .navbar-nav .nav-item > .nav-link {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        padding: 12px 7px !important;
        white-space: nowrap !important;
    }

    html body .fr-navbar .fr-navbar__actions,
    html body .fr-navbar .fr-navbar__search-inline {
        width: 250px !important;
        min-width: 250px !important;
    }

    html body .fr-navbar .fr-navbar__search-inline .form-control {
        height: 48px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        background: #fff !important;
    }
}

/* Dropdowns - tipografia */
html body .fr-navbar .fr-navbar__dropdown .dropdown-item,
html body .fr-navbar .dropdown-menu .dropdown-item {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}

/* =========================================================
   TABLET / CELULAR
   ========================================================= */
@media (max-width: 1199.98px) {
    html body .fr-navbar {
        background: #f8f9fa !important;
        background-color: #f8f9fa !important;
    }

    html body .fr-navbar .navbar-nav .nav-link,
    html body .fr-navbar .navbar-nav .nav-item > .nav-link {
        font-family: 'Outfit', Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        letter-spacing: .025em !important;
        text-transform: uppercase !important;
    }

    html body .fr-navbar .dropdown-menu,
    html body .fr-navbar .dropdown-item {
        background: #f8f9fa !important;
        background-color: #f8f9fa !important;
    }

    html body .fr-navbar .fr-navbar__search-inline .form-control {
        font-family: Arial, Helvetica, sans-serif !important;
        font-weight: 400 !important;
        background: #fff !important;
    }
}

/* V173 — tipografia do menu igual às categorias de Eventos */
html body .fr-navbar .navbar-nav .nav-link,
html body .fr-navbar .navbar-nav .nav-item > .nav-link,
html body .fr-navbar .fr-navbar__links > .nav-item > a.nav-link {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}

html body .fr-navbar .fr-navbar__dropdown .dropdown-item,
html body .fr-navbar .dropdown-menu .dropdown-item {
    font-family: 'Outfit', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
}


/* V174 — reduz o tamanho do menu para ficar proporcional às categorias e não encostar na busca. */
@media (min-width: 1320px) {
    html body .fr-navbar .navbar-nav .nav-link,
    html body .fr-navbar .navbar-nav .nav-item > .nav-link,
    html body .fr-navbar .fr-navbar__links > .nav-item > a.nav-link {
        font-size: 15px !important;
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    html body .fr-navbar .navbar-nav .nav-link,
    html body .fr-navbar .navbar-nav .nav-item > .nav-link,
    html body .fr-navbar .fr-navbar__links > .nav-item > a.nav-link {
        font-size: 15px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }
}

html body .fr-navbar .fr-navbar__dropdown .dropdown-item,
html body .fr-navbar .dropdown-menu .dropdown-item {
    font-size: 14px !important;
}