/* ================================================================
   Garden Infuzions Flavor Finder v9.0.0
   Visual design from v6.1 + v7.1 architecture fixes:
   - .giff-hidden is the ONLY visibility control (no inline style)
   - Elementor strips inline style on popup render -- class-only
   - All rules use !important to survive Elementor/theme resets

   v9 Bug fixes:
   - Logo clip: overflow:hidden removed from .giff-wrap so the
     floating logo animation is not clipped. Overflow is kept on
     .giff-popup-modal (needed for scroll) and on specific inner
     elements like the progress bar strip.
   - Intro screen gets overflow:visible so the logo float has room.
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Lato:wght@300;400;600&display=swap');

/* -- HIDDEN CLASS -- sole visibility control ---------------------------------- */
.giff-hidden {
  display: none !important;
}

/* -- Popup overlay ------------------------------------------------------------ */
.giff-popup-overlay {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
.giff-popup-overlay.giff-hidden {
  display: none !important;
}

.giff-popup-modal {
  position: relative !important;
  background: #faf7f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  width: 640px !important;
  max-width: 96vw !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  animation: giffPopupIn 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
  font-family: 'Lato', sans-serif !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(45,90,39,0.2) transparent !important;
}
.giff-popup-modal::-webkit-scrollbar { width: 5px !important; }
.giff-popup-modal::-webkit-scrollbar-track { background: transparent !important; }
.giff-popup-modal::-webkit-scrollbar-thumb { background: rgba(45,90,39,0.2) !important; border-radius: 10px !important; }

@keyframes giffPopupIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* Close button */
.giff-popup-close {
  position: sticky !important;
  top: 12px !important;
  float: right !important;
  margin: 12px 12px -36px 0 !important;
  z-index: 10 !important;
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(255,255,255,0.9) !important;
  color: #666 !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  transition: all 0.2s !important;
  backdrop-filter: blur(4px) !important;
}
.giff-popup-close:hover {
  background: #fff !important;
  color: #2a2a2a !important;
  transform: scale(1.1) !important;
}

/* -- Inline quiz wrapper ------------------------------------------------------ */
/* FIX v9: overflow removed from .giff-wrap -- it was clipping the floating logo.
   The intro screen's logo floats upward 8px via animation; overflow:hidden cuts it off.
   The popup modal keeps overflow-y:auto for scrolling. Progress bar strip has its own overflow. */
.giff-wrap {
  font-family: 'Lato', sans-serif !important;
  background: #faf7f0 !important;
  color: #2a2a2a !important;
  border-radius: 16px !important;
  position: relative !important;
  /* overflow removed intentionally -- logo float animation would be clipped */
}
.giff-inline {
  max-width: 640px !important;
  margin: 40px auto !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  box-shadow: 0 8px 32px rgba(45,90,39,0.15) !important;
}

/* -- Screens ------------------------------------------------------------------ */
.giff-screen {
  padding: 48px 40px !important;
  min-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  background: #faf7f0 !important;
  animation: giffScreenIn 0.3s ease !important;
  border-radius: 16px !important;
}
.giff-screen.giff-hidden {
  display: none !important;
}
@keyframes giffScreenIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -- Intro -------------------------------------------------------------------- */
.giff-screen-intro {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(160deg, #faf7f0 0%, #f5efe0 100%) !important;
  /* FIX v9: overflow visible so logo float animation has room above */
  overflow: visible !important;
}

.giff-logo-wrap {
  display: flex !important;
  justify-content: center !important;
  /* Extra padding-top gives the float animation headroom above the card edge */
  padding-top: 12px !important;
  margin-bottom: 16px !important;
  animation: giffFloat 3s ease-in-out infinite !important;
}
@keyframes giffFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.giff-logo {
  width: 80px !important; height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
}

.giff-intro-title {
  margin: 0 0 12px !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #2d5a27 !important;
  line-height: 1.2 !important;
}

.giff-intro-sub {
  margin: 0 0 20px !important;
  font-size: 1rem !important;
  color: #666 !important;
  max-width: 420px !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

.giff-intro-features {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-bottom: 28px !important;
  flex-wrap: wrap !important;
}
.giff-intro-features span {
  font-size: 0.8rem !important;
  color: #c9a84c !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* -- Progress bar ------------------------------------------------------------- */
.giff-progress-strip {
  height: 5px !important;
  background: rgba(45,90,39,0.1) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border-radius: 5px !important;
}
.giff-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #2d5a27, #c9a84c) !important;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
  width: 0% !important;
  display: block !important;
}
/* Wellness track gradient override */
.giff-wrap.giff-wellness .giff-progress-fill,
.giff-popup-modal.giff-wellness .giff-progress-fill {
  background: linear-gradient(90deg, #2a7a6f, #c9a84c) !important;
}

.giff-progress-meta {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding-top: 8px !important;
}
.giff-step-label {
  margin: 0 !important;
  font-size: 0.78rem !important;
  color: #666 !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.giff-track-badge {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.giff-track-badge.giff-culinary {
  background: rgba(45,90,39,0.1) !important;
  color: #2d5a27 !important;
}
.giff-track-badge.giff-wellness {
  background: rgba(42,122,111,0.12) !important;
  color: #2a7a6f !important;
}
.giff-track-badge.giff-hidden {
  display: none !important;
}

/* -- Question text ------------------------------------------------------------ */
.giff-question-text {
  margin: 0 0 6px !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  color: #2d5a27 !important;
  line-height: 1.4 !important;
}
.giff-wrap.giff-wellness .giff-question-text,
.giff-popup-modal.giff-wellness .giff-question-text {
  color: #2a7a6f !important;
}

.giff-question-sub {
  margin: 0 0 18px !important;
  font-size: 0.85rem !important;
  color: #888 !important;
  font-style: italic !important;
}

/* -- Options grid ------------------------------------------------------------- */
.giff-options {
  display: grid !important;
  gap: 12px !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.giff-options-2 { grid-template-columns: 1fr 1fr !important; }
.giff-options-6 { grid-template-columns: 1fr 1fr 1fr !important; }

.giff-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 16px !important;
  background: #ffffff !important;
  border: 2px solid rgba(45,90,39,0.15) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  gap: 4px !important;
  width: 100% !important;
  font-family: 'Lato', sans-serif !important;
  color: #2a2a2a !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
.giff-option:hover {
  border-color: #4a7c42 !important;
  background: rgba(74,124,66,0.05) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(45,90,39,0.1) !important;
}
.giff-wrap.giff-wellness .giff-option:hover,
.giff-popup-modal.giff-wellness .giff-option:hover {
  border-color: #3a9e90 !important;
  background: rgba(42,122,111,0.05) !important;
}

.giff-option.giff-selected {
  border-color: #2d5a27 !important;
  background: rgba(45,90,39,0.06) !important;
  box-shadow: 0 0 0 1px #2d5a27 !important;
}
.giff-option.giff-selected::after {
  content: '\2713' !important;
  position: absolute !important;
  top: 10px !important; right: 12px !important;
  color: #2d5a27 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}
.giff-wrap.giff-wellness .giff-option.giff-selected,
.giff-popup-modal.giff-wellness .giff-option.giff-selected {
  border-color: #2a7a6f !important;
  background: rgba(42,122,111,0.06) !important;
  box-shadow: 0 0 0 1px #2a7a6f !important;
}
.giff-wrap.giff-wellness .giff-option.giff-selected::after,
.giff-popup-modal.giff-wellness .giff-option.giff-selected::after {
  color: #2a7a6f !important;
}

.giff-option-emoji {
  font-size: 1.5rem !important;
  display: block !important;
  margin-bottom: 6px !important;
  line-height: 1 !important;
}
.giff-option-label {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #2a2a2a !important;
}
.giff-option-desc {
  display: block !important;
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: #666 !important;
  font-weight: 400 !important;
}

/* -- Footer / nav buttons ----------------------------------------------------- */
.giff-q-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 20px !important;
  gap: 12px !important;
}

.giff-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 14px 28px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.giff-btn-primary {
  background: linear-gradient(135deg, #2d5a27, #4a7c42) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(45,90,39,0.25) !important;
  flex: 1 !important;
}
.giff-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(45,90,39,0.4) !important;
  color: #ffffff !important;
}
.giff-btn-primary:disabled,
.giff-btn-primary[disabled] {
  background: #ccc !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  color: #fff !important;
}
.giff-wrap.giff-wellness .giff-btn-primary,
.giff-popup-modal.giff-wellness .giff-btn-primary {
  background: linear-gradient(135deg, #2a7a6f, #3a9e90) !important;
  box-shadow: 0 4px 16px rgba(42,122,111,0.25) !important;
}

.giff-btn-start {
  padding: 16px 40px !important;
  font-size: 1rem !important;
  flex: 0 !important;
  box-shadow: 0 4px 20px rgba(45,90,39,0.3) !important;
}

.giff-btn-back {
  background: transparent !important;
  color: #666 !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
  flex: 0 !important;
}
.giff-btn-back:hover {
  border-color: #2d5a27 !important;
  color: #2d5a27 !important;
}
.giff-btn-back:disabled,
.giff-btn-back[disabled] {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

.giff-btn-ghost {
  background: transparent !important;
  color: #666 !important;
  border: 2px solid rgba(0,0,0,0.1) !important;
}
.giff-btn-ghost:hover {
  border-color: #2d5a27 !important;
  color: #2d5a27 !important;
}

.giff-btn-gold {
  background: linear-gradient(135deg, #c9a84c, #e8c96a) !important;
  color: #2d5a27 !important;
  box-shadow: 0 4px 20px rgba(201,168,76,0.35) !important;
}
.giff-btn-gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(201,168,76,0.45) !important;
  color: #2d5a27 !important;
}

/* -- Results screen ----------------------------------------------------------- */
.giff-screen-results {
  background: linear-gradient(160deg, #faf7f0 0%, #f5efe0 100%) !important;
  text-align: center !important;
  align-items: center !important;
}

.giff-results-title {
  margin: 0 0 8px !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: #2d5a27 !important;
}
.giff-results-sub {
  margin: 0 0 20px !important;
  font-size: 0.95rem !important;
  color: #666 !important;
  font-weight: 300 !important;
}

/* Top result card */
.giff-top-result {
  width: 100% !important;
  max-width: 400px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 2px solid rgba(201,168,76,0.4) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 20px rgba(45,90,39,0.1) !important;
}
.giff-top-result-img {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  display: block !important;
}
.giff-top-result-img-placeholder {
  width: 100% !important;
  padding-top: 56.25% !important;
  background: linear-gradient(135deg, #e8c96a 0%, #c9a84c 100%) !important;
  display: block !important;
}
.giff-top-result-body {
  padding: 16px 20px 20px !important;
  text-align: center !important;
}
.giff-top-result-badge {
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #c9a84c !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.giff-top-result-name {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.4rem !important;
  color: #2d5a27 !important;
  margin: 0 0 12px !important;
  display: block !important;
}
.giff-result-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.giff-tag {
  background: rgba(45,90,39,0.08) !important;
  color: #2d5a27 !important;
  border: 1px solid rgba(45,90,39,0.2) !important;
  border-radius: 50px !important;
  padding: 4px 12px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}
.giff-tag.giff-wellness-tag {
  background: rgba(42,122,111,0.08) !important;
  color: #2a7a6f !important;
  border-color: rgba(42,122,111,0.2) !important;
}

/* Also-love runners-up */
.giff-also-love {
  width: 100% !important;
  max-width: 400px !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  padding-top: 16px !important;
  margin-bottom: 20px !important;
}
.giff-also-love p {
  font-size: 0.82rem !important;
  color: #666 !important;
  margin: 0 0 10px !important;
  font-style: italic !important;
}
.giff-also-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
}
.giff-also-tag {
  background: #ffffff !important;
  border: 1px solid rgba(45,90,39,0.2) !important;
  color: #4a7c42 !important;
  border-radius: 50px !important;
  padding: 7px 16px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  display: inline-block !important;
}
.giff-also-tag:hover {
  background: #2d5a27 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.giff-also-tag.giff-wellness-also {
  border-color: rgba(42,122,111,0.25) !important;
  color: #2a7a6f !important;
}
.giff-also-tag.giff-wellness-also:hover {
  background: #2a7a6f !important;
  color: #ffffff !important;
}

.giff-results-footer {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 400px !important;
}
.giff-results-footer .giff-btn {
  flex: 1 !important;
}

/* -- Responsive --------------------------------------------------------------- */
@media (max-width: 680px) {
  .giff-screen { padding: 32px 20px 28px !important; }
  .giff-options-6 { grid-template-columns: 1fr 1fr !important; }
  .giff-intro-title { font-size: 1.6rem !important; }
  .giff-question-text { font-size: 1.15rem !important; }
  .giff-results-title { font-size: 1.5rem !important; }
}

@media (max-width: 480px) {
  .giff-popup-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .giff-popup-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .giff-options-2,
  .giff-options-6 { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  .giff-options-6 { grid-template-columns: 1fr !important; }
}

/* -- Body scroll lock --------------------------------------------------------- */
body.giff-popup-open { overflow: hidden !important; }