/* ============================================================
   Mother's Day Flash Vote - assets/css/style.css
   Scoped styles to avoid theme conflicts
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Libre+Caslon+Text:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1');

/* ----------- Scoped Font Application ----------- */
.mdfv-app-container,
.mdfv-results-container,
.mdfv-admin-wrapper {
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-sizing: border-box;
}

/* ----------- Material Symbols ----------- */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

/* ----------- Category Group Headers (vote widget) ----------- */
#mdfv-candidates-grid h3 {
    color: #046BD2 !important;
}

/* ----------- Candidate Card ----------- */
.mdfv-candidate-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.mdfv-candidate-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(183, 0, 94, 0.2);
}
.mdfv-candidate-card.selected {
    background: linear-gradient(135deg, #b7005e 0%, #7e22ce 100%) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 8px 24px rgba(183, 0, 94, 0.4), 0 0 0 2px #f9a8d4;
    transform: scale(1.02);
}
.mdfv-candidate-card.selected .candidate-initial {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.mdfv-candidate-card.selected .candidate-name {
    color: white !important;
}

/* ----------- Winner Popup ----------- */
@keyframes mdfv-winner-pop {
    0%   { opacity: 0; transform: scale(0.55) translateY(40px); }
    70%  { transform: scale(1.04) translateY(-6px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mdfv-winner-pop {
    animation: mdfv-winner-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mdfv-crown-bounce {
    from { transform: translateY(0)   rotate(-8deg) scale(1);    }
    to   { transform: translateY(-14px) rotate(8deg) scale(1.15); }
}
.mdfv-crown-anim {
    display: inline-block;
    animation: mdfv-crown-bounce 0.9s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.7));
}

@keyframes mdfv-winner-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.3); }
    50%       { box-shadow: 0 0 50px rgba(245,158,11,0.6), 0 0 100px rgba(236,72,153,0.2); }
}
.mdfv-winner-card-item {
    animation: mdfv-winner-glow 2.2s ease-in-out infinite;
}

/* ----------- Active Vote Badge ----------- */
@keyframes mdfv-neon-pulse {
    0%, 100% {
        box-shadow: 0 0 6px #4ade80, 0 0 14px rgba(74, 222, 128, 0.5);
    }
    50% {
        box-shadow: 0 0 14px #4ade80, 0 0 30px rgba(74, 222, 128, 0.7), 0 0 50px rgba(74, 222, 128, 0.3);
    }
}
.mdfv-badge-active {
    animation: mdfv-neon-pulse 1.1s ease-in-out infinite;
}

/* ----------- Tap Button ----------- */
#mdfv-tap-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
#mdfv-tap-button:active {
    transform: scale(0.93) !important;
}
#mdfv-tap-button.tap-flash {
    box-shadow: 0 0 0 8px rgba(183, 0, 94, 0.35),
                0 0 0 16px rgba(183, 0, 94, 0.15) !important;
}

/* ----------- Tap Particle ----------- */
.mdfv-tap-particle {
    position: absolute;
    pointer-events: none;
    font-size: 1.5rem;
    animation: mdfv-particle-fly 0.8s ease-out forwards;
    z-index: 999;
    user-select: none;
}
@keyframes mdfv-particle-fly {
    0%   { opacity: 1; transform: translateY(0) scale(1);   }
    100% { opacity: 0; transform: translateY(-80px) scale(0.5); }
}

/* ----------- Leaderboard Bars ----------- */
.mdfv-bar-fill {
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 999px;
    height: 100%;
}

/* ----------- Rank Badge Colors ----------- */
.rank-gold   { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #1a0a00; }
.rank-silver { background: linear-gradient(135deg, #94a3b8, #cbd5e1); color: #1e293b; }
.rank-bronze { background: linear-gradient(135deg, #c97d4c, #e8a97e); color: #1a0a00; }
.rank-other  { background: rgba(255,255,255,0.07); color: #94a3b8; border: 1px solid rgba(255,255,255,0.07); }

/* ----------- Activity Feed Entry ----------- */
@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.activity-entry {
    animation: slideInDown 0.35s ease-out forwards;
}

/* ----------- Admin Wapper Override (to fight WP admin theme) ----------- */
.mdfv-admin-wrapper {
    margin-left: -20px;
    margin-right: -20px;
}
.mdfv-admin-wrapper select option {
    background: #0f172a;
    color: white;
}

/* ----------- Hide WP admin title duplication ----------- */
.mdfv-admin-wrapper + .wp-heading-inline,
.mdfv-admin-wrapper + h1 {
    display: none;
}

/* ----------- Vote Page Countdown Overlay ----------- */
#mdfv-vote-countdown {
    pointer-events: all;
}

/* ----------- Encouragement Toast ----------- */
@keyframes mdfv-encouragement-anim {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(12px); }
    25%  { opacity: 1; transform: translateX(-50%) scale(1.06) translateY(0); }
    70%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-6px); }
    100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-22px); }
}
.mdfv-encouragement {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    pointer-events: none;
    animation: mdfv-encouragement-anim 2.4s ease-out forwards;
    white-space: nowrap;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 900;
    font-size: 1.15rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13), 0 0 0 2px rgba(183, 0, 94, 0.12);
}