/* ============================================================
   GRANNY'S FRIENDS — Frontend Styles
   Brand: Gold #FDB439 | Dark #1F2933 | Brown #8B5A2B
   ============================================================ */

:root {
  --gsf-gold:    #FDB439;
  --gsf-gold-dk: #E47B02;
  --gsf-dark:    #1F2933;
  --gsf-dark-2:  #3E4C59;
  --gsf-mid:     #52606D;
  --gsf-muted:   #7B8794;
  --gsf-light:   #F3F4F7;
  --gsf-cream:   #FFFAF5;
  --gsf-white:   #FFFFFF;
  --gsf-border:  #E8E0D8;
  --gsf-radius:  12px;
  --gsf-shadow:  0 4px 16px rgba(0,0,0,0.08);
  --gsf-font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.gsf-wrap { max-width:800px; margin:0 auto; padding:24px 16px; font-family:var(--gsf-font); }

/* ── Section titles ──────────────────────────────────────── */
.gsf-section-title {
  font-size:22px; font-weight:700; color:var(--gsf-dark);
  margin:0 0 8px; font-family:Georgia,serif;
  display:flex; align-items:center; gap:10px;
}
.gsf-section-desc { color:var(--gsf-muted); font-size:14px; margin:0 0 24px; line-height:1.6; }
.gsf-results-count { font-size:14px; color:var(--gsf-mid); margin:0 0 16px; }

/* ── Count badge ─────────────────────────────────────────── */
.gsf-count-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--gsf-gold); color:var(--gsf-dark);
  font-size:13px; font-weight:700; border-radius:50px;
  padding:2px 10px; min-width:24px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.gsf-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 18px; border-radius:50px; font-size:14px;
  font-weight:600; cursor:pointer; border:2px solid transparent;
  text-decoration:none; transition:all 0.15s; font-family:var(--gsf-font);
  white-space:nowrap;
}
.gsf-btn--primary  { background:var(--gsf-gold); color:var(--gsf-dark); border-color:var(--gsf-gold); }
.gsf-btn--primary:hover { background:var(--gsf-gold-dk); border-color:var(--gsf-gold-dk); color:#fff; }
.gsf-btn--secondary { background:var(--gsf-white); color:var(--gsf-dark-2); border-color:var(--gsf-border); }
.gsf-btn--secondary:hover { border-color:var(--gsf-gold); color:var(--gsf-dark); }
.gsf-btn--accept  { background:#2E7D32; color:#fff; border-color:#2E7D32; }
.gsf-btn--accept:hover { background:#1B5E20; }
.gsf-btn--decline { background:#C62828; color:#fff; border-color:#C62828; }
.gsf-btn--decline:hover { background:#B71C1C; }
.gsf-btn--muted   { background:none; color:var(--gsf-muted); border-color:var(--gsf-border); font-size:13px; }
.gsf-btn--muted:hover { color:var(--gsf-dark); border-color:var(--gsf-mid); }
.gsf-btn:disabled { opacity:0.45; cursor:not-allowed; }

/* ── Notices ─────────────────────────────────────────────── */
.gsf-notice {
  padding:14px 18px; border-radius:var(--gsf-radius);
  font-size:14px; margin:16px 0; line-height:1.5;
}
.gsf-notice--success { background:#E8F5E9; color:#1B5E20; border-left:4px solid #2E7D32; }
.gsf-notice--error   { background:#FFEBEE; color:#B71C1C; border-left:4px solid #C62828; }
.gsf-notice--warn    { background:#FFF8E1; color:#E65100; border-left:4px solid #FDB439; }
.gsf-notice--info    { background:var(--gsf-light); color:var(--gsf-dark-2); border-left:4px solid var(--gsf-muted); }
.gsf-notice a { color:inherit; font-weight:600; }

/* ── Search form ─────────────────────────────────────────── */
.gsf-form { background:var(--gsf-white); border:1px solid var(--gsf-border); border-radius:var(--gsf-radius); padding:24px; margin-bottom:24px; box-shadow:var(--gsf-shadow); }

.gsf-mode-toggle { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.gsf-mode-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:50px; cursor:pointer;
  border:2px solid var(--gsf-border); font-size:13px; font-weight:600;
  color:var(--gsf-mid); background:var(--gsf-white); transition:all 0.15s;
}
.gsf-mode-btn input[type="radio"] { display:none; }
.gsf-mode-btn.active,
.gsf-mode-btn:has(input:checked) { background:var(--gsf-gold); border-color:var(--gsf-gold); color:var(--gsf-dark); }

.gsf-field-row { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.gsf-field { flex:1; min-width:200px; }
.gsf-field label { display:block; font-size:13px; font-weight:600; color:var(--gsf-dark-2); margin-bottom:6px; }
.gsf-field input {
  width:100%; padding:10px 14px; border:1px solid var(--gsf-border);
  border-radius:8px; font-size:14px; color:var(--gsf-dark);
  box-sizing:border-box; transition:border-color 0.15s, box-shadow 0.15s;
  font-family:var(--gsf-font);
}
.gsf-field input:focus { border-color:var(--gsf-gold); box-shadow:0 0 0 3px rgba(253,180,57,0.2); outline:none; }

/* ── User list & cards ───────────────────────────────────── */
.gsf-user-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }

.gsf-user-card {
  display:flex; align-items:center; gap:14px;
  background:var(--gsf-white); border:1px solid var(--gsf-border);
  border-radius:var(--gsf-radius); padding:16px 20px;
  box-shadow:var(--gsf-shadow); transition:border-color 0.15s;
}
.gsf-user-card:hover { border-color:var(--gsf-gold); }
.gsf-user-card--muted { opacity:0.8; }

.gsf-user-card__avatar {
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--gsf-dark), var(--gsf-dark-2));
  color:var(--gsf-gold); font-size:16px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.gsf-user-card__info { flex:1; min-width:0; }
.gsf-user-card__info strong { display:block; font-size:15px; color:var(--gsf-dark); }
.gsf-user-card__info span  { display:block; font-size:13px; color:var(--gsf-muted); margin-top:2px; }
.gsf-user-card__info small { display:block; font-size:12px; color:var(--gsf-muted); margin-top:3px; }

.gsf-request-actions { display:flex; gap:8px; flex-wrap:wrap; }
.gsf-friend-actions  { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Friends header row ──────────────────────────────────── */
.gsf-friends-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:12px;
}

/* ── Empty state ─────────────────────────────────────────── */
.gsf-empty-state {
  text-align:center; padding:48px 24px;
  background:var(--gsf-white); border:1px solid var(--gsf-border);
  border-radius:var(--gsf-radius); box-shadow:var(--gsf-shadow);
}
.gsf-empty-state__icon { font-size:48px; display:block; margin-bottom:16px; }
.gsf-empty-state h3 { font-size:18px; color:var(--gsf-dark-2); margin:0 0 8px; }
.gsf-empty-state p  { color:var(--gsf-muted); font-size:14px; margin:0 0 20px; }

/* ── Cookbook ─────────────────────────────────────────────── */
.gsf-cookbook-header { margin-bottom:24px; }
.gsf-back-link { font-size:13px; color:var(--gsf-muted); text-decoration:none; display:inline-block; margin-bottom:12px; }
.gsf-back-link:hover { color:var(--gsf-gold-dk); }

.gsf-cookbook-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }

.gsf-recipe-card {
  background:var(--gsf-white); border:1px solid var(--gsf-border);
  border-radius:var(--gsf-radius); padding:18px 20px;
  box-shadow:var(--gsf-shadow); transition:border-color 0.15s;
  position:relative;
}
.gsf-recipe-card:hover { border-color:var(--gsf-gold); }
.gsf-recipe-card__title { display:block; font-size:15px; font-weight:700; color:var(--gsf-dark); text-decoration:none; margin-bottom:8px; line-height:1.4; }
.gsf-recipe-card__title:hover { color:var(--gsf-gold-dk); }
.gsf-recipe-card__meta   { font-size:12px; color:var(--gsf-muted); }
.gsf-recipe-card__cuisine { font-size:12px; color:var(--gsf-mid); margin-top:4px; font-style:italic; }

.gsf-visibility-badge {
  display:inline-block; font-size:11px; font-weight:600;
  background:var(--gsf-cream); color:var(--gsf-mid);
  border:1px solid var(--gsf-border); border-radius:50px;
  padding:2px 8px; margin-bottom:8px;
}

/* ── Results ─────────────────────────────────────────────── */
.gsf-results { margin-top:24px; }
.gsf-results__title { font-size:16px; color:var(--gsf-mid); margin:0 0 12px; font-weight:600; }

/* ── Toast ───────────────────────────────────────────────── */
.gsf-toast {
  position:fixed; bottom:28px; right:28px;
  background:var(--gsf-dark); color:#fff;
  padding:12px 22px; border-radius:50px; font-size:14px;
  font-weight:600; z-index:99999;
  box-shadow:0 6px 24px rgba(0,0,0,0.25);
  border-left:4px solid var(--gsf-gold);
  display:none; animation:gsf-slide-up 0.25s ease;
}
.gsf-toast--error   { border-left-color:#C62828; }
.gsf-toast--success { border-left-color:#2E7D32; }
@keyframes gsf-slide-up {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:600px) {
  .gsf-user-card { flex-wrap:wrap; }
  .gsf-friend-actions, .gsf-request-actions { width:100%; }
  .gsf-cookbook-grid { grid-template-columns:1fr; }
  .gsf-field-row { flex-direction:column; }
}

/* =============================================================
   COOKBOOK / FAVORITES TABS  (added v1.1.0)
   ============================================================= */

.gsf-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e8e0d8;
    margin-bottom: 20px;
}
.gsf-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    color: #52606D;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.gsf-tab:hover {
    color: #1F2933;
    border-bottom-color: #e8e0d8;
}
.gsf-tab--active {
    color: #1F2933;
    border-bottom-color: #FDB439;
}