/* Custom CSS styling for My Feelings App */
body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #f8f9fa;
    color: #191c1d;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-fill .material-symbols-outlined,
.icon-fill {
    font-variation-settings: 'FILL' 1;
}

/* Soft & Colored Shadow Tokens */
.shadow-soft {
    box-shadow: 0px 4px 16px rgba(134, 77, 97, 0.06);
}

.shadow-colored-pink {
    box-shadow: 0px 8px 24px rgba(250, 179, 202, 0.4);
}

.shadow-colored-mint {
    box-shadow: 0px 8px 24px rgba(153, 212, 161, 0.4);
}

.shadow-elevated {
    box-shadow: 0px 12px 32px rgba(114, 84, 119, 0.12);
}

/* Safe Area Paddings */
.pb-safe {
    padding-bottom: max(env(safe-area-inset-bottom), 16px);
}
.pt-safe {
    padding-top: max(env(safe-area-inset-top), 12px);
}

/* Hide Scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Feelings Grid Layout */
.feelings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .feelings-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Feeling Card Interactive States */
.feeling-card {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    -webkit-user-select: none;
}

.feeling-card:active {
    transform: scale(0.94);
}

.feeling-card.selected {
    border-width: 2.5px;
    transform: scale(1.03);
    box-shadow: 0px 10px 28px rgba(134, 77, 97, 0.22);
}

/* Week Strip Selected Day Visual Cue */
.day-pill-selected {
    transform: scale(1.08);
    box-shadow: 0px 6px 18px rgba(134, 77, 97, 0.25);
    border: 2px solid #864d61 !important;
}

/* Save Button Feedback State */
.btn-saved-success {
    background-color: #326940 !important;
    color: #ffffff !important;
    transform: scale(1.04);
    box-shadow: 0px 8px 24px rgba(50, 105, 64, 0.4) !important;
}

/* Shake animation on error */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

/* Fade In animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Floating Heart Animation */
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-90px) scale(1.5) rotate(15deg);
    }
}

.floating-heart {
    position: absolute;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
}

/* Modal backdrop overlay */
.modal-backdrop {
    background-color: rgba(25, 28, 29, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}