/*
 * Argenplay shell: rules that were inline style attributes / inline <style> in argenplay.com
 * (strict CSP: no style="" attributes here) plus the clone-only additions (cashier panel,
 * +18 line, toasts, boot loader). Loaded LAST so it plays the role of the original inline styles.
 * Everything else comes verbatim from /assets/clone/css/*.css.
 */

/* ---------- header (were style="" attributes in the original markup) ---------- */
#wl-top .container-top { display: flex; margin: auto; margin-right: 0; }
#wl-top .container-top ul.nav { margin: 0 auto; }
#wl-top .credits { padding: 7px 10px 0 10px !important; font-size: 12px !important; }
#wl-top .btn-menu-top-login.userbtn { padding: 0 10px 0 10px !important; font-size: 23px !important; }
#menu-sidenav { margin: 0 auto; justify-content: right; list-style: none; margin-bottom: 80px; }
#wl-top [hidden], #mySidenav [hidden] { display: none !important; }
#walletdrop .dropdown-item { cursor: pointer; }
#walletdrop .dropdown-item i { width: 1.1em; text-align: center; }

/* ---------- logged-in header: long usernames (clone-only fix) ----------
   On argenplay.com #authUserName grows with the username: up to 991px the hamburger then drops to a
   second line (header 55px, menu out of reach) and from 992 to 1200px the row overflows the page.
   Here the row never wraps: the brand box gives way first (as in the original), then the empty
   .container-top spacer (its menu is hidden up to 1200px), and the username is cut with an ellipsis
   at a maximum width per breakpoint. Up to 991px the button also carries the balance (second line):
   the name gets its own limit there so the balance keeps every digit, and the whole button has a
   larger safety limit. A name that fits (the one of the capture included) keeps the original geometry. */
body.ap-auth #wl-top #authUserName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ap-auth #wl-top #authUserName .walletBalance { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
@media (max-width: 991.98px) {
  /* inline-block + top keeps the capture's boxes: name at y+6 (13px line), balance line at y+19 */
  body.ap-auth #wl-top #authUserName strong { display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
}
@media (max-width: 575.98px) {
  body.ap-auth #wl-top #authUserName { max-width: 150px; }
  body.ap-auth #wl-top #authUserName strong { max-width: clamp(48px, calc(100vw - 310px), 96px); }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  body.ap-auth #wl-top #authUserName { max-width: 180px; }
  body.ap-auth #wl-top #authUserName strong { max-width: 110px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body.ap-auth #wl-top #authUserName { max-width: 180px; }
  body.ap-auth #wl-top #authUserName strong { max-width: 140px; }
}
@media (min-width: 992px) and (max-width: 1200px) { body.ap-auth #wl-top #authUserName { max-width: 162px; } }
@media (min-width: 1201px) { body.ap-auth #wl-top #authUserName { max-width: 182px; } }
/* Shrink order through the flex-shrink weights (factor x basis): brand box first, then the 4px slack
   below, then the spacer (a factor >= 1 so the spacer alone still takes the whole overflow). */
@media (max-width: 1200px) {
  body.ap-auth #wl-top nav.navbar { flex-wrap: nowrap; }
  body.ap-auth #wl-top nav.navbar > .navbar-brand { flex-shrink: 1000000000; min-width: 0; }
  body.ap-auth #wl-top nav.navbar > .container-top { flex-shrink: 1; min-width: 0; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  /* At 1024 the original hamburger sticks ~3px out of the nav (into the 15px side padding of .hw-bg).
     This zero-width item lends up to 4px after it, so that geometry is kept; anything bigger shrinks
     the spacer instead of overflowing the page. */
  body.ap-auth #wl-top nav.navbar::after { content: ''; flex: 0 1000000 4px; min-width: 0; margin-left: -4px; }
}

/* ---------- footer ---------- */
.footer-bs .navbar-brand img { width: 250px; max-width: 100%; }
.footer-bs .dropdown { margin-top: 7px; }
.footer-bs .dropdown-menu .dropdown-item { font-size: 12.25px; }
.footer-bs .footer-rg {
  position: absolute; left: 15px; right: 15px; bottom: 12px; margin: 0;
  font-size: 11px; line-height: 16px; color: rgba(255, 255, 255, .55); letter-spacing: .2px;
}
.footer-bs .footer-rg a { color: inherit; text-decoration: underline; }
/* The original leaks a few px of horizontal overflow on phones (SPEC §3.10: corrected). */
footer.footer-bs { overflow-x: hidden; }

/* ---------- page loader (same look as the site's .loadere rule) ---------- */
.loadere {
  position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999;
  background: url("../assets/clone/a228866cf28fffcf.gif") 50% 50% no-repeat #06030c;
  background-size: 10%; opacity: 1;
}
.loadere.ap-done { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }

/* ---------- utilities used instead of inline styles ---------- */
.ap-hidden { display: none !important; }
.ap-rel { position: relative; }
.ap-w100 { width: 100%; }
.ap-flex { display: flex; }
.ap-flex-center { display: flex; justify-content: center; }
.ap-flex-1 { flex: 1 1 0%; }
.ap-p0 { padding: 0 !important; }
.ap-m0 { margin: 0 !important; }
.ap-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- login modal ---------- */
#login .ap-login-error { color: #ff6b6b; font-size: 13px; text-align: center; margin: 0; }
#login .ap-login-help { color: #9aa0b4; font-size: 12px; text-align: center; margin: 0; }
#login .ap-login-help a { color: #ebebd3; text-decoration: underline; }

/* ---------- #showGame: game overlay (luxury + crash variants) ---------- */
#showGame .modal-dialog { max-width: 100% !important; }
#showGame .modal-content { background-color: #040404 !important; }
#showGame .row.container-fluid { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
#showGame #box-content { padding: 0 !important; position: relative; }
#showGame #box-content iframe { width: 100%; height: 100%; }
#showGame #box-content #playSlot { background: #0f1119; height: 100vh; }
#showGame .ap-game-buttons { text-align: center; position: absolute; right: 10px; z-index: 5000; height: auto; width: 50px; top: 100px; }
#showGame .btn-box-option {
  background: rgb(26 26 26 / 42%); border: none; text-align: center; padding: 3px; margin-bottom: 10px;
  height: 50px; width: 100%; font-size: 20px; cursor: pointer; z-index: 2000; border-radius: 50px; color: #fff; line-height: 30px;
}
#showGame .btn-box-option:hover {
  background: linear-gradient(to bottom, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
  box-shadow: 0 0 29px 0 #e600e6; color: #0f1119;
}
#showGame.ap-crash .modal-content { flex-direction: column; }
#showGame .iframe-game-header-bar {
  display: flex; flex-direction: row; justify-content: flex-end; align-items: center; background: #000;
  padding: 8px; height: 36px; flex-shrink: 0; z-index: 100;
}
#showGame .iframe-game-header-bar__btn {
  border: none; background: transparent; color: #fff; padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
#showGame .iframe-game-header-bar__btn:hover { opacity: .8; }
/* Crash variant: the original iframe carried style="height: calc(100vh - 36px)"; this selector (3 ids + class)
   beats the #playSlot 100vh rule above, while the portrait "calc(100vh - 60px) !important" rules still apply. */
#showGame #box-content iframe.iframe-game-slot, #showGame #box-content #playSlot.iframe-game-slot { display: block; width: 100%; height: calc(100vh - 36px); }
#showGame .ap-game-loading { position: absolute; left: 0; right: 0; top: 40vh; text-align: center; color: #ddd; font: 14px 'Roboto Condensed', sans-serif; z-index: 1; }
#showGame .ap-game-loading .loading-spinner { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 10px; }
.fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; height: -webkit-fill-available !important; z-index: 9999 !important; margin: 0 !important; }
@media screen and (min-width: 200px) and (max-width: 480px) and (orientation: portrait) {
  #showGame #box-content #playSlot, #showGame .iframe-game-slot { background: #090909 !important; }
  #showGame #box-content iframe.iframe-game-slot { height: calc(100vh - 60px) !important; }
}
.loading-spinner {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px;
  border: 4px solid rgba(255, 255, 255, .3); border-radius: 50%; border-top-color: #e9b108;
  animation: ap-spin 1s linear infinite; z-index: 2;
}
#showGame .ap-game-loading .loading-spinner { animation-name: ap-spin-flat; }
@keyframes ap-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes ap-spin-flat { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ---------- #pModal "Ver Todos" (values from zetahome.css / luxury lobby.css) ---------- */
#pModal #wrapper { text-align: center; width: 100%; margin: auto; top: 50px; }
#pModal .modal-content { background-color: #040404 !important; font-family: 'Roboto Condensed', sans-serif; }
#pModal .modal-body { padding: 0; max-height: 500px; overflow: auto; }
#pModal .modal-header { border: none; padding: 19px; }
#pModal.ap-home .modal-header { background: #2e2e2e !important; }
#pModal.ap-slots .modal-header { background-color: #3f4770; }
#pModal .scrollbar-modal { margin-left: 0; min-height: 400px; width: auto; margin-bottom: 25px; }
#pModal .force-overflow-modal { min-height: 400px; max-height: 400px; overflow: auto; background: #000 !important; }
#pModal #style-3::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: transparent; }
#pModal #style-3::-webkit-scrollbar { width: 6px; background-color: transparent; }
#pModal #style-3::-webkit-scrollbar-thumb { background-color: #93000e; }
#pModal .close-btn { float: right !important; color: #fff; background: #000 !important; line-height: 0; height: 30px; text-shadow: none; font-size: 15px; font-weight: 400; text-transform: capitalize; padding: 14px; margin: -14px -14px -14px auto; opacity: .5; border: 0; }
#pModal .row-modal { max-width: 90% !important; margin: auto !important; border-radius: 30px !important; margin-top: 5px !important; max-height: 40px !important; }
#pModal .row-modal:hover { background: #93000e !important; cursor: pointer; }
#pModal.ap-slots .row-modal:hover { background: #007bff !important; }
#pModal .row-modal:hover .icon-promoted { color: #000 !important; }
#pModal .row-modal .col-2 { padding-left: 2px; }
#pModal .row-modal .col-8 { padding-top: 8px; }
#pModal .row-modal .col-2.ap-fire { line-height: 40px; }
#pModal .row-modal .col-12 { padding-top: 8px; }
#pModal .menu-provider-title-modal { font-size: 16px; margin: 0 0 14px; color: #fff; text-align: left; text-transform: capitalize; }
#pModal .icon-promoted { color: #653cb4; font-size: 19px; }
#pModal .ap-provider-search { width: 250px; }
body.ap-auth #pModal .modal-dialog { max-width: 80% !important; margin: 1.75rem auto; }
@media (min-width: 769px) { body.ap-auth #pModal .modal-dialog { max-width: 50% !important; } }

/* ---------- lobby helpers shared by pages ---------- */
.ap-fav-on { color: #ff5a7f !important; }
.no-results.ap-empty { cursor: default; }
.ap-carousel-video { border: 0; border-radius: 0; margin: 0; display: block; }

/* ---------- cashier panel (#transactions-modal, manual cashier only) ---------- */
#vueTransactions #modal-header {
  background-image: linear-gradient(120deg, #212531 0%, #2e3756 55%, #10132b 100%);
  align-items: center; min-height: 60px; padding: 14px;
}
#vueTransactions #modal-header h4 { margin: 0; font-size: 21px; font-weight: 500; color: #fff; }
#vueTransactions .modal-dialog { max-width: 900px !important; margin: 42px auto 1.75rem; }
#vueTransactions .el-tabs__nav { display: flex; flex-wrap: wrap; gap: 0; }
#vueTransactions .el-tabs__item { user-select: none; }
#vueTransactions .el-tabs__item i { font-size: 30px; vertical-align: middle; margin-right: 8px; }
#vueTransactions .el-tabs__item.is-top + .el-tabs__item.is-top { padding-left: 20px; }
#vueTransactions .content-tabs { width: auto; height: auto; min-height: 420px; }
#vueTransactions .ap-cashier-grid { display: flex; gap: 10px; align-items: stretch; }
#vueTransactions .ap-cashier-left { flex: 0 0 219px; margin-top: 5px; }
#vueTransactions .ap-cashier-left .ap-cashier-btn {
  display: flex; align-items: center; gap: 12px; width: 219px; height: 81px; padding: 0 18px;
  background: #2e3756; border: 1px solid #1a1d23; border-radius: 7px; color: #fff; font: 700 15px 'Roboto Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: 1px;
}
#vueTransactions .ap-cashier-left .ap-cashier-btn i { font-size: 34px; color: #25d366; }
#vueTransactions .ap-cashier-left .ap-cashier-btn:hover { text-decoration: none; background: #394470; }
#vueTransactions .ap-cashier-pane { flex: 1 1 auto; min-height: 400px; height: auto; color: #fff; display: flex; flex-direction: column; }
#vueTransactions .ap-cashier-pane h5 { font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 10px 0 18px 10px; }
#vueTransactions .ap-cashier-pane p { font: 16px/1.5 'Roboto Condensed', sans-serif; color: #d7dbe6; margin: 0 10px 12px; }
#vueTransactions .ap-cashier-pane .ap-cashier-note { font-size: 13px; color: #909399; }
#vueTransactions .ap-cashier-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 240px; margin: 14px 10px 0; padding: 10px 24px !important; font-size: 14px !important; text-decoration: none; }
#vueTransactions .ap-cashier-cta i { font-size: 20px; }
#vueTransactions .ap-table-wrap { overflow-x: auto; margin: 0 10px; }
#vueTransactions table.ap-table, table.ap-table { width: 100%; border-collapse: collapse; color: #fff; font: 13px 'Roboto Condensed', sans-serif; }
table.ap-table th { background: #252a32; color: #ebebd3; font-weight: 400; padding: 6px; text-align: left; white-space: nowrap; }
table.ap-table td { background: #212531; padding: 6px; border-top: 1px solid #1a1d23; white-space: nowrap; }
table.ap-table tr:nth-child(even) td { background: #2e323e; }
table.ap-table td.ap-num, table.ap-table th.ap-num { text-align: right; }
table.ap-table td.ap-empty-cell { text-align: center; color: #909399; padding: 18px 6px; }
.ap-pager { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 10px; color: #909399; font: 12px 'Roboto Condensed', sans-serif; }
.ap-pager button { background: #141414; color: #fff; border: 1px solid #2e323e; border-radius: 3px; padding: 3px 10px; }
.ap-pager button[disabled] { opacity: .4; }
#vueTransactions .ap-history-tools { display: flex; justify-content: space-between; align-items: center; margin: 0 10px 10px; gap: 10px; }
#vueTransactions .ap-history-tools .btn-update { background: #141414; color: #fff; border: 0; font-size: 12.25px; padding: 5px 12px; border-radius: 3px; }
#vueTransactions .ap-history-tools .el-input { width: 200px; }
@media (max-width: 768px) {
  #vueTransactions .modal-dialog { margin: 0 auto; }
  #vueTransactions #modal-content { width: 100vw !important; }
  #vueTransactions .ap-cashier-grid { flex-direction: column; }
  #vueTransactions .ap-cashier-left { flex: none; }
  #vueTransactions .ap-cashier-left .ap-cashier-btn { width: 100%; height: 60px; }
  #vueTransactions .el-tabs__item i { font-size: 20px; margin: 0 0 4px; display: block; }
  #vueTransactions .content-tabs { width: auto; margin: 6px; }
  #vueTransactions .ap-cashier-pane { min-height: 0; width: auto !important; height: auto !important; }
}

/* ---------- notice modal + toasts (jquery.toast look) ---------- */
#apNotice .modal-body { color: #ebebd3; text-align: center; font-size: 14px; }
#apNotice .modal-body p { margin: 0 0 14px; }
#apNotice .ap-notice-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
#apNotice .ap-notice-actions .btn { min-width: 140px; }
.jq-toast-wrap.ap-toasts { z-index: 10050; }
.jq-toast-wrap.ap-toasts .jq-toast-single { font-family: 'Roboto Condensed', sans-serif; font-size: 14px; }
.jq-toast-wrap.ap-toasts .jq-toast-single.ap-fade { opacity: 0; transition: opacity .3s ease; }

/* ---------- category / provider chips arrows are clickable ---------- */
.menu-scroll #prev, .menu-scroll #next, .menu-all #prev2, .menu-all #next2, .menu-provider .fa-arrow-circle-left, .menu-provider .fa-arrow-circle-right { cursor: pointer; }