﻿/* ThePlateScraper Custom Styles */
.category-btn {
    padding: 0.625rem 1.25rem; border-radius: 9999px; font-size: 0.875rem;
    font-weight: 600; transition: all 0.2s; border: 2px solid #e5e7eb;
    background: white; color: #4b5563; cursor: pointer;
}
.category-btn:hover { border-color: #f09533; color: #dd5f08; }
.category-btn.active { background: #ec7a12; color: white; border-color: #ec7a12; box-shadow: 0 10px 15px -3px rgba(236,122,18,0.25); }

.scale-btn {
    padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-size: 0.875rem;
    font-weight: 700; transition: all 0.2s; border: 2px solid #e5e7eb;
    background: white; color: #4b5563; cursor: pointer;
}
.scale-btn:hover { border-color: #f09533; color: #dd5f08; }
.scale-btn.active { background: #ec7a12; color: white; border-color: #ec7a12; box-shadow: 0 10px 15px -3px rgba(236,122,18,0.25); }

.ingredient-item.checked .ingredient-text { text-decoration: line-through; color: #9ca3af; }
.ingredient-item.checked { background: #f0fdf4; border-color: #bbf7d0; }

.step-item.completed { background: #f0fdf4; border-color: #bbf7d0; }
.step-item.completed .step-text { color: #9ca3af; }
.step-item.completed .step-number { background: #22c55e; color: white; }

.sub-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.sub-badge.original { background: #dbeafe; color: #1d4ed8; }
.sub-badge.original:hover { background: #bfdbfe; }
.sub-badge.swapped { background: #dcfce7; color: #15803d; }
.sub-badge.swapped:hover { background: #bbf7d0; }

.recipe-card { transition: all 0.3s; }
.recipe-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); transform: translateY(-4px); }

.affiliate-card { transition: all 0.3s; }
.affiliate-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); transform: translateY(-4px); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #c5c5c5; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a0a0a0; }

@media print {
    header, footer, .scale-btn, .affiliate-card, .sub-badge { display: none !important; }
    .recipe-card { break-inside: avoid; }
}
