/* ================================================================
   Food Recipe Plugin — Front-end Styles
   Aesthetic: warm, editorial, magazine-quality
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --frp-cream:   #fdf6ee;
  --frp-warm:    #f5e6d0;
  --frp-terr:    #c0613a;
  --frp-terr2:   #e07a55;
  --frp-gold:    #d4a843;
  --frp-green:   #4a7c59;
  --frp-dark:    #2c1810;
  --frp-mid:     #6b4a3a;
  --frp-light:   #a08070;
  --frp-shadow:  0 4px 24px rgba(44,24,16,.10);
  --frp-radius:  12px;
  --frp-font:    'DM Sans', sans-serif;
  --frp-serif:   'Playfair Display', serif;
}

/* ---------------------------------------------------------------
   Recipe Card
--------------------------------------------------------------- */
.frp-recipe-card {
  font-family: var(--frp-font);
  color: var(--frp-dark);
  background: var(--frp-cream);
  border-radius: var(--frp-radius);
  overflow: hidden;
  margin: 2rem 0;
  box-shadow: var(--frp-shadow);
}

/* Hero Image */
.frp-hero { position:relative; overflow:hidden; max-height:480px; }
.frp-hero-img { width:100%; height:480px; object-fit:cover; display:block; }
.frp-hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 50%, rgba(44,24,16,.45));
}

/* Action Bar */
.frp-action-bar {
  display:flex; align-items:center; gap:1.5rem;
  padding:1rem 1.5rem;
  background: var(--frp-warm);
  border-bottom: 1px solid rgba(192,97,58,.15);
}

/* Buttons */
.frp-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.1rem;
  border:2px solid var(--frp-terr);
  border-radius:999px;
  background:transparent;
  color:var(--frp-terr);
  font-family:var(--frp-font);
  font-weight:500;
  font-size:.85rem;
  cursor:pointer;
  transition:all .2s;
}
.frp-btn:hover,
.frp-btn.saved {
  background:var(--frp-terr);
  color:#fff;
}
.frp-save-count {
  background:rgba(0,0,0,.12);
  border-radius:999px;
  padding:1px 6px;
  font-size:.75rem;
}

/* Stars display */
.frp-rating-wrap { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.frp-stars-display .frp-s { font-size:1.1rem; }
.frp-s-full  { color:var(--frp-gold); }
.frp-s-half  { color:var(--frp-gold); opacity:.6; }
.frp-s-empty { color:#d0c0b0; }
.frp-rating-text { font-size:.85rem; color:var(--frp-mid); }

/* Quick Stats */
.frp-quick-stats {
  display:flex; flex-wrap:wrap; gap:.75rem;
  padding:1.2rem 1.5rem;
  background:#fff;
  border-bottom: 1px solid var(--frp-warm);
}
.frp-stat {
  display:flex; flex-direction:column; align-items:center;
  gap:.1rem;
  min-width:70px;
  background:var(--frp-cream);
  border-radius:10px;
  padding:.6rem 1rem;
  font-size:.8rem;
  color:var(--frp-mid);
}
.frp-stat strong { font-size:1rem; color:var(--frp-dark); font-weight:600; }
.frp-stat-icon { font-size:1.1rem; }
.frp-difficulty.frp-diff-easy   strong { color:var(--frp-green); }
.frp-difficulty.frp-diff-medium strong { color:var(--frp-gold); }
.frp-difficulty.frp-diff-hard   strong { color:var(--frp-terr); }

/* Sections */
.frp-section { padding:1.5rem; border-bottom:1px solid var(--frp-warm); }
.frp-section:last-child { border-bottom:none; }
.frp-section-title {
  font-family:var(--frp-serif);
  font-size:1.2rem;
  color:var(--frp-dark);
  margin:0 0 1rem;
}

/* Ingredients */
.frp-ingredient-list {
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.5rem;
}
.frp-ingredient-list li {
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem;
  background:#fff;
  border-radius:6px;
  font-size:.88rem;
  cursor:pointer;
  transition:background .15s;
}
.frp-ingredient-list li:hover { background:var(--frp-warm); }
.frp-ingredient-list li.checked { text-decoration:line-through; color:var(--frp-light); }
.frp-check { font-size:1rem; color:var(--frp-terr); }
.frp-ingredient-list li.checked .frp-check::before { content:'☑'; }

/* Instructions */
.frp-step-list { list-style:none; padding:0; margin:0; counter-reset:step; }
.frp-step-list li {
  position:relative;
  padding:.9rem 1rem .9rem 3.2rem;
  margin-bottom:.6rem;
  background:#fff;
  border-radius:8px;
  font-size:.9rem;
  line-height:1.6;
  counter-increment:step;
}
.frp-step-list li::before {
  content:counter(step);
  position:absolute; left:.75rem; top:.9rem;
  width:1.7rem; height:1.7rem;
  background:var(--frp-terr);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700;
}

/* Notes */
.frp-notes p {
  background: linear-gradient(135deg,#fff9f0,#fef3e2);
  border-left:4px solid var(--frp-gold);
  padding:1rem 1.2rem;
  border-radius:0 8px 8px 0;
  font-style:italic;
  font-size:.9rem;
  margin:0;
}

/* Rating */
.frp-rate-section { background:var(--frp-warm); }
.frp-star-rater {
  display:flex; gap:.25rem;
}
.frp-star-rater .frp-star {
  background:none; border:none;
  font-size:1.8rem;
  color:#d0c0b0;
  cursor:pointer;
  transition:color .15s, transform .12s;
  padding:0;
}
.frp-star-rater .frp-star:hover,
.frp-star-rater .frp-star.active,
.frp-star-rater .frp-star.hovered { color:var(--frp-gold); transform:scale(1.15); }
.frp-rate-msg { font-size:.85rem; color:var(--frp-terr); margin:.5rem 0 0; min-height:1em; }

/* Video */
.frp-video-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; }
.frp-video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ---------------------------------------------------------------
   Recipe Grid
--------------------------------------------------------------- */
.frp-recipe-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.5rem;
  margin:2rem 0;
}
.frp-grid-item {
  background:#fff;
  border-radius:var(--frp-radius);
  overflow:hidden;
  box-shadow:var(--frp-shadow);
  font-family:var(--frp-font);
  transition:transform .2s, box-shadow .2s;
}
.frp-grid-item:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(44,24,16,.14); }
.frp-grid-thumb { display:block; position:relative; overflow:hidden; }
.frp-thumb-img  { width:100%; height:200px; object-fit:cover; display:block; transition:transform .3s; }
.frp-grid-item:hover .frp-thumb-img { transform:scale(1.04); }
.frp-badge {
  position:absolute; top:.6rem; right:.6rem;
  padding:.25rem .65rem;
  border-radius:999px;
  font-size:.72rem; font-weight:600;
  background:rgba(255,255,255,.9);
  color:var(--frp-mid);
}
.frp-diff-easy   { color:var(--frp-green)!important; }
.frp-diff-medium { color:var(--frp-gold)!important; }
.frp-diff-hard   { color:var(--frp-terr)!important; }
.frp-grid-body { padding:1rem; }
.frp-grid-body h4 { margin:0 0 .4rem; font-family:var(--frp-serif); font-size:1rem; }
.frp-grid-body h4 a { color:var(--frp-dark); text-decoration:none; }
.frp-grid-body h4 a:hover { color:var(--frp-terr); }
.frp-grid-meta { display:flex; gap:.5rem; font-size:.8rem; color:var(--frp-light); margin-bottom:.6rem; }
.frp-grid-actions { display:flex; align-items:center; gap:.5rem; }
.frp-mini-stars .frp-s { font-size:.85rem; }
.frp-mini-stars small { color:var(--frp-light); font-size:.75rem; }

/* ---------------------------------------------------------------
   Widget
--------------------------------------------------------------- */
.frp-widget-wrap { display:flex; flex-direction:column; gap:.75rem; }
.frp-layout-grid { flex-direction:row; flex-wrap:wrap; }
.frp-layout-grid .frp-widget-item { flex:1 1 calc(50% - .4rem); }

.frp-widget-item {
  display:flex; gap:.75rem;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(44,24,16,.07);
  font-family:var(--frp-font);
}
.frp-layout-grid .frp-widget-item { flex-direction:column; }

.frp-widget-thumb { flex-shrink:0; }
.frp-wt-img { width:80px; height:80px; object-fit:cover; display:block; }
.frp-layout-grid .frp-wt-img { width:100%; height:110px; }

.frp-widget-body { padding:.6rem .6rem .6rem 0; flex:1; display:flex; flex-direction:column; gap:.3rem; }
.frp-layout-grid .frp-widget-body { padding:.6rem; }
.frp-widget-title { font-family:var(--frp-serif); font-size:.92rem; font-weight:700; color:var(--frp-dark); text-decoration:none; line-height:1.3; }
.frp-widget-title:hover { color:var(--frp-terr); }
.frp-widget-meta { display:flex; gap:.4rem; font-size:.75rem; color:var(--frp-light); }
.frp-widget-actions { display:flex; align-items:center; gap:.35rem; margin-top:auto; }
.frp-widget-stars .frp-s { font-size:.8rem; }
.frp-widget-rater .frp-star { font-size:1.1rem; }
.frp-widget-actions .frp-save-btn { padding:.25rem .55rem; font-size:.8rem; }

/* Saved panel */
.frp-saved-panel { margin-top:1rem; padding:1rem; background:var(--frp-warm); border-radius:var(--frp-radius); }
.frp-saved-panel h4 { font-family:var(--frp-serif); font-size:.95rem; margin:0 0 .6rem; color:var(--frp-dark); }
.frp-saved-list { display:flex; flex-direction:column; gap:.4rem; }
.frp-saved-entry { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; }
.frp-saved-entry a { color:var(--frp-terr); text-decoration:none; }
.frp-saved-entry a:hover { text-decoration:underline; }
.frp-loading { color:var(--frp-light); font-size:.82rem; }

/* Toast */
.frp-toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  background:var(--frp-dark);
  color:#fff;
  padding:.6rem 1.2rem;
  border-radius:999px;
  font-family:var(--frp-font);
  font-size:.88rem;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  animation:frp-slide-in .25s ease forwards;
}
@keyframes frp-slide-in {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}