/* =====================================================
   MGMP Button Down — Frontend Styles v1.0.0
   ===================================================== */

/* ── Variables & Reset ─────────────────────────────── */
.mbd-wrap {
    --mbd-color:      #1d72b8;
    --mbd-text:       #ffffff;
    --mbd-radius:     12px;
    --mbd-anim-speed: 2s;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 16px 0;
    max-width: 100%;
}

/* ── Button Row ────────────────────────────────────── */
.mbd-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ── Base Button ───────────────────────────────────── */
.mbd-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    cursor: pointer;
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
.mbd-btn:focus { outline: 2px solid var(--mbd-color); outline-offset: 3px; }
.mbd-btn:active { transform: scale(.96) !important; }

.mbd-btn__icon { display:flex; align-items:center; }
.mbd-icon-svg svg { width:1.1em; height:1.1em; display:block; }
.mbd-btn__label { flex:1; }
.mbd-btn__badge {
    font-size:.63em; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:#fff;
    padding:2px 7px; border-radius:4px; flex-shrink:0;
}

/* ── Sizes ─────────────────────────────────────────── */
.mbd-size-small  .mbd-btn { padding:8px 16px;  font-size:.82rem;  border-radius:8px;  }
.mbd-size-medium .mbd-btn { padding:12px 22px; font-size:.95rem;  border-radius:12px; }
.mbd-size-large  .mbd-btn { padding:15px 28px; font-size:1.05rem; border-radius:14px; }
.mbd-size-xlarge .mbd-btn { padding:18px 36px; font-size:1.15rem; border-radius:16px; }

/* ═══════════════════════════════════
   BUTTON STYLES (10 variants)
═══════════════════════════════════ */

/* 1. Modern */
.mbd-btn--modern {
    background: var(--mbd-color);
    color: var(--mbd-text) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mbd-color) 40%, transparent);
}
.mbd-btn--modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mbd-color) 50%, transparent);
    color: var(--mbd-text) !important;
}

/* 2. Gradient */
.mbd-btn--gradient {
    background: linear-gradient(135deg, var(--mbd-color) 0%, color-mix(in srgb, var(--mbd-color) 55%, #000) 100%);
    color: var(--mbd-text) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--mbd-color) 35%, transparent);
    background-size: 200% 200%;
}
.mbd-btn--gradient:hover {
    transform: translateY(-2px);
    background-position: right center;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--mbd-color) 50%, transparent);
    color: var(--mbd-text) !important;
}

/* 3. Flat */
.mbd-btn--flat {
    background: color-mix(in srgb, var(--mbd-color) 12%, transparent);
    color: var(--mbd-color) !important;
    box-shadow: none;
}
.mbd-btn--flat:hover {
    background: color-mix(in srgb, var(--mbd-color) 22%, transparent);
    color: var(--mbd-color) !important;
}

/* 4. Outlined */
.mbd-btn--outlined {
    background: transparent;
    color: var(--mbd-color) !important;
    border: 2.5px solid var(--mbd-color);
}
.mbd-btn--outlined:hover {
    background: var(--mbd-color);
    color: var(--mbd-text) !important;
}

/* 5. Pill */
.mbd-size-small  .mbd-btn--pill { border-radius:50px; }
.mbd-size-medium .mbd-btn--pill { border-radius:50px; }
.mbd-size-large  .mbd-btn--pill { border-radius:50px; }
.mbd-size-xlarge .mbd-btn--pill { border-radius:50px; }
.mbd-btn--pill {
    background: var(--mbd-color);
    color: var(--mbd-text) !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--mbd-color) 38%, transparent);
}
.mbd-btn--pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 28px color-mix(in srgb, var(--mbd-color) 52%, transparent);
    color: var(--mbd-text) !important;
}

/* 6. Ghost / Glassmorphism v1 */
.mbd-btn--ghost {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid color-mix(in srgb, var(--mbd-color) 50%, transparent);
    color: var(--mbd-color) !important;
    box-shadow: inset 0 0 20px rgba(255,255,255,.05);
}
.mbd-btn--ghost:hover {
    background: color-mix(in srgb, var(--mbd-color) 12%, rgba(255,255,255,.15));
    border-color: var(--mbd-color);
    transform: translateY(-1px);
    color: var(--mbd-color) !important;
}

/* 7. Neon */
.mbd-btn--neon {
    background: transparent;
    color: var(--mbd-color) !important;
    border: 2px solid var(--mbd-color);
    box-shadow:
        0 0 8px  color-mix(in srgb, var(--mbd-color) 50%, transparent),
        0 0 20px color-mix(in srgb, var(--mbd-color) 30%, transparent),
        inset 0 0 8px color-mix(in srgb, var(--mbd-color) 10%, transparent);
    text-shadow: 0 0 8px var(--mbd-color);
}
.mbd-btn--neon:hover {
    background: color-mix(in srgb, var(--mbd-color) 12%, transparent);
    box-shadow:
        0 0 16px var(--mbd-color),
        0 0 40px color-mix(in srgb, var(--mbd-color) 50%, transparent),
        inset 0 0 16px color-mix(in srgb, var(--mbd-color) 15%, transparent);
    transform: translateY(-1px);
    color: var(--mbd-color) !important;
}

/* 8. Card Elevated */
.mbd-btn--card {
    background: #fff;
    color: var(--mbd-color) !important;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
    border-left: 4px solid var(--mbd-color);
}
.mbd-btn--card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 16px 40px rgba(0,0,0,.1);
    transform: translateY(-3px);
    color: var(--mbd-color) !important;
}

/* 9. Glass v2 */
.mbd-btn--glass {
    background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255,255,255,.3);
    color: var(--mbd-color) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.6);
}
.mbd-btn--glass:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8);
    color: var(--mbd-color) !important;
}

/* 10. Neumorphic */
.mbd-btn--neumorphic {
    background: #e0e5ec;
    color: var(--mbd-color) !important;
    border: none;
    box-shadow:
        6px 6px 12px #b8bec7,
        -6px -6px 12px #ffffff;
}
.mbd-btn--neumorphic:hover {
    box-shadow:
        3px 3px 8px #b8bec7,
        -3px -3px 8px #ffffff;
    transform: scale(.98);
    color: var(--mbd-color) !important;
}
.mbd-btn--neumorphic:active {
    box-shadow:
        inset 4px 4px 10px #b8bec7,
        inset -4px -4px 10px #ffffff !important;
}

/* ═══════════════════════════════════
   ANIMATIONS  (8 variants)
═══════════════════════════════════ */

/* Pulse */
@keyframes mbd-pulse {
    0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mbd-color) 50%, transparent); }
    50%      { box-shadow: 0 0 0 10px transparent; }
}
.mbd-anim--pulse         { animation: mbd-pulse var(--mbd-anim-speed) ease-in-out 1; }
.mbd-anim--pulse.mbd-anim--loop { animation: mbd-pulse var(--mbd-anim-speed) ease-in-out infinite; }

/* Bounce */
@keyframes mbd-bounce {
    0%,100% { transform: translateY(0); }
    40%     { transform: translateY(-8px); }
    60%     { transform: translateY(-4px); }
}
.mbd-anim--bounce         { animation: mbd-bounce var(--mbd-anim-speed) ease 1; }
.mbd-anim--bounce.mbd-anim--loop { animation: mbd-bounce var(--mbd-anim-speed) ease infinite; }

/* Shimmer */
.mbd-anim--shimmer { position:relative; overflow:hidden; }
.mbd-anim--shimmer::before {
    content:'';
    position:absolute; top:0; left:-100%; width:60%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: mbd-shimmer var(--mbd-anim-speed) ease 1;
}
.mbd-anim--shimmer.mbd-anim--loop::before {
    animation: mbd-shimmer var(--mbd-anim-speed) ease infinite;
}
@keyframes mbd-shimmer { from{left:-100%} to{left:160%} }

/* Wave */
@keyframes mbd-wave {
    0%,100% { transform: rotate(0deg) translateY(0); }
    25%     { transform: rotate(-1.5deg) translateY(-2px); }
    75%     { transform: rotate(1.5deg) translateY(2px); }
}
.mbd-anim--wave         { animation: mbd-wave var(--mbd-anim-speed) ease-in-out 1; }
.mbd-anim--wave.mbd-anim--loop { animation: mbd-wave var(--mbd-anim-speed) ease-in-out infinite; }

/* Glow */
@keyframes mbd-glow {
    0%,100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    50%     { filter: brightness(1.12) drop-shadow(0 0 12px color-mix(in srgb, var(--mbd-color) 70%, transparent)); }
}
.mbd-anim--glow         { animation: mbd-glow var(--mbd-anim-speed) ease-in-out 1; }
.mbd-anim--glow.mbd-anim--loop { animation: mbd-glow var(--mbd-anim-speed) ease-in-out infinite; }

/* Float */
@keyframes mbd-float {
    0%,100% { transform: translateY(0px); }
    50%     { transform: translateY(-6px); }
}
.mbd-anim--float         { animation: mbd-float var(--mbd-anim-speed) ease-in-out 1; }
.mbd-anim--float.mbd-anim--loop { animation: mbd-float var(--mbd-anim-speed) ease-in-out infinite; }

/* Shake */
@keyframes mbd-shake {
    0%,100%    { transform: translateX(0); }
    15%,45%,75%{ transform: translateX(-4px); }
    30%,60%,90%{ transform: translateX(4px); }
}
.mbd-anim--shake         { animation: mbd-shake calc(var(--mbd-anim-speed) * .5) ease 1; }
.mbd-anim--shake.mbd-anim--loop { animation: mbd-shake var(--mbd-anim-speed) ease infinite; }

/* ── Preview Toggle ──────────────────────────────── */
.mbd-preview-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: none;
    border: 1.5px solid color-mix(in srgb, var(--mbd-color) 35%, #ccc);
    border-radius: 8px;
    color: var(--mbd-color);
    font-size: .83rem; font-weight: 600;
    padding: 7px 14px; cursor: pointer;
    transition: all .2s; font-family: inherit;
}
.mbd-preview-toggle svg { width:15px; height:15px; flex-shrink:0; }
.mbd-preview-toggle .mbd-chevron { width:14px; height:14px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.mbd-preview-toggle[aria-expanded="true"] .mbd-chevron { transform: rotate(180deg); }
.mbd-preview-toggle:hover { background: color-mix(in srgb, var(--mbd-color) 8%, transparent); border-color: var(--mbd-color); }

/* ── Preview Panel ───────────────────────────────── */
.mbd-preview-panel { margin-top: 12px; animation: mbd-slide-down .3s cubic-bezier(.4,0,.2,1); }
.mbd-preview-panel[hidden] { display: none !important; }
@keyframes mbd-slide-down { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

.mbd-preview-inner { border: 1.5px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.mbd-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; gap: 8px;
}
.mbd-preview-title { font-size:.88rem; font-weight:600; color:#374151; }
.mbd-file-badge { font-size:.63rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; padding:3px 9px; border-radius:4px; }
.mbd-preview-body { background:#fff; min-height:200px; }
.mbd-preview-body iframe, .mbd-preview-body video, .mbd-preview-body audio { display:block; width:100%; }
.mbd-preview-body img { display:block; max-width:100%; margin:0 auto; padding:12px; box-sizing:border-box; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width:600px) {
    .mbd-btn-row         { flex-direction:column; align-items:stretch; }
    .mbd-btn             { justify-content:center; width:100%; }
    .mbd-preview-toggle  { width:100%; justify-content:center; }
    .mbd-size-xlarge .mbd-btn { padding:14px 20px; font-size:1rem; }
}