/**
 * CABINET MAURICE POLLET - COMMUNE RURALES
 * FEUILLE DE STYLE CENTRALISÉE & DESIGN SYSTEM INSTITUTIONNEL
 * Version: 1.0.0
 * Fichier autonome indépendant du Chatbot
 */

/* ==========================================================================
   1. POLICES & VARIABLES TYPOGRAPHIQUES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
    /* Typographies */
    --cr-font-serif: 'Spectral', 'Playfair Display', Georgia, serif;
    --cr-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cr-font-display: 'Cinzel', 'Spectral', Georgia, serif;

    /* Palette institutionnelle & républicaine */
    --cr-blue-deep: #001730;
    --cr-blue-navy: #00284d;
    --cr-blue-rep: #004886;
    --cr-gold: #D4AF37;
    --cr-gold-light: #F9E79F;
    --cr-green-accent: #16a34a;
    --cr-green-hover: #15803d;
    --cr-slate-dark: #1e293b;
    --cr-slate-body: #334155;
    --cr-slate-light: #64748b;
    --cr-bg-alt: #f8fafc;
    --cr-border: rgba(226, 232, 240, 0.9);
}

/* ==========================================================================
   2. BASES & TYPOGRAPHIE
   ========================================================================== */
body,
.cr-wrapper,
p,
li,
span,
a,
input,
textarea,
select,
button,
.cr-hero-desc,
.cr-srv-lead,
.cr-srv-hero-desc,
.cr-card-desc,
.cr-split-p,
.cr-srv-card-desc,
.cr-step-desc,
.cr-bio-paragraph,
.cr-cta-sub,
.main-navigation,
.header-navigation,
.nav-menu {
    font-family: var(--cr-font-sans) !important;
    color: var(--cr-slate-body);
}

.cr-wrapper {
    line-height: 1.65;
    background-color: #ffffff;
    overflow-x: hidden;
}

.cr-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Titres statutaires (Style Cour des Comptes & Conseil de renom) */
h1, h2, h3, h4,
.cr-hero-title,
.cr-srv-h1,
.cr-srv-hero-title,
.cr-cases-title,
.cr-section-title,
.cr-split-title,
.cr-card-title,
.cr-srv-card-title,
.cr-step-title,
.cr-cta-title,
.cr-bio-heading,
.cr-founder-name,
.cr-booking-h1,
.cr-legal-h1,
.cr-case-subheading {
    font-family: var(--cr-font-serif) !important;
    letter-spacing: -0.015em !important;
    font-weight: 700 !important;
    color: var(--cr-blue-deep);
}

/* Chiffres clés & Métriques */
.cr-metric-val,
.cr-card-num,
.cr-card-tag {
    font-family: var(--cr-font-serif) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Surtitres et Badges */
.cr-eyebrow,
.cr-hero-badge,
.cr-srv-badge,
.cr-cases-badge,
.cr-booking-badge,
.cr-legal-badge,
.cr-badge,
.cr-step-pill {
    font-family: var(--cr-font-sans) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   3. HEADER & BOUTONS D'ACTION (KADENCE)
   ========================================================================== */
@media (min-width: 1025px) {
    /* Bouton Prendre Contact */
    .header-button-wrap .header-button,
    a.button.header-button {
        background: #004886 !important;
        color: #ffffff !important;
        border: 2px solid #004886 !important;
        padding: 8px 20px !important;
        border-radius: 50px !important;
        font-weight: 800 !important;
        font-size: 0.92rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 2px 8px rgba(0, 72, 134, 0.15) !important;
    }
    .header-button-wrap .header-button:hover,
    a.button.header-button:hover {
        background: #00284d !important;
        border-color: #00284d !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 14px rgba(0, 72, 134, 0.3) !important;
    }

    /* Bouton Rendez-vous Visio */
    li.menu-btn-rdv > a,
    #site-navigation li.menu-btn-rdv > a,
    .main-navigation li.menu-btn-rdv > a,
    .header-navigation li.menu-btn-rdv > a {
        background: #16a34a !important;
        color: #ffffff !important;
        border: 2px solid #16a34a !important;
        padding: 8px 20px !important;
        border-radius: 50px !important;
        font-weight: 800 !important;
        font-size: 0.92rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
        margin-left: 10px !important;
        margin-right: 4px !important;
        text-decoration: none !important;
        transition: all 0.25s ease !important;
        box-shadow: 0 2px 8px rgba(22, 163, 74, 0.28) !important;
    }
    li.menu-btn-rdv > a:hover,
    #site-navigation li.menu-btn-rdv > a:hover,
    .main-navigation li.menu-btn-rdv > a:hover,
    .header-navigation li.menu-btn-rdv > a:hover {
        background: #15803d !important;
        border-color: #15803d !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45) !important;
    }
}

/* Menu Mobile & Tablette */
@media (max-width: 1024px) {
    li.menu-btn-contact > a,
    li.menu-btn-rdv > a {
        display: block !important;
        padding: 10px 16px !important;
        margin: 8px 16px !important;
        border-radius: 8px !important;
        text-align: center !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }
    li.menu-btn-contact > a {
        background: #ffffff !important;
        color: #004886 !important;
        border: 2px solid #004886 !important;
    }
    li.menu-btn-rdv > a {
        background: #16a34a !important;
        color: #ffffff !important;
        border: 2px solid #16a34a !important;
    }
}

/* ==========================================================================
   4. MATÉRIALITÉ & TEXTURES VISUELLES (SORTIR DU « TOUT PLAT »)
   ========================================================================== */

/* Cartes & Conteneurs avec Matière Noble et Biseau Doré Républicain */
html body .cr-card,
html body .cr-srv-card,
html body .cr-step-card,
html body .cr-contact-card,
html body .cr-booking-card,
html body .cr-case-card,
html body .cr-split-card,
html body .cr-intro-card,
html body .cr-bio-box,
html body .cr-legal-card {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid var(--cr-border) !important;
    box-shadow: 0 4px 12px -2px rgba(0, 23, 48, 0.05), 0 12px 28px -4px rgba(0, 23, 48, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

/* Liseré supérieur biseauté or & bleu républicain */
html body .cr-card::before,
html body .cr-srv-card::before,
html body .cr-step-card::before,
html body .cr-contact-card::before,
html body .cr-booking-card::before,
html body .cr-case-card::before,
html body .cr-split-card::before,
html body .cr-intro-card::before,
html body .cr-bio-box::before,
html body .cr-legal-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #004886 0%, #D4AF37 55%, rgba(212, 175, 55, 0.15) 100%) !important;
    z-index: 2 !important;
}

/* Élévation & Profondeur dynamique au survol */
html body .cr-card:hover,
html body .cr-srv-card:hover,
html body .cr-step-card:hover,
html body .cr-contact-card:hover,
html body .cr-case-card:hover,
html body .cr-split-card:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 16px 36px -4px rgba(0, 23, 48, 0.12), 0 22px 48px -6px rgba(212, 175, 55, 0.16), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Glassmorphism poli & Effet verre sablé */
html body .cr-metric-item,
html body .cr-reassurance-card,
html body .cr-support-banner,
html body .cr-perspective-box,
html body .cr-booking-reassurance,
html body .cr-faq-item,
html body .cr-legal-info-box {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 6px 20px -2px rgba(0, 23, 48, 0.06), 0 2px 6px -1px rgba(0, 23, 48, 0.04), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}
html body .cr-perspective-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.93) 100%) !important;
    border-left: 4px solid #D4AF37 !important;
}

/* Badges avec relief et éclat métallique */
html body .cr-badge,
html body .cr-hero-badge,
html body .cr-srv-badge,
html body .cr-step-pill,
html body .cr-cases-badge,
html body .cr-booking-badge,
html body .cr-legal-badge {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 245, 249, 0.92) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    color: #004886 !important;
    box-shadow: 0 2px 8px rgba(0, 23, 48, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    font-weight: 700 !important;
}

/* Filigrane vectoriel républicain sur les sections Hero & CTA */
html body .cr-hero,
html body .cr-srv-hero,
html body .cr-srv-detail-hero,
html body .cr-cases-hero,
html body .cr-page-hero,
html body .cr-contact-hero,
html body .cr-booking-hero,
html body .cr-legal-hero {
    position: relative !important;
}
html body .cr-hero::after,
html body .cr-srv-hero::after,
html body .cr-srv-detail-hero::after,
html body .cr-cases-hero::after,
html body .cr-page-hero::after,
html body .cr-contact-hero::after,
html body .cr-booking-hero::after,
html body .cr-legal-hero::after {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.035' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Trame subtile pour les sections alternées */
html body .cr-section-alt,
html body .cr-cases-wrap {
    background-color: #f8fafc !important;
    background-image: radial-gradient(rgba(0, 72, 134, 0.04) 1px, transparent 1px) !important;
    background-size: 24px 24px !important;
}

/* Bannière CTA avec dégradé républicain & liseré d'or */
html body .cr-cta-banner,
html body .cr-srv-cta-card,
html body .cr-case-cta-banner {
    position: relative !important;
    background: linear-gradient(135deg, #001730 0%, #00284d 50%, #003870 100%) !important;
    border-top: 3px solid #D4AF37 !important;
    box-shadow: 0 16px 40px -8px rgba(0, 23, 48, 0.35) !important;
    overflow: hidden !important;
}

/* ==========================================================================
   5. BOUTONS D'APPEL À L'ACTION (CTA)
   ========================================================================== */
.cr-cta-buttons-wrap {
    display: flex !important;
    gap: 18px !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-top: 32px !important;
    margin-bottom: 24px !important;
}
div.wp-block-button,
.wp-block-button,
.wp-block-button.cr-btn-srv-cta,
.wp-block-button.cr-btn-primary,
.wp-block-button.cr-btn-cta-green {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

a.cr-btn-cta-green,
a.cr-btn-primary,
a.cr-btn-srv-cta,
button.cr-btn-cta-green,
button.cr-btn-primary,
button.cr-btn-srv-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    padding: 14px 30px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
    border: 2px solid #16a34a !important;
    line-height: 1.3 !important;
}
.cr-btn-cta-green:hover,
.cr-btn-primary:hover,
.cr-btn-srv-cta:hover {
    background: #15803d !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px rgba(22, 163, 74, 0.45) !important;
}
.cr-btn-cta-white {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    color: #001730 !important;
    padding: 16px 36px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
    border: 2px solid #ffffff !important;
    line-height: 1.3 !important;
}
.cr-btn-cta-white:hover {
    background: #f8fafc !important;
    color: #001730 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
}

/* ==========================================================================
   6. CARTE SPÉCIALE ÉTUDES DE CAS (FOND SOMBRE STATUTAIRE - FEATURED)
   ========================================================================== */
html body .cr-card.featured,
html body .cr-srv-card.featured {
    position: relative !important;
    background: linear-gradient(135deg, #001730 0%, #00284d 50%, #003870 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    box-shadow: 0 14px 36px -4px rgba(0, 23, 48, 0.3), 0 20px 48px -6px rgba(212, 175, 55, 0.2) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 36px 30px !important;
}

html body .cr-card.featured::before,
html body .cr-srv-card.featured::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #D4AF37 0%, #F9E79F 50%, #D4AF37 100%) !important;
    z-index: 2 !important;
}

html body .cr-card.featured:hover,
html body .cr-srv-card.featured:hover {
    transform: translateY(-5px) !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 20px 48px -4px rgba(0, 23, 48, 0.45), 0 28px 60px -6px rgba(212, 175, 55, 0.3) !important;
}

/* Badge / Tag */
html body .cr-card.featured .cr-card-tag,
html body .cr-card.featured .cr-card-num,
html body .cr-srv-card.featured .cr-srv-tag {
    background: rgba(212, 175, 55, 0.22) !important;
    color: #fef3c7 !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Titre */
html body .cr-card.featured .cr-card-title,
html body .cr-srv-card.featured .cr-srv-card-title {
    color: #ffffff !important;
    font-family: var(--cr-font-serif) !important;
    font-weight: 700 !important;
    font-size: 1.45rem !important;
    line-height: 1.3 !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
}

/* Description & Paragraphes */
html body .cr-card.featured .cr-card-desc,
html body .cr-srv-card.featured .cr-srv-card-desc {
    color: #e2e8f0 !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
}

/* Liste à puces */
html body .cr-srv-card.featured .cr-srv-list {
    margin: 18px 0 26px 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .cr-srv-card.featured .cr-srv-list li {
    color: #f1f5f9 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
}

html body .cr-srv-card.featured .cr-srv-list li::before {
    content: "✔" !important;
    color: #D4AF37 !important;
    font-weight: 900 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

/* Bouton d'action */
html body .cr-card.featured .cr-card-link-text,
html body .cr-srv-card.featured .cr-btn-srv {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #001730 !important;
    padding: 14px 26px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
    border: 2px solid #ffffff !important;
    margin-top: auto !important;
    width: fit-content !important;
}

html body .cr-card.featured .cr-card-link-text:hover,
html body .cr-srv-card.featured .cr-btn-srv:hover {
    background: #f8fafc !important;
    color: #001730 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
}


/* ==========================================================================
   RASSURANCE MAJEURE ET EXPÉRIENCE (3 BADGES DISTINCTS HAUTE VISIBILITÉ)
   ========================================================================== */
.cr-portal-hero-trust-row,
.wp-block-group.cr-portal-hero-trust-row,
.cr-portal-hero-trust-row > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.cr-trust-pill,
.wp-block-group.cr-trust-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    vertical-align: middle !important;
    gap: 8px !important;
    background: rgba(0, 18, 38, 0.92) !important;
    border: 1.5px solid rgba(212, 175, 55, 0.85) !important;
    border-radius: 50px !important;
    padding: 8px 18px !important;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42), 0 0 16px rgba(212, 175, 55, 0.18) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.cr-trust-pill:hover,
.wp-block-group.cr-trust-pill:hover {
    border-color: #D4AF37 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(212, 175, 55, 0.35) !important;
}

.cr-trust-pill > .wp-block-group__inner-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cr-trust-text,
.cr-trust-pill p {
    color: #f8fafc !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.cr-trust-text strong,
.cr-trust-pill p strong {
    color: #D4AF37 !important;
    font-weight: 800 !important;
}

@media (max-width: 768px) {
    .cr-portal-hero-trust-row,
    .wp-block-group.cr-portal-hero-trust-row,
    .cr-portal-hero-trust-row > .wp-block-group__inner-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .cr-trust-pill,
    .wp-block-group.cr-trust-pill {
        width: 100% !important;
        max-width: 380px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}