/* ---------------------------------------------------------------------------
   Template grid + the demo/signup modal panel. SHARED by /directory,
   /classified, /ecommerce and /listingpro — pair with assets/js/templates-grid.js.

   Every card also carries its own page's card class (…-possible-mockup-card),
   so how a card LOOKS still comes from that page's style.css. The rules below
   only undo the old five-card "fan" (which positioned cards absolutely inside
   a fixed 570px deck) and lay the same cards out as a grid, through the neutral
   .cwp-tpl-card hook that every page shares.

   The signup-panel rules further down are synced from the gallery plugin's
   assets/inline.css (cubewp-sites-gallery) — template-signup.js styles nothing
   itself, so the panel needs them to render. Every selector there is scoped to
   `tpl-`, which is why they can sit alongside this page's own CSS safely.
   --------------------------------------------------------------------------- */

/* ── The shared card ──────────────────────────────────────────────────────────
   Kept in one block so the card's box and its overlay behaviour stay together. */

.cubewp-tpl-grid .cwp-tpl-card {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  flex: 0 0 auto;
  width: 340px;
  height: 470px;
  transform: none;
  opacity: 1;
  z-index: 1;
}

.cubewp-tpl-grid .cwp-tpl-card:hover {
  transform: translateY(-8px);
}

/* style.css reveals the overlay via an .is-hovered class added by script.js,
   which binds at DOMContentLoaded — before these cards exist. Driving it from
   :hover/:focus-within instead needs no JS and covers keyboard users too. */
.cubewp-tpl-grid .cwp-tpl-card:hover .mockup-overlay,
.cubewp-tpl-grid .cwp-tpl-card:focus-within .mockup-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cubewp-tpl-grid .mockup-overlay {
  padding: 26px;
  min-height: 220px;
}

.cubewp-tpl-grid .mockup-overlay h3 {
  font-size: 28px;
  line-height: 32px;
  margin-bottom: 12px;
}

.cubewp-tpl-grid .mockup-logo {
  font-size: 13px;
  line-height: 20px;
}

/* "New" flag. The overlay only appears on hover, so this sits on the image
   where it is visible at rest. */
.cubewp-tpl-new {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 120px;
  background: #6752EB;
  color: #FFFFFF;
}

/* Skeletons while the fetch is in flight — same box, so the layout does not
   jump when the real cards land. */
.cubewp-tpl-skeleton {
  background: linear-gradient(90deg, #EFEDF9 25%, #F7F6FD 37%, #EFEDF9 63%);
  background-size: 400% 100%;
  animation: cubewp-tpl-shimmer 1.4s ease infinite;
  border-color: #F1EFFB;
  pointer-events: none;
}

@keyframes cubewp-tpl-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ── Grid layout ──────────────────────────────────────────────────────────── */

/* Fixed 340px tracks rather than fractional ones: the card keeps a constant
   size and the track COUNT adapts to the container, instead of the card
   stretching to fill whatever width a column happens to be. */
.cubewp-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 340px);
  justify-content: center;
  gap: 28px;
  margin-top: 48px;
}

/* ── Status line (shared) ─────────────────────────────────────────────────── */

.cubewp-tpl-status {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  line-height: 24px;
  text-align: center;
  color: #6B6880;
  margin: 32px 0 0;
}

.cubewp-tpl-status:empty { display: none; }

.cubewp-tpl-status a {
  color: #6752EB;
  font-weight: 600;
  text-decoration: underline;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cubewp-tpl-skeleton { animation: none; }
  .cubewp-tpl-grid .cwp-tpl-card:hover { transform: none; }
}

@media (max-width: 991px) {
  .cubewp-tpl-grid .cwp-tpl-card { width: 300px; height: 420px; }
  .cubewp-tpl-grid { grid-template-columns: repeat(auto-fit, 300px); }
}

@media (max-width: 575px) {
  .cubewp-tpl-grid .cwp-tpl-card { width: 272px; height: 390px; }
  .cubewp-tpl-grid { grid-template-columns: repeat(auto-fit, 272px); gap: 18px; margin-top: 32px; }
  /* No hover on touch, so the overlay has to be there already or Preview and
     Create are unreachable on a phone. */
  .cubewp-tpl-grid .mockup-overlay {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ── Demo modal shell tweaks ──────────────────────────────────────────────── */

/* The signup flow is taller than the plain info panel, so the right column
   needs to scroll instead of pushing the modal past the viewport. */
.mockup-card-create-modal-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#tpl-signup-panel { min-height: 0; }


/* ---------------------------------------------------------------------------
   Signup panel — synced from cubewp-sites-gallery/assets/inline.css.
   Keep in sync by hand if that file changes.

   ⚠ ONE DELIBERATE DIVERGENCE FROM THE SOURCE: the fonts.
   The gallery runs on a page that loads "Inter Tight". This page does not — it
   imports Bricolage Grotesque, Plus Jakarta Sans, Manrope, Poppins and Playfair
   Display, and nothing else. Two rules in the original set `font-family: Inter
   Tight` with NO generic fallback, so on this page they fell all the way back
   to the browser default and the "Back" link and "Let's build your site" title
   rendered in Times while the rest of the panel did not.
   Every family below is therefore a font this page actually has. Do NOT restore
   Inter Tight when re-syncing unless it gets added to the page's @import.
   --------------------------------------------------------------------------- */
#tpl-info-panel{height: 100%;
  display: flex;
  flex-direction: column;}
.tpl-back-btn{background: none;
  border: none;
  color: #717182;
  padding: 0;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0px;
  text-align: center;}
.tpl-back-btn:hover{color: #111827;}
.tpl-step-title{color: #1A1A1A;
  margin: 0 0 8px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 27.5px;
  letter-spacing: 0px;}
.tpl-form-group{margin-bottom: 16px;}
.tpl-input-wrapper{position: relative;
  display: flex;
  align-items: center;}
.tpl-input-icon{position: absolute;
  left: 16px;
  color: #9ca3af;
  pointer-events: none;}
.tpl-input{width: 100%;
  padding: 14px 16px 14px 44px;
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  font-size: 15px;
  color: #111827;
  outline: none;
  box-sizing: border-box;
  transition: border-color .18s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #ffffff;}
.tpl-input::placeholder{color: #9ca3af;
  font-weight: 400;}
.tpl-input:focus{border-color: #5b45f4;}
.tpl-primary-btn{background: #5b45f4;
  color: #ffffff;
  padding: 16px;
  border-radius: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s; 
  cursor: pointer;
      text-decoration: none;}
.tpl-primary-btn:hover{opacity: 0.9;}
.tpl-primary-btn:disabled{opacity: .55;
  cursor: not-allowed;}
.tpl-error{color: #dc2626;
  font-size: 13px;
  padding: 9px 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 10px;}
.tpl-subdomain-preview{display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 200px;
    padding: 10px 14px;
    margin-top: 8px;
    font-size: 13.5px;
    gap: 2px;}
.tpl-sdpre-host{font-weight: 700;
  color: #5b45f4;}
.tpl-sdpre-suffix{color: #9ca3af;}
.tpl-subdomain-status{margin-left: auto;
  font-size: 12px;
  min-height: 16px;
  transition: color .2s;}
.tpl-subdomain-status.checking{color: #6b7280;}
.tpl-subdomain-status.available{color: #16a34a;
  font-weight: 500;}
.tpl-subdomain-status.taken{color: #dc2626;
  font-weight: 500;}
/* OTP */
.tpl-resend-line{font-size: 13px;
  color: #6b7280;
  margin: 0 0 18px;}
.tpl-resend-line a{color: #7c3aed;
  text-decoration: none;
  font-weight: 500;}
.tpl-resend-line a:hover{text-decoration: underline;}
.tpl-otp-row{display: flex;
  gap: 8px;
  margin-bottom: 14px;
  justify-content: flex-start;}
.tpl-otp-box{width: 47px;
  height: 54px;
  border: 1.5px solid #7F77DD;
  border-radius: 9px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #7c3aed;
  outline: none;
  transition: border-color .18s;
  font-family: inherit;
  box-sizing: border-box;}
.tpl-otp-box:focus{border-color: #7c3aed;}
.tpl-otp-box.tpl-otp-error{border-color: #ef4444 !important;
  color: #ef4444;}
.tpl-otp-box.tpl-otp-success{border-color: #22c55e !important;
  color: #22c55e;}
/* Progress */
.tpl-prog-wrap{margin: 18px 0 20px;}
.tpl-prog-bar{width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;}
.tpl-prog-fill{height: 100%;
  background: linear-gradient(90deg, #9810FA 0%, #155DFC 100%);
  border-radius: 100px;
  transition: width .45s ease;
  width: 0%;}
.tpl-prog-meta{display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #5641F3;
  font-weight: 500;}
.tpl-build-list{list-style: none;
  padding: 0;
  margin: 0;}
.tpl-build-item{padding: 5px 0 5px 22px;
  font-size: 13.5px;
  color: #9ca3af;
  position: relative;}
.tpl-build-item::before{content: '';
  position: absolute;
  left: 0;
  background: #71718240;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);}
.tpl-build-item.active{color: #1A1A1A;
  font-weight: 500;}
.tpl-build-item.active::before{content: '';
  background: linear-gradient(90deg, #9810FA 0%, #155DFC 100%);}
.tpl-build-item.done{color: #16a34a;}
.tpl-build-item.done::before{content: '✓';
  color: #16a34a;}
/* Done screen */
.tpl-done-check{width: 68px;
  height: 68px;
  margin: 8px auto 16px;}
.tpl-done-check svg{width: 72px;
  height: 72px;}
#tpl-step-done .tpl-step-title{text-align: center;}
#tpl-step-done .tpl-step-desc{text-align: center;}
.tpl-done-site-link{display: block;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 10px;
  background: #f5f3ff;
  color: #7c3aed;
  border: 1.5px solid #ddd6fe; 
  text-align: center;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  box-sizing: border-box;
  word-break: break-all;
  transition: opacity .18s;
      border-radius: 200px;}
.tpl-done-site-link:hover{opacity: .82;
  color: #7c3aed;}
.tpl-done-admin-btn{display: block;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 10px;
  background: #fff;
  color: #374151;
  border: 1.5px solid #e5e7eb; 
  text-align: center;
  text-decoration: none;
  font-size: 13.5px;
      border-radius: 200px;
  font-weight: 600;
  box-sizing: border-box;
  transition: border-color .18s, color .18s;}
.tpl-done-admin-btn:hover{border-color: #7c3aed;
  color: #7c3aed;}
.tpl-done-dash{margin-top: 0;}


/* The stat box lost its CTA, so centre what remains. */
.cubewp-possible-cta-box.cubewp-cta-box--solo {
  justify-content: center;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Arrival hint.

   Nine CTAs across the page deep-link to #directory. Landing there, the grid is
   a wall of screenshots: the category, the title and both buttons only appear
   on hover, so there is nothing telling a first-time visitor that the cards are
   interactive at all. This does two things — it SAYS what to do, and it briefly
   demonstrates it on the first card, which is what actually lands.
   --------------------------------------------------------------------------- */

.cubewp-tpl-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 28px 0 -20px auto;      /* right-aligned, tucked above the grid */
  padding: 10px 14px 10px 16px;
  border: 1px solid #DFDBFB;
  border-radius: 120px;
  background: #FFFFFF;
  box-shadow: 0 10px 30px -14px rgba(103, 82, 235, .45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}

.cubewp-tpl-hint.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Removed from the flow once dismissed so it cannot leave a gap. */
.cubewp-tpl-hint[hidden] { display: none; }

.cubewp-tpl-hint-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #4A4860;
}

.cubewp-tpl-hint-text strong {
  color: #6752EB;
  font-weight: 700;
}

.cubewp-tpl-hint-icon {
  position: relative;   /* anchors the ping ring below */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: #F0EDFE;
  color: #6752EB;
}

/* Draws the eye to the hint without moving the layout. */
.cubewp-tpl-hint-icon::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #6752EB;
  animation: cubewp-tpl-ping 2.2s ease-out infinite;
}

@keyframes cubewp-tpl-ping {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.9); }
  100% { opacity: 0;   transform: scale(1.9); }
}

.cubewp-tpl-hint-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9B98AD;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.cubewp-tpl-hint-close:hover { background: #F0EDFE; color: #6752EB; }
.cubewp-tpl-hint-close:focus-visible { outline: 2px solid #6752EB; outline-offset: 2px; }

/* The demonstration: hold the first card's overlay open briefly so the visitor
   SEES that a card opens up. pointer-events stays off — this is a preview, and
   a click landing on a button the user did not choose would be worse than no
   hint at all. */
.cubewp-tpl-grid .cwp-tpl-card.is-peeking .mockup-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .cubewp-tpl-hint { transition: none; }
  .cubewp-tpl-hint-icon::after { animation: none; }
}

@media (max-width: 767px) {
  .cubewp-tpl-hint {
    margin: 24px auto -12px;
    padding: 9px 12px 9px 14px;
  }
  .cubewp-tpl-hint-text { font-size: 13px; }
}

/* ── Deck mode ────────────────────────────────────────────────────────────────
   The fan layout itself comes from each page's own style.css (card-far-left,
   card-center, …). What that CSS cannot do is reveal the overlay, because it
   keys off an .is-hovered class added by the page's script.js — which binds at
   DOMContentLoaded, before these cards are fetched. templates-grid.js re-adds
   those classes, and the rules below guarantee the reveal regardless of which
   page-specific selector happens to exist. */

[data-layout="deck"] .cwp-tpl-card.is-hovered .mockup-overlay,
[data-layout="deck"] .cwp-tpl-card:hover .mockup-overlay,
[data-layout="deck"] .cwp-tpl-card:focus-within .mockup-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Skeletons sit in the fan while the fetch is in flight, so the section holds
   its height instead of collapsing and then jumping. */
[data-layout="deck"] .cubewp-tpl-skeleton .mockup-overlay { display: none; }

@media (max-width: 575px) {
  /* No hover on touch — the page's own mobile rules already turn the fan into a
     scroller, so the actions have to be reachable without hovering. */
  [data-layout="deck"] .cwp-tpl-card .mockup-overlay {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}