/* ============================================================
   VISION MEDIA - Final Polish Layer
   تطبيق نهائي لتوحيد الهوية التقنية والإعلانية على كل الصفحات
   ============================================================ */
:root{
  --vm-bg:#060A14;
  --vm-bg2:#0B1020;
  --vm-panel:rgba(15,23,42,.72);
  --vm-panel2:rgba(255,255,255,.075);
  --vm-gold:#F5C542;
  --vm-gold2:#D4AF37;
  --vm-blue:#38BDF8;
  --vm-purple:#A78BFA;
  --vm-text:#fff;
  --vm-muted:rgba(255,255,255,.70);
  --vm-border:rgba(255,255,255,.14);
  --vm-radius:30px;
  --vm-shadow:0 26px 90px rgba(0,0,0,.42);
}
html{scroll-behavior:smooth;background:var(--vm-bg)!important;}
body{
  background-color:var(--vm-bg)!important;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(245,197,66,.18), transparent 28rem),
    radial-gradient(circle at 86% 18%, rgba(56,189,248,.16), transparent 30rem),
    radial-gradient(circle at 58% 78%, rgba(167,139,250,.12), transparent 34rem),
    linear-gradient(135deg,#050816 0%,#0B1020 42%,#101827 100%)!important;
  color:var(--vm-text)!important;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-5;pointer-events:none;
  background-image:
    linear-gradient(rgba(245,197,66,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.045) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1.2px);
  background-size:82px 82px,82px 82px,34px 34px;
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.86) 58%,rgba(0,0,0,.40) 100%);
  animation:vmGridDrift 22s linear infinite;
}
body:after{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 30%,rgba(245,197,66,.08) 42%,transparent 54% 100%),
    repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.025) 19px 20px);
  opacity:.82;mix-blend-mode:screen;
}
@keyframes vmGridDrift{from{background-position:0 0,0 0,0 0}to{background-position:82px 82px,-82px 82px,34px 34px}}

/* Remove white blocks everywhere */
main,section,.section,.page-section,.hero,.page-hero,.portfolio-section,.blog-section,.clients-section,.contact-section,.services-section,.pricing-section,.about-section,.bg-light,
.card,.panel,.box,.content-box,.blog-featured-post,.blog-sidebar,.sidebar-widget,.portfolio-card,.blog-card,.service-card,.client-card,.testimonial-card,
.form-card,.auth-card,.dashboard-card,.stat-card,.feature-card,.media-card,.vm-video-card{
  color:var(--vm-text)!important;
}
.bg-light,.portfolio-section,.blog-section,.clients-section,.contact-section,.services-section,.pricing-section,.about-section,
section[style*="background:#fff"],section[style*="background: #fff"],div[style*="background:#fff"],div[style*="background: #fff"],
section[style*="background:#f"],section[style*="background: #f"]{
  background:transparent!important;
}
.card,.panel,.box,.content-box,.blog-featured-post,.blog-sidebar,.sidebar-widget,.portfolio-card,.blog-card,.service-card,.client-card,.testimonial-card,.media-card,.vm-video-card,.pricing-card,.contact-card,.why-card,.feature-card,.form-card,.auth-card,.dashboard-card,.stat-card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.040))!important;
  border:1px solid var(--vm-border)!important;
  border-radius:var(--vm-radius)!important;
  box-shadow:var(--vm-shadow)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  position:relative;
  overflow:hidden;
}
.card:before,.portfolio-card:before,.blog-card:before,.service-card:before,.media-card:before,.vm-video-card:before,.client-card:before,.testimonial-card:before{
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle at 22% 0%,rgba(245,197,66,.24),transparent 15rem),radial-gradient(circle at 92% 18%,rgba(56,189,248,.16),transparent 14rem);
  opacity:.55;transition:.35s ease;
}
.card:hover:before,.portfolio-card:hover:before,.blog-card:hover:before,.service-card:hover:before,.media-card:hover:before,.vm-video-card:hover:before,.client-card:hover:before,.testimonial-card:hover:before{opacity:.95}
.card:hover,.portfolio-card:hover,.blog-card:hover,.service-card:hover,.media-card:hover,.vm-video-card:hover,.client-card:hover,.testimonial-card:hover,.pricing-card:hover,.contact-card:hover,.feature-card:hover{
  transform:translateY(-8px);
  border-color:rgba(245,197,66,.40)!important;
  box-shadow:0 28px 110px rgba(245,197,66,.16),0 30px 90px rgba(0,0,0,.55)!important;
}
p,li,span,small,.section-desc,.card-text,.blog-meta,.portfolio-info,.form-text{color:var(--vm-muted)!important}
h1,h2,h3,h4,h5,h6,.section-title,.page-title{color:#fff!important;text-shadow:0 0 28px rgba(56,189,248,.08)}
.section-title span,.page-title span,.accent,.vm-gradient-text{background:linear-gradient(90deg,#fff,var(--vm-gold),#fff3bd);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* Header final fix */
.header{height:auto!important;min-height:78px!important;background:rgba(6,10,20,.78)!important;border-bottom:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(22px)!important;box-shadow:0 16px 70px rgba(0,0,0,.28)!important;}
.nav{min-height:78px!important;gap:14px!important;}
.nav-logo{font-weight:1000!important;letter-spacing:.4px!important;color:#fff!important;white-space:nowrap!important;}
.nav-link{border-radius:999px!important;padding:10px 13px!important;color:rgba(255,255,255,.84)!important;}
.nav-link:hover,.nav-link.active{background:rgba(245,197,66,.12)!important;color:var(--vm-gold)!important;border-color:rgba(245,197,66,.24)!important;}
.dropdown-menu{border-radius:28px!important;overflow:hidden!important;}

/* Page hero and section headers */
.page-header,.page-hero,.hero-section,.vm-page-hero{
  background:
    radial-gradient(circle at 15% 35%,rgba(245,197,66,.20),transparent 28rem),
    radial-gradient(circle at 80% 20%,rgba(56,189,248,.18),transparent 28rem),
    linear-gradient(135deg,#060A14,#101827)!important;
  position:relative;overflow:hidden;
}
.page-header:before,.page-hero:before,.hero-section:before,.vm-page-hero:before{
  content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(245,197,66,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.08) 1px,transparent 1px);background-size:80px 80px;opacity:.55;pointer-events:none;
}
.section-header{position:relative;z-index:2;margin-bottom:42px!important;}
.section-tag,.section-badge,.hero-tag,.vm-eyebrow{box-shadow:0 0 36px rgba(245,197,66,.14)!important;}

/* Portfolio stronger */
.portfolio-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;}
.portfolio-card{min-height:420px!important;display:flex!important;flex-direction:column!important;}
.portfolio-img,.portfolio-image,.card-img,.project-img,.blog-img,.vm-portfolio-media{
  background:
    radial-gradient(circle at 20% 10%,rgba(245,197,66,.28),transparent 11rem),
    radial-gradient(circle at 80% 20%,rgba(56,189,248,.22),transparent 14rem),
    linear-gradient(135deg,#0B1020,#1E293B)!important;
  position:relative!important;overflow:hidden!important;
}
.portfolio-img:after,.portfolio-image:after,.card-img:after,.project-img:after,.blog-img:after,.vm-portfolio-media:after{
  content:"";position:absolute;inset:0;background-image:linear-gradient(135deg,transparent 0 40%,rgba(245,197,66,.18) 50%,transparent 60% 100%),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:100% 100%,38px 38px,38px 38px;mix-blend-mode:screen;pointer-events:none;
}
.placeholder-icon,.blog-img i,.vm-blog-cover i{filter:drop-shadow(0 0 28px rgba(245,197,66,.42));}
.card-overlay{background:linear-gradient(180deg,rgba(6,10,20,.18),rgba(6,10,20,.88))!important;}
.filter-btn,.vm-filter-btn,.media-filter{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 28px rgba(0,0,0,.18)!important;}

/* Blog premium */
.blog-layout{gap:28px!important;}
.blog-posts-grid,.vm-blog-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;}
.blog-featured-post{display:grid!important;grid-template-columns:minmax(280px,.9fr) 1fr!important;gap:0!important;overflow:hidden!important;}
.blog-img,.vm-blog-cover{min-height:230px!important;display:grid!important;place-items:center!important;border-radius:28px 28px 0 0!important;}
.blog-featured-post .blog-img{border-radius:0!important;min-height:100%!important;}
.blog-cat,.blog-card-tag,.category-badge{background:linear-gradient(135deg,var(--vm-gold2),var(--vm-gold))!important;color:#07101f!important;border-radius:999px!important;font-weight:900!important;}
.blog-content,.portfolio-content,.card-body,.vm-blog-body,.media-body{position:relative;z-index:2;}

/* Clients logos */
.clients-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
.client-card,.vm-client-logo{background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.045))!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:26px!important;min-height:100px!important;display:grid!important;place-items:center!important;font-weight:1000!important;color:rgba(255,255,255,.80)!important;text-align:center!important;}
.client-card:hover,.vm-client-logo:hover{color:var(--vm-gold)!important;transform:translateY(-7px) scale(1.02)!important;}
.vm-clients-track{animation-duration:34s!important;}

/* Media center */
.media-grid,.vm-home-media-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;}
.media-thumb,.vm-video-card video{border-radius:28px 28px 0 0!important;}
.media-play{font-size:48px!important;text-shadow:0 0 34px rgba(245,197,66,.70)!important;}
.media-search{box-shadow:0 18px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.10)!important;}
.video-modal-dialog{border-radius:34px!important;border-color:rgba(245,197,66,.22)!important;}

/* Forms and dashboards */
input,select,textarea,.form-control{
  background:rgba(255,255,255,.075)!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:18px!important;outline:none!important;
}
input:focus,select:focus,textarea:focus,.form-control:focus{border-color:rgba(245,197,66,.55)!important;box-shadow:0 0 0 4px rgba(245,197,66,.10)!important;}
::placeholder{color:rgba(255,255,255,.45)!important;}
.table,table{color:#fff!important;background:rgba(255,255,255,.04)!important;border-radius:22px!important;overflow:hidden!important;}
th{background:rgba(245,197,66,.10)!important;color:var(--vm-gold)!important;}
td{border-color:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.74)!important;}

/* Notification: show only unified box; hide legacy duplicates */
.vm-native-notification-box,.vm-notification-native{display:none!important;}
.vm-sitewide-permission{animation:vmPermissionIn .35s ease both!important;}
@keyframes vmPermissionIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

/* Premium floating effects */
[data-aos]{will-change:transform,opacity;}
.btn{font-weight:900!important;letter-spacing:0!important;}
.btn,.nav-link,.portfolio-card,.blog-card,.service-card,.media-card,.client-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,background .35s ease!important;}
.whatsapp-float{box-shadow:0 18px 48px rgba(34,197,94,.28)!important;}
#backToTop{background:linear-gradient(135deg,var(--vm-gold2),var(--vm-gold))!important;color:#06101f!important;align-items:center;justify-content:center;}

/* Mobile */
@media(max-width:1100px){
  .portfolio-grid,.blog-posts-grid,.vm-blog-grid,.media-grid,.vm-home-media-grid,.clients-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .blog-featured-post{grid-template-columns:1fr!important;}
  .nav-menu{top:82px!important;}
}
@media(max-width:720px){
  .portfolio-grid,.blog-posts-grid,.vm-blog-grid,.media-grid,.vm-home-media-grid,.clients-grid{grid-template-columns:1fr!important;}
  .card,.portfolio-card,.blog-card,.service-card,.media-card,.client-card,.testimonial-card{border-radius:24px!important;}
  .header{min-height:70px!important;}.nav{min-height:70px!important;}
  .nav-logo{font-size:18px!important;}
  .section-title,.page-title{font-size:clamp(1.8rem,8vw,2.5rem)!important;}
  .vm-sitewide-permission{grid-template-columns:1fr!important;text-align:center!important;}
  .vm-sitewide-ico{margin:auto!important;}
}
.vm-notification-consent{display:none!important;}