/*==================================================
  CP7 WHMCS - Dashboard Tiles
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');/*==================================================
    CP7 Dashboard Cards
    Part 2.1A
    Shine + Reflection + Premium Border
===================================================*/

/* Animated Border */

.cp7-tile-border{
    opacity:.55;
    overflow:hidden;
}

.cp7-tile-border::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(99,102,241,.10) 20%,
            rgba(139,92,246,.65) 40%,
            rgba(255,255,255,.95) 50%,
            rgba(99,102,241,.65) 60%,
            transparent 80%
        );
    background-size:250% 250%;
    animation:cp7BorderFlow 12s linear infinite;
    opacity:.65;
    filter:blur(2px);
}

@keyframes cp7BorderFlow{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:250% 50%;
    }

}

/*==========================
Glass Reflection
===========================*/

.cp7-tile::after{

    content:"";

    position:absolute;

    top:-80%;

    left:-120%;

    width:65%;

    height:260%;

    transform:rotate(28deg);

    background:

        linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        rgba(255,255,255,.25),

        rgba(255,255,255,.10),

        transparent);

    opacity:0;

    pointer-events:none;

}

/*==========================
Hover Shine
===========================*/

.cp7-tile:hover::after{

    animation:cp7Shine 1.4s cubic-bezier(.22,1,.36,1);

    opacity:1;

}

@keyframes cp7Shine{

    0%{

        left:-140%;
        opacity:0;

    }

    15%{

        opacity:1;

    }

    50%{

        opacity:.8;

    }

    100%{

        left:180%;
        opacity:0;

    }

}

/*==========================
Premium Shadow
===========================*/

.cp7-tile{

    box-shadow:

    0 18px 45px rgba(0,0,0,.45),

    0 0 0 rgba(99,102,241,0),

    inset 0 1px rgba(255,255,255,.05);

}

.cp7-tile:hover{

    box-shadow:

    0 30px 65px rgba(0,0,0,.60),

    0 0 45px rgba(99,102,241,.20),

    0 0 80px rgba(139,92,246,.08),

    inset 0 1px rgba(255,255,255,.08);

}

/*==========================
Top Light
===========================*/

.cp7-tile:before{

    transition:

    opacity .6s,

    transform .8s;

}

.cp7-tile:hover:before{

    opacity:1;

    transform:scale(1.15);

}

/*==========================
Icon Reflection
===========================*/

.cp7-icon{

    overflow:hidden;

}

.cp7-icon::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

        135deg,

        rgba(255,255,255,.18),

        transparent 40%,

        transparent);

    pointer-events:none;

}

/*==========================
Soft Pulse
===========================*/

.cp7-icon::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    border:1px solid rgba(99,102,241,.20);

    animation:cp7Pulse 4s ease infinite;

}

@keyframes cp7Pulse{

    0%{

        transform:scale(1);

        opacity:.4;

    }

    50%{

        transform:scale(1.08);

        opacity:.15;

    }

    100%{

        transform:scale(1);

        opacity:.4;

    }

}

/*==========================
Hover Icon
===========================*/

.cp7-tile:hover .cp7-icon{

    transform:

        translateY(-6px)

        rotate(-4deg)

        scale(1.05);

}

.cp7-tile:hover .cp7-icon i{

    filter:

    drop-shadow(0 0 15px rgba(99,102,241,.45))

    drop-shadow(0 0 25px rgba(139,92,246,.25));

}

/*==========================
Stat Glow
===========================*/

.cp7-body .stat{

    transition:

    transform .45s,

    text-shadow .45s,

    color .45s;

}

.cp7-tile:hover .stat{

    transform:translateY(-2px);

    color:#fff;

    text-shadow:

    0 0 12px rgba(99,102,241,.35),

    0 0 25px rgba(99,102,241,.20);

}

/*==========================
Title
===========================*/

.cp7-body .title{

    transition:

    color .4s,

    letter-spacing .4s;

}

.cp7-tile:hover .title{

    color:#ffffff;

    letter-spacing:.4px;

}

/*==========================
Highlight
===========================*/

.cp7-tile .highlight{

    transition:

    height .35s,

    box-shadow .35s;

}

.cp7-tile:hover .highlight{

    box-shadow:

    0 0 20px currentColor;

}
/*==================================================
    CP7 Dashboard Cards
    Part 2.1B
    Mesh Gradient + Aurora + Dynamic Glow
==================================================*/

/*==================================
Aurora Background
===================================*/

.cp7-tile{
    overflow:hidden;
}

.cp7-tile .cp7-tile-glow{

    position:absolute;

    inset:auto;

    width:280px;
    height:280px;

    border-radius:50%;

    top:-140px;
    right:-120px;

    filter:blur(70px);

    opacity:.18;

    pointer-events:none;

    transition:
        transform .8s cubic-bezier(.22,1,.36,1),
        opacity .6s;

    animation:cp7Aurora 16s ease-in-out infinite;
}

@keyframes cp7Aurora{

    0%{

        transform:
        translate(0,0)
        scale(1);

    }

    25%{

        transform:
        translate(-18px,12px)
        scale(1.08);

    }

    50%{

        transform:
        translate(-10px,28px)
        scale(1.15);

    }

    75%{

        transform:
        translate(18px,8px)
        scale(1.05);

    }

    100%{

        transform:
        translate(0,0)
        scale(1);

    }

}

/*==================================
Mesh Gradient Layer
===================================*/

.cp7-tile::before{

    background:

        radial-gradient(circle at 15% 20%,
        rgba(255,255,255,.04),
        transparent 30%),

        radial-gradient(circle at 85% 15%,
        rgba(99,102,241,.18),
        transparent 45%),

        radial-gradient(circle at 10% 90%,
        rgba(139,92,246,.12),
        transparent 50%),

        radial-gradient(circle at 90% 85%,
        rgba(79,70,229,.12),
        transparent 55%);

    background-size:

        120% 120%,
        140% 140%,
        120% 120%,
        140% 140%;

    animation:cp7MeshMove 18s linear infinite;

}

@keyframes cp7MeshMove{

    0%{

        background-position:
        0% 0%,
        100% 0%,
        0% 100%,
        100% 100%;

    }

    50%{

        background-position:
        20% 10%,
        80% 20%,
        10% 80%,
        90% 90%;

    }

    100%{

        background-position:
        0% 0%,
        100% 0%,
        0% 100%,
        100% 100%;

    }

}

/*==================================
Animated Noise
===================================*/

.cp7-tile-noise{

    background-image:

        radial-gradient(
        rgba(255,255,255,.10) .6px,
        transparent .6px);

    background-size:22px 22px;

    animation:cp7NoiseMove 12s linear infinite;

}

@keyframes cp7NoiseMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:220px 220px;

    }

}

/*==================================
Ambient Light
===================================*/

.cp7-tile .cp7-ambient{

    position:absolute;

    inset:0;

    pointer-events:none;

}

.cp7-tile .cp7-ambient::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    left:-90px;
    bottom:-90px;

    filter:blur(80px);

    opacity:.14;

    background:rgba(99,102,241,.7);

}

.cp7-tile .cp7-ambient::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    top:-70px;
    right:-70px;

    filter:blur(80px);

    opacity:.10;

    background:rgba(168,85,247,.8);

}

/*==================================
Card Hover Glow
===================================*/

.cp7-tile:hover .cp7-tile-glow{

    opacity:.40;

    transform:

        scale(1.25)

        rotate(12deg);

}

/*==================================
Color Presets
===================================*/

.cp7-services .cp7-tile-glow{

    background:

    radial-gradient(circle,

    rgba(79,70,229,.85),

    transparent 72%);

}

.cp7-domains .cp7-tile-glow{

    background:

    radial-gradient(circle,

    rgba(16,185,129,.75),

    transparent 72%);

}

.cp7-ticket .cp7-tile-glow{

    background:

    radial-gradient(circle,

    rgba(239,68,68,.75),

    transparent 72%);

}

.cp7-invoice .cp7-tile-glow{

    background:

    radial-gradient(circle,

    rgba(245,158,11,.80),

    transparent 72%);

}

/*==================================
Premium Background
===================================*/

.cp7-services{

background-image:

linear-gradient(
180deg,
rgba(79,70,229,.06),
transparent);

}

.cp7-domains{

background-image:

linear-gradient(
180deg,
rgba(16,185,129,.06),
transparent);

}

.cp7-ticket{

background-image:

linear-gradient(
180deg,
rgba(239,68,68,.05),
transparent);

}

.cp7-invoice{

background-image:

linear-gradient(
180deg,
rgba(245,158,11,.05),
transparent);

}

/*==================================
Hover Ambient
===================================*/

.cp7-tile:hover{

    background-color:#182133;

}

.cp7-tile:hover::before{

    filter:saturate(140%);

}

.cp7-tile:hover .cp7-tile-noise{

    opacity:.07;

}
/*==================================================
    CP7 Dashboard Cards
    Part 2.1C
    Floating Motion + Micro Interaction
==================================================*/

/*==============================
Smooth GPU Rendering
==============================*/

.cp7-tile,
.cp7-icon,
.cp7-body,
.cp7-body .stat,
.cp7-body .title,
.cp7-tile-glow{

    backface-visibility:hidden;
    transform-style:preserve-3d;
    will-change:transform;

}

/*==============================
Floating Animation
==============================*/

.cp7-icon{

    animation:cp7Float 5s ease-in-out infinite;

}

@keyframes cp7Float{

    0%{

        transform:
        translateY(0)
        rotate(0deg);

    }

    25%{

        transform:
        translateY(-3px)
        rotate(-1deg);

    }

    50%{

        transform:
        translateY(-8px)
        rotate(2deg);

    }

    75%{

        transform:
        translateY(-3px)
        rotate(-1deg);

    }

    100%{

        transform:
        translateY(0)
        rotate(0deg);

    }

}

/*==============================
Pause Float on Hover
==============================*/

.cp7-tile:hover .cp7-icon{

    animation-play-state:paused;

}

/*==============================
Card Hover Motion
==============================*/

.cp7-tile{

    transform-origin:center;

}

.cp7-tile:hover{

    transform:

        translateY(-12px)

        scale(1.025);

}

/*==============================
Icon Lift
==============================*/

.cp7-tile:hover .cp7-icon{

    transform:

        translateY(-12px)

        scale(1.08)

        rotate(-4deg);

}

/*==============================
Icon Rotation
==============================*/

.cp7-icon i{

    transition:

    transform .7s cubic-bezier(.22,1,.36,1),

    filter .5s,

    opacity .5s;

}

.cp7-tile:hover .cp7-icon i{

    transform:

        rotate(-12deg)

        scale(1.15);

}

/*==============================
Stat Animation
==============================*/

.cp7-body .stat{

    transition:

        transform .55s,

        letter-spacing .45s,

        color .45s,

        text-shadow .45s;

}

.cp7-tile:hover .stat{

    transform:

        scale(1.08);

    letter-spacing:1px;

}

/*==============================
Title Motion
==============================*/

.cp7-body .title{

    transition:

        transform .45s,

        opacity .45s,

        color .45s;

}

.cp7-tile:hover .title{

    transform:

        translateY(3px);

    opacity:1;

}

/*==============================
Highlight Motion
==============================*/

.cp7-tile .highlight{

    transition:

        all .45s cubic-bezier(.22,1,.36,1);

}

.cp7-tile:hover .highlight{

    height:7px;

    filter:

        blur(.3px);

}

/*==============================
Ambient Scale
==============================*/

.cp7-tile:hover .cp7-tile-glow{

    transform:

        scale(1.35)

        rotate(18deg);

}

/*==============================
Soft Bounce
==============================*/

.cp7-tile:active{

    transform:

        scale(.98);

}

/*==============================
Magnetic Effect
==============================*/

.cp7-tile{

    transition:

        transform .65s cubic-bezier(.22,1,.36,1),

        box-shadow .65s,

        border-color .65s,

        filter .65s;

}

/*==============================
Border Glow
==============================*/

.cp7-tile:hover{

    border-color:

        rgba(99,102,241,.45);

}

/*==============================
Icon Shadow
==============================*/

.cp7-tile:hover .cp7-icon{

    box-shadow:

        0 12px 35px rgba(99,102,241,.22),

        inset 0 1px rgba(255,255,255,.08);

}

/*==============================
Glass Blur
==============================*/

.cp7-tile:hover{

    backdrop-filter:

        blur(28px);

}

/*==============================
Micro Zoom
==============================*/

.cp7-body{

    transition:

        transform .45s;

}

.cp7-tile:hover .cp7-body{

    transform:

        translateY(-2px);

}

/*==============================
Smooth Highlight Pulse
==============================*/

.cp7-tile:hover .highlight{

    animation:

        cp7HighlightPulse 2.5s linear infinite;

}

@keyframes cp7HighlightPulse{

    0%{

        opacity:.7;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.7;

    }

}

/*==============================
Mobile Optimization
==============================*/

@media (hover:none){

.cp7-icon{

animation:none;

}

.cp7-tile:hover{

transform:none;

}

.cp7-tile:hover .cp7-icon{

transform:none;

}

.cp7-tile:hover .stat{

transform:none;

}

.cp7-tile:hover .title{

transform:none;

}

}

/*==============================
Reduce Motion
==============================*/

@media (prefers-reduced-motion:reduce){

.cp7-tile,
.cp7-icon,
.cp7-body,
.cp7-tile-glow,
.cp7-body .stat,
.cp7-body .title{

animation:none !important;

transition:none !important;

}

}