/* ==========================================================================
   CityWorkshop — 3D Crystal Upgrade Layer (CWS_V_5_Fixed_7.3)
   --------------------------------------------------------------------------
   This is an ADDITIVE enhancement stylesheet, loaded after the active theme
   link (swiggy-premium.min.css by default). It does not replace or override
   brand colors — it layers a faceted-glass / crystal 3D look on top of the
   existing login card, customer hero card, and service tiles using the same
   --cust-brand / --cust-green variables already defined by the active theme,
   so the Swiggy identity is preserved while the depth and materials upgrade.

   Everything here is pure CSS (no new JS, no new HTTP requests, no external
   assets) — perspective tilt, prism edge light, and glass sheen are all done
   with gradients, transforms and box-shadow layering, so there is nothing
   here that can 404 or break on older browsers (unsupported properties just
   no-op gracefully).
   ========================================================================== */

:root{
  --crystal-brand: var(--cust-brand, #fc8019);
  --crystal-brand-2: var(--cust-brand-2, #ff9b43);
  --crystal-accent: var(--cust-green, #169c5a);
  --crystal-glass: rgba(255,255,255,.14);
  --crystal-glass-2: rgba(255,255,255,.04);
  --crystal-edge: rgba(255,255,255,.55);
  --crystal-shadow-deep: rgba(20,12,4,.35);
}

/* -------------------------------------------------------------------------
   Login card — faceted crystal glass panel with prism edge + gentle 3D tilt
   ------------------------------------------------------------------------- */
.v910-login-panel{ perspective: 1400px; }

.v910-login-card.antigravity-card,
.v910-login-card{
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(135deg, var(--crystal-glass) 0%, var(--crystal-glass-2) 42%, rgba(255,255,255,.02) 100%),
    linear-gradient(150deg, rgba(252,128,25,.10), rgba(22,156,90,.06) 60%, transparent 100%);
  border:1px solid transparent;
  background-clip: padding-box, padding-box;
  border-radius:32px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.35) inset,
    0 -40px 60px -40px rgba(255,255,255,.12) inset,
    0 30px 70px -20px var(--crystal-shadow-deep),
    0 10px 26px -12px rgba(0,0,0,.35);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}

/* Faceted crystal border — animated conic-gradient ring behind the card */
.v910-login-card.antigravity-card::before,
.v910-login-card::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background: conic-gradient(
    from var(--crystal-angle, 0deg),
    var(--crystal-edge) 0deg,
    rgba(252,128,25,.55) 60deg,
    rgba(255,255,255,.08) 120deg,
    rgba(22,156,90,.45) 200deg,
    rgba(255,255,255,.55) 260deg,
    var(--crystal-edge) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  z-index:0;
  animation: crystal-facet-spin 9s linear infinite;
}

/* Glass sheen sweep — a soft diagonal highlight drifting across the panel */
.v910-login-card.antigravity-card::after,
.v910-login-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.30) 45%, rgba(255,255,255,.06) 52%, transparent 65%);
  background-size:220% 220%;
  background-position: 120% -20%;
  pointer-events:none;
  z-index:1;
  animation: crystal-sheen-sweep 6s ease-in-out infinite;
}

.v910-login-card.antigravity-card > *,
.v910-login-card > *{ position:relative; z-index:2; }

.v910-login-panel:hover .v910-login-card.antigravity-card,
.v910-login-panel:hover .v910-login-card{
  transform: perspective(1400px) rotateX(2deg) rotateY(-3deg) translateZ(6px);
  box-shadow:
    0 2px 0 rgba(255,255,255,.4) inset,
    0 -40px 60px -40px rgba(255,255,255,.16) inset,
    0 44px 90px -24px var(--crystal-shadow-deep),
    0 14px 30px -10px rgba(0,0,0,.4);
}

@keyframes crystal-facet-spin{
  from{ --crystal-angle: 0deg; }
  to{ --crystal-angle: 360deg; }
}
@keyframes crystal-sheen-sweep{
  0%{ background-position: 130% -30%; }
  50%{ background-position: -10% 60%; }
  100%{ background-position: 130% -30%; }
}

/* -------------------------------------------------------------------------
   Customer hero card — same crystal glass treatment, brand-tinted
   ------------------------------------------------------------------------- */
.swiggy-hero-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 100%),
    linear-gradient(150deg, rgba(252,128,25,.14), rgba(22,156,90,.08) 70%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 26px 54px -22px rgba(58,41,24,.28),
    0 8px 18px -10px rgba(58,41,24,.14);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.swiggy-hero-card::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.5) 48%, transparent 60%);
  background-size:240% 240%;
  background-position: 130% -20%;
  pointer-events:none;
  animation: crystal-sheen-sweep 7s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
   Service tiles — small crystal facets that lift on hover
   ------------------------------------------------------------------------- */
.swiggy-service-tile{
  position:relative;
  transform-style:preserve-3d;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.swiggy-service-tile:hover,
.swiggy-service-tile.active{
  transform: perspective(700px) rotateX(4deg) translateY(-3px) translateZ(2px);
  box-shadow: 0 16px 26px -14px rgba(252,128,25,.35);
}

/* -------------------------------------------------------------------------
   Universal 3D crystal buttons — CWS_V_5_Fixed_7.4
   Applies to every .btn across every role (customer/engineer/admin/partner/
   guest/superadmin). Layers glass highlight + depth + hover lift on top of
   whichever background color that role already uses — it never overrides
   background-color itself, so Swiggy orange stays orange, admin purple
   stays purple, .btn.green stays green, etc. Pure additive depth/material.
   ------------------------------------------------------------------------- */
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 -4px 8px rgba(0,0,0,.16) inset,
    0 10px 22px -8px rgba(0,0,0,.32);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
}
.btn::before{
  content:'';
  position:absolute;
  inset:0 0 55% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events:none;
  border-radius:inherit;
  z-index:0;
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 45%, rgba(255,255,255,.06) 52%, transparent 65%);
  background-size:220% 220%;
  background-position:130% -20%;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
  z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
.btn:hover::after{ opacity:1; animation:crystal-sheen-sweep 1.3s ease-in-out; }
.btn:active{ transform:translateY(1px) scale(.985); filter:brightness(.97); }
.btn:disabled{ filter:grayscale(.15) brightness(.9); transform:none; }

@media (prefers-reduced-motion: reduce){
  .v910-login-card.antigravity-card::before,
  .v910-login-card::before,
  .v910-login-card.antigravity-card::after,
  .v910-login-card::after,
  .swiggy-hero-card::after,
  .btn:hover::after{
    animation: none !important;
  }
  .v910-login-card.antigravity-card,
  .v910-login-card,
  .swiggy-service-tile,
  .btn{
    transition: none !important;
  }
}