/**
 * 投票システムのスタイル
 */

/* ========================================
   基本的な投票ボタンスタイル
======================================== */

/* 投票ボタンコンテナ */
.vote-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 投票数吹き出しスタイル */
.vote-count-bubble {
    position: relative;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    min-width: 35px;
    text-align: center;
}

/* 投票数吹き出しの矢印（左側の三角形） */
.vote-count-bubble::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid #2196F3;
    transform: translateY(-50%);
}

/* 投票済み状態の吹き出し */
.vote-count-bubble.voted {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
}

.vote-count-bubble.voted::before {
    border-right-color: #FF6B6B;
}

.machonavi-vote-button {
    display: inline-block;
    position: relative;
}

.vote-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    white-space: nowrap;
    justify-content: center;
}

.vote-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.vote-btn:active:not(:disabled) {
    transform: translateY(0);
}

.vote-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* 投票済みスタイル */
.vote-btn.voted,
.machonavi-vote-button.voted .vote-btn {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%) !important;
    border-color: #757575 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.vote-btn.voted .vote-icon,
.machonavi-vote-button.voted .vote-icon {
    color: #bdbdbd !important;
}

/* アイコンとテキスト */
.vote-icon {
    font-size: 20px;
}

.vote-text {
    font-size: 14px;
}

.vote-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 14px;
}

/* ボタン内の小さい投票数 */
.vote-count-small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-left: 4px;
}

/* ========================================
   サイズバリエーション
======================================== */

/* 小サイズ */
.vote-size-small .vote-btn,
.machonavi-vote-button.style-small .vote-btn {
    padding: 10px 20px;
    font-size: 13px;
}

.vote-size-small .vote-icon,
.machonavi-vote-button.style-small .vote-icon {
    font-size: 14px;
}

.vote-size-small .vote-text,
.machonavi-vote-button.style-small .vote-text {
    font-size: 13px;
}

.vote-size-small .vote-count,
.machonavi-vote-button.style-small .vote-count {
    font-size: 12px;
    padding: 1px 6px;
    background: transparent;
}

/* 小サイズの投票数吹き出し */
.vote-size-small .vote-container {
    gap: 6px;
}

.vote-size-small .vote-count-bubble {
    font-size: 10px;
    padding: 3px 6px;
    border-radius: 10px;
    min-width: 30px;
}

.vote-size-small .vote-count-bubble::before {
    border-right-width: 3px;
    border-top-width: 3px;
    border-bottom-width: 3px;
    left: -3px;
    border-right-color: #2196F3;
}

.vote-size-small .vote-count-bubble.voted::before {
    border-right-color: #FF6B6B;
}

/* 中サイズ */
.vote-size-medium .vote-btn {
    padding: 8px 18px;
    font-size: 14px;
}

/* ========================================
   ランキングページ用スタイル
======================================== */

/* ランキング内の投票ボタン */
.rank-action .vote-btn {
    padding: 6px 16px;
    font-size: 13px;
    border: 1px solid #ff6b6b;
    background: #fff;
    color: #ff6b6b;
    border-radius: 20px;
    min-width: 90px;
}

.rank-action .vote-btn:hover:not(:disabled) {
    background: #ff6b6b;
    color: #fff;
    transform: none;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

.rank-action .vote-btn.voted {
    background: #9e9e9e;
    border-color: #757575;
    color: #bdbdbd;
}

/* ========================================
   メッセージとツールチップ
======================================== */

/* メッセージ */
.vote-message {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 8px 16px;
    background: #333;
    color: white;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    display: none;
}

.vote-message::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #333;
}



.vote-message.error {
    background: #e74c3c;
}

.vote-message.error::before {
    border-bottom-color: #e74c3c;
}

/* ツールチップ */
.vote-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 6px 12px;
    background: #333;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
    z-index: 1000;
}

.vote-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.vote-btn.voted:hover + .vote-tooltip,
.vote-btn.voted:focus + .vote-tooltip,
.vote-btn.voted.touched + .vote-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   アニメーション
======================================== */

/* 投票ボタンの弾けるアニメーション */
.vote-btn.vote-burst {
    animation: voteBurst 0.8s ease-out;
}

@keyframes voteBurst {
    0% { transform: scale(1); }
    30% { transform: scale(1.3); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ハートアイコンの弾けるアニメーション */
.vote-icon.heart-burst {
    animation: heartBurst 0.8s ease-out;
    color: #ff1744 !important;
}

@keyframes heartBurst {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.5) rotate(-10deg); }
    50% { transform: scale(1.8) rotate(10deg); }
    75% { transform: scale(1.3) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* カウント数の弾けるアニメーション */
.vote-count.count-burst {
    animation: countBurst 0.6s ease-out;
    color: #ff1744 !important;
}

@keyframes countBurst {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* パーティクル効果 */
.vote-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
}

/* ランキングカード内のパーティクル位置調整 */
.rank-action .vote-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100;
}

/* PC版でのランキングカード内パーティクル調整 */
@media (min-width: 769px) {
    .rank-action .vote-particles {
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* ランキングページ - ランキングボタンの中央に正確に配置 */
    .rank-action .machonavi-vote-button .vote-particles {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
    }
    
    /* TOPページ - ランキングボタンの中央に正確に配置 */
    .home-ranking .rank-vote-wrapper .machonavi-vote-button .vote-particles {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.18);
        width: 0;
        height: 0;
    }
}

/* モバイル版でのランキングカード内パーティクル調整 */
@media (max-width: 768px) {
    .rank-action .vote-particles {
        transform: translate(-50%, -50%) scale(1.25);
    }
    
    /* TOPページランキング - モバイル版 */
    .home-ranking .rank-vote-wrapper .machonavi-vote-button .vote-particles {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.25);
        width: 0;
        height: 0;
    }
}

.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff1744;
    border-radius: 50%;
    animation: particleBurst 1s ease-out forwards;
}

@keyframes particleBurst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(cos(var(--angle)) * var(--distance)),
            calc(sin(var(--angle)) * var(--distance))
        ) scale(0);
        opacity: 0;
    }
}

/* エラー時のシェイクアニメーション */
.machonavi-vote-button.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* 互換性のために残しておく */
.vote-count.updated {
    animation: countBurst 0.6s ease-out;
    color: #ff1744 !important;
}

/* ========================================
   レスポンシブ対応
======================================== */
/* ========================================
   モバイル用投票ボタンスタイル
======================================== */
@media (max-width: 768px) {
    /* 基本的な投票ボタン */
    .vote-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
    
    .vote-icon {
        font-size: 16px;
    }
    
    /* 投票ボタンコンテナ */
    .vote-container {
        gap: 6px;
    }
    
    /* 投票数吹き出し */
    .vote-count-bubble {
        font-size: 10px;
        padding: 3px 6px;
        border-radius: 10px;
        min-width: 30px;
    }
    
    .vote-count-bubble::before {
        border-right-width: 3px;
        border-top-width: 3px;
        border-bottom-width: 3px;
        left: -3px;
        border-right-color: #2196F3;
    }
    
    /* 投票済み状態（モバイル） */
    .vote-count-bubble.voted::before {
        border-right-color: #FF6B6B;
        border-right-width: 3px;
        border-top-width: 3px;
        border-bottom-width: 3px;
        left: -3px;
    }
    
    /* ランキング内の投票ボタン */
    .rank-action .vote-btn {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border-radius: 25px;
        box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
    }
    
    .rank-action .vote-icon {
        font-size: 16px;
    }
    
    /* タッチ時のフィードバック */
    .rank-action .vote-btn:active {
        transform: scale(0.98);
    }
}

/* タッチデバイス用の追加スタイル */
@media (hover: none) {
    .vote-btn {
        -webkit-tap-highlight-color: rgba(255, 107, 107, 0.2);
    }
    
    /* ツールチップのタッチ対応 */
    .vote-btn.voted.touched + .vote-tooltip {
        opacity: 1;
        visibility: visible;
    }
}