/* Global defaults */
:root {
    --tw-bg-opacity: 1; /* only defined once */
      --navbar-dark: linear-gradient(90deg, #0d1b2a, #1a2a3a); /* Dark gradient */
    --navbar-light: linear-gradient(90deg, #f8f9fa, #e9ecef); /* Light gradient */
    --navbar-link-dark: #e2e2e2;
    --navbar-link-light: #212529;
    --mobile-top-height: 55px;
}

/* LIGHT MODE */
:root,
/* LIGHT MODE */
[data-bs-theme="light"] {
    --pdark: rgb(255 255 255 / var(--tw-bg-opacity));
    --plight: rgb(255 255 255 / var(--tw-bg-opacity, 1));
     --text-dark: #000;
       --pmodal: rgba(255, 255, 255, 0.94);
       --cbs-dark:#fff;
       --b-dark: #fff;
        --cbs-text:#212529;
        
   --cbsborder: 1px solid rgba(255, 255, 255, 0.05);
   --bs-place-color:rgba(33, 37, 41, 0.75); /*rgba(151, 155, 160, 0.75);*/
   --cstyle:rgb(124 126 134 / 5%);
--sbox:rgb(223 225 231 / 12%);
}

/* DARK MODE */
[data-bs-theme="dark"] {
      --pmodal: rgb(17 24 39 / 94%);
    --pdark: rgb(17 24 39 / var(--tw-bg-opacity));
    --plight: rgb(31 41 55 / var(--tw-bg-opacity, 1));
     --text-dark: #fff;
     --b-dark: #000;
     --cbs-dark:#212529;
     --cbs-text:#e2e2e2;
        --cbsborder:  1px solid #3d3e43 !important;
       
         --bs-place-color:rgba(222, 226, 230, 0.75);/*rgba(119, 122, 123, 0.75);*/
          --cstyle:rgba(255,255,255,0.05);
          --sbox:rgba(255,255,255,.12);
}



[data-bs-theme="dark"] .navbar-glass {
    background: rgba(0, 0, 0, 0.6);
    color: #e2e2e2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* LIGHT MODE */
[data-bs-theme="light"] .navbar-glass {
    background: rgba(255, 255, 255, 0.6);
    color: #212529;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.cbg-dark{
background:var(--cbs-dark) !important;
color:var(--cbs-text) !important;
}
.c-menu{
color:var(--cbs-dark) !important;
background:var(--cbs-text) !important;
}

.tdark{
    color:var(--text-dark) !important;
}
.bdark{
    background-color:var(--b-dark) !important;
     background:var(--b-dark) !important;
}
/* Navbar links hover effect */
.navbar-glass .nav-link {
    transition: color 0.3s ease;
}
.navbar-glass .nav-link:hover {
    color: inherit; /* Gold accent on hover */
    font-weight:bold;
    
}
.navbar-glass .navbar-brand:hover {
    color: inherit;
    font-weight:bold;
    
}


/* Utility class */

.no-br-tr-br {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.bg-gray-900 {
    background-color: var(--pdark) !important;
}

.bg-gray-100 {
    background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important;
}

.bg-gray-800 {
    background-color: var(--plight) !important;
}

.bg-gray-901 {
    background-color: rgb(1 7 19) !important;
}

.bg-gray-801 {
	    background-color: rgb(15 16 18) !important;
}

/* Links */
.navbar-gradient .nav-link {
    color: inherit;
    transition: color 0.3s ease;
}

.navbar-gradient .nav-link:hover {
    color: #FFD700; /* Gold highlight on hover */
}

.navbar-gradient .navbar-brand {
    color: inherit;
}

.navbar-gradient .navbar-brand:hover {
    color: #FFD700;
}
.navbar-brand {
    display: flex;
    align-items: center;
    position: relative;
}

.logo-text {
    font-weight: 800;
    font-style: oblique 0deg; /* very subtle italic */
    font-size: 1.8rem;
    color: white;
    text-shadow: 1px 1px 2px rgba(208, 194, 194, 0.3);
    letter-spacing: 0.5px;
    position: relative;
}

/* Add the line */
.navbar-brand::after {
    content: "";
    position: absolute;
    left: 0; /* starts at the left edge of the F button */
    bottom: -4px; /* distance below the text */
    height: 2px; /* thickness of the line */
    width: 100%; /* spans entire brand content */
    background: linear-gradient(to right, #FFD700, #fff); /* stylish gradient line */
    z-index: 0;
}

/* Ensure text is above the line */
.navbar-brand span {
    position: relative;
    z-index: 1;
}


.payment-method img {
    transition: transform 0.3s ease;
    border-radius:10px;
    border: 3px solid #000;
}
.payment-method img:hover {
    transform: scale(1.1);
}
.auth-container {
        background: #04091f !important;
    position: relative;
    z-index: 1; /* ensure content stays above background */
   /* min-height: calc(100vh + 30px);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    padding-left: 5px;
    padding-top:130px;
    padding-bottom:150px;
}
.auc {
    position: relative;
    z-index: 1; /* ensure content stays above background */
   /* min-height: calc(100vh + 30px);*/
}
.auc::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('bg-1.png');
    background-size: cover; /* covers entire container */
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8; /* dim the background */
    z-index: -1; /* behind the content */
}

.form-control::-moz-placeholder{color:rgba(222, 226, 230, 0.75);opacity:1}
.form-control::placeholder{color:rgba(222, 226, 230, 0.75);opacity:1; }
/* Style when the placeholder is showing */
.country-select:invalid {
    color: #9ca3af; /* light gray placeholder color */
    /*font-style: italic;*/
}

/* Background image layer */
.auth-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('hero-shape-13.png');/*url('bg-1.png');*/
    background-size: cover; /* covers entire container */
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.2; /* dim the background */
    z-index: -1; /* behind the content */
}


/*
.auth-container {
    min-height: calc(100vh - 10px);
    margin-top: 2rem;              
    margin-bottom: 2rem;            
    padding: 1rem;                   
}*/

/* Glass navbar */
.navbar-glass {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(33,37,41,0.8);
}

/* Mobile Navigation Style */
.mobile-nav {
    background: var(--pdark); /* Works with your dark/light theme */
    border-radius: 0px;
    padding: 1.5rem !important;
}

.mobile-nav li {
    margin-bottom: 8px;
}

.mobile-nav .nav-link {
    display: block;
    padding: 12px 10px;
    border-radius: 8px;
    color: var(--nav-text, #fff);
    font-size: 1.05rem;
    font-weight: 500;
    transition: all .2s ease;
}

/* Hover effect */
.mobile-nav .nav-link:hover {
    background: rgba(255,255,255,0.08);
    padding-left: 16px; /* slight slide */
}

/* Login button */
.mobile-nav .login-btn {
    border: 1px solid rgba(255,255,255,0.25);
    text-align: center;
    border-radius: 8px;
}

/* Register button */
.mobile-nav .register-btn {
    background: linear-gradient(45deg, #ffc107, #ffda47);
    color: #000 !important;
    border-radius: 8px;
    text-align: center;
    font-weight: 700 !important;
}

.mobile-nav .register-btn:hover {
    background: linear-gradient(45deg, #ffda47, #ffc107);
}

/* Light mode override */
[data-bs-theme="light"] .mobile-nav .nav-link {
    color: #111;
}

[data-bs-theme="light"] .mobile-nav .nav-link:hover {
    background: rgba(0,0,0,0.05);
}

[data-bs-theme="light"] .login-btn {
    border: 1px solid rgba(0,0,0,0.3);
}

[data-bs-theme="light"] .register-btn {
    color: #000 !important;
}


/* Mobile Sidebar */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 300px;
    height: 100vh;
    background: var(--pdark);
    color: #fff;
    transition: left 0.4s ease;
    z-index: 1050;
    padding-top: 1rem;

    /* 🔥 THIS MAKES IT SCROLLABLE */
    overflow-y: auto;     
    overflow-x: hidden;    
}


.mobile-sidebar a {
    color: #FFD700;
    text-decoration: none;
    display: block;
}

.mobile-sidebar a:hover {
    color: #fff;
}

/* Overlay */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
    z-index: 1040;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Active sidebar */
.mobile-sidebar.active {
    left: 0;
}
.ob{width: 3rem; height: 3rem; border-radius: 50%; font-size: 2.2rem; line-height: 1;font-weight: 800;    font-style: oblique 5deg;}


#password-rules .pw-rule {
    font-size: 0.9rem;
    color: #9ca3af; /* muted gray */
}

#password-rules .pw-rule.valid span {
    color: #6ee98b; /* green */
    /*font-weight: 600;*/
}

#password-rules .pw-rule.valid i {
    color: #6ee98b;
}

#password-rules i.rule-icon {
    font-size: 1rem;
    color: #9ca3af;
}

#kpreloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity 0.3s ease;
}

#kpreloader.hidden {
    opacity: 0;
    pointer-events: none;
}
.code-box {
    width: 60px;
    height: 60px;
    font-size: 28px;
    border-radius: 10px;
}
.code-box:focus {
    outline: 2px solid #f5b300 !important;
    box-shadow: 0 0 5px rgba(245,179,0,0.7);
}
.kspinner {
    width: 50px;
    height: 50px;
    border: 4px solid #444;
    border-top-color: gold;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}




@media (min-width: 464px) {
    .mts-4 {
        margin-top: 0 !important;
    }
}

/* Optional: reset margin-top for smaller screens */
@media (max-width: 463px) {
    .mts-4 {

        margin-top: 1.5rem !important;
    }
}


/* Container */
.k-nav-header {
    background: #111;
    border-bottom: 1px solid #333;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}

.k-nav-container {
    max-width: 1300px;
    margin: auto;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Desktop Links */
.k-nav-desktop a {
    margin: 0 12px;
    color: #eee;
    font-weight: 500;
    text-decoration: none;
}
.k-nav-desktop { display: flex; }

/* Profile */
.k-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #333;
}

.k-profile {
    position: relative;
}

.k-profile-dropdown {
    position: absolute;
    right: 0;
    margin-top: 10px;
    background: #111;
    border: 1px solid #333;
    padding: 10px;
    display: none;
    flex-direction: column;
}

.k-profile-dropdown a {
    padding: 8px 12px;
    cursor: pointer;
    color: #eee;
    text-decoration: none;
}

/* Toggle */
.k-theme-btn {
    background: none;
    border: none;
    font-size: 22px;
    margin-right: 15px;
    cursor: pointer;
    color: #eee;
}

/* Mobile */
.k-mobile-toggle {
    font-size: 24px;
    background: none;
    border: none;
    display: none;
    color: #eee;
}

/* Sidebar */
.k-mobile-sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 240px;
    height: 100%;
    background: #111;
    border-right: 1px solid #333;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: 0.3s;
    z-index: 999;
}
.k-mobile-sidebar.active { left: 0; }

.k-sidebar-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #0005;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.k-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Responsive */
/* Desktop: header should sit beside the 250px sidebar */
/* Desktop: sidebar visible → shift header, shrink width */
.k-mobile-header {
    width: calc(100% - 250px) !important;
    margin-left: 250px;
}

/* Mobile: no sidebar → full width */
@media (max-width: 768px) {
    .k-mobile-header {
        width: 100% !important;
        margin-left: 0;
    }
}

.spinning-hourglass {
  display: inline-block;
  animation: spin 2s linear infinite;
  transform-origin: center; /* rotate around center */
  font-size: 1.3rem; /* optional */
  color: #f0a500; /* optional color */
}

@keyframes rotate {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.kbi{
  font-size: 3rem;
  color: #212529;
}

.border-dashed {
    border-style: dashed !important;
  }
  .border-dotted {
    border-style: dotted !important;
  }
.form-control::placeholder{color:var(--bs-place-color) !important;opacity:1 !important; font-size:16px;}