/* ============================== */
/* Root Variables - Theme Colors */
/* ============================== */

:root {
  /* Pagination Colors */
  --pagination-btn-bg: #f0f0f0;        /* Default pagination button background */
  --pagination-btn-hover-bg: #d9d9d9;  /* Hover state for pagination buttons */

  /* Button Colors */
  --btn-primary-bg: #e4bc1c;           /* Primary button background (yellow) */
  --btn-primary-bg-hover: #bf9d17;     /* Hover state for primary button */

  /* Text Colors */
  --text-dark: #1a1a1a;                /* Primary dark text */
  --text-muted: #888;                  /* Muted text for less emphasis */
  --text-mid: #333;                    /* Medium emphasis text */
  --text-light: #444;                  /* Light secondary text */

  /* Background Colors */
  --neutral-bg: #fafafa;               /* General neutral background */
  --white-bg: #ffffff;                 /* Main white background */
  --color-grey: #ccc;

  /* Brand / Route Colors */
  --route-yellow: #e4bc1c;             /* Brand yellow */
  --route-yellow-dark: #bf9d17;        /* Dark variant of brand yellow */
  --route-highlight: #e4bc1c;          /* Highlight accent color */

  /* Input & Form */
  --input-bg-default: #f5f5f5;                /* Light Gray */
  --input-bg-secondary: #eaeaea;              /* Slightly Darker Gray */
  --input-border: #cccccc;                    /* Standard Gray Border */
  --input-focus-outline: #999999;             /* Soft Focus Gray */
}

/* ============================== */
/* MARK AS SEEN BTNS              */
/* ============================== */

.body-dark.mode .body {
  background-color: #2a2a2a !important;
}

#accountOrderHistoryContainer {
  margin-top: 1rem;
}

.markSingleSeenBtn,
#markWinHistoryViewedBtn {
  margin-top: 0.5em;
  padding: 0.4em 1em;
  font-size: 0.9rem;
  border: 1px solid var(--btn-primary-bg);
  background-color: var(--btn-primary-bg);
  color: white;
  font-weight: 00;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  user-select: none;
}

.markSingleSeenBtn:hover:not(:disabled),
#markWinHistoryViewedBtn:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
  border: 1px solid var(--btn-primary-bg-hover);
}

.markSingleSeenBtn:disabled,
#markWinHistoryViewedBtn:disabled {
  background-color: #c0c0c0;
  border-color: #c0c0c0;
  cursor: default;
  color: #6c757d;
}

/* If you want to hide the button completely when viewed, instead of disabling */
.markSingleSeenBtn.viewed-hidden {
  display: none;
}

/* ============================== */
/* Layout - Wallet Tab            */
/* ============================== */

.account-balance-container {
  height: fit-content;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

/* Add Balance Section */
.account-wallet-add-balance-container {
  flex: 1 1 45%;
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #e1e1e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

.account-wallet-add-balance-title {
  font-size: 1.5rem;
  color: var(--text-mid);
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--route-highlight);
  padding-bottom: 0.5rem;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.account-wallet-add-balance-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}

.account-wallet-add-balance-input input {
  resize: none;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background-color: var(--input-bg-default);
  transition: border-color 0.3s ease;
}

.account-wallet-add-balance-input input:focus {
  border-color: var(--btn-primary-bg);
  outline: none;
}

.account-add-balance-btn {
  padding: 0.75rem;
  font-size: 1rem;
  background-color: var(--btn-primary-bg);
  color: white;
  border: 1px solid var(--btn-primary-bg);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 125px;
}

.add-balance-btn:hover {
  background-color: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}

/* Available Balance Section */
.account-wallet-balance-container,
.account-credit-balance-container {
  flex: 1 1 45%;
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #e1e1e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: fit-content;
}

.account-wallet-balance-title,
.account-credit-balance-title {
  font-size: 1.5rem;
  color: var(--text-mid);
  font-weight: 600;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--route-highlight);
  padding-bottom: 0.5rem;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.account-wallet-balance,
.account-credit-balance {
  font-size: 2rem;
  color: var(--text-dark);
  font-weight: bold;
  background-color: var(--white-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  text-align: center;
}

/* Container Styles */
.account-transaction-history-container {
  width: 100%;
  margin: 20px auto;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.account-transaction-history-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.account-transaction-history {
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual Transaction */
.transaction-item {
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 5px solid transparent;
  background-color: #f5f5f5;
  border: 1px solid #e1e1e1;
  transition: background-color 0.3s, box-shadow 0.3s;
  gap: 1rem;
}

/* Content inside each transaction */
.transaction-item div {
  margin: 4px 0;
}

/* Bold labels */
.transaction-item b {
  color: #222;
  margin-right: 6px;
}

/* Color-coded balance (topup or purchase) */
.transaction-item .balance-topup {
  color: #2e7d32; /* green */
  font-weight: 600;
}

.transaction-item .balance-purchase {
  color: #c62828; /* red */
  font-weight: 600;
}

.transaction-item .balance-refund {
  color: #2e7d32; /* green */
  font-weight: 600;
}


/* Badge for Type */
.transaction-item .type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: capitalize;
  background-color: #ddd;
  color: #333;
}

.transaction-item .type-topup {
  background-color: #d0f0d4;
  color: #2e7d32;
}

.transaction-item .type-purchase {
  background-color: #ffd6d6;
  color: #c62828;
}

.transaction-item .type-refund {
  background-color: #d0f0d4;
  color: #2e7d32;
}

/* Date */
.transaction-item .transaction-date {
  font-size: 0.85rem;
  color: #666;
}

.account-wallet-transaction-history,
.account-credit-transaction-history {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.transaction-id {
  font-size: 0.8rem;
  color: #555;
  margin-top: 6px;
  word-break: break-all;
  opacity: 0.85;
}

.transaction-id code {
  background-color: #f1f1f1;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}

/* Order History - Overhauled */
.account-order-card {
  border-radius: 15px;
  padding: 20px 24px;
  margin-bottom: 20px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.3s ease;
}

.account-order-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.order-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #374151;
  margin-bottom: 16px;
  gap: 8px;
}

.order-meta > div {
  flex: 1 1 30%;
  min-width: 150px;
}

.ticket-list {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 16px;
}

.ticket-item {
  background: #fff;
  margin-bottom: 12px;
  display: flex;
  flex-direction: row;
}

.ticket-image {
  width: 100px;
  height: auto;
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.ticket-type {
  font-weight: 600;
  font-size: 0.8rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.ticket-title {
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 6px;
}

.ticket-quantity,
.ticket-numbers {
  font-size: 0.875rem;
  color: #374151;
  margin-top: 4px;
}

.ticket-numbers {
  font-style: italic;
  color: #4b5563;
}

/* ============================== */
/* Layout - Account Page         */
/* ============================== */

.win-image-container {
  height: 150px;
  width: fit-content;
}

.win-image-container img {
  height: 150px;
  width: fit-content;
}

img.entry-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;  /* instead of cover */
  border-radius: 6px;
  display: block;
}

.win-header {
  display: flex;
  flex-direction: column;
  border-bottom: 0.15rem dotted var(--btn-primary-bg);
}

.jackpot-amount {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2rem;
  font-weight: 700;
  color: #e4bc1c;
  display: inline-block;
  padding-right: 1rem;
  transition: color 1.5s ease;

  /* Elegant gold glow */
  text-shadow:
    0 0 2px rgba(228, 188, 28, 0.6),
    0 0 8px rgba(228, 188, 28, 0.4),
    0 0 12px rgba(255, 236, 150, 0.3);
  
  /* Optional: Subtle gradient gold text effect */
  background: linear-gradient(120deg, #e4bc1c, #fff3a0, #e4bc1c);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#darkModeToggle,
a#logoutBtn__header {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

#logoutBtn__header p {
  font-size: medium;
  font-weight: 800;
  color: black;
  margin-left: 10px;
}

#darkModeToggle p {
  font-size: medium;
  font-weight: 800;
  color: black;
  margin-left: 10px;
}

div.account-tools {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 15px;
  padding: 10px 10px;
}

#darkModeToggle,
#logoutBtn__header {
  background-color: #e4bc1c;
  border-radius: 10px;
  padding: 5px 10px;
}

#darkModeToggle:hover,
#logoutBtn__header:hover {
  opacity: 0.8;
}

.account-header {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  padding: 0px 20px;
  margin-bottom: 1rem;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.account-title {
  text-align: center;
  font-size: 2.25rem;
  color: var(--text-dark);
  font-weight: 600;
}

.account-main {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--neutral-bg);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.account-container {
  background-color: var(--white-bg);
  padding: 2rem;
  width: 100%;
  max-width: 1000px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for elevation */
}

.account-tabs-container {
  display: flex;
  flex-direction: row; /* Now side by side */
  gap: 1rem; /* Space between tabs and content */
  /* padding: 20px 20px; */
  border-radius: 5px;
  border: 1px solid #e0e0e0;
}

.empty-state {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  position: relative;
  transition: color 0.3s ease;
}

.entry-status {
  font-size: 0.85em;
  font-weight: bold;
}

.entry-status.open {
  color: green;
}

.entry-status.drawn {
  color: red;
}

/* ============================== */
/* Tabs Navigation               */
/* ============================== */

#changeDetailsContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 20px;
}

#changeEmailContainer,
#changeUsernameContainer {
  width: 100%;
}

/* Optional: Hide content by default */
.toggle-content {
  display: none;
  margin-top: 1rem;
}

.change-password-container {
  margin-top: 1rem;
  cursor: pointer;
}

.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1rem;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  background-color: #fafafa !important;
  transition: border-color 0.3s ease;
}

.account-toggle-password {
  padding: 5px 10px;
  background-color: white;
}

.password-wrapper input {
  flex: 1;
  padding-right: 40px; /* space for the eye icon */
}

.personal-sub-tab-button {
  background: white;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.personal-sub-tab-button.active {
  color: var(--btn-primary-bg);
  font-weight: 600;
  border-bottom: 3px solid #e4bc1c;
  border-radius: 0px;
}
.personal-sub-tab-content {
  display: none;
  margin-top: 20px;
}
.personal-sub-tab-content.active {
  display: block;
}

.sub-tab-buttons {
  border-bottom: 1px solid #ccc; /* Light grey vertical line */
  margin-bottom: 1rem;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#accountTabWallet,
#accountTabCredit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

#accountTabWalletBalance,
#accountTabCreditBalance {
  background-color: #e4bc1c;
  border-radius: 15px;
  padding: 3px 10px;
  font-size: 0.8rem;
}

#purchases,
#win-history {
  /* padding: 20px 20px;
  border: 1px solid #e0e0e0; */
  border-radius: 5px;
}

#exclusionDays {
  padding: 8px;
  font-size: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-grey);
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
}

/* Apply vertical spacing between internal tab sections */
.internal-tab-password-content,
.internal-tab-email-content,
.internal-tab-newsletter-content,
.internal-tab-self-exclusion-content,
.internal-tab-spend-limit-content {
  margin-bottom: 20px;
  margin-top: 10px;
}

.internal-tab-content,
.personal-sub-tab-content {
  display: none;
}

.internal-tab-content.active,
.personal-sub-tab-content.active {
  display: block; 
}

.internal-tabs {
  flex-shrink: 0;
  display: flex;
  flex-direction: row; /* Stack vertically */
  gap: 0.5rem;
  padding: 0px 0px;
  border-bottom: 1px solid #ccc; /* Light grey vertical line */
  margin-bottom: 1rem;
  /* border: 1px solid #e0e0e0; */
}

.internal-tabs.active {
  border-bottom: 3px solid #e4bc1c; /* Light grey vertical line */
}

/* Make sure tab buttons fit neatly */
.internal-tab-button {
  background: white;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.internal-tab-button.active {
  color: var(--btn-primary-bg);
  font-weight: 600;
  border-bottom: 3px solid #e4bc1c; /* Light grey vertical line */
  border-radius: 0px;
} 
/* Winner badge positioning */
.account-winner-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #facf20;
  color: black;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 12px;
  z-index: 10;
}

.account-tab-winner-badge,
.account-internal-tab-winner-badge {
  background-color: #facf20;
  color: black;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 12px;
  z-index: 10;
}

/* Sidebar tab list */
.account-tabs {
  flex-shrink: 0;
  display: flex;
  flex-direction: column; /* Stack vertically */
  gap: 1rem;
  width: 260px; /* Fixed width for sidebar */
  padding: 20px 10px;
  border-right: 1px solid #ccc; /* Light grey vertical line */
  padding-right: 1rem;          /* Space between the border and content */
  /* border: 1px solid #e0e0e0; */
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.account-tabs a,
.account-tabs a:visited,
.account-tabs a:focus {
  color: inherit !important;      /* Ensure no purple */
  text-decoration: none;          /* Remove underline if any */
  outline: none;                  /* Remove default focus ring */
  align-items: center;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

/* Optional: add your own focus style for accessibility */
.account-tabs a:focus-visible {
  outline: 2px solid #999;        /* Soft custom focus */
  outline-offset: 2px;
}

/* Optional: add smooth color transition to reduce flash */
.account-tabs a {
  transition: color 0.15s ease-in-out;
}

/* Make sure tab buttons fit neatly */
.account-tab-button {
  background: #e0e0e0;
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.3s, color 0.3s;
  text-decoration: none;
}

.account-tab-button:hover {
  background-color: #ccc;
}

.account-tab-button.active {
  /* background-color: var(--btn-primary-bg); */
  color: black;
  font-weight: 700;
  border-bottom: 3px solid var(--btn-primary-bg);
  background-color: #f5f1dc;
}

.tab-title {
  /* border-bottom: 3px solid #e4bc1c; */
  /* margin-bottom: 10px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-right: 10px;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.support-tab-title,
.wallet-tab-title,
.credit-tab-title {
  /* border-bottom: 3px solid #e4bc1c; */
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-right: 10px;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.order-history-tab-title {
  /* border-bottom: 3px solid #e4bc1c; */
  margin-bottom: 10px;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
  padding-right: 10px;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#changePasswordToggle,
#changePasswordContainer {
  background-color: #e0e0e0;
  padding: 5px 10px;
  border-radius: 5px;
  margin-bottom: 0px !important;
}

#passwordForm {
  padding: 0px 20px;
  padding-bottom: 20px;
}

.tab-title h3 {
  margin: 0;
  font-size: 1.5rem;
}

.draws-tickets-tab-title {
  /* border-bottom: 3px solid #e4bc1c; */
  /* margin-bottom: 20px; */
  display: flex;
  flex-wrap: wrap;
  max-width: 200vh;
  justify-content: space-between;
  flex-direction: row;
  padding-right: 10px;
}

#rafflesTicketsList,
#competitionsTicketsList,
#jackpotsTicketsList,
#rafflesWinsList,
#competitionsWinsList,
#jackpotsWinsList {
  padding-top: 20px;
}

/* ============================== */
/* Tab Content                   */
/* ============================== */

.account-tabs-content {
  margin-top: 1rem;
}

/* Tab content area */
.account-tab-content {
  flex: 1;
  padding: 20px 10px;
  border-radius: 15px;
  padding-right: 20px;
  /* border: 1px solid #e0e0e0; */
}

.account-tab-content.active {
  display: block;
}

.account-tab-content h2,
.account-tab-content h3 {
  font-size: 1.5rem;
  /* margin-bottom: 0.5rem; */
  color: var(--text-mid);
}

.account-tab-content p {
  margin: 0.5rem 0;
  color: var(--text-light);
}

.note {
  color: var(--text-muted);
  font-style: italic;
}

.account-details-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1rem;
}

.account-info,
.account-stats {
  flex: 1 1 45%;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e1e1e1;
}

.account-info {
  display: flex;
  flex-direction: row;
  /* justify-content: space-evenly; */
  gap: 70px;
}

.account-stats {
  display: flex;
  justify-content: left;
}

.account-stats-grid {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

#accountEmail {
  display: flex;
  flex-wrap: wrap;
}

.account-info h4,
.account-stats h4 {
  margin-bottom: 1rem;
  color: var(--text-dark);
  font-size: 1.25rem;
  border-bottom: 2px solid var(--route-highlight);
  padding-bottom: 0.5rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 0.5rem 2rem;
  align-items: center;
  font-size: 1.25rem;
}

.stat-heading {
  text-align: center;
  font-weight: 700;
  color: var(--text-light);
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 0.4rem;
}

.stat-label {
  font-weight: 600;
  color: var(--text-mid);
  text-align: right;
  padding-right: 0.5rem;
}

.stat-value {
  text-align: center;
  font-weight: 700;
  color: var(--text-dark);
  border-radius: 6px;
  padding: 0.3rem 0;
}

.btn-unsubscribe {
  font-size: 0.75rem;
  background: #d40000;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.btn-unsubscribe:hover,
.btn-subscribe:hover {
  opacity: 0.85;
}

.btn-subscribe {
  font-size: 0.75rem;
  background: #4caf50;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* ============================== */
/* Form Styles                   */
/* ============================== */

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

form input {
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease;
}

#currentPassword,
#newPassword,
#confirmNewPassword {
  border: none !important;
}

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

form button {
  padding: 0.75rem;
  font-size: 1rem;
  background-color: var(--btn-primary-bg);
  color: var(--white-bg);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

form button:hover {
  background-color: var(--btn-primary-bg-hover);
  border: none;
}

/* ============================== */
/* Search Bar    */
/* ============================== */

.search-bar-container {
  margin: 0;
  width: auto;
  /* margin-bottom: 0.5rem; */
}

.search-wrapper {
  display: flex;
  flex-direction: row;
  gap: 10px;
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.search-wrapper input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

#accountWinsRafflesSearch,
#accountWinsCompetitionsSearch,
#accountWinsJackpotsSearch,
#accountOrdersSearch {
  padding: 12px 20px;
  width: 100%;
  /* max-width: 500px; */
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background-color: var(--input-bg-default);
  transition: all 0.3s ease-in-out;
}

#accountTicketsRafflesSearch,
#accountTicketsCompetitionsSearch,
#accountTicketsJackpotsSearch {
  padding: 12px 20px;
  width: 50%;
  /* max-width: 500px; */
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background-color: var(--input-bg-default);
  transition: all 0.3s ease-in-out;
}

#showDrawnCheckboxLabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#accountTicketsRafflesSearch:focus,
#accountTicketsCompetitionsSearch:focus,
#accountTicketsJackpotsSearch:focus,
#accountWinsRafflesSearch:focus,
#accountWinsCompetitionsSearch:focus,
#accountWinsJackpotsSearch:focus,
#accountOrdersSearch:focus {
  border-color: var(--btn-primary-bg);
  outline: none;
}

/* ============================== */
/* Entries - Tickets & Wins      */
/* ============================== */

.ticket-entry {
  background: #f1f1f1;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  /* border: 1px solid var(--form-border); */
}

.win-entry {
  background: #fefefe;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid var(--form-border);
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Alert banner - positioned top right */
.win-entry::before {
  content: "Recent Winner!";
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--route-highlight, #4caf50);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.win-entry.viewed::before {
  content: none;
}

.ticket-entry strong,
.win-entry strong {
  color: var(--text-mid);
  font-weight: 900;
  font-size: large;
}

.ticket-entry small {
  color: var(--text-muted);
  font-size: small;
  font-style: italic;
}

/*
.win-title {
  border-bottom: 0.15rem dotted var(--btn-primary-bg);
}
*/

.win-id-tag {
  font-size: 0.85rem;
  color: #666;
  margin-left: 10px;
}

/* ============================== */
/*          Newsletter            */
/* ============================== */

.newsletter-item {
  background: #fefefe;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid var(--form-border);
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.newsletter-title {
  border-bottom: 1px solid var(--form-border);
}

.newsletter-description {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.account-tab-content h4 {
  font-size: 1.5rem;
  color: var(--text-mid);
}

/* ============================== */
/* Raffle Ticket Group Dropdown  */
/* ============================== */

.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-grow: 1; /* ensures it takes available space next to image/arrow */
}

.entry-info {
  display: flex;
  flex-direction: column;
}

.entry-title {
  font-weight: bold;
  font-size: 1rem;
}

.entry-id {
  font-size: 0.9rem;
  color: #666;
}

.entry-arrow {
  display: flex;
  align-items: center;
  padding-left: 1rem;
}

.dropdown-arrow {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.entry-toggle.open .dropdown-arrow {
  transform: rotate(180deg); /* Flip arrow on open */
}

/* Wrap image and arrow in this container on the right */
.entry-media {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Style for ticket image */
.entry-icon {
  height: 40px;
  width: 40px;
  border-radius: 6px;
  object-fit: cover;
}

.entry-group {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  background-color: #fafafa;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-bottom: 1px solid #e4bc1c;
}

.entry-toggle {
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: space-between;
  border-radius: 15px;
  border: none;
}

.entry-toggle i {
  font-size: small;
  font-weight: 100;
  color: #666;
}

.entry-tickets {
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  overflow-y: auto;
  max-height: 400px;
}

.entry-tickets .ticket-entry {
  background: #fafafa;
  margin-bottom: 0.75rem;
  border-left: 4px solid var(--route-highlight);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.support-message {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 6px;
  background-color: #fafafa;
  word-wrap: break-word;         /* Ensures long words break */
  overflow-wrap: break-word;     /* Modern equivalent */
  white-space: normal;           /* Ensures text wraps normally */
}

.support-message-header {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.support-message-body p {
  margin: 6px 0;
  white-space: pre-wrap;         /* Preserves newlines and wraps text */
  word-break: break-word;        /* Breaks long words if needed */
}

.support-status {
  font-style: italic;
  margin-left: 8px;
}

.support-status.open {
  color: green;
}

.support-status.closed {
  color: gray;
}

.status-filter-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  gap: 6px;
  user-select: none;
}

#support-list {
  margin-top: 1rem;
}

[class$="-search"] {
  padding: 12px 16px;
  width: 250px;
  border: 1px solid var(--color-grey);
  border-radius: 8px;
  font-size: 1rem;
  /* margin-bottom: 10px; */
}

input[type="checkbox"] {
  margin-top: 3px;
    width: 40px;
    height: 40px;
    accent-color: #e4bc1c;
}

.support-message-header h5 {
  font-size: 1.25rem;
}
.support-message-header h6 {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
}

.support-message-body i {
  color: var(--text-muted);
}

/* ============================== */
/* Pagination Controls           */
/* ============================== */

#accountTicketsRafflesSortOrder,
#accountTicketsCompetitionsSortOrder,
#accountTicketsJackpotsSortOrder,
#accountWinsRafflesSortOrder,
#accountWinsCompetitionsSortOrder,
#accountWinsJackpotsSortOrder,
#accountOrdersSortOrder,
#walletTypeFilter,
#walletDateSort,
#storeCreditTypeFilter,
#storeCreditDateSort {
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--color-grey);
  border-radius: 8px;
  background: var(--color-light-grey);
  transition: border-color 0.3s;
}

.sort-controls {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* aligns the entire container to the right */
  align-items: center;
  gap: 1rem; /* spacing between the selects */
  margin-bottom: 1rem; /* optional: spacing from the elements below */
}

.sort-controls-type,
.sort-controls-date {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pagination-controls {
  text-align: center;
  margin-top: 1.5rem;
}

.page-btn {
  padding: 0.6rem 1.1rem;
  border-radius: 50px;
  border: none;
  background-color: var(--pagination-btn-bg);
  font-weight: 500;
  transition: background 0.3s ease;
  margin: 5px;
}

.page-btn img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.page-btn:hover:not(:disabled):not(.active) {
  background-color: var(--pagination-btn-hover-bg);
  cursor: pointer;
}

.page-btn.active {
  background-color: var(--btn-primary-bg) !important;
  color: var(--white-bg);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.raffles-tickets-spinner-container,
.competitions-tickets-spinner-container,
.jackpots-tickets-spinner-container,
.raffles-wins-spinner-container,
.competitions-wins-spinner-container,
.jackpots-wins-spinner-container,
.order-history-spinner-container,
.account-wallet-transaction-spinner-container,
.account-store-credit-transaction-spinner-container {
  display: flex;
  justify-content: center;
}

/* Wrapper ensures spinner is centered like the grid would be */
.stats-loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 10px; /* mimic the height the grid usually takes */
  width: 100%;
}

#accountLoadingSpinner {
  display: none;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

#accountLoadingSpinner.visible {
  display: block;
  text-align: center;
}

.account-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 4px solid #ccc;
  border-top-color: #e4bc1c;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 20px auto;
}

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

.account-spinner.hidden {
  display: none;
}

.account-info-left h4 strong,
.account-info-right h4 strong,
.account-stats-grid h4 strong,
.draws-tickets-tab-title h3 b,
.personal-details-sub-tab-title,
form#usernameForm label,
form#emailForm label,
form#passwordForm label,
.account-toggle-password {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-value {
  display: flex;
  align-items: center;
}

.account-info-left {
  display: flex;
  flex-direction: column;
}

.account-info-right {
  display: flex;
  flex-direction: column;
}

/* ============================== */
/* Animations                    */
/* ============================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================== */
/* Responsive Design             */
/* ============================== */

@media (max-width: 1024px) {
  .account-tab-button {
    flex: 1 1 100%;
    text-align: center;
  }

  .account-tools {
    flex-direction: column;
  }

  form input,
  form button {
    width: 100%;
  }

  .btn-subscribe,
  .btn-unsubscribe {
    width: 100%;
    font-size: 1rem;
  }

  #winSearch,
  #accountTicketsRafflesSearch,
  #accountTicketsCompetitionsSearch,
  #accountTicketsJackpotsSearch,
  #accountWinsRafflesSearch,
  #accountWinsCompetitionsSearch,
  #accountWinsJackpotsSearch {
    width: 100%;
  }

  .account-balance-container {
    display: flex;
    flex-direction: column;
  }

  .account-wallet-add-balance-input {
    display: flex;
    flex-direction: column;
  }

  .account-add-balance-btn {
    width: 100%;
  }

  .account-tabs-container {
    display: flex;
    flex-direction: column;
  }

  .account-tabs {
    width: auto;
  }

  #accountTabWallet,
  #accountTabCredit {
    justify-content: center;
    gap: 10px;
  }
  .account-tab-content {
    padding: 20px 20px;
  }

  .account-main {
    padding-top: 150px;
  }
}

@media (max-width: 600px) {
  .account-info,
  .account-stats {
    flex: 1 1 100%;
    padding: 1rem;
    margin-bottom: 1rem; /* adds spacing between stacked items */
  }

  .win-entry,
  .win-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .win-entry {
    padding-top: 2.5rem !important;
  }

  .win-entry::before {
    top: 0.5rem;
    right: 0.5rem;
  }

  .win-title {
    text-align: center;
    max-width: 200px;
  }
}

@media (max-width: 450px) {
  .account-stats,
  .stats-grid {
    flex: 1 1 100%;
    margin-bottom: 0.75rem;
    font-size: 0.8rem !important;     /* Slightly smaller font size */
    box-shadow: none;      /* Optional: remove shadow for simplicity */
    border-radius: 8px;    /* Slightly smaller radius */
  }

  .account-info {
    font-size: 1rem !important;
  }
}

@media (max-width: 600px) {
.account-info,
  .account-stats,
  .stats-grid {
    flex: 1 1 100%;
    margin-bottom: 0.75rem;
    font-size: 1.0rem;     /* Slightly smaller font size */
    box-shadow: none;      /* Optional: remove shadow for simplicity */
    border-radius: 8px;    /* Slightly smaller radius */
  }
}

@media (max-width: 1024px) {
  .account-main {
    padding: 0;
  }

  .account-tabs {
    border: none;
  }

  .account-tabs-container {
    border: none;
    background-color: white;
    box-shadow: none;
  }

  .ticket-search {
    width: 100%;
    margin-left: 0px;
  }

  .account-header h1 {
    justify-content: center;
    text-align: center;
  }

  .account-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .account-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
  }

  .account-info-right p {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .account-info-right h4 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

    .account-info-left p {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stats-grid {
    gap: 0px;
  }

  .account-info-left h4 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tab-title {
    justify-content: center;
    margin-bottom: 0px;
    gap: 5px;
    text-align: center;
  }

  .wallet-tab-title,
  .credit-tab-title {
    gap: 10px;
    justify-content: center;
  }

  .account-tab-content h3 {
    font-size: 2rem;
  }

  #changePasswordToggle {
    padding: 5px 5px;
  }

  .sub-tab-buttons,
  .sort-controls,
  .search-wrapper,
  #changeDetailsContainer,
  .internal-tabs {
    display: flex;
    flex-direction: column;
  }

  .internal-tabs,
  .sub-tab-buttons {
    border-bottom: none;
  }

  .personal-details-sub-tab-title {
    text-align: center;
  }

  .personal-sub-tab-button,
  .internal-tab-button {
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid #ccc;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .draws-tickets-tab-title {
    justify-content: center !important;
  }

  .order-history-tab-title {
    justify-content: center !important;
  }

  .search-wrapper,
  .sort-controls select,
  input#accountOrdersSearch,
  select#accountOrdersSortOrder {
    width: 100%;
  }
}

input#contactMessageSearch.ticket-search:focus {
  border: 1px solid var(--color-grey);
  border-color: var(--btn-primary-bg);
  outline: none;
}