/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/glass.css
 Module      : EcoGlass System
 Version     : 1.0.0
 Status      : Draft
 Author      : EcoDrop Platform
 References  : EMS / EHIG / EDS
======================================================================
*/

/* ==========================================================
   ECO GLASS FOUNDATION
========================================================== */

.eco-glass{

    position:relative;

    background:var(--eco-surface-glass);

    border:1px solid var(--eco-glass-border);

    backdrop-filter:
        blur(var(--eco-glass-blur-normal));

    -webkit-backdrop-filter:
        blur(var(--eco-glass-blur-normal));

    box-shadow:
        var(--eco-shadow-card);

    overflow:hidden;

}

/* ==========================================================
   TOP LIGHT
========================================================== */

.eco-glass::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    pointer-events:none;

}

/* ==========================================================
   INNER LIGHT
========================================================== */

.eco-glass::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at top left,
            rgba(255,255,255,.12),
            transparent 45%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(34,184,95,.08),
            transparent 55%
        );

    pointer-events:none;

}

/* ==========================================================
   GLASS SIZES
========================================================== */

.eco-glass-sm{

    border-radius:var(--eco-radius-md);

    padding:var(--eco-space-4);

}

.eco-glass-md{

    border-radius:var(--eco-radius-lg);

    padding:var(--eco-space-6);

}

.eco-glass-lg{

    border-radius:var(--eco-radius-xl);

    padding:var(--eco-space-8);

}

.eco-glass-xl{

    border-radius:32px;

    padding:40px;

}

/* ==========================================================
   GLASS LEVELS
========================================================== */

.eco-glass-light{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

}

.eco-glass-normal{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

}

.eco-glass-strong{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

}

.eco-glass-dark{

    background:rgba(9,15,12,.88);

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

}

/* ==========================================================
   BORDER STYLES
========================================================== */

.eco-glass-border-soft{

    border-color:rgba(255,255,255,.08);

}

.eco-glass-border{

    border-color:rgba(255,255,255,.12);

}

.eco-glass-border-strong{

    border-color:rgba(255,255,255,.18);

}

.eco-glass-border-brand{

    border-color:rgba(34,184,95,.22);

}

/* ==========================================================
   SHADOWS
========================================================== */

.eco-glass-shadow-soft{

    box-shadow:

        0 10px 25px rgba(0,0,0,.18);

}

.eco-glass-shadow{

    box-shadow:

        0 20px 45px rgba(0,0,0,.28);

}

.eco-glass-shadow-floating{

    box-shadow:

        0 30px 70px rgba(0,0,0,.36);

}

.eco-glass-glow{

    box-shadow:

        0 0 40px rgba(34,184,95,.14),

        0 18px 40px rgba(0,0,0,.24);

}

/* ==========================================================
   HOVER STATES
========================================================== */

.eco-glass-hover{

    transition:
        var(--eco-transition-normal);

}

.eco-glass-hover:hover{

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.10);

    border-color:
        rgba(34,184,95,.24);

    box-shadow:

        0 24px 60px rgba(0,0,0,.32),

        0 0 30px rgba(34,184,95,.12);

}

/* ==========================================================
   ACTIVE
========================================================== */

.eco-glass-active{

    border-color:
        rgba(34,184,95,.32);

    box-shadow:

        0 0 0 1px rgba(34,184,95,.18),

        0 20px 50px rgba(0,0,0,.28);

}

/* ==========================================================
   DISABLED
========================================================== */

.eco-glass-disabled{

    opacity:.45;

    pointer-events:none;

    filter:grayscale(.2);

}

/* ==========================================================
   SUCCESS
========================================================== */

.eco-glass-success{

    border-color:
        rgba(34,197,94,.28);

    box-shadow:

        0 0 40px rgba(34,197,94,.18),

        0 20px 50px rgba(0,0,0,.28);

}

/* ==========================================================
   WARNING
========================================================== */

.eco-glass-warning{

    border-color:
        rgba(245,158,11,.28);

    box-shadow:

        0 0 36px rgba(245,158,11,.16),

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

}

/* ==========================================================
   ERROR
========================================================== */

.eco-glass-error{

    border-color:
        rgba(239,68,68,.30);

    box-shadow:

        0 0 36px rgba(239,68,68,.18),

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

}

/* ==========================================================
   INFO
========================================================== */

.eco-glass-info{

    border-color:
        rgba(59,130,246,.28);

    box-shadow:

        0 0 36px rgba(59,130,246,.18),

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

}

/* ==========================================================
   FOCUS
========================================================== */

.eco-glass:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 3px rgba(34,184,95,.22),

        0 24px 60px rgba(0,0,0,.30);

}

/* ==========================================================
   GLASS PANELS
========================================================== */

.eco-panel{

    position:relative;

    display:flex;

    flex-direction:column;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}

.eco-panel-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px 28px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.eco-panel-body{

    padding:28px;

}

.eco-panel-footer{

    padding:24px 28px;

    border-top:1px solid rgba(255,255,255,.06);

}

/* ==========================================================
   GLASS CARD
========================================================== */

.eco-glass-card{

    position:relative;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    overflow:hidden;

    transition:var(--eco-transition-normal);

}

.eco-glass-card:hover{

    transform:translateY(-3px);

    border-color:rgba(34,184,95,.18);

    background:rgba(255,255,255,.09);

}

/* ==========================================================
   GLOW EFFECT
========================================================== */

.eco-glass-card::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.14),

            transparent 35%,

            transparent 65%,

            rgba(34,184,95,.10)

        );

    opacity:.8;

    pointer-events:none;

}

/* ==========================================================
   SHINE ANIMATION
========================================================== */

.eco-glass-shine{

    overflow:hidden;

}

.eco-glass-shine::after{

    content:"";

    position:absolute;

    top:-40%;

    left:-120%;

    width:60%;

    height:180%;

    background:

        linear-gradient(

            90deg,

            transparent,

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

            transparent

        );

    transform:rotate(18deg);

    pointer-events:none;

}

.eco-glass-shine:hover::after{

    animation:

        ecoGlassShine

        1.2s

        ease;

}

@keyframes ecoGlassShine{

    from{

        left:-120%;

    }

    to{

        left:180%;

    }

}

/* ==========================================================
   FLOATING GLASS
========================================================== */

.eco-glass-floating{

    position:relative;

    animation:

        ecoFloat

        8s

        ease-in-out

        infinite;

}

@keyframes ecoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ==========================================================
   GREEN ENERGY MODE
========================================================== */

.eco-glass-energy{

    position:relative;

}

.eco-glass-energy::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:

        linear-gradient(

            135deg,

            rgba(34,184,95,.10),

            transparent,

            rgba(34,184,95,.18)

        );

    opacity:.8;

    filter:blur(10px);

    z-index:-1;

}

/* ==========================================================
   IMPACT CARD
========================================================== */

.eco-impact-glass{

    position:relative;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.07),

            rgba(255,255,255,.03)

        );

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    overflow:hidden;

}

.eco-impact-glass::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:

        linear-gradient(

            180deg,

            #56CF82,

            #22B85F

        );

}

/* ==========================================================
   HERO GLASS
========================================================== */

.eco-hero-glass{

    position:relative;

    background:

        radial-gradient(

            circle at top,

            rgba(34,184,95,.08),

            transparent 55%

        ),

        rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:32px;

    backdrop-filter:blur(26px);

    -webkit-backdrop-filter:blur(26px);

}

/* ==========================================================
   DIALOG GLASS
========================================================== */

.eco-dialog-glass{

    background:

        rgba(14,22,18,.92);

    border:1px solid rgba(255,255,255,.08);

    border-radius:32px;

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    box-shadow:

        0 40px 80px rgba(0,0,0,.45);

}

/* ==========================================================
   END OF PART
========================================================== */

/* ==========================================================
   SCANNER GLASS
========================================================== */

.eco-scanner-glass{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.08),

            rgba(255,255,255,.03)

        );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

}

.eco-scanner-glass::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:-4px;

    height:4px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(86,207,130,.90),

            transparent

        );

    filter:blur(4px);

}

/* ==========================================================
   WEIGHT GLASS
========================================================== */

.eco-weight-glass{

    position:relative;

    border-radius:999px;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.08),

            rgba(255,255,255,.03)

        );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

}

.eco-weight-glass::after{

    content:"";

    position:absolute;

    inset:12px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.06);

}

/* ==========================================================
   SUCCESS GLASS
========================================================== */

.eco-success-glass{

    position:relative;

    background:

        radial-gradient(

            circle at center,

            rgba(34,184,95,.10),

            rgba(255,255,255,.03)

        );

    border:1px solid rgba(34,184,95,.22);

    border-radius:36px;

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

}

/* ==========================================================
   NAVIGATION GLASS
========================================================== */

.eco-nav-glass{

    display:flex;

    align-items:center;

    gap:16px;

    background:

        rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:999px;

    padding:12px 18px;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}

/* ==========================================================
   GLASS DIVIDER
========================================================== */

.eco-glass-divider{

    width:100%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

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

            transparent

        );

}

/* ==========================================================
   GLASS OVERLAY
========================================================== */

.eco-glass-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(255,255,255,.06),

            transparent 45%

        ),

        radial-gradient(

            circle at bottom,

            rgba(34,184,95,.05),

            transparent 55%

        );

    pointer-events:none;

}

/* ==========================================================
   GLASS NOISE
========================================================== */

.eco-glass-noise{

    position:relative;

}

.eco-glass-noise::after{

    content:"";

    position:absolute;

    inset:0;

    opacity:.018;

    mix-blend-mode:overlay;

    pointer-events:none;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.35) .6px, transparent .6px);

    background-size:14px 14px;

}

/* ==========================================================
   END OF FILE
========================================================== */