/**
 * Drawably - Hand-drawn UI controls with animated doodle strokes
 * Fully customized for MilaMeow candy-bright palette, RTL Hebrew layout, and Varela Round typography.
 */

:root {
  --drawably-stroke: var(--ink, #2B2140);
  --drawably-fill: var(--sunshine, #FFC61A);
  --drawably-paper: var(--card, #FFFFFF);
  --drawably-width: 2.8;
  --drawably-error: var(--wrong-text, #C0122B);
  --drawably-success: var(--correct-dark, #17B85B);
  --drawably-ease: cubic-bezier(0.2, 0, 0, 1);
}

.drawably-host {
  position: relative;
  isolation: isolate;
  font-family: inherit;
}

/* Guard the SVG from any parent descendant CSS rules */
svg.drawably-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

svg.drawably-svg path {
  fill: none;
  stroke: var(--drawably-ink, var(--drawably-stroke, #2B2140));
  stroke-width: var(--drawably-width, 2.8);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 3-frame boil cycling through seeded randomness */
@property --drawably-frame {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.drawably-svg {
  --drawably-frame: 0;
  animation: drawably-boil 1200ms step-end infinite;
}

@keyframes drawably-boil {
  0% { --drawably-frame: 0; }
  33.33% { --drawably-frame: 1; }
  66.67% { --drawably-frame: 2; }
}

.drawably-boil {
  --drawably-i: 0;
  opacity: clamp(0, 1 - (var(--drawably-frame) - var(--drawably-i)) * (var(--drawably-frame) - var(--drawably-i)), 1);
}

.drawably-boil[data-i="1"] {
  --drawably-i: 1;
}

.drawably-boil[data-i="2"] {
  --drawably-i: 2;
}

/* ---------- Buttons ---------- */
.drawably-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  font: inherit;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  position: relative;
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
  filter: drop-shadow(3px 4px 0 rgba(43, 33, 64, 0.22));
}

.drawably-button > *,
.drawably-label {
  position: relative !important;
  z-index: 2 !important;
}

.drawably-button:active {
  transform: translateY(1px) scale(0.98);
  filter: drop-shadow(1px 2px 0 rgba(43, 33, 64, 0.22));
}

@media (hover: hover) {
  .drawably-button:hover:not(:disabled, [data-state="loading"]) {
    transform: translateY(-2px);
    filter: drop-shadow(4px 6px 0 rgba(43, 33, 64, 0.22));
  }
}

.drawably-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

/* Solid Variant (e.g. sunshine CTAs) */
.drawably-button--solid {
  color: var(--navy, #3A2E6B);
}

.drawably-button--solid .drawably-blob {
  fill: var(--drawably-fill, #FFC61A) !important;
  stroke: var(--drawably-fill, #FFC61A) !important;
  stroke-width: 3.5;
  transition: fill 120ms ease, stroke 120ms ease;
}

.drawably-button--solid .drawably-outline {
  fill: none !important;
  stroke: var(--drawably-stroke, #2B2140) !important;
  stroke-width: var(--drawably-width, 2.8) !important;
}

.drawably-button--solid:hover:not(:disabled, [data-state="loading"]) .drawably-blob {
  fill: var(--star-gold, #FFE14D) !important;
  stroke: var(--star-gold, #FFE14D) !important;
}

/* Outline Variant (e.g. reel store links, cards) */
.drawably-button--outline {
  color: var(--drawably-ink, var(--drawably-stroke, #2B2140));
}

.drawably-button--outline .drawably-outline {
  fill: var(--drawably-paper, #FFFFFF);
  stroke: var(--drawably-stroke, #2B2140);
  stroke-width: var(--drawably-width, 2.8);
  transition: fill 120ms ease;
}

.drawably-button--outline:hover:not(:disabled) .drawably-outline {
  fill: var(--star-gold, #FFE14D);
}

/* Button State Machine */
.drawably-button[data-state="error"] {
  --drawably-ink: var(--drawably-error, #C0122B);
  --drawably-fill: #FFEAE8;
}

.drawably-button[data-state="success"] {
  --drawably-ink: var(--drawably-success, #17B85B);
  --drawably-fill: #E6FBF0;
}

.drawably-button[data-state="loading"] {
  cursor: progress;
  opacity: 0.75;
}

.drawably-button[data-state="loading"] .drawably-svg {
  animation-duration: 450ms;
}

/* Focus Ring */
.drawably-svg .drawably-focus {
  display: none !important;
}

/* ---------- Cards ---------- */
.drawably-card {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(4px 5px 0 rgba(43, 33, 64, 0.16)) !important;
}

.drawably-card > * {
  position: relative;
  z-index: 1;
}

.drawably-card > svg.drawably-svg > .drawably-outline {
  fill: var(--drawably-paper, #FFFFFF) !important;
  stroke: var(--drawably-stroke, #2B2140) !important;
  stroke-width: var(--drawably-width, 2.8) !important;
}

/* ---------- Form Fields ---------- */
.drawably-inputbox {
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
}

.drawably-inputbox .drawably-outline {
  fill: var(--drawably-paper, var(--paper, #E8F6FF));
  stroke: var(--drawably-stroke, #2B2140);
  stroke-width: 2.5;
}

.drawably-inputbox input {
  position: relative;
  z-index: 1;
  border: 0 !important;
  background: transparent !important;
  outline: none;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--ink);
}

/* ---------- Badges / Chips ---------- */
.drawably-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  font: inherit;
  color: var(--drawably-ink, var(--drawably-stroke, #2B2140));
}

.drawably-badge > * {
  position: relative;
  z-index: 1;
}

.drawably-badge .drawably-outline {
  fill: var(--drawably-paper, transparent);
  stroke: var(--drawably-stroke, #2B2140);
  stroke-width: 2;
}

/* ---------- Text Annotations & Highlights ---------- */
.drawably-svg .drawably-wash {
  stroke: var(--drawably-ink, var(--drawably-fill, #FFC61A));
  stroke-width: 7;
  stroke-opacity: 0.35;
  mix-blend-mode: multiply;
}

:is(.drawably-underline, .drawably-circle) .drawably-svg path {
  stroke-width: var(--drawably-width, 2.2);
}

/* ---------- Motion & Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .drawably-svg {
    animation: none !important;
  }
  .drawably-button {
    transition: none !important;
    transform: none !important;
  }
}