:root {
    --hr-burgundy: #6b2737;
    --hr-cream: #fdf6ec;
    --hr-gold: #c9a84c;
    --hr-border: #e8d5b0;
    --hr-text: #2c1a0e;
    --hr-muted: #7a6a5a;
    --hr-radius: 8px;
    --hr-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.hr-search-widget { max-width:900px; margin:0 auto; }

/* Search Bar */
.hr-search-bar { position:relative; margin-bottom:12px; }
.hr-search-input { width:100%; padding:14px 50px 14px 20px; font-size:1.05rem; border:2px solid var(--hr-border); border-radius:var(--hr-radius); background:#fff; color:var(--hr-text); font-family:inherit; transition:border-color 0.2s; box-sizing:border-box; }
.hr-search-input:focus { outline:none; border-color:var(--hr-burgundy); }
.hr-search-icon { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:1.2rem; pointer-events:none; opacity:0.5; }
.hr-search-clear { position:absolute; right:44px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--hr-muted); cursor:pointer; font-size:1rem; padding:4px; display:none; }
.hr-search-clear.visible { display:block; }

/* Filters */
.hr-search-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.hr-filter-select { padding:8px 14px; border:1px solid var(--hr-border); border-radius:6px; background:#fff; font-size:0.88rem; color:var(--hr-text); font-family:inherit; cursor:pointer; }
.hr-filter-select:focus { outline:none; border-color:var(--hr-burgundy); }
.hr-filter-select.hr-active { border-color:var(--hr-burgundy); background:var(--hr-burgundy); color:#fff; }
.hr-filter-reset { padding:8px 14px; border:1px solid var(--hr-border); border-radius:6px; background:#fff; font-size:0.88rem; color:var(--hr-muted); cursor:pointer; }
.hr-filter-reset:hover { border-color:var(--hr-burgundy); color:var(--hr-burgundy); }

/* Status */
.hr-search-status { font-size:0.85rem; color:var(--hr-muted); min-height:20px; margin-bottom:8px; }
.hr-search-status .hr-loading { display:inline-block; }
.hr-search-status .hr-loading::after { content:'...'; animation:dots 1s steps(3, end) infinite; }
@keyframes dots { 0%, 100% { content:'.'; } 33% { content:'..'; } 66% { content:'...'; } }

/* Results Grid */
.hr-search-results { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; min-height:80px; }
.hr-search-results.hr-list-mode { grid-template-columns:1fr; }

/* Prompt / Empty */
.hr-search-prompt, .hr-search-no-results { grid-column:1/-1; text-align:center; padding:48px 24px; }
.hr-search-prompt-icon, .hr-search-no-icon { font-size:2.5rem; margin-bottom:12px; }
.hr-search-prompt p, .hr-search-no-results p { color:var(--hr-muted); }

/* Recipe Card */
.hr-search-card { display:block; text-decoration:none; color:var(--hr-text); background:#fff; border:1px solid var(--hr-border); border-radius:var(--hr-radius); overflow:hidden; transition:box-shadow 0.2s, transform 0.2s; }
.hr-search-card:hover { box-shadow:var(--hr-shadow); transform:translateY(-2px); color:var(--hr-text); }
.hr-search-card-img { padding-bottom:66%; position:relative; overflow:hidden; background:var(--hr-cream); }
.hr-search-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hr-search-card-body { padding:12px; }
.hr-search-card-body h4 { margin:0 0 8px; font-size:0.9rem; font-family:'Playfair Display', serif; color:var(--hr-burgundy); line-height:1.3; }
.hr-search-card-meta { display:flex; gap:8px; flex-wrap:wrap; font-size:0.78rem; color:var(--hr-muted); }

/* Skeleton loading */
.hr-skeleton { background:linear-gradient(90deg, #f0e8d8 25%, #e8dcc8 50%, #f0e8d8 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:var(--hr-radius); }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

@media (max-width:600px) {
    .hr-search-filters { flex-direction:column; }
    .hr-filter-select { width:100%; }
}

/* Header search bar (smaller version) */
.hr-header-search .hr-search-input { padding:8px 40px 8px 14px; font-size:0.9rem; }
.hr-header-search .hr-search-results { position:absolute; top:calc(100% + 4px); left:0; right:0; background:#fff; border:1px solid var(--hr-border); border-radius:var(--hr-radius); box-shadow:0 8px 24px rgba(0,0,0,0.12); z-index:1000; max-height:400px; overflow-y:auto; grid-template-columns:1fr; }
.hr-header-search { position:relative; }

/* ============================================================
   SEARCH TABS
   ============================================================ */
.hr-search-tabs { display:flex; gap:4px; margin-bottom:20px; border-bottom:2px solid var(--hr-border); }
.hr-search-tab { padding:12px 20px; border:none; background:none; font-size:0.95rem; font-family:inherit; color:var(--hr-muted); cursor:pointer; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.2s; }
.hr-search-tab:hover { color:var(--hr-burgundy); }
.hr-search-tab-active { color:var(--hr-burgundy); font-weight:700; border-bottom-color:var(--hr-burgundy); }

/* ============================================================
   INGREDIENT SEARCH
   ============================================================ */
.hr-ing-search-intro { background:var(--hr-cream); border:1px solid var(--hr-border); border-radius:var(--hr-radius); padding:16px 20px; margin-bottom:16px; }
.hr-ing-search-intro p { margin:0 0 6px; color:var(--hr-text); font-size:0.95rem; line-height:1.6; }
.hr-ing-search-intro p:last-child { margin-bottom:0; }
.hr-ing-example { color:var(--hr-muted); font-size:0.88rem; }

.hr-ing-textarea { width:100%; padding:14px 16px; font-size:1rem; border:2px solid var(--hr-border); border-radius:var(--hr-radius); background:#fff; color:var(--hr-text); font-family:inherit; resize:vertical; transition:border-color 0.2s; box-sizing:border-box; }
.hr-ing-textarea:focus { outline:none; border-color:var(--hr-burgundy); }

.hr-ing-options { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:12px 0; }
.hr-ing-match-mode { display:flex; flex-direction:column; gap:6px; font-size:0.88rem; color:var(--hr-text); }
.hr-ing-match-mode label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.hr-ing-match-mode input[type="radio"] { accent-color:var(--hr-burgundy); }

.hr-ing-search-btn { padding:10px 24px; background:var(--hr-burgundy); color:#fff; border:none; border-radius:6px; font-size:0.95rem; font-family:inherit; cursor:pointer; transition:background 0.2s; }
.hr-ing-search-btn:hover { background:#4e1a26; }

/* Ingredient match badge on card image */
.hr-search-card-img { position:relative; }
.hr-ing-match-badge { position:absolute; bottom:6px; left:6px; background:rgba(107,39,55,0.9); color:#fff; font-size:0.72rem; padding:3px 8px; border-radius:12px; font-weight:600; }

.hr-search-loading { grid-column:1/-1; text-align:center; padding:48px; color:var(--hr-muted); font-size:1rem; }

@media (max-width:600px) {
    .hr-search-tabs { flex-direction:column; border-bottom:none; gap:0; }
    .hr-search-tab { border-bottom:1px solid var(--hr-border); border-radius:0; text-align:left; }
    .hr-search-tab-active { background:var(--hr-cream); }
    .hr-ing-options { flex-direction:column; align-items:flex-start; }
    .hr-ing-search-btn, .hr-filter-reset { width:100%; }
}
