/* =========================================
   GKE 料金計算ツール - 専用CSS (Google風テーマ)
   ========================================= */

/* --- カード要素の共通スタイル --- */
.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.card-header {
    background-color: #f8f9fa;
    font-weight: 600;
}

/* --- マシンファミリー選択のタイル風デザイン --- */
.instance-family-selection .form-check-label {
    display: block;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.instance-family-selection .form-check-label:hover {
    border-color: #4285f4; /* Google Blue */
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25);
}
.instance-family-selection .form-check-input {
    display: none;
}
.instance-family-selection .form-check-input:checked + .form-check-label {
    background-color: #e8f0fe; /* Google Blue Light */
    border-color: #4285f4;
}

/* --- ノードプールのフォーム --- */
.node-form {
    background-color: #f8f9fa;
}
.node-form .h5 {
    font-weight: 600;
}

/* --- ボタン --- */
.btn-primary {
    background-color: #34a853; /* Google Green */
    border-color: #34a853;
}
.btn-primary:hover {
    background-color: #2c8f45;
    border-color: #2c8f45;
}

/* --- 合計料金表示 --- */
#total-cost-jpy {
    font-weight: 700;
    color: #34a853; /* Google Green */
}

/* --- 内訳 --- */
.cost-breakdown .card-header {
    cursor: pointer;
}
.arrow-icon {
    transition: transform 0.3s ease;
}
.card-header.active .arrow-icon {
    transform: rotate(180deg);
}