/* =========================================================================
   INFUSEUR — RESET COMPLET + DA TONBONBON (override final)
   Colle à la fin du CSS, purge cache.
   ========================================================================= */

:root{
  --tea-green: #8AC6D0;
  --tea-green-700: #5aa79a;
  --tea-blush: #ECBABE;
  --cream: #FBFAF7;
  --muted: #6b7b8f;
  --card-radius: 12px;
  --pad: 18px;
  --max-w: 980px;
}

/* safety box-sizing */
.infuseur-widget, .infuseur-widget *{ box-sizing: border-box; }

/* Strong specificity to beat theme defaults */
body .infuseur-widget{
  background: linear-gradient(180deg, var(--cream) 0%, #ffffff 100%) !important;
  border-radius: var(--card-radius) !important;
  padding: var(--pad) !important;
  max-width: var(--max-w) !important;
  margin: 20px auto !important;
  box-shadow: 0 10px 30px rgba(21,33,23,0.06) !important;
  border: 1px solid rgba(90,167,154,0.04) !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: #213047 !important;
  display:flex !important;
  gap:20px !important;
  align-items:flex-start !important;
  position:relative !important;
  overflow:visible !important;
}

/* Columns */
body .infuseur-widget .infuseur-left{ flex:1 1 60% !important; min-width:260px !important; }
body .infuseur-widget .infuseur-right{ flex:0 0 40% !important; width:420px !important; max-width:44% !important; min-width:260px !important; }

/* Titles */
body .infuseur-widget .infuseur-title,
body .infuseur-widget h2,
body .infuseur-widget h3{
  color: #16311f !important;
  font-weight:800 !important;
  margin:0 0 12px 0 !important;
  letter-spacing:0.1px !important;
}

/* Fields */
body .infuseur-widget .field{ margin-bottom:14px !important; display:block !important; }
body .infuseur-widget .field span{ display:block !important; font-size:13px !important; color:var(--muted) !important; margin-bottom:6px !important; font-weight:600 !important; }

/* Inputs / selects / textarea */
body .infuseur-widget select,
body .infuseur-widget input[type="text"],
body .infuseur-widget input[type="number"],
body .infuseur-widget textarea,
body .infuseur-widget input[type="range"]{
  background:#ffffff !important;
  border:1px solid rgba(90,167,154,0.09) !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  color:#213047 !important;
  font-size:14px !important;
  outline:none !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  box-shadow:none !important;
}

/* Remove number spinners */
body .infuseur-widget input[type=number]::-webkit-outer-spin-button,
body .infuseur-widget input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
body .infuseur-widget input[type=number]{ -moz-appearance:textfield; }

/* Select arrow: custom and visible */
body .infuseur-widget select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.15) 50%),
    linear-gradient(135deg, rgba(0,0,0,0.15) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 10px) calc(1em + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px !important;
}

/* Range (slider) — track + thumb for webkit + firefox */
body .infuseur-widget input[type="range"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  height:8px !important;
  background: linear-gradient(90deg,#eef4fb,#f6fbff) !important;
  border-radius:999px !important;
  padding:0 !important;
}

/* Webkit thumb */
body .infuseur-widget input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background: linear-gradient(180deg, var(--tea-green), var(--tea-green-700)) !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 6px 18px rgba(90,167,154,0.18) !important;
  margin-top: -5px !important;
}

/* Webkit track */
body .infuseur-widget input[type="range"]::-webkit-slider-runnable-track{
  height:8px !important;
  border-radius:999px !important;
  background: linear-gradient(90deg,#eef4fb,#f6fbff) !important;
}

/* Firefox */
body .infuseur-widget input[type="range"]::-moz-range-thumb{
  width:18px !important; height:18px !important; border-radius:50% !important;
  background: linear-gradient(180deg, var(--tea-green), var(--tea-green-700)) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 6px 18px rgba(90,167,154,0.18) !important;
}
body .infuseur-widget input[type="range"]::-moz-range-track{
  background: linear-gradient(90deg,#eef4fb,#f6fbff) !important;
  height:8px !important; border-radius:999px !important;
}

/* Buttons */
body .infuseur-widget .btn,
body .infuseur-widget button,
body .infuseur-widget .button{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 16px !important;
  border-radius:12px !important;
  border:0 !important;
  cursor:pointer !important;
  font-weight:800 !important;
  color:#fff !important;
  background: linear-gradient(90deg, var(--tea-green), var(--tea-green-700)) !important;
  box-shadow: 0 8px 26px rgba(90,167,154,0.12) !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}

/* Secondary / disabled */
body .infuseur-widget .btn.secondary,
body .infuseur-widget .btn[aria-pressed="false"],
body .infuseur-widget .btn[disabled]{
  background: rgba(255,255,255,0.92) !important;
  color: #213047 !important;
  border:1px solid rgba(15,18,14,0.04) !important;
  box-shadow: 0 4px 12px rgba(15,18,14,0.03) !important;
  opacity: 0.95 !important;
}

/* Buttons hover/active */
body .infuseur-widget .btn:hover{ transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(21,33,23,0.06) !important; }
body .infuseur-widget .btn:active{ transform: translateY(0) !important; }

/* Result card */
body .infuseur-widget .result{
  border-radius:12px !important;
  padding:14px !important;
  background: linear-gradient(180deg,#ffffff,#fbfcff) !important;
  border:1px solid #eef3fb !important;
  min-height:120px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
  color:#48586f !important;
}

/* Timer / ring correction (fix black SVG) */
body .infuseur-widget .ring,
body .infuseur-widget .ring svg,
body .infuseur-widget .ring circle{
  width:90px !important;
  height:90px !important;
  display:block !important;
  box-sizing:border-box !important;
}

/* IMPORTANT: remove any fill defaults and force stroke colors */
body .infuseur-widget .ring circle,
body .infuseur-widget .ring svg circle{
  fill: none !important;
  stroke: #e8eefb !important; /* base track */
  stroke-width: 8 !important;
  stroke-linecap: round !important;
}

/* progress stroke */
body .infuseur-widget .ring circle.progress,
body .infuseur-widget .ring svg circle.progress{
  stroke: var(--tea-green-700) !important;
  fill: none !important;
}

/* ensure SVG not absolutely huge because of inherited CSS */
body .infuseur-widget .ring svg{ max-width:100% !important; height:auto !important; display:block !important; }

/* small meta text */
body .infuseur-widget .range-value,
body .infuseur-widget .hint,
body .infuseur-widget .sub{
  color: var(--muted) !important;
  font-size:13px !important;
}

/* focus accessibility */
body .infuseur-widget :focus{
  outline: 3px solid rgba(138,198,208,0.18) !important;
  outline-offset: 3px !important;
  border-radius:8px !important;
}

/* hide accidental decorative overlays from theme inside the widget */
body .infuseur-widget .decorative,
body .infuseur-widget::after,
body .infuseur-widget .accent,
body .infuseur-widget .floating{
  display:none !important;
  pointer-events:none !important;
}

/* small per-item styles */
body .infuseur-widget .meta{ display:flex !important; gap:12px !important; align-items:center !important; font-weight:700 !important; color:#213047 !important; }

/* responsive */
@media (max-width:900px){
  body .infuseur-widget{ flex-direction:column !important; padding:14px !important; gap:12px !important; max-width:92% !important; }
  body .infuseur-widget .infuseur-right{ width:100% !important; max-width:100% !important; }
  body .infuseur-widget .ring{ width:72px !important; height:72px !important; }
  body .infuseur-widget .infuseur-title{ font-size:18px !important; }
}

/* very small */
@media (max-width:480px){
  body .infuseur-widget{ padding:12px !important; gap:10px !important; }
  body .infuseur-widget .infuseur-left, body .infuseur-widget .infuseur-right{ width:100% !important; min-width:0 !important; }
  body .infuseur-widget .result{ min-height:100px !important; padding:12px !important; }
}

/* final: force repaint hacks for stubborn browsers (optional) */
body .infuseur-widget *{
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body .infuseur-widget .btn {
  margin-right: 10px !important;
  margin-bottom: 10px !important;
}

body .infuseur-widget .btn:last-child {
  margin-right: 0 !important;
}