/* custom.css
   Project overrides. Loaded after style.css and responsive.css (see template1.master),
   so style.css never needs to be edited. */

/* Register pages: style.css pushes the .btn-jn row 155px to the right (left: 155px).
   Remove that offset on the mobile layout (same breakpoint responsive.css uses). */
@media (max-width: 920px) {
  .form_wrap.btn-jn {
    left: 0;
  }
}

/* Inbox badge (#inboxMsgCount, the red bouncing circle): show it only when there are new messages.
   The script writes the unread count into it and clears it (empty) when there are none. */
#inboxMsgCount:empty,
.my-inbox:empty {
  display: none;
}

/* Readonly / disabled inputs: Bootstrap paints them light grey (#e9ecef).
   Use the same dark background as every other .form-control (style.css) instead. */
.form-control:disabled,
.form-control[readonly] {
  background-color: rgba(0, 0, 0, 0.3);
}
/* register: show / hide password eye icon inside the field */
.pw-field {
  position: relative;
  /* .reg_form .form_wrap is a flex row (label + input); let the wrapper take the input's place and width */
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.pw-field .form-control {
  width: 100%;
  padding-right: 42px;
}
.reg_form .pw-field .pw-toggle {
  /* beat '.reg_form i' in style.css (130px block icon used for the step illustrations) */
  position: absolute;
  top: 50%;
  right: 14px;
  display: block;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
}
.reg_form .pw-field .pw-toggle:hover,
.reg_form .pw-field .pw-toggle:focus {
  color: #fff;
  outline: none;
}

/* inbox message popup (inbox.aspx): reply box + button */
.modal-content.promo .wrapper.text-center {
  padding: 0 20px 20px;
}
.modal-content.promo .inbox-reply-textarea {
  display: block;
  width: 100%;
  padding: 12px 15px;
  background: var(--bg-color1); /* same as the message body (#content_body_*), which shows the modal background */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  outline: 0;
  resize: vertical;
}
.modal-content.promo .inbox-reply-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.modal-content.promo .inbox-reply-textarea:focus {
  border-color: #00eefe;
}
.modal-content.promo .btn-reply {
  margin-top: 15px;
  padding: 10px 40px;
  background: var(--btn-gradient5);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.modal-content.promo .btn-reply:hover {
  opacity: 0.85;
}

/* referral: copy button inside the link field. style.css only sets position/colour, so the browser's
   default button face (white) showed around the icon */
button.btn-cpy {
  background: transparent;
  color: #ffffff;
}
button.btn-cpy:hover {
  color: #00eefe;
}

/* referral: downline tree (jstree default-dark theme) */
.ref-tree {
  margin-bottom: 25px;
  color: #ffffff;
}
.ref-tree .ref-tree-title {
  margin-bottom: 10px;
  font-weight: 700;
}
.ref-tree .jstree-default-dark .jstree-anchor {
  color: #ffffff;
}
.ref-tree .ref-tree-btns {
  display: flex;
  gap: 10px;
  margin: 15px 0;
}
.ref-tree .ref-tree-info p {
  margin: 0 0 5px;
  font-size: 13px;
}
.ref-tree .ref-tree-info span:last-child {
  font-style: italic;
}

/* DataTables tables inside .history_table_wrap (referral, history ...): the stock DataTables CSS paints
   every row white, which hides the white text of this theme. Keep the card's own dark background. */
.history_table_wrap table.dataTable tbody tr,
.history_table_wrap table.dataTable tbody tr.odd,
.history_table_wrap table.dataTable tbody tr.even {
  background-color: transparent;
}
.history_table_wrap table.dataTable.no-footer {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.history_table_wrap .dataTables_wrapper,
.history_table_wrap .dataTables_wrapper .dataTables_info,
.history_table_wrap .dataTables_wrapper .dataTables_length {
  color: #ffffff;
}
.history_table_wrap .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #ffffff !important;
  border: 1px solid transparent;
}
.history_table_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.history_table_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.history_table_wrap .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: #ffffff !important;
  background: var(--btn-gradient5) !important;
  border: 1px solid transparent;
}
.history_table_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.history_table_wrap .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
}

/* register step 1: field column (input + error + password rules) */
.reg_form .form_wrap.has-hint {
  align-items: flex-start;
}
.reg_form .form_wrap.has-hint > .form_label {
  padding-top: 9px;
}
.field-col {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}
.field-error {
  display: none;
  margin: 6px 0 0;
  text-align: left !important;
  font-size: 12px !important;
  color: #ff6b6b !important;
}
.form-control.field-invalid {
  border-color: #ff6b6b;
}
.pw-rules {
  margin-top: 8px;
  text-align: left;
}
.pw-rules .pw-rules-title {
  margin: 0 0 4px;
  text-align: left !important;
  font-size: 12px !important;
  color: #ffffff !important;
}
.pw-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pw-rules .pw-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #c3c3c3;
}
.pw-rules .pw-rule i {
  width: 12px;
  font-size: 10px;
  text-align: center;
  display: inline-block;
  margin: 0;
}
.pw-rules .pw-rule.valid,
.pw-rules .pw-rule.valid i {
  color: #2ecc71;
}
.pw-rules .pw-rule.invalid,
.pw-rules .pw-rule.invalid i {
  color: #ff6b6b;
}


/* Live deposit/withdrawal: single column on mobile, so hide the container decoration image that would sit behind the text */
@media (max-width: 768px) {
  .transaction_container {
    background-image: none;
  }
}

/* Account page: keep label left / value right on mobile (overrides the stacked layout in style.css) */
@media (max-width: 768px) {
  .profile_content_wrap_row {
    flex-direction: row;
    grid-gap: 10px;
    min-height: 52px;
    height: auto;
  }
  .profile_content_wrap_rowleft_con {
    grid-gap: 10px;
    white-space: nowrap;
  }
  .profile_content_wrap_rowright_con {
    justify-content: flex-end;
    text-align: right;
    grid-gap: 10px;
    word-break: break-all;
  }
}

/* Deposit bank details: larger text on web and mobile */
.bank-detail table.bnk-table tr td {
  font-size: 18px;
  padding: 6px 10px;
  line-height: 1.5;
}
.bank-detail table.bnk-table tr td:first-child {
  white-space: nowrap;
}
.bank-detail table.bnk-table tr td:last-child {
  font-weight: 600;
  word-break: break-word;
}
.bank-detail table.bnk-table .btn-outline-secondary {
  font-size: 16px;
}
@media (max-width: 768px) {
  .bank-detail table.bnk-table tr td {
    font-size: 16px;
    padding: 5px 6px;
  }
}

/* Game lobby (slots/live casino/fish/p2p/sportbook): show the whole thumbnail instead of cropping it to the 3:4 tile */
#game_lobby a:not(.special-wrap) {
  background-color: var(--bg-color1);
}
#game_lobby a img {
  object-fit: contain;
}

/* Game pages: back button (top left) on the game list page */
.game-back-btn {
  display: inline-flex;
  align-items: center;
  grid-gap: 8px;
  margin: 0 0 15px 0;
  padding: 8px 14px;
  border-radius: 8px;
  background: #dee3f01a;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.game-back-btn:hover {
  color: #ffffff;
  text-decoration: none;
  background: #dee3f033;
}

/* Add bank: account type radio (ordinary / current) */
.bank-acc-type {
  display: flex;
  align-items: center;
  grid-gap: 25px;
  padding: 6px 0;
}
.bank-acc-type-opt {
  display: inline-flex;
  align-items: center;
  grid-gap: 8px;
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}
.bank-acc-type-opt input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}