/* ============================================================
   MEGA-SWEETS — Component styles. Requires colors_and_type.css.
   ============================================================ */

/* ---------- BUTTONS ---------- */
.ms-btn {
  font-family: var(--font-rounded);
  font-weight: 700;
  font-size: var(--text-base);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 8px;
}
.ms-btn:active { transform: scale(.96); }

.ms-btn--primary {            /* gradient candy button */
  color: #fff;
  background: var(--grad-purple-pink);
  box-shadow: 0 8px 18px rgba(216,30,114,.28);
}
.ms-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 10px 22px rgba(216,30,114,.34); }

.ms-btn--teal {
  color: #fff;
  background: var(--ms-teal);
}
.ms-btn--teal:hover { filter: brightness(1.07); }

.ms-btn--outline {            /* gradient-border ghost button */
  color: var(--ms-purple);
  background: var(--ms-white);
  position: relative;
  box-shadow: none;
  border: 2px solid transparent;
  background-image: linear-gradient(#fff,#fff), var(--grad-purple-pink);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.ms-btn--outline:hover { color: var(--ms-magenta); }

.ms-btn--ghost {
  color: var(--ms-blue);
  background: transparent;
  box-shadow: none;
}
.ms-btn--ghost:hover { background: var(--ms-sky-50); }

/* ---------- GRADIENT-BORDER CARD ---------- */
.ms-card {
  position: relative;
  background: var(--ms-white);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 2px solid transparent;
  background-image: linear-gradient(var(--ms-white),var(--ms-white)), var(--grad-border);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--shadow-md);
}
.ms-card--plain {
  background: var(--ms-white);
  border: 1px solid var(--ms-line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

/* ---------- CHIPS / PILLS ---------- */
.ms-chip {
  font-family: var(--font-rounded);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ms-blue);
  background: var(--ms-white);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  border: 1px solid rgba(0,0,0,.04);
}
.ms-chip--mint     { background: var(--ms-mint-50); color: var(--ms-teal); }
.ms-chip--pink     { background: var(--ms-pink-50); color: var(--ms-magenta); }
.ms-chip--lavender { background: var(--ms-lavender-50); color: var(--ms-purple); }
.ms-chip--active   { background: var(--grad-purple-pink); color: #fff; box-shadow: 0 6px 14px rgba(216,30,114,.28); }

/* ---------- DOTTED DIVIDER (never harsh solid lines) ---------- */
.ms-divider-dotted {
  height: 0; border: none;
  border-top: 3px dotted var(--ms-pink);
  opacity: .8;
  margin: var(--space-4) 0;
}
.ms-divider-rainbow {
  height: 4px; border: none; border-radius: 999px;
  background: var(--grad-rainbow);
  opacity: .55;
}
/* vertical color-block pipe */
.ms-pipe { width: 2px; align-self: stretch; background: var(--ms-skypastel); border-radius: 2px; }

/* ---------- FORM FIELDS ---------- */
.ms-field { display: flex; flex-direction: column; gap: 6px; }
.ms-field > label {
  font-family: var(--font-rounded);
  font-weight: 700; font-size: var(--text-sm);
  color: var(--ms-blue);
}
.ms-input, .ms-select, .ms-textarea {
  font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--fg2);
  background: var(--ms-white);
  border: 1.5px solid var(--ms-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-input:focus, .ms-select:focus, .ms-textarea:focus {
  border-color: var(--ms-purple);
  box-shadow: 0 0 0 4px rgba(126,64,207,.14);
}
.ms-input::placeholder { color: #B9B3C7; }

/* ---------- BADGE ---------- */
.ms-badge {
  font-family: var(--font-sans); font-weight: 800; font-size: var(--text-xs);
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--ms-magenta);
  border-radius: var(--radius-pill); padding: 4px 10px;
}
.ms-badge--teal { background: var(--ms-teal); }
.ms-badge--sky  { background: var(--ms-sky); }