/* ============================================================
   PARFUMS DE FRANCE — Moteur de recherche custom
   Fichier : pdf-search.css
   À placer dans : themes/VOTRE_THEME/assets/css/
   ============================================================ */

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

/* ── Variables ── */
:root {
  --pdf-dark:    #1a1a2e;
  --pdf-gold:    #d4af37;
  --pdf-gold-lt: #f5e6a3;
  --pdf-white:   #ffffff;
  --pdf-off:     #f7f5f0;
  --pdf-border:  rgba(26,26,46,0.12);
  --pdf-shadow:  0 24px 64px rgba(10,10,20,0.22), 0 4px 16px rgba(10,10,20,0.10);
  --pdf-radius:  14px;
  --pdf-font-ui: 'DM Sans', system-ui, sans-serif;
  --pdf-font-hd: 'Cormorant Garamond', Georgia, serif;
  --pdf-dur:     0.22s;
  --pdf-ease:    cubic-bezier(.16,1,.3,1);
}

/* ── Trigger button (remplace la barre native) ── */
.pdf-search-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 30px;
  padding: 9px 18px;
  cursor: text;
  font-family: var(--pdf-font-ui);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  transition: background var(--pdf-dur), border-color var(--pdf-dur);
  min-width: 240px;
}
.pdf-search-trigger:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(212,175,55,0.45);
}
.pdf-search-trigger svg { width:15px; height:15px; opacity:.55; flex-shrink:0; }
.pdf-search-trigger .pdf-kbd {
  margin-left: auto;
  font-size: 11px;
  background: rgba(255,255,255,0.09);
  border-radius: 5px;
  padding: 2px 7px;
  color: rgba(255,255,255,0.35);
  letter-spacing: .02em;
}

/* ── Overlay backdrop ── */
.pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(8,8,18,0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 72px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--pdf-dur);
}
.pdf-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Panel ── */
.pdf-panel {
  width: 94%;
  max-width: 620px;
  background: var(--pdf-white);
  border-radius: var(--pdf-radius);
  box-shadow: var(--pdf-shadow);
  border: 1px solid rgba(212,175,55,0.15);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  transform: translateY(-12px) scale(0.975);
  transition: transform var(--pdf-dur) var(--pdf-ease);
}
.pdf-overlay.is-open .pdf-panel {
  transform: translateY(0) scale(1);
}

/* ── Input row ── */
.pdf-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--pdf-border);
  flex-shrink: 0;
}
.pdf-input-row svg { width:17px; height:17px; color:#888; flex-shrink:0; }
.pdf-input-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--pdf-font-ui);
  font-size: 15px;
  color: var(--pdf-dark);
  caret-color: var(--pdf-gold);
}
.pdf-input-row input::placeholder { color: #bbb; }
.pdf-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--pdf-border);
  border-top-color: var(--pdf-gold);
  border-radius: 50%;
  animation: pdf-spin .7s linear infinite;
  display: none;
  flex-shrink: 0;
}
.pdf-spinner.active { display: block; }
@keyframes pdf-spin { to { transform: rotate(360deg); } }
.pdf-close {
  background: none;
  border: 1px solid var(--pdf-border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  font-family: var(--pdf-font-ui);
  transition: all .15s;
}
.pdf-close:hover { border-color: var(--pdf-dark); color: var(--pdf-dark); }

/* ── Filters pills ── */
.pdf-filters {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--pdf-border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.pdf-filters::-webkit-scrollbar { display:none; }
.pdf-pill {
  flex-shrink: 0;
  font-size: 12px;
  font-family: var(--pdf-font-ui);
  font-weight: 400;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--pdf-border);
  color: #666;
  cursor: pointer;
  background: var(--pdf-white);
  transition: all .15s;
  white-space: nowrap;
}
.pdf-pill:hover { border-color: var(--pdf-dark); color: var(--pdf-dark); }
.pdf-pill.active {
  background: var(--pdf-dark);
  color: var(--pdf-gold);
  border-color: var(--pdf-dark);
}

/* ── Scrollable body ── */
.pdf-body {
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--pdf-border) transparent;
}

/* ── Section headers ── */
.pdf-section-hd {
  font-family: var(--pdf-font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #aaa;
  padding: 12px 18px 5px;
}

/* ── Brand chips ── */
.pdf-brand-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 14px;
}
.pdf-brand-chip {
  font-family: var(--pdf-font-hd);
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 8px;
  border: 1px solid var(--pdf-border);
  color: #555;
  cursor: pointer;
  background: var(--pdf-white);
  transition: all .15s;
  white-space: nowrap;
}
.pdf-brand-chip:hover {
  border-color: var(--pdf-gold);
  color: var(--pdf-dark);
  background: #fffdf5;
}

/* ── Trending items ── */
.pdf-trend {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .12s;
}
.pdf-trend:hover { background: var(--pdf-off); }
.pdf-trend-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--pdf-off);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.pdf-trend-name { font-size: 13px; color: var(--pdf-dark); font-family: var(--pdf-font-ui); }
.pdf-trend-meta { font-size: 11px; color: #aaa; font-family: var(--pdf-font-ui); }

/* ── Result items ── */
.pdf-results { padding: 4px 0; }
.pdf-result {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}
.pdf-result:hover { background: var(--pdf-off); }

.pdf-result-img {
  width: 48px; height: 48px;
  border-radius: 10px;
  object-fit: contain;
  background: var(--pdf-off);
  border: 1px solid var(--pdf-border);
  flex-shrink: 0;
}
.pdf-result-img-fallback {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--pdf-off);
  border: 1px solid var(--pdf-border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

.pdf-result-info { flex: 1; min-width: 0; }
.pdf-result-brand {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #aaa;
  font-family: var(--pdf-font-ui);
  cursor: pointer;
}
.pdf-result-brand:hover { color: var(--pdf-dark); }
.pdf-result-name {
  font-size: 13px;
  color: var(--pdf-dark);
  font-family: var(--pdf-font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-result-name mark {
  background: #fef3c7;
  color: #92400e;
  border-radius: 2px;
  padding: 0 1px;
  font-style: normal;
}

.pdf-result-price { text-align: right; flex-shrink: 0; }
.pdf-price-old {
  font-size: 11px;
  color: #bbb;
  text-decoration: line-through;
  font-family: var(--pdf-font-ui);
  display: block;
}
.pdf-price-row {
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
}
.pdf-price-new {
  font-size: 14px;
  font-weight: 500;
  color: var(--pdf-dark);
  font-family: var(--pdf-font-ui);
}
.pdf-promo-badge {
  font-size: 10px;
  background: var(--pdf-gold);
  color: var(--pdf-dark);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 500;
  font-family: var(--pdf-font-ui);
}

/* ── AI suggestion box ── */
.pdf-ai-box {
  margin: 8px 18px 12px;
  padding: 11px 15px;
  background: #fffdf5;
  border-radius: 10px;
  border-left: 2px solid var(--pdf-gold);
}
.pdf-ai-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #b8972e;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--pdf-font-ui);
}
.pdf-ai-label svg { width:12px; height:12px; }
.pdf-ai-text {
  font-size: 13px;
  color: #555;
  line-height: 1.55;
  font-family: var(--pdf-font-ui);
}
.pdf-ai-dots {
  display: inline-flex; gap: 3px; align-items: center; margin-left: 4px;
}
.pdf-ai-dots span {
  width: 4px; height: 4px;
  background: var(--pdf-gold);
  border-radius: 50%;
  animation: pdf-dot 1.2s infinite;
}
.pdf-ai-dots span:nth-child(2) { animation-delay: .2s; }
.pdf-ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pdf-dot {
  0%,80%,100% { opacity:.25; transform:scale(.75); }
  40%          { opacity:1;   transform:scale(1); }
}

/* ── Empty / error states ── */
.pdf-empty {
  padding: 28px 18px;
  text-align: center;
  font-size: 13px;
  color: #bbb;
  font-family: var(--pdf-font-ui);
}
.pdf-empty strong {
  display: block;
  font-family: var(--pdf-font-hd);
  font-size: 17px;
  color: var(--pdf-dark);
  margin-bottom: 6px;
}

.pdf-error {
  padding: 14px 18px;
  font-size: 13px;
  color: #c0392b;
  background: #fdf2f2;
  border-radius: 8px;
  margin: 8px 18px;
  font-family: var(--pdf-font-ui);
}

/* ── Footer ── */
.pdf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid var(--pdf-border);
  flex-shrink: 0;
}
.pdf-see-all {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pdf-dark);
  cursor: pointer;
  font-family: var(--pdf-font-ui);
  text-decoration: none;
  transition: color .15s;
}
.pdf-see-all:hover { color: var(--pdf-gold); }
.pdf-see-all svg { width:14px; height:14px; }
.pdf-result-count {
  font-size: 12px;
  color: #bbb;
  font-family: var(--pdf-font-ui);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .pdf-overlay { padding-top: 0; align-items: flex-end; }
  .pdf-panel {
    width: 100%; max-width: 100%;
    border-radius: var(--pdf-radius) var(--pdf-radius) 0 0;
    max-height: 90vh;
    transform: translateY(30px);
  }
  .pdf-overlay.is-open .pdf-panel { transform: translateY(0); }
  .pdf-search-trigger { min-width: 160px; }
}