/**
 * SUPERONG Theme - Style2.css
 * Mobile Gaming App Color Variables & Components
 * Extracted from design mockups
 */

/* ============================================
   SUPERONG Color Variables
   ============================================ */
:root {
  /* ===== Background Colors ===== */
  --sp-bg-primary: #1a1a2e;
  --sp-bg-secondary: #16213e;
  --sp-bg-dark: #0f0f1a;
  --sp-bg-card: #252542;
  --sp-bg-input: #1e1e3a;
  --sp-bg-white: #ffffff;
  --sp-bg-light: #f5f5f5;

  /* ===== Purple Theme ===== */
  --sp-purple-darkest: #00001d;
  --sp-purple-dark: #00003a;
  --sp-purple-medium: #3d3d7a;
  --sp-purple-light: #4a4a8a;
  --sp-purple-accent: #6b6bb5;

  /* ===== Gold/Orange Accent ===== */
  --sp-gold: #d4a84b;
  --sp-gold-light: #e5c16e;
  --sp-gold-dark: #b8923f;
  --sp-orange: #f39c12;
  --sp-orange-dark: #e67e22;
  --sp-orange-darker: #d4691a;

  /* ===== Button Gradients ===== */
  --sp-btn-gradient: linear-gradient(
    180deg,
    #f5a623 0%,
    #e8851c 50%,
    #d4691a 100%
  );
  --sp-btn-gradient-hover: linear-gradient(
    180deg,
    #ffc107 0%,
    #f39c12 50%,
    #e67e22 100%
  );
  --sp-btn-gradient-pressed: linear-gradient(
    180deg,
    #d4691a 0%,
    #c45a15 50%,
    #b04d10 100%
  );

  /* ===== Header Colors ===== */
  --sp-primary-dark: #1a003c;
  --sp-header-bg: #1a003c;
  --sp-header-gradient: linear-gradient(180deg, #3d3d7a 0%, #2a2a5a 100%);
  --sp-header-gradient-dark: linear-gradient(180deg, #2d2d5a 0%, #1a1a2e 100%);
  --sp-header-gradient-new: linear-gradient(180deg, #1a003c 0%, #13001f 100%);

  /* ===== Footer Gradient ===== */
  --sp-footer-gradient: linear-gradient(
    180deg,
    #ffffff 0%,
    #e8e0f0 50%,
    #d0c4e0 100%
  );

  /* ===== Hot/Label Gradient ===== */
  --sp-hot-gradient: linear-gradient(180deg, #ac4ee9 0%, #360599 100%);

  /* ===== Status Colors ===== */
  --sp-success: #2ecc71;
  --sp-success-light: #58d68d;
  --sp-success-bg: rgba(46, 204, 113, 0.15);
  --sp-warning: #f39c12;
  --sp-warning-bg: rgba(243, 156, 18, 0.15);
  --sp-error: #e74c3c;
  --sp-error-bg: rgba(231, 76, 60, 0.15);
  --sp-info: #3498db;
  --sp-info-bg: rgba(52, 152, 219, 0.15);
  --sp-pending: #f39c12;

  /* ===== Text Colors ===== */
  --sp-text-white: #ffffff;
  --sp-text-light: #e0e0e0;
  --sp-text-muted: #9999aa;
  --sp-text-dark: #333333;
  --sp-text-gold: #d4a84b;
  --sp-text-purple: #6b6bb5;
  --sp-text-link: #3498db;

  /* ===== Border Colors ===== */
  --sp-border-gold: #d4a84b;
  --sp-border-purple: #4a4a8a;
  --sp-border-light: rgba(255, 255, 255, 0.1);
  --sp-border-dark: rgba(0, 0, 0, 0.1);

  /* ===== Shadow ===== */
  --sp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
  --sp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --sp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --sp-shadow-gold: 0 4px 15px rgba(212, 168, 75, 0.3);

  /* ===== Dimensions ===== */
  --sp-mobile-width: 414px;
  --sp-header-height: 56px;
  --sp-bottom-nav-height: 70px;
  --sp-content-padding: 16px;
  --sp-card-radius: 12px;
  --sp-btn-radius: 25px;
  --sp-input-radius: 8px;

  /* ===== Safe Area ===== */
  --sp-safe-top: env(safe-area-inset-top, 0px);
  --sp-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ===== Transitions ===== */
  --sp-transition: all 0.3s ease;
  --sp-transition-fast: all 0.15s ease;
}

/* ============================================
   Global Anchor/Link Styles
   ============================================ */
a {
  text-decoration: unset !important;
}

/* ============================================
   SUPERONG Base Styles
   ============================================ */
.sp-app {
  max-width: var(--sp-mobile-width);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--sp-bg-primary);
  color: var(--sp-text-white);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

.sp-wrapper {
  display: inline;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* .sp-page - MOVED TO components.css */


/* ============================================
   SUPERONG Header
   ============================================ */
.sp-header {
  background: var(--sp-header-gradient);
  height: var(--sp-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-content-padding);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* .sp-header-title, .sp-header-back - MOVED TO components.css */

.sp-header-icon {
  color: var(--sp-text-white);
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
}

/* ============================================
   SUPERONG Home Header (Special)
   ============================================ */
/* Home Header, Lang Dropdown, Point Bar - MOVED TO components.css */

/* Bottom Navigation - MOVED TO components.css */

/* ============================================
   SUPERONG Buttons
   ============================================ */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--sp-btn-radius);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--sp-transition);
  border: none;
  width: 100%;
}

/* .sp-btn-primary - MOVED TO components.css */

.sp-btn-outline {
  background: transparent;
  border: 2px solid var(--sp-gold);
  color: var(--sp-gold);
}

.sp-btn-outline:hover {
  background: var(--sp-gold);
  color: var(--sp-text-white);
}

/* DUPLICATE REMOVED - Latest .sp-tabs/.sp-tab definitions at line ~1906 */

/* ============================================
   SUPERONG Cards & List Items
   ============================================ */
.sp-card {
  background: var(--sp-bg-white);
  border-radius: var(--sp-card-radius);
  padding: 16px;
  margin: 12px var(--sp-content-padding);
  box-shadow: var(--sp-shadow-sm);
}

/* List Items, Form Groups - MOVED TO components.css */

.sp-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--sp-border-dark);
  border-radius: var(--sp-input-radius);
  font-size: 14px;
  background: var(--sp-bg-white);
  transition: var(--sp-transition);
}

.sp-input:focus {
  outline: none;
  border-color: var(--sp-gold);
  box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.1);
}

.sp-input-dark {
  background: var(--sp-bg-input);
  border-color: var(--sp-border-purple);
  color: var(--sp-text-white);
}

.sp-input-dark::placeholder {
  color: var(--sp-text-muted);
}

/* Modals - MOVED TO components.css */

/* Dropdown, Game Grid, Category Grid - MOVED TO components.css */

/* Category, Customer Service, Menu, Header Actions, Lang Dropdown - MOVED TO components.css */

/* Lang Item, Game Section, Transaction, Filter, Info Card, Commission - MOVED TO components.css */

/* Commission Value, Data Table, Chat, Password Modal, Customer Service, Ranking - MOVED TO components.css */

/* Ranking, Search, Empty, Swipe, Loading, Tabs, Notification, News, Referral - MOVED TO components.css */

/* Stats, Commission, Tabs, Performance Table, Button Container - MOVED TO components.css */

/* Intro, Contacts, Chat List, Profile Card - MOVED TO components.css */

/* Menu, Form Components, Transaction List, Settings Menu - MOVED TO components.css */

/* Step, Password, Phone Input, Verification, Form Row, Chat Page, CS Page - MOVED TO components.css */

/* CS Options, Activity, Ranking Page, Game Detail - MOVED TO components.css */

/* Info Label/Value, Game Description, Auth Pages - MOVED TO components.css */

/* Register, About, Terms, Tutorial, FAQ, Forgot Password - MOVED TO components.css */

/* ============================================
   HOME PAGE SPECIFIC STYLES
   ============================================ */

/* Home Content Wrapper */
.sp-home-content {
  padding-bottom: calc(var(--sp-bottom-nav-height) + 20px);
  background: var(--sp-bg-primary);
  min-height: 100vh;
}

/* Home Header */
.sp-home-header {
  background: var(--sp-header-gradient);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-home-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.sp-logo-wrap {
  display: flex;
  align-items: center;
}

.sp-logo {
  height: 28px;
  width: auto;
}

.sp-header-globe {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-globe-icon {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

/* Point Section (Below Banner) */
.sp-point-section {
  padding: 0 16px;
  margin-top: -8px;
}

.sp-point-bar {
  background: var(--sp-bg-card);
  border-radius: 20px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-point-label {
  font-size: 13px;
  color: var(--sp-text-muted);
}

.sp-point-value-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-point-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-gold);
}

.sp-point-dropdown {
  font-size: 10px;
  color: var(--sp-gold);
}

/* Feature Section (8 Icons Horizontal Scroll) */
.sp-feature-section {
  padding: 16px 0;
}

.sp-feature-scroll {
  display: flex;
  overflow-x: auto;
  padding: 0 16px;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sp-feature-scroll::-webkit-scrollbar {
  display: none;
}

.sp-feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  min-width: 60px;
  flex-shrink: 0;
}

.sp-feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sp-btn-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: var(--sp-shadow-gold);
}

.sp-feature-icon img {
  width: 24px;
  height: 24px;
  filter: brightness(0) invert(1);
}

.sp-feature-icon i {
  font-size: 22px;
  color: var(--sp-text-white);
}

.sp-feature-label {
  font-size: 11px;
  color: var(--sp-text-white);
  white-space: nowrap;
  text-align: center;
}

/* Banner Section Updates */
.sp-banner-section {
  margin: 12px 16px;
  position: relative;
}

.sp-banner-slide {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.sp-banner-bg {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.sp-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sp-banner-label {
  display: inline-block;
  font-size: 10px;
  color: #ff8ad8;
  background: rgba(255, 138, 216, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  width: fit-content;
}

.sp-banner-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-gold);
  margin: 0 0 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sp-banner-btn {
  display: inline-block;
  padding: 8px 20px;
  background: var(--sp-btn-gradient);
  color: var(--sp-text-white);
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  text-decoration: none;
  width: fit-content;
  box-shadow: var(--sp-shadow-gold);
}

.sp-banner-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.sp-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}

.sp-indicator.active {
  width: 18px;
  border-radius: 3px;
  background: var(--sp-gold);
}

/* Game Section */
.sp-game-section {
  padding: 0 0 20px;
}

/* Game Tabs (Category Buttons) */
.sp-game-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sp-game-tabs::-webkit-scrollbar {
  display: none;
}

.sp-game-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--sp-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--sp-transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sp-game-tab:first-child {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--sp-orange);
  border-radius: 50%;
  justify-content: center;
  flex-direction: column;
}

.sp-game-tab:first-child i {
  font-size: 14px;
  color: var(--sp-orange);
}

.sp-game-tab:first-child span {
  font-size: 9px;
  color: var(--sp-orange);
}

.sp-game-tab:first-child.active {
  background: var(--sp-btn-gradient);
  border-color: transparent;
}

.sp-game-tab:first-child.active i,
.sp-game-tab:first-child.active span {
  color: var(--sp-text-white);
}

.sp-game-tab:not(:first-child).active {
  background: var(--sp-btn-gradient);
  color: var(--sp-text-white);
  border-radius: 20px;
}

/* Game Grid */
.sp-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 16px;
}

.sp-game-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.sp-game-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 6px;
  background: var(--sp-bg-card);
}

.sp-game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-game-name {
  font-size: 11px;
  color: var(--sp-text-white);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DUPLICATE REMOVED - .sp-bottom-nav definition at line 236 with background: #1a003c is the active one */

/* Center Crown Button */
.sp-nav-center {
  position: relative;
  margin-top: -30px;
}

.sp-nav-crown {
  width: 60px;
  height: 60px;
  background: var(--sp-purple-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: var(--sp-shadow-md);
}

.sp-nav-crown i {
  font-size: 28px;
  color: var(--sp-gold);
}



/**************************************************/
.form-group { margin-bottom: 0.7rem; }
.site-ctbox{
  max-width: 700px;
    margin: 25px auto;
}
.swallet-main{
  padding: 0 30px;
}
.swallet-title{
  font-family: system-ui;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #ddb57b;
}
.site-ctbox .form-group label{
  width: auto;
  font-family: system-ui;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #222;
    margin-bottom: 2px;
}
    .radio_bank .radio_bank_detail {
        display: none !important;
    } 
.site-ctbox .form-group input,
.site-ctbox .form-group select{
  position: relative;
  background: #383838;
    border: none;
    border-radius: 5px;
    width: 100%;
    min-height: 30px;
    color: #222;
    font-size: 13px;
    padding: 2px 15px;
    letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.site-ctbox .form-group input:disabled{
  background: #383838;
}
.site-ctbox .btn-css2,
.site-ctbox .btn-css3{
  width: 100%;
}
.css-select2{
  position: relative;
}
.css-select2 select{
  -webkit-appearance: none;
}
.css-select2:before{
  content: "\f107";
    position: absolute;
    top: 14px;
    right: 8px;
    font-family: 'icomoon' !important;
    font-size: 18px;
    text-align: center;
    color: #fec55c;
    line-height: 0;
    z-index: 1;
}
.radio_group{
  display: grid;
  margin-bottom: 15px;
}
.radio_saved{
  display: flex;
    width: 100%;
}
.radio_saved input{
  display: none;
}
.radio_check{
  display: block;
    width: 10px;
    height: 10px;
    background: #eee;
    border-radius: 50%;
    margin-top: 15px;
  transition: background 0.4s ease;
}
.radio_saved input:checked + span{
    background: #ffbd5b !important;
  box-shadow: 0 0 3px #ff2809b0;
}
.radio_bank{
  display: flex;
  width: 100%;
}
.radio_bank img{
  width: 100%;
    max-width: 110px;
    height: 44px;
    margin: 0 3px;
}
.radio_bank_detail{
  display: grid;
  width: 100%;
}
.radio_bank_detail span{
  background: #666;
    color: #eee;
    width: 100%;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 2px;
    line-height: 120%;
    padding: 10px;
}
.btn-css2,
.btn-css3{
  font-family: system-ui;
    text-transform: uppercase;
    width: max-content;
    min-width: 85px;
    background: linear-gradient(135deg, #AF7515, #F4D67F,#FFFFD6, #F4D67F, #AF7515);
  box-shadow: 0 0 3px #ff8100;
    color: #000 !important;
    padding: 4px 12px;
    border: none;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.2px;
    margin: auto 3px;
  border-radius: 0.3rem;
}
.btn-css3{
    background: #000;
    color: #fff !important;
    border: 1px solid #ffffff;
    padding: 2px 15px;
    font-weight: unset;
    border-radius: 0.3rem;
}
.btn-css2:hover,
.btn-css2:active,
.btn-css3:hover,
.btn-css3:active{
  animation: glowing 1s infinite;
}
.form-to-date{
  display: flex;
}
.form-to-date input{
  margin: 0 !important;
    padding-left: 10px !important;
    padding-right: 5px !important;
}
.form-to-date span{
  font-size: 12px;
  color: #222;
  margin: auto 10px;
}

.radio_dgroup{
  display: flex;
}
.radio_date{
  display: flex;
    margin-right: 5px;
}
.radio_date input{
  display: none;
}
.radio_date span{
    padding: 8px;
    font-size: 12px;
    background: #4d4d4d;
    border-radius: 5px;
    color: #000;
    width: 100%;
    min-width: max-content;
    transition: background 0.4s ease;
    text-align: center;
}
.radio_date input:checked + span{
    background: linear-gradient(180deg, #f9c20f, #fda027, #f0742c, #ec692e) !important;
    color: #222;
}

/*** p_loading.php **/

.result_div{
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(255, 255, 255, 0.9);
    z-index: 9999;
  }
.ssload-flip{
    /* display: grid;
    width: 100%;
    margin-top: 50%; */

    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}
.ssload-center{
    display: flex;
    margin: auto;
    width: 210px;
    overflow: hidden;
}
.ssload-center span{
    display: flex;
    width: 70px;
    height: 70px;
}
.ssload-center span:nth-child(1):before{ background: url(../images/p_logo.png); }
.ssload-center span:nth-child(2):before{ background: url(../images/s_logo.png); }
.ssload-center span:nth-child(3):before{ background: url(../images/7_logo.png); }
.ssload-center span:before{
    content: '';
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 100%;
    height: 100%;
    margin: 5px;
}
.ssload-center span:nth-child(1){ animation: coinMove1 2.1s infinite; }
.ssload-center span:nth-child(2){ animation: coinMove2 2.1s infinite; }
.ssload-center span:nth-child(3){ animation: coinMove3 2.1s infinite; }
@keyframes coinMove1 {
  0% { transform: scale(0); opacity: 0; }
  20% { opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  65% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes coinMove2 {
  0% { transform: scale(0); opacity: 0; }
  20% { opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  65% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes coinMove3 {
  0% { transform: scale(0); opacity: 0; }
  20% { opacity: 0; }
  50% { transform: scale(1); opacity: 1; }
  65% { opacity: 1; }
  100% { opacity: 0; }
}
.ssload-flip label{
    color: black;
    background: -webkit-linear-gradient(90deg, #ee740a, #ff9815);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: auto;
    letter-spacing: 12px;
    font-size: 12px;
    font-weight: 400;
    font-family: Mont500, system-ui;
    margin-top: 15px;
    filter: brightness(1.5);
    animation: shake2 3.2s infinite;
}
@keyframes shake2 {
    0% { transform: translateX(0); }
    30% { transform: translateX(0); }
    31% { transform: translateX(2px); }
    32% { transform: translateX(-2px); }
    33% { transform: translateX(3px); }
    34% { transform: translateX(-1px); }
    35% { transform: translateX(2px); }
    36% { transform: translateX(-2px); }
    37% { transform: translateX(1px); }
    38% { transform: translateX(-3px); }
    39% { transform: translateX(2px); }
    40% { transform: translateX(0); }
    100% { transform: translateX(0); }
}


/*** end p_loading.php ***/