/*
Theme Name: Event-Stats
Theme URI: https://event-stats.com
Author: Event-Stats
Description: Thème sur mesure pour Event-Stats, billetterie événementielle en Côte d'Ivoire. Page d'accueil prête à l'emploi (héro, recherche, catégories, grille d'événements, moyens de paiement, appel aux organisateurs). Conçu pour recevoir ensuite WooCommerce, Dokan et Eventin.
Version: 1.0.37
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: event-stats
Tags: e-commerce, event, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* ---------- Tableau de bord vendeur Dokan : couleurs de la barre
   latérale ----------
   Dokan expose son système de couleurs via des variables CSS avec une
   valeur de repli (ex. var(--dokan-sidebar-background-color, #322067),
   var(--dokan-sidebar-hover-background-color, #7047eb) — trouvées dans
   son propre fichier src/vendor-dashboard/layout/style.css) — jamais
   définies par Dokan Lite (la personnalisation de marque est réservée à
   Dokan Pro). On définit donc nous-mêmes ces variables : fond en vert,
   et l'animation de survol/clic sur un lien du menu (fond du lien actif,
   pastille de notification) reprend maintenant l'orange de la page
   d'accueil au lieu du violet par défaut — sans toucher au code de
   Dokan (donc sans risque à sa prochaine mise à jour). */
:root {
  --dokan-sidebar-background-color: #1B4D3E;
  --dokan-sidebar-hover-background-color: #FF6B4A;
  --dokan-sidebar-text-color: #CFE8DA;

  /* Reste du violet trouvé dans le tableau de bord (boutons, liens,
     bordures) — repéré dans src/base-tailwind.css côté Dokan, où toutes
     ces variables valent #7047EB (ou une variante) par défaut. Passées
     ici en vert (au lieu de l'orange utilisé pour l'animation du menu,
     qui reste tel quel — demandé séparément). */
  --dokan-button-background-color: #1F7A54;
  --dokan-button-border-color: #1F7A54;
  --dokan-button-hover-background-color: #145C3E;
  --dokan-button-hover-border-color: #0F4A32;
  --dokan-button-hover-color: #1F7A54;
  --dokan-button-secondary-text-color: #1F7A54;
  --dokan-button-secondary-hover-border-color: #1F7A54;
  --dokan-button-secondary-hover-text-color: #1F7A54;
  --dokan-button-secondary-hover-background-color: #CFE8DA82;
  --dokan-button-tertiary-hover-background-color: #CFE8DA82;
  --dokan-link-color: #1F7A54;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  background: #FAF8F5;
  color: #201433;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
.es-display { font-family: 'Unbounded', 'Work Sans', sans-serif; }
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Layout shell ---------- */
.es-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.es-root { width: 100%; overflow-x: hidden; }

/* ---------- Header ---------- */
.es-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0; border-bottom: 1px solid #EAE3F5;
}
.es-logo { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #201433; }
.es-logo img { max-height: 40px; }
.es-logo-fallback { display: flex; align-items: center; gap: 10px; }
.es-logo-fallback-img { height: 38px; width: 38px; border-radius: 50%; display: block; }
.es-nav { display: flex; align-items: center; gap: 36px; }
.es-nav a { color: #5B4D74; font-size: 14.5px; font-weight: 600; }
.es-nav a:hover { color: #201433; }
/* Copie mobile des liens « Mon compte / Connexion » (voir header.php) :
   invisible sur ordinateur, où la version .es-header-actions suffit déjà
   — ne s'affiche que dans le panneau de menu replié (@media 980px). */
.es-nav-account { display: none; }
.es-header-actions { display: flex; align-items: center; gap: 16px; }

/* ---------- Recherche dans l'en-tête (visible sur toutes les pages) ---------- */
.es-header-search { position: relative; margin-left: 8px; }
.es-search-toggle {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 8px; border: 1px solid #EAE3F5; background: #FFFFFF; color: #201433;
  cursor: pointer; box-sizing: border-box;
}
.es-search-toggle:hover { background: #FFF6F0; border-color: #FF6B4A; color: #E0552F; }
.es-search-toggle[aria-expanded="true"] { background: #FF6B4A; border-color: #FF6B4A; color: #FFFFFF; }
.es-header-search-form {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: flex; gap: 6px;
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 12px; padding: 8px;
  box-shadow: 0 18px 40px rgba(32,20,51,0.16); width: 280px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.es-header-search-form.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.es-header-search-form input[type="text"] {
  flex: 1; min-width: 0; border: 1px solid #EAE3F5; border-radius: 8px; padding: 9px 12px;
  font-size: 14px; color: #201433; background: #FAF8F5;
}
.es-header-search-form input[type="text"]:focus { outline: none; border-color: #FF6B4A; }
.es-header-search-form button[type="submit"] {
  flex: none; width: 38px; height: 38px; border-radius: 8px; border: none; background: #FF6B4A;
  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
}
.es-header-search-form button[type="submit"]:hover { background: #E0552F; }
@media (max-width: 640px) {
  .es-header-search-form { width: calc(100vw - 36px); right: -12px; }
}
.es-btn-ghost { color: #201433; font-size: 14.5px; font-weight: 600; }
.es-btn-ghost--accent {
  color: #E0552F; border: 1.5px solid #FF6B4A; border-radius: 8px; padding: 7px 14px;
}
.es-btn-ghost--accent:hover { background: #FF6B4A; color: #FFFFFF; }

/* ---------- Mise en évidence du formulaire d'inscription (lien « Inscription ») ---------- */
.es-form-highlight {
  outline: 3px solid #FF6B4A; outline-offset: 6px; border-radius: 8px;
  transition: outline-color 2s ease;
}
.es-btn-primary {
  background: #FF6B4A; color: #FFFFFF; font-size: 14.5px; font-weight: 700;
  padding: 11px 22px; border-radius: 10px; border: none; display: inline-block;
}
.es-btn-primary:hover { background: #E0552F; color: #FFFFFF; }
.es-menu-toggle {
  display: none; background: none; border: 1px solid #EAE3F5; border-radius: 8px;
  padding: 8px 10px; margin-left: 8px;
}
.es-menu-toggle span { display: block; width: 20px; height: 2px; background: #201433; margin: 4px 0; }

/* ---------- Hero ---------- */
.es-hero {
  position: relative; padding: 72px 0 52px; overflow: hidden;
  border-bottom: 1px solid #EAE3F5;
}
.es-hero-glow-1 {
  position: absolute; top: -200px; right: -140px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,107,74,0.16), rgba(255,107,74,0) 70%);
  pointer-events: none;
}
.es-hero-glow-2 {
  position: absolute; bottom: -220px; left: -160px; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(255,194,75,0.14), rgba(255,194,75,0) 70%);
  pointer-events: none;
}
.es-hero-inner { position: relative; max-width: 680px; margin: 0 auto 40px; text-align: center; }
.es-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; background: #FFF1EC; border: 1px solid #FFD9CC;
  padding: 7px 16px; border-radius: 30px; font-size: 12px; font-weight: 700; color: #E0552F;
  letter-spacing: .05em; margin-bottom: 20px; text-transform: uppercase;
}
.es-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF6B4A; display: inline-block; }
.es-hero h1 { font-size: 44px; line-height: 1.14; font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; color: #201433; }
.es-hero p { font-size: 16.5px; line-height: 1.6; color: #5B4D74; margin: 0; }

/* Search bar */
.es-search {
  position: relative; background: #FFFFFF; border-radius: 16px; padding: 10px;
  display: flex; align-items: stretch; gap: 0; max-width: 900px; margin: 0 auto;
  box-shadow: 0 24px 50px -22px rgba(32,20,51,0.22); border: 1px solid #F1ECFA;
}
.es-search-field { flex: 1; display: flex; flex-direction: column; padding: 12px 20px; min-width: 0; }
.es-search-field.es-search-field--query { flex: 2; }
.es-search-field label { font-size: 11px; font-weight: 700; color: #8A7FA8; text-transform: uppercase; letter-spacing: .05em; }
.es-search-field input, .es-search-field select {
  border: none; padding: 0; margin-top: 3px; font-size: 14.5px; color: #201433; font-weight: 600;
  background: transparent; width: 100%;
}
.es-search-field input:focus, .es-search-field select:focus { outline: none; }
.es-search-field input:disabled { opacity: .5; cursor: not-allowed; }
.es-search-divider { width: 1px; background: #EEE8F8; margin: 10px 0; }
.es-search-submit {
  flex: none; align-self: center; margin: 0 4px; background: #1F7A54; color: #FFFFFF;
  font-size: 14.5px; font-weight: 700; padding: 0 28px; border-radius: 11px;
  display: flex; align-items: center; gap: 8px; height: 48px; border: none;
}
.es-search-submit:hover { background: #145C3E; }

/* Category chips */
.es-chips { display: flex; gap: 10px; margin-top: 28px; justify-content: center; flex-wrap: wrap; }
.es-chip {
  background: #FFFFFF; border: 1px solid #EAE3F5; color: #5B4D74; font-size: 13px; font-weight: 600;
  padding: 9px 20px; border-radius: 30px; transition: background .15s, color .15s;
}
.es-chip.is-active, .es-chip:hover { background: #FF6B4A; border-color: #FF6B4A; color: #FFFFFF; }

/* ---------- Event grid ---------- */
.es-section { padding: 56px 0 76px; }
.es-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.es-section-head h2 { font-size: 23px; font-weight: 700; margin: 0; color: #201433; }
.es-see-all { color: #E0552F; font-size: 14px; font-weight: 700; }
.es-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.es-card {
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 14px; overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.es-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(32,20,51,0.28);
  border-color: #FFD9CC;
}
.es-card-media {
  height: 158px; position: relative; background-size: cover; background-position: center;
  transition: transform .3s ease;
}
.es-card:hover .es-card-media { transform: scale(1.06); }
.es-card-tag {
  position: absolute; top: 14px; left: 14px; background: rgba(32,20,51,0.72); color: #FFC24B;
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; text-transform: uppercase;
}
.es-card-body { padding: 19px; }
.es-card-meta { font-size: 12.5px; color: #8A7FA8; font-weight: 600; margin-bottom: 6px; }
.es-card-title { font-size: 16.5px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; color: #201433; }
.es-card-foot { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.es-card-price { font-size: 14.5px; font-weight: 700; color: #1F7A54; }
.es-card-price del { color: #8A7FA8; font-weight: 500; opacity: .8; margin-right: 4px; }
.es-card-price ins { text-decoration: none; }
.es-card-title a:hover { color: #E0552F; }
.es-card-city { font-size: 12px; color: #8A7FA8; }
.es-card-buy {
  display: block; width: 100%; text-align: center; background: #FF6B4A; color: #FFFFFF;
  font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 9px; border: none;
  box-sizing: border-box;
}
.es-card-buy:hover { background: #E0552F; color: #FFFFFF; }

/* ---------- Nom de l'organisateur ---------- */
.es-card-vendor {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  padding-top: 12px; margin-top: 2px; margin-bottom: 12px; border-top: 1px solid #EAE3F5;
}
.es-card-vendor-label { color: #8A7FA8; }
.es-card-vendor-name { color: #201433; font-weight: 700; text-decoration: none; }
.es-card-vendor-name:hover { color: #E0552F; }

/* ---------- Bouton de partage (à côté du billet) ---------- */
.es-card-actions { display: flex; align-items: stretch; gap: 8px; }
.es-card-actions .es-card-buy { flex: 1 1 auto; width: auto; }
.es-share { position: relative; flex: 0 0 auto; }
.es-share-toggle {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 9px; border: 1px solid #EAE3F5; background: #FFFFFF; color: #201433;
  cursor: pointer; list-style: none; box-sizing: border-box;
}
.es-share-toggle::-webkit-details-marker { display: none; }
.es-share-toggle:hover { background: #FFF6F0; border-color: #FF6B4A; color: #E0552F; }
.es-share[open] .es-share-toggle { background: #FF6B4A; border-color: #FF6B4A; color: #FFFFFF; }
.es-share-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 168px;
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 10px;
  box-shadow: 0 14px 32px rgba(32,20,51,0.16); padding: 6px; display: flex; flex-direction: column;
}
.es-share-link {
  padding: 9px 12px; border-radius: 7px; font-size: 13.5px; font-weight: 600;
  color: #201433; text-decoration: none;
}
.es-share-link:hover { background: #FFF6F0; color: #E0552F; }
.es-empty { text-align: center; padding: 40px 20px; color: #8A7FA8; font-size: 14.5px; }

/* ---------- Filtres Date / Ville / Salle de spectacle (résultats de recherche) ---------- */
.es-search-filters {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 14px; padding: 18px;
  margin-bottom: 26px;
}
.es-search-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.es-search-filter-field label { font-size: 11px; font-weight: 700; color: #8A7FA8; text-transform: uppercase; letter-spacing: .05em; }
.es-search-filter-field select,
.es-search-filter-field input[type="date"] {
  border: 1px solid #EAE3F5; border-radius: 9px; padding: 10px 12px; font-size: 14px;
  font-weight: 600; color: #201433; background: #FAF8F5;
}
.es-search-filter-field select:focus,
.es-search-filter-field input[type="date"]:focus { outline: none; border-color: #FF6B4A; }
.es-search-filter-submit {
  background: #FF6B4A; color: #FFFFFF; border: none; border-radius: 9px; font-size: 14px;
  font-weight: 700; padding: 10px 22px; height: 41px;
}
.es-search-filter-submit:hover { background: #E0552F; }
@media (max-width: 640px) {
  .es-search-filters { flex-direction: column; align-items: stretch; }
  .es-search-filter-field { min-width: 0; }
  .es-search-filter-submit { width: 100%; }
}

/* ---------- Artiste du jour ---------- */
.es-artist {
  padding: 48px 0; background: linear-gradient(135deg, #F5F0FF 0%, #FFF6F0 100%);
  border-top: 1px solid #EAE3F5; border-bottom: 1px solid #EAE3F5;
}
.es-artist-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.es-artist-media { flex: 0 0 260px; }
.es-artist-photo {
  width: 260px; height: 260px; object-fit: cover; border-radius: 18px;
  box-shadow: 0 18px 40px rgba(122,63,160,0.22); display: block;
}
.es-artist-photo--placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 64px;
  background: linear-gradient(135deg,#7A3FA0,#3A2560); color: #FFFFFF;
}
.es-artist-copy { flex: 1 1 320px; min-width: 280px; }
.es-artist-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: #7A3FA0; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
}
.es-artist-copy h2 { margin: 0 0 14px; font-size: 27px; color: #201433; }
.es-artist-excerpt { color: #4B3A66; font-size: 15px; line-height: 1.65; margin: 0 0 22px; }
@media (max-width: 640px) {
  .es-artist-media { flex: 0 0 auto; width: 100%; }
  .es-artist-photo, .es-artist-photo--placeholder { width: 100%; height: 220px; }
}

/* ---------- Payment trust strip ---------- */
.es-payments { padding: 44px 0; background: #FFF6F0; border-top: 1px solid #EAE3F5; border-bottom: 1px solid #EAE3F5; }
.es-payments-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.es-payments h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #201433; }
.es-payments p { font-size: 13.5px; color: #5B4D74; margin: 0; }
.es-payment-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.es-payment-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid #F3D9CC; padding: 8px 16px 8px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: #201433;
}
.es-payment-logo { height: 22px; width: auto; max-width: 60px; object-fit: contain; border-radius: 4px; display: block; }

/* ---------- Organizer CTA ---------- */
.es-cta { padding: 68px 0; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.es-cta-copy { max-width: 540px; }
.es-cta-copy h2 { font-size: 28px; font-weight: 700; margin: 0 0 12px; line-height: 1.22; color: #201433; }
.es-cta-copy p { font-size: 14.5px; color: #5B4D74; line-height: 1.6; margin: 0; }
.es-cta .es-btn-primary { padding: 16px 32px; border-radius: 11px; flex: none; }

/* ---------- Footer ---------- */
.es-footer { padding: 44px 0; border-top: 1px solid #EAE3F5; }
.es-footer-inner { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.es-footer-brand { max-width: 260px; }
.es-footer-brand .es-display { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: #201433; }
.es-footer-brand p { font-size: 13px; color: #8A7FA8; line-height: 1.6; margin: 0; }
.es-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.es-footer-col h4 {
  font-size: 11.5px; font-weight: 700; color: #8A7FA8; text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 14px;
}
.es-footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.es-footer-col a { font-size: 13.5px; color: #5B4D74; }
.es-footer-col a:hover { color: #201433; }

/* ---------- Intégration WooCommerce (boutique, fiche produit) ---------- */
/* Voir event_stats_woocommerce_wrapper_setup() dans functions.php : ce
   bloc habille les pages générées directement par WooCommerce (boutique,
   catégories produit, fiche produit) pour qu'elles suivent le même style
   que le reste du site — y compris sur téléphone. */
.woocommerce-breadcrumb { font-size: 13px; color: #8A7FA8; margin: 0 0 20px; }
.woocommerce-breadcrumb a { color: #8A7FA8; }
.woocommerce-breadcrumb a:hover { color: #E0552F; }

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  list-style: none; background: #FFF6F0; border: 1px solid #FFD9CC; color: #201433;
  padding: 14px 18px; border-radius: 10px; font-size: 14px; margin: 0 0 20px;
}
.woocommerce-notices-wrapper .woocommerce-error { background: #FDEDEE; border-color: #F3B9BE; }

.woocommerce-product-gallery__wrapper img {
  border-radius: 14px; width: 100%; max-height: 420px; object-fit: cover;
}
.product_title.entry-title {
  font-size: 30px; line-height: 1.2; margin: 0 0 10px; color: #201433;
  font-family: 'Unbounded', 'Work Sans', sans-serif; font-weight: 700;
}
.summary .price { font-size: 22px; font-weight: 700; color: #E0552F; margin: 0 0 14px; }
.summary .price del { opacity: .6; font-weight: 500; font-size: 16px; margin-right: 8px; }
.summary .price ins { text-decoration: none; }
.woocommerce-product-details__short-description { color: #5B4D74; font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.stock {
  display: inline-block; font-size: 13.5px; font-weight: 700; padding: 6px 14px;
  border-radius: 20px; margin-bottom: 18px;
}
.stock.in-stock { background: #EAF7EF; color: #1F7A45; }
.stock.out-of-stock { background: #FDEDEE; color: #C23B44; }

.summary .quantity { display: inline-block; margin-bottom: 14px; vertical-align: middle; }
.summary .quantity .qty {
  border: 1px solid #EAE3F5; border-radius: 9px; padding: 11px 14px; font-size: 15px;
  font-weight: 600; color: #201433; width: 90px;
}
.single_add_to_cart_button.button {
  background: #FF6B4A !important; color: #FFFFFF !important; border: none !important;
  border-radius: 10px !important; font-size: 14.5px !important; font-weight: 700 !important;
  padding: 13px 28px !important; width: 100%;
}
.single_add_to_cart_button.button:hover { background: #E0552F !important; }

.product_meta { margin-top: 18px; font-size: 13.5px; color: #8A7FA8; }
.product_meta a { color: #5B4D74; font-weight: 600; }
.product_meta a:hover { color: #E0552F; }

.woocommerce-tabs.wc-tabs-wrapper { margin-top: 44px; }
ul.tabs.wc-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0 0 20px; padding: 0;
  border-bottom: 1px solid #EAE3F5;
}
ul.tabs.wc-tabs li { margin: 0; }
ul.tabs.wc-tabs li a { display: inline-block; padding: 10px 16px; font-size: 14px; font-weight: 700; color: #8A7FA8; border-radius: 8px 8px 0 0; }
ul.tabs.wc-tabs li.active a, ul.tabs.wc-tabs li a:hover { color: #E0552F; background: #FFF6F0; }
.woocommerce-Tabs-panel { font-size: 15px; line-height: 1.7; color: #362253; }
.woocommerce-Tabs-panel h2 { font-size: 19px; margin: 0 0 14px; color: #201433; }

/* Grille de produits — page boutique, catégories, « Produits similaires » */
ul.products {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
ul.products li.product {
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 14px; overflow: hidden;
  padding: 0 !important; text-align: left !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(32,20,51,0.28);
  border-color: #FFD9CC;
}
ul.products li.product a img { border-radius: 0; margin: 0; aspect-ratio: 4/3; object-fit: cover; transition: transform .3s ease; }
ul.products li.product:hover a img { transform: scale(1.06); }
ul.products li.product .woocommerce-loop-product__title { font-size: 14.5px; font-weight: 700; color: #201433; padding: 12px 14px 4px; margin: 0; }
ul.products li.product .price { padding: 0 14px 14px; font-size: 13.5px; font-weight: 700; color: #E0552F; }
ul.products li.product .button {
  display: block; margin: 0 14px 14px; background: #FF6B4A; color: #FFFFFF; text-align: center;
  padding: 9px; border-radius: 9px; font-size: 13px; font-weight: 700;
}
ul.products li.product .button:hover { background: #E0552F; }

/* Blocs « Produits » WooCommerce (ventes croisées sur le panier, etc.) */
.wc-block-grid__product {
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 14px; padding: 12px !important;
  text-align: left !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wc-block-grid__product:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -20px rgba(32,20,51,0.28);
  border-color: #FFD9CC;
}
.wc-block-grid__product-image { overflow: hidden; border-radius: 10px; }
.wc-block-grid__product-image img { border-radius: 10px; transition: transform .3s ease; }
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.06); }
.wc-block-grid__product-title { font-size: 14px; font-weight: 700; color: #201433; margin-top: 10px; }
.wc-block-grid__product-price { color: #E0552F; font-weight: 700; font-size: 13.5px; margin-top: 4px; }
.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  background: #FF6B4A !important; color: #FFFFFF !important; border-radius: 9px !important;
  font-size: 13px !important; font-weight: 700 !important; text-align: center;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background: #E0552F !important; }

@media (max-width: 900px) {
  ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  ul.products { grid-template-columns: 1fr; }
  .product_title.entry-title { font-size: 24px; }
  .summary .quantity { display: block; margin-bottom: 12px; }
  .summary .quantity .qty { width: 100%; box-sizing: border-box; }
}

/* ---------- Generic page/single content (page.php, single.php, index.php) ---------- */
.es-content { padding: 56px 0 80px; }
.es-content .entry-title { font-size: 32px; font-weight: 700; margin: 0 0 24px; color: #201433; }
.es-content .entry-content { font-size: 16px; line-height: 1.75; color: #362253; }
.es-content .entry-content p { margin: 0 0 20px; }
.es-content .entry-content img { border-radius: 12px; margin: 20px 0; }
.es-post-list article { padding: 28px 0; border-bottom: 1px solid #EAE3F5; }
.es-post-list article:first-child { padding-top: 0; }
.es-post-list h2 { font-size: 22px; margin: 0 0 8px; }
.es-post-list h2 a:hover { color: #E0552F; }
.es-post-meta { font-size: 13px; color: #8A7FA8; margin-bottom: 10px; }

/* ---------- Mon compte (menu WooCommerce « My Account ») ----------
   Par défaut WooCommerce n'habille pas du tout ce menu (liste brute,
   sans bordure ni couleur) : on lui donne ici le même langage visuel
   que le reste du thème (cartes arrondies, ombre douce, dégradé
   orange de la marque), avec un repère visuel net pour la page en
   cours et pour le lien de déconnexion. */
.woocommerce-account .es-content .entry-title { position: relative; margin-bottom: 32px; }
.woocommerce-account .es-content .entry-title::before {
  content: 'Espace personnel'; display: block; font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #E0552F; margin-bottom: 10px;
}
.woocommerce-account .woocommerce {
  display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
  float: none; width: 250px; flex: none; box-sizing: border-box;
  position: relative; background: #FFFFFF; border: 1px solid #F1ECFA; border-radius: 20px;
  padding: 30px 14px 18px; box-shadow: 0 24px 50px -30px rgba(32,20,51,0.22);
}
.woocommerce-account .woocommerce-MyAccount-navigation::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  border-radius: 20px 20px 0 0; background: linear-gradient(90deg, #E0552F, #FF6B4A);
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation-link { position: relative; margin: 2px 0; }
.woocommerce-MyAccount-navigation-link a {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: #5B4D74; text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.woocommerce-MyAccount-navigation-link a::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #EAE3F5; flex: none;
  transition: background .18s ease, transform .18s ease;
}
.woocommerce-MyAccount-navigation-link a:hover { background: #FFF6F0; color: #E0552F; transform: translateX(3px); }
.woocommerce-MyAccount-navigation-link a:hover::before { background: #FF6B4A; transform: scale(1.3); }
.woocommerce-MyAccount-navigation-link.is-active a { background: linear-gradient(90deg, #FFF6F0, #FFFFFF); color: #E0552F; }
.woocommerce-MyAccount-navigation-link.is-active a::before { background: #E0552F; transform: scale(1.3); }
.woocommerce-MyAccount-navigation-link.is-active::after {
  content: ''; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, #E0552F, #FF6B4A);
}
.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F1ECFA; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: #8A7FA8; }
.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #FDEDEE; color: #E0552F; }
.woocommerce-account .woocommerce-MyAccount-content {
  float: none; flex: 1 1 380px; min-width: 0; box-sizing: border-box;
  background: #FFFFFF; border: 1px solid #F1ECFA; border-radius: 20px; padding: 32px;
  box-shadow: 0 24px 50px -30px rgba(32,20,51,0.22);
}
@media (max-width: 780px) {
  .woocommerce-account .woocommerce { flex-direction: column; }
  .woocommerce-account .woocommerce-MyAccount-navigation { width: 100%; padding: 22px 12px 14px; }
  .woocommerce-account .woocommerce-MyAccount-content { padding: 22px; width: 100%; }
}

/* ---------- Tableau de bord « Mon compte » : message de bienvenue et
   bandeau « Devenir organisateur » ---------- */
.woocommerce-MyAccount-content > p:first-child {
  font-size: 17px; color: #201433; margin: 0 0 18px;
}
.woocommerce-MyAccount-content > p:first-child strong {
  color: #E0552F; background: #FFF6F0; padding: 3px 12px; border-radius: 30px; font-weight: 700;
}
.woocommerce-MyAccount-content > p:first-child a { color: #8A7FA8; text-decoration: underline; }
.woocommerce-MyAccount-content > p:first-child a:hover { color: #E0552F; }
.woocommerce-MyAccount-content > p:nth-child(2) {
  color: #5B4D74; font-size: 15px; line-height: 1.75; max-width: 62ch; margin: 0;
}

.dokan-account-migration-lists { list-style: none; margin: 30px 0 0; padding: 0; }
.dokan-account-migration-lists > li {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(135deg, #FFF6F0, #F5F0FF);
  border: 1px solid #F1ECFA; border-radius: 18px; padding: 26px 28px 26px 32px;
  position: relative; overflow: hidden;
}
.dokan-account-migration-lists > li::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #E0552F, #FF6B4A);
}
.dokan-account-migration-lists .left-content,
.dokan-account-migration-lists .right-content { float: none; width: auto; }
.dokan-account-migration-lists .left-content { flex: 1 1 280px; }
.dokan-account-migration-lists .right-content { flex: none; }
.dokan-account-migration-lists .left-content p:first-child {
  margin: 0 0 6px; display: flex; align-items: center; gap: 10px;
}
.dokan-account-migration-lists .left-content p:first-child::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: #E0552F; flex: none;
}
.dokan-account-migration-lists .left-content p:first-child strong {
  font-family: 'Unbounded', 'Work Sans', sans-serif; font-size: 18px; color: #201433;
}
.dokan-account-migration-lists .left-content p:last-child {
  color: #5B4D74; margin: 0 0 0 19px; font-size: 14.5px; line-height: 1.6;
}
.dokan-account-migration-lists .btn.btn-primary {
  display: inline-block; background: #FF6B4A; color: #FFFFFF; font-weight: 700; font-size: 14.5px;
  padding: 12px 26px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.dokan-account-migration-lists .btn.btn-primary:hover { background: #E0552F; color: #FFFFFF; transform: translateY(-2px); }
.dokan-account-migration-lists .dokan-clearfix { display: none; }
@media (max-width: 480px) {
  .dokan-account-migration-lists > li { padding: 22px 20px 22px 24px; }
  .dokan-account-migration-lists .right-content { width: 100%; }
  .dokan-account-migration-lists .btn.btn-primary { display: block; text-align: center; }
}

/* ---------- Formulaire « Devenir organisateur » (compte client devient
   vendeur) — templates/account/update-customer-to-vendor.php côté Dokan.
   Réutilisable par d'autres formulaires Dokan basés sur les mêmes classes
   (form-row/form-group, input-text, dokan-btn...). ---------- */
.woocommerce-MyAccount-content h2 {
  font-family: 'Unbounded', 'Work Sans', sans-serif; font-size: 22px; color: #201433; margin: 4px 0 22px;
}
.dokan-become-seller {
  background: #FDFBFF; border: 1px solid #F1ECFA; border-radius: 16px; padding: 28px; box-sizing: border-box;
}
.split-row { display: flex; gap: 20px; flex-wrap: wrap; }
.split-row .form-row { flex: 1 1 220px; }
.form-row.form-group { margin: 0 0 22px; }
.form-row.form-group label {
  display: block; font-size: 14.5px; font-weight: 600; color: #362253; margin-bottom: 8px;
}
.form-row.form-group label .required { color: #E0552F; margin-left: 3px; }
.form-row .input-text.form-control,
.form-row input.input-text {
  width: 100%; box-sizing: border-box; border: 1.5px solid #EAE3F5; border-radius: 10px;
  padding: 12px 14px; font-size: 15px; color: #201433; background: #FFFFFF;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form-row .input-text.form-control:focus,
.form-row input.input-text:focus {
  outline: none; border-color: #FF6B4A; box-shadow: 0 0 0 3px rgba(255,107,74,0.15);
}
.form-row small { display: block; margin-top: 7px; font-size: 12.5px; color: #8A7FA8; }
.form-row .tc_check_box { margin-right: 8px; }
.pull-right { float: right; }
.pull-left { float: left; }
input[name="dokan_migration"],
.dokan-btn.dokan-btn-default {
  display: inline-block; background: #FF6B4A; color: #FFFFFF; font-weight: 700; font-size: 15px;
  padding: 13px 30px; border: none; border-radius: 10px; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
input[name="dokan_migration"]:hover,
.dokan-btn.dokan-btn-default:hover { background: #E0552F; transform: translateY(-2px); color: #FFFFFF; }
@media (max-width: 560px) {
  .split-row { flex-direction: column; gap: 0; }
  .dokan-become-seller { padding: 20px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .es-wrap { padding: 0 24px; }
  .es-nav { position: fixed; top: 0; right: -320px; height: 100vh; width: 280px; background: #FFFFFF;
    flex-direction: column; align-items: flex-start; gap: 4px; padding: 90px 28px 28px; box-shadow: -12px 0 40px rgba(32,20,51,0.12);
    transition: right .25s ease; z-index: 60; }
  .es-nav.is-open { right: 0; }
  .es-nav a { padding: 12px 0; width: 100%; border-bottom: 1px solid #F1ECFA; }
  .es-menu-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
  .es-header-actions .es-btn-ghost { display: none; }
  .es-nav-account { display: flex; flex-direction: column; width: 100%; margin-top: 12px; padding-top: 8px; border-top: 1px solid #F1ECFA; }
  .es-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .es-hero h1 { font-size: 36px; }
}
@media (max-width: 640px) {
  .es-wrap { padding: 0 18px; }
  .es-header { padding: 16px 0; }
  .es-hero { padding: 48px 0 40px; }
  .es-hero h1 { font-size: 28px; }
  .es-hero p { font-size: 15px; }
  .es-search { flex-direction: column; padding: 14px; border-radius: 18px; }
  .es-search-divider { display: none; }
  .es-search-field { padding: 10px 4px; }
  .es-search-submit { width: 100%; margin: 10px 0 0; height: 46px; justify-content: center; }
  .es-grid { grid-template-columns: 1fr; }
  .es-payments-inner { flex-direction: column; align-items: flex-start; }
  .es-cta { flex-direction: column; align-items: flex-start; padding: 48px 0; }
  .es-footer-inner { flex-direction: column; gap: 32px; }
  .es-footer-cols { gap: 32px; }
}

/* =========================================================================
   Event-Stats — Dons : archive /dons/ + page individuelle de collecte.
   Réutilise la palette et les proportions déjà établies pour les
   événements (.es-card, .es-btn-primary, .es-wrap, Unbounded) pour que
   la fonctionnalité "dons" ait l'air native au site, pas ajoutée après
   coup.
   ========================================================================= */

/* ---------- Bandeau d'introduction de l'archive ---------- */
.es-dons-hero {
  padding: 56px 0 40px; text-align: center; border-bottom: 1px solid #EAE3F5;
  background: linear-gradient(180deg, #FFF6F0 0%, #FFFFFF 100%);
}
.es-dons-eyebrow {
  display: inline-flex; align-items: center; gap: 6px; background: #EAF6EF; border: 1px solid #CFE8DA;
  padding: 7px 16px; border-radius: 30px; font-size: 12px; font-weight: 700; color: #1F7A54;
  letter-spacing: .05em; margin-bottom: 18px; text-transform: uppercase;
}
.es-dons-hero h1 { max-width: 640px; margin: 0 auto 14px; font-size: 34px; line-height: 1.18; color: #201433; }
.es-dons-hero p { max-width: 560px; margin: 0 auto 26px; font-size: 15.5px; line-height: 1.6; color: #5B4D74; }

.es-dons-wrap { padding: 40px 0 76px; }

/* ---------- Filtre par catégorie ---------- */
.es-dons-filters { margin-bottom: 26px; }
.es-dons-filters select {
  border: 1.5px solid #EAE3F5; border-radius: 10px; padding: 10px 14px; font-size: 14px;
  font-weight: 600; color: #201433; background: #FFFFFF;
}
.es-dons-empty { color: #8A7FA8; font-size: 15px; padding: 20px 0; }

/* ---------- Grille des collectes ---------- */
.es-dons-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.es-campaign-card {
  background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.es-campaign-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px -20px rgba(32,20,51,0.28); border-color: #CFE8DA; }
.es-campaign-media {
  display: block; height: 150px; position: relative; background-size: cover; background-position: center;
  background-color: #EAF6EF;
}
.es-campaign-tag {
  position: absolute; top: 14px; left: 14px; background: rgba(27,77,62,0.82); color: #FFFFFF;
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 20px; text-transform: uppercase;
}
.es-campaign-body { padding: 19px; display: flex; flex-direction: column; flex: 1; }
.es-campaign-title { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; color: #201433; }
.es-campaign-title a { color: inherit; }
.es-campaign-title a:hover { color: #1F7A54; }
.es-campaign-excerpt { font-size: 13.5px; color: #5B4D74; line-height: 1.55; margin: 0 0 16px; }

/* ---------- Barre de progression ---------- */
.es-campaign-progress-bar {
  height: 8px; border-radius: 6px; background: #EAE3F5; overflow: hidden; margin-bottom: 10px;
}
.es-campaign-progress-bar span {
  display: block; height: 100%; background: linear-gradient(90deg, #1F7A54, #5FBF9A); border-radius: 6px;
}
.es-campaign-progress-meta { font-size: 12.5px; color: #8A7FA8; margin-bottom: 14px; }
.es-campaign-progress-meta strong { color: #1F7A54; font-weight: 700; }
.es-campaign-foot {
  display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #8A7FA8;
  margin-bottom: 16px;
}
.es-campaign-cta {
  display: block; width: 100%; text-align: center; background: #FF6B4A; color: #FFFFFF;
  font-size: 13.5px; font-weight: 700; padding: 10px 16px; border-radius: 9px; border: none;
  box-sizing: border-box; margin-top: auto;
}
.es-campaign-cta:hover { background: #E0552F; color: #FFFFFF; }

/* ---------- Page individuelle d'une collecte ---------- */
.es-campaign-single { padding: 40px 0 76px; }
.es-campaign-back a { color: #1F7A54; font-weight: 600; text-decoration: none; font-size: 14px; }
.es-campaign-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 36px; align-items: start; margin-top: 8px; }
.es-campaign-hero-media {
  position: relative; height: 280px; border-radius: 16px; background-size: cover; background-position: center;
  background-color: #EAF6EF; margin-bottom: 22px;
}
.es-campaign-single h1.es-display { font-size: 28px; margin: 0 0 10px; color: #201433; }
.es-campaign-organizer { font-size: 14px; color: #5B4D74; margin: 0 0 24px; }
.es-campaign-organizer a { color: #1F7A54; font-weight: 700; text-decoration: none; }
.es-campaign-description { font-size: 15px; line-height: 1.7; color: #362253; margin-bottom: 36px; }
.es-campaign-donors-title { font-size: 19px; margin: 0 0 16px; color: #201433; }
.es-campaign-empty { color: #8A7FA8; font-size: 14px; }

.es-donor-list { list-style: none; margin: 0; padding: 0; }
.es-donor-row { background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.es-donor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.es-donor-name { font-weight: 700; color: #201433; font-size: 14px; }
.es-donor-amount { font-weight: 700; color: #1F7A54; font-size: 14.5px; white-space: nowrap; }
.es-donor-message { margin: 8px 0 0; font-size: 13.5px; color: #5B4D74; font-style: italic; line-height: 1.5; }

/* ---------- Bloc latéral : progression + formulaire de don ---------- */
.es-campaign-progress-card {
  position: sticky; top: 24px; background: #FFFFFF; border: 1px solid #EAE3F5; border-radius: 16px;
  padding: 24px; box-shadow: 0 20px 44px -28px rgba(32,20,51,0.22);
}
.es-campaign-progress-numbers { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.es-campaign-progress-numbers strong { font-size: 22px; color: #1F7A54; font-weight: 700; }
.es-campaign-progress-numbers span { font-size: 13px; color: #8A7FA8; }
.es-campaign-progress-stats {
  display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #8A7FA8;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #EAE3F5;
}
.es-campaign-closed { font-size: 14px; color: #8A7FA8; background: #F7F5FB; border-radius: 10px; padding: 14px; }

/* ---------- Formulaire de don ---------- */
.es-donation-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.es-donation-amount-choice {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1.5px solid #EAE3F5; border-radius: 9px; padding: 9px 10px; font-size: 13px; font-weight: 600;
  color: #362253; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.es-donation-amount-choice:has(input:checked) { border-color: #1F7A54; background: #EAF6EF; color: #1F7A54; }
.es-donation-amount-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.es-donation-amount-custom { flex: 1 1 100%; }
.es-donation-custom-input,
.es-donation-message {
  width: 100%; box-sizing: border-box; border: 1.5px solid #EAE3F5; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; color: #201433; background: #FFFFFF; margin-bottom: 12px;
  font-family: inherit;
}
.es-donation-custom-input:focus,
.es-donation-message:focus { outline: none; border-color: #1F7A54; box-shadow: 0 0 0 3px rgba(31,122,84,0.14); }
.es-donation-message { resize: vertical; min-height: 70px; }
.es-donation-anonymous { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #5B4D74; margin-bottom: 16px; }
.es-donation-submit { width: 100%; text-align: center; border: none; cursor: pointer; box-sizing: border-box; }

@media (max-width: 900px) {
  .es-dons-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .es-campaign-layout { grid-template-columns: 1fr; }
  .es-campaign-progress-card { position: static; }
}
@media (max-width: 560px) {
  .es-dons-grid { grid-template-columns: 1fr; }
  .es-dons-hero h1 { font-size: 26px; }
  .es-campaign-hero-media { height: 200px; }
}

/* ---------- Bouton WhatsApp flottant (tout le site) ---------- */
.es-whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 45;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,0.55), 0 4px 10px rgba(32,20,51,0.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.es-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.05); color: #FFFFFF;
  box-shadow: 0 18px 36px -8px rgba(37,211,102,0.65), 0 6px 14px rgba(32,20,51,0.18);
}
@media (max-width: 640px) {
  .es-whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}