/**
 * アフィリエイトボタンの横並び表示用CSS
 * フロントエンドで確実に適用されるようにする
 */

/* アフィリエイトボタンのラッパー（横並び用） */
.wp-auto-writer-affiliate-wrapper {
    display: inline-block !important;
    margin: 0 5px 10px 0 !important;
    vertical-align: middle !important;
}

/* アフィリエイトボタンの横並び表示（強制適用） */
.wp-auto-writer-affiliate-link {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* backgroundはインラインスタイルで設定されるため、ここでは設定しない */
    border-radius: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    clear: none !important;
    white-space: nowrap !important;
    /* アニメーション効果 */
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    position: relative !important;
    transform: translateZ(0) !important; /* ハードウェアアクセラレーション */
    backface-visibility: hidden !important; /* アニメーションの滑らかさ向上 */
}

/* ホバー時のアニメーション */
.wp-auto-writer-affiliate-link:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    filter: brightness(1.1) !important;
}

/* アクティブ時（クリック時）のアニメーション */
.wp-auto-writer-affiliate-link:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.1s ease !important;
}

/* フォーカス時のアニメーション（アクセシビリティ対応） */
.wp-auto-writer-affiliate-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 2px !important;
    transform: translateY(-2px) scale(1.05) !important;
}

/* ショートコードが連続している場合の横並び */
.wp-auto-writer-affiliate-wrapper + .wp-auto-writer-affiliate-wrapper {
    margin-left: 0 !important;
}

/* 段落内のショートコードを横並びにする */
p .wp-auto-writer-affiliate-wrapper,
div .wp-auto-writer-affiliate-wrapper {
    display: inline-block !important;
    margin: 0 5px 10px 0 !important;
}

/* コンテナ内のショートコードを横並びにする（強制） */
.wp-auto-writer-affiliate-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 auto 10px auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* <p>タグ内のショートコードを横並びにする（強制） */
p:has(.wp-auto-writer-affiliate-wrapper) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 auto 10px auto !important;
}

/* <p>タグ内のラッパーを横並びにする（より強力な方法） */
p .wp-auto-writer-affiliate-wrapper {
    display: inline-block !important;
    margin: 0 5px 10px 0 !important;
    vertical-align: middle !important;
    float: none !important;
}

/* 複数のラッパーが<p>タグ内にある場合の横並び */
p:has(.wp-auto-writer-affiliate-wrapper:first-child) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
}

/* :has()が使えない場合のフォールバック */
p .wp-auto-writer-affiliate-wrapper:first-child {
    margin-left: 0 !important;
}

/* 親要素のクリアフィックス（float使用時） */
.wp-auto-writer-affiliate-link-container:after {
    content: "";
    display: table;
    clear: both;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
    .wp-auto-writer-affiliate-wrapper {
        display: block !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }
    
    .wp-auto-writer-affiliate-link {
        width: 100% !important;
    }
    
    /* モバイルでのホバー効果を軽減（タッチデバイス対応） */
    .wp-auto-writer-affiliate-link:hover {
        transform: translateY(-1px) scale(1.02) !important;
    }
    
    .wp-auto-writer-affiliate-link:active {
        transform: translateY(0) scale(0.99) !important;
    }
}

/* タッチデバイスでのパフォーマンス最適化 */
@media (hover: none) and (pointer: coarse) {
    .wp-auto-writer-affiliate-link {
        transition: all 0.2s ease !important;
    }
    
    .wp-auto-writer-affiliate-link:active {
        transition: all 0.1s ease !important;
    }
}