/**
 * モダンメディカル グローバル上書きスタイル
 * Version: 1.1
 * Created: 2026-06-09
 * Updated: 2026-06-09 - 縦書き問題の修正
 * 
 * 既存の旧カラーを新カラーシステムに強制的に上書き
 */

/* ========================================
   🔥 緊急修正：縦書き表示の完全防止
   ======================================== */

/* すべての要素に横書き強制（最優先） */
* {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    -ms-writing-mode: lr-tb !important;
    text-orientation: mixed !important;
    -webkit-text-orientation: mixed !important;
    -moz-text-orientation: mixed !important;
    direction: ltr !important;
}

/* HTML, BODY要素にも明示的に適用 */
html,
body {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    -ms-writing-mode: lr-tb !important;
    text-orientation: mixed !important;
    -webkit-text-orientation: mixed !important;
    -moz-text-orientation: mixed !important;
    direction: ltr !important;
}

/* ========================================
   旧ゴールドを新カラーに置換
   ======================================== */

/* 旧ゴールドのテキスト色を新プライマリカラーに */
[style*="color: #c9a961"],
[style*="color:#c9a961"],
[style*="color: #d4b76a"],
[style*="color:#d4b76a"] {
    color: var(--color-primary) !important;
}

/* 旧ゴールドの背景を新グラデーションに */
[style*="background: linear-gradient(135deg, #c9a961"],
[style*="background:linear-gradient(135deg, #c9a961"],
[style*="background: linear-gradient(135deg,#c9a961"] {
    background: var(--gradient-primary) !important;
}

/* 旧ゴールドの単色背景を新アクセントカラーに */
[style*="background: #c9a961"],
[style*="background:#c9a961"],
[style*="background-color: #c9a961"],
[style*="background-color:#c9a961"] {
    background: var(--color-accent) !important;
    background-color: var(--color-accent) !important;
}

/* 旧ゴールドのボーダーカラーを新プライマリに */
[style*="border-color: #c9a961"],
[style*="border-color:#c9a961"],
[style*="border: 2px solid #c9a961"],
[style*="border:2px solid #c9a961"],
[style*="border-left: 4px solid #c9a961"],
[style*="border-left:4px solid #c9a961"],
[style*="border-top: 5px solid #c9a961"],
[style*="border-top:5px solid #c9a961"],
[style*="border-top: 4px solid #c9a961"],
[style*="border-top:4px solid #c9a961"] {
    border-color: var(--color-primary) !important;
}

/* 旧ダークブルーの背景を新グラデーションに */
[style*="background: linear-gradient(135deg, #1a2a3a"],
[style*="background:linear-gradient(135deg, #1a2a3a"] {
    background: var(--gradient-hero) !important;
}

/* 旧ダークブルーのテキスト色を新テキストカラーに */
[style*="color: #1a2a3a"],
[style*="color:#1a2a3a"] {
    color: var(--color-text-primary) !important;
}

/* 旧グレーのテキスト色を新セカンダリテキストに */
[style*="color: #666"],
[style*="color:#666"],
[style*="color: #555"],
[style*="color:#555"] {
    color: var(--color-text-secondary) !important;
}

/* ========================================
   ボタンスタイルの統一
   ======================================== */

/* 旧プライマリボタンを新デザインに */
.btn-primary,
.btn.btn-primary {
    background: var(--gradient-accent) !important;
    color: var(--color-text-primary) !important;
    border: none !important;
    box-shadow: var(--shadow-accent) !important;
    border-radius: var(--btn-border-radius) !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--btn-transition) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-accent-hover) !important;
}

/* アウトラインボタン */
.btn-outline-white {
    background: transparent !important;
    color: white !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    border-radius: var(--btn-border-radius) !important;
    padding: var(--btn-padding-y) var(--btn-padding-x) !important;
}

.btn-outline-white:hover {
    background: rgba(255,255,255,0.15) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   カードスタイルの統一
   ======================================== */

/* セクションタイトルのアイコンカラー */
.section-title i,
.section-title .fas,
.section-title .far,
.section-title .fab {
    color: var(--color-primary) !important;
}

/* チェックマークアイコンのカラー */
.fa-check-circle {
    color: var(--color-primary) !important;
}

/* ========================================
   統計カードの数字色
   ======================================== */

/* 数字部分をグラデーションテキストに */
.stat-number-modern {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   主要治療・検査カードの色修正
   ======================================== */

/* 治療カードのトップボーダー */
.treatment-detail-card[style*="border-top: 4px solid #c9a961"],
[style*="border-top: 4px solid #c9a961"] {
    border-top-color: var(--color-primary) !important;
}

/* 治療カードのアイコン背景 */
.treatment-icon[style*="background: linear-gradient(135deg, #c9a961"] {
    background: var(--gradient-primary) !important;
}

/* box-shadowも更新 */
.treatment-icon[style*="box-shadow: 0 4px 12px rgba(201,169,97"] {
    box-shadow: var(--shadow-primary) !important;
}

/* 治療カードのボタン */
.btn-treatment[style*="background: linear-gradient(135deg, #c9a961"] {
    background: var(--gradient-accent) !important;
    box-shadow: var(--shadow-accent) !important;
}

.btn-treatment[style*="background: linear-gradient(135deg, #c9a961"]:hover {
    box-shadow: var(--shadow-accent-hover) !important;
}

/* アイコンカラーの統一 */
[style*="color: #c9a961"] .fas,
[style*="color: #c9a961"] .fa {
    color: var(--color-primary) !important;
}

/* ========================================
   Why Antiaging セクションの色修正
   ======================================== */

/* 統計数字の色 */
.why-antiaging [style*="color: #c9a961"],
[style*="font-size: 3rem"][style*="color: #c9a961"] {
    color: var(--color-primary) !important;
}

/* 4ステップアイコン背景 */
[style*="background: linear-gradient(135deg, #c9a961 0%, #d4b76a 100%)"] {
    background: var(--gradient-primary) !important;
}

/* ========================================
   FAQ セクションの色修正
   ======================================== */

/* FAQアイコンカラー */
.faq-preview-question [style*="color: #c9a961"],
.fa-question-circle[style*="color: #c9a961"],
.fa-chevron-down[style*="color: #c9a961"] {
    color: var(--color-primary) !important;
}

/* ========================================
   Blog セクションの色修正
   ======================================== */

/* ブログカテゴリーバッジ */
.blog-preview-category[style*="background: #c9a961"],
[style*="background: #c9a961"][style*="color: white"] {
    background: var(--color-accent) !important;
}

/* ブログ画像オーバーレイ */
[style*="background: linear-gradient(135deg, rgba(201, 169, 97"],
[style*="background:linear-gradient(135deg, rgba(201, 169, 97"] {
    background: linear-gradient(135deg, rgba(44, 122, 123, 0.9) 0%, rgba(35, 78, 82, 0.9) 100%) !important;
}

/* ========================================
   CTA セクションの色修正
   ======================================== */

/* CTAバッジ背景 */
[style*="background: rgba(201, 169, 97, 0.25)"],
[style*="border: 2px solid rgba(201, 169, 97, 0.5)"] {
    background: rgba(44, 122, 123, 0.25) !important;
    border-color: rgba(44, 122, 123, 0.5) !important;
}

/* CTAバッジテキスト */
[style*="color: #c9a961"][style*="font-weight: 700"],
[style*="color: rgba(201, 169, 97, 1)"] {
    color: var(--color-accent) !important;
}

/* CTA装飾背景 */
[style*="background: radial-gradient(circle, rgba(201, 169, 97"] {
    background: radial-gradient(circle, rgba(44, 122, 123, 0.1) 0%, transparent 70%) !important;
}

/* CTAアイコンカラー */
.cta-section [style*="color: #c9a961"] {
    color: var(--color-accent) !important;
}

/* CTAボタンのbox-shadow */
#ctaPhoneBtn[style*="box-shadow: 0 8px 24px rgba(201, 169, 97"],
[style*="box-shadow: 0 8px 24px rgba(201, 169, 97"] {
    box-shadow: var(--shadow-accent) !important;
}

/* ========================================
   信頼バッジ（Trust Badges）の強化
   ======================================== */

/* 信頼バッジのシャドウをModern Medicalスタイルに */
.stat-card-modern,
.hero-trust-badges > div {
    box-shadow: var(--shadow-primary) !important;
}

.stat-card-modern:hover,
.hero-trust-badges > div:hover {
    box-shadow: 0 12px 32px rgba(44, 122, 123, 0.25) !important;
}

/* 信頼バッジの数字カラー強化 */
.stat-number-modern {
    color: var(--color-primary) !important;
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ========================================
   カード縦書き問題の完全修正
   ======================================== */

/* シンプルで確実なアプローチ */
.card-modern,
.card-modern *,
.card-modern h1,
.card-modern h2,
.card-modern h3,
.card-modern h4,
.card-modern h5,
.card-modern h6,
.card-modern p,
.card-modern div,
.card-modern span {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    -ms-writing-mode: lr-tb !important;
    text-orientation: mixed !important;
    -webkit-text-orientation: mixed !important;
    -moz-text-orientation: mixed !important;
    direction: ltr !important;
}

.card-modern-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.card-modern-title,
.card-modern-subtitle {
    text-align: left !important;
}

/* ========================================
   治療フロードット・ライン
   ======================================== */

/* プログレスラインをTeal Greenグラデーションに */
.progress-line {
    background: var(--gradient-primary) !important;
}

/* ステップドット - シャドウをクリーンに */
.step-dot {
    box-shadow: 0 2px 8px rgba(44, 122, 123, 0.2) !important;
}

.step-dot:first-child {
    box-shadow: var(--shadow-primary) !important;
}

/* ========================================
   NAD+療法カード ピンク色の上書き
   ======================================== */

/* ピンク背景のセクションをTeal系に変更 */
[style*="background: linear-gradient(135deg, rgba(255, 82, 138"],
[style*="background:linear-gradient(135deg, rgba(255, 82, 138"] {
    background: linear-gradient(135deg, rgba(44, 122, 123, 0.12) 0%, rgba(79, 209, 197, 0.08) 100%) !important;
}

/* ピンクのボーダーをTealに変更 */
[style*="border-left: 4px solid #ff528a"],
[style*="border-left:4px solid #ff528a"] {
    border-left-color: var(--color-primary) !important;
}

/* ピンクのアイコン色をTealに変更 */
[style*="color: #ff528a"],
[style*="color:#ff528a"] {
    color: var(--color-primary) !important;
}

/* 治療カードのbox-shadow統一 */
[style*="box-shadow: 0 4px 12px rgba(201,169,97,0.3)"],
[style*="box-shadow:0 4px 12px rgba(201,169,97,0.3)"] {
    box-shadow: var(--shadow-primary) !important;
}

[style*="box-shadow: 0 6px 16px rgba(201,169,97,0.4)"],
[style*="box-shadow:0 6px 16px rgba(201,169,97,0.4)"] {
    box-shadow: 0 10px 24px rgba(44, 122, 123, 0.3) !important;
}

/* lightbulbアイコン */
.fa-lightbulb[style*="color: #c9a961"] {
    color: var(--color-accent) !important;
}

/* ========================================
   レスポンシブ調整
   ======================================== */

@media (max-width: 768px) {
    /* モバイルでのボタンパディング調整 */
    .btn-primary,
    .btn.btn-primary,
    .btn-modern {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
    }
    
    /* モバイルでのボタングループ強制スタイル */
    .btn-group-modern,
    .exam-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100% + 48px) !important; /* コンテナのパディング分を拡張 */
        margin-left: -24px !important; /* 左パディング打ち消し */
        margin-right: -24px !important; /* 右パディング打ち消し */
        padding-left: 24px !important; /* ボタン内部のパディングを追加 */
        padding-right: 24px !important; /* ボタン内部のパディングを追加 */
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* モバイルでのLGボタンサイズ統一 */
    .btn-modern-lg,
    .btn-group-modern .btn-modern-lg,
    .btn-group-modern > .btn-modern,
    .btn-group-modern > a.btn-modern,
    .btn-group-modern > button.btn-modern,
    .exam-cta-buttons .btn-modern {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 !important;
        box-sizing: border-box !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }
}