@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Doto:wght@100..900&family=Federo&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Doto:wght@100..900&family=Federo&family=Orbitron:wght@400..900&family=Oswald:wght@200..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #667eea;
    --primary-dark: #5568d3;
    --success: #4CAF50;
    --danger: #f44336;
    --bg-light: #f5f7fa;
    --text-dark: #2d3748;
    --text-light: #718096;
    --border: #e2e8f0;
}

body {
    font-family: "Dosis";
    background: #c6f424ff;
    min-height: 100vh;
    color: #000000;
}

h2 {
    font-family: "Orbitron";
    text-transform: uppercase;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Auth Pages */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-box {
    background: #000000;
    border-radius: 15px;
    box-shadow: #067ce5 0px 0px 8px!important;
    padding: 40px;
    width: 100%;
    max-width: 450px;
}

.logo {
    text-align: center;
    margin-bottom: 30px;
}

.logo h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.logo p {
    color: #ffffff;
    font-size: 0.95em;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #ffffff;
}

.form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.btn {
    cursor: pointer;
    padding: 12px 16px;
    border: 1px solid #c6f424ff;
    background: #000;
    color: #fff;
    border-radius: 5px;
    font-family: "Orbitron";
    transition: 0.3s;
    font-weight: 500;
}

.btn-primary {
    background: linear-gradient(180deg, #ff0066ff 0%, #a10040ff 100%);
    border: 1px solid #ff0066ff;
}

.btn-primary:hover {
    box-shadow: #c6f424ff 0px 0px 10px;
    border: 1px solid #c6f424ff;
    background: linear-gradient(180deg, #c6f424ff 0%, #718d16ff 100%);
    color: #000;
}

.btn-primary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.btn-logout {
    background: var(--danger);
    color: white;
}

.btn-logout:hover {
    background: #d32f2f;
}

.auth-links {
    text-align: center;
    margin-top: 20px;
    color: #ffffff;
}

.auth-links a {
    text-decoration: none;
    color: #067ce5;
    font-weight: 700;
}

.auth-link a {
    color: #067ce5;
    font-weight: 700;
}

.auth-link {
    color: #ffffff!important;
}

.auth-links a:hover {
    text-decoration: underline;
}

.error-message {
    background: #ffebee;
    color: var(--danger);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.success-message {
    background: #e8f5e9;
    color: var(--success);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

/* Dashboard */
.dashboard-header {
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
    justify-content: center;
    background: #0b0b0b;
    border: 2px solid #ff0066;
    box-shadow: #ff0066ff 0px 0px 8px !important;
    border-radius: 5px;
}

.dashboard-header p {
    color: #ffffff!important;
}

.dashboard-header h1 {
    color: #ffffff;
    margin-bottom: 10px;
    font-family: "Orbitron";
    text-transform: uppercase;
}

.dashboard-nav {
    gap: 10px;
    margin-top: 20px;
}

.dashboard-nav .btn {
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
}

.dashboard-nav .btn-primary {
    margin-top: 5px!important;
}

.btn-logout {
    height: 38.5px;
    margin-top: 5px!important;
    box-shadow: #f44336dd 0px 0px 5px;
}

.dashboard-header > div {
    flex-direction: column;
}

/* Cards */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background: #0b0b0b;
    border: 2px solid #ff0066;
    box-shadow: #ff0066ff 0px 0px 8px !important;
    border-radius: 5px;
    padding: 25px;
}

.card p {
    color: #ffffff!important;
}

.card h2 {
    font-size: 1.2em;
    margin-bottom: 15px;
    color: #000000;
}

.card-balance h2 {
    color: #ffffff;
}

.card-app-wallet .card-title {
     color: #ffffff;
}

.card-label {
     color: #ffffff!important;
}

.card-deposit .card-title {
    color: #ffffff!important;
}

.card-credit .card-title {
    color: #ffffff!important;
}

.balance-amount {
    font-size: 2.5em;
    font-weight: bold;
    color: #067ce5;
    margin: 10px 0;
}

.wallet-address {
    font-family: 'Courier New', monospace;
    background: var(--bg-light);
    padding: 12px;
    border-radius: 8px;
    font-size: 12px;
    word-break: break-all;
    margin: 15px 0;
}

.btn-copy {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%);
    box-shadow: #fdfdfd 0px 0px 2px;
    color: #000000;
    padding: 8px 15px;
    font-size: 14px;
    margin-top: 10px;
}

.btn-copy:hover {
    transform: translateY(-2px);
}

.card-section > div {
    color: #000000!important;
    font-size: 12px!important;
    margin-top: 20px;
}
.card-section > div > div > button {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
    transition: 0.3s!important;
}

.card-section > div > div > button:hover {
    transform: translateY(-2px)!important;
}

.card-section div div div button {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
    transition: 0.3s!important;
}

.card-section div div div button:hover {
    transform: translateY(-2px);
}

.card-section p {
    display: none!important;
}

#revealBtn {
   min-width: 100%;
}

#balanceBtn {
   min-width: 100%;
   background: linear-gradient(180deg, #ff0066ff 0%, #a10040ff 100%)!important;
   border: 1px solid #ff0066ff!important;
}

#balanceBtn:hover {
    box-shadow: #c6f424ff 0px 0px 10px!important;
    border: 1px solid #c6f424ff!important;
    background: linear-gradient(180deg, #c6f424ff 0%, #718d16ff 100%)!important;
    color: #000!important;
}

/* Transactions */
.transactions-list {
    background: #0b0b0b;
    border: 2px solid #ff0066;
    box-shadow: #ff0066ff 0px 0px 8px !important;
    border-radius: 5px;
    margin-bottom: 30px;
    padding: 25px;
}

.transactions-list p {
    color: #ffffff;
}

.section-title {
    color: #ffffff!important;
}

.transactions-list h2 {
    color: #ffffff!important;
}

.transaction-item {
    padding: 15px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.transaction-item:last-child {
    border-bottom: none;
}

.transaction-amount {
    font-weight: bold;
    color: #C6F424!important;
    font-size: 1.1em;
}

.transaction-from {
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    color: #ffffff;
    margin-top: 5px;
}

.transaction-date {
    font-size: 0.85em;
    color: #ffffff;
}

.transaction-link {
    color: #067ce5;
    font-weight: 700;
    transition: 0.3s;
    text-decoration: none;
    font-size: 0.9em;
}

.transaction-link:hover {
    color: #27eafa;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: #ffffff;
}

.spinner {
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-nav {
        flex-direction: column;
    }
    
    .transaction-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Background Animation */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.4), transparent),
      radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.3), transparent),
      radial-gradient(2px 2px at 40% 60%, rgba(255,255,255,.2), transparent);
    background-size: 300px 300px;
    animation: drift 20s linear infinite;
    z-index: -1;
  }
  
  @keyframes drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-300px); }
  }

/* Card */

#balanceDisplay {
    background-color: #000000!important;
}

.card-app-wallet .balance-amount {
    color: #32CD32!important;
}

.top-up-wallet {
    font-family: "Dosis"!important;
    color: #ff0066ff!important;
    font-size: 16px!important;
}



/* Referals */

.referral-hero {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

.stat-card {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

.stat-label {
    color: #ffffff!important;
}

.stat-value {
    color: #067ce5!important;
}

.referral-link-box .btn {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
    width: 200px!important;
}

.referral-link-box {
    text-align: center!important;
}

.referral-link-box .btn:hover {
    transform: translateY(-2px)!important;
}

.card h2 {
    color: #ffffff!important;
}

.ref-card-commission .btn {
    width: 200px!important;
}

.ref-card-commission {
    margin-bottom: 30px!important;
    padding-bottom: 50px!important;
}

.ref-card-recent {
    margin-bottom: 30px!important;
}

#referralTree div {
    color: #ffffff!important;
}

.ref-card-tree {
    margin-bottom: 30px!important;
}

#withdrawalHistory div {
    color: #ffffff!important;
}

/* Sign Up Page */
.info-box {
    border-color: #067ce5!important;
}

.info-box p {
    color: #000000!important;
}

.info-message p {
    color: #ffffff;
}

/* Deposit Page */
h3 {
    color: #ffffff;
}

#depositPage h1 {
    color: #ffffff;
}

#userEmailDisplay {
    color: #067ce5;
}

.deposit-box {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

.deposit-box h1 {
    color: #ffffff!important;
}

.deposit-box p {
    color: #ffffff!important;
}

.deposit-box .deposit-amount {
    color: #067ce5!important;
}

.deposit-box > div p{
    color: #067ce5!important;
}

.deposit-box a {
    color: #067ce5!important;
    font-weight: 700;
}

.status-pending {
    background: #000000!important;
    color: #ffffff!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

.status-success {
   color: #ffffff!important;
}

/* Withdrawl */
#withdrawModal > div {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

#withdrawModal h2 {
    color: #ffffff
}

#withdrawModal p {
    color: #ffffff!important;
}

#withdrawForm > div li{
    color: #000000;
}

#withdrawForm .btn {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
}

#withdrawForm .btn:hover {
    transform: translateY(-2px)!important;
}

/* Commissions */
.commission-item {
    color: #000000;
}

#appWalletTopupModal .btn {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000;
}

#appWalletTopupModal .btn:hover {
    transform: translateY(-2px);
}

#appWalletTopupModal span  {
    color: #000000!important;
}

#appWalletTopupModal > div {
    background: #000000!important;
     box-shadow: #067ce5 0px 0px 8px!important;
}

#appWalletTopupModal h2 {
    color: #ffffff!important;
}
#appWalletTopupModal label {
    color: #ffffff!important;
}

#walletAddress {
    color: #000000!important;
}

#recentCommissions div {
    color: #ffffff!important;
    background: #000000!important;
}

.commission-item {
    background: none!important;
    border: 1px solid #ffffff!important;

}

#recentCommissions strong {
      color: #ffffff!important;
}

#recentCommissions .commission-positive {
    color: #32CD32!important;
}

.level-badge {
    background-color: #067ce5!important;
}

.referral-tree-item:last-child {
    color: #000000!important;
}

.referral-tree-item strong {
    color: #ffffff!important;
}

.referral-tree-item div {
    color: #000000!important;
}

.referral-tree-item {
    background: #000000!important;
}

/* Top Up */
#topupModal > div {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

#topupModal h2 {
    color: #ffffff
}
#topupModal label {
    color: #ffffff;
}

#topupModal .btn {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000;
}

#topupModal .btn:hover {
    transform: translateY(-2px);
}

#recentCommissions div {
    color: #ffffff!important;
}


/* Media Rules */
@media only screen and (max-width: 800px) {
    .dashboard-header img {
        display: block;
        max-width:230px;
        max-height:95px;
        width: auto;
        height: auto;
    }    

    #recentCommissions div {
        display: flex;
        flex-direction: column;       
    }
    
    .level-badge {
        margin: 0!important;
    }

    .flip-card-front .flip-card-number {
        font-size: 1em!important;
    }

    .flip-card-back .flip-card-number {
        font-size: 1em!important;
    }

    .flip-card-name {
        font-size: 1em!important;
    }

}


/* Info Modal */
#balanceDisplay > div {
    color: #000000!important;
    padding: 0px!important;
}

#reapBalance div {
    color: #000000!important;
}

.apple, .google, .policy, .terms {
    border: 1px solid #ff0066ff!important;
    background: #000!important;
    color: #fff!important;
    border-radius: 5px!important;
    font-family: "Orbitron"!important;
    cursor: pointer!important;
    transition: 0.3s!important;
}

.apple:hover, .google:hover, .policy:hover, .terms:hover {
    box-shadow: #c6f424ff 0px 0px 10px!important;
    border: 1px solid #c6f424ff!important;
    background: linear-gradient(180deg, #c6f424ff 0%, #718d16ff 100%)!important;
    color: #000!important;

}

#infoModal > div {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}
#infoModal ol {
    color: #ffffff!important;
}
#infoModalContent p {
    color: #ffffff!important;
}
#infoModalTitle {
    color: #ffffff!important;
}

#topupModal > div  {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

#appWalletTopupModal  > div  {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

/* Referral Anchor */

.anchor-link {
    text-decoration: none!important;
    width: 100%!important;
    padding: 14px!important;
    border: none!important;
    border-radius: 8px!important;
    font-weight: bold!important;
    cursor: pointer!important;
    transition: all 0.3s!important;
    min-height: 50px!important;
    font-size: 15px!important;
}

.anchor-link:hover {
    transform: translateY(-2px)!important;
}

.ref-stat-referrals .stat-value {
    margin-bottom: 30px!important;
}

html {
    scroll-behavior: smooth!important;
}

/*SCROLL BARS */

.ref-card-recent {
    max-height: 500px!important;
    overflow-y: scroll!important;
}

.ref-card-withdrawals {
    max-height: 500px!important;
    overflow-y: scroll!important;
}

.transactions-list {
    overflow-y: scroll!important;
    max-height: 500px!important;
}

.ref-card-tree {
    overflow-y: scroll!important;
    max-height: 500px!important;
}

/* Scrollbar Styling */

::-webkit-scrollbar-track {
    background-color: #000000!important;
    border-radius: 10px!important;
}

::-webkit-scrollbar-thumb {
    background: #067ce5!important;
    border-radius: 10px!important;
}

::-webkit-scrollbar {
    width: 16px!important;
}

/* Admin */
#usersList strong {
    word-wrap: break-word!important;
}

.auth-container .logo h1 {
    color: #ffffff!important;
}

/* Apertum Lists */

.card-deposit ul {
    color: #ffffff!important;
    padding-left: 20px!important;
    font-size: 1em!important;
}

.home-list p {
    color: #ffffff!important;
    padding-left: 20px!important;
}

/* Password Reset */
.reset-password-link {
    color: #ffffff!important;
    margin-top: 15px;
}

.reset-password-link a {
    color: #067ce5!important;
    transition: 0.3s!important;
}

.reset-password-link a:hover {
    color: #27EAFA!important;
}

#successMessage .btn-primary {
    font-size: 12px!important;
    text-decoration: none!important;
}

/* Deposit Required Revenue Share Box */
.revenue-share-section {
    background: #000000!important;
    border-radius: 15px!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    padding: 40px!important;
    width: 100%!important;

}

.share-message {
    font-weight: 600!important;
}

.revenue-share-section .telegram-button {
    margin-top: 20px;
}

.revenue-share-section .telegram-button-text {
    color: #ffffff!important;
    font-size: 18px;
}

/* Notification Popup */

.notification-content {
    border-radius: 15px!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    padding: 0px!important;
    width: 100%!important;

}

#notificationBody {
    color: #000000!important;
}

/* Card Effects */




#cardSection > div:hover {
    box-shadow:none!important;
}

.onyx-card-section > div > div {
    padding-top: 20px;
    color: #ffffff!important;
}

#cardSection > div:hover {
    box-shadow:none!important;
}

#balanceDisplay {
    color: #ffffff!important;
    border: 1px solid #067ce5!important;
    box-shadow: #067ce5 0px 0px 8px!important;
}

#balanceDisplay div {
    color: #ffffff!important;
}


.card-section #balanceDisplay {
    aspect-ratio: 2 / 0!important;
    color: #ffffff!important;
}

.card-section #balanceDisplay:after {
    content: none !important;
    animation: none !important;
}



/* Crypto Icons */
.crypto-list {
    list-style: none;   /* Remove default bullets */
    padding: 0;
}

.crypto-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px;
}

.crypto-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Individual Icons */
.crypto-list .usdt::before {
    background-image: url('/frontend/img/icon_usdt.png');
}

.crypto-list .usdc::before {
    background-image: url('/frontend/img/icon_usdc.png');
}

.crypto-list .wusdt::before {
    background-image: url('/frontend/img/icon_aptm.png');
}

.crypto-list .aptm::before {
    background-image: url('/frontend/img/icon_aptm.png');
}

.crypto-list .waptm::before {
    background-image: url('/frontend/img/icon_aptm.png');
}




/* ============================================================
   card-flip.css  —  OnyxCard flip animation
   Place this file at: css/card-flip.css
   ============================================================ 


 ----------------------------------------------------------
   1. Flip card wrapper
   Sets the 3-D perspective for the child elements.
   Width / height here should match whatever looks right in
   the existing layout — adjust as needed.
   ---------------------------------------------------------- */
.flip-card {
    perspective: 1200px;
    width: 100%;
    height: 205px;
    margin-bottom: 15px;
    overflow: hidden!important;
}


/* ----------------------------------------------------------
   2. The inner container — this is the element that rotates
   ---------------------------------------------------------- */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;

    /* Keeps both faces in 3-D space */
    transform-style: preserve-3d;

    /* The actual animation — 0.7 s feels card-like, ease-in-out
       gives it a natural weight. Change duration here only. */
    transition: transform 0.7s ease-in-out;
}

/* Adding this class (via JS) triggers the flip */
.flip-card-inner.is-flipped {
    transform: rotateY(180deg);
}


/* ----------------------------------------------------------
   3. Shared styles for both faces
   ---------------------------------------------------------- */
.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;                        /* shorthand for top/right/bottom/left: 0 */
    border-radius: 12px;
    padding: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea, #764ba2);

    /* Each face must hide its reverse side */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */

    /* Stack content vertically */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* Prevent text selection on the sensitive back face */
    user-select: none;
    overflow: hidden;
}

/* ----------------------------------------------------------
   4. Back face — starts rotated 180° so it's hidden
   When the inner flips to 180° these cancel out → visible
   ---------------------------------------------------------- */
.flip-card-back {
    transform: rotateY(180deg);
    /* Slightly different shimmer so users notice it's the back */
    background: linear-gradient(135deg, #764ba2, #667eea);
    /* Allow text selection on the back so users can copy manually */
    user-select: text;
}

/* Backgrounds */

.flip-card-front {
    background-image: url('/frontend/img/card_front_template.png')!important;
    background-size: contain!important;        /* Fill container */
    background-position: top;   /* Center image */
    background-repeat: no-repeat!important;
    background-color: none!important;
    aspect-ratio: 1.586 / 1;
}

.flip-card-back {
    background-image: url('/frontend/img/card_back_template.png')!important;
    background-size: contain!important;        /* Fill container */
    background-position: top;   /* Center image */
    background-repeat: no-repeat!important;
    background-color: none!important;
    aspect-ratio: 1.586 / 1;
}

/* ----------------------------------------------------------
   4. Back face — starts rotated 180° so it's hidden
   When the inner flips to 180° these cancel out → visible
   ---------------------------------------------------------- */
.flip-card-back {
    transform: rotateY(180deg);
    /* Slightly different shimmer so users notice it's the back */

    /* Allow text selection on the back so users can copy manually */
    user-select: text;
}

/* ----------------------------------------------------------
   5. Card content typography
   ---------------------------------------------------------- */
.flip-card-logo {
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.15em;
    opacity: 0.85;
    text-transform: uppercase;
}

.flip-card-front .flip-card-logo {
    display: none!important;
}


.flip-card-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25em;
    letter-spacing: 0.08em;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.85em;
    gap: 10px;
    flex-wrap: wrap;
}

.flip-card-name {
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.flip-card-expiry,
.flip-card-cvv {
    opacity: 0.9;
    font-family: 'Courier New', Courier, monospace;
}


/* ----------------------------------------------------------
   6. Copy buttons on the back face
   ---------------------------------------------------------- */
.flip-card-copy-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.flip-copy-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.75em;
    cursor: pointer;
    transition: 0.2s;
}

.flip-copy-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

.flip-card-front .flip-card-number {
    margin-top: 40px!important;
    
}

.flip-card-back .flip-card-number {
    font-size: 1.75em!important;
}

.flip-card-back .flip-card-expiry {
    font-size: 1.25em!important;
}

.flip-card-back .flip-card-name {
     font-size: 1.25em!important;
}

.flip-card-back .flip-card-cvv {
    font-size: 1.25em!important;
}

/* ----------------------------------------------------------
   7. Reduced-motion accessibility
   If the user has "prefers-reduced-motion" enabled in their
   OS, skip the animation entirely — just snap to the result.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none;
    }
}

.flip-card-inner {
    position: relative;
    /* overflow: hidden removed — it breaks preserve-3d and causes the front face
       to bleed through the back during the flip animation */
}

.flip-card-front::after,
.flip-card-back::after {
    content: "";
    position: absolute;
    inset: -50%;
    pointer-events: none;

    background: linear-gradient(
        100deg,
        transparent 50%,
        rgba(255,255,255,0.15) 50%,
        transparent 70%
    );

    transform: rotate(20deg);
    animation: lightSweep 2s infinite;
}

@keyframes lightSweep {
    0%   { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(100%) rotate(25deg); }
}

/* Dual Card Updates */

#rainFlipCardInner .flip-card-front {
    background-image: url('/frontend/img/card_front_template_pink.png')!important;
    background-size: contain!important;        /* Fill container */
    background-position: top;   /* Center image */
    background-repeat: no-repeat!important;
    background-color: none!important;
    aspect-ratio: 1.586 / 1;
}

#rainFlipCardInner .flip-card-back {
    background-image: url('/frontend/img/card_back_template_pink.png')!important;
    background-size: contain!important;        /* Fill container */
    background-position: top;   /* Center image */
    background-repeat: no-repeat!important;
    background-color: none!important;
    aspect-ratio: 1.586 / 1;
}

.card-selector-btn {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
    border: none!important;

}

.card-selector-btn.active {
    background-color: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    border: 1px solid #067ce5!important;
}

#rainFlipCardInner .flip-card-front {
    background-image: url('/frontend/img/card_front_template_pink.png')!important;
    background-size: contain!important;        /* Fill container */
    background-position: top!important;   /* Center image */
    background-repeat: no-repeat!important;
    background-color: none!important;
    aspect-ratio: 1.586 / 1;
}

#rainFlipCardInner .flip-card-back {
    background-image: url('/frontend/img/card_back_template_pink.png')!important;
    background-size: contain!important;        /* Fill container */
    background-position: top!important;   /* Center image */
    background-repeat: no-repeat!important;
    background-color: none!important;
    aspect-ratio: 1.586 / 1;
}

#rainBalanceDisplay {
    background-color: #000000!important;
    color: #ffffff!important;
    border: 1px solid #067ce5!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    padding: none!important;
}

#rainBalanceDisplay > div {
    padding-top: 0px!important;
    color: #ffffff!important;
}

#rainBalanceValue div {
    color: #ffffff!important;
}

.card-selector .active {
    background: #000000!important;
    border: 2px solid #067ce5!important;
    color: #ffffff!important;
}

.card-selector-btn {
    border: 2px solid #ffffff!important;
}

/* Rain OTP */

#rainOtpWaiting {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    border: 1px solid #067ce5!important;
    font-size: 16px!important;
}

#rainOtpWaiting button {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
    border: none!important;
    transition: 0.3s!important;
}

#rainOtpWaiting button:hover {
    transform: translateY(-2px);
}

.rain-otp-display {
    background: #000000!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    border: 1px solid #067ce5!important;
    font-size: 16px!important;
}

.rain-otp-display button {
    background: linear-gradient(180deg, #fdfdfd 0%, #757679 100%)!important;
    box-shadow: #fdfdfd 0px 0px 2px!important;
    color: #000000!important;
    border: none!important;
    transition: 0.3s!important;
}

#rain-otp-display button:hover {
    transform: translateY(-2px);
}


/* Admin Dashbard */

.admin-dash-box {
    min-width: 100%!important
}

/* Pop Up Notification */

#notificationBody {
    border-radius: 15px!important;
    box-shadow: #067ce5 0px 0px 8px!important;
    padding: 15px!important;
    width: 90%!important;
    margin: 20px!important;
    text-align: center!important;
}

.notification-content {
    padding: 30px!important;
    width: 100%!important;
    box-shadow: #067ce5 0px 0px 8px !important;
    padding: 0px !important;
}

.notification-icon {
    background: #ffffff!important;
}


.notification-close-btn {
    margin: 10px!important;
}

.notification-header {
    text-align: center!important;
}

/* Button Flags */
.flag-icon {
    width: 20px!important;
    height: 14px!important;
    object-fit: cover!important;
    border-radius: 2px!important;
}

.card-selector-btn {
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}






/* HIDE WALLETS AND REVENUE SHARE */
.card-address {
   display:none!important; 
}

.card-action {
    display:none!important; 
}

.referral-hero {
   display: none!important;
}