/* =========================
   Tag Search (scoped CSS)
   - No global overrides
   - CSP-safe, Bootstrap-friendly
   - Honors brand gold #b08a48
   ========================= */

/* ---- Tokens / fallbacks ---- */
:root {
  --brand-gold: #b08a48;            /* fallback */
  --ts-bg: var(--fg-bg, #ffffff);
  --ts-text: var(--fg-text, var(--bs-body-color, #212529));
  --ts-muted: var(--fg-muted, var(--bs-secondary-color, #6c757d));
  --ts-border: rgba(0,0,0,.08);
  --ts-radius: .5rem;
  --ts-shadow: 0 1px 2px rgba(0,0,0,.06);
  --ts-shadow-lg: 0 2px 10px rgba(0,0,0,.08);
}

/* ---- Layout wrappers ---- */
.tagsearch__title {
  margin: 0 0 .5rem 0;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ts-text);
}

/* ✅ FIXED: Removed the outer border/box you pointed out */
.tagsearch__field {
  background: transparent; /* Was var(--ts-bg) */
  border: none;            /* Was 1px solid var(--brand-gold) */
  box-shadow: none;        /* Was var(--ts-shadow) */
  padding: 0;              /* Removed padding so it aligns perfectly */
  margin-bottom: .75rem;
}

/* Tag input — bulletproof (wins over Bootstrap) */
#tagInput,
.tagsearch__field .form-control.tagsearch__input,
.tagsearch__field input[type="text"].tagsearch__input,
.tagsearch__field input[type="search"].tagsearch__input,
.tagsearch__field .form-control,
.tagsearch__field input[type="text"],
.tagsearch__field input[type="search"],
.tagsearch__input {
  display: block;
  width: 100%;
  border: 1px solid var(--brand-gold) !important;
  border-radius: .45rem !important;
  padding: .5rem .6rem;
  font-size: .95rem;
  
  /* ✅ FIXED: Force dark text on white background (Webkit/Tablet fix) */
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important; 
  background-color: #ffffff !important;
  opacity: 1 !important; 
  
  appearance: none;
  box-shadow: none;
}

#tagInput:focus,
.tagsearch__field .form-control.tagsearch__input:focus,
.tagsearch__field input[type="text"].tagsearch__input:focus,
.tagsearch__field input[type="search"].tagsearch__input:focus,
.tagsearch__field .form-control:focus,
.tagsearch__field input[type="text"]:focus,
.tagsearch__field input[type="search"]:focus,
.tagsearch__input:focus {
  outline: none;
  border-color: var(--brand-gold) !important;
  box-shadow: 0 0 0 2px rgba(176,138,72,.18) !important;
}

#tagInput::placeholder,
.tagsearch__input::placeholder {
  color: #6c757d !important;
  -webkit-text-fill-color: #6c757d !important;
  opacity: 1 !important;
}

.tagsearch__controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .75rem;  /* more breathing room */
}

.tagsearch__controls .hub-btn,
.result-card__actions .hub-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .4rem .7rem;
  font-size: .925rem;
  line-height: 1.25;
  font-weight: 600;
  border-radius: .45rem;              /* not pill */
  border: 1px solid var(--brand-gold);
  background: #f8f9fa;
  color: var(--ts-text);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

.tagsearch__controls .hub-btn:hover,
.tagsearch__controls .hub-btn:focus-visible,
.result-card__actions .hub-btn:hover,
.result-card__actions .hub-btn:focus-visible {
  outline: none;
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 2px rgba(176,138,72,.18);
}

/* Input + button spacing */
.tagsearch__row,
.tagsearch__field .tagsearch__controls,
.tagsearch__field .d-flex {
  display: flex;
  align-items: center;
  gap: .6rem;          /* space between input and Search */
}

/* Fallback if they’re just siblings without a flex wrapper */
.tagsearch__field .form-control + .btn,
.tagsearch__field input + .btn,
.tagsearch__field .form-control + .hub-btn,
.tagsearch__field input + .hub-btn {
  margin-left: .6rem;
}

/* ---- Results ---- */
.tagsearch__results {
  background: var(--ts-bg);
  border: 1px solid var(--brand-gold);
  border-radius: var(--ts-radius);
  padding: .75rem;
  box-shadow: var(--ts-shadow);
  min-height: 3rem;
}

/* ---- Result card ---- */
.result-card {
  background: #fff;
  border: none;
  border-radius: .5rem;
  padding: .6rem .7rem;
  box-shadow: var(--ts-shadow);
  margin-bottom: .6rem;
}

/* ✅ FIXED: Makes newlines visible (Readable Recipes) */
.result-card__preview {
    white-space: pre-wrap;
    font-size: 0.9rem;
    color: #fff;
    margin-top: 0.5rem;
    line-height: 1.5;
}