/* Portal Cloud 9 Pro — WhatsApp Button + Analytics */

/* Floating button */
#portcld9-wa-wrap{position:fixed;bottom:28px;left:24px;z-index:99998;display:flex;align-items:center;justify-content:center;}
#portcld9-wa-wrap.portcld9-wa--circle{width:58px;height:58px;}
#portcld9-wa-wrap.portcld9-wa--circle::before,
#portcld9-wa-wrap.portcld9-wa--circle::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2.5px solid rgba(37,211,102,.6);pointer-events:none;animation:portcld9-wa-ring 2.4s ease-out infinite;}
#portcld9-wa-wrap.portcld9-wa--circle::after{border-color:rgba(37,211,102,.4);animation-delay:1.2s;}
@keyframes portcld9-wa-ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.85);opacity:0}}
#portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#1fad55 0%,#25d366 50%,#20c35e 100%);box-shadow:0 0 0 0 rgba(37,211,102,.5),0 5px 20px rgba(37,211,102,.5),0 2px 6px rgba(0,0,0,.25);text-decoration:none;color:#fff;animation:portcld9-wa-glow 2.8s ease-in-out infinite;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;}
@keyframes portcld9-wa-glow{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5),0 5px 20px rgba(37,211,102,.5),0 2px 6px rgba(0,0,0,.25)}50%{box-shadow:0 0 0 8px rgba(37,211,102,.12),0 6px 28px rgba(37,211,102,.75),0 2px 6px rgba(0,0,0,.25)}}
#portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn:hover{transform:scale(1.12) translateY(-2px);animation:none;}
#portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn:active{transform:scale(.95);}
#portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn svg{width:30px;height:30px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
#portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn:hover svg{transform:rotate(-8deg) scale(1.1);}
#portcld9-wa-wrap.portcld9-wa--pill{height:50px;}
#portcld9-wa-wrap.portcld9-wa--pill #portcld9-wa-btn{display:flex;align-items:center;gap:10px;padding:0 20px 0 16px;height:50px;border-radius:50px;background:linear-gradient(135deg,#1fad55 0%,#25d366 100%);box-shadow:0 4px 18px rgba(37,211,102,.55),0 2px 6px rgba(0,0,0,.2);text-decoration:none;color:#fff;animation:portcld9-wa-pill-glow 3s ease-in-out infinite;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;}
@keyframes portcld9-wa-pill-glow{0%,100%{box-shadow:0 4px 18px rgba(37,211,102,.55),0 2px 6px rgba(0,0,0,.2)}50%{box-shadow:0 6px 28px rgba(37,211,102,.8),0 2px 6px rgba(0,0,0,.2)}}
#portcld9-wa-wrap.portcld9-wa--pill #portcld9-wa-btn:hover{transform:translateY(-3px) scale(1.03);animation:none;}
#portcld9-wa-wrap.portcld9-wa--pill #portcld9-wa-btn svg{width:24px;height:24px;flex-shrink:0;}
#portcld9-wa-wrap.portcld9-wa--pill .portcld9-wa-label{font-size:14px;font-weight:600;}
@media(max-width:480px){
    #portcld9-wa-wrap.portcld9-wa--circle{bottom:80px;left:14px;width:52px;height:52px;}
    #portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn{width:52px;height:52px;}
    #portcld9-wa-wrap.portcld9-wa--circle #portcld9-wa-btn svg{width:26px;height:26px;}
    #portcld9-wa-wrap.portcld9-wa--pill{bottom:80px;left:14px;height:44px;}
    #portcld9-wa-wrap.portcld9-wa--pill #portcld9-wa-btn{height:44px;padding:0 14px 0 12px;}
}

/* Fullscreen button in topbar */
.portcld9-topbar-fs-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:none;background:rgba(255,255,255,.08);cursor:pointer;color:var(--p9-text,#1e293b);transition:all .2s ease;flex-shrink:0;}
.portcld9-topbar-fs-btn:hover{background:var(--p9-gradient);color:#fff;}
body.portalcloud9-dark .portcld9-topbar-fs-btn{background:rgba(255,255,255,.12);}

/* Analytics section */
.portcld9-wa-analytics{margin-top:28px;}
.portcld9-wa-analytics-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.portcld9-wa-title-bar{display:flex;align-items:center;gap:10px;}
.portcld9-wa-title-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#1fad55,#25d366);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(37,211,102,.4);flex-shrink:0;}
.portcld9-wa-title-icon svg{fill:#fff;}
.portcld9-wa-title-text{font-size:15px;font-weight:700;color:var(--p9-text,#1e293b);}
body.portalcloud9-dark .portcld9-wa-title-text{color:#e2e8f0;}
.portcld9-wa-title-sub{font-size:11px;color:var(--p9-muted,#64748b);margin-top:1px;}
.portcld9-wa-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.portcld9-wa-filter-pill{padding:5px 14px;border-radius:999px;font-size:12px;font-weight:600;border:1.5px solid var(--p9-border,#e2e8f0);background:transparent;color:var(--p9-muted,#64748b);cursor:pointer;transition:all .15s;line-height:1.5;}
.portcld9-wa-filter-pill:hover,.portcld9-wa-filter-pill.is-active{background:linear-gradient(135deg,#1fad55,#25d366);border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(37,211,102,.35);}
.portcld9-wa-calendar-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 12px;height:34px;min-width:34px;border-radius:999px;border:1.5px solid var(--p9-border,#e2e8f0);background:transparent;cursor:pointer;color:var(--p9-muted,#64748b);font-size:12px;font-weight:600;transition:all .15s;position:relative;white-space:nowrap;}
.portcld9-wa-calendar-btn:hover{border-color:#25d366;color:#25d366;}
.portcld9-wa-calendar-btn svg{flex-shrink:0;}
.portcld9-wa-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px;}
@media(max-width:700px){.portcld9-wa-stats{grid-template-columns:repeat(2,1fr);}}
.portcld9-wa-stat{border-radius:14px;padding:16px 18px;background:var(--p9-glass-bg,rgba(255,255,255,.8));border:1px solid var(--p9-border,#e2e8f0);position:relative;overflow:hidden;}
.portcld9-wa-stat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,211,102,.06),transparent);pointer-events:none;}
body.portalcloud9-dark .portcld9-wa-stat{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.08);}
.portcld9-wa-stat-emoji{font-size:20px;margin-bottom:6px;}
.portcld9-wa-stat-val{font-size:28px;font-weight:800;background:linear-gradient(135deg,#1fad55,#25d366);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1;}
.portcld9-wa-stat-label{font-size:11px;color:var(--p9-muted,#64748b);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.portcld9-wa-chart-wrap{background:var(--p9-glass-bg,rgba(255,255,255,.8));border:none;border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:0 2px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);overflow:hidden;}
body.portalcloud9-dark .portcld9-wa-chart-wrap{background:rgba(0,0,0,.3);box-shadow:0 2px 20px rgba(0,0,0,.3);}
.portcld9-wa-chart-label{font-size:12px;font-weight:700;color:var(--p9-muted,#64748b);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
#portcld9-wa-daily-chart,#portcld9-wa-hourly-chart{width:100%;height:140px;display:block;}
.portcld9-wa-lower{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;overflow:hidden;}
@media(max-width:700px){.portcld9-wa-lower{grid-template-columns:1fr;}}
.portcld9-wa-panel{background:var(--p9-glass-bg,rgba(255,255,255,.8));border:none;border-radius:14px;padding:16px;box-shadow:0 2px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);overflow:hidden;}
body.portalcloud9-dark .portcld9-wa-panel{background:rgba(0,0,0,.3);box-shadow:0 2px 20px rgba(0,0,0,.3);}
.portcld9-wa-panel-title{font-size:12px;font-weight:700;color:var(--p9-muted,#64748b);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.portcld9-wa-card-list{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;overflow-x:hidden;}
.portcld9-wa-thin-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--p9-bg,#fff);border:1px solid var(--p9-border,#e2e8f0);transition:all .15s;}
body.portalcloud9-dark .portcld9-wa-thin-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);}
.portcld9-wa-thin-card:hover{border-color:#25d366;transform:translateX(2px);}
.portcld9-wa-card-info{flex:1;min-width:0;}
.portcld9-wa-card-name{font-size:13px;font-weight:600;color:var(--p9-text,#1e293b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.portalcloud9-dark .portcld9-wa-card-name{color:#e2e8f0;}
.portcld9-wa-card-meta{font-size:11px;color:var(--p9-muted,#64748b);margin-top:2px;}
.portcld9-wa-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.portcld9-wa-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,rgba(31,173,85,.15),rgba(37,211,102,.1));color:#16a34a;font-size:12px;font-weight:700;border:1px solid rgba(37,211,102,.2);}
body.portalcloud9-dark .portcld9-wa-badge{color:#4ade80;background:rgba(37,211,102,.15);border-color:rgba(37,211,102,.25);}
.portcld9-wa-progress-bar{height:3px;border-radius:2px;background:rgba(37,211,102,.12);overflow:hidden;margin-top:5px;}
.portcld9-wa-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#1fad55,#25d366);transition:width .5s cubic-bezier(.4,0,.2,1);}
/* Datepicker popup — explicit colors so it works in both light and dark mode */
.portcld9-wa-datepicker-popup{
    position:absolute;top:42px;right:0;z-index:9999;
    background:#ffffff;
    color:#1e293b;
    border:1px solid #e2e8f0;
    border-radius:14px;
    box-shadow:0 10px 40px rgba(0,0,0,.18);
    padding:16px;width:290px;display:none;
}
body.portalcloud9-dark .portcld9-wa-datepicker-popup{
    background:#1e2030;
    color:#e2e8f0;
    border-color:rgba(255,255,255,.15);
}
.portcld9-wa-datepicker-popup.is-open{display:block;}

/* Mobile: centered modal so it never overflows */
@media(max-width:600px){
    .portcld9-wa-datepicker-popup{
        position:fixed !important;
        top:auto !important;
        bottom:24px !important;
        left:16px !important;
        right:16px !important;
        width:auto !important;
        transform:none !important;
        z-index:99999;
        border-radius:18px;
        padding:20px;
        box-shadow:0 -4px 40px rgba(0,0,0,.22);
    }
    /* Dark backdrop */
    .portcld9-wa-datepicker-popup.is-open::before{
        content:'';
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.5);
        z-index:-1;
    }
}

.portcld9-wa-dp-title{
    font-size:13px;font-weight:700;
    color:#1e293b;
    margin-bottom:12px;
    display:flex;align-items:center;gap:6px;
}
body.portalcloud9-dark .portcld9-wa-dp-title{color:#e2e8f0;}

.portcld9-wa-dp-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.portcld9-wa-dp-row label{
    font-size:11px;font-weight:700;
    color:#64748b;
    min-width:32px;text-transform:uppercase;
}
body.portalcloud9-dark .portcld9-wa-dp-row label{color:#94a3b8;}

.portcld9-wa-dp-row input[type="date"]{
    flex:1;padding:8px 10px;border-radius:8px;
    border:1.5px solid #e2e8f0;
    font-size:14px;
    background:#f8fafc;
    color:#1e293b;
    outline:none;
}
.portcld9-wa-dp-row input[type="date"]:focus{border-color:#25d366;}
body.portalcloud9-dark .portcld9-wa-dp-row input[type="date"]{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.15);
    color:#e2e8f0;
    color-scheme:dark;
}

.portcld9-wa-dp-apply{
    width:100%;padding:10px;border-radius:999px;
    background:linear-gradient(135deg,#1fad55,#25d366);
    color:#fff;font-size:13px;font-weight:700;
    border:none;cursor:pointer;transition:opacity .15s;
    margin-top:4px;
}
.portcld9-wa-dp-apply:hover{opacity:.9;}
.portcld9-wa-disabled-notice{padding:18px;border-radius:12px;background:rgba(37,211,102,.05);border:1.5px dashed rgba(37,211,102,.25);color:var(--p9-muted,#64748b);font-size:13px;text-align:center;}