/* =========================================================================
   Cards: image sizing, group titles, icon on/off, scroll + hover effect.
   Driven by body classes from inc/card-ui.php:
     .topaz-noicon  icons switched off for the surface being rendered
     .topaz-fx      the card effect is on (main.js adds .fx-card / .is-lit)
   ========================================================================= */

/* ---- A real image must never set the card's height ----------------------
   aspect-ratio is only a preferred size: a portrait photo in normal flow made
   its .thumb taller than the square, the grid row grew to match, and every
   card beside «صبغة شعر» stretched with it. Out of flow, the image fills the
   square and is cropped like the gallery images already were. */
.prod-card .thumb{overflow:hidden;min-height:0}
.prod-card .thumb > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Equal-height cards: the action sits on the bottom edge whatever the title length. */
.prod-card .body .svc-book-btn,.prod-card .body .cart-ctl-full{margin-top:auto}

/* ---- Group titles in حجز موعد / حسابي ----------------------------------- */
.grp-title{color:var(--heading);margin:26px 0 12px;display:flex;align-items:center;gap:8px;
  font-size:20px;font-weight:800;line-height:1.3}
.grp-title .grp-ic{font-size:1.05em;line-height:1}

/* The pink kids banner carries white text on a light gradient. */
.kids{text-shadow:0 1px 3px rgba(0,0,0,.28);position:relative;overflow:hidden}

/* ---- Icons switched off --------------------------------------------------
   Nothing is left where the icon was: the title moves to the centre of its card,
   and on cards with no photo the emoji bed collapses to a slim strip that only
   holds the ♡ / share buttons. Real photos are content, not icons — kept. */
.topaz-noicon .cat-card .ic,
.topaz-noicon .kids .emoji,
.topaz-noicon .grp-title .grp-ic,
.topaz-noicon .svc-card .thumb.no-img,
.topaz-noicon .prod-card.no-img .thumb .emoji{display:none}
.topaz-noicon .cat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:118px}
.topaz-noicon .kids{justify-content:center;text-align:center}
.topaz-noicon .prod-card.no-img .thumb{aspect-ratio:auto;height:54px;background:transparent}
.topaz-noicon .prod-card.no-img .body{text-align:center;align-items:center;justify-content:center}
.topaz-noicon .prod-card.no-img .price,
.topaz-noicon .prod-card.no-img .svc-meta{justify-content:center}
.topaz-noicon .prod-card.no-img .body .svc-book-btn,
.topaz-noicon .prod-card.no-img .body .cart-ctl-full{width:100%}
/* Row cards (booking): no thumb → name and meta centred between card edge and button. */
.topaz-noicon .svc-card .info{text-align:center}
/* Detail page without a photo: one centred column, no empty emoji square. */
.topaz-noicon .pdetail.no-img{grid-template-columns:1fr;max-width:680px;margin-inline:auto;text-align:center}
.topaz-noicon .pdetail.no-img .pdetail-media{display:none}
.topaz-noicon .pdetail.no-img .pd-head{flex-direction:column;align-items:center}
.topaz-noicon .pdetail.no-img .pd-price .price{justify-content:center}
.topaz-noicon .pdetail.no-img .pd-actions{justify-content:center}

/* ---- The card effect -----------------------------------------------------
   Same idea as the services cards on bahygroup.com: cards rest slightly faded
   and lowered and rise into place as they scroll into view; the one under the
   mouse (or, on touch screens, nearest the middle of the screen) lifts, brightens and glows in the theme's own colours, a brand bar sweeps
   across its top edge and its icon pulses. Only applied once main.js has run
   (.fx-card is added by script), so without JS every card stays fully visible. */
.topaz-fx .fx-card{opacity:.55;transform:translateY(26px) scale(.96);
  transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1),
    box-shadow .5s,border-color .5s,filter .5s;will-change:transform,opacity}
/* Scrolling into the middle band only REVEALS a card (full opacity, resting
   position). The lift/glow/bar/icon pulse belong to :hover on mouse devices —
   if .is-lit carried them too, a card in the middle of the screen would already
   be in its hover state and moving the mouse over it would change nothing.
   On touch screens there is no hover, so there the middle card gets the full
   effect (the --lit rules below are repeated under (hover:none)). */
.topaz-fx .fx-card.is-lit{opacity:1;transform:none}
.topaz-fx .fx-card:hover{opacity:1;transform:translateY(-6px) scale(1.03);z-index:2;
  border-color:rgba(var(--teal-rgb),.55);filter:brightness(1.03);
  box-shadow:0 22px 50px rgba(var(--deep-rgb),.20),0 0 0 1px rgba(var(--teal-rgb),.22),0 0 34px rgba(var(--teal-rgb),.26)}
:root[data-theme="dark"] .topaz-fx .fx-card:hover{filter:brightness(1.1);border-color:rgba(var(--teal-rgb),.7);
  box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 42px rgba(var(--teal-rgb),.42),0 0 84px rgba(var(--gold-rgb,194,167,94),.14)}
/* Brand bar sweeping across the top edge (from the reading side). */
.topaz-fx .fx-card{position:relative}
.topaz-fx .fx-card:not(.kids){overflow:hidden}
.topaz-fx .fx-card::after{content:"";position:absolute;top:0;inset-inline:0;height:3px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg,var(--teal),var(--gold));transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
[dir="rtl"] .topaz-fx .fx-card::after{transform-origin:right center}
.topaz-fx .fx-card:hover::after{transform:scaleX(1)}
/* Icon / photo inside the hovered card. */
.topaz-fx .fx-card .ic,.topaz-fx .fx-card .thumb .emoji,.topaz-fx .fx-card .thumb > img,
.topaz-fx .fx-card .kids-emoji,.topaz-fx .fx-card > .emoji{transition:transform .5s cubic-bezier(.22,.61,.36,1),filter .5s}
.topaz-fx .fx-card:hover .ic{transform:scale(1.12) rotate(-5deg);animation:tz-pulse 1.6s ease-in-out infinite}
[dir="rtl"] .topaz-fx .fx-card:hover .ic{transform:scale(1.12) rotate(5deg)}
.topaz-fx .fx-card:hover .thumb .emoji,.topaz-fx .fx-card:hover > .emoji{transform:scale(1.14);filter:drop-shadow(0 0 12px rgba(var(--teal-rgb),.55))}
.topaz-fx .fx-card:hover .thumb > img{transform:scale(1.06)}
@media (hover:none){
  .topaz-fx .fx-card.is-lit{transform:translateY(-4px) scale(1.03);z-index:2;
    border-color:rgba(var(--teal-rgb),.55);filter:brightness(1.03);
    box-shadow:0 22px 50px rgba(var(--deep-rgb),.20),0 0 0 1px rgba(var(--teal-rgb),.22),0 0 34px rgba(var(--teal-rgb),.26)}
  :root[data-theme="dark"] .topaz-fx .fx-card.is-lit{filter:brightness(1.1);border-color:rgba(var(--teal-rgb),.7);
    box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 42px rgba(var(--teal-rgb),.42),0 0 84px rgba(var(--gold-rgb,194,167,94),.14)}
  .topaz-fx .fx-card.is-lit::after{transform:scaleX(1)}
  .topaz-fx .fx-card.is-lit .ic{transform:scale(1.12) rotate(-5deg);animation:tz-pulse 1.6s ease-in-out infinite}
  [dir="rtl"] .topaz-fx .fx-card.is-lit .ic{transform:scale(1.12) rotate(5deg)}
  .topaz-fx .fx-card.is-lit .thumb .emoji,.topaz-fx .fx-card.is-lit > .emoji{transform:scale(1.14);filter:drop-shadow(0 0 12px rgba(var(--teal-rgb),.55))}
  .topaz-fx .fx-card.is-lit .thumb > img{transform:scale(1.06)}
}
@keyframes tz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--teal-rgb),.45)}50%{box-shadow:0 0 0 12px rgba(var(--teal-rgb),0)}}

@media (prefers-reduced-motion: reduce){
  .topaz-fx .fx-card,.topaz-fx .fx-card.is-lit,.topaz-fx .fx-card:hover{opacity:1;transform:none;transition:none;animation:none}
  .topaz-fx .fx-card .ic{animation:none}
}

/* ---- Services-page banners (بلوكات صفحة الخدمات) ---- */
.svc-banner{margin-bottom:20px}
.svc-banner.w-two-thirds{width:66.666%}
.svc-banner.w-half{width:50%}
.svc-banner.a-center{margin-inline:auto}
@media(max-width:760px){.svc-banner.w-two-thirds,.svc-banner.w-half{width:100%}}