/* ===== Cloud MT4 — WhatsApp Phone-in-Browser Theme ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --wa-green:#075e54;
  --wa-green-light:#25d366;
  --wa-teal:#128c7e;
  --wa-dark:#111b21;
  --wa-header:#202c33;
  --wa-chat-bg:#efeae2;
  --wa-bubble:#d9fdd3;
  --wa-bubble-white:#fff;
  --wa-border:rgba(0,0,0,.08);
  --wa-text:#111b21;
  --wa-text-secondary:#667781;
  --wa-text-dim:#8696a0;
  --wa-blue:#53bdeb;
  --wa-red:#ea0038;
  --wa-white:#fff;
  --wa-radius:10px;
  --wa-shadow:0 1px 3px rgba(0,0,0,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ===== Reset ===== */
.client-page *{margin:0;padding:0;box-sizing:border-box}
.client-page{font-family:var(--font);background:var(--wa-dark);color:var(--wa-text);line-height:1.5;font-size:15px;min-height:100vh;-webkit-font-smoothing:antialiased;overflow:hidden;position:relative}
.client-page::before{content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(56,189,248,.2) 0%,transparent 50%),
    radial-gradient(ellipse at 75% 20%,rgba(139,92,246,.25) 0%,transparent 45%),
    radial-gradient(ellipse at 50% 75%,rgba(168,85,247,.18) 0%,transparent 50%),
    radial-gradient(ellipse at 80% 65%,rgba(236,72,153,.1) 0%,transparent 40%);
  z-index:0;pointer-events:none;will-change:auto}
.client-page a{color:var(--wa-teal);text-decoration:none}
.client-page a:hover{text-decoration:underline}

/* ===== Desktop Background + Phone ===== */
.phone-desktop-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;gap:60px;padding:20px;position:relative;z-index:1}

.phone-desktop-left{display:flex;flex-direction:column;align-items:flex-start;max-width:280px;color:rgba(255,255,255,.7)}
.pd-brand{font-size:28px;font-weight:700;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.pd-brand i{color:var(--wa-green-light)}
.pd-tagline{font-size:14px;line-height:1.7;margin-bottom:24px;white-space:pre-line;opacity:.6}
.pd-links{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.pd-links a{color:rgba(255,255,255,.5);font-size:13px;display:flex;align-items:center;gap:8px;transition:color .15s;text-decoration:none}
.pd-links a:hover{color:#fff;text-decoration:none}
.pd-links a i{width:16px;text-align:center;color:var(--wa-teal)}
.pd-contact a{color:var(--wa-green-light);font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px;text-decoration:none}
.pd-contact a:hover{text-decoration:none;opacity:.8}

/* Phone Frame */
.phone-frame{width:390px;height:calc(100vh - 40px);max-height:844px;background:#000;border-radius:44px;padding:12px;position:relative;box-shadow:0 0 0 2px #333,0 20px 60px rgba(0,0,0,.5);flex-shrink:0}
.phone-notch{width:120px;height:28px;background:#000;border-radius:0 0 16px 16px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:10}
.phone-screen{width:100%;height:100%;background:var(--wa-chat-bg);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;position:relative}

/* Phone Navbar */
.phone-screen .c-navbar{background:var(--wa-green);padding:0 16px;height:48px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-top:28px;height:68px}
.c-navbar-brand{color:#fff;font-size:16px;font-weight:600;display:flex;align-items:center;gap:8px}
.c-navbar-brand:hover{color:#fff;text-decoration:none}
.c-navbar-toggle{display:none}

/* Scrollbar */
.phone-content::-webkit-scrollbar{width:4px}
.phone-content::-webkit-scrollbar-track{background:transparent}
.phone-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}
.phone-content::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25)}
.phone-content{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.12) transparent}

/* Phone Content */
.phone-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px 8px;background:var(--wa-chat-bg);background-image:url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c8c0b0' opacity='.1'%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3Ccircle cx='150' cy='30' r='2'/%3E%3Ccircle cx='250' cy='70' r='4'/%3E%3Ccircle cx='100' cy='120' r='2'/%3E%3Ccircle cx='200' cy='150' r='3'/%3E%3Ccircle cx='50' cy='200' r='4'/%3E%3Ccircle cx='150' cy='250' r='2'/%3E%3Ccircle cx='250' cy='220' r='3'/%3E%3C/g%3E%3C/svg%3E")}

/* Floating Action Button */
.fab-wrap{position:absolute;bottom:20px;right:16px;z-index:20}
.fab-btn{width:52px;height:52px;border-radius:50%;background:var(--wa-green);color:#fff;border:0;font-size:22px;cursor:pointer;box-shadow:0 4px 16px rgba(7,94,84,.4);display:flex;align-items:center;justify-content:center;transition:all .25s;position:relative;z-index:22}
.fab-btn:hover{background:var(--wa-teal);transform:scale(1.05)}
.fab-btn i{transition:transform .3s}

/* Full backdrop — frosted glass */
.fab-backdrop{position:absolute;inset:-1000px;background:rgba(7,94,84,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .12s;z-index:19}
.fab-backdrop.open{opacity:1;pointer-events:all}

/* Menu — vertical pill stack */
.fab-menu{position:absolute;bottom:64px;right:0;z-index:21;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.fab-menu.open{pointer-events:all}
.fab-menu.open .fab-item{opacity:1;transform:translateY(0) scale(1)}

.fab-item{display:flex;align-items:center;gap:10px;text-decoration:none;padding:10px 20px 10px 16px;border-radius:28px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 12px rgba(0,0,0,.1);opacity:0;transform:translateY(12px) scale(.9);transition:all .15s ease-out;white-space:nowrap}
.fab-item:nth-child(1){transition-delay:.1s}
.fab-item:nth-child(2){transition-delay:.08s}
.fab-item:nth-child(3){transition-delay:.06s}
.fab-item:nth-child(4){transition-delay:.04s}
.fab-item:nth-child(5){transition-delay:.02s}
.fab-item:nth-child(6){transition-delay:0s}
.fab-item:hover{background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(0) scale(1.03)!important;text-decoration:none}
.fab-item.active{background:var(--wa-green);color:#fff}
.fab-item.active i{color:#fff}
.fab-item.active span{color:#fff}

.fab-item i{width:36px;height:36px;border-radius:50%;background:rgba(7,94,84,.1);color:var(--wa-green);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:all .15s}
.fab-item:hover i{background:var(--wa-green);color:#fff}
.fab-item span{font-size:14px;font-weight:600;color:var(--wa-text)}

/* ===== Chat Bubbles ===== */
.chat-bubble{background:var(--wa-bubble-white);border-radius:0 var(--wa-radius) var(--wa-radius) var(--wa-radius);padding:10px 14px;margin-bottom:6px;box-shadow:var(--wa-shadow);max-width:92%;font-size:13px;line-height:1.6}
.chat-bubble.green{background:var(--wa-bubble);border-radius:var(--wa-radius) 0 var(--wa-radius) var(--wa-radius);margin-left:auto}
.chat-bubble .time{font-size:10px;color:var(--wa-text-dim);text-align:right;margin-top:3px}
.chat-bubble h3{font-size:15px;font-weight:700;margin-bottom:4px}
.chat-bubble p{color:var(--wa-text-secondary);white-space:pre-line}

/* ===== Action Cards ===== */
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 0}
.action-card{background:var(--wa-white);border-radius:14px;padding:18px 12px;text-align:center;box-shadow:var(--wa-shadow);transition:all .2s;text-decoration:none;color:var(--wa-text);border:2px solid transparent}
.action-card:hover{border-color:var(--wa-green);transform:translateY(-1px);text-decoration:none}
.action-card .ac-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:20px}
.action-card h4{font-size:13px;font-weight:600;margin-bottom:2px}
.action-card p{font-size:10px;color:var(--wa-text-secondary)}

/* ===== Slider ===== */
.hero-slider{position:relative;overflow:hidden;border-radius:12px;margin:8px 0;box-shadow:var(--wa-shadow)}
.hero-slide{display:none;min-height:140px;align-items:center;color:#fff}
.hero-slide.active{display:flex}
.hero-slide-inner{padding:20px 18px;width:100%;z-index:1;position:relative}
.hero-slide-text h1{font-size:16px;font-weight:700;margin-bottom:6px;line-height:1.3}
.hero-slide-text p{font-size:12px;opacity:.8;margin-bottom:12px;line-height:1.5}
.hero-slide-text .h-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:var(--wa-text);padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none}
.hero-slide-text .h-btn:hover{text-decoration:none}
.hero-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:2}
.hero-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.hero-dots span.active{background:#fff}
.hero-arrows{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;padding:0 4px;z-index:2;transform:translateY(-50%);pointer-events:none}
.hero-arrows button{pointer-events:all;background:rgba(0,0,0,.2);border:0;color:#fff;width:28px;height:28px;border-radius:50%;font-size:10px;cursor:pointer}

/* ===== Sections ===== */
.c-section{padding:10px 0}
.c-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.c-section-head h2{font-size:14px;font-weight:700;color:var(--wa-text);display:flex;align-items:center;gap:6px}
.c-section-head a{font-size:12px;color:var(--wa-teal)}

/* ===== Article Cards ===== */
.article-grid{display:grid;grid-template-columns:1fr;gap:6px}
.article-card{background:var(--wa-white);border-radius:var(--wa-radius);text-decoration:none;color:var(--wa-text);display:flex;align-items:center;gap:12px;padding:10px 14px;box-shadow:var(--wa-shadow)}
.article-card:hover{text-decoration:none}
.article-card .ac-icon{width:40px;height:40px;border-radius:10px;background:var(--wa-chat-bg);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--wa-teal);flex-shrink:0}
.article-card h4{font-size:13px;font-weight:600;margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.article-card .ac-date{font-size:10px;color:var(--wa-text-dim)}

/* ===== VPS Guide ===== */
.plan-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
.plan-card{background:var(--wa-white);border:2px solid var(--wa-border);border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}
.plan-card:hover{border-color:var(--wa-teal)}
.plan-card.selected{border-color:var(--wa-green);background:#e7fce6}
.plan-card .plan-left h4{font-size:14px;font-weight:600;margin-bottom:1px}
.plan-card .plan-left p{font-size:11px;color:var(--wa-text-secondary)}
.plan-card .plan-price{font-size:18px;font-weight:700;color:var(--wa-green)}
.plan-card .plan-price small{font-size:10px;color:var(--wa-text-dim);font-weight:400}
.dur-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.dur-card{background:var(--wa-white);border:2px solid var(--wa-border);border-radius:10px;padding:12px;text-align:center;cursor:pointer;transition:all .15s}
.dur-card:hover{border-color:var(--wa-teal)}
.dur-card.selected{border-color:var(--wa-green);background:#e7fce6}
.dur-card .dur-days{font-size:20px;font-weight:700}
.dur-card .dur-label{font-size:10px;color:var(--wa-text-secondary)}
.dur-card .dur-price{font-size:13px;font-weight:700;color:var(--wa-green);margin-top:2px}
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}
.pay-card{background:var(--wa-white);border:2px solid var(--wa-border);border-radius:10px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s}
.pay-card:hover{border-color:var(--wa-teal)}
.pay-card.selected{border-color:var(--wa-green);background:#e7fce6}
.pay-card i{font-size:20px;color:var(--wa-teal);margin-bottom:4px;display:block}
.pay-card span{font-size:11px;font-weight:600}
.step{margin-bottom:8px;opacity:0;transform:translateY(10px);transition:all .4s ease;pointer-events:none;max-height:0;overflow:hidden}
.step.show{opacity:1;transform:translateY(0);pointer-events:all;max-height:2000px}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.05);font-size:13px}
.summary-row:last-child{border:0;font-weight:700;font-size:15px}
.btn-next{width:100%;padding:12px;border:0;border-radius:24px;background:var(--wa-green);color:#fff;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);margin-top:8px}
.btn-next:hover{background:var(--wa-teal);color:#fff}

/* ===== Pricing ===== */
.c-pricing-grid{display:grid;grid-template-columns:1fr;gap:8px}
.c-pricing-card{background:var(--wa-white);border-radius:var(--wa-radius);overflow:hidden;box-shadow:var(--wa-shadow)}
.c-pricing-card .pricing-head{background:var(--wa-green);color:#fff;padding:12px 16px}
.c-pricing-card .pricing-head h3{font-size:14px;font-weight:700}
.c-pricing-card .pricing-head .code{font-size:10px;opacity:.7}
.c-pricing-card .pricing-body{padding:10px 16px}
.c-pricing-card .price-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.05);font-size:13px}
.c-pricing-card .price-row:last-child{border:0}
.c-pricing-card .price-row .label{color:var(--wa-text-secondary)}
.c-pricing-card .price-row .val{font-weight:700}
.c-pricing-card .pricing-foot{padding:0 16px 12px}

/* ===== Category ===== */
.c-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.c-cat-card{background:var(--wa-white);border-radius:var(--wa-radius);padding:12px;box-shadow:var(--wa-shadow)}
.c-cat-card:hover{text-decoration:none}
.c-cat-card h4{font-size:12px;font-weight:600}
.c-cat-card p{font-size:10px;color:var(--wa-text-secondary)}

/* ===== Buttons ===== */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 20px;border-radius:20px;font-size:13px;font-weight:600;border:0;cursor:pointer;transition:all .15s;text-decoration:none;font-family:var(--font)}
.c-btn:hover{text-decoration:none}
.c-btn-primary,.client-page a.c-btn-primary{background:var(--wa-green);color:#fff}
.c-btn-primary:hover,.client-page a.c-btn-primary:hover{background:var(--wa-teal);color:#fff;text-decoration:none}
.c-btn-success{background:var(--wa-green-light);color:#fff}
.c-btn-outline{background:0 0;border:1px solid var(--wa-border);color:var(--wa-text-secondary);border-radius:20px}
.c-btn-outline:hover{border-color:var(--wa-teal);color:var(--wa-teal)}
.c-btn-sm{padding:5px 14px;font-size:12px}
.c-btn-block{width:100%;border-radius:10px}
.c-btn-danger{background:var(--wa-red);color:#fff}

/* ===== Cards ===== */
.c-card{background:var(--wa-white);border-radius:var(--wa-radius);box-shadow:var(--wa-shadow);overflow:visible;margin-bottom:16px}
.c-card-header{background:var(--wa-green);color:#fff;padding:10px 16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px;border-radius:var(--wa-radius) var(--wa-radius) 0 0}
.c-card-body{padding:14px 16px}

/* ===== Forms ===== */
.c-form-group{margin-bottom:14px}
.c-form-group label{display:block;margin-bottom:3px;font-size:12px;font-weight:500;color:var(--wa-text-secondary)}
.c-form-control{width:100%;padding:9px 12px;border:1px solid #d1d7db;border-radius:8px;font-size:14px;font-family:var(--font);background:var(--wa-white)}
.c-form-control:focus{outline:0;border-color:var(--wa-teal);box-shadow:0 0 0 2px rgba(18,140,126,.12)}
select.c-form-control{appearance:auto}
.c-form-grid{display:grid;gap:14px}
.c-form-grid-2{grid-template-columns:1fr 1fr}

/* ===== Alerts ===== */
.c-alert{padding:8px 14px;border-radius:8px;margin-bottom:10px;font-size:13px}
.c-alert-success{background:#d9fdd3;color:#075e54}
.c-alert-danger{background:#fde7e9;color:#ea0038}
.c-alert-info{background:#d5f0f3;color:#075e54}

/* ===== Badges ===== */
.c-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600}
.c-badge-active{background:#d9fdd3;color:#075e54}
.c-badge-expired{background:#fde7e9;color:#ea0038}
.c-badge-paid{background:#d9fdd3;color:#075e54}
.c-badge-unpaid{background:#fff4ce;color:#c19c00}
.c-badge-trial{background:#d5f0f3;color:#128c7e}
.c-badge-standard{background:#efeae2;color:#667781}
.c-badge-vip{background:#fff4ce;color:#c19c00}
.c-badge-platinum{background:var(--wa-dark);color:#fff}

/* ===== Member Layout ===== */
.c-member-wrap{display:flex;flex-direction:column;height:100%}
.c-sidebar{display:none}
.c-sidebar-overlay{display:none}
.c-member-content{flex:1;padding:12px 14px;overflow-y:auto;overflow-x:hidden}

/* ===== Stats ===== */
.c-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px}
.c-stat{background:var(--wa-white);border-radius:var(--wa-radius);padding:14px 8px;text-align:center;box-shadow:var(--wa-shadow)}
.c-stat .val{font-size:22px;font-weight:700;color:var(--wa-green)}
.c-stat .lbl{font-size:9px;color:var(--wa-text-dim);margin-top:2px}
.c-stat.accent .val{color:var(--wa-teal)}
.c-stat.soft .val{color:var(--wa-text)}

/* ===== Service Cards ===== */
.c-service-card{background:var(--wa-white);border-radius:var(--wa-radius);padding:14px;margin-bottom:14px;box-shadow:var(--wa-shadow);border-left:3px solid var(--wa-green-light)}
.c-service-card.expired{border-left-color:var(--wa-red);background:rgba(255,255,255,.6)}
.c-service-card h4{font-size:14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;font-weight:600}
.c-service-info{display:grid;grid-template-columns:80px 1fr;gap:4px;font-size:12px;margin-bottom:10px}
.c-service-info dt{color:var(--wa-text-secondary)}
.c-service-info dd{font-weight:500;word-break:break-all}

/* ===== Tables ===== */
.c-table-wrap{overflow-x:auto}
.c-table{width:100%;border-collapse:collapse;background:var(--wa-white);border-radius:var(--wa-radius);overflow:hidden;font-size:12px}
.c-table th{background:var(--wa-green);color:#fff;padding:8px 10px;text-align:left;font-size:10px;font-weight:600}
.c-table td{padding:8px 10px;border-bottom:1px solid rgba(0,0,0,.05)}
.c-table tbody tr:hover{background:var(--wa-chat-bg)}

/* ===== Payment ===== */
.c-pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.c-pay-method{border:2px solid var(--wa-border);border-radius:10px;padding:12px;text-align:center;cursor:pointer}
.c-pay-method.selected{border-color:var(--wa-green);background:#e7fce6}
.c-pay-method i{font-size:20px;color:var(--wa-teal);margin-bottom:4px;display:block}
.c-pay-method span{font-size:11px;font-weight:600}

/* ===== Tutorial/Features ===== */
.c-features{display:grid;grid-template-columns:1fr;gap:6px}
.c-feat-card{background:var(--wa-white);border-radius:var(--wa-radius);padding:12px;box-shadow:var(--wa-shadow);display:flex;align-items:center;gap:12px}
.c-feat-card i{font-size:20px;color:var(--wa-teal);flex-shrink:0}
.c-feat-card h4{font-size:13px;font-weight:600}
.c-feat-card p{font-size:11px;color:var(--wa-text-secondary)}
.tutorial-grid{display:grid;grid-template-columns:1fr;gap:6px}
.tutorial-card{background:var(--wa-white);border-radius:var(--wa-radius);padding:12px;box-shadow:var(--wa-shadow);display:flex;align-items:flex-start;gap:12px;text-decoration:none;color:var(--wa-text)}
.tutorial-card:hover{text-decoration:none}
.tutorial-card .tc-icon{width:32px;height:32px;border-radius:50%;background:#d5f0f3;color:var(--wa-teal);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.tutorial-card h4{font-size:13px;font-weight:600}

/* ===== Responsive: Mobile = no phone frame ===== */
@media(max-width:768px){
  .client-page{background:var(--wa-chat-bg);overflow:auto}
  .phone-desktop-bg{display:flex;flex-direction:column;padding:0;gap:0;min-height:100vh}
  .phone-desktop-left{display:none}
  .phone-frame{width:100%;max-height:none;height:auto;min-height:100vh;background:transparent;border-radius:0;padding:0;box-shadow:none;flex-shrink:unset}
  .phone-notch{display:none}
  .phone-screen{border-radius:0;height:auto;min-height:100vh}
  .phone-content{padding:10px 14px 20px}
  .fab-wrap{position:fixed;bottom:24px;right:24px}
  .c-form-grid-2{grid-template-columns:1fr}
}

/* ===== Very large screens ===== */
@media(min-width:1400px){
  .phone-frame{width:420px;max-height:900px}
}