/**
 * QwikGlam — Services Page CSS Additions  v4.0
 * File: assets/css/qg-services-additions.css
 *
 * Include AFTER the existing qg-services.css.
 * Adds every new component introduced in the v4.0 audit:
 *
 *   01. Category bar — SVG icon styles
 *   02. Occasion quick-filter bar
 *   03. Urgency strip — loyalty badge + SVG icons
 *   04. Controls — search icon wrap, price filter, mobile FAB
 *   05. Surge banner (styled tooltip, replaces alert)
 *   06. Recently Viewed row
 *   07. Service card upgrades
 *       (wishlist heart, artist avatar, points badge,
 *        price tags, EMI badge, skeleton loaders)
 *   08. Booking modal upgrades
 *       (bottom-sheet, topbar, availability, date/time,
 *        what's included, EMI, pair-with, cancel policy)
 *   09. Artist Spotlight section
 *   10. Safety & Hygiene section
 *   11. Gift a Service section
 *   12. FAQ Accordion
 *   13. Testimonial card upgrades (avatar, verified, date)
 *   14. Shared utilities & responsive additions
 */


/* ╔══════════════════════════════════════════════════════════════╗
   ║  01 · CATEGORY BAR — SVG ICON STYLES                        ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-cat-icon {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  flex-shrink: 0; vertical-align: -2px;
  margin-right: 5px;
  transition: stroke .3s;
}
.qg-category-btn {
  display: inline-flex;
  align-items: center;
}
.qg-category-btn.active .qg-cat-icon { stroke: #fff; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  02 · OCCASION QUICK-FILTER BAR                             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-occasion-bar {
  background: #FFFBFD;
  border-bottom: 1px solid rgba(201,168,108,.1);
  padding: .6rem 0;
}
.qg-occasion-inner {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 0 2rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0, #000 1.5rem, #000 calc(100% - 1.5rem), transparent 100%
  );
}
.qg-occasion-inner::-webkit-scrollbar { display: none; }

.qg-occasion-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(90,46,72,.4);
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: .3rem;
}

.qg-occasion-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .44rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(201,168,108,.22);
  background: rgba(255,255,255,.9);
  color: #7A5030;
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: all .32s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 1px 6px rgba(42,14,34,.05);
}
.qg-occasion-btn svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  flex-shrink: 0;
}
.qg-occasion-btn:hover {
  background: #fff;
  border-color: rgba(201,168,108,.5);
  color: #B8924A;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(201,168,108,.18);
}
.qg-occasion-btn.active {
  background: linear-gradient(135deg, #C9A86C, #B8924A);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 18px rgba(201,168,108,.42);
}
.qg-occasion-btn.active svg { stroke: #fff; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  03 · URGENCY STRIP — LOYALTY BADGE + SVG ICONS             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.qg-urgency-badge svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none;
  flex-shrink: 0;
}
/* Gold loyalty pill */
.qg-urgency-badge--loyalty {
  background: linear-gradient(135deg,
    rgba(201,168,108,.14), rgba(184,146,74,.1));
  border-color: rgba(201,168,108,.38);
  color: #7A5030;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  04 · CONTROLS — SEARCH ICON WRAP · PRICE FILTER · FAB      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Search wrapper — icon inside input */
.qg-search-wrap {
  position: relative;
  min-width: 260px;
  flex: 1;
}
.qg-search-icon {
  position: absolute;
  left: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: rgba(90,46,72,.38);
  fill: none;
  pointer-events: none;
}
.qg-search-wrap input {
  padding-left: 2.8rem !important;
  width: 100%;
}

/* Price filter */
.qg-price-filter {
  position: relative;
}
.qg-price-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .88rem 1.25rem;
  border-radius: 14px;
  border: 1.5px solid rgba(212,84,122,.22);
  background: #fff;
  color: #5A2E48;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .3s ease;
  box-shadow: 0 2px 12px rgba(42,14,34,.05);
}
.qg-price-btn svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
}
.qg-price-btn:hover {
  border-color: rgba(212,84,122,.48);
  box-shadow: 0 4px 18px rgba(212,84,122,.12);
}

/* Price dropdown panel */
.qg-price-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 300;
  background: #fff;
  border: 1.5px solid rgba(212,84,122,.18);
  border-radius: 16px;
  padding: 1.25rem;
  min-width: 220px;
  box-shadow: 0 12px 40px rgba(42,14,34,.14);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.qg-price-dropdown.is-open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.qg-price-label {
  display: block;
  font-size: .83rem;
  font-weight: 700;
  color: #5A2E48;
  margin-bottom: .75rem;
}
input[type="range"]#qgPriceRange {
  width: 100%;
  accent-color: #D4547A;
  cursor: pointer;
  /* Override controls-input styles */
  min-width: unset;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.qg-price-chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .85rem;
}
.qg-price-chip {
  padding: .3rem .7rem;
  border-radius: 9999px;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid rgba(212,84,122,.2);
  background: rgba(253,246,248,.8);
  color: #D4547A;
  cursor: pointer;
  transition: all .25s;
}
.qg-price-chip:hover,
.qg-price-chip.active {
  background: linear-gradient(135deg, #B03060, #E07AA4);
  border-color: transparent;
  color: #fff;
}

/* Mobile floating cart FAB */
.qg-cart-fab {
  display: none;
  position: fixed;
  bottom: 80px; right: 18px;
  z-index: 900;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B03060, #E07AA4);
  color: #fff;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(176,48,96,.45);
  transition: transform .3s, box-shadow .3s;
}
.qg-cart-fab svg {
  width: 22px; height: 22px;
  stroke: #fff; fill: none;
}
.qg-fab-count {
  position: absolute;
  top: -4px; right: -4px;
  background: #fff;
  color: #B03060;
  border-radius: 9999px;
  min-width: 20px; height: 20px;
  font-size: .7rem; font-weight: 800;
  display: grid; place-items: center;
  padding: 0 4px;
  border: 2px solid #B03060;
  line-height: 1;
}
.qg-cart-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 40px rgba(176,48,96,.58);
}
@media (max-width: 768px) {
  .qg-cart-fab { display: flex; }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  05 · SURGE BANNER — STYLED (REPLACES alert())              ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-surge-banner {
  border-radius: 12px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg,
    rgba(201,168,108,.12), rgba(184,146,74,.08));
  border: 1px solid rgba(201,168,108,.35);
  position: relative;
  overflow: visible;
}
.qg-surge-banner-inner {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.25rem;
  font-size: .84rem;
  font-weight: 600;
  color: #7A5030;
}
.qg-surge-banner-inner svg {
  width: 16px; height: 16px;
  stroke: #C9A86C; fill: none;
  flex-shrink: 0;
}

/* "What is this?" button */
.qg-surge-info-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(201,168,108,.4);
  color: #B8924A;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .25s;
}
.qg-surge-info-btn:hover {
  background: rgba(201,168,108,.15);
  border-color: rgba(201,168,108,.6);
}

/* Tooltip panel */
.qg-surge-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 500;
  background: #fff;
  border: 1.5px solid rgba(201,168,108,.22);
  border-radius: 14px;
  padding: 1.15rem 1.25rem 1rem;
  max-width: 320px;
  width: 90vw;
  box-shadow: 0 12px 36px rgba(42,14,34,.13);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.qg-surge-tooltip.is-open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.qg-surge-tooltip p {
  font-size: .84rem;
  line-height: 1.72;
  color: #5A2E48;
  margin: 0 0 .6rem;
}
.qg-surge-tooltip p:last-of-type { margin-bottom: 0; }
.qg-surge-tooltip-close {
  position: absolute;
  top: .65rem; right: .7rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(90,46,72,.45);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: color .2s;
}
.qg-surge-tooltip-close:hover { color: #D4547A; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  06 · RECENTLY VIEWED ROW                                   ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-recently-viewed {
  margin-bottom: 2rem;
  background: rgba(253,246,248,.65);
  border: 1px solid rgba(212,84,122,.1);
  border-radius: 16px;
  padding: 1rem 1.25rem;
}
.qg-rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .8rem;
}
.qg-rv-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9A6080;
}
.qg-rv-clear {
  background: transparent;
  border: none;
  color: #D4547A;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity .2s;
}
.qg-rv-clear:hover { opacity: .65; }

.qg-rv-chips {
  display: flex;
  gap: .65rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .2rem;
}
.qg-rv-chips::-webkit-scrollbar { display: none; }

.qg-rv-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .9rem .42rem .52rem;
  border-radius: 9999px;
  border: 1px solid rgba(212,84,122,.16);
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .3s ease;
  box-shadow: 0 1px 6px rgba(42,14,34,.05);
}
.qg-rv-chip:hover {
  border-color: rgba(212,84,122,.38);
  box-shadow: 0 4px 14px rgba(212,84,122,.1);
}
.qg-rv-chip img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.qg-rv-chip-name {
  font-size: .79rem;
  font-weight: 600;
  color: #2A0E22;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qg-rv-chip-price {
  font-size: .73rem;
  font-weight: 700;
  color: #D4547A;
  white-space: nowrap;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  07 · SERVICE CARD UPGRADES                                 ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* — Wishlist heart button — */
.qg-card-wish-btn {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 6;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(212,84,122,.18);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  cursor: pointer;
  opacity: 0;
  transition: all .32s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 2px 10px rgba(42,14,34,.1);
}
.qg-card-wish-btn svg {
  width: 15px; height: 15px;
  stroke: #D4547A; fill: none;
  transition: fill .25s, stroke .25s;
}
.qg-ultra-card:hover .qg-card-wish-btn,
.qg-ultra-card.is-wished .qg-card-wish-btn { opacity: 1; }
.qg-card-wish-btn:hover {
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(212,84,122,.25);
}
.qg-card-wish-btn.is-wished {
  background: rgba(212,84,122,.08);
  border-color: rgba(212,84,122,.38);
  opacity: 1;
}
.qg-card-wish-btn.is-wished svg { fill: #D4547A; }

/* — Artist avatar row — */
.qg-card-artist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .55rem;
}
.qg-card-artist-img {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(201,168,108,.35);
  flex-shrink: 0;
}
.qg-card-artist-initials {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(212,84,122,.12), rgba(201,168,108,.1));
  border: 1.5px solid rgba(212,84,122,.25);
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700;
  color: #D4547A;
  flex-shrink: 0;
}
.qg-card-artist-label {
  font-size: .72rem;
  color: rgba(90,46,72,.52);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

/* — Category tag inside offer row — */
.qg-card-cat-tag {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 9999px;
  background: rgba(155,126,200,.1);
  border: 1px solid rgba(155,126,200,.22);
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #6A4A90;
  margin-left: .5rem;
  vertical-align: middle;
}

/* — Price labels — */
.qg-price-prefix {
  font-size: .75rem;
  font-weight: 500;
  color: rgba(90,46,72,.52);
  margin-right: 2px;
}
.qg-price-orig {
  text-decoration: line-through;
  opacity: .42;
  font-size: .82em;
  font-weight: 400;
  margin-right: 3px;
}
.qg-price-surge { color: #e44d8a; }
.qg-ultra-dur-sep {
  color: rgba(90,46,72,.45);
  margin-left: .22rem;
  font-weight: 400;
  font-size: .82rem;
}

/* Price-type tags below price */
.qg-price-from-tag,
.qg-price-fixed-tag {
  display: inline-block;
  padding: .19rem .62rem;
  border-radius: 9999px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .5rem;
}
.qg-price-from-tag {
  background: rgba(201,168,108,.1);
  border: 1px solid rgba(201,168,108,.28);
  color: #7A5030;
}
.qg-price-fixed-tag {
  background: rgba(40,200,114,.07);
  border: 1px solid rgba(40,200,114,.22);
  color: #1A8050;
}

/* — QG Points badge on card — */
.qg-points-badge {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .26rem .68rem;
  border-radius: 9999px;
  background: linear-gradient(135deg,
    rgba(201,168,108,.12), rgba(184,146,74,.08));
  border: 1px solid rgba(201,168,108,.3);
  font-size: .68rem;
  font-weight: 600;
  color: #7A5030;
  margin-bottom: .48rem;
}
.qg-points-badge svg {
  width: 11px; height: 11px;
  stroke: #C9A86C; fill: none;
  flex-shrink: 0;
}
.qg-points-badge strong { color: #B8924A; }

/* — EMI badge on card — */
.qg-emi-badge {
  display: inline-flex;
  align-items: center;
  padding: .18rem .58rem;
  border-radius: 9999px;
  background: rgba(155,126,200,.08);
  border: 1px solid rgba(155,126,200,.2);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #6A4A90;
  margin-bottom: .48rem;
}

/* — Surge badge — champagne demand signal, not hot-pink — */
.qg-surge-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg,
    rgba(201,168,108,.18), rgba(184,146,74,.14));
  border: 1px solid rgba(201,168,108,.42);
  color: #7A5030;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: .03em;
  animation: qgSurgePulse 2.5s ease-in-out infinite;
  vertical-align: middle;
}
.qg-surge-badge svg {
  width: 10px; height: 10px;
  stroke: #C9A86C; fill: none;
}
@keyframes qgSurgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,108,.28); }
  50%      { box-shadow: 0 0 0 5px rgba(201,168,108,.0); }
}

/* Small variant inside modal */
.qg-surge-badge--sm {
  font-size: .6rem;
  padding: 1px 6px;
}

/* — Skeleton loading cards — */
.qg-skeleton-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  border: 1.5px solid rgba(212,84,122,.07);
  box-shadow: 0 4px 16px rgba(42,14,34,.06);
}
.qg-skel-img {
  height: 240px;
  background: linear-gradient(
    90deg,
    #f7eff4 25%, #fce8f0 50%, #f7eff4 75%
  );
  background-size: 400% 100%;
  animation: qgSkelShimmer 1.5s ease-in-out infinite;
}
.qg-skel-body { padding: 1rem 1.4rem 1.5rem; }
.qg-skel-line {
  border-radius: 9999px;
  margin-bottom: .65rem;
  background: linear-gradient(
    90deg,
    #f7eff4 25%, #fce8f0 50%, #f7eff4 75%
  );
  background-size: 400% 100%;
  animation: qgSkelShimmer 1.5s ease-in-out infinite;
}
.qg-skel-line--title  { height: 17px; width: 68%; }
.qg-skel-line--text   { height: 11px; width: 90%; animation-delay: .1s; }
.qg-skel-line--short  { height: 11px; width: 48%; animation-delay: .2s; }

@keyframes qgSkelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  08 · BOOKING MODAL UPGRADES                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Mobile bottom-sheet */
@media (max-width: 768px) {
  .qg2-modal--sheet .qg2-window {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    border-radius: 24px 24px 0 0;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: qgSheetUp .38s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes qgSheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .qg2-modal--sheet .qg2-backdrop {
    background: rgba(26,14,34,.65);
  }
}

/* Drag handle (mobile) */
.qg2-drag-handle {
  width: 40px; height: 4px;
  border-radius: 9999px;
  background: rgba(212,84,122,.22);
  margin: 0 auto 1rem;
  flex-shrink: 0;
  display: none;
}
@media (max-width: 768px) { .qg2-drag-handle { display: block; } }

/* Modal topbar — close + wishlist */
.qg2-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.4rem .4rem;
}
.qg2-close-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(42,14,34,.06);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s;
}
.qg2-close-btn svg {
  width: 15px; height: 15px;
  stroke: #5A2E48; fill: none;
}
.qg2-close-btn:hover { background: rgba(212,84,122,.1); }

/* Wishlist button in modal */
.qg2-wishlist-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(253,246,248,.9);
  border: 1.5px solid rgba(212,84,122,.2);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .3s ease;
}
.qg2-wishlist-btn svg {
  width: 18px; height: 18px;
  stroke: #D4547A; fill: none;
  transition: fill .25s;
}
.qg2-wishlist-btn.is-wished {
  background: rgba(212,84,122,.1);
  border-color: rgba(212,84,122,.45);
}
.qg2-wishlist-btn.is-wished svg { fill: #D4547A; }
.qg2-wishlist-btn:hover { transform: scale(1.08); }

/* Availability pill */
.qg2-avail-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(40,200,114,.07);
  border: 1px solid rgba(40,200,114,.22);
  border-radius: 9999px;
  padding: .32rem 1rem;
  font-size: .77rem;
  font-weight: 600;
  color: #1A8050;
  margin: 0 1.4rem .9rem;
  width: fit-content;
}
.qg2-avail-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 6px rgba(46,204,113,.55);
  animation: qgPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Price row (with from + type tag) */
.qg2-service-price-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: 0 1.4rem;
  margin-bottom: .55rem;
}
.qg2-from {
  font-size: .8rem;
  font-weight: 500;
  opacity: .65;
  color: #5A2E48;
}
.qg2-price-orig {
  text-decoration: line-through;
  opacity: .38;
  font-size: .88em;
  color: #5A2E48;
}
.qg2-price-new { color: #e44d8a; font-weight: 800; }
.qg2-price-type { padding: 0 1.4rem; margin-bottom: .6rem; display: block; }

.qg2-tag {
  display: inline-block;
  padding: .18rem .62rem;
  border-radius: 9999px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.qg2-tag--addons {
  background: rgba(201,168,108,.1);
  border: 1px solid rgba(201,168,108,.28);
  color: #7A5030;
}
.qg2-tag--fixed {
  background: rgba(40,200,114,.07);
  border: 1px solid rgba(40,200,114,.22);
  color: #1A8050;
}

/* Points earn row */
.qg2-points-earn {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg,
    rgba(201,168,108,.1), rgba(184,146,74,.07));
  border: 1px solid rgba(201,168,108,.28);
  border-radius: 10px;
  padding: .62rem 1rem;
  font-size: .8rem;
  color: #7A5030;
  margin: 0 1.4rem .9rem;
}
.qg2-points-earn svg {
  width: 14px; height: 14px;
  stroke: #C9A86C; fill: none;
  flex-shrink: 0;
}
.qg2-points-earn strong { color: #B8924A; }

/* Modal section label (shared) */
.qg2-section-label {
  display: flex;
  align-items: center;
  gap: .52rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(90,46,72,.55);
  margin: 0 0 .75rem;
}
.qg2-section-label svg {
  width: 13px; height: 13px;
  stroke: rgba(212,84,122,.55); fill: none;
  flex-shrink: 0;
}

/* Section wrappers */
.qg2-included,
.qg2-datepick,
.qg2-addons-section,
.qg2-pairwith {
  padding: 0 1.4rem;
  margin-bottom: 1rem;
}

/* What's included list */
.qg2-included-list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .32rem .7rem;
}
.qg2-included-list li {
  font-size: .82rem;
  color: #5A2E48;
  line-height: 1.5;
  padding-left: 1.2rem;
  position: relative;
}
.qg2-included-list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: #2ecc71;
  font-size: .74rem;
  font-weight: 700;
}
@media (max-width: 480px) {
  .qg2-included-list { grid-template-columns: 1fr; }
}

/* Date chips */
.qg2-date-chips {
  display: flex;
  gap: .48rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .22rem;
  margin-bottom: .75rem;
}
.qg2-date-chips::-webkit-scrollbar { display: none; }

.qg2-date-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .52rem .78rem;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1.5px solid rgba(212,84,122,.14);
  background: rgba(253,246,248,.7);
  color: #5A2E48;
  cursor: pointer;
  min-width: 58px;
  transition: all .28s ease;
}
.qg2-dc-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 2px;
  color: inherit;
}
.qg2-dc-date {
  font-size: .77rem;
  font-weight: 600;
  color: inherit;
}
.qg2-date-chip:hover {
  border-color: rgba(212,84,122,.38);
  background: rgba(253,246,248,1);
}
.qg2-date-chip.active {
  background: linear-gradient(135deg,
    rgba(176,48,96,.18), rgba(201,168,108,.14));
  border-color: rgba(212,84,122,.5);
  color: #B03060;
}

/* Time slots */
.qg2-time-slots {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.qg2-time-slot {
  padding: .38rem .82rem;
  border-radius: 9999px;
  border: 1px solid rgba(212,84,122,.16);
  background: rgba(253,246,248,.6);
  color: #5A2E48;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
}
.qg2-time-slot:hover:not(:disabled) {
  border-color: rgba(212,84,122,.42);
  background: rgba(253,246,248,1);
}
.qg2-time-slot.active {
  background: linear-gradient(135deg, #B03060, #E07AA4);
  border-color: transparent;
  color: #fff;
}
.qg2-time-slot.is-disabled,
.qg2-time-slot:disabled {
  opacity: .32;
  cursor: not-allowed;
}

/* No add-ons placeholder */
.qg2-no-addons {
  font-size: .82rem;
  color: rgba(90,46,72,.42);
  margin: 0;
  padding: .25rem 0;
}

/* Addon name */
.qg2-addon-name { flex: 1; }

/* EMI row in modal */
.qg2-emi {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(155,126,200,.08);
  border: 1px solid rgba(155,126,200,.2);
  border-radius: 10px;
  padding: .62rem 1rem;
  font-size: .8rem;
  color: #6A4A90;
  margin: 0 1.4rem .85rem;
}
.qg2-emi svg {
  width: 14px; height: 14px;
  stroke: rgba(155,126,200,.7); fill: none;
  flex-shrink: 0;
}
.qg2-emi strong { color: #9B7EC8; }

/* Pair With */
.qg2-pair-list {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.qg2-pair-chip {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .52rem .88rem;
  border-radius: 12px;
  border: 1.5px solid rgba(212,84,122,.2);
  background: rgba(253,246,248,.7);
  cursor: pointer;
  text-align: left;
  transition: all .28s;
}
.qg2-pair-chip:hover {
  border-color: rgba(212,84,122,.45);
  background: rgba(253,246,248,1);
}
.qg2-pair-chip.is-added {
  border-color: rgba(40,200,114,.38);
  background: rgba(40,200,114,.07);
}
.qg2-pair-name  { font-size: .8rem; font-weight: 600; color: #2A0E22; }
.qg2-pair-price { font-size: .74rem; color: #9A6080; }
.qg2-pair-save  { font-size: .68rem; font-weight: 700; color: #1A8050; }

/* Cancellation policy line */
.qg2-cancel-policy {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .75rem;
  color: rgba(90,46,72,.5);
  margin: 0 1.4rem 1.2rem;
  line-height: 1.6;
}
.qg2-cancel-policy svg {
  width: 12px; height: 12px;
  stroke: rgba(40,200,114,.6); fill: none;
  flex-shrink: 0;
  margin-top: 2px;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  09 · ARTIST SPOTLIGHT SECTION                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-spotlight {
  padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem);
  background: linear-gradient(160deg,
    #FFF5F8 0%, #FFFBFD 55%, #FFF5F8 100%);
  border-top: 1px solid rgba(212,84,122,.08);
  position: relative;
  overflow: hidden;
}
.qg-spotlight::before {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212,84,122,.06), transparent 65%);
  filter: blur(60px); pointer-events: none;
}
.qg-spotlight::after {
  content: "";
  position: absolute; bottom: -60px; left: -60px;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(155,126,200,.06), transparent 65%);
  filter: blur(55px); pointer-events: none;
}

.qg-spotlight-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative; z-index: 2;
}
.qg-spotlight-header h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 700;
  color: #2A0E22;
  margin: .65rem 0 .75rem;
}
.qg-spotlight-header h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #D4547A, #C9A86C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.qg-spotlight-header p {
  font-size: .95rem;
  color: #9A6080;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.72;
}

.qg-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5rem;
  max-width: 1160px;
  margin: 0 auto 2.5rem;
  position: relative; z-index: 2;
}
@media (max-width: 1100px) {
  .qg-spotlight-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .qg-spotlight-grid { grid-template-columns: 1fr; max-width: 380px; }
}

.qg-spotlight-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid rgba(212,84,122,.11);
  box-shadow: 0 6px 24px rgba(42,14,34,.09),
              0 2px 6px rgba(42,14,34,.05);
  transition: all .5s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.qg-spotlight-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg,
    transparent, rgba(212,84,122,.7),
    rgba(201,168,108,.65), transparent);
  opacity: 0; transition: opacity .4s;
}
.qg-spotlight-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212,84,122,.26);
  box-shadow: 0 18px 50px rgba(42,14,34,.13);
}
.qg-spotlight-card:hover::before { opacity: 1; }

.qg-spotlight-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.qg-spotlight-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}
.qg-spotlight-card:hover .qg-spotlight-img-wrap img {
  transform: scale(1.06);
}

.qg-spotlight-avail {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.88);
  border-radius: 9999px;
  padding: .26rem .72rem;
  font-size: .67rem; font-weight: 700;
  color: #1A8050;
  border: 1px solid rgba(40,200,114,.22);
  backdrop-filter: blur(8px);
}
.qg-spot-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #2ecc71;
  animation: qgPulse 2s ease-in-out infinite;
}

.qg-spotlight-body { padding: 1.1rem 1.2rem 1.4rem; }
.qg-spotlight-body h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem; font-weight: 700;
  color: #2A0E22; margin: 0 0 .2rem;
}
.qg-spot-spec {
  font-size: .77rem; color: #9A6080;
  margin: 0 0 .48rem;
}
.qg-spot-rating {
  display: flex; align-items: center; gap: .38rem;
  margin-bottom: .48rem;
}
.qg-spot-stars {
  color: #C9A86C; font-size: .76rem; letter-spacing: .07em;
}
.qg-spot-rating strong {
  font-size: .79rem; font-weight: 800; color: #7A5030;
}
.qg-spot-rating span {
  font-size: .73rem; color: rgba(90,46,72,.42);
}
.qg-spot-bio {
  font-size: .8rem; line-height: 1.6;
  color: #9A6080; margin: 0 0 .55rem;
}
.qg-spot-meta {
  display: flex; align-items: center; gap: .38rem;
  font-size: .72rem; color: rgba(90,46,72,.48);
  margin-bottom: .78rem;
}
.qg-spot-cta {
  display: inline-block;
  font-size: .8rem; font-weight: 700;
  color: #D4547A; text-decoration: none;
  border-bottom: 1px solid rgba(212,84,122,.25);
  padding-bottom: 1px;
  transition: all .25s;
}
.qg-spot-cta:hover {
  color: #B03060;
  border-color: rgba(176,48,96,.5);
}

.qg-spotlight-cta-row {
  text-align: center; position: relative; z-index: 2;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  10 · SAFETY & HYGIENE SECTION                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-hygiene {
  padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem);
  background: linear-gradient(160deg,
    #EFF8FC 0%, #F8FCFF 55%, #EFF8FC 100%);
  border-top: 1px solid rgba(100,180,220,.1);
  border-bottom: 1px solid rgba(100,180,220,.08);
  position: relative; overflow: hidden;
}
.qg-hygiene::before {
  content: "";
  position: absolute; top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 400px;
  background: radial-gradient(ellipse,
    rgba(42,122,184,.05), transparent 65%);
  filter: blur(65px); pointer-events: none;
}
.qg-hygiene::after {
  content: "";
  position: absolute; bottom: -60px; right: -60px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(74,180,216,.06), transparent 70%);
  filter: blur(55px); pointer-events: none;
}

.qg-hygiene-inner {
  max-width: 1160px; margin: 0 auto;
  position: relative; z-index: 2;
}
.qg-hygiene-header {
  text-align: center; margin-bottom: 3rem;
}
.qg-hygiene-header h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem,4vw,3rem); font-weight: 700;
  color: #1A2A3A; margin: .65rem 0 .8rem;
}
.qg-hygiene-header h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #2A7AB8, #4AB4D8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.qg-hygiene-header p {
  font-size: .95rem; color: #5A7A90;
  max-width: 520px; margin: 0 auto; line-height: 1.78;
}

.qg-hygiene-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .qg-hygiene-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 540px) {
  .qg-hygiene-grid { grid-template-columns: 1fr; }
}

.qg-hygiene-card {
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid rgba(100,180,220,.14);
  padding: 1.8rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,60,100,.06),
              0 2px 6px rgba(0,60,100,.04);
  transition: all .45s cubic-bezier(.22,1,.36,1);
  position: relative; overflow: hidden;
}
.qg-hygiene-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(42,122,184,.6),
    rgba(74,180,216,.55), transparent);
  opacity: 0; transition: opacity .4s;
}
.qg-hygiene-card:hover {
  transform: translateY(-7px);
  border-color: rgba(42,122,184,.28);
  box-shadow: 0 16px 44px rgba(0,60,100,.12);
}
.qg-hygiene-card:hover::before { opacity: 1; }

.qg-hygiene-icon {
  width: 58px; height: 58px; border-radius: 50%;
  margin: 0 auto 1.2rem;
  background: linear-gradient(135deg,
    rgba(42,122,184,.1), rgba(74,180,216,.07));
  border: 1.5px solid rgba(42,122,184,.2);
  display: grid; place-items: center;
}
.qg-hygiene-icon svg {
  width: 26px; height: 26px;
  stroke: #2A7AB8; fill: none;
}
.qg-hygiene-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: .96rem; font-weight: 700;
  color: #1A2A3A; margin: 0 0 .55rem;
}
.qg-hygiene-card p {
  font-size: .83rem; line-height: 1.72;
  color: #5A7A90; margin: 0 0 .9rem;
}
.qg-hygiene-cert {
  display: inline-block;
  padding: .24rem .75rem; border-radius: 9999px;
  background: rgba(40,200,114,.07);
  border: 1px solid rgba(40,200,114,.22);
  font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; color: #1A7A48;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  11 · GIFT A SERVICE SECTION                                ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-gift {
  padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem);
  background: linear-gradient(160deg,
    #1A0E22 0%, #2D1B4E 55%, #1A0E22 100%);
  border-top: 1px solid rgba(212,84,122,.12);
  position: relative; overflow: hidden;
}
.qg-gift::before {
  content: "";
  position: absolute; top: -80px; right: -80px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(212,84,122,.12), transparent 65%);
  filter: blur(80px); pointer-events: none;
}
.qg-gift::after {
  content: "";
  position: absolute; bottom: -60px; left: -60px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201,168,108,.1), transparent 65%);
  filter: blur(65px); pointer-events: none;
}

.qg-gift-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 5rem;
  align-items: center;
  position: relative; z-index: 2;
}
@media (max-width: 960px) {
  .qg-gift-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    justify-items: center;
    text-align: center;
  }
}

/* Illustrated gift card */
.qg-gift-card {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 16/9;
  border-radius: 22px;
  padding: 1.5rem 1.8rem;
  background: linear-gradient(135deg,
    #1a1a2e 0%, #2d1b5e 50%, #3d2060 100%);
  border: 1px solid rgba(201,168,108,.25);
  box-shadow:
    0 30px 80px rgba(0,0,0,.5),
    0 4px 20px rgba(201,168,108,.15),
    0 0 0 1px rgba(201,168,108,.1);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  justify-content: space-between;
  animation: qgGiftFloat 3.5s ease-in-out infinite;
}
@keyframes qgGiftFloat {
  0%,100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(1.5deg); }
}
.qg-gift-card-foil {
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(201,168,108,.07) 50%,
    transparent 70%);
  background-size: 200%;
  animation: qgShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
.qg-gift-card-top {
  display: flex; align-items: center; justify-content: space-between;
}
.qg-gift-logo {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: #fff;
}
.qg-gift-badge {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #C9A86C;
  border: 1px solid rgba(201,168,108,.35);
  padding: .18rem .58rem; border-radius: 9999px;
}
.qg-gift-amount {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.4rem; font-weight: 700;
  background: linear-gradient(135deg, #F0DEB8, #C9A86C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1; margin-bottom: .35rem;
}
.qg-gift-tagline {
  font-size: .82rem;
  color: rgba(255,220,235,.5);
  font-style: italic;
}

/* Gift copy */
.qg-gift-copy h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem,4vw,3rem); font-weight: 700;
  color: #FFD6E8; margin: .65rem 0 1rem;
}
.qg-gift-copy h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #F0A8C4, #C9A86C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.qg-gift-copy p {
  font-size: .96rem; line-height: 1.82;
  color: rgba(255,220,235,.62); margin: 0 0 1.5rem;
}

.qg-gift-perks {
  display: flex; flex-direction: column; gap: .6rem;
  margin-bottom: 2rem;
}
.qg-gift-perk {
  display: flex; align-items: center; gap: .72rem;
  font-size: .87rem; color: rgba(255,220,235,.75);
}
.qg-gift-perk svg {
  width: 15px; height: 15px;
  stroke: #C9A86C; fill: none; flex-shrink: 0;
}

.qg-gift-actions {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
}
@media (max-width: 960px) {
  .qg-gift-actions { justify-content: center; }
  .qg-gift-perks   { align-items: center; }
}
.qg-gift-actions .qg-btn-primary {
  display: inline-flex; align-items: center; gap: .55rem;
}
.qg-gift-actions .qg-btn-primary svg {
  width: 15px; height: 15px; stroke: #fff; fill: none;
}
.qg-gift-actions .qg-btn--ghost {
  border-color: rgba(255,220,235,.22);
  color: rgba(255,220,235,.72);
}
.qg-gift-actions .qg-btn--ghost:hover {
  border-color: rgba(255,220,235,.5);
  color: #fff;
  background: rgba(255,255,255,.08);
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  12 · FAQ ACCORDION                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-faq {
  padding: clamp(4rem,7vw,6rem) clamp(1.5rem,5%,4rem);
  background: #FFFBFD;
  border-top: 1px solid rgba(212,84,122,.08);
  position: relative;
}
.qg-faq::before {
  content: "";
  position: absolute; top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse,
    rgba(212,84,122,.04), transparent 70%);
  filter: blur(60px); pointer-events: none;
}

.qg-faq-inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative; z-index: 2;
}

.qg-faq-header {
  text-align: center; margin-bottom: 3rem;
}
.qg-faq-header h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem,4vw,3rem); font-weight: 700;
  color: #2A0E22; margin: .65rem 0 0;
}
.qg-faq-header h2 em {
  font-style: italic;
  background: linear-gradient(135deg, #D4547A, #C9A86C);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.qg-faq-list {
  display: flex; flex-direction: column; gap: .6rem;
}

.qg-faq-item {
  background: #fff;
  border: 1.5px solid rgba(212,84,122,.1);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .35s, box-shadow .35s;
}
.qg-faq-item:hover {
  border-color: rgba(212,84,122,.22);
  box-shadow: 0 4px 20px rgba(42,14,34,.07);
}
.qg-faq-item.is-open {
  border-color: rgba(212,84,122,.28);
  box-shadow: 0 6px 28px rgba(42,14,34,.09);
}

.qg-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 700;
  color: #2A0E22;
  line-height: 1.4;
  transition: color .3s;
}
.qg-faq-q:hover { color: #D4547A; }
.qg-faq-item.is-open .qg-faq-q { color: #D4547A; }

.qg-faq-chevron {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(212,84,122,.07);
  display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              background .3s;
}
.qg-faq-chevron svg {
  width: 14px; height: 14px;
  stroke: #D4547A; fill: none;
  transition: stroke .3s;
}
.qg-faq-item.is-open .qg-faq-chevron {
  transform: rotate(180deg);
  background: rgba(212,84,122,.12);
}

.qg-faq-a {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .42s cubic-bezier(.22,1,.36,1),
              opacity .35s ease;
}
.qg-faq-a p {
  padding: 0 1.5rem 1.3rem;
  font-size: .88rem;
  line-height: 1.78;
  color: #7A5868;
  margin: 0;
}

.qg-faq-cta {
  text-align: center;
  margin-top: 2.8rem;
}
.qg-faq-cta p {
  font-size: .9rem;
  color: #9A6080;
  margin: 0 0 1rem;
}


/* ╔══════════════════════════════════════════════════════════════╗
   ║  13 · TESTIMONIAL CARD UPGRADES                             ║
   ╚══════════════════════════════════════════════════════════════╝ */

.qg-t-card-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .85rem;
}
.qg-t-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(212,84,122,.18), rgba(201,168,108,.14));
  border: 1.5px solid rgba(212,84,122,.22);
  display: grid; place-items: center;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem; font-weight: 700;
  color: #D4547A;
  flex-shrink: 0;
}
.qg-t-author {
  font-size: .82rem;
  font-weight: 700;
  color: #2A0E22;
  display: flex; align-items: center; gap: .4rem;
  flex-wrap: wrap;
}
.qg-t-verified {
  font-size: .68rem;
  font-weight: 700;
  color: #1A8050;
  background: rgba(40,200,114,.08);
  border: 1px solid rgba(40,200,114,.22);
  border-radius: 9999px;
  padding: .12rem .48rem;
  letter-spacing: .03em;
}
.qg-t-service {
  font-size: .75rem;
  color: rgba(90,46,72,.52);
  margin-top: .1rem;
}
.qg-t-date {
  display: block;
  font-size: .73rem;
  color: rgba(90,46,72,.38);
  margin-top: .8rem;
  font-style: italic;
}

/* Upgrade stars row */
.qg-stars {
  display: block;
  color: #C9A86C;
  font-size: .92rem;
  letter-spacing: .06em;
  margin-bottom: .85rem;
}

/* Google count — now a real link */
.qg-google-count {
  color: #9A6080;
  text-decoration: none;
  transition: color .25s;
}
.qg-google-count:hover { color: #C9A86C; }


/* ╔══════════════════════════════════════════════════════════════╗
   ║  14 · SHARED UTILITIES & RESPONSIVE ADDITIONS               ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Press label (Feature Strip additions) */
.qg-press-label {
  display: block;
  font-size: .67rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(90,46,72,.4);
  margin-bottom: 1.4rem;
}

/* Transformation tap button (mobile) */
.qg-trans-tap {
  position: absolute;
  bottom: 52px; left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  padding: .4rem 1.1rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(201,168,108,.3);
  backdrop-filter: blur(8px);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; color: #7A5030;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(42,14,34,.1);
  transition: all .25s;
  display: none;
}
@media (max-width: 640px) { .qg-trans-tap { display: block; } }
.qg-trans-tap:hover {
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 16px rgba(42,14,34,.15);
}

/* Controls row responsive fix */
@media (max-width: 900px) {
  .qg-controls {
    flex-wrap: wrap;
  }
  .qg-search-wrap {
    min-width: unset;
    flex: 1 1 100%;
    order: -1;
  }
  .qg-price-filter { order: 1; }
  .qg-controls select { order: 2; flex: 1; min-width: 0; }
  .qg-badge { order: 3; }
}

/* Occasion bar responsive */
@media (max-width: 600px) {
  .qg-occasion-label { display: none; }
}

/* Hygiene grid responsive */
@media (max-width: 540px) {
  .qg-hygiene-grid { grid-template-columns: 1fr; }
}

/* Gift section responsive */
@media (max-width: 640px) {
  .qg-gift-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .qg-gift-card { max-width: 280px; }
  .qg-gift-perks { align-items: flex-start; text-align: left; }
}

/* FAQ responsive */
@media (max-width: 600px) {
  .qg-faq-q {
    padding: 1rem 1.15rem;
    font-size: .88rem;
  }
  .qg-faq-a p { padding: 0 1.15rem 1.1rem; }
}

/* Spotlight grid responsive */
@media (max-width: 860px) {
  .qg-spotlight-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 500px) {
  .qg-spotlight-grid { grid-template-columns: 1fr; max-width: 360px; }
}

/* Modal responsive overrides */
@media (max-width: 768px) {
  .qg2-avail-row,
  .qg2-points-earn,
  .qg2-emi,
  .qg2-cancel-policy { margin-left: 1rem; margin-right: 1rem; }
  .qg2-included,
  .qg2-datepick,
  .qg2-addons-section,
  .qg2-pairwith { padding-left: 1rem; padding-right: 1rem; }
  .qg2-service-title  { padding-left: 1rem; padding-right: 1rem; }
  .qg2-service-desc   { padding-left: 1rem; padding-right: 1rem; }
  .qg2-service-price-row { padding-left: 1rem; padding-right: 1rem; }
  .qg2-price-type     { padding-left: 1rem; padding-right: 1rem; }
  .qg2-modal-topbar   { padding-left: 1rem; padding-right: 1rem; }
}

/* Fix: hide old emoji icons from pledge cards (replaced with SVGs in PHP) */
.qg-pledge-icon { display: none; }
.qg-pledge-icon-wrap {
  width: 58px; height: 58px; border-radius: 50%;
  margin: 0 auto 1.1rem;
  background: linear-gradient(135deg,
    rgba(212,84,122,.1), rgba(201,168,108,.08));
  border: 1.5px solid rgba(212,84,122,.2);
  display: grid; place-items: center;
}
.qg-pledge-icon-wrap svg {
  width: 26px; height: 26px;
  stroke: #D4547A; fill: none;
}

/* Fix: hide emoji HIW icons (replaced with SVGs) */
.qg-hiw-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin: 0 auto 1.1rem;
  background: linear-gradient(135deg,
    rgba(212,84,122,.08), rgba(201,168,108,.06));
  border-radius: 50%;
  border: 1px solid rgba(212,84,122,.14);
}
.qg-hiw-icon svg {
  width: 28px; height: 28px;
  stroke: #D4547A; fill: none;
}

/* Artist cred icon update (SVG replaces emoji) */
.qg-artist-cred-icon { display: none; }
.qg-artist-cred svg {
  width: 17px; height: 17px;
  stroke: #D4547A; fill: none;
  flex-shrink: 0;
}

/* Feature icon fill → stroke for SVG line style */
.qg-feature-icon svg {
  fill: none !important;
  stroke: #D4547A;
  width: 22px; height: 22px;
}

/* ════════════════════════════════════════════════════════════════
   BOOKING PAGE — MOBILE OVERFLOW + BUTTON TEXT FIX  v1.0
   Fixes:
    1. Horizontal overflow / right-side clipping
    2. Invisible button text (gradient bleed)
    3. Pair-with / Add-to-booking cards cut off
    4. Use My Location + address input cut off
════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. PREVENT HORIZONTAL OVERFLOW ─────────────────────────
     Root cause: a descendant element (pair-with row, service card,
     or container with negative margins) is wider than 100vw.
     Hard-clamp everything that touches the full page width.      */
  .qgbe,
  #qgBookingApp,
  #phase-cart,
  #phase-artist,
  #phase-confirm,
  #phase-tracking,
  .qgbe-container,
  .qgbe-container-wide,
  .qgbe-container-narrow {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* ── 2. CART GRID: full width, no bleed ── */
  .qgbe-cart-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
    gap: 1rem !important;
    overflow: visible !important;
  }

  /* ── 3. SUMMARY CARD: contained ── */
  .qgbe-summary-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  /* ── 4. BUTTON TEXT VISIBILITY ───────────────────────────────
     The -webkit-text-fill-color:transparent from h1/gradient text
     declarations bleeds into buttons, making white text invisible.
     Explicitly reset every button variant.                        */
  .qgbe-btn,
  .qgbe-btn-rose,
  .qgbe-btn-ghost,
  .qgbe-btn-ghost-warn,
  .qgbe-btn-gps,
  .qgbe-btn-micro,
  .qgbe-back-btn,
  .qgbe-ghost-sm,
  .qgbe-promo-btn,
  .qg-ultra-cta,
  .qg-card-cta,
  [class*="qgbe-btn"] {
    -webkit-text-fill-color: unset !important;
    color: inherit !important;
  }

  /* Rose primary button: always white text */
  .qgbe-btn-rose {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Ghost button: rose text */
  .qgbe-btn-ghost,
  .qgbe-btn-ghost-warn {
    color: var(--qg-rose, #D4547A) !important;
    -webkit-text-fill-color: var(--qg-rose, #D4547A) !important;
  }

  /* GPS / back buttons: mauve text */
  .qgbe-btn-gps,
  .qgbe-back-btn,
  .qgbe-btn-micro {
    -webkit-text-fill-color: currentColor !important;
  }

  /* "Add to Booking" card CTAs */
  .qg2-add-btn,
  .qg2-book-btn,
  [class*="add-btn"],
  [class*="book-btn"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* ── 5. LOCATION ROW: no overflow ── */
  .qgbe-loc-row {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
    box-sizing: border-box !important;
  }
  .qgbe-btn-gps {
    flex: 0 0 auto !important;
    max-width: calc(50% - .2rem) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .qgbe-address-input {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── 6. PAIR-WITH / ADD-ON CARDS: horizontal scroll, no clip ── */
  .qg2-pairwith {
    padding-left: 1rem !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }
  .qg2-pair-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: .55rem !important;
    padding-right: 1rem !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
  }
  .qg2-pair-list::-webkit-scrollbar { display: none !important; }
  .qg2-pair-chip {
    flex-shrink: 0 !important;
    min-width: 130px !important;
    max-width: 180px !important;
    box-sizing: border-box !important;
  }

  /* ── 7. ADDON SECTION (Pairs Beautifully With image cards) ── */
  .qg2-addons-section {
    padding-left: 1rem !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }
  .qg2-addon-row,
  .qg2-pair-scroll {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: .6rem !important;
    padding-right: 1rem !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 85%, transparent 100%) !important;
  }
  .qg2-addon-row::-webkit-scrollbar,
  .qg2-pair-scroll::-webkit-scrollbar { display: none !important; }

  /* Individual image addon card */
  .qg2-addon-card {
    flex-shrink: 0 !important;
    width: 44vw !important;
    max-width: 180px !important;
    box-sizing: border-box !important;
  }
  .qg2-addon-card .qg2-add-btn,
  .qg2-addon-card button {
    width: 100% !important;
    font-size: .74rem !important;
    padding: .55rem .5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* ── 8. SELECTED SERVICES / YOUR BOOKING section ── */
  .qg2-service-title,
  .qg2-service-desc,
  .qg2-service-price-row,
  .qg2-price-type,
  .qg2-modal-topbar,
  .qg2-avail-row,
  .qg2-points-earn,
  .qg2-emi,
  .qg2-cancel-policy,
  .qg2-included,
  .qg2-datepick {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
  }

  /* ── 9. POPULAR COMBOS section ── */
  .qg-combo-list,
  [class*="combo-list"],
  [class*="combo"] .qg-combos-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .qg-combo-item,
  [class*="combo-item"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .qg-combo-item p,
  .qg-combo-desc {
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* ── 10. MINI MAP contained ── */
  .qgbe-mini-map-wrap,
  .qgbe-map-editor {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* ── 11. VIBE FILTER chips: horizontal scroll ── */
  [class*="vibe-row"],
  [class*="vibe-filter"],
  .qgbe-vibe-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: .4rem !important;
    max-width: 100% !important;
    padding-bottom: 2px !important;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
    mask-image: linear-gradient(to right, black 88%, transparent 100%) !important;
  }
  [class*="vibe-row"]::-webkit-scrollbar { display: none !important; }
  [class*="vibe-btn"],
  .qgbe-vibe-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

} /* end overflow + button fix 768px */