/* ExtraordinaryViews v13I — CINEMATIC FILES BACKDROP
   VISUAL ONLY. No player/download/auth/message/PHP logic. */

body.ev-account-bg{
  background:#041b2a;
  min-height:100vh;
}

/* The approved Extraordinary Views scene is the Files-page backdrop. */
body.ev-account-bg #files.ev-files-panel{
  position:relative;
  isolation:isolate;
  padding:clamp(18px,3vw,42px);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(rgba(2,20,32,.42),rgba(2,20,32,.58)),
    url("assets/files-cinematic-backdrop.png") center center / cover no-repeat;
  box-shadow:0 26px 70px rgba(0,0,0,.42);
  border:1px solid rgba(226,181,76,.34);
}

/* Dark veil behind the REAL live controls so mock interface in artwork
   becomes atmosphere rather than competing with the working interface. */
body.ev-account-bg #files.ev-files-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(2,20,32,.20),rgba(2,20,32,.48) 25%,rgba(2,20,32,.66) 50%,rgba(2,20,32,.48) 75%,rgba(2,20,32,.20));
  backdrop-filter:blur(1.5px);
}

body.ev-account-bg #files .ev-files-stage{
  max-width:1180px;
  margin:0 auto;
  padding:22px !important;
  border-radius:22px;
  background:rgba(3,25,38,.88) !important;
  border:1px solid rgba(225,183,82,.30) !important;
  box-shadow:0 22px 58px rgba(0,0,0,.38) !important;
  backdrop-filter:blur(12px);
}

body.ev-account-bg #files .ev-files-stage>h2{
  margin:0 0 12px;
  color:#fff !important;
  font-size:clamp(1.8rem,3vw,2.7rem);
  text-shadow:0 3px 18px rgba(0,0,0,.5);
}

body.ev-account-bg #files .notice{
  margin-top:20px!important;
  color:#f4dfaa!important;
  background:rgba(3,22,33,.90)!important;
  border:1px solid rgba(224,183,86,.30)!important;
  border-left:4px solid #d8aa45!important;
  border-radius:12px!important;
}
body.ev-account-bg #files .notice strong{color:#fff!important}

@media(max-width:800px){
  body.ev-account-bg #files.ev-files-panel{
    padding:12px;
    background-position:center top;
  }
  body.ev-account-bg #files .ev-files-stage{
    padding:14px!important;
  }
}


/* v13I HOTFIX — force-remove legacy white Files backgrounds.
   Deliberately does NOT depend on the body class. */
#files,
#files.panel,
#files .account-card,
#files .ev-files-stage,
#customerFiles,
#customerFiles .ev-delivery-list {
  background-color: transparent !important;
}

#files.panel {
  background-image:
    linear-gradient(rgba(2,20,32,.50),rgba(2,20,32,.68)),
    url("assets/files-cinematic-backdrop.png") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  border-radius:28px !important;
  padding:28px !important;
}

#files .account-card,
#files .ev-files-stage {
  background:rgba(3,25,38,.90) !important;
  color:#fff !important;
  border:1px solid rgba(216,170,69,.34) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.38) !important;
}

#files h2,
#files h3,
#files p { color:inherit; }

/* Override the legacy white delivery cards injected by customer-files.js */
#customerFiles .ev-delivery,
#files .ev-delivery {
  background:linear-gradient(115deg,rgba(5,29,43,.97),rgba(7,48,57,.95)) !important;
  color:#fff !important;
  border:1px solid rgba(216,170,69,.34) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.28) !important;
}
#customerFiles .ev-main h3,
#files .ev-main h3 { color:#fff !important; }
#customerFiles .ev-project,
#files .ev-project { color:#f0d38b !important; }
#customerFiles .ev-meta,
#files .ev-meta { color:#bed0d6 !important; }
#customerFiles .ev-thanks,
#files .ev-thanks {
  background:rgba(255,255,255,.06) !important;
  color:#dce7ea !important;
}
#customerFiles .ev-preview,
#files .ev-preview {
  background:linear-gradient(145deg,#123d48,#071c28) !important;
  border-color:rgba(216,170,69,.30) !important;
}


/* ==========================================================
   v13J — SONG CARD INTERFACE
   Makes the REAL website song cards match the approved mockup.
   No image-generation / no fake interface.
   ========================================================== */

#files .ev-files-stage{
  background:rgba(2,22,34,.94)!important;
  border:1px solid rgba(45,157,190,.38)!important;
  color:#fff!important;
}

#customerFiles .ev-delivery,
#files .ev-delivery{
  grid-template-columns:140px minmax(0,1fr) 225px!important;
  gap:18px!important;
  min-height:145px!important;
  padding:12px!important;
  border-radius:15px!important;
  background:linear-gradient(110deg,#06263a 0%,#072f42 58%,#062536 100%)!important;
  border:1px solid rgba(20,145,190,.48)!important;
  box-shadow:0 9px 25px rgba(0,0,0,.26)!important;
}

/* LEFT MP3 PICTURE: turn the old large waveform/music-note image into
   a neat artwork/file tile, so the ugly MP3 graphic is covered. */
#customerFiles .ev-preview,
#files .ev-preview{
  width:140px!important;
  height:120px!important;
  border-radius:10px!important;
  background:
    linear-gradient(145deg,rgba(7,45,61,.98),rgba(3,27,41,.98))!important;
  border:1px solid rgba(216,170,69,.34)!important;
  position:relative!important;
  overflow:hidden!important;
}

/* Cover the generated waveform bars */
#customerFiles .ev-preview.audio:before,
#files .ev-preview.audio:before{
  display:none!important;
}

/* Cover the old large music note with a clean file-ready tile */
#customerFiles .ev-preview.audio .ev-bigicon,
#files .ev-preview.audio .ev-bigicon{
  font-size:0!important;
}
#customerFiles .ev-preview.audio:after,
#files .ev-preview.audio:after{
  content:"♫\A MP3";
  white-space:pre;
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:Arial,sans-serif;
  font-weight:900;
  font-size:27px;
  line-height:1.35;
  letter-spacing:.08em;
  color:#e1b45a;
  background:
    radial-gradient(circle at 50% 35%,rgba(216,170,69,.16),transparent 34%),
    linear-gradient(145deg,#0a3b50,#041f30);
}

/* Main song information */
#customerFiles .ev-main h3,
#files .ev-main h3{
  color:#fff!important;
  font-size:22px!important;
  margin:0 0 3px!important;
}
#customerFiles .ev-project,
#files .ev-project{
  color:#f1d18a!important;
  font-size:14px!important;
}
#customerFiles .ev-meta,
#files .ev-meta{
  color:#c5d6dd!important;
  font-size:13px!important;
}

/* Put the REAL audio player inside a dark bordered box like the mockup */
#customerFiles .ev-main audio,
#files .ev-main audio{
  display:block!important;
  width:100%!important;
  height:44px!important;
  margin-top:8px!important;
  padding:5px 8px!important;
  box-sizing:border-box!important;
  border-radius:10px!important;
  border:1px solid rgba(31,151,190,.45)!important;
  background:#0a2b3e!important;
  box-shadow:inset 0 0 0 999px rgba(5,34,50,.18)!important;
}

/* Add a visual MP3 FILE READY label immediately above player */
#customerFiles .ev-main:has(audio)::before,
#files .ev-main:has(audio)::before{
  content:"▤  MP3 FILE READY";
  display:block;
  width:max-content;
  max-width:100%;
  margin:7px 0 -3px;
  padding:5px 10px;
  border-radius:7px;
  border:1px solid rgba(216,170,69,.34);
  background:rgba(5,36,52,.94);
  color:#e5ba60;
  font:800 12px/1.2 Arial,sans-serif;
  letter-spacing:.04em;
}

/* Quote strip */
#customerFiles .ev-thanks,
#files .ev-thanks{
  margin-top:8px!important;
  padding:6px 9px!important;
  border:0!important;
  background:transparent!important;
  color:#d7e1e5!important;
  font-size:12px!important;
}

/* Right-hand controls */
#customerFiles .ev-actions,
#files .ev-actions{
  gap:8px!important;
}
#customerFiles .ev-expiry,
#files .ev-expiry{
  background:rgba(17,78,66,.55)!important;
  border:1px solid rgba(70,160,121,.24)!important;
  color:#a9e2bd!important;
  border-radius:10px!important;
}
#customerFiles .ev-expiry strong,
#files .ev-expiry strong{
  color:#dff5e5!important;
}
#customerFiles .ev-download,
#files .ev-download{
  min-height:42px!important;
  border-radius:9px!important;
  background:#087ca8!important;
  color:#fff!important;
  box-shadow:none!important;
}
#customerFiles .ev-secondary,
#files .ev-secondary{
  min-height:38px!important;
  border-radius:9px!important;
  border:1px solid #1687ad!important;
  background:#06283a!important;
  color:#fff!important;
}

/* Responsive */
@media(max-width:800px){
  #customerFiles .ev-delivery,#files .ev-delivery{
    grid-template-columns:105px minmax(0,1fr)!important;
  }
  #customerFiles .ev-preview,#files .ev-preview{
    width:105px!important;height:105px!important;
  }
  #customerFiles .ev-actions,#files .ev-actions{
    grid-column:1/-1!important;
    grid-template-columns:1fr 1fr!important;
  }
}
@media(max-width:560px){
  #customerFiles .ev-delivery,#files .ev-delivery{
    grid-template-columns:1fr!important;
  }
  #customerFiles .ev-preview,#files .ev-preview{
    width:100%!important;height:120px!important;
  }
  #customerFiles .ev-actions,#files .ev-actions{
    grid-template-columns:1fr!important;
  }
}

/* v13L — PREMIUM BUTTON PASS — visual only */
:root{--ev-gold:#d9aa49;--ev-gold2:#f0cf7a;--ev-cyan:#16a9d4;--ev-deep:#052438;--ev-deeper:#031b2a}

/* Account section tabs */
.dashbar{gap:9px!important;padding:10px!important;background:rgba(3,24,37,.92)!important;border:1px solid rgba(217,170,73,.22)!important;border-radius:16px!important;box-shadow:0 12px 30px rgba(0,0,0,.24)!important}
.dashbar button{min-height:44px!important;padding:10px 15px!important;border-radius:11px!important;border:1px solid rgba(217,170,73,.25)!important;background:linear-gradient(180deg,rgba(10,52,69,.94),rgba(4,31,46,.96))!important;color:#eaf5f8!important;font-weight:850!important;letter-spacing:.01em!important;box-shadow:inset 0 1px rgba(255,255,255,.05)!important;transition:transform .16s ease,filter .16s ease,border-color .16s ease,box-shadow .16s ease!important}
.dashbar button:hover{transform:translateY(-1px)!important;filter:brightness(1.12)!important;border-color:rgba(240,207,122,.72)!important;box-shadow:0 7px 18px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08)!important}
.dashbar button.active{background:linear-gradient(135deg,var(--ev-gold),var(--ev-gold2))!important;color:#08293a!important;border-color:#f2d68e!important;box-shadow:0 0 0 1px rgba(255,222,142,.25),0 8px 22px rgba(217,170,73,.22)!important}
.dashbar .unread{background:#e34c72!important;color:#fff!important;box-shadow:0 0 0 2px rgba(255,255,255,.13)!important}

/* Global action buttons in account panels */
.account-shell .btn,.account-shell button.btn,.account-shell a.btn,.account-shell .signout-btn,.account-shell .google-btn,
#files .ev-download,#files .ev-secondary{border-radius:11px!important;min-height:43px!important;padding:10px 17px!important;font-weight:850!important;letter-spacing:.01em!important;text-decoration:none!important;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;cursor:pointer}
.account-shell .btn:hover,.account-shell button.btn:hover,.account-shell a.btn:hover,.account-shell .signout-btn:hover,.account-shell .google-btn:hover,#files .ev-download:hover,#files .ev-secondary:hover{transform:translateY(-1px)!important;filter:brightness(1.08)!important}
.account-shell .btn:active,.account-shell button.btn:active,.account-shell a.btn:active,#files .ev-download:active,#files .ev-secondary:active{transform:translateY(1px)!important}

/* Primary / approval / order buttons */
.account-shell .btn-gold,#files .ev-download{background:linear-gradient(135deg,var(--ev-gold),var(--ev-gold2))!important;color:#09293a!important;border:1px solid #f2d68e!important;box-shadow:0 8px 20px rgba(217,170,73,.18)!important}

/* Revision / attention buttons */
.account-shell .btn-pink{background:linear-gradient(135deg,#b72f62,#dc4778)!important;color:#fff!important;border:1px solid rgba(255,174,203,.4)!important;box-shadow:0 8px 20px rgba(183,47,98,.18)!important}

/* Secondary, file info and utility buttons */
#files .ev-secondary,.account-shell .signout-btn{background:linear-gradient(180deg,#0a4159,#062d42)!important;color:#fff!important;border:1px solid rgba(35,169,210,.62)!important;box-shadow:inset 0 1px rgba(255,255,255,.06)!important}

/* Google button: keep familiar white but make it premium */
.account-shell .google-btn{background:rgba(255,255,255,.96)!important;color:#17232b!important;border:1px solid rgba(255,255,255,.85)!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important}

/* Plain buttons inside premium panels that weren't assigned a btn class */
#projects button:not(.btn),#messages button:not(.btn),#artwork button:not(.btn),#orders button:not(.btn),#rewards button:not(.btn),#details button:not(.btn){border-radius:10px!important;border:1px solid rgba(217,170,73,.36)!important;background:linear-gradient(180deg,#0a4159,#062d42)!important;color:#fff!important;padding:10px 15px!important;font-weight:800!important;cursor:pointer!important;transition:.16s ease!important}
#projects button:not(.btn):hover,#messages button:not(.btn):hover,#artwork button:not(.btn):hover,#orders button:not(.btn):hover,#rewards button:not(.btn):hover,#details button:not(.btn):hover{filter:brightness(1.12)!important;transform:translateY(-1px)!important;border-color:rgba(240,207,122,.75)!important}

/* Focus accessibility */
.account-shell button:focus-visible,.account-shell a.btn:focus-visible,.dashbar button:focus-visible,#files .ev-download:focus-visible,#files .ev-secondary:focus-visible{outline:3px solid rgba(43,190,231,.72)!important;outline-offset:3px!important}

@media(max-width:700px){.dashbar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.dashbar button{width:100%!important;padding:9px 8px!important}.account-shell .action-row .btn,.account-shell .action-row button{flex:1 1 180px}}


/* ==========================================================
   v13M — PREMIUM ACCOUNT DASHBOARD HEADER
   Presentation only: no auth, messaging, files or PHP logic.
   ========================================================== */

body.ev-account-bg .account-shell{
  max-width:1240px!important;
}

/* Main customer hero */
body.ev-account-bg .account-hero{
  position:relative;
  overflow:hidden;
  border-radius:28px!important;
  padding:34px 38px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 82% 15%,rgba(226,181,76,.18),transparent 26%),
    linear-gradient(120deg,rgba(3,24,39,.98),rgba(6,49,62,.96) 58%,rgba(3,28,43,.98))!important;
  border:1px solid rgba(226,181,76,.30)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.32)!important;
}
body.ev-account-bg .account-hero:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 45%,rgba(255,255,255,.035),transparent 70%);
}
body.ev-account-bg .account-hero .eyebrow{
  color:#e6bd62!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
body.ev-account-bg .account-hero h1{
  color:#fff!important;
  text-shadow:0 4px 22px rgba(0,0,0,.35);
}
body.ev-account-bg .account-hero>p:not(.eyebrow):not(.login-note){
  color:#d5e1e6!important;
  max-width:850px;
}
body.ev-account-bg .login-note{
  color:#b9cbd2!important;
}

/* Signed-in customer identity */
body.ev-account-bg .user-chip{
  position:relative;
  z-index:2;
  padding:10px 14px!important;
  border-radius:14px!important;
  border:1px solid rgba(226,181,76,.34)!important;
  background:rgba(2,22,34,.72)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(10px);
}
body.ev-account-bg .user-chip img{
  width:40px!important;
  height:40px!important;
  border:2px solid #d9ad4d!important;
  box-shadow:0 0 0 3px rgba(217,173,77,.12);
}
body.ev-account-bg .user-chip strong{color:#fff!important}
body.ev-account-bg .user-chip small{color:#c6d6dc!important}

/* Account section navigation becomes one premium control deck */
body.ev-account-bg .dashbar{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:8px!important;
  margin:22px 0 24px!important;
  padding:10px!important;
  border-radius:19px!important;
  background:linear-gradient(180deg,rgba(3,25,38,.98),rgba(3,34,47,.96))!important;
  border:1px solid rgba(226,181,76,.25)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.27)!important;
  backdrop-filter:blur(12px);
}
body.ev-account-bg .dashbar button{
  position:relative;
  min-height:52px!important;
  padding:10px 8px!important;
  border-radius:11px!important;
  border:1px solid transparent!important;
  background:transparent!important;
  color:#c7d7dd!important;
  font-weight:850!important;
  letter-spacing:.01em;
  box-shadow:none!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
}
body.ev-account-bg .dashbar button:hover{
  transform:translateY(-2px);
  color:#fff!important;
  background:rgba(11,79,98,.48)!important;
  border-color:rgba(72,181,211,.34)!important;
}
body.ev-account-bg .dashbar button.active{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(11,104,133,.94),rgba(7,72,94,.96))!important;
  border-color:rgba(76,190,222,.72)!important;
  box-shadow:0 0 0 1px rgba(76,190,222,.10),0 7px 18px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.10)!important;
}
body.ev-account-bg .dashbar button.active:after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:4px;
  height:2px;
  border-radius:99px;
  background:#e2b64f;
  box-shadow:0 0 9px rgba(226,182,79,.65);
}

/* Cleaner notification badge */
body.ev-account-bg .dashbar .unread{
  min-width:19px!important;
  height:19px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:#d7a73f!important;
  color:#092536!important;
  border:1px solid rgba(255,239,191,.6)!important;
  font-size:10px!important;
  font-weight:950!important;
  box-shadow:0 2px 8px rgba(0,0,0,.24)!important;
}

/* Make panels visually connect to the dashboard deck */
body.ev-account-bg .panel.active:not(#files){
  border-radius:22px;
  padding-top:2px;
}

/* Mobile/tablet */
@media(max-width:1050px){
  body.ev-account-bg .dashbar{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}
@media(max-width:700px){
  body.ev-account-bg .account-hero{
    padding:25px 20px!important;
    border-radius:20px!important;
  }
  body.ev-account-bg .dashbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    padding:8px!important;
  }
  body.ev-account-bg .dashbar button{
    min-height:48px!important;
    font-size:13px!important;
  }
}