/* ============================================================
   MochiBunnySnaps — shared sticker design system
   Bold black borders, hard offset shadows, bouncy hovers.
   ============================================================ */

/* Cards & buttons: the "sticker" treatment */
.sticker-card {
    border: 3px solid #0a0a0a;
    border-radius: 1rem;
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 1);
    transition: all 0.2s ease-in-out;
}
.sticker-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 1);
}
.sticker-btn {
    border: 3px solid #0a0a0a;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.sticker-btn:hover:not(:disabled) {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0px rgba(0, 0, 0, 1);
}
.sticker-btn:active:not(:disabled) {
    transform: translateY(0px) scale(0.98);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
}
.sticker-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.35);
}
.sticker-input {
    border: 3px solid #0a0a0a;
    border-radius: 1rem;
    transition: all 0.2s ease;
}
.sticker-input:focus {
    outline: none;
    border-color: #ff7096;
    box-shadow: 0 0 0 4px #ffdad6;
}

/* Abstract decorative dot pattern */
.bg-pattern {
    background-image: radial-gradient(#d5c3ba 2px, transparent 2px);
    background-size: 24px 24px;
}

/* Toast */
#kp-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(16px);
    background: #1f1b18;
    color: #fff8f6;
    padding: 12px 22px;
    border-radius: 9999px;
    border: 3px solid #0a0a0a;
    box-shadow: 4px 4px 0 #0a0a0a;
    font-weight: 700;
    font-size: 14px;
    font-family: "Inter", system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
    z-index: 9999;
    max-width: 90vw;
    text-align: center;
}
#kp-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Countdown pop + flash */
@keyframes kp-pop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.kp-pop { animation: kp-pop 0.3s ease-out; }

/* Photo "developing" reveal */
@keyframes kp-develop {
    0% { opacity: 0; filter: blur(10px) brightness(2) saturate(0); }
    100% { opacity: 1; filter: blur(0) brightness(1) saturate(1); }
}
.developing-photo { animation: kp-develop 1.6s ease-out forwards; }

/* Gentle float */
@keyframes kp-float {
    0%, 100% { transform: translateY(0px) rotate(1.5deg); }
    50% { transform: translateY(-10px) rotate(0.5deg); }
}
.floating { animation: kp-float 4s ease-in-out infinite; }

/* Editor stickers (draggable emoji) */
.sticker-el {
    position: absolute;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    touch-action: none;
    transition: filter 0.15s ease;
    will-change: transform;
}
.sticker-el:hover { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.sticker-el.dragging { cursor: grabbing; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }

/* Editor strip stage */
#strip-box { display: inline-block; position: relative; }

/* Capture progress dots */
.kp-dot {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 2px solid #0a0a0a;
    background: #ffffff;
    transition: all 0.2s ease;
    display: inline-block;
}
.kp-dot.filled { background: #ffd670; }
.kp-dot.active { box-shadow: 0 0 0 3px #ff7096; }

/* Layout selection cards */
.layout-card .card-inner { transition: all 0.25s ease; }
.layout-card.selected .card-inner {
    background: #bce9ff;
    transform: translateY(-4px);
    box-shadow: 6px 6px 0px 0px rgba(31, 27, 24, 1);
}
.layout-card.selected .check-dot { background: #80543a; }
.layout-card.selected .check-dot .material-symbols-outlined { opacity: 1; }

/* Editor panel option buttons */
.panel-option.selected {
    background: #ffd670;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
    transform: translateY(-2px);
}

/* Error shake */
@keyframes kp-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.kp-shake { animation: kp-shake 0.4s ease; }

/* Slim scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d5c3ba; border-radius: 8px; border: 2px solid #fff8f6; }
*::-webkit-scrollbar-track { background: transparent; }