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

/* ==========================================================
   BUTTON
========================================================== */

.eco-button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-width:180px;

    height:var(--eco-button-height-md);

    padding:0 32px;

    border:none;

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

    cursor:pointer;

    user-select:none;

    font-family:var(--eco-font-text);

    font-size:18px;

    font-weight:600;

    color:#FFFFFF;

    background:linear-gradient(

        180deg,

        #29C56B,

        #17964B

    );

    box-shadow:

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

}

/* ==========================================================
   BUTTON STATES
========================================================== */

.eco-button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 20px 40px rgba(34,184,95,.32);

}

.eco-button:active{

    transform:translateY(1px) scale(.98);

}

.eco-button:disabled{

    opacity:.45;

    cursor:not-allowed;

}

/* ==========================================================
   BUTTON VARIANTS
========================================================== */

.eco-button-secondary{

    background:

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

    border:

        1px solid rgba(255,255,255,.12);

}

.eco-button-danger{

    background:

        linear-gradient(

            180deg,

            #EF4444,

            #B91C1C

        );

}

.eco-button-warning{

    background:

        linear-gradient(

            180deg,

            #FBBF24,

            #D97706

        );

}

.eco-button-dark{

    background:

        rgba(12,18,15,.92);

}

/* ==========================================================
   ICON BUTTON
========================================================== */

.eco-icon-button{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

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

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

    backdrop-filter:blur(16px);

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

    cursor:pointer;

}

.eco-icon-button:hover{

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

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

}

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

.eco-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:28px;

    border-radius:24px;

    background:var(--eco-card-background);

    border:var(--eco-card-border);

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

    overflow:hidden;

}

.eco-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}

.eco-card-body{

    display:flex;

    flex-direction:column;

    gap:18px;

    flex:1;

}

.eco-card-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

}

/* ==========================================================
   CARD STATES
========================================================== */

.eco-card-hover{

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

}

.eco-card-hover:hover{

    transform:translateY(-4px);

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

}

.eco-card-selected{

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

    box-shadow:

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

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

}

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

.eco-impact-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:180px;

    padding:28px;

    border-radius:24px;

    overflow:hidden;

    background:

        linear-gradient(

            180deg,

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

            rgba(255,255,255,.03)

        );

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

}

.eco-impact-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:

        linear-gradient(

            180deg,

            #56CF82,

            #22B85F

        );

}

.eco-impact-label{

    opacity:.75;

}

.eco-impact-value{

    margin-top:auto;

}

.eco-impact-unit{

    opacity:.70;

}

/* ==========================================================
   STATUS BADGE
========================================================== */

.eco-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    height:36px;

    padding:0 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

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

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

}

.eco-badge-success{

    color:#4ADE80;

    border-color:rgba(74,222,128,.22);

}

.eco-badge-warning{

    color:#FBBF24;

    border-color:rgba(251,191,36,.22);

}

.eco-badge-error{

    color:#EF4444;

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

}

.eco-badge-info{

    color:#38BDF8;

    border-color:rgba(56,189,248,.22);

}

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

.eco-dialog{

    position:relative;

    width:var(--eco-dialog-width);

    max-width:92vw;

    display:flex;

    flex-direction:column;

    gap:28px;

    padding:40px;

    border-radius:32px;

    background:rgba(12,18,15,.92);

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

    backdrop-filter:blur(28px);

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

    box-shadow:

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

}

.eco-dialog-title{

    display:flex;

    align-items:center;

    gap:16px;

}

.eco-dialog-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.eco-dialog-actions{

    display:flex;

    justify-content:flex-end;

    gap:16px;

}

/* ==========================================================
   INPUT
========================================================== */

.eco-input{

    width:100%;

    height:var(--eco-input-height);

    padding:0 22px;

    border-radius:18px;

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

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

    color:var(--eco-text-primary);

    font-size:18px;

    outline:none;

}

.eco-input:focus{

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

    box-shadow:

        0 0 0 3px rgba(34,184,95,.14);

}

.eco-input::placeholder{

    color:rgba(255,255,255,.40);

}

/* ==========================================================
   PIN INPUT
========================================================== */

.eco-pin{

    width:82px;

    height:82px;

    border-radius:22px;

    text-align:center;

    font-size:34px;

    font-weight:700;

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

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

    color:#FFFFFF;

}

/* ==========================================================
   PROGRESS RING
========================================================== */

.eco-progress-ring{

    position:relative;

    width:var(--eco-ring-size-md);

    height:var(--eco-ring-size-md);

    display:flex;

    align-items:center;

    justify-content:center;

}

.eco-progress-ring svg{

    width:100%;

    height:100%;

    transform:rotate(-90deg);

}

.eco-progress-track{

    stroke:var(--eco-ring-track);

    stroke-width:var(--eco-ring-stroke);

    fill:none;

}

.eco-progress-value{

    stroke:var(--eco-ring-progress);

    stroke-width:var(--eco-ring-stroke);

    stroke-linecap:round;

    fill:none;

    transition:stroke-dashoffset .4s ease;

}

.eco-progress-content{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   LOADER
========================================================== */

.eco-loader{

    width:var(--eco-loader-size);

    height:var(--eco-loader-size);

    border-radius:50%;

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

    border-top-color:var(--eco-color-brand-500);

    animation:ecoSpin 1s linear infinite;

}

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

.eco-divider{

    width:100%;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

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

            transparent

        );

}

/* ==========================================================
   SPACER
========================================================== */

.eco-spacer{

    flex:1;

}

.eco-spacer-sm{

    height:16px;

}

.eco-spacer-md{

    height:24px;

}

.eco-spacer-lg{

    height:40px;

}

.eco-spacer-xl{

    height:64px;

}

/* ==========================================================
   TOAST
========================================================== */

.eco-toast{

    position:fixed;

    right:32px;

    bottom:32px;

    min-width:360px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px 24px;

    border-radius:22px;

    background:rgba(12,18,15,.92);

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

    backdrop-filter:blur(22px);

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

    box-shadow:

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

    z-index:999;

}

.eco-toast-success{

    border-left:4px solid #22C55E;

}

.eco-toast-warning{

    border-left:4px solid #F59E0B;

}

.eco-toast-error{

    border-left:4px solid #EF4444;

}

.eco-toast-info{

    border-left:4px solid #38BDF8;

}

/* ==========================================================
   CHIP
========================================================== */

.eco-chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:40px;

    padding:0 18px;

    border-radius:999px;

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

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

    font-size:14px;

    font-weight:600;

}

.eco-chip-active{

    background:rgba(34,184,95,.14);

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

    color:#56CF82;

}

/* ==========================================================
   ICON
========================================================== */

.eco-icon{

    width:24px;

    height:24px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.eco-icon-sm{

    width:18px;

    height:18px;

}

.eco-icon-lg{

    width:32px;

    height:32px;

}

.eco-icon-xl{

    width:48px;

    height:48px;

}

/* ==========================================================
   AVATAR
========================================================== */

.eco-avatar{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            180deg,

            #2AC86C,

            #1A8E4D

        );

    color:#FFF;

    font-weight:700;

    font-size:20px;

}

/* ==========================================================
   ONLINE STATUS
========================================================== */

.eco-status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:

        0 0 12px rgba(34,197,94,.45);

}

.eco-status-offline{

    background:#EF4444;

    box-shadow:

        0 0 12px rgba(239,68,68,.35);

}

.eco-status-warning{

    background:#FBBF24;

    box-shadow:

        0 0 12px rgba(251,191,36,.35);

}

/* ==========================================================
   QR SCANNER FRAME
========================================================== */

.eco-scanner{

    position:relative;

    width:420px;

    height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:36px;

    overflow:hidden;

    background:

        rgba(255,255,255,.04);

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

}

.eco-scanner-corners{

    position:absolute;

    inset:24px;

    pointer-events:none;

}

.eco-scanner-corner{

    position:absolute;

    width:42px;

    height:42px;

    border:4px solid #56CF82;

}

.eco-scanner-corner.top-left{

    top:0;

    left:0;

    border-right:none;

    border-bottom:none;

}

.eco-scanner-corner.top-right{

    top:0;

    right:0;

    border-left:none;

    border-bottom:none;

}

.eco-scanner-corner.bottom-left{

    left:0;

    bottom:0;

    border-right:none;

    border-top:none;

}

.eco-scanner-corner.bottom-right{

    right:0;

    bottom:0;

    border-left:none;

    border-top:none;

}

/* ==========================================================
   CUP VIEW
========================================================== */

.eco-cup{

    position:relative;

    width:var(--eco-cup-width);

    height:var(--eco-cup-height);

    display:flex;

    align-items:center;

    justify-content:center;

}

.eco-cup img,

.eco-cup svg{

    width:100%;

    height:100%;

    object-fit:contain;

}

.eco-cup-energy{

    filter:

        drop-shadow(0 0 26px rgba(34,184,95,.40));

}

/* ==========================================================
   IMPACT VALUE
========================================================== */

.eco-impact-number{

    font-size:54px;

    font-weight:700;

    line-height:1;

    color:#FFFFFF;

}

.eco-impact-caption{

    margin-top:8px;

    font-size:14px;

    color:rgba(255,255,255,.65);

    text-transform:uppercase;

    letter-spacing:.08em;

}

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

/* ==========================================================
   LANGUAGE SWITCH
========================================================== */

.eco-language{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:6px;

    border-radius:999px;

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

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

}

.eco-language-button{

    width:52px;

    height:42px;

    border:none;

    border-radius:999px;

    background:transparent;

    color:rgba(255,255,255,.60);

    font-size:14px;

    font-weight:700;

    cursor:pointer;

}

.eco-language-button.active{

    color:#FFFFFF;

    background:rgba(34,184,95,.22);

}

/* ==========================================================
   KPI
========================================================== */

.eco-kpi{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.eco-kpi-title{

    font-size:14px;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:rgba(255,255,255,.60);

}

.eco-kpi-value{

    font-size:54px;

    font-weight:700;

    line-height:1;

    color:#FFFFFF;

}

.eco-kpi-unit{

    font-size:20px;

    color:rgba(255,255,255,.70);

}

/* ==========================================================
   STORY STEP
========================================================== */

.eco-story-step{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:16px;

}

.eco-story-arrow{

    width:2px;

    height:42px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.40),

            rgba(34,184,95,.35)

        );

}

/* ==========================================================
   FULLSCREEN MESSAGE
========================================================== */

.eco-message{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:18px;

    text-align:center;

    width:100%;

    height:100%;

}

.eco-message-title{

    font-size:68px;

    font-weight:700;

}

.eco-message-subtitle{

    font-size:24px;

    color:rgba(255,255,255,.72);

}

/* ==========================================================
   DIAGNOSTICS PANEL
========================================================== */

.eco-diagnostics{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.eco-diagnostics-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 22px;

    border-radius:18px;

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

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

}

.eco-diagnostics-label{

    display:flex;

    align-items:center;

    gap:14px;

}

.eco-diagnostics-value{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

/* ==========================================================
   STATUS INDICATOR
========================================================== */

.eco-indicator{

    width:14px;

    height:14px;

    border-radius:50%;

}

.eco-indicator-online{

    background:#22C55E;

    box-shadow:

        0 0 18px rgba(34,197,94,.55);

}

.eco-indicator-warning{

    background:#F59E0B;

    box-shadow:

        0 0 18px rgba(245,158,11,.45);

}

.eco-indicator-offline{

    background:#EF4444;

    box-shadow:

        0 0 18px rgba(239,68,68,.45);

}

/* ==========================================================
   QR STATUS
========================================================== */

.eco-qr-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-height:72px;

    padding:0 28px;

    border-radius:999px;

    background:rgba(34,184,95,.08);

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

}

.eco-qr-status.waiting{

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

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

}

.eco-qr-status.success{

    background:rgba(34,197,94,.10);

}

.eco-qr-status.error{

    background:rgba(239,68,68,.10);

}

/* ==========================================================
   ECOPOINT CHIP
========================================================== */

.eco-points-chip{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:999px;

    background:

        linear-gradient(

            180deg,

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

            rgba(34,184,95,.10)

        );

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

    color:#56CF82;

    font-weight:700;

}

/* ==========================================================
   HOME HERO
========================================================== */

.eco-home-hero{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:center;

    gap:64px;

    min-height:560px;

}

.eco-home-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:32px;

}

.eco-home-right{

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   TODAY IMPACT
========================================================== */

.eco-impact-panel{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    width:100%;

}

/* ==========================================================
   STORY MODE
========================================================== */

.eco-story-container{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:48px;

    text-align:center;

}

.eco-story-title{

    font-size:72px;

    font-weight:700;

    letter-spacing:-0.03em;

}

.eco-story-subtitle{

    font-size:24px;

    color:rgba(255,255,255,.72);

    max-width:760px;

}

/* ==========================================================
   OPENING
========================================================== */

.eco-opening{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:40px;

}

/* ==========================================================
   WEIGHT SCREEN
========================================================== */

.eco-weight-layout{

    display:grid;

    grid-template-columns:420px 1fr;

    align-items:center;

    gap:80px;

}

.eco-weight-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

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

.eco-success-layout{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:28px;

    text-align:center;

}

/* ==========================================================
   STAFF PAGE
========================================================== */

.eco-staff-layout{

    display:grid;

    grid-template-columns:360px 1fr;

    gap:32px;

    height:100%;

}

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

/* ==========================================================
   SERVICE PANEL
========================================================== */

.eco-service-panel{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.eco-service-group{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.eco-service-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:64px;

    padding:0 22px;

    border-radius:18px;

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

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

}

/* ==========================================================
   LIST
========================================================== */

.eco-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.eco-list-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 20px;

    border-radius:18px;

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

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

}

.eco-list-item.active{

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

    background:rgba(34,184,95,.08);

}

/* ==========================================================
   STAT TILE
========================================================== */

.eco-stat{

    display:flex;

    flex-direction:column;

    gap:8px;

    padding:24px;

    border-radius:22px;

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

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

}

.eco-stat-label{

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:rgba(255,255,255,.60);

}

.eco-stat-value{

    font-size:42px;

    font-weight:700;

    color:#FFFFFF;

}

.eco-stat-description{

    font-size:15px;

    color:rgba(255,255,255,.65);

}

/* ==========================================================
   EMPTY STATE
========================================================== */

.eco-empty{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:18px;

    min-height:320px;

    text-align:center;

}

.eco-empty-icon{

    width:84px;

    height:84px;

    opacity:.70;

}

.eco-empty-title{

    font-size:32px;

    font-weight:600;

}

.eco-empty-description{

    max-width:480px;

    color:rgba(255,255,255,.65);

}

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

/* ==========================================================
   MODAL OVERLAY
========================================================== */

.eco-overlay{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(3,8,6,.72);

    backdrop-filter:blur(12px);

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

    z-index:var(--eco-z-overlay);

}

/* ==========================================================
   SPLASH
========================================================== */

.eco-splash{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:28px;

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

}

.eco-splash-logo{

    width:180px;

    height:auto;

}

.eco-splash-title{

    font-size:72px;

    font-weight:700;

    letter-spacing:-0.04em;

}

.eco-splash-subtitle{

    font-size:24px;

    color:rgba(255,255,255,.70);

}

/* ==========================================================
   BRAND LOGO
========================================================== */

.eco-logo{

    display:flex;

    align-items:center;

    gap:16px;

}

.eco-logo img{

    height:52px;

    width:auto;

}

.eco-logo-text{

    font-size:34px;

    font-weight:700;

    letter-spacing:-.03em;

}

/* ==========================================================
   PAGE TITLE
========================================================== */

.eco-page-title{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.eco-page-title h1{

    font-size:54px;

    font-weight:700;

}

.eco-page-title p{

    font-size:20px;

    color:rgba(255,255,255,.68);

}

/* ==========================================================
   FOOTER BAR
========================================================== */

.eco-footer-bar{

    display:flex; 

    align-items:center;

    justify-content:space-between;

    gap:24px;

    padding:18px 28px;

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

}

/* ==========================================================
   VERSION
========================================================== */

.eco-version{

    font-size:13px;

    color:rgba(255,255,255,.45);

    letter-spacing:.08em;

}

/* ==========================================================
   SCREEN READER
========================================================== */

.eco-sr-only{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}

/* ==========================================================
   COMPONENT PHILOSOPHY

   Components are invisible.

   The experience is visible.

   Every component must serve
   clarity, trust and speed.

========================================================== */

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