/* ==========================================================================
   Odoo Pilot button classes for Elementor (site-wide).

   Usage: Elementor button widget > Advanced > CSS Classes
     op-btn-fill      solid purple button (same as the page's primary button)
     op-btn-outline   transparent button with a border (same as the secondary button)
     op-btn-sm        optional, add next to either class for the compact header size

   Leave the widget's own Style tab (colour, typography, border, padding) untouched.
   Everything below is !important so Elementor / Hello theme styles cannot override it.
   ========================================================================== */

/* ---------- shared base ---------- */
a.op-btn-fill,button.op-btn-fill,.elementor-button.op-btn-fill,.op-btn-fill .elementor-button,
a.op-btn-outline,button.op-btn-outline,.elementor-button.op-btn-outline,.op-btn-outline .elementor-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:44px !important;
  padding:12px 22px !important;
  border-radius:10px !important;
  border-width:1px !important;
  border-style:solid !important;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:normal !important;
  text-transform:none !important;
  text-decoration:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease !important;
}
.op-btn-fill .elementor-button-content-wrapper,.op-btn-outline .elementor-button-content-wrapper,
.elementor-button.op-btn-fill .elementor-button-content-wrapper,.elementor-button.op-btn-outline .elementor-button-content-wrapper{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;flex-direction:row !important;
}
.op-btn-fill .elementor-button-text,.op-btn-outline .elementor-button-text,
.elementor-button.op-btn-fill .elementor-button-text,.elementor-button.op-btn-outline .elementor-button-text{
  color:inherit !important;font:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;
}
.op-btn-fill .elementor-button-icon,.op-btn-outline .elementor-button-icon,
.elementor-button.op-btn-fill .elementor-button-icon,.elementor-button.op-btn-outline .elementor-button-icon{
  margin:0 !important;color:inherit !important;display:inline-flex !important;align-items:center !important;
}
.op-btn-fill .elementor-button-icon svg,.op-btn-outline .elementor-button-icon svg,
.op-btn-fill .elementor-button-icon i,.op-btn-outline .elementor-button-icon i{fill:currentColor !important;color:inherit !important}

/* ---------- filled ---------- */
a.op-btn-fill,button.op-btn-fill,.elementor-button.op-btn-fill,.op-btn-fill .elementor-button{
  background:#724482 !important;
  background-color:#724482 !important;
  border-color:#724482 !important;
  color:#fff !important;
  fill:#fff !important;
}

/* ---------- outline (no background) ---------- */
a.op-btn-outline,button.op-btn-outline,.elementor-button.op-btn-outline,.op-btn-outline .elementor-button{
  background:transparent !important;
  background-color:transparent !important;
  border-color:#CACACF !important;
  color:#1A1923 !important;
  fill:#1A1923 !important;
}

/* ---------- compact size (optional) ---------- */
.op-btn-sm a.elementor-button,.op-btn-sm.elementor-button,a.op-btn-sm,button.op-btn-sm,
.op-btn-fill.op-btn-sm .elementor-button,.op-btn-outline.op-btn-sm .elementor-button{
  padding:10px 16px !important;font-size:13.5px !important;border-radius:9px !important;
}

/* ---------- focus ---------- */
a.op-btn-fill:focus-visible,button.op-btn-fill:focus-visible,.op-btn-fill .elementor-button:focus-visible,
a.op-btn-outline:focus-visible,button.op-btn-outline:focus-visible,.op-btn-outline .elementor-button:focus-visible{
  outline:3px solid #724482 !important;outline-offset:2px !important;
}

/* ---------- hover: colour change, no radius change ---------- */
@media (hover:hover) and (pointer:fine){
  a.op-btn-fill:hover,button.op-btn-fill:hover,.elementor-button.op-btn-fill:hover,.op-btn-fill .elementor-button:hover{
    background:#58335F !important;background-color:#58335F !important;border-color:#58335F !important;color:#fff !important;
    box-shadow:0 12px 26px rgba(88,51,95,.38) !important;
  }
  a.op-btn-outline:hover,button.op-btn-outline:hover,.elementor-button.op-btn-outline:hover,.op-btn-outline .elementor-button:hover{
    background:#F1E9F3 !important;background-color:#F1E9F3 !important;border-color:#724482 !important;color:#58335F !important;
    box-shadow:0 10px 22px rgba(114,68,130,.16) !important;
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  a.op-btn-fill:hover,button.op-btn-fill:hover,.op-btn-fill .elementor-button:hover,
  a.op-btn-outline:hover,button.op-btn-outline:hover,.op-btn-outline .elementor-button:hover{transform:translateY(-3px) !important}
  a.op-btn-fill:active,button.op-btn-fill:active,.op-btn-fill .elementor-button:active,
  a.op-btn-outline:active,button.op-btn-outline:active,.op-btn-outline .elementor-button:active{transform:translateY(0) scale(.98) !important}
}
@media (prefers-reduced-motion:reduce){
  a.op-btn-fill,button.op-btn-fill,.op-btn-fill .elementor-button,
  a.op-btn-outline,button.op-btn-outline,.op-btn-outline .elementor-button{transition:none !important}
}