/* ============================================================ Yeet App — subscription-app client portal design system Prefix: .ya- (coexists with the theme's Bootstrap) ============================================================ */ :root{ --ya-brand:#2563eb; --ya-brand-dark:#1d4ed8; --ya-ink:#0f172a; --ya-muted:#64748b; --ya-bg:#eef2f7; --ya-card:#fff; --ya-line:#e5e9f0; --ya-soft:#f8fafc; --ya-ok:#16a34a; --ya-okbg:#dcfce7; --ya-warn:#b45309; --ya-warnbg:#fef3c7; --ya-danger:#dc2626; --ya-radius:16px; --ya-side-w:248px; } /* YEETAPP-HTML-BG — paint the page bg on too, so when content (e.g. the order/store page in the guest shell) is taller than the body box, no unthemed white/grey band shows below it. --ya-bg is themed (light + dark override). */ html:has(body.yeetapp){background:var(--ya-bg)} /* END YEETAPP-HTML-BG */ body.yeetapp{margin:0;background:var(--ya-bg);color:var(--ya-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased} body.yeetapp a{text-decoration:none;color:inherit} .ya-shell{display:flex;min-height:100vh} /* ---- Sidebar ---- */ .ya-side{width:var(--ya-side-w);flex:none;background:#fff;border-right:1px solid var(--ya-line); display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh} .ya-brand{display:flex;align-items:center;gap:10px;padding:8px 10px 18px;font-weight:800;font-size:20px;letter-spacing:-.3px} .ya-brand .ya-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--ya-brand),var(--ya-brand-dark)); color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px} .ya-brand b{color:var(--ya-brand)} .ya-nav{display:flex;flex-direction:column;gap:3px;margin-top:4px} .ya-nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;color:#475569;font-weight:600;font-size:14.5px} .ya-nav a i{width:20px;text-align:center;font-size:16px;color:#94a3b8} .ya-nav a:hover{background:#f1f5f9;color:var(--ya-ink)} .ya-nav a.on{background:#eff4ff;color:var(--ya-brand)}.ya-nav a.on i{color:var(--ya-brand)} .ya-side .ya-spacer{flex:1} .ya-addplan{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 4px;padding:12px;border-radius:12px; background:linear-gradient(135deg,var(--ya-brand),var(--ya-brand-dark));color:#fff;font-weight:700;font-size:14px} .ya-signout{display:flex;align-items:center;gap:10px;padding:11px 13px;color:#94a3b8;font-weight:600;font-size:13.5px} /* ---- Main ---- */ .ya-main{flex:1;min-width:0;display:flex;flex-direction:column} .ya-top{display:flex;align-items:center;justify-content:space-between;padding:16px 28px;border-bottom:1px solid var(--ya-line);background:#fff} .ya-top .ya-burger{display:none;border:0;background:transparent;font-size:22px;color:var(--ya-ink);cursor:pointer;margin-right:6px} .ya-hello{font-size:13px;color:var(--ya-muted)} .ya-hello b{display:block;font-size:18px;color:var(--ya-ink);font-weight:800;margin-top:1px} .ya-avatar{width:40px;height:40px;border-radius:50%;background:#e0e7ff;color:var(--ya-brand);display:flex;align-items:center;justify-content:center;font-weight:800} .ya-content{padding:24px 28px;max-width:1080px;width:100%} .ya-content h1{font-size:22px;font-weight:800;margin:0 0 4px} .ya-content .ya-sub{color:var(--ya-muted);font-size:14px;margin:0 0 20px} /* ---- Status strip ---- */ .ya-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--ya-line); border-radius:var(--ya-radius);padding:14px 18px;margin-bottom:20px} .ya-status .ya-dot{width:10px;height:10px;border-radius:50%;background:var(--ya-ok);box-shadow:0 0 0 4px var(--ya-okbg)} .ya-status.is-warn .ya-dot{background:var(--ya-warn);box-shadow:0 0 0 4px var(--ya-warnbg)} .ya-status .s-main{font-weight:700} .ya-status .s-sub{color:var(--ya-muted);font-size:13.5px} .ya-status .ya-pill{margin-left:auto;background:var(--ya-okbg);color:var(--ya-ok);font-weight:700;font-size:12.5px;padding:5px 12px;border-radius:999px} .ya-status.is-warn .ya-pill{background:var(--ya-warnbg);color:var(--ya-warn)} /* ---- Pay early banner ---- */ .ya-payearly{display:flex;align-items:center;gap:14px;background:var(--ya-warnbg);border:1px solid #fde68a; border-radius:var(--ya-radius);padding:14px 18px;margin-bottom:20px} .ya-payearly>i{font-size:20px;color:var(--ya-warn)} .ya-payearly .t{font-weight:700;color:var(--ya-warn)} .ya-payearly .d{font-size:13px;color:#92671a} .ya-payearly .ya-btn{margin-left:auto} /* ---- Grid + cards ---- */ .ya-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:20px} .ya-card{background:var(--ya-card);border:1px solid var(--ya-line);border-radius:var(--ya-radius);padding:20px 22px;margin-bottom:20px} .ya-card:last-child{margin-bottom:0} .ya-card h3{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ya-muted);font-weight:700; margin:0 0 14px;display:flex;align-items:center;gap:8px} .ya-card h3 i{color:var(--ya-brand);font-size:14px} .ya-grid .ya-card{margin-bottom:0} /* ---- App login card ---- */ .ya-svc-name{font-weight:800;font-size:18px;margin-bottom:2px} .ya-svc-meta{color:var(--ya-muted);font-size:13px;margin-bottom:16px} /* YEETAPP-MULTI-LOGIN */ .ya-svc-sep{margin-top:20px;padding-top:20px;border-top:1px solid var(--ya-line)} .ya-svc-tag{display:inline-block;vertical-align:middle;margin-left:8px;font-size:11px;font-weight:700;color:#92400e;background:#fef3c7;border-radius:9px;padding:2px 9px} html[data-ya-theme="dark"] .ya-svc-tag{color:#fcd34d;background:rgba(146,64,14,.25)} .ya-svc-manage{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px} .ya-svc-manage a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ya-muted)} .ya-svc-manage a:hover{color:var(--ya-brand)} .ya-svc-manage a.cancel:hover{color:var(--ya-danger)} /* END YEETAPP-MULTI-LOGIN */ /* YEETAPP-BILLING — outstanding block + history table download */ .ya-bill-due{background:var(--ya-card);border:1px solid var(--ya-line);border-left:4px solid #f59e0b;border-radius:var(--ya-radius);padding:16px 18px;margin-bottom:20px} .ya-bill-due-head{font-weight:800;font-size:15px;color:#b45309;margin-bottom:6px;display:flex;align-items:center;gap:8px} html[data-ya-theme="dark"] .ya-bill-due-head{color:#fbbf24} .ya-bill-due-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--ya-line)} .ya-bill-due-row .info{display:flex;flex-direction:column;line-height:1.3} .ya-bill-due-row .info span{color:var(--ya-muted);font-size:12.5px} .ya-bill-due-row .amt{margin-left:auto;font-weight:800;font-size:16px;color:var(--ya-ink)} .ya-bill-due-row .ya-btn{flex:0 0 auto;padding:9px 16px} .ya-dl{color:var(--ya-muted);font-size:15px} .ya-dl:hover{color:var(--ya-brand)} /* END YEETAPP-BILLING */ .ya-cred{margin-bottom:12px} .ya-cred label{display:block;font-size:12px;color:var(--ya-muted);font-weight:700;margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em} .ya-field{display:flex;align-items:center;gap:8px;background:var(--ya-soft);border:1px solid var(--ya-line);border-radius:11px;padding:11px 14px} .ya-field code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;color:var(--ya-ink);letter-spacing:.3px;word-break:break-all} .ya-field button{flex:none;border:0;background:transparent;color:#94a3b8;cursor:pointer;font-size:15px;padding:4px 6px;border-radius:8px} .ya-field button:hover{background:#eef2f7;color:var(--ya-brand)} .ya-apps{margin-top:18px} .ya-apps .lbl{font-size:12px;color:var(--ya-muted);font-weight:700;margin-bottom:9px;text-transform:uppercase;letter-spacing:.03em} .ya-apps .row{display:flex;gap:10px;flex-wrap:wrap} .ya-appbtn{display:flex;align-items:center;gap:9px;border:1px solid var(--ya-line);border-radius:11px;padding:9px 13px;font-weight:600;font-size:13.5px;background:#fff} .ya-appbtn:hover{border-color:var(--ya-brand);color:var(--ya-brand)} .ya-appbtn i{font-size:17px} /* ---- Payment card ---- */ .ya-cardface{background:linear-gradient(135deg,#1e293b,#0f172a);color:#fff;border-radius:14px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden} .ya-cardface .ya-brandmark{position:absolute;top:16px;right:18px;font-size:26px;opacity:.9} .ya-cardface .num{font-family:ui-monospace,monospace;font-size:17px;letter-spacing:2px;margin:26px 0 14px} .ya-cardface .meta{display:flex;justify-content:space-between;font-size:12px;opacity:.85} .ya-cardface.empty{background:#f1f5f9;color:var(--ya-muted);display:flex;align-items:center;justify-content:center;min-height:96px;font-weight:600;text-align:center} .ya-next-line{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:var(--ya-muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--ya-line)} .ya-next-line b{color:var(--ya-ink)} .ya-paynow{margin-top:10px} .ya-paynow:hover{background:var(--ya-soft)} /* ---- Buttons ---- */ .ya-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-weight:700;font-size:14px; padding:11px 16px;border-radius:11px;background:var(--ya-brand);color:#fff;text-align:center} .ya-btn:hover{background:var(--ya-brand-dark);color:#fff} .ya-btn.block{width:100%} .ya-btn.ghost{background:#fff;border:1px solid var(--ya-line);color:var(--ya-ink)} .ya-btn.ghost:hover{border-color:var(--ya-brand);color:var(--ya-brand)} .ya-btn.amber{background:var(--ya-warn);color:#fff} .ya-btn.amber:hover{background:#92671a;color:#fff} .ya-btn.danger{background:#fff;border:1px solid #fecaca;color:var(--ya-danger)} /* ---- Tiles ---- */ .ya-mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} .ya-tile{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--ya-line);border-radius:var(--ya-radius);padding:16px 18px} .ya-tile .ic{width:42px;height:42px;border-radius:11px;background:#eff4ff;color:var(--ya-brand);display:flex;align-items:center;justify-content:center;font-size:18px} .ya-tile .tt{font-weight:700;font-size:14.5px} .ya-tile .ts{font-size:12.5px;color:var(--ya-muted)} .ya-tile .ar{margin-left:auto;color:#cbd5e1} /* ---- Generic form (account / update card) ---- */ .ya-form label{display:block;font-size:13px;font-weight:700;color:#334155;margin:14px 0 5px} .ya-form input,.ya-form select,.ya-form textarea{width:100%;padding:11px 13px;border:1px solid var(--ya-line);border-radius:11px; font-size:14.5px;font-family:inherit;background:#fff;color:var(--ya-ink)} .ya-form input:focus,.ya-form select:focus,.ya-form textarea:focus{outline:none;border-color:var(--ya-brand);box-shadow:0 0 0 3px rgba(37,99,235,.12)} .ya-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* ---- Table (billing history) ---- */ .ya-table{width:100%;border-collapse:collapse;font-size:14px} .ya-table th{text-align:left;color:var(--ya-muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:10px 10px;border-bottom:1px solid var(--ya-line)} .ya-table td{padding:12px 10px;border-bottom:1px solid #eef2f7} .ya-badge{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px} .ya-badge.paid{background:var(--ya-okbg);color:var(--ya-ok)} .ya-badge.unpaid{background:var(--ya-warnbg);color:var(--ya-warn)} .ya-badge.refunded{background:#f1f5f9;color:var(--ya-muted)} /* ---- Flash / alerts ---- */ .ya-alert{border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:14px;font-weight:500} .ya-alert.ok{background:var(--ya-okbg);color:#15803d;border:1px solid #bbf7d0} .ya-alert.err{background:#fef2f2;color:var(--ya-danger);border:1px solid #fecaca} .ya-alert.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe} /* ---- Guest shell (login / order / not logged in) ---- */ .ya-gtop{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--ya-line);padding:14px 24px} .ya-gtop .ya-brand{padding:0;font-size:19px} .ya-gbody{max-width:1040px;margin:0 auto;padding:28px 20px;width:100%} .ya-gbody.narrow{max-width:430px} /* ---- Mobile ---- */ .ya-backdrop{display:none} @media(max-width:900px){ .ya-grid{grid-template-columns:1fr} .ya-side{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.18)} body.ya-menu-open .ya-side{transform:translateX(0)} body.ya-menu-open .ya-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55} .ya-top .ya-burger{display:inline-flex;align-items:center} } @media(max-width:560px){.ya-content{padding:18px 16px}.ya-top{padding:14px 16px}.ya-mini{grid-template-columns:1fr}.ya-form .row2{grid-template-columns:1fr}} /* YEETAPP-BTN-TEXT-FIX — base theme a:link/a:visited beat our class; force readable text on filled buttons */ .ya-addplan,.ya-addplan:link,.ya-addplan:visited,.ya-addplan:hover, .ya-btn,.ya-btn:link,.ya-btn:visited,.ya-btn:hover, .ya-btn.amber,.ya-btn.amber:hover{color:#fff !important} .ya-btn.ghost,.ya-btn.ghost:link,.ya-btn.ghost:visited{color:var(--ya-ink) !important} .ya-btn.ghost:hover{color:var(--ya-brand) !important} .ya-btn.danger,.ya-btn.danger:link,.ya-btn.danger:visited{color:var(--ya-danger) !important} .ya-addplan i,.ya-btn i{color:inherit !important} /* END YEETAPP-BTN-TEXT-FIX */ /* YEETAPP-STOCK-BTNS — brand the stock WHMCS .btn buttons on inner client-area pages (account, invoices, tickets, etc.). Order form has its own #order-standard_cart rules. */ .ya-content .btn{border-radius:10px;font-weight:700;padding:10px 18px} .ya-content .btn-primary,.ya-content .btn-success{background:var(--ya-brand) !important;border-color:var(--ya-brand) !important;color:#fff !important} .ya-content .btn-primary:hover,.ya-content .btn-primary:focus,.ya-content .btn-success:hover,.ya-content .btn-success:focus{background:var(--ya-brand-dark) !important;border-color:var(--ya-brand-dark) !important;color:#fff !important} .ya-content .btn-default{background:#fff !important;border:1px solid var(--ya-line) !important;color:var(--ya-ink) !important} .ya-content .btn-default:hover{border-color:var(--ya-brand) !important;color:var(--ya-brand) !important} .ya-content .btn-danger{background:var(--ya-danger) !important;border-color:var(--ya-danger) !important;color:#fff !important} .ya-content .btn-danger:hover,.ya-content .btn-danger:focus{background:#b91c1c !important;border-color:#b91c1c !important;color:#fff !important} /* Save/Cancel action row — separate it from the content above */ .ya-content form .form-group.text-center:has(input[type="submit"],button[type="submit"]){ margin-top:24px;padding-top:24px;border-top:1px solid var(--ya-line) } .ya-content form .form-group.text-center .btn{margin:0 5px;min-width:140px} /* END YEETAPP-STOCK-BTNS */ /* YEETAPP-THEME-TOGGLE — topbar sun/moon button + right group */ .ya-right{display:flex;align-items:center;gap:12px} .ya-themebtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--ya-line);background:var(--ya-card); color:var(--ya-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;transition:.15s} .ya-themebtn:hover{color:var(--ya-brand);border-color:var(--ya-brand)} .ya-cartbtn{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--ya-line);background:var(--ya-card);color:var(--ya-muted) !important;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:1;transition:.15s;text-decoration:none;flex:0 0 auto} .ya-cartbtn:hover{color:var(--ya-brand) !important;border-color:var(--ya-brand)} .ya-cart-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;background:var(--ya-brand);color:#fff !important;border-radius:999px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--ya-card)} .ya-gtop .ya-right{gap:10px} /* YEETAPP-DARK — dark mode via [data-ya-theme=dark] on : flip tokens + hardcoded-light surfaces */ html[data-ya-theme="dark"]{ --ya-bg:#0b1220; --ya-card:#161e2e; --ya-ink:#e6eaf3; --ya-muted:#93a1b8; --ya-line:#28344c; --ya-soft:#1b2436; --ya-okbg:rgba(22,163,74,.16); --ya-warnbg:rgba(217,119,6,.18); } html[data-ya-theme="dark"] .ya-side, html[data-ya-theme="dark"] .ya-top, html[data-ya-theme="dark"] .ya-gtop, html[data-ya-theme="dark"] .ya-status, html[data-ya-theme="dark"] .ya-tile, html[data-ya-theme="dark"] .ya-appbtn, html[data-ya-theme="dark"] .ya-themebtn, html[data-ya-theme="dark"] .ya-btn.ghost{background:var(--ya-card)} html[data-ya-theme="dark"] .ya-btn.danger{background:var(--ya-card);border-color:#7f1d1d} html[data-ya-theme="dark"] .ya-nav a{color:#c2cce0} html[data-ya-theme="dark"] .ya-nav a i{color:#7e8ca8} html[data-ya-theme="dark"] .ya-nav a:hover{background:var(--ya-soft);color:#fff} html[data-ya-theme="dark"] .ya-nav a.on{background:rgba(37,99,235,.20)} html[data-ya-theme="dark"] .ya-nav a.on,html[data-ya-theme="dark"] .ya-nav a.on i{color:#9cc0ff} html[data-ya-theme="dark"] .ya-signout{color:#7e8ca8} html[data-ya-theme="dark"] .ya-avatar{background:rgba(37,99,235,.24);color:#9cc0ff} html[data-ya-theme="dark"] .ya-tile .ic{background:rgba(37,99,235,.18)} html[data-ya-theme="dark"] .ya-tile .ar{color:#52607a} html[data-ya-theme="dark"] .ya-field{background:var(--ya-soft)} html[data-ya-theme="dark"] .ya-field button:hover{background:#243049} html[data-ya-theme="dark"] .ya-cardface.empty{background:var(--ya-soft);color:var(--ya-muted)} html[data-ya-theme="dark"] .ya-form label{color:#c2cce0} html[data-ya-theme="dark"] .ya-form input, html[data-ya-theme="dark"] .ya-form select, html[data-ya-theme="dark"] .ya-form textarea{background:var(--ya-soft);color:var(--ya-ink)} html[data-ya-theme="dark"] .ya-table td{border-bottom-color:var(--ya-line)} html[data-ya-theme="dark"] .ya-payearly .d{color:#fcd9a8} html[data-ya-theme="dark"] .ya-badge.refunded{background:var(--ya-soft);color:var(--ya-muted)} html[data-ya-theme="dark"] .ya-alert.ok{background:var(--ya-okbg);color:#86efac;border-color:#166534} html[data-ya-theme="dark"] .ya-alert.err{background:rgba(220,38,38,.14);color:#fca5a5;border-color:#7f1d1d} html[data-ya-theme="dark"] .ya-alert.info{background:rgba(37,99,235,.14);color:#93b4ff;border-color:#1e40af} /* stock WHMCS content (account/invoices/tickets) in dark */ html[data-ya-theme="dark"] .ya-content, html[data-ya-theme="dark"] .ya-content p,html[data-ya-theme="dark"] .ya-content h1, html[data-ya-theme="dark"] .ya-content h2,html[data-ya-theme="dark"] .ya-content h3, html[data-ya-theme="dark"] .ya-content h4,html[data-ya-theme="dark"] .ya-content label, html[data-ya-theme="dark"] .ya-content td,html[data-ya-theme="dark"] .ya-content th, html[data-ya-theme="dark"] .ya-content li,html[data-ya-theme="dark"] .ya-content dd, html[data-ya-theme="dark"] .ya-content dt{color:var(--ya-ink)} html[data-ya-theme="dark"] .ya-content .card,html[data-ya-theme="dark"] .ya-content .panel, html[data-ya-theme="dark"] .ya-content .well,html[data-ya-theme="dark"] .ya-content .list-group-item{background:var(--ya-card) !important;border-color:var(--ya-line) !important} html[data-ya-theme="dark"] .ya-content .card-header, html[data-ya-theme="dark"] .ya-content .panel-heading{background:var(--ya-soft) !important;border-color:var(--ya-line) !important} html[data-ya-theme="dark"] .ya-content .form-control, html[data-ya-theme="dark"] .ya-content input[type="text"],html[data-ya-theme="dark"] .ya-content input[type="email"], html[data-ya-theme="dark"] .ya-content input[type="password"],html[data-ya-theme="dark"] .ya-content input[type="tel"], html[data-ya-theme="dark"] .ya-content input[type="number"],html[data-ya-theme="dark"] .ya-content select, html[data-ya-theme="dark"] .ya-content textarea{background:var(--ya-soft) !important;border-color:var(--ya-line) !important;color:var(--ya-ink) !important} html[data-ya-theme="dark"] .ya-content .table td,html[data-ya-theme="dark"] .ya-content .table th{border-color:var(--ya-line) !important;color:var(--ya-ink)} html[data-ya-theme="dark"] .ya-content .input-group-text{background:var(--ya-card) !important;border-color:var(--ya-line) !important;color:var(--ya-muted)} /* order form in dark */ html[data-ya-theme="dark"] #order-standard_cart .form-control{background:var(--ya-soft) !important;border-color:var(--ya-line) !important;color:var(--ya-ink) !important} html[data-ya-theme="dark"] #order-standard_cart .product .product-desc, html[data-ya-theme="dark"] #order-standard_cart .product .cycle{color:var(--ya-muted)} /* END YEETAPP-DARK */ /* YEETAPP-DARK-TABLES — DataTables list pages (App login / Billing / Support) in dark */ html[data-ya-theme="dark"] .ya-content table.table, html[data-ya-theme="dark"] .ya-content .table-list{background:var(--ya-card);color:var(--ya-ink)} html[data-ya-theme="dark"] .ya-content .table thead th, html[data-ya-theme="dark"] .ya-content .table-list thead th, html[data-ya-theme="dark"] .ya-content table.table > thead > tr > th{color:var(--ya-ink) !important;background:var(--ya-soft) !important;border-color:var(--ya-line) !important} html[data-ya-theme="dark"] .ya-content .table td, html[data-ya-theme="dark"] .ya-content .table-list td, html[data-ya-theme="dark"] .ya-content table.table > tbody > tr > td{color:var(--ya-ink) !important;border-color:var(--ya-line) !important;background:transparent} html[data-ya-theme="dark"] .ya-content .table tbody tr:hover > td{background:var(--ya-soft) !important} html[data-ya-theme="dark"] .ya-content .table-container, html[data-ya-theme="dark"] .ya-content .dataTables_empty{color:var(--ya-muted) !important} html[data-ya-theme="dark"] .ya-content .dataTables_wrapper, html[data-ya-theme="dark"] .ya-content .dataTables_info, html[data-ya-theme="dark"] .ya-content .dataTables_length, html[data-ya-theme="dark"] .ya-content .dataTables_filter, html[data-ya-theme="dark"] .ya-content .dataTables_length label, html[data-ya-theme="dark"] .ya-content .dataTables_filter label{color:var(--ya-ink) !important} html[data-ya-theme="dark"] .ya-content .dataTables_filter input, html[data-ya-theme="dark"] .ya-content .dataTables_length select{background:var(--ya-soft) !important;border:1px solid var(--ya-line) !important;color:var(--ya-ink) !important} html[data-ya-theme="dark"] .ya-content .dataTables_paginate .paginate_button{background:var(--ya-card) !important;border:1px solid var(--ya-line) !important;color:var(--ya-ink) !important} html[data-ya-theme="dark"] .ya-content .dataTables_paginate .paginate_button.current, html[data-ya-theme="dark"] .ya-content .dataTables_paginate .paginate_button:hover{background:var(--ya-brand) !important;border-color:var(--ya-brand) !important;color:#fff !important} html[data-ya-theme="dark"] .ya-content .dataTables_paginate .paginate_button.disabled{color:var(--ya-muted) !important;opacity:.45} html[data-ya-theme="dark"] .ya-content .dataTables_paginate span .paginate_button{background:transparent !important} /* generic light panels WHMCS sometimes uses on these pages */ html[data-ya-theme="dark"] .ya-content .tickets-list, html[data-ya-theme="dark"] .ya-content .table-list-filter, html[data-ya-theme="dark"] .ya-content .btn-group .btn{background:var(--ya-card);color:var(--ya-ink)} /* END YEETAPP-DARK-TABLES */ /* YEETAPP-DARK-BTNDEFAULT — stock .btn-default kept white bg (light rule has !important) → fix for dark */ html[data-ya-theme="dark"] .ya-content .btn-default, html[data-ya-theme="dark"] #order-standard_cart .btn-default{ background:var(--ya-card) !important;border:1px solid var(--ya-line) !important;color:var(--ya-ink) !important} html[data-ya-theme="dark"] .ya-content .btn-default:hover, html[data-ya-theme="dark"] #order-standard_cart .btn-default:hover{ border-color:var(--ya-brand) !important;color:#9cc0ff !important} /* END YEETAPP-DARK-BTNDEFAULT */ /* YEETAPP-FOOT — slim branded footer with legal links (dark-aware via tokens) */ .ya-foot{border-top:1px solid var(--ya-line);padding:24px 28px 30px;text-align:center;color:var(--ya-muted)} .ya-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-bottom:14px} .ya-foot-links a{color:var(--ya-muted);font-weight:600;font-size:13.5px} .ya-foot-links a:hover{color:var(--ya-brand)} .ya-foot-mail{display:inline-flex;align-items:center;gap:7px;color:var(--ya-ink);font-weight:600;font-size:13.5px;margin-bottom:14px} .ya-foot-mail:hover{color:var(--ya-brand)} .ya-foot-copy{font-size:12.5px;color:var(--ya-muted)} /* END YEETAPP-FOOT */ /* YEETAPP-FOOT-CARDS — payment icons */ .ya-foot-cards{display:flex;justify-content:center;align-items:center;gap:10px;font-size:30px;margin:4px 0 16px;line-height:1} .ya-foot-cards .fa-cc-visa{color:#1a1f71} .ya-foot-cards .fa-cc-mastercard{color:#eb001b} .ya-foot-cards .fa-cc-amex{color:#2e77bc} .ya-foot-cards .fa-cc-discover{color:#ff6000} .ya-foot-cards .fa-cc-paypal{color:#003087} /* keep dark-bg-unfriendly card colors visible in dark mode */ html[data-ya-theme="dark"] .ya-foot-cards .fa-cc-visa{color:#5e74e0} html[data-ya-theme="dark"] .ya-foot-cards .fa-cc-paypal{color:#4d8fe0} html[data-ya-theme="dark"] .ya-foot-cards .fa-cc-amex{color:#56a0e8} /* END YEETAPP-FOOT-CARDS */ /* YEETAPP-DARK-LEGAL — Word-pasted legal pages have inline color:black & light bg; force readable in dark */ html[data-ya-theme="dark"] .ya-content .WordSection1, html[data-ya-theme="dark"] .ya-content .WordSection1 *, html[data-ya-theme="dark"] .ya-content [style*="color: black"], html[data-ya-theme="dark"] .ya-content [style*="color:black"], html[data-ya-theme="dark"] .ya-content [style*="color: #000"], html[data-ya-theme="dark"] .ya-content [style*="color:#000"]{ color:var(--ya-ink) !important;background-color:transparent !important } html[data-ya-theme="dark"] .ya-content .WordSection1 a{color:#9cc0ff !important} /* END YEETAPP-DARK-LEGAL */ /* YEETAPP-LANGBTN — topbar language/currency selector pill */ .ya-langbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px; border:1px solid var(--ya-line);background:var(--ya-card);color:var(--ya-ink);cursor:pointer;font-weight:600;font-size:13px;line-height:1;white-space:nowrap} .ya-langbtn:hover{border-color:var(--ya-brand);color:var(--ya-brand)} .ya-langbtn .iti-flag{flex:none} @media(max-width:600px){.ya-langtxt{display:none}.ya-langbtn{padding:0 11px}} /* END YEETAPP-LANGBTN */ /* YEETAPP-PAGEHEAD — page title + action button row (Support, etc.) */ .ya-pagehead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px} .ya-pagehead h1{font-size:22px;font-weight:800;margin:0 0 2px;color:var(--ya-ink)} .ya-pagehead .ya-sub{margin:0;color:var(--ya-muted);font-size:14px} .ya-pagehead .ya-btn{flex:none} /* END YEETAPP-PAGEHEAD */ /* YEETAPP-AFFILIATE — modern affiliate/refer-&-earn page */ .ya-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px} .ya-stat{display:flex;align-items:center;gap:16px;background:var(--ya-card);border:1px solid var(--ya-line);border-radius:var(--ya-radius);padding:20px 22px;box-shadow:0 1px 2px rgba(15,23,42,.04)} .ya-stat-ic{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none} .ya-stat-num{font-size:30px;font-weight:800;color:var(--ya-ink);line-height:1} .ya-stat-lbl{font-size:13px;color:var(--ya-muted);font-weight:600;margin-top:5px} .ya-stat.amber .ya-stat-ic{background:#fef3c7;color:#b45309} .ya-stat.teal .ya-stat-ic{background:#ccfbf1;color:#0d9488} .ya-stat.green .ya-stat-ic{background:#dcfce7;color:#16a34a} .ya-refcard .ya-refbox{display:flex;gap:10px;margin-top:2px} .ya-refcard .ya-refbox input{flex:1;border-radius:11px;border:1px solid var(--ya-line);padding:12px 14px;background:var(--ya-soft);color:var(--ya-ink);font-size:14px;font-family:ui-monospace,Menlo,monospace} .ya-refcard .ya-refbox .ya-btn{flex:none} .ya-earn-row{display:flex;justify-content:space-between;align-items:center;padding:13px 2px;border-bottom:1px dashed var(--ya-line);font-size:14.5px} .ya-earn-row span{color:var(--ya-muted)} .ya-earn-row b{color:var(--ya-ink);font-size:15px} .ya-earn-row b.hl{color:var(--ya-brand);font-size:19px} .ya-earn-row:last-of-type{border-bottom:0} .ya-earn-btn{display:flex !important;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;border-radius:11px !important;font-size:15px !important;padding:14px !important} .ya-earn-btn.disabled{opacity:.55;pointer-events:none} .ya-withdraw-note{text-align:center;color:var(--ya-muted);font-size:13px;margin-top:12px} .ya-content h2{font-size:18px;font-weight:800;color:var(--ya-ink);margin:26px 0 12px} /* dark-mode icon chips */ html[data-ya-theme="dark"] .ya-stat.amber .ya-stat-ic{background:rgba(180,83,9,.22);color:#fbbf24} html[data-ya-theme="dark"] .ya-stat.teal .ya-stat-ic{background:rgba(13,148,136,.24);color:#5eead4} html[data-ya-theme="dark"] .ya-stat.green .ya-stat-ic{background:rgba(22,163,74,.22);color:#86efac} @media(max-width:760px){.ya-stats{grid-template-columns:1fr}} /* END YEETAPP-AFFILIATE */ /* YEETAPP-RETURNADMIN — masquerade / admin-preview "Return to Admin" button */ .ya-returnadmin{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px; background:#fef3c7;color:#92400e;border:1px solid #fcd34d;font-weight:700;font-size:13px;white-space:nowrap} .ya-returnadmin:hover{background:#fde68a;color:#78350f} html[data-ya-theme="dark"] .ya-returnadmin{background:rgba(180,83,9,.30);color:#fcd34d;border-color:rgba(252,211,77,.40)} @media(max-width:760px){.ya-ra-txt{display:none}.ya-returnadmin{padding:0 12px}} /* de-rotate the stock guest-preview return button into a clean fixed pill (matches above) */ .btn-return-to-admin{position:fixed !important;top:auto !important;bottom:18px !important;right:18px !important;left:auto !important; transform:none !important;writing-mode:horizontal-tb !important;display:inline-flex !important;align-items:center;gap:8px; height:auto !important;width:auto !important;padding:11px 16px !important;border-radius:999px !important; background:#fef3c7 !important;color:#92400e !important;border:1px solid #fcd34d !important;font-weight:700;font-size:13px; z-index:60;box-shadow:0 6px 18px rgba(0,0,0,.14)} .btn-return-to-admin:hover{background:#fde68a !important;color:#78350f !important} /* END YEETAPP-RETURNADMIN */ /* YEETAPP-SIDEBAR-COLLAPSE — desktop hamburger collapses sidebar to an icon-only rail */ .ya-top .ya-burger{display:inline-flex !important;align-items:center} .ya-side{transition:width .2s ease} @media(min-width:901px){ html.ya-collapsed .ya-side{width:76px} html.ya-collapsed .ya-brand{justify-content:center;gap:0;padding-left:0;padding-right:0;font-size:0} html.ya-collapsed .ya-brand .ya-logo{font-size:16px} html.ya-collapsed .ya-nav a{justify-content:center;gap:0;font-size:0;padding-left:0;padding-right:0} html.ya-collapsed .ya-nav a i{font-size:18px} html.ya-collapsed .ya-addplan{gap:0;font-size:0;padding-left:0;padding-right:0} html.ya-collapsed .ya-addplan i{font-size:16px} html.ya-collapsed .ya-signout{justify-content:center;gap:0;font-size:0} html.ya-collapsed .ya-signout i{font-size:16px} } /* END YEETAPP-SIDEBAR-COLLAPSE */ /* YEETAPP-FOCUS — remove the lingering click-focus outline on topbar controls (keep keyboard ring) */ .ya-burger:focus,.ya-themebtn:focus,.ya-langbtn:focus,.ya-avatar:focus,.ya-returnadmin:focus,.ya-field button:focus{outline:none;box-shadow:none} .ya-burger:focus-visible,.ya-themebtn:focus-visible,.ya-langbtn:focus-visible,.ya-avatar:focus-visible,.ya-returnadmin:focus-visible{outline:2px solid var(--ya-brand);outline-offset:2px} /* END YEETAPP-FOCUS */ /* YEETAPP-CONTENT-FILL — let page content use the full width (no right-side gap when sidebar is collapsed) */ .ya-content{max-width:none} /* keep very wide screens readable without an asymmetric right gap */ @media(min-width:1700px){ .ya-content{max-width:1560px;margin-left:auto;margin-right:auto} } /* END YEETAPP-CONTENT-FILL */ /* YEETAPP-SERVICE-PAGES — App login: services list (DataTable) + product details + IPTV panel. Light-mode styling (dark-mode equivalents already exist above, scoped to [data-ya-theme=dark]). */ /* ---- services list table ---- */ .ya-content .dataTables_wrapper, .ya-content #tableServicesList_wrapper { background: var(--ya-card); border: 1px solid var(--ya-line); border-radius: var(--ya-radius); padding: 16px 20px 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } /* contain the floated bottom row so padding-bottom actually applies */ .ya-content .dataTables_wrapper::after { content: ""; display: block; clear: both; } /* bottom row (Show entries + pagination) — breathing room from the table */ .ya-content .dataTables_wrapper .dataTables_length, .ya-content .dataTables_wrapper .dataTables_paginate { margin-top: 14px; margin-bottom: 0; } .ya-content .dataTables_wrapper .dataTables_info { margin-top: 12px; } .ya-content table.table { margin: 8px 0 0; } .ya-content table.table > thead > tr > th { background: transparent; color: var(--ya-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-top: 0; border-bottom: 1.5px solid var(--ya-line); padding: 10px 14px; } .ya-content table.table > tbody > tr > td { padding: 16px 14px; border-top: 1px solid var(--ya-line); vertical-align: middle; color: var(--ya-ink); font-size: 14px; } .ya-content table.table > tbody > tr:hover > td { background: var(--ya-soft); } /* kill DataTables' gray sorted-column highlight (was making some headers/cells gray) */ .ya-content table.table > thead > tr > th.sorting_asc, .ya-content table.table > thead > tr > th.sorting_desc, .ya-content table.table > thead > tr > th.sorting, .ya-content table.table > tbody > tr > td.sorting_1, .ya-content table.table > tbody > tr > td.sorting_2, .ya-content table.table > tbody > tr > td.sorting_3 { background: transparent !important; } .ya-content .dataTables_filter input { border-radius: 10px; border: 1px solid var(--ya-line); padding: 8px 13px; height: auto; box-shadow: none; } .ya-content .dataTables_filter input:focus { border-color: var(--ya-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.12); } .ya-content .dataTables_length select { -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; width: auto !important; min-width: 62px; height: auto; border-radius: 8px; border: 1px solid var(--ya-line); padding: 5px 10px; background: #fff; color: var(--ya-ink); font-size: 14px; } .ya-content .dataTables_paginate .paginate_button { border-radius: 8px !important; border: 1px solid var(--ya-line) !important; background: #fff !important; color: var(--ya-ink) !important; margin: 0 2px; padding: 6px 12px !important; } .ya-content .dataTables_paginate .paginate_button.current, .ya-content .dataTables_paginate .paginate_button:hover { background: var(--ya-brand) !important; border-color: var(--ya-brand) !important; color: #fff !important; } .ya-content .dataTables_paginate .paginate_button.disabled { opacity: .45; } /* status pills (Active, etc.) — also used by the IPTV "Show" toggle */ .ya-content .label.status { display: inline-block; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 0; line-height: 1.4; } .ya-content .label.status.status-active { background: rgba(22,163,74,.12); color: #15803d; } .ya-content .label.status.status-pending, .ya-content .label.status.status-suspended { background: rgba(217,119,6,.13); color: #b45309; } .ya-content .label.status.status-cancelled, .ya-content .label.status.status-terminated { background: rgba(220,38,38,.12); color: #b91c1c; } /* services-list row number (the leftmost column) */ .ya-content table.table th.dt-num-col, .ya-content table.table td.dt-num-col { width: 56px; text-align: center; } .ya-content .dt-rownum { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--ya-soft); color: var(--ya-muted); font-weight: 700; font-size: 13px; } /* ---- product-details overview: the two big action boxes ---- */ .ya-content .btn-block.btn_new_here, .ya-content .btn-block.btn_new1_here, .ya-content .btn-block.btn_new_refresh1 { min-height: 86px; border-radius: var(--ya-radius); font-size: 16px; font-weight: 800; white-space: normal; padding: 20px; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease; } .ya-content .btn-block.btn_new_here, .ya-content .btn-block.btn_new_refresh1 { background: var(--ya-card) !important; color: var(--ya-brand) !important; border: 1.5px solid var(--ya-brand) !important; } .ya-content .btn-block.btn_new_here:hover, .ya-content .btn-block.btn_new_refresh1:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,99,235,.14); background: var(--ya-soft) !important; } .ya-content .btn-block.btn_new1_here { background: #dc2626 !important; color: #fff !important; border: 0 !important; } .ya-content .btn-block.btn_new1_here:hover { background: #b91c1c !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(220,38,38,.2); } /* ---- IPTV subscription details panel ---- */ .ya-content .panel.panel-accent-blue, .ya-content .panel.panel-default { border: 1px solid var(--ya-line) !important; border-radius: var(--ya-radius) !important; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.04); background: var(--ya-card); } /* kill the stray green 3px accent top-border (theme's .panel-accent-blue) */ .ya-content .panel.panel-default.panel-accent-blue { border-top: 1px solid var(--ya-line) !important; } .ya-content .panel.panel-accent-blue .panel-heading { background: linear-gradient(135deg, var(--ya-brand), var(--ya-brand-dark)) !important; color: #fff !important; border: 0 !important; padding: 15px 20px !important; font-size: 16px; font-weight: 800; } .ya-content .panel.panel-accent-blue .panel-heading i, .ya-content .panel.panel-accent-blue .panel-heading .fa { color: #fff !important; } .ya-content .panel.panel-accent-blue .list-group { margin: 0; border-radius: 0; } .ya-content .panel.panel-accent-blue .list-group-item { border: 0; border-bottom: 1px solid var(--ya-line); padding: 14px 20px; font-size: 14.5px; color: var(--ya-ink); background: var(--ya-card); } .ya-content .panel.panel-accent-blue .list-group-item:last-child { border-bottom: 0; } .ya-content .panel.panel-accent-blue .list-group-item strong, .ya-content .panel.panel-accent-blue .list-group-item b { color: var(--ya-ink); font-weight: 700; } /* the "Show" password toggle inside the panel — make it a clear, readable button */ .ya-content .panel.panel-accent-blue .label.status { background: var(--ya-brand) !important; color: #fff !important; cursor: pointer; padding: 5px 16px; border-radius: 8px; font-weight: 700; font-size: 12.5px; } .ya-content .panel.panel-accent-blue .label.status:hover { background: var(--ya-brand-dark) !important; } /* END YEETAPP-SERVICE-PAGES */ /* YEETAPP-DARK-GUEST — guest pages (check.php referral gate, login, register) use a white Bootstrap .card; in dark mode its heading/label inherited light text → invisible. Make the whole guest card dark so all text reads correctly. */ html[data-ya-theme="dark"] body.is-guest .card, html[data-ya-theme="dark"] body.is-guest .card .card-body { background: var(--ya-card) !important; border-color: var(--ya-line) !important; color: var(--ya-ink); } html[data-ya-theme="dark"] body.is-guest .card .h1, html[data-ya-theme="dark"] body.is-guest .card .h2, html[data-ya-theme="dark"] body.is-guest .card .h3, html[data-ya-theme="dark"] body.is-guest .card h1, html[data-ya-theme="dark"] body.is-guest .card h2, html[data-ya-theme="dark"] body.is-guest .card h3, html[data-ya-theme="dark"] body.is-guest .card h4, html[data-ya-theme="dark"] body.is-guest .card h5, html[data-ya-theme="dark"] body.is-guest .card h6, html[data-ya-theme="dark"] body.is-guest .card label, html[data-ya-theme="dark"] body.is-guest .card .form-control-label { color: var(--ya-ink) !important; } html[data-ya-theme="dark"] body.is-guest .card .text-muted, html[data-ya-theme="dark"] body.is-guest .card p { color: var(--ya-muted) !important; } html[data-ya-theme="dark"] body.is-guest .card .form-control { background: var(--ya-soft) !important; border-color: var(--ya-line) !important; color: var(--ya-ink) !important; } html[data-ya-theme="dark"] body.is-guest .card .form-control::placeholder { color: var(--ya-muted) !important; } html[data-ya-theme="dark"] body.is-guest .card .input-group-text { background: var(--ya-soft) !important; border-color: var(--ya-line) !important; color: var(--ya-muted) !important; } /* END YEETAPP-DARK-GUEST */ /* YEETAPP-DARK-AUTOFILL — Chrome's autofill paints fields light-blue, overriding the dark theme. Force the dark surface + light text on autofilled inputs (login, checkout, etc.). */ html[data-ya-theme="dark"] input:-webkit-autofill, html[data-ya-theme="dark"] input:-webkit-autofill:hover, html[data-ya-theme="dark"] input:-webkit-autofill:focus, html[data-ya-theme="dark"] input:-webkit-autofill:active, html[data-ya-theme="dark"] textarea:-webkit-autofill, html[data-ya-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--ya-soft) inset !important; -webkit-text-fill-color: var(--ya-ink) !important; caret-color: var(--ya-ink); border-color: var(--ya-line) !important; } /* END YEETAPP-DARK-AUTOFILL */ /* YEETAPP-DARK-MODAL — Bootstrap modals (checkout consent "NOTICE", etc.) were white with near-invisible light text in dark mode. */ html[data-ya-theme="dark"] .modal-content { background: var(--ya-card) !important; color: var(--ya-ink) !important; border: 1px solid var(--ya-line) !important; } html[data-ya-theme="dark"] .modal-header, html[data-ya-theme="dark"] .modal-footer { background: var(--ya-soft) !important; border-color: var(--ya-line) !important; } html[data-ya-theme="dark"] .modal-title, html[data-ya-theme="dark"] .modal-body { color: var(--ya-ink) !important; } html[data-ya-theme="dark"] .modal-content .close, html[data-ya-theme="dark"] .modal-content .btn-close { color: var(--ya-ink); opacity: .8; } /* END YEETAPP-DARK-MODAL */ /* YEETAPP-CLIENTVERIFY — ID-verification wizard (clientverification addon) step bar. Addon ships a hard bright-green active step (#50ea9e) with low-contrast text + a transparent inactive step (invisible on dark). Rebrand to our tokens (works light+dark). */ .ya-content ul.anchor li.details { background: var(--ya-soft) !important; color: var(--ya-muted) !important; border: 1px solid var(--ya-line) !important; border-radius: 6px !important; margin: 14px 7px 0 !important; /* top + gap between cards */ } .ya-content ul.anchor li.details:first-child { margin-left: 16px !important; } /* inset from panel left */ .ya-content ul.anchor li.details:last-child { margin-right: 16px !important; } /* inset from panel right */ .ya-content ul.anchor li.details .count, .ya-content ul.anchor li.details a, .ya-content ul.anchor li.details .conatctfield { color: inherit !important; } .ya-content ul.anchor li.details.current, .ya-content ul.anchor li.details.done { background: var(--ya-brand) !important; border-color: var(--ya-brand) !important; color: #fff !important; } .ya-content ul.anchor li.details.current .count, .ya-content ul.anchor li.details.done .count, .ya-content ul.anchor li.details.current a, .ya-content ul.anchor li.details.done a { color: #fff !important; } /* END YEETAPP-CLIENTVERIFY */ /* YEETAPP-DARK-FILEINPUT — native file inputs (ID upload, ticket attachments) keep a white "Choose File" button that clashes in dark mode -> match the dark fields/dropdown. */ html[data-ya-theme="dark"] .ya-content input[type="file"] { background: var(--ya-soft) !important; color: var(--ya-muted) !important; border: 1px solid var(--ya-line) !important; border-radius: 6px !important; padding: 6px 8px !important; } html[data-ya-theme="dark"] .ya-content input[type="file"]::-webkit-file-upload-button { background: var(--ya-card) !important; color: var(--ya-ink) !important; border: 1px solid var(--ya-line) !important; border-radius: 5px !important; padding: 5px 12px !important; margin-right: 10px !important; cursor: pointer !important; } html[data-ya-theme="dark"] .ya-content input[type="file"]::file-selector-button { background: var(--ya-card) !important; color: var(--ya-ink) !important; border: 1px solid var(--ya-line) !important; border-radius: 5px !important; padding: 5px 12px !important; margin-right: 10px !important; cursor: pointer !important; } /* END YEETAPP-DARK-FILEINPUT */ /* YEETAPP-REFER — Refer & earn page (referral code) */ .ya-refcode-field code { font-size: 22px; font-weight: 800; letter-spacing: 1px; color: var(--ya-brand); } .ya-refcode-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--ya-muted); display: flex; align-items: center; gap: 6px; } .ya-refcode-note i { color: var(--ya-brand); } .ya-steps { margin: 8px 0 16px; padding-left: 20px; } .ya-steps li { padding: 6px 0; color: var(--ya-ink); font-size: 14px; line-height: 1.5; } .ya-steps li::marker { color: var(--ya-brand); font-weight: 700; } /* END YEETAPP-REFER */ /* YEETAPP-GUEST-BTN — brand-blue primary buttons on guest pages (check.php referral gate, login, register) — replaces WHMCS's default blue. */ body.is-guest .btn-primary, body.is-guest .card .btn-primary, body.is-guest .login-form .btn-primary { background: var(--ya-brand) !important; border-color: var(--ya-brand) !important; color: #fff !important; border-radius: 10px; font-weight: 700; } body.is-guest .btn-primary:hover, body.is-guest .card .btn-primary:hover, body.is-guest .login-form .btn-primary:hover { background: var(--ya-brand-dark) !important; border-color: var(--ya-brand-dark) !important; color: #fff !important; } /* END YEETAPP-GUEST-BTN */ /* YEETAPP-GUEST-CENTER — vertically center the guest card (check.php gate, login, register) between the header and footer on any viewport. */ body.is-guest { display: flex; flex-direction: column; min-height: 100vh; } body.is-guest > .ya-gtop, body.is-guest > .ya-foot { flex: 0 0 auto; } body.is-guest > .ya-gbody { flex: 1 0 auto; /* flex-shrink:0 keeps ya-gbody >= the card height, so center never clips */ display: flex; flex-direction: column; justify-content: center; } /* the theme forces #main-body min-height:727px which fills the page and pins the card to the top — collapse it so the flex centering can take effect */ body.is-guest #main-body { min-height: 0 !important; } /* END YEETAPP-GUEST-CENTER */ /* YEETAPP-USERMENU — topbar avatar dropdown (Update Info / Change Password) + Gravatar */ .ya-usermenu { position: relative; display: inline-flex; } .ya-usermenu .ya-avatar { position: relative; overflow: hidden; cursor: pointer; border: 0; padding: 0; } .ya-avatar-initial { line-height: 1; } .ya-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .ya-usermenu-pop { position: absolute; top: calc(100% + 10px); right: 0; min-width: 226px; background: var(--ya-card); border: 1px solid var(--ya-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 1300; } .ya-usermenu-pop::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .ya-usermenu:hover .ya-usermenu-pop, .ya-usermenu.open .ya-usermenu-pop { opacity: 1; visibility: visible; transform: translateY(0); } .ya-usermenu-head { padding: 6px 12px 10px; border-bottom: 1px solid var(--ya-line); margin-bottom: 6px; } .ya-usermenu-head .nm { font-weight: 700; color: var(--ya-ink); font-size: 14px; line-height: 1.3; } .ya-usermenu-head .em { color: var(--ya-muted); font-size: 12.5px; word-break: break-all; margin-top: 2px; } .ya-usermenu-pop a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ya-ink) !important; font-weight: 600; font-size: 13.5px; } .ya-usermenu-pop a:hover { background: var(--ya-soft); color: var(--ya-brand) !important; } .ya-usermenu-pop a i { width: 16px; text-align: center; color: var(--ya-muted); } .ya-usermenu-pop a:hover i { color: var(--ya-brand); } .ya-usermenu-sep { height: 1px; background: var(--ya-line); margin: 6px 8px; } .ya-usermenu-pop a.ya-usermenu-out { color: #dc2626 !important; } .ya-usermenu-pop a.ya-usermenu-out i { color: #dc2626; } .ya-usermenu-pop a.ya-usermenu-out:hover { background: #fef2f2; color: #b91c1c !important; } .ya-usermenu-pop a.ya-usermenu-out:hover i { color: #b91c1c; } html[data-ya-theme="dark"] .ya-usermenu-pop a.ya-usermenu-out:hover { background: rgba(220,38,38,.14); } /* keep the dropdown from being clipped by the topbar */ .ya-top, .ya-top .ya-right { overflow: visible; } /* END YEETAPP-USERMENU */ /* YEETAPP-INVOICE — brand the standalone invoice page (viewinvoice.php — no kiosk shell) */ .invoice-container { max-width: 920px; margin: 30px auto 40px; padding: 0 16px 30px; } .invoice-container::after { content: ""; display: table; clear: both; } /* breathing room around + beneath the Print / Download buttons */ .invoice-container .float-right.btn-group { margin: 16px 0 22px; } .invoice-container .card, .invoice-container .panel { border: 1px solid var(--ya-line) !important; border-radius: var(--ya-radius) !important; box-shadow: 0 1px 3px rgba(15,23,42,.06); } .invoice-container .invoice-header h2 { font-weight: 800; color: var(--ya-ink); } .invoice-container .invoice-header h3 { color: var(--ya-muted); font-weight: 700; } .invoice-container .card-title { color: var(--ya-ink); } /* status badge -> clean pill, semantic colours */ .invoice-container .invoice-status span { display: inline-block; padding: 6px 18px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; } .invoice-container .invoice-status .paid { background: rgba(22,163,74,.12); color: #15803d; } .invoice-container .invoice-status .unpaid, .invoice-container .invoice-status .draft { background: rgba(217,119,6,.14); color: #b45309; } .invoice-container .invoice-status .cancelled, .invoice-container .invoice-status .refunded, .invoice-container .invoice-status .collections { background: rgba(220,38,38,.12); color: #b91c1c; } /* item tables */ .invoice-container .table thead th { background: var(--ya-soft); color: var(--ya-muted); border-color: var(--ya-line); text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; font-weight: 700; } .invoice-container .table td, .invoice-container .table th { border-color: var(--ya-line); } /* separate the transactions table from the Invoice Items card above it */ .invoice-container .transactions-container { margin-top: 22px; } /* buttons */ .invoice-container .btn-primary, .invoice-container .btn-success { background: var(--ya-brand) !important; border-color: var(--ya-brand) !important; color: #fff !important; border-radius: 10px; font-weight: 700; } .invoice-container .btn-primary:hover, .invoice-container .btn-success:hover { background: var(--ya-brand-dark) !important; border-color: var(--ya-brand-dark) !important; color: #fff !important; } .invoice-container .btn-default { background: #fff !important; color: var(--ya-ink) !important; border: 1px solid var(--ya-line) !important; border-radius: 10px; } .invoice-container .btn-default:hover { border-color: var(--ya-brand) !important; color: var(--ya-brand) !important; } /* END YEETAPP-INVOICE */ /* YEETAPP-ALERTS — clean, on-brand client-area alerts (verification, flash notices, etc.) */ .ya-content .alert { border-radius: 12px; border: 1px solid var(--ya-line); padding: 14px 18px; font-size: 14.5px; box-shadow: none; } .ya-content .alert-info { background: #eff4ff; border-color: #c7d6f5; color: #1e3a8a; } .ya-content .alert-success { background: rgba(22,163,74,.10); border-color: #bbf7d0; color: #166534; } .ya-content .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; } .ya-content .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; } html[data-ya-theme="dark"] .ya-content .alert { background: var(--ya-soft) !important; border-color: var(--ya-line) !important; } html[data-ya-theme="dark"] .ya-content .alert-info { color: #93c5fd !important; } html[data-ya-theme="dark"] .ya-content .alert-success { color: #86efac !important; } html[data-ya-theme="dark"] .ya-content .alert-warning { color: #fcd34d !important; } html[data-ya-theme="dark"] .ya-content .alert-danger { color: #fca5a5 !important; } /* END YEETAPP-ALERTS */