/* ==========================================================================
   WAX V6.1.1 — PREMIUM CLIENT PORTAL SHOWCASE
   Replaces the old HTML mockup with the approved premium dashboard visual.
   ========================================================================== */

.v611-dashboard-visual{
  position:relative!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:8px 0 0!important;
  overflow:visible!important;
}

.v611-dashboard-halo{
  position:absolute;
  z-index:0;
  left:50%;
  top:50%;
  width:92%;
  aspect-ratio:1.18/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,rgba(117,78,255,.22),rgba(117,78,255,.06) 38%,transparent 70%);
  filter:blur(8px);
}

.v611-dashboard-frame{
  position:relative;
  z-index:2;
  width:min(720px,100%);
  aspect-ratio:1448/1086;
  overflow:hidden;
  border:1px solid rgba(139,105,255,.28);
  border-radius:27px;
  background:#080c18;
  box-shadow:
    0 38px 100px rgba(0,0,0,.46),
    0 0 70px rgba(103,68,231,.16),
    inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(1400px) rotateY(-2.7deg) rotateX(.55deg);
  transform-origin:center;
}

.v611-dashboard-frame:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}

.v611-dashboard-frame picture,
.v611-dashboard-frame img{
  width:100%;
  height:100%;
  display:block;
}

.v611-dashboard-frame img{
  object-fit:cover;
}

.v611-hotspot{
  position:absolute;
  z-index:5;
  display:block;
  border-radius:16px;
  background:transparent;
  transition:background .18s ease,box-shadow .18s ease;
}
.v611-hotspot:hover{
  background:rgba(133,95,255,.08);
  box-shadow:inset 0 0 0 1px rgba(158,127,255,.24),0 0 25px rgba(106,69,235,.12);
}

/* Hotspots correspond to the real-looking CTA/card areas in the image. */
.v611-hotspot-new{left:25.8%;top:34.3%;width:22.2%;height:25.0%}
.v611-hotspot-track{left:49.1%;top:34.3%;width:21.4%;height:25.0%}
.v611-hotspot-account{left:71.5%;top:34.3%;width:21.3%;height:25.0%}
.v611-hotspot-register{left:67.7%;top:66.1%;width:22.8%;height:8.8%}

.v611-dashboard-caption{
  position:relative;
  z-index:4;
  width:min(650px,92%);
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:-24px auto 0;
  padding:0 14px 0 18px;
  border:1px solid rgba(132,99,255,.27);
  border-radius:15px;
  background:rgba(10,15,27,.94);
  box-shadow:0 18px 40px rgba(0,0,0,.30);
}
.v611-dashboard-caption>span{
  display:flex;
  align-items:center;
  gap:9px;
  color:#9ca6b8;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}
.v611-dashboard-caption>span i{
  width:8px;height:8px;border-radius:50%;
  background:#8e6dff;
  box-shadow:0 0 12px rgba(142,109,255,.9);
}
.v611-dashboard-caption>a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-radius:10px;
  background:linear-gradient(135deg,#6749ed,#8664ff);
  color:#fff;
  font-size:9px;
  font-weight:900;
  text-decoration:none;
}
.v611-dashboard-caption>a b{font-size:12px}

/* Wide desktop */
@media(min-width:1500px){
  .v611-dashboard-frame{width:min(760px,100%)}
}

/* Laptop */
@media(min-width:1081px) and (max-width:1360px){
  .v611-dashboard-frame{width:min(610px,100%)}
  .v611-dashboard-caption{width:min(555px,90%);margin-top:-20px}
}

/* Tablet — preserve visual quality but remove 3D distortion. */
@media(min-width:761px) and (max-width:1080px){
  .v611-dashboard-visual{
    width:100%;
    padding-top:2px!important;
  }
  .v611-dashboard-frame{
    width:min(590px,100%);
    border-radius:22px;
    transform:none;
  }
  .v611-dashboard-caption{
    width:min(530px,92%);
    min-height:49px;
    margin-top:-18px;
  }
}

/* iPhone / Android */
@media(max-width:760px){
  .v611-dashboard-visual{
    width:100%;
    margin-top:8px!important;
    padding:0!important;
  }
  .v611-dashboard-halo{
    width:118%;
    opacity:.78;
  }
  .v611-dashboard-frame{
    width:100%;
    max-width:500px;
    border-radius:20px;
    transform:none;
    box-shadow:
      0 26px 65px rgba(0,0,0,.40),
      0 0 42px rgba(103,68,231,.13);
  }

  /* Do not make invisible hotspots hard to use on phones:
     keep them large and aligned to visual cards. */
  .v611-hotspot{border-radius:11px}
  .v611-hotspot-new{left:25%;top:34%;width:23%;height:26%}
  .v611-hotspot-track{left:48%;top:34%;width:23%;height:26%}
  .v611-hotspot-account{left:71%;top:34%;width:22%;height:26%}
  .v611-hotspot-register{left:66%;top:65%;width:25%;height:10%}

  .v611-dashboard-caption{
    width:calc(100% - 24px);
    min-height:50px;
    margin-top:-14px;
    padding:0 10px 0 13px;
    border-radius:13px;
  }
  .v611-dashboard-caption>span{
    font-size:9px;
    letter-spacing:.06em;
  }
  .v611-dashboard-caption>a{
    min-height:34px;
    font-size:9px;
  }
}

/* Compact phones */
@media(max-width:390px){
  .v611-dashboard-frame{border-radius:17px}
  .v611-dashboard-caption{
    width:calc(100% - 14px);
    min-height:46px;
    margin-top:-11px;
  }
  .v611-dashboard-caption>span{font-size:8px}
  .v611-dashboard-caption>a{padding:0 9px;font-size:8px}
}

/* Landscape mobile */
@media(max-width:900px) and (orientation:landscape) and (max-height:520px){
  .v611-dashboard-frame{
    width:min(440px,100%);
  }
  .v611-dashboard-caption{
    display:none;
  }
}

@media(hover:none){
  .v611-hotspot:hover{background:transparent;box-shadow:none}
}