/*
 * AIBasePro: listing page redesign (all listing types, mobile + desktop)
 * One layout for Agents, Prompts and AI Solutions:
 *  - Desktop: the branded purple hero (compact), title and pills on top
 *  - Phones: a light, compact title row (no cover)
 *  - iOS-style segmented control for the tabs, part of the title area
 *  - Every block is a soft card with a titled header and a divider line
 *  - Tags as chips; quiet pill buttons
 *  - Calm and fast: nothing moves on hover, no animations, no blur effects
 * WPCodeBox: Type = CSS, Where = Frontend, Location = Header.
 */

/* ===== Shared (all screen sizes) ===================================== */

/* Page background only; text keeps your site font so the header and footer stay the same */
body.single-listing { background: #f7f7f9 !important; }
body.single-listing #c27-single-listing { -webkit-font-smoothing: antialiased; }

body.single-listing .pa-below-title:empty,
body.single-listing .profile-menu .cts-prev,
body.single-listing .profile-menu .cts-next,
body.single-listing .quick-listing-actions .cts-prev,
body.single-listing .quick-listing-actions .cts-next { display: none !important; }

/* The theme hides overflow on this wrapper; clip-x still stops sideways scrolling
   without cutting off anything that overlaps vertically. */
body.single-listing #c27-single-listing { overflow: visible !important; overflow-x: clip !important; }

/* Short tabs (e.g. Reviews) keep the page height, so nothing jumps when switching */
body.single-listing .tab-content.listing-tabs { min-height: calc(100vh - 60px); }

/* --- Title row: icon on the left, name with pills stacked beside it --- */
body.single-listing .listing-main-info {
  display: grid !important; grid-template-columns: 60px 1fr; column-gap: 14px; row-gap: 8px; align-items: center;
  position: relative !important; z-index: 2; margin: 0 auto !important; max-width: none !important; height: auto !important;
  transform: none !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
}
body.single-listing .listing-main-info:not(:has(.profile-avatar)) { grid-template-columns: 1fr; }
body.single-listing .listing-main-info > [class*="col-md-"]:first-child,
body.single-listing .profile-name { display: contents !important; }
body.single-listing .listing-main-info > [class*="col-md-"],
body.single-listing .listing-main-buttons,
body.single-listing .listing-main-buttons ul { height: auto !important; min-height: 0 !important; }
body.single-listing .listing-main-info > [class*="col-md-"]:last-child {
  grid-column: -2; grid-row: 2; align-self: start; padding: 0 !important; width: auto !important; float: none !important;
}
body.single-listing .profile-avatar {
  grid-column: 1; grid-row: 1 / span 2;
  position: static !important; width: 60px !important; height: 60px !important; margin: 0 !important;
  border-radius: 14px !important; background-color: #fff !important; background-size: 70% !important;
  background-repeat: no-repeat !important; background-position: center !important;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.06) !important; transform: none !important;
}
body.single-listing .profile-name h1 {
  grid-column: -2; grid-row: 1; align-self: end;
  font-size: 22px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -0.02em;
  color: #1d1d1f !important; padding: 0 !important; margin: 0 !important; white-space: normal !important; text-shadow: none !important;
}
body.single-listing .pa-below-title { grid-column: -2; color: #6e6e73 !important; }
body.single-listing .profile-name.no-tagline .pa-below-title { display: none !important; }
body.single-listing .listing-main-buttons { margin: 0 !important; padding: 0 !important; display: block !important; }
body.single-listing .listing-main-buttons ul { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; }
body.single-listing .listing-main-buttons li { margin: 0 !important; padding: 0 !important; }
body.single-listing .listing-main-buttons li a {
  display: inline-flex !important; align-items: center; gap: 4px; height: 26px !important; padding: 0 10px !important;
  border-radius: 13px !important; background: #f1ecfa !important; border: 0 !important; box-shadow: none !important;
  color: #3d2276 !important; font-family: inherit !important; font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.01em !important; white-space: nowrap;
}
body.single-listing .listing-main-buttons li a span { color: inherit !important; }
body.single-listing .listing-main-buttons li a i { font-size: 12px !important; color: inherit !important; }
body.single-listing .listing-main-buttons .listing-rating i,
body.single-listing .listing-main-buttons .glsr-star { color: #ffb901 !important; }
body.single-listing.type-ai-product .listing-main-buttons li a { pointer-events: none; }
body.single-listing.type-ai-product .listing-main-buttons li a i { display: none !important; }

/* --- Segmented control: sits with the title, as part of the page header --- */
body.single-listing .profile-header {
  position: relative !important; top: auto !important; z-index: 13 !important; box-shadow: none !important; height: auto !important;
  background: #fff !important; padding: 0 16px 14px !important; border: 0 !important; border-bottom: 0.5px solid rgba(0,0,0,.08) !important;
}
body.single-listing .profile-header .container,
body.single-listing .profile-header .row,
body.single-listing .profile-header .col-md-12 { padding: 0 !important; margin: 0 auto !important; width: 100% !important; }
body.single-listing .profile-menu { height: auto !important; }
body.single-listing .profile-menu ul {
  display: flex !important; height: auto !important; padding: 2px !important; margin: 0 !important; width: 100% !important;
  background: #eeeef0 !important; border-radius: 10px !important; transform: none !important; white-space: normal !important;
}
body.single-listing .profile-menu ul li { flex: 1 1 0; margin: 0 !important; padding: 0 !important; height: auto !important; border: 0 !important; }
body.single-listing .profile-menu ul li a {
  display: flex !important; align-items: center; justify-content: center; gap: 6px; height: 36px !important; padding: 0 8px !important;
  border-radius: 8px !important; color: #1d1d1f !important; font-size: 14px !important; font-weight: 500 !important;
  letter-spacing: -0.01em !important; text-transform: none !important; white-space: nowrap; transition: none !important;
}
body.single-listing .profile-menu ul li a:after,
body.single-listing .profile-menu ul li a:before { display: none !important; }
body.single-listing .profile-menu ul li.active a {
  background: #fff !important; font-weight: 600 !important; box-shadow: 0 3px 8px rgba(0,0,0,.08), 0 0 0 0.5px rgba(0,0,0,.04) !important;
}
body.single-listing .profile-menu .items-counter {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: #f1ecfa; color: #3d2276 !important; font-size: 11px; font-weight: 600; border: 0 !important;
}

/* --- Action buttons: quiet pills, all the same --- */
body.single-listing .quick-listing-actions { padding: 12px 16px 0 !important; margin: 0 !important; height: auto !important; }
body.single-listing .quick-listing-actions ul {
  display: flex !important; gap: 8px; margin: 0 !important; padding: 2px 0 !important; transform: none !important;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start !important;
}
body.single-listing .quick-listing-actions ul::-webkit-scrollbar { display: none; }
body.single-listing .quick-listing-actions li { margin: 0 !important; padding: 0 !important; flex: 1 0 auto; }
body.single-listing .quick-listing-actions > ul > li > a {
  display: flex !important; align-items: center; justify-content: center; gap: 6px; height: 40px !important; padding: 0 14px !important;
  border-radius: 12px !important; border: 0 !important; background: #fff !important; margin: 0 !important;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04) !important;
  color: #1d1d1f !important; font-size: 14px !important; font-weight: 500 !important; white-space: nowrap; transition: none !important;
}
body.single-listing .quick-listing-actions > ul > li > a:hover {
  background: #f5f5f7 !important; margin: 0 !important; transform: none !important;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.04) !important;
}
body.single-listing .quick-listing-actions > ul > li > a span { color: inherit !important; font-size: 14px !important; }
body.single-listing .quick-listing-actions > ul > li > a > i,
body.single-listing .quick-listing-actions > ul > li > a svg { color: #3d2276 !important; fill: #3d2276 !important; font-size: 17px !important; }
body.single-listing .quick-listing-actions li a.bookmarked i { color: #fd1d1d !important; }

/* --- Blocks: soft cards with a titled header and a divider --- */
body.single-listing .profile-body { padding: 12px 0 0 !important; }
body.single-listing .listing-tab .element {
  background: #fff !important; border: 0 !important; border-radius: 16px !important; padding: 16px !important; margin: 0 0 14px !important;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.07), 0 2px 8px rgba(17,17,17,.04) !important; transition: none !important;
}
body.single-listing .pf-head {
  margin: 0 0 14px !important; padding: 0 0 12px !important; border-bottom: 0.5px solid rgba(0,0,0,.08);
}
body.single-listing .title-style-1 { display: flex !important; align-items: center; gap: 8px; padding: 0 !important; }
body.single-listing .title-style-1 i { position: static !important; color: #3d2276 !important; font-size: 18px !important; margin: 0 !important; }
body.single-listing .title-style-1 h3,
body.single-listing .title-style-1 h5 {
  position: static !important; left: 0 !important; margin: 0 !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase;
  color: #6e6e73 !important;
}
/* Repeater blocks (e.g. "Buy Individual Prompt Product"): title and items read as one card */
body.single-listing .listing-tab .element:has(+ .food-menu-items) {
  border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important;
}
body.single-listing .listing-tab .element:has(+ .food-menu-items) .pf-head { margin-bottom: 0 !important; }
body.single-listing .food-menu-items .single-menu-item.element {
  border-radius: 0 !important; margin: 0 !important; clip-path: inset(0 -30px -30px -30px);
}
body.single-listing .food-menu-items .single-menu-item.element:last-child {
  border-bottom-left-radius: 16px !important; border-bottom-right-radius: 16px !important; margin-bottom: 20px !important;
}

/* Agents: the agent itself (Use Agent / About tabs) sits on the page, not in a card.
   Reviews are code blocks too, so they are left out and keep their cards. */
body.single-listing.type-ai-product .listing-tab:not(#listing_tab_reviews) .block-type-code .pf-head { display: none !important; }
body.single-listing.type-ai-product .listing-tab:not(#listing_tab_reviews) .block-type-code .element {
  background: transparent !important; box-shadow: none !important; padding: 4px 0 !important; border-radius: 0 !important;
}

/* Reviews: one card per block, reviews inside it as a clean list with dividers */
body.single-listing .glsr-review {
  background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  margin: 0 !important; padding: 16px 0 !important; border-top: 0.5px solid rgba(0,0,0,.08) !important;
}
body.single-listing .glsr-review:first-child { border-top: 0 !important; padding-top: 4px !important; }

/* Boxes never move or change on hover */
body.single-listing .listing-tab .element:hover,
body.single-listing .glsr-review:hover { margin-top: 0 !important; }

/* Tags as chips */
body.single-listing .block-type-tags .details-list,
body.single-listing .outlined-list.details-list { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; }
body.single-listing .block-type-tags .details-list li,
body.single-listing .outlined-list.details-list li { width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; }
body.single-listing .block-type-tags .details-list li a,
body.single-listing .outlined-list.details-list li a {
  display: inline-flex !important; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px !important;
  border-radius: 17px !important; background: #f5f5f7 !important; border: 0 !important; transition: none !important;
}
body.single-listing .block-type-tags .details-list li a:hover,
body.single-listing .outlined-list.details-list li a:hover { background: #f1ecfa !important; }
body.single-listing .block-type-tags .details-list li a i,
body.single-listing .outlined-list.details-list li a i {
  width: 24px !important; height: 24px !important; line-height: 24px !important; margin: 0 !important; border-radius: 12px !important;
  background: #fff !important; color: #3d2276 !important; font-size: 12px !important; box-shadow: none !important; text-align: center;
}
body.single-listing .block-type-tags .details-list li a span,
body.single-listing .outlined-list.details-list li a span { color: #1d1d1f !important; font-size: 13px !important; font-weight: 500; }

/* Categories: tidy icon tiles */
body.single-listing .listing-details .cat-icon { border-radius: 10px !important; box-shadow: none !important; }
body.single-listing .listing-details .category-name { color: #1d1d1f !important; font-weight: 500; }

/* Comfortable tap targets; 16px fields stop iOS zooming in */
body.single-listing .profile-body button,
body.single-listing .profile-body input[type="submit"],
body.single-listing .profile-body .buttons { min-height: 44px; }
body.single-listing .profile-body input[type="text"],
body.single-listing .profile-body input[type="email"],
body.single-listing .profile-body input[type="url"],
body.single-listing .profile-body textarea,
body.single-listing .profile-body select { font-size: 16px !important; min-height: 44px; }

/* "See More Like This" */
body.single-listing .similar-listings { background: #fff !important; padding: 24px 0 32px !important; border-top: 0.5px solid rgba(0,0,0,.08); }
body.single-listing .similar-listings .section-title { margin: 0 0 12px !important; }
body.single-listing .similar-listings .section-title h2 {
  font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #1d1d1f !important;
  text-align: left !important; margin: 0 !important; padding: 0 !important;
}
body.single-listing .similar-listings .lf-item-container {
  margin: 0 !important; border-radius: 16px !important; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.05) !important;
}
/* Below the fold: the browser skips rendering it until you scroll near it */
body.single-listing .similar-listings { content-visibility: auto; contain-intrinsic-size: auto 640px; }

/* ===== Phones and tablets (the theme's mobile layout runs up to 1199px) == */
@media (max-width: 1199px) {
  body.single-listing .profile-cover { display: none !important; }
  body.single-listing .main-info-mobile { background: #fff; }
  /* The repeater title strip is empty on phones; let the item card stand alone */
  body.single-listing .listing-tab .element:has(+ .food-menu-items) { display: none !important; }
  body.single-listing .food-menu-items .single-menu-item.element { clip-path: none; }
  body.single-listing .food-menu-items .single-menu-item.element:first-child { border-top-left-radius: 16px !important; border-top-right-radius: 16px !important; }
  body.single-listing .listing-main-info { padding: 20px 20px 14px !important; }

  body.single-listing .profile-body > .container { padding: 0 12px !important; max-width: none !important; }
  body.single-listing .profile-body .row { margin: 0 !important; }
  body.single-listing .profile-body [class*="col-md-"] { padding: 0 !important; width: 100% !important; float: none !important; }

  /* Similar listings become a sideways shelf */
  body.single-listing .similar-listings .container { padding: 0 !important; max-width: none !important; }
  body.single-listing .similar-listings .section-title { padding: 0 20px !important; }
  body.single-listing .similar-listings .section-body {
    display: flex !important; flex-wrap: nowrap !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding: 0 20px; margin: 0 !important; padding: 0 20px 8px 0 !important; height: auto !important; scrollbar-width: none;
  }
  body.single-listing .similar-listings .section-body::-webkit-scrollbar { display: none; }
  body.single-listing .similar-listings .section-body > div {
    flex: 0 0 72% !important; width: 72% !important; max-width: 280px; padding: 0 !important;
    position: static !important; transform: none !important; scroll-snap-align: start;
  }
  body.single-listing .similar-listings .section-body > div:first-child { margin-left: 20px !important; }
  body.single-listing .similar-listings .lf-item-container { width: 100% !important; }
}

/* ===== Tablets: keep the mobile layout, centred at a readable width ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  body.single-listing .main-info-mobile .listing-main-info,
  body.single-listing .profile-header .container,
  body.single-listing .qla-container,
  body.single-listing .profile-body > .container { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
  body.single-listing .qla-container .quick-listing-actions { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ===== Desktop (the theme's desktop layout starts at 1200px) =========== */
@media (min-width: 1200px) {
  /* Compact branded hero: grid, purple glow, white title */
  body.single-listing .profile-cover {
    height: auto !important; min-height: 0 !important; padding: 40px 0 32px !important; overflow: hidden;
  }
  body.single-listing .profile-cover.profile-cover-no-img {
    background:
      repeating-linear-gradient(0deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 56px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 56px),
      radial-gradient(ellipse 55% 90% at 82% 15%, rgba(90,53,168,.55), transparent 62%),
      radial-gradient(ellipse 50% 80% at 12% 95%, rgba(61,34,118,.5), transparent 60%),
      radial-gradient(ellipse 25% 40% at 95% 5%, rgba(232,184,75,.12), transparent 55%),
      linear-gradient(135deg, #0c0913 0%, #17102a 48%, #241548 100%) !important;
  }
  /* Listings with a cover photo: the photo fills the hero behind a dark wash */
  body.single-listing .profile-cover > img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
  body.single-listing .profile-cover.profile-cover-image .overlay {
    display: block !important; position: absolute; inset: 0; z-index: 1; opacity: 1 !important;
    background: linear-gradient(100deg, rgba(12,9,19,.95) 0%, rgba(23,16,42,.9) 50%, rgba(36,21,72,.84) 100%) !important;
  }
  body.single-listing .main-info-desktop { position: relative !important; z-index: 2; }

  body.single-listing .listing-main-info {
    grid-template-columns: 80px 1fr; column-gap: 22px; row-gap: 10px;
    width: 100% !important; max-width: 1180px !important; padding: 0 32px !important;
  }
  body.single-listing .listing-main-info:not(:has(.profile-avatar)) { grid-template-columns: 1fr; }
  body.single-listing .profile-avatar { width: 80px !important; height: 80px !important; border-radius: 20px !important; box-shadow: 0 8px 24px rgba(0,0,0,.25) !important; }
  body.single-listing .profile-name h1 { font-size: 36px !important; line-height: 1.1 !important; letter-spacing: -0.03em; color: #fff !important; }
  body.single-listing .pa-below-title { color: rgba(255,255,255,.7) !important; }
  body.single-listing .listing-main-buttons li a {
    height: 30px !important; padding: 0 12px !important; border-radius: 15px !important; font-size: 13px !important;
    background: rgba(255,255,255,.12) !important; color: #fff !important;
    box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.22) !important;
  }

  /* Tabs sit inside the hero, under the title (glass control on the dark background) */
  body.single-listing .profile-cover { padding-bottom: 84px !important; }
  body.single-listing .profile-header {
    margin-top: -64px !important; height: 64px !important; padding: 0 32px 16px !important;
    background: transparent !important; border: 0 !important;
  }
  body.single-listing .profile-header .container { max-width: 1180px !important; padding: 0 32px !important; }
  body.single-listing .profile-menu ul {
    max-width: 520px; background: rgba(255,255,255,.1) !important; box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.14) !important;
  }
  body.single-listing .profile-menu ul li a { height: 34px !important; cursor: pointer; color: rgba(255,255,255,.82) !important; }
  body.single-listing .profile-menu ul li.active a { background: #fff !important; color: #1d1d1f !important; box-shadow: none !important; }
  body.single-listing .profile-menu .items-counter { background: rgba(255,255,255,.16); color: #fff !important; }
  body.single-listing .profile-menu ul li.active .items-counter { background: #f1ecfa; color: #3d2276 !important; }

  body.single-listing .qla-container { max-width: 1180px !important; margin: 0 auto !important; padding: 0 32px !important; }
  body.single-listing .quick-listing-actions { max-width: none !important; padding: 16px 0 4px !important; }
  body.single-listing .quick-listing-actions li { flex: 0 0 auto; }
  body.single-listing .quick-listing-actions > ul > li > a { height: 38px !important; }

  /* Keep the theme's columns; cards with even gutters */
  body.single-listing .profile-body > .container { max-width: 1180px !important; padding: 0 22px !important; }
  body.single-listing .listing-tab .element { padding: 22px !important; margin: 0 0 20px !important; }
  body.single-listing .pf-head { margin-bottom: 16px !important; padding-bottom: 14px !important; }

  body.single-listing .similar-listings { padding: 48px 0 64px !important; }
  body.single-listing .similar-listings .container { max-width: 1180px !important; padding: 0 32px !important; }
  body.single-listing .similar-listings .section-title { padding: 0 !important; margin-bottom: 20px !important; }
  body.single-listing .similar-listings .section-title h2 { font-size: 24px !important; }
}

/* ===== Site-wide: nothing moves on hover ============================= */
/* Listing cards: show the full title and details; no slide-up on hover */
.lf-item-container .lf-item-info-2,
.lf-item-container:hover .lf-item-info-2 { transform: translateY(0) !important; transition: none !important; will-change: auto !important; }
/* Cards: no darkening, no gallery arrows popping in, no fading categories */
.lf-type-2 .lf-item > a .overlay,
.lf-type-2 .lf-item > a:hover .overlay { opacity: 0 !important; transition: none !important; }
.lf-item-container .gallery-nav { display: none !important; }
.listing-details .cat-icon, .listing-details .cat-icon:hover,
.single-listing .listing-details .cat-icon:hover,
.related-listing-block .event-host a:hover .host-name { opacity: 1 !important; transition: none !important; }

/* No zoom, lift or nudge effects */
.menu-thumb a img, .menu-thumb a:hover img { transform: none !important; transition: none !important; }
.i-dropdown li a, .i-dropdown li a:hover { padding-left: 0 !important; transition: none !important; }
.elementor-animation-float:hover, .elementor-animation-grow:hover, .elementor-animation-pop:hover { transform: none !important; }
.lmb-calltoaction > a,
.quick-listing-actions > ul > li > a,
.single-job-listing .element,
.social-share-modal .share-options li { transition: none !important; }
.quick-listing-actions > ul > li > a:hover { margin-top: 0 !important; }
.social-share-modal .share-options li:hover { margin-left: 0 !important; }