/* お気に入り機能CSS変数定義 */
:root {
    /* カラーパレット */
    --ts-favorites-color-inactive: #ccc;
    --ts-favorites-color-active: #ffc107;
    --ts-favorites-color-hover: #e0a800;
    --ts-favorites-color-error: #721c24;
    --ts-favorites-color-error-bg: #f8d7da;
    --ts-favorites-color-error-border: #f5c6cb;
    --ts-favorites-color-success: #155724;
    --ts-favorites-color-success-bg: #d4edda;
    --ts-favorites-color-success-border: #c3e6cb;
    --ts-favorites-color-empty-text: #6c757d;
    --ts-favorites-color-empty-bg: #f8f9fa;
    --ts-favorites-color-card-border: #e9ecef;
    --ts-favorites-color-badge: #dc3545;
    
    /* お気に入り上限設定 */
    --ts-favorites-max-items: 20;
    
    /* サイズとスペーシング */
    --ts-favorites-button-size: 32px;
    --ts-favorites-button-size-mobile: 36px;
    --ts-favorites-button-padding: 0.25rem;
    --ts-favorites-button-padding-mobile: 0.3rem;
    --ts-favorites-font-size: 1.2rem;
    --ts-favorites-font-size-mobile: 1.4rem;
    --ts-favorites-font-size-message: 0.9rem;
    --ts-favorites-font-size-empty: 1.1rem;
    
    /* アニメーション */
    --ts-favorites-transition: all 0.3s ease;
    --ts-favorites-transition-fast: transform 0.2s ease;
    
    /* 位置調整 */
    --ts-favorites-section-top: 10px;
    --ts-favorites-section-right: 10px;
    --ts-favorites-section-margin: 1.5rem;
    --ts-favorites-message-margin: 0.5rem;
    --ts-favorites-empty-margin: 2rem;
    --ts-favorites-empty-padding: 3rem 1rem;
    --ts-favorites-card-margin: 0.5rem;
    --ts-favorites-badge-spacing: 0.5rem;
    
    /* ボーダーラディウス */
    --ts-favorites-border-radius: 4px;
    --ts-favorites-border-radius-large: 8px;
    --ts-favorites-border-radius-badge: 12px;
}

/* お気に入りボタンスタイル - 星アイコンのみ */
button.btn-favorite {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--ts-favorites-button-padding);
    background: transparent !important;
    border: none !important;
    color: #ccc !important; /* グレー色を強制適用 */
    cursor: pointer !important;
    transition: var(--ts-favorites-transition);
    font-size: var(--ts-favorites-font-size);
    text-decoration: none !important;
    min-height: var(--ts-favorites-button-size);
    min-width: var(--ts-favorites-button-size);
    position: relative;
}

/* アイコンの色も強制 */
button.btn-favorite i {
    color: inherit !important;
}

button.btn-favorite:hover {
    color: #ffc107 !important; /* ホバー時は黄色を強制適用 */
    transform: scale(1.1);
}

button.btn-favorite.active {
    color: #ffc107 !important; /* 黄色を強制適用 */
}

button.btn-favorite.active:hover {
    color: #e0a800 !important; /* アクティブ時のホバーは少し暗い黄色を強制適用 */
    transform: scale(1.1);
}

/* 非アクティブ状態を明示的に指定 */
button.btn-favorite:not(.active) {
    color: #ccc !important;
}

button.btn-favorite:not(.active) i {
    color: #ccc !important;
}

.btn-favorite i {
    transition: var(--ts-favorites-transition-fast);
}


.btn-favorite.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* お気に入り数表示（非表示） */
.favorite-count {
    display: none;
}

/* お気に入りセクション - 右上配置 */
.ts-favorite-section {
    position: absolute;
    top: var(--ts-favorites-section-top);
    right: var(--ts-favorites-section-right);
    text-align: center;
}

/* 詳細ページ用のお気に入りセクション（坪単価の下） */
.ts-favorite-section.detail-page {
    position: static;
    background: transparent;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    box-shadow: none;
    margin-top: var(--ts-favorites-section-margin);
}

/* メッセージ表示 */
.favorite-message {
    padding: var(--ts-favorites-message-margin) 1rem;
    border-radius: var(--ts-favorites-border-radius);
    margin-top: var(--ts-favorites-message-margin);
    font-size: var(--ts-favorites-font-size-message);
    text-align: center;
}

.favorite-message.success {
    background: var(--ts-favorites-color-success-bg);
    color: var(--ts-favorites-color-success);
    border: 1px solid var(--ts-favorites-color-success-border);
}

.favorite-error {
    background: var(--ts-favorites-color-error-bg);
    color: var(--ts-favorites-color-error);
    border: 1px solid var(--ts-favorites-color-error-border);
    padding: var(--ts-favorites-message-margin) 1rem;
    border-radius: var(--ts-favorites-border-radius);
    margin-top: var(--ts-favorites-message-margin);
    font-size: var(--ts-favorites-font-size-message);
    text-align: center;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .btn-favorite {
        font-size: var(--ts-favorites-font-size-mobile);
        min-height: var(--ts-favorites-button-size-mobile);
        min-width: var(--ts-favorites-button-size-mobile);
        padding: var(--ts-favorites-button-padding-mobile);
    }
}

/* お気に入り一覧ページ用スタイル */
.tsubo-favorites-section {
    margin: var(--ts-favorites-empty-margin) 0;
}

.tsubo-favorites-empty {
    text-align: center;
    padding: var(--ts-favorites-empty-padding);
    background: var(--ts-favorites-color-empty-bg);
    border-radius: var(--ts-favorites-border-radius-large);
    margin: var(--ts-favorites-empty-margin) 0;
}

.tsubo-favorites-empty p {
    color: var(--ts-favorites-color-empty-text);
    font-size: var(--ts-favorites-font-size-empty);
    margin-bottom: var(--ts-favorites-section-margin);
}

.builder-card {
    transition: var(--ts-favorites-transition-fast), box-shadow 0.2s ease;
    border: 1px solid var(--ts-favorites-color-card-border);
    border-radius: var(--ts-favorites-border-radius-large);
    overflow: hidden;
}

.builder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.builder-card .btn-favorite {
    margin-top: var(--ts-favorites-card-margin);
}

/* セクションタイトル */
.section-title {
    display: flex;
    align-items: center;
    gap: var(--ts-favorites-badge-spacing);
    margin-bottom: var(--ts-favorites-section-margin);
}

.section-title .badge {
    background: var(--ts-favorites-color-badge);
    color: white;
    padding: 0.25rem var(--ts-favorites-badge-spacing);
    border-radius: var(--ts-favorites-border-radius-badge);
    font-size: 0.8rem;
    font-weight: 500;
}