/* MoMPA 3D Gallery — extracted from property.blade.php (design unchanged).
   Single :root token source (gold theme values consolidated here). */
/* ===== MoMPA 3D Photo Gallery (virtual-tour design — verbatim) ===== */
  :root{
    --bg:#FFF9EF;      /* gold theme (consolidated — single source) */
    --bg-2:#F6E8CD;
    --ink:#3B1268;
    --muted:#8D8895;
    --line:rgba(83,27,150,.14);
    --glass:rgba(83,27,150,.05);
    --orange:#C79A3C;   /* brand gold */
    --orange-2:#E9C88B; /* light gold */
    --radius:22px;
    --font-display:"Fraunces",Georgia,serif;
    --font:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }

  .gallery3d{
    position:relative;overflow:hidden;
    padding:clamp(34px,5vw,68px) clamp(14px,3vw,40px) clamp(30px,4vw,54px);
    background:
      radial-gradient(1100px 520px at 50% -8%, rgba(199,154,60,.10) 0%, rgba(199,154,60,0) 58%),
      radial-gradient(900px 700px at 50% 120%, rgba(122,46,102,.16) 0%, rgba(60,80,140,0) 60%),
      linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
    isolation:isolate;
  }
  .ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
  .ambient span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.14;
    background:radial-gradient(circle,var(--orange) 0%,rgba(199,154,60,0) 70%)}
  .ambient span:nth-child(1){width:360px;height:360px;top:-60px;left:8%}
  .ambient span:nth-child(2){width:300px;height:300px;bottom:6%;right:6%;opacity:.10}

  /* HEADER */
  .g-head{text-align:center;max-width:640px;margin:0 auto clamp(6px,2vw,18px)}
  .g-title{
    margin:0 0 8px;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.08;
    font-size:clamp(1.9rem,5vw,3rem);color:var(--ink);
  }
  .g-title .hl{color:var(--orange)}
  .g-sub{margin:0;color:var(--muted);font-size:clamp(.9rem,1.7vw,1.05rem);font-weight:500}

  /* STAGE */
  .stage{position:relative;max-width:1120px;margin:0 auto;
    height:clamp(400px,58vw,560px);display:flex;align-items:center;justify-content:center}
  .scene{position:relative;width:100%;height:100%;
    perspective:1200px;perspective-origin:50% 30%;
    display:flex;align-items:center;justify-content:center}

  /* glossy 3D tilted tray */
  .podium{
    position:absolute;left:50%;top:66%;z-index:0;pointer-events:none;
    width:min(94%,860px);aspect-ratio:1/1;max-height:none;
    transform:translate(-50%,-50%) rotateX(79deg);
    border-radius:50%;
    background:radial-gradient(closest-side, #3A1B33 0%, #281028 46%, #1B0A1E 66%, #100614 100%);
    box-shadow:
      inset 0 0 70px rgba(0,0,0,.72),
      inset 0 0 0 2px rgba(233,200,139,.06),
      0 0 0 12px #1C0C22,
      0 0 0 13px rgba(233,200,139,.08),
      0 0 0 27px #130818,
      0 0 60px rgba(0,0,0,.6);
  }
  .podium::after{content:"";position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(ellipse at 50% 40%, rgba(199,154,60,.10), rgba(199,154,60,0) 52%)}
  /* subtle blue-ish floor bounce under the tray */
  .floorglow{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:0;pointer-events:none;
    width:min(58%,500px);height:78px;border-radius:50%;filter:blur(14px);
    background:radial-gradient(ellipse at 50% 0%, rgba(199,154,60,.13), rgba(199,154,60,0) 62%)}

  .ring{position:relative;width:100%;height:100%;transform-style:preserve-3d;
    transform:scale(var(--zoom,1));transition:transform .18s ease-out;will-change:transform;
    touch-action:pan-y;cursor:grab;z-index:2}
  .ring.grabbing{cursor:grabbing;transition:none}

  /* CARDS */
  .card{position:absolute;top:46%;left:50%;width:var(--cardw,232px);aspect-ratio:3/4;
    transform:translate(-50%,-50%);transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}
  .media{position:relative;width:100%;height:100%;border-radius:var(--radius);overflow:hidden;
    border:3px solid rgba(255,255,255,.88);
    background:linear-gradient(135deg,#33172E,#1E0C20);
    box-shadow:0 24px 50px rgba(0,0,0,.55);transition:box-shadow .3s ease,border-color .3s ease}
  .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
  .media img.loaded{opacity:1}
  .media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%)}
  .tag{position:absolute;left:10px;bottom:10px;z-index:2;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    padding:6px 11px;border-radius:999px;
    background:rgba(26,10,30,.6);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
    color:#fff;font-size:.7rem;font-weight:600;box-shadow:0 6px 16px rgba(0,0,0,.4);
    transition:left .3s ease,right .3s ease,padding .3s ease,font-size .3s ease}
  .tag svg{width:12px;height:12px;color:var(--orange)}

  .card.is-active{z-index:1000}
  .card.is-active .media{border-color:#fff;
    box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(199,154,60,.4),0 0 50px rgba(199,154,60,.30)}
  /* active card: wide centred label pill (like the reference) */
  .card.is-active .tag{left:12px;right:12px;bottom:14px;justify-content:center;
    padding:11px 16px;font-size:.9rem;gap:9px}
  .card.is-active .tag svg{width:15px;height:15px}

  /* MoMPA brand cover card */
  .media.brand{background:linear-gradient(160deg,#6B2359 0%,#46143C 55%,#320D2B 100%)}
  .media.brand::after{background:radial-gradient(120% 90% at 50% 6%, rgba(199,154,60,.24), rgba(199,154,60,0) 58%)}
  .brand-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:7px;text-align:center;padding:18px;color:#FAF3E7}
  .brand-inner .ico{width:44px;height:44px;color:#C79A3C;margin-bottom:2px}
  .brand-name{font-size:1.45rem;font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.1}
  .brand-tag{font-size:.78rem;font-weight:600;color:#E9C88B}
  .brand-loc{margin-top:6px;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#FAF3E7;
    padding:4px 12px;border:1px solid rgba(250,243,231,.35);border-radius:999px}

  /* MoMPA banner strip (overlay for a real building photo: set banner:true on the item) */
  .banner{position:absolute;left:0;right:0;top:56%;transform:translateY(-50%);z-index:2;
    display:flex;align-items:center;gap:10px;justify-content:center;padding:11px 12px;
    background:linear-gradient(90deg,rgba(70,20,60,.95),rgba(120,45,95,.95));box-shadow:0 8px 22px rgba(0,0,0,.42)}
  .banner .ico{width:26px;height:26px;color:#C79A3C;flex:none}
  .banner-txt{display:flex;flex-direction:column;line-height:1.12;text-align:left}
  .banner-txt b{color:#fff;font-size:.98rem;font-weight:800}
  .banner-txt span{color:#E9C88B;font-size:.64rem;font-weight:600}

  .thumb.brandthumb{display:grid;place-items:center;background:linear-gradient(160deg,#5A1A4D,#320D2B);color:#C79A3C}
  .thumb.brandthumb svg{width:24px;height:24px}

  /* NAV */
  .nav{position:absolute;top:44%;z-index:1200;width:54px;height:54px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;color:var(--orange);
    background:rgba(26,10,30,.55);border:1.5px solid rgba(199,154,60,.55);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 12px 30px rgba(0,0,0,.45);
    transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
  .nav svg{width:20px;height:20px}
  .nav.prev{left:clamp(2px,2vw,20px)}
  .nav.next{right:clamp(2px,2vw,20px)}
  .nav:hover{background:var(--orange);color:#2B1226;transform:scale(1.08);box-shadow:0 16px 34px rgba(199,154,60,.4)}
  .nav:active{transform:scale(.95)}

  /* CAPTION */
  .caption{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);z-index:1100;text-align:center;width:max-content}
  .cap-count{display:block;font-size:1rem;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.1em}

  /* LABEL CHIPS — click a room name to bring it to the front */
  .gallery3d .chips{display:flex;flex-wrap:nowrap;gap:9px;justify-content:flex-start;max-width:880px;margin:clamp(-34px,-3vw,-18px) auto 0;
    padding:4px 10px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gallery3d .chips::-webkit-scrollbar{display:none}
  @media (min-width:721px){.gallery3d .chips{flex-wrap:wrap;justify-content:center;overflow:visible}}
  .gallery3d .chip{flex:0 0 auto;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;
    font-family:var(--font);font-size:.82rem;font-weight:600;color:var(--muted);
    background:var(--glass);border:1px solid var(--line);
    transition:color .2s ease,border-color .2s ease,background .2s ease,transform .18s ease}
  .gallery3d .chip:hover{color:#fff;border-color:rgba(199,154,60,.5);transform:translateY(-1px)}
  .gallery3d .chip.active{color:#2B1226;background:linear-gradient(135deg,var(--orange),var(--orange-2));
    border-color:transparent;box-shadow:0 8px 20px rgba(199,154,60,.35)}
  .gallery3d .chip:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

  /* THUMBS */
  .thumbs{display:flex;gap:11px;justify-content:center;max-width:840px;margin:clamp(22px,3vw,34px) auto 0;
    padding:6px 8px 10px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .thumbs::-webkit-scrollbar{display:none}
  @media (max-width:720px){.thumbs{justify-content:flex-start}}
  .thumb{flex:0 0 auto;width:54px;height:54px;border-radius:50%;padding:0;overflow:hidden;cursor:pointer;position:relative;
    border:2px solid rgba(255,255,255,.14);background:#2B1329;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s ease}
  .thumb img.loaded{opacity:1}
  .thumb:hover{transform:translateY(-3px);border-color:var(--orange-2)}
  .thumb.active{border-color:var(--orange);transform:translateY(-4px) scale(1.07);box-shadow:0 8px 22px rgba(199,154,60,.45)}

  /* HINT + CONTROLS */
  .hint{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
    text-align:center;color:var(--muted);font-size:.85rem;font-weight:500;margin:20px auto 0}
  .hint svg{width:15px;height:15px;opacity:.75}
  .hint .dot{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5}

  .controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
  .ctrl{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;cursor:pointer;
    font-family:var(--font);font-size:.9rem;font-weight:600;color:var(--ink);
    background:var(--glass);border:1px solid var(--line);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .18s ease,background .2s ease,color .2s ease,box-shadow .2s ease,border-color .2s ease}
  .ctrl svg{width:16px;height:16px}
  .ctrl:hover{transform:translateY(-2px);border-color:rgba(199,154,60,.5)}
  .ctrl.primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#2B1226;border-color:transparent;
    box-shadow:0 12px 28px rgba(199,154,60,.34)}
  .ctrl.primary:hover{box-shadow:0 16px 34px rgba(199,154,60,.45)}
  .ctrl.on{color:var(--orange);border-color:rgba(199,154,60,.6)}
  .ctrl.on .spin{animation:spin 2.6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .nav:focus-visible,.thumb:focus-visible,.ctrl:focus-visible,.ring:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

  .gallery3d:fullscreen{display:flex;flex-direction:column;justify-content:center}
  .gallery3d:fullscreen .stage{height:min(64vh,620px)}

  @media (max-width:640px){.nav{width:46px;height:46px}.thumb{width:48px;height:48px}}
  @media (prefers-reduced-motion:reduce){.ring{transition:none}.card{transition:none}}

  /* LIGHTBOX — tap the centre card to expand the photo */
  .lightbox{position:fixed;inset:0;z-index:6000;display:none;flex-direction:column;align-items:center;justify-content:center;
    gap:16px;padding:22px;background:rgba(18,7,22,.94);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .lightbox.open{display:flex}
  .lightbox img{max-width:94vw;max-height:74vh;object-fit:contain;border-radius:18px;
    border:3px solid #fff;box-shadow:0 30px 80px rgba(0,0,0,.7);
    animation:lbin .28s cubic-bezier(.2,.8,.3,1)}
  @keyframes lbin{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
  .lb-label{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;
    background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff;font-weight:700;font-size:.95rem}
  .lb-label svg{width:15px;height:15px;color:var(--orange)}
  .lb-close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s ease,color .2s ease,transform .2s ease}
  .lb-close svg{width:20px;height:20px}
  .lb-close:hover{background:var(--orange);color:#2B1226;transform:scale(1.06)}
  .lb-hint{color:var(--muted);font-size:.8rem;font-weight:500}
  .lightbox img{user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:pan-y}
  .lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;cursor:pointer;
    display:grid;place-items:center;color:var(--orange);background:rgba(26,10,30,.6);border:1.5px solid rgba(199,154,60,.55);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s ease,color .2s ease,transform .2s ease;z-index:2}
  .lb-nav svg{width:19px;height:19px}
  .lb-nav.prev{left:12px}.lb-nav.next{right:12px}
  .lb-nav:hover{background:var(--orange);color:#2B1226;transform:translateY(-50%) scale(1.07)}

/* ---- gold theme component overrides (same file — no cross-file layering) ---- */
/* ---- gallery gold + light chrome (from blade) ---- */
/* ---- 3D gallery -> light gold premium ---- */
.gallery3d{background:
  radial-gradient(1100px 520px at 50% -8%, rgba(217,146,43,.20) 0%, rgba(217,146,43,0) 58%),
  radial-gradient(900px 700px at 50% 120%, rgba(199,131,32,.22) 0%, rgba(199,131,32,0) 60%),
  linear-gradient(180deg,#FFFBF2 0%,#F6E8CD 100%)}
.gallery3d .podium{background:radial-gradient(closest-side,#EBD6AC 0%,#E3C998 46%,#D9BC85 66%,#CBAD74 100%);
  box-shadow:inset 0 0 70px rgba(160,120,40,.35),inset 0 0 0 2px rgba(255,255,255,.5),
  0 0 0 12px #EFE0BF,0 0 0 13px rgba(199,131,32,.25),0 0 0 27px #F3E7CC,0 0 40px rgba(160,120,40,.25)}
.gallery3d .floorglow{opacity:.35}
.gallery3d .ambient span{opacity:.20}
.gallery3d .chip{background:#fff;color:#3B1268;border-color:rgba(83,27,150,.18)}
.gallery3d .chip:hover{color:#3B1268;border-color:rgba(199,131,32,.55)}

/* Accessibility: respect reduced motion (auto-rotate JS already honours it) */
@media (prefers-reduced-motion: reduce){
  .gallery3d .ring,.gallery3d .card{transition:none!important;animation:none!important}
  .pg-card,.pd2 *{transition:none!important}
}

/* Desktop: chips ko podium se thoda neeche saans dene ki jagah (text hide fix) */
@media (min-width:721px){
  .gallery3d .chips{margin-top:16px}
}