/**
 * WordPress専用のスタイルオーバーライド
 * 
 * WordPressテーマとの競合を避けるため、
 * プラグイン固有のクラス名を使用
 */

/* コンテナのスコープ設定 */
.insurance-simulation-container {
    /* 親テーマのスタイルを分離 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: #374151;
    line-height: 1.6;
    font-size: 16px;
}

/* ヘッダーのクラス名修正 */
.insurance-sim-header {
    padding: 2rem 2rem;
    background: linear-gradient(135deg, #043289 0%, #009CDB 100%);
    color: white;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.insurance-sim-header .header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    position: relative;
}

.insurance-sim-header .site-logo {
    height: 50px;
    width: auto;
    object-fit: contain;
    position: absolute;
    left: 0;
}

.insurance-sim-header .site-logo-white {
    filter: brightness(0) invert(1);
}

.insurance-sim-header .header-text {
    text-align: center;
}

.insurance-sim-header .site-title {
    color: white !important;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    display: block;
}

/* フッターのクラス名修正 */
.insurance-sim-footer {
    background: #1f2937;
    color: #9ca3af;
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
}

/* プライマリカードの文字色を確実に白にする */
.insurance-simulation-container .result-card.primary h3,
.insurance-simulation-container .result-card.primary p,
.insurance-simulation-container .result-card.primary .result-value,
.insurance-simulation-container .result-card.primary .unit {
    color: white !important;
}

/* リンクとボタンのホバー色を青系に固定 */
.insurance-simulation-container a,
.insurance-simulation-container a:link,
.insurance-simulation-container a:visited {
    color: #043289;
    text-decoration: none;
}

.insurance-simulation-container a:hover,
.insurance-simulation-container a:active,
.insurance-simulation-container a:focus {
    color: #009CDB !important;
    text-decoration: underline;
}

/* ボタンのホバー */
.insurance-simulation-container .btn:hover {
    background: linear-gradient(135deg, #032269 0%, #043289 100%) !important;
    color: white !important;
    border-color: #043289 !important;
}

.insurance-simulation-container .btn-secondary:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #9ca3af !important;
}

/* モードカードのホバー */
.insurance-simulation-container .mode-card:hover {
    border-color: #043289 !important;
    background: white !important;
}

/* 数値入力ボタンのホバー */
.insurance-simulation-container .number-increase:hover,
.insurance-simulation-container .number-decrease:hover {
    background: linear-gradient(135deg, #043289 0%, #009CDB 100%) !important;
    color: white !important;
    border-color: #043289 !important;
}

/* フォーム要素のフォーカス */
.insurance-simulation-container input:focus,
.insurance-simulation-container select:focus,
.insurance-simulation-container textarea:focus {
    border-color: #043289 !important;
    box-shadow: 0 0 0 3px rgba(4, 50, 137, 0.1) !important;
    outline: none !important;
}

/* ラジオボタン・チェックボックスのホバー */
.insurance-simulation-container .coefficient-option:hover,
.insurance-simulation-container .radio-option:hover {
    border-color: #043289 !important;
    background: #f0f9ff !important;
}

/* タブのホバー */
.insurance-simulation-container .education-tab:hover {
    color: #043289 !important;
    background: #f0f9ff !important;
}

/* モーダルのクローズボタン */
.insurance-simulation-container .modal-close:hover {
    background: #e5e7eb !important;
    color: #374151 !important;
}

/* PDFダウンロードボタンのスタイル */
.insurance-simulation-container .btn-icon {
    display: inline-block;
    margin-right: 4px;
}

.insurance-simulation-container .btn-outline {
    background: white;
    color: #043289;
    border: 2px solid #043289;
}

.insurance-simulation-container .btn-outline:hover {
    background: #043289 !important;
    color: white !important;
}

/* 通知アニメーション */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* モバイル対応 */
@media (max-width: 640px) {
    .insurance-sim-header .header-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        padding: 0;
    }
    
    .insurance-sim-header .site-logo {
        width: 40px;
        height: 40px;
        position: static;
        margin: 0 auto var(--spacing-sm);
    }
    
    .insurance-sim-header .site-title {
        font-size: 1.25rem;
    }
}