/* Zeroback shell bridge for Laravel user-new */

html, body.zb-shell {
  background: #111 url("/images/bg.png") center center / cover fixed !important;
  min-width: 0 !important;
  color: #fff;
}

body.zb-shell #wrap,
body.zb-shell .contents_wrap,
body.zb-shell .contents_right {
  background: transparent !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

body.zb-shell .contents_left {
  display: none !important;
}

body.zb-shell .sub_content_arr_bg {
  padding-left: 250px;
  margin-top: 80px;
  min-width: 0;
  box-sizing: border-box;
}

body.zb-shell .zb-content {
  padding: 20px 24px 40px;
  min-height: 60vh;
  box-sizing: border-box;
}

/* Hide old naruto/header chrome when zeroback chrome is present */
body.zb-shell .header_wrap,
body.zb-shell .footer_wrap {
  display: none !important;
}

/* Content boxes on dark red skin */
body.zb-shell .content_box,
body.zb-shell .write_box,
body.zb-shell .list_box,
body.zb-shell .info_wrap,
body.zb-shell .member_wrap {
  background: #000 !important;
  border: 1px solid #444 !important;
  border-radius: 10px;
  color: #fff !important;
}

body.zb-shell .title_box {
  float: none !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: none !important;
  border-bottom: solid 1px #444 !important;
  box-sizing: border-box;
}

body.zb-shell .title_box .title,
body.zb-shell .title_box .title span,
body.zb-shell h2.zb-page-title,
body.zb-shell .zb-page-title {
  color: #ff0000 !important;
  -webkit-text-fill-color: #ff0000 !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  animation: none !important;
}

body.zb-shell .title_box .title {
  float: none !important;
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  line-height: 50px !important;
  margin: 0 !important;
  padding: 0 0 0 15px !important;
  text-align: left !important;
  font-size: 25px !important;
  font-weight: 600 !important;
}

body.zb-shell .title_box .title span,
body.zb-shell .zb-page-title small {
  display: inline !important;
  margin-left: 8px !important;
  font-size: 20px !important;
  font-weight: 100 !important;
  color: #999 !important;
  -webkit-text-fill-color: #999 !important;
  background: none !important;
}

body.zb-shell .title_box .title_line {
  display: none !important;
}

body.zb-shell .list_title1,
body.zb-shell .write_title,
body.zb-shell .s_title1 {
  background: #111 !important;
  border-color: #444 !important;
  color: #ffcc00 !important;
  -webkit-text-fill-color: #ffcc00 !important;
}

/* Betting category tabs — zeroback red */
body.zb-shell .u-tab01.betting-category-tabs,
body.zb-shell ul.betting-category-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 18px !important;
  padding: 0 !important;
  width: 100%;
  clear: both;
}

body.zb-shell .u-tab01.betting-category-tabs li,
body.zb-shell ul.betting-category-tabs li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body.zb-shell .u-tab01.betting-category-tabs li a,
body.zb-shell ul.betting-category-tabs li a {
  display: block;
  min-width: 88px;
  padding: 10px 18px;
  text-align: center;
  text-decoration: none !important;
  border: 1px solid #fa0000;
  border-radius: 8px;
  background: #111;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.12);
  transition: filter 0.2s ease, background 0.2s ease;
}

body.zb-shell .u-tab01.betting-category-tabs li a span,
body.zb-shell ul.betting-category-tabs li a span {
  color: inherit !important;
}

body.zb-shell .u-tab01.betting-category-tabs li a:hover,
body.zb-shell ul.betting-category-tabs li a:hover {
  filter: brightness(1.2);
  color: #ffcc00 !important;
}

body.zb-shell .u-tab01.betting-category-tabs li.active a,
body.zb-shell ul.betting-category-tabs li.active a {
  background: linear-gradient(180deg, #ff0f0f 0%, #b00000 100%);
  border-color: #fa0000;
  color: #fff !important;
}

@media screen and (max-width: 1023px) {
  body.zb-shell .title_box .title {
    font-size: 18px !important;
    height: 44px !important;
    line-height: 44px !important;
  }
  body.zb-shell .title_box .title span,
  body.zb-shell .zb-page-title small {
    font-size: 13px !important;
  }
  body.zb-shell .u-tab01.betting-category-tabs li a,
  body.zb-shell ul.betting-category-tabs li a {
    min-width: 72px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

body.zb-shell .list1,
body.zb-shell .list_notice1,
body.zb-shell .list2,
body.zb-shell .list3,
body.zb-shell td,
body.zb-shell th {
  color: #ddd !important;
  border-color: #333 !important;
}

body.zb-shell a {
  color: #fff;
}
body.zb-shell a:hover {
  color: #ffcc00;
}

/* Left rail: force white labels / red icons (override common/layout) */
body.zb-shell .header-arr,
body.zb-shell .header-arr a,
body.zb-shell .main_navigation li a,
body.zb-shell .main_navigation1 li a {
  color: #fff !important;
  font-size: inherit !important;
}
body.zb-shell .main_navigation li a .txt,
body.zb-shell .main_navigation1 li a .txt {
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #fff !important;
  white-space: nowrap;
}
body.zb-shell .main_navigation li a:hover .txt,
body.zb-shell .main_navigation1 li a:hover .txt {
  color: #ffcc00 !important;
  -webkit-text-fill-color: #ffcc00 !important;
}
body.zb-shell .main_navigation li a i,
body.zb-shell .main_navigation1 li a i {
  background: -webkit-linear-gradient(#ff0000, #b00000) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 24px !important;
}
body.zb-shell .user-info-arr,
body.zb-shell .user-info-arr a,
body.zb-shell .user-info01,
body.zb-shell .user-info01 li,
body.zb-shell .user-info01 strong {
  color: #fff !important;
}
body.zb-shell .user-info01 a:hover {
  color: #ffcc00 !important;
}

/* Left rail logged-in money panel */
body.zb-shell .zb-left-user {
  display: none;
  margin: 0 10px 12px;
  padding: 10px 12px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #151515;
  color: #fff;
  box-sizing: border-box;
}
body.zb-shell .zb-left-user-nick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
}
body.zb-shell .zb-left-user-nick .level_icon img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
body.zb-shell .zb-left-user-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: #fff !important;
  text-decoration: none !important;
}
body.zb-shell .zb-left-user-row i {
  color: #ff0f0f;
}
body.zb-shell .zb-left-user-row:hover {
  color: #ffcc00 !important;
}
body.zb-shell .zb-top-brand {
  display: none;
}

/* Hide legacy home tabs if any remain */
body.zb-shell .main_game_tab,
body.zb-shell .main_game_tab_sports,
body.zb-shell .main_game_tab_casino {
  display: none !important;
}

body.zb-shell input,
body.zb-shell select,
body.zb-shell textarea {
  background: #151515 !important;
  border: 1px solid #444 !important;
  color: #fff !important;
}

body.zb-shell .btn1_1,
body.zb-shell .btn3_1,
body.zb-shell .pop_login_btn1 {
  background: linear-gradient(180deg, #ff0f0f 0%, #b00000 100%) !important;
  color: #fff !important;
  border: 1px solid #fa0000 !important;
}

/* Mobile menu button */
.zb-mobile-menu {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10020;
  width: 42px;
  height: 42px;
  border: 1px solid #fa0000;
  border-radius: 8px;
  background: #000;
  color: #ffcc00;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.zb-mobile-dim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10010;
}
.zb-mobile-dim.is-open {
  display: block;
}

@media screen and (max-width: 1023px) {
  .zb-mobile-menu {
    display: inline-flex !important;
  }

  body.zb-shell .header-arr {
    transform: translateX(-110%);
    transition: transform 0.25s ease;
    z-index: 10030 !important;
    width: min(280px, 86vw) !important;
  }
  body.zb-shell.zb-nav-open .header-arr {
    transform: translateX(0);
  }

  body.zb-shell .user-info-arr {
    width: 100% !important;
    left: 0 !important;
    height: 56px !important;
    min-height: 56px;
    padding: 0 !important;
    box-sizing: border-box;
  }
  body.zb-shell .user-info-cont {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0;
    height: 56px;
    padding: 0 10px 0 56px;
    width: 100%;
    box-sizing: border-box;
  }
  body.zb-shell .noticeText {
    display: none !important;
  }
  body.zb-shell .user-info01 {
    position: static;
    order: 1;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    gap: 8px;
    min-height: 56px;
  }
  body.zb-shell .user-info01.zb-guest {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    padding-right: 0;
  }
  /* Logo left of auth buttons — do not absolute-center (overlaps login/join) */
  body.zb-shell .zb-top-brand {
    display: flex !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 auto 0 0 !important;
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    pointer-events: auto;
    z-index: 1;
  }
  body.zb-shell .zb-top-brand a {
    display: flex;
    align-items: center;
    max-width: 100%;
  }
  body.zb-shell .zb-top-brand img {
    display: block;
    height: 36px !important;
    width: auto !important;
    max-width: min(140px, 34vw) !important;
    object-fit: contain;
  }
  body.zb-shell .user-info01.zb-guest > li:not(.zb-top-brand) {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }
  body.zb-shell .user-info01 .zb-top-user-meta {
    display: none !important;
  }
  body.zb-shell .user-info01 .zb-top-logout {
    margin-left: auto;
    z-index: 2;
    position: relative;
  }
  body.zb-shell .user-info01 .zb-top-logout a {
    font-size: 0 !important;
    line-height: 0 !important;
    gap: 0;
    padding: 6px;
  }
  body.zb-shell .user-info01 .zb-top-logout a i {
    font-size: 22px !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
  body.zb-shell .user-info01 li {
    font-size: 11px;
  }
  body.zb-shell .user-info01 .bett_ranking_nn,
  body.zb-shell .level_icon {
    display: none !important;
  }
  body.zb-shell .zb-left-user {
    display: block !important;
    padding: 14px 14px !important;
  }
  body.zb-shell .zb-left-user .level_icon {
    display: inline-flex !important;
  }
  body.zb-shell .zb-left-user-nick {
    font-size: 18px !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    font-weight: 800 !important;
  }
  body.zb-shell .zb-left-user-nick strong {
    font-size: 18px !important;
  }
  body.zb-shell .zb-left-user-nick .level_icon img {
    width: 26px !important;
    height: 26px !important;
  }
  body.zb-shell .zb-left-user-row {
    font-size: 17px !important;
    line-height: 1.4 !important;
    margin-top: 8px !important;
    font-weight: 700 !important;
  }
  body.zb-shell .zb-left-user-row span,
  body.zb-shell .zb-left-user-row strong {
    font-size: 17px !important;
    font-weight: 700 !important;
  }
  body.zb-shell .zb-left-user-row i {
    font-size: 18px !important;
  }

  body.zb-shell .sub_content_arr_bg {
    padding-left: 0 !important;
    margin-top: 70px !important;
    min-width: 0 !important;
  }
  body.zb-shell .zb-content {
    padding: 12px;
  }

  body.zb-shell #footer .footer-png,
  body.zb-shell .copyright img {
    max-width: 90%;
    height: auto;
  }
}

body.zb-shell .mobile_bottom,
body.zb-shell .bottom_wrap,
body.zb-shell #bottom-wrap {
  display: none !important;
}

/* Ensure left rail scrolls on overflow */
body.zb-shell .header-arr {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}

/* Image popups: fixed overlay above zeroback chrome */
body.zb-shell .center_popup_area_box {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  z-index: 100050 !important;
  padding-top: 90px !important;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
  overflow: auto !important;
}
body.zb-shell .center_popup_area_box .shadow {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  z-index: 0 !important;
  pointer-events: auto !important;
}
body.zb-shell .center_popup_area_box .line_up {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: auto !important;
  max-width: min(1380px, 96vw);
  overflow: visible !important;
  pointer-events: auto;
  vertical-align: top;
}
body.zb-shell .center_popup_area_box .center_popup_area {
  float: none !important;
  display: inline-block;
  vertical-align: top;
  margin: 8px;
  width: min(448px, 92vw) !important;
  background: #111;
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
}
body.zb-shell .center_popup_area_box .center_popup_area .conts {
  width: 100% !important;
  height: auto !important;
  max-height: 70vh;
  overflow: auto;
  background: #000;
}
body.zb-shell .center_popup_area_box .center_popup_area .conts img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100%;
}
body.zb-shell .center_popup_area_box .center_popup_area .bottom {
  background: #111;
  color: #fff !important;
  text-shadow: none !important;
}
body.zb-shell .center_popup_area_box .center_popup_area .bottom a,
body.zb-shell .center_popup_area_box .center_popup_area .bottom span,
body.zb-shell .center_popup_area_box .center_popup_area .bottom .pop_only_close,
body.zb-shell .center_popup_area_box .center_popup_area .bottom .pop_close {
  color: #fff !important;
}

/* Mobile image popups */
body.zb-shell .shadow {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.75) !important;
  z-index: 100040 !important;
}
body.zb-shell .popup_area {
  position: fixed !important;
  top: 70px !important;
  left: 50% !important;
  margin-left: 0 !important;
  transform: translateX(-50%);
  z-index: 100050 !important;
  width: min(320px, 92vw);
}
body.zb-shell .popup_area .popup {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  background: #111;
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
}
body.zb-shell .popup_area .popup.is-open {
  display: block !important;
}
body.zb-shell .popup_area .popup .content {
  height: auto !important;
  max-height: 70vh;
  overflow: auto;
}
body.zb-shell .popup_area .popup .content img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
body.zb-shell .popup_area .close_box {
  width: 100% !important;
  box-sizing: border-box;
  background: #111;
  text-shadow: none !important;
}
body.zb-shell .popup_area .pop_only_close,
body.zb-shell .popup_area .pop_close {
  color: #fff !important;
}

/* Attendance calendar — zeroback */
body.zb-shell .zb-attendance-page .calendar_title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  margin: 0 0 14px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #151515;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
body.zb-shell .zb-attendance-page .calendar_title .button {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  text-decoration: none;
}
body.zb-shell .zb-attendance-page .calendar_title .button:hover {
  color: #ffcc00 !important;
}
body.zb-shell .zb-attendance-page .info_wrap {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #111;
  border: 1px solid #444;
  border-radius: 8px;
  color: #ddd;
  line-height: 1.6;
}
body.zb-shell .zb-attendance-page .info_wrap .font05 {
  color: #ffcc00;
  font-weight: 700;
}
body.zb-shell .zb-attendance-page .attendance-hint-line {
  margin-top: 8px;
  color: #888;
  font-size: 12px;
}
body.zb-shell .zb-attendance-page .amp-attendance-calendar,
body.zb-shell .zb-attendance-page #calendar {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #000;
}
body.zb-shell .zb-attendance-page .amp-attendance-calendar th,
body.zb-shell .zb-attendance-page .att_title1 {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-weight: 700;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid #444;
  border-top: solid 2px #ffcc00;
}
body.zb-shell .zb-attendance-page .amp-attendance-calendar td,
body.zb-shell .zb-attendance-page .att1 {
  height: 90px;
  text-align: center;
  position: relative;
  padding: 10px;
  color: #ddd !important;
  background: #1a1a1a !important;
  border: 1px solid #444 !important;
  vertical-align: top;
}
body.zb-shell .zb-attendance-page .att2 {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  color: #fff !important;
  font-weight: 700;
}
body.zb-shell .zb-attendance-page .att1 img {
  width: 100%;
  max-width: 72px;
  margin-top: 18px;
}
@media screen and (max-width: 1023px) {
  body.zb-shell .zb-attendance-page .att1 {
    height: 64px;
    padding: 6px;
    font-size: 11px;
  }
  body.zb-shell .zb-attendance-page .att1 img {
    max-width: 36px;
    margin-top: 14px;
  }
}