@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&family=Dancing+Script:wght@600&display=swap');

:root { --kf-ink:#302c29; --kf-muted:#706a65; --kf-gold:#d79622; --kf-gold-dark:#b97512; --kf-line:#ebe4dc; --kf-paper:#fffdf9; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--kf-ink); background:var(--kf-paper); font-family:'Nunito Sans',sans-serif; }

.kf-appbar { height:78px!important; padding:0 clamp(1rem,4vw,4.5rem); color:var(--kf-ink)!important; background:rgba(255,253,249,.96)!important; border-bottom:1px solid var(--kf-line); box-shadow:0 2px 16px rgba(53,40,26,.04)!important; overflow:hidden; }
.kf-appbar .mud-toolbar { flex-wrap:nowrap; }
.kf-appbar-brand { display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; }
.kf-appbar-crown { width:auto; height:34px; filter:drop-shadow(0 3px 5px rgba(150,96,12,.22)); }
.kf-appbar-title,.kf-footer-title { color:var(--kf-ink); font-family:'Cinzel',serif; font-size:1.35rem; font-weight:600; letter-spacing:.045em; }
.kf-main-nav { display:flex; align-items:stretch; align-self:stretch; gap:1.75rem; margin-left:auto; margin-right:1.25rem; }
.kf-main-nav a { display:inline-flex; align-items:center; color:var(--kf-ink)!important; font-size:.82rem; font-weight:600; text-decoration:none; border-bottom:2px solid transparent; }
.kf-main-nav a:hover { color:var(--kf-gold)!important; border-bottom-color:var(--kf-gold); }
.kf-locale-activator { text-transform:none!important; font-weight:600; font-size:.85rem; letter-spacing:.02em; white-space:nowrap; flex-shrink:0; }
.kf-locale-label { white-space:nowrap; }

/* Abaixo de ~480px (a maioria dos celulares em retrato) não sobra espaço
   horizontal suficiente pra "bandeira + PT / PT + seta" ao lado do logo, da
   busca e do carrinho — o texto do botão quebrava linha dentro do MudButton
   e, como o .kf-appbar tem altura fixa (78px, sem overflow:hidden até essa
   correção), as linhas extras vazavam pra fora da barra, sobrepondo o
   conteúdo logo acima/abaixo dela. Escondendo só o texto (mantém a bandeira,
   clicável, abrindo o mesmo painel com todas as opções) resolve sem perder
   funcionalidade. */
@media (max-width:480px) {
    .kf-locale-label { display:none; }
    .kf-locale-activator .mud-button-end-icon { margin-left:.15rem; }
}
.kf-flag-icon { width:20px; height:14px; vertical-align:middle; margin-right:.35rem; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); flex-shrink:0; }

/* Mesmo problema de espaço da bandeira/idioma, só que pro trecho
   "saudação + Sair" que só existe quando o visitante está autenticado —
   por isso só aparecia espremido/cortado nesse caso (ver captura enviada:
   deslogado só tem o botão "Entrar", curto, cabia sem problema). O nome/
   e-mail do cliente em "@Resx["Nav_Greeting", ...]" pode ser bem mais
   longo que "Entrar" e, junto com "Sair", estourava a largura disponível
   ao lado do logo/busca/carrinho — como a barra já tem overflow:hidden
   (ver correção da bandeira acima), isso cortava o texto no meio em vez
   de quebrar linha, mas o botão "Sair" ficava inacessível (fora da tela).
   Abaixo de 600px escondemos os textos e deixamos só os ícones (perfil e
   logout), sempre clicáveis. */
.kf-appbar-greeting-link,.kf-appbar-logout,.kf-appbar-login { white-space:nowrap; flex-shrink:0; }
.kf-appbar-greeting-link { display:inline-flex; align-items:center; }
.kf-appbar-greeting-icon { margin-right:.35rem; }

@media (max-width:600px) {
    .kf-appbar-greeting-text,.kf-appbar-logout-text { display:none; }
    .kf-appbar-greeting-link { margin-right:.35rem!important; }
    .kf-appbar-logout .mud-button-start-icon { margin-right:0; margin-left:0; }
}

/* Menu hamburger — abaixo de 900px o <nav> principal (kf-main-nav) some
   por falta de espaço (ver regra mais abaixo) e, até agora, os links
   (Início, Sobre, Escolha seu Reino, Meus Pedidos, Favoritos) ficavam
   simplesmente inacessíveis no mobile. Esse botão só existe visualmente
   nessa faixa de largura — acima disso o <nav> normal já mostra os
   mesmos links, então o MudDrawer nunca chega a abrir sozinho. */
.kf-mobile-menu-button { display:none; margin-right:.25rem; }
@media (max-width:900px) {
    .kf-mobile-menu-button { display:inline-flex; }
}
/* O container interno do MudDrawer é flex e, por padrão do MudBlazor,
   distribui os filhos com o conteúdo "colado" embaixo — por isso cabeçalho
   (logo) ficava no topo, mas o MudNavMenu (o segundo bloco de filhos) ia
   parar lá embaixo, com um vão enorme no meio. Forçando o alinhamento pro
   topo aqui resolve sem mexer em nada do MudBlazor em si. */
.kf-mobile-drawer .mud-drawer-content { display:flex; flex-direction:column; justify-content:flex-start; background:var(--kf-paper); }
.kf-mobile-drawer-header { background:var(--kf-paper); flex:0 0 auto; }
.kf-mobile-drawer .mud-navmenu { flex:0 0 auto; }
.kf-mobile-drawer .mud-nav-link { font-family:'Nunito Sans',sans-serif; font-weight:700; color:var(--kf-ink); }
.kf-mobile-drawer .mud-nav-link.active { color:var(--kf-gold-dark)!important; }
.kf-locale-panel { width:270px; padding:1rem 1.1rem .9rem; }
.kf-locale-panel-title { display:block; text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; font-weight:700; color:var(--kf-ink); margin-bottom:.6rem; }
.kf-locale-section-label { display:block; text-transform:uppercase; letter-spacing:.05em; font-size:.68rem; font-weight:700; color:var(--kf-gold-dark); margin:.2rem 0 .1rem; }
.kf-page-shell { width:100%; max-width:none!important; margin:0!important; padding:0!important; }
/* :not(.mud-progress-circular) — sem essa exceção, o spinner de "carregando"
   (<MudProgressCircular Indeterminate="true" />, presente como filho direto
   de várias páginas: Meus Pedidos, Favoritos, Carrinho etc. enquanto os
   dados ainda não chegaram) também recebia esse width:min(1180px,...). O
   spinner é um <svg> com viewBox quadrado (aspect-ratio 1:1) e altura
   "auto" — ao forçar a LARGURA pra ~1180px sem mexer na altura, o próprio
   navegador recalculava a altura pra manter a proporção, virando um
   quadrado gigante; como o traço "indeterminate" só desenha um trecho do
   círculo (não a volta toda), o resultado era essa faixa curva enorme
   sobrepondo o rodapé, em vez do pequeno spinner circular esperado. */
.kf-page-shell > :not(.kf-hero):not(.kf-home-section):not(.kf-track-order-banner):not(.mud-progress-circular) { width:min(1180px,calc(100% - 3rem)); max-width:1180px; margin-left:auto; margin-right:auto; }

/* Centraliza o spinner "carregando" (svg .mud-progress-circular) — como ele
   é um <svg> normal no fluxo do documento (não inline-flex/grid), display:
   block + margin:auto o centraliza horizontalmente; o margin vertical só dá
   um respiro em relação ao título da página logo acima. Só a Store usa essa
   classe fora do padrão do MudBlazor (Panel não pediu isso). */
.kf-page-shell > .mud-progress-circular {
  display: block;
  margin: 2.5rem auto;
}

.kf-hero { position:relative; min-height:590px; margin:0 0 4.75rem; overflow:hidden; background-color:#f7f2eb; background-position:center; background-repeat:no-repeat; background-size:cover; }
.kf-hero::before { position:absolute; inset:0; content:''; background:linear-gradient(90deg,rgba(255,253,249,.98) 0%,rgba(255,253,249,.9) 40%,rgba(255,253,249,.2) 65%,rgba(255,253,249,.04) 100%); }
.kf-hero-grid { position:relative; display:flex; align-items:center; gap:2rem; width:min(1180px,calc(100% - 3rem)); min-height:590px; margin:0 auto; }
.kf-hero-text { z-index:1; flex:0 1 48%; max-width:510px; padding:3rem 0; text-align:left; }
.kf-hero-eyebrow-crown { display:block; width:38px; height:38px; object-fit:contain; margin-bottom:.15rem; }
.kf-hero-eyebrow { margin:0 0 .35rem; color:var(--kf-gold-dark); font-family:'Cinzel',serif; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.kf-hero-logo { display:block; width:min(100%,420px); height:auto; margin:0 0 1.15rem; filter:none; }
.kf-hero-description { max-width:355px; margin:0 0 1.65rem; color:#5f5852; font-size:1.05rem; line-height:1.7; }
.kf-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.kf-hero-cta { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 1.4rem; color:#fff!important; background:linear-gradient(110deg,#c98217,#e0a12e); border:1px solid #d18c1f; border-radius:5px; box-shadow:0 8px 18px rgba(178,114,17,.18); font-size:.78rem; font-weight:700; text-decoration:none!important; text-transform:uppercase; transition:transform .2s ease,box-shadow .2s ease; }
.kf-hero-cta:hover { transform:translateY(-2px); box-shadow:0 12px 22px rgba(178,114,17,.25); }
.kf-hero-cta-outline { color:var(--kf-gold-dark)!important; background:rgba(255,255,255,.5); border-color:var(--kf-gold); box-shadow:none; }
.kf-hero-promises { display:flex; gap:1.25rem; margin-top:2.6rem; }
.kf-hero-promises span { display:flex; flex:1; flex-direction:column; gap:.45rem; color:#5c554f; font-size:.65rem; font-weight:700; line-height:1.35; text-transform:uppercase; }
.kf-hero-promises img { width:35px; height:35px; object-fit:contain; }
.kf-hero-king { z-index:1; flex:1 1 42%; text-align:center; }
.kf-hero-king img { width:100%; max-width:470px; height:auto; filter:drop-shadow(0 18px 22px rgba(56,33,15,.2)); }
.kf-hero-carousel { position:relative; width:min(470px,100%); height:440px; margin:0 auto; overflow:hidden; }
.kf-hero-carousel-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:translateX(60px); transition:opacity .7s ease,transform .7s ease; }
.kf-hero-carousel-slide-active { opacity:1; transform:translateX(0); }
.kf-hero-carousel-slide-prev { opacity:0; transform:translateX(-60px); }

.kf-home-section { width:min(1180px,calc(100% - 3rem)); margin:0 auto 4.75rem; }
.kf-section-heading { margin-top: 2rem; color:var(--kf-ink); font-family:'Cinzel',serif; font-size:clamp(1.55rem,2vw,2rem)!important; font-weight:500!important; }
.kf-section-divider { display:block; width:min(210px,50%); margin:.2rem auto 2.25rem; opacity:.72; }
/* Conteúdo HTML rico vindo do RadzenHtmlEditor (Panel) — só usado em
   Pages/About.razor por enquanto. Estilo básico pra parágrafo/lista/link
   ficarem no tom do resto do site em vez do default cru do navegador. */
.kf-rich-text { max-width:760px; color:var(--kf-ink); line-height:1.7; }
.kf-rich-text p { margin:0 0 1rem; }
.kf-rich-text h1,.kf-rich-text h2,.kf-rich-text h3,.kf-rich-text h4 { margin:1.5rem 0 .75rem; font-family:'Cinzel',serif; font-weight:500; color:var(--kf-ink); }
.kf-rich-text ul,.kf-rich-text ol { margin:0 0 1rem; padding-left:1.4rem; }
.kf-rich-text a { color:var(--kf-gold-dark); }
.kf-rich-text blockquote { margin:0 0 1rem; padding:.25rem 1rem; border-left:3px solid var(--kf-gold); color:var(--kf-muted); }
.kf-rich-text img { max-width:100%; border-radius:6px; }
.kf-kingdoms-section > .mud-typography { color:var(--kf-muted); }
.kf-brand-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.85rem; }
.kf-brand-card { height:100%; background:#fff!important; border:1px solid var(--kf-line)!important; border-radius:10px!important; box-shadow:0 2px 10px rgba(65,45,28,.035)!important; overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; }
.kf-brand-card:hover { transform:translateY(-5px); box-shadow:0 14px 26px rgba(65,45,28,.11)!important; }
.kf-brand-card .mud-card-media { border-bottom:1px solid #f4eee8; }
.kf-brand-card .mud-card-content { padding:1.05rem 1.1rem .65rem; }
.kf-brand-card .mud-card-actions { padding:.45rem 1.1rem 1rem; }
.kf-brand-card .mud-button { color:var(--kf-gold-dark)!important; font-size:.72rem; font-weight:700; }
.kf-why-section { padding:2.5rem 2.75rem; background:linear-gradient(135deg,#fff 0%,#fcf7f1 100%); border:1px solid var(--kf-line); border-radius:10px; }
.kf-value-prop { height:100%; padding:1rem 1.4rem; text-align:left; }
.kf-value-prop img { float:left; width:54px; height:54px; margin:.1rem 1rem 1.4rem 0; object-fit:contain; }
.kf-value-prop h3 { margin:0 0 .35rem; color:var(--kf-ink); font-family:'Cinzel',serif; font-size:1rem; font-weight:600; }

.kf-track-order-banner { display:flex; align-items:center; justify-content:center; gap:1.5rem; width:min(1180px,calc(100% - 3rem)); min-height:110px; margin:0 auto 3rem; padding:1.5rem 2rem; text-align:left; background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.82)),url('/images/ornament-ribbon.webp') center / cover no-repeat; border:1px solid var(--kf-line); border-radius:9px; }
.kf-track-order-banner h3 { margin:0; color:var(--kf-ink); font-family:'Cinzel',serif; font-size:1.05rem; }
.kf-track-order-banner .mud-typography { margin:.2rem 0 0; color:var(--kf-muted); }
.kf-track-order-banner .mud-button { margin-left:auto; color:#fff; background:var(--kf-gold); }

.kf-footer { display:grid; grid-template-columns:1.4fr 1fr; gap:1.25rem; max-width:1180px; margin:4rem auto 0; padding:2.7rem 1.5rem 1.5rem; border-top:1px solid var(--kf-line); text-align:left; }
.kf-footer-divider { display:none; }.kf-footer-brand { margin:0; }.kf-footer-crown { width:auto; height:33px; vertical-align:middle; margin-right:.4rem; }
.kf-footer-tagline { margin:.5rem 0 0; color:#8a817a; font-family:'Dancing Script',cursive; font-size:1.1rem; }
.kf-footer-links { display:flex; align-items:center; justify-content:flex-end; gap:1.25rem; margin:0; flex-wrap:wrap; }.kf-footer-links a { color:var(--kf-muted); font-size:.78rem; font-weight:600; text-decoration:none; }.kf-footer-links a:hover { color:var(--kf-gold-dark); }
.kf-footer-bottom { grid-column:1 / -1; padding-top:1.25rem; color:#aaa29a; border-top:1px solid var(--kf-line); text-align:center; }

/* Shared styling for catalog, checkout, account and order screens. */
.mud-card { border:1px solid var(--kf-line); border-radius:10px!important; box-shadow:0 3px 14px rgba(65,45,28,.045)!important; }.mud-button-filled-primary { color:#fff!important; background:var(--kf-gold)!important; }.mud-input-control-input-container,.mud-input-outlined-border { border-radius:6px!important; }
.kf-brand-header { margin-top:2rem; }
.kf-whatsapp-fab { position:fixed; right:24px!important; bottom:24px; left:auto!important; width:auto!important; min-width:0!important; max-width:calc(100vw - 48px); padding-inline:20px!important; white-space:nowrap; z-index:1200; box-shadow:0 5px 16px rgba(0,0,0,.2); }.kf-auth-brand { text-align:center; margin-bottom:.5rem; }.kf-auth-crown { width:auto; height:40px; margin-bottom:.5rem; }.kf-auth-title { display:block; color:var(--kf-ink); font-family:'Cinzel',serif; font-size:1.5rem; font-weight:600; }

@media (max-width:900px) { .kf-main-nav { display:none; }.kf-hero { min-height:auto; }.kf-hero-grid { min-height:0; padding:3.5rem 0; }.kf-hero-text { flex-basis:54%; }.kf-hero-carousel { height:350px; } }
@media (max-width:640px) { .kf-appbar { height:64px!important; padding:0 1rem; }.kf-appbar-title { font-size:1rem; }.kf-appbar-crown { height:27px; }.kf-hero { margin-bottom:3rem; background-position:62% center; }.kf-hero::before { background:rgba(255,253,249,.91); }.kf-hero-grid { display:block; width:min(100% - 2rem,520px); padding:2.5rem 0 0; }.kf-hero-text { max-width:none; padding:0; text-align:center; }.kf-hero-eyebrow-crown { margin-left:auto; margin-right:auto; }.kf-hero-logo { width:min(100%,330px); margin-left:auto; margin-right:auto; }.kf-hero-description { margin-left:auto; margin-right:auto; }.kf-hero-actions { justify-content:center; }.kf-hero-promises { gap:.6rem; margin-top:2rem; text-align:left; }.kf-hero-promises span { font-size:.57rem; }.kf-hero-promises img { width:28px; height:28px; }.kf-hero-king { margin-top:1.2rem; }.kf-hero-carousel { height:280px; }.kf-home-section { width:min(100% - 2rem,540px); margin-bottom:3rem; }.kf-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.kf-why-section { padding:1.75rem 1rem; }.kf-value-prop { padding:.9rem .3rem; }.kf-track-order-banner { flex-direction:column; align-items:flex-start; width:min(100% - 2rem,540px); padding:1.5rem; }.kf-track-order-banner .mud-button { margin-left:0; }.kf-footer { grid-template-columns:1fr; margin-top:3rem; padding:2rem 1rem 1.25rem; text-align:center; }.kf-footer-links { justify-content:center; } }

/* Home: composição editorial baseada em Home_NEW_CLEAN. */
.kf-hero { min-height:620px; }
.kf-hero::before { background:radial-gradient(circle at 78% 31%,rgba(213,166,89,.12),transparent 27%),linear-gradient(90deg,rgba(255,253,249,.98) 0%,rgba(255,253,249,.9) 38%,rgba(255,253,249,.42) 61%,rgba(255,253,249,.08) 78%,rgba(255,253,249,.02) 100%)!important; }
.kf-hero-grid { min-height:620px; }
.kf-hero-text { max-width:500px; }
.kf-hero-eyebrow { margin-bottom:.75rem; font-size:.75rem; }
.kf-hero-title { max-width:455px; margin:0 0 1.2rem; color:var(--kf-ink); font-family:'Cinzel',serif; font-size:clamp(2.5rem,4vw,4.4rem); font-weight:600; letter-spacing:-.035em; line-height:1.04; }
.kf-hero-title span { display:block; margin-top:.18rem; color:var(--kf-gold); font-size:clamp(1.15rem,1.75vw,1.75rem); letter-spacing:.01em; line-height:1.25; }
.kf-hero-description { max-width:390px; }
.kf-hero-promises { max-width:370px; }
.kf-hero-promises span { position:relative; padding-right:.7rem; }
.kf-hero-promises span:not(:last-child)::after { position:absolute; top:7px; right:0; width:1px; height:49px; background:var(--kf-line); content:''; }
.kf-hero-king { align-self:stretch; display:flex; align-items:flex-end; justify-content:center; overflow:visible; }
.kf-hero-artwork { position:relative; width:min(530px,100%); height:570px; }

.kf-hero-seal { position:absolute; z-index:2; top:34px; left:11%; width:72%; max-width:none!important; filter:drop-shadow(0 15px 20px rgba(64,35,13,.22))!important; }
.kf-brand-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.kf-brand-card .mud-card-media { height:180px!important; background-position:top center!important; mask-image:linear-gradient(to bottom,#000 72%,transparent); }
.kf-brand-card .mud-card-content { min-height:128px; padding:.8rem .9rem .3rem; text-align:center; }
.kf-brand-card .mud-card-content .mud-typography:first-child { font-size:.88rem; line-height:1.3; }
.kf-brand-card .mud-card-actions { justify-content:center; padding:.1rem .8rem .8rem; }
.kf-brand-card .mud-card-actions .mud-button { font-size:.65rem; }
@media (max-width:1100px) { .kf-brand-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .kf-hero-artwork { height:410px; }.kf-hero-seal { top:28px; left:12%; width:76%; } }
@media (max-width:640px) { .kf-hero { min-height:0; }.kf-hero-grid { min-height:0; }.kf-hero-title { font-size:2.5rem; }.kf-hero-title span { font-size:1.1rem; }.kf-hero-artwork { width:320px; height:315px; margin:0 auto; }.kf-hero-seal { top:8px; left:12%; width:76%; }.kf-brand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.kf-brand-card .mud-card-media { height:145px!important; } }

.mud-chip-container{display: block!important;}

@media (max-width:900px) {
    aside.mud-drawer.kf-mobile-drawer { background: var(--kf-paper) !important; }
    aside.mud-drawer.kf-mobile-drawer .mud-drawer-content { background: var(--kf-paper) !important; }
    
    /* Força o drawer a não empurrar o conteúdo para baixo */
    .kf-mobile-drawer .mud-drawer-content {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        flex: 0 0 auto !important; /* <- ESSENCIAL */
        height: auto !important;   /* <- ESSENCIAL */
    }

    .kf-mobile-drawer-menu .mud-icon-root {
        color: var(--kf-gold-dark);
        opacity: .9;
        margin-right: 0
    }

    .kf-mobile-drawer-menu .mud-nav-link {
        padding-left: .35rem !important;
        padding-right: .35rem !important;
        display: flex !important;
        align-items: center !important;
        gap: .55rem !important; /* espaço entre ícone e texto */
        min-height: 42px; /* garante altura uniforme */
    }

    .kf-mobile-drawer-menu .mud-nav-link-text {
        margin-left: .35rem !important;
        display: flex !important;
        align-items: center !important;
        margin-top: 1px; /* microajuste visual */
        gap: .85rem !important; /* ajuste real do espaçamento */
    }

    /* Ícones mais próximos do texto */
    .kf-mobile-drawer-menu .mud-icon-root {
        margin-right: 0 !important;
    }

    /* Garante que o menu não tente ocupar o espaço restante */
    .kf-mobile-drawer-menu {
        flex: 0 0 auto !important;
        margin-top: 0 !important;
        padding-top: .75rem !important;
    }

    /* Logo centralizada no drawer */
    .kf-mobile-drawer-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 1.25rem 0 1rem;
        background: var(--kf-paper);
    }

    .kf-mobile-drawer-logo img {
        width: 150px;
        height: auto;
        filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
    }

    .kf-mobile-divider {
        margin: .65rem 0 .55rem;
        border-color: var(--kf-line) !important;
        opacity: .55;
    }

    /* Ajusta o ícone para ficar perfeitamente alinhado */
    .kf-mobile-drawer-menu .mud-icon-root {
        font-size: 1.25rem !important; /* tamanho consistente */
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }
}

.social-login-button {
    position: relative;
    height: 40px;
    min-height: 40px;
    border: 1px solid #dadce0 !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    color: #202124 !important;
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: none !important;
    box-shadow: none !important;
    padding: 0 12px !important;
}

.social-login-button:hover {
    background-color: #f8f9fa !important;
    border-color: #c6c6c6 !important;
    box-shadow: none !important;
}

.facebook-login-button {
    position: relative;
}

.facebook-login-button .facebook-login-icon {
    position: absolute;
    left: 12px;
    color: #1877F2;
}