/* --- DARK MODE THEME --- */

/* 1. Define the color variables for the dark theme */
body[data-theme='dark'] {
    --primary-color: #ffffff;
    --primary-dark: #e0e0e0;
    --secondary-bg: #121212;
    --card-bg: #1e1e1e;
    --border-color: #2c2c2c;
    --text-dark: #ffffff;
    --text-light: #a0a0a0;
    /* We keep the green and red for consistency */
}

/* 2. Apply the new variables to the core elements */
/* By adding body[data-theme='dark'] we make these rules very specific */

body[data-theme='dark'] .dashboard-page {
    background-color: var(--secondary-bg);
    color: var(--text-dark);
}

body[data-theme='dark'] section.card.balance-card {
  --card-bg: transparent; /* Or the color you want for this card */
}

body[data-theme='dark'] .mobile-header .user-info h1,
body[data-theme='dark'] .desktop-header h1 {
    color: var(--text-dark);
}

body[data-theme='dark'] .mobile-header .user-info p,
body[data-theme='dark'] .balance-header p,
body[data-theme='dark'] .port-label,
body[data-theme='dark'] .quick-action-label,
body[data-theme='dark'] .activity-details span {
    color: var(--text-light);
}

body[data-theme='dark'] .balance-card .balance-amount p {
    color: var(--text-dark);
}

body[data-theme='dark'] .bottom-nav {
    background-color: rgba(30, 30, 30, 0.9);
    border-top-color: var(--border-color);
}

body[data-theme='dark'] .nav-link {
    color: var(--text-light);
}

body[data-theme='dark'] .nav-link.active {
    color: var(--primary-color);
}

body[data-theme='dark'] .nav-link-primary {
    background-color: var(--primary-color);
    color: #1e1e1e; /* Black icon on white button */
}

body[data-theme='dark'] .sidebar-nav {
    background-color: var(--card-bg);
    border-right-color: var(--border-color);
}

body[data-theme='dark'] .sidebar-logo,
body[data-theme='dark'] .sidebar-logout button {
    color: var(--text-dark);
}
body[data-theme='dark'] .sidebar-link {
    color: var(--text-light);
}
body[data-theme='dark'] .sidebar-link.active {
    background-color: var(--primary-color);
    color: #1e1e1e; /* Black text on white active button */
}

body[data-theme='dark'] .btn-secondary {
    background-color: #333333;
    color: var(--text-dark);
}

body[data-theme='dark'] .activity-item {
    border-bottom-color: var(--border-color);
}

body[data-theme='dark'] .modal-content {
    background-color: var(--card-bg);
}

body[data-theme='dark'] .modal-header {
    border-bottom-color: var(--border-color);
}

body[data-theme='dark'] .modal-header h2 {
    color: var(--text-dark);
}

body[data-theme='dark'] .modal-close-button {
    color: var(--text-light);
}

body[data-theme='dark'] #wallet-withdraw-btn {
    background-color: #333333; /* The visible dark grey of the Unstake button */
    color: var(--text-dark);      /* Ensures the text stays white */
    border: none;                 /* Explicitly remove any border that might appear */
}


/* --- DARK MODE POLISH & FIXES --- */

/* 1. Fix for Form Inputs, Textareas, and Selects */
body[data-theme='dark'] .form-group input,
body[data-theme='dark'] .form-group textarea,
body[data-theme='dark'] .form-group select,
body[data-theme='dark'] .chat-input-form input {
    background-color: #2c2c2c; /* A dark grey, not pure black */
    border-color: #3a3a3a;     /* A slightly lighter border */
    color: var(--text-dark);      /* White text */
}

/* Change placeholder text color for dark inputs */
body[data-theme='dark'] .form-group input::placeholder,
body[data-theme='dark'] .form-group textarea::placeholder {
    color: #777;
}

/* 2. Fix for Buttons */
/* Primary Buttons (Stake, Play Now, Mint, etc.) */
body[data-theme='dark'] .btn-primary {
    background-color: var(--primary-color); /* White background */
    color: #1e1e1e;                         /* Black text for high contrast */
}
body[data-theme='dark'] .btn-primary:hover {
    background-color: var(--primary-dark);  /* Light grey on hover */
}

/* Secondary Buttons (Unstake, Mint Another, etc.) */
body[data-theme='dark'] .btn-secondary {
    background-color: #333333;
    color: var(--text-dark);
}

/* --- FIX FOR PROFILE PICTURE UPLOAD ICON IN DARK MODE --- */
body[data-theme='dark'] .profile-picture-upload-btn {
    color: #1e1e1e; /* Sets the camera icon color to black */
}

/* Outline Buttons (Claim Rewards) */
body[data-theme='dark'] .btn-outline {
    border-color: #555555;
    color: var(--text-dark);
}
body[data-theme='dark'] .btn-outline:hover {
    background-color: #333333;
}

/* Danger Outline Button (Log Out) */
body[data-theme='dark'] .btn-danger-outline {
    border-color: var(--negative-red);
    color: var(--negative-red);
}
body[data-theme='dark'] .btn-danger-outline:hover {
    background-color: var(--negative-red);
    color: white;
}


/* 3. Fix for Headings and Specific Text */
body[data-theme='dark'] h2,
body[data-theme='dark'] .card h2,
body[data-theme='dark'] .section-title {
    color: var(--text-dark);
}

/* 4. Fix for the Toggle Switch Itself */
body[data-theme='dark'] .toggle-slider {
    background-color: #444; /* Darker track */
}
body[data-theme='dark'] input:checked + .toggle-slider {
    background-color: var(--primary-color); /* White track when active */
}
body[data-theme='dark'] .toggle-slider:before {
    background-color: #e0e0e0; /* Off-white circle */
}
body[data-theme='dark'] input:checked + .toggle-slider:before {
    background-color: #1e1e1e; /* Black circle when active */
}

/* 5. Fix for Profile Tab Links */
body[data-theme='dark'] .profile-tab-link {
    color: var(--text-light);
}
body[data-theme='dark'] .profile-tab-link.active {
    color: var(--text-dark);
}
body[data-theme='dark'] .profile-tab-link.active::after {
    background-color: var(--primary-color);
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  font-size: inherit;
  line-height: inherit;
  width: auto;
  height: auto;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

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

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

@font-face {
  font-family: Satoshi;
  src: url("https://cdn.prod.website-files.com/684afec0a4c0b1f83bda33ea/68505956ed50e56c7abc9361_Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Satoshi Italic;
  src: url("https://cdn.prod.website-files.com/684afec0a4c0b1f83bda33ea/685059562c40ca8ed035f878_Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #1e1e1e;
  --white: white;
  --grey: #747474;
  --light-blue: #c1d0d8;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: var(--black);
  font-family: Satoshi, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 150%;
}

h1 {
  letter-spacing: -3px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 10vw;
  font-weight: 700;
  line-height: 100%;
}

h2 {
  color: var(--black);
  letter-spacing: -3px;
  text-transform: uppercase;
  margin-top: -5px;
  margin-bottom: 10px;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 110%;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 120%;
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

img {
  object-fit: cover;
  max-width: 100%;
  display: inline-block;
}

.nav-menu-two {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.navbar-logo-left {
  padding-left: 40px;
  padding-right: 40px;
}

.navbar-logo-left-container {
  z-index: 10;
  background-color: #0000;
  border-bottom: 1px solid #ffffff40;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

.nav-link {
  color: #1a1b1f;
  letter-spacing: .25px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.nav-link:hover {
  color: #1a1b1fbf;
}

.nav-link:focus-visible, .nav-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.container {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.hero-images-wrapper {
  align-items: stretch;
  height: 85vh;
  min-height: 85vh;
  max-height: 85vh;
  margin-bottom: 40px;
  margin-left: auto;
  position: relative;
  overflow: hidden;
}

.hero-image-background {
  background-image: url("https://www.thedrive.com/wp-content/uploads/images-by-url-td/content/2018/08/20180815-tesla-supercharger.jpg?quality=85");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}

.page-title {
  z-index: 5;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  mix-blend-mode: overlay;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: inline-flex;
  position: absolute;
  inset: 5vw 0% auto;
}

.hero-image-foreground {
  z-index: 3;
  background-image: url("https://www.thedrive.com/wp-content/uploads/images-by-url-td/content/2018/08/20180815-tesla-supercharger.jpg?quality=85");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  inset: 0%;
}

.grey-text {
  color: var(--grey);
}

.grey-text.bottom-margin-60px {
  margin-bottom: 60px;
}

.about-block {
  grid-column-gap: 10vw;
  grid-row-gap: 10vw;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
  position: relative;
}

.stat {
  color: #1e1e1e;
  margin-bottom: 5px;
  font-size: 2.5rem;
  line-height: 100%;
}

.section {
  padding-top: 250px;
  padding-left: 40px;
  padding-right: 40px;
}

.section.bottom-padding-200px {
  padding-bottom: 200px;
}

.section.black-bg {
  background-color: var(--black);
  padding-bottom: 250px;
}

.section.top-padding-0px {
  padding-top: 0;
}

.section.top-100px {
  padding-top: 100px;
}

.floating-image-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 85vw;
  max-height: 85vh;
  margin-bottom: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.floating-image-wrapper.contact-section {
  max-width: 45vw;
  max-height: none;
}

.floating-image {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  position: relative;
  overflow: clip;
}

.image-overlay {
  background-color: #fff;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.image-overlay.reverse-direction {
  left: 0;
  right: auto;
}

.div-block {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 50%;
  margin-left: auto;
  display: flex;
}

.logos-wrapper {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center start;
}

.service-content-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: #1e1e1e;
  grid-template-rows: auto;
  grid-template-columns: 20px 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
}

.number {
  color: var(--grey);
  margin-top: 2px;
  font-weight: 400;
}

.services-list {
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: flex;
  position: relative;
}

.separator-line {
  background-color: #e8e8e8;
  width: 100%;
  height: 1px;
  margin-left: 0;
  margin-right: auto;
}

.service-wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
}

.project-content-box {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #ffffffd9;
  min-width: 250px;
  max-width: 20vw;
  padding: 30px;
  position: absolute;
  inset: 50% 0% auto auto;
  transform: translate(0, -50%);
  box-shadow: 2px 2px 15px #0003;
}

.project-content-box.left-aligned {
  left: 0;
  right: auto;
}

.project-label {
  color: var(--grey);
  font-size: .875rem;
}

.project-thumbnail {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

.project-thumbnail.right-aligned {
  align-items: flex-end;
}

.flex-block-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.project-description {
  margin-top: 60px;
  margin-bottom: 60px;
}

.testimonial-text {
  color: #c1d0d8;
  text-align: center;
  margin-bottom: 80px;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 150%;
}

.slider {
  background-color: #ddd0;
  max-width: 600px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero-section {
  padding-left: 40px;
  padding-right: 40px;
}

._2x1-grid {
  grid-template-rows: auto;
  align-items: stretch;
}

.about-blocks-wrapper {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  display: flex;
}

.bottom-margin-medium {
  margin-bottom: 40px;
}

.bottom-margin-small {
  margin-bottom: 10px;
}

.accordion-item-wrapper {
  background-color: #ffffff1a;
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
}

.accordion-trigger {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  color: var(--black);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 2px;
  line-height: 140%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.expand-icon {
  transition: color .3s;
  display: flex;
}

.accordion-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 0;
  padding-right: 0;
  transition: opacity .2s;
  overflow: hidden;
}

.accordion-content.first {
  height: auto;
}

.accordion-content-text {
  padding-top: 10px;
}

.service-bullet-point {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--grey);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.div-block-71 {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.bullet-indicator {
  background-color: var(--grey);
  border-radius: 100%;
  width: 4px;
  min-width: 4px;
  max-width: 4px;
  height: 4px;
  min-height: 4px;
  max-height: 4px;
}

.accordion-grid-wrapper {
  grid-template-rows: auto;
  align-items: stretch;
  padding-top: 20px;
}

.animated-grid-image {
  width: 300px;
  height: 100%;
}

.single-service-grid {
  grid-template-rows: auto;
  grid-template-columns: 20px 1fr;
  padding-top: 20px;
}

.stats-block {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
  position: relative;
}

.uppercase-small-heading {
  letter-spacing: 0;
  margin-bottom: 40px;
  font-size: .875rem;
}

.uppercase-small-heading.bottom-margin-small {
  margin-bottom: 10px;
}

.uppercase-large-heading {
  color: var(--black);
  margin-bottom: 40px;
  font-size: 10vw;
  font-weight: 700;
}

.div-block-72 {
  z-index: -1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 30vh;
}

.inner-images-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: center;
  max-width: 60vw;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.center-image {
  width: 100%;
}

.top-left-image {
  z-index: 5;
  width: 100%;
  position: relative;
  top: 15px;
  left: 30px;
}

.top-right-image {
  width: 100%;
  max-width: 100%;
  position: relative;
  left: -30px;
}

.bottom-left-image {
  width: 100%;
  position: relative;
  left: 0;
}

.bottom-right-image {
  width: 100%;
  position: relative;
  top: 100px;
  left: 0;
}

.large-title {
  font-size: 14.5vw;
  line-height: 100%;
}

.animated-overlay-blocks {
  z-index: 4;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.left-overlay-block {
  background-color: var(--white);
  width: 50%;
  transform: translate(-100%);
}

.right-overlay-block {
  background-color: var(--white);
  width: 50%;
  transform: translate(100%);
}

.project-thumbnails-wrapper {
  grid-column-gap: 200px;
  grid-row-gap: 200px;
  flex-flow: column;
  display: flex;
}

.images-wrapper {
  min-height: 100vh;
}

.slide-nav {
  display: none;
}

.center-aligned-heading {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.left-arrow {
  background-color: var(--light-blue);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
  inset: auto 0 0% -100px;
}

.image {
  margin-right: 0;
  display: inline-flex;
}

.right-arrow {
  background-color: var(--light-blue);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
  inset: auto -100px 0% 0;
}

.flex-block-3 {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
}

.div-block-75 {
  align-self: center;
}

.white-text {
  color: #fff;
}

.form-field-wrapper {
  margin-bottom: 10px;
}

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

.form-block {
  max-width: 40vw;
}

.floating-image-wrapper-2 {
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 65vw;
  margin-bottom: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.form-field {
  color: #848484;
  background-color: #f7f7f7;
  border: 1px #000;
}

.work-with-us-block {
  grid-column-gap: 10vw;
  grid-row-gap: 10vw;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 100px;
  position: relative;
}

.primary-button {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #1e1e1e;
  border-width: 1px;
  border-color: #fff;
  width: 100%;
  padding: 8px 30px;
  font-size: .75rem;
  font-weight: 500;
  transition: color .2s, background-color .2s;
}

.primary-button:hover {
  background-color: var(--light-blue);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #1e1e1e;
}

.footer-link {
  color: var(--grey);
  text-transform: none;
  margin-bottom: 5px;
  font-size: .875rem;
  transition: color .3s cubic-bezier(.785, .135, .15, .86);
  display: block;
}

.footer-link:hover {
  color: var(--black);
}

.newsletter-form-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-grid-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  justify-items: stretch;
  margin-bottom: 40px;
  padding-right: 0;
}

.footer-grid-bottom {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  margin-bottom: 20px;
  display: grid;
}

.dark-footer-links-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  display: flex;
}

.form-label {
  color: #777;
  text-align: left;
  margin-bottom: 5px;
  font-size: .9rem;
}

.partner-form-block {
  max-width: 40vw;
  padding-top: 250px;
}

.footer-section {
  margin-top: -100px;
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.styleguide-element-wrapper-2 {
  margin-top: 40px;
}

.secondary-button {
  background-color: var(--light-blue);
  color: var(--black);
  text-transform: uppercase;
  padding: 8px 30px;
  font-size: .75rem;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}

.secondary-button:hover {
  background-color: var(--black);
  color: var(--white);
}

.secondary-button:focus-visible, .secondary-button[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.label {
  border: 1px #000;
  border-top: 1px solid #98a4a4;
  margin-top: 20px;
  padding-top: 5px;
  font-size: 12px;
}

.color-wrapper {
  width: 100%;
  height: 100%;
}

.white {
  background-color: var(--white);
  border: 1px solid #f1f1f1;
  min-height: 60px;
}

.color-palette-grid-2 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: stretch stretch;
  width: 100%;
}

.black {
  background-color: var(--black);
  min-height: 60px;
}

.bottom-margin-150px {
  margin-bottom: 150px;
}

.styleguide-block {
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: block;
}

.project-rich-text {
  margin-bottom: 40px;
}

.buttons-grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: center stretch;
}

.primary-button-2 {
  color: #fff;
  text-transform: uppercase;
  background-color: #1e1e1e;
  border-radius: 5px;
  padding: 6px 30px 5px;
  text-decoration: none;
}

.primary-button-2:focus-visible, .primary-button-2[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.light-blue {
  background-color: var(--light-blue);
  min-height: 60px;
}

.help-page-h2 {
  letter-spacing: -2px;
  text-transform: capitalize;
  margin-bottom: 20px;
  margin-left: 0;
  font-size: 4vw;
}

.grey {
  background-color: var(--grey);
  min-height: 60px;
}

.link-text {
  color: var(--black);
  font-weight: 500;
}

.bottom-margin-100px {
  margin-bottom: 100px;
}

.bottom-margin-60px {
  margin-bottom: 60px;
}

.changelog-wrapper {
  width: 100%;
}

.changelog-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-columns: 1fr 1fr 1fr;
}

.table-header {
  border-style: none none solid;
  border-width: 1px;
  border-top-color: #000;
  border-bottom-color: #9a846a;
  border-left-color: #000;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table-content-item {
  border: 1px #000;
  border-bottom: 1px solid #ebe1d2;
  min-height: 40px;
}

.gallery-image {
  width: 100%;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 85vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 500px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.footer {
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.page-popups-wrapper {
  z-index: 1000;
  padding-bottom: 10px;
  padding-right: 10px;
  position: fixed;
  inset: auto 0% 0% auto;
}

.buy-template-popup {
  color: var(--white);
  background-color: #0055d4;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  padding: 7px 10px;
  font-size: .9rem;
  transition: color .3s, background-color .3s;
  display: flex;
}

.buy-template-popup:hover {
  background-color: var(--light-blue);
  color: var(--black);
}

.all-templates-popup {
  color: var(--white);
  background-color: #292929;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  font-size: .9rem;
  transition: color .3s, background-color .3s;
  display: flex;
}

.all-templates-popup:hover {
  background-color: var(--light-blue);
  color: var(--black);
}

@media screen and (max-width: 991px) {
  .nav-menu-two {
    background-color: var(--white);
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px 20px 20px 15px;
    display: flex;
    box-shadow: 0 8px 50px #0000000d;
  }

  .navbar-logo-left {
    padding-left: 15px;
    padding-right: 15px;
  }

  .menu-button {
    background-color: #c8c8c800;
    padding: 12px;
  }

  .menu-button.w--open {
    color: var(--black);
    background-color: #c8c8c800;
  }

  .nav-menu-wrapper {
    background-color: #0000;
  }

  .hero-image-background {
    background-attachment: scroll;
  }

  .page-title {
    padding-left: 20px;
    padding-right: 20px;
    top: 10vw;
  }

  .hero-image-foreground {
    background-attachment: scroll;
  }

  .section {
    padding-top: 150px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }

  .floating-image-wrapper {
    max-width: none;
    max-height: none;
  }

  .floating-image-wrapper.contact-section {
    max-width: none;
  }

  .div-block {
    justify-content: flex-start;
    align-items: flex-end;
    max-width: none;
  }

  .logos-wrapper {
    grid-column-gap: 10vw;
    grid-row-gap: 10vw;
  }

  .separator-line {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .service-wrapper {
    max-width: none;
  }

  .project-content-box {
    box-shadow: none;
    min-width: auto;
    max-width: none;
    padding: 0;
    position: static;
    transform: translate(0);
  }

  .flex-block-2 {
    margin-top: 0;
  }

  .project-description {
    margin-bottom: 0;
  }

  .hero-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  ._2x1-grid {
    grid-template-columns: 1fr;
  }

  .stats-block {
    grid-column-gap: 10vw;
    grid-row-gap: 10vw;
    max-width: none;
  }

  .inner-images-wrapper {
    max-width: none;
  }

  .large-title {
    font-size: 15.5vw;
  }

  .project-thumbnails-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .work-with-us-block {
    flex-flow: column;
  }

  .footer-grid-top {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  .partner-form-block {
    max-width: none;
    padding-top: 0;
  }

  .footer-section {
    margin-top: 0;
    padding-top: 150px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }

  .styleguide-block {
    text-align: left;
  }

  .project-rich-text {
    max-width: none;
  }

  .help-page-h2 {
    font-size: 3rem;
  }

  .bottom-margin-100px {
    margin-bottom: 75px;
  }

  .footer {
    margin-top: 0;
    padding-top: 150px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  h2 {
    letter-spacing: -2px;
    font-size: 3rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .nav-menu-two {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-logo-left-container {
    max-width: 100%;
  }

  .nav-link {
    display: inline-block;
  }

  .navbar-brand {
    padding-left: 0;
  }

  .hero-images-wrapper {
    height: 50vh;
    min-height: 50vh;
    max-height: 50vh;
  }

  .about-block {
    flex-flow: column;
    max-width: none;
  }

  .about-blocks-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .service-bullet-point {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .stats-block {
    justify-content: space-between;
  }

  .div-block-72 {
    position: static;
  }

  .large-title {
    font-size: 15vw;
  }

  .images-wrapper {
    min-height: auto;
  }

  .work-with-us-block {
    flex-flow: column;
  }

  .footer-grid-top {
    margin-bottom: 80px;
  }

  .secondary-button {
    flex: 1;
  }

  .color-palette-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .buttons-grid {
    grid-template-columns: 1fr 1fr;
    place-items: start;
  }

  .help-page-h2 {
    font-size: 2.5rem;
  }

  .bottom-margin-100px {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    letter-spacing: -2px;
    font-size: 14vw;
  }

  .nav-menu-two {
    flex-direction: column;
  }

  .navbar-logo-left {
    padding-left: 0;
    padding-right: 0;
  }

  .menu-button {
    padding: 0;
  }

  .container {
    max-width: none;
  }

  .navbar-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-title {
    padding-left: 10px;
    padding-right: 10px;
    top: 10vh;
  }

  .stat {
    font-size: 2rem;
  }

  .service-content-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    max-width: none;
    display: flex;
  }

  .services-list {
    align-items: flex-start;
    display: block;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .hero-section {
    padding-left: 0;
    padding-right: 0;
  }

  .accordion-item-wrapper {
    align-items: flex-start;
  }

  .accordion-trigger {
    padding-bottom: 5px;
  }

  .open-close-box {
    right: 5%;
  }

  .accordion-content {
    padding-left: 0;
    padding-right: 0;
  }

  .accordion-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .single-service-grid {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .inner-images-wrapper {
    position: relative;
  }

  .center-image {
    width: 50vw;
    position: static;
  }

  .top-left-image {
    width: 35vw;
    position: absolute;
    inset: 20px auto auto 0%;
  }

  .top-right-image {
    width: 35vw;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .bottom-left-image {
    width: 30vw;
    position: absolute;
    inset: auto auto -20px 0%;
  }

  .bottom-right-image {
    width: 40vw;
    position: absolute;
    inset: auto 0% -40px auto;
  }

  .large-title {
    font-size: 16.5vw;
  }

  .primary-button {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-grid-top {
    grid-row-gap: 60px;
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid-bottom {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .dark-footer-links-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: space-between;
  }

  .secondary-button {
    padding-left: 10px;
    padding-right: 10px;
  }

  .buttons-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .primary-button-2 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .bottom-margin-100px {
    margin-bottom: 40px;
  }

  .utility-page-content {
    width: 300px;
  }

  .buy-template-popup, .all-templates-popup {
    font-size: .9rem;
  }
}

#w-node-_5bbbe3a8-d436-46a3-da1b-5c148fe98b26-3bda33fe {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-bad632a6-9246-9b39-3da6-f18fee55ec9d-3bda33fe, #w-node-bad632a6-9246-9b39-3da6-f18fee55ecbf-3bda33fe, #w-node-bad632a6-9246-9b39-3da6-f18fee55ece1-3bda33fe, #w-node-bad632a6-9246-9b39-3da6-f18fee55ed03-3bda33fe {
  justify-self: end;
}

#w-node-_427b26cd-8a7b-6c2f-81f3-f0b362a500ee-3bda33fe, #w-node-b46db727-f2de-96bd-e3d3-aad2bd561235-3bda33fe {
  grid-area: 1 / 2 / 3 / 3;
}

#w-node-_0cce4e86-0623-dc1b-6c2d-796bb3cd57c6-3bda33fe {
  justify-self: end;
}

#w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda7a-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda7b-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda80-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda81-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda86-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda87-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda8c-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda8d-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda97-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42edaa2-8fc6624a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6b0c63c9-3272-2fab-d2e1-e6bc7e63dfa0-7e63df98 {
  justify-self: end;
}

#w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf0-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf1-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf3-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf4-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf6-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf7-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf9-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bfa-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bfc-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bfd-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bff-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c00-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c02-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c03-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c04-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c05-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c06-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c07-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c08-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c09-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0a-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0b-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0c-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0d-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0e-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0f-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c10-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c11-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c12-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c13-c4fee243 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 479px) {
  #w-node-_5bbbe3a8-d436-46a3-da1b-5c148fe98b26-3bda33fe {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

/* --- CHARGESHARE CUSTOM STYLES --- */

/* LOGO FIX */
.logo-text {
    color: var(--black);
    font-size: 2rem; /* Made the logo a bit bigger */
    font-weight: 700;
}

/* HERO SECTION FIX */
.hero-image-background {
  /* This is the key fix: It sets our new hero image and adds a dark gradient on top */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://www.thedrive.com/wp-content/uploads/images-by-url-td/content/2018/08/20180815-tesla-supercharger.jpg?quality=85');
  background-attachment: fixed; /* This keeps the cool parallax effect */
}

/* This is no longer used, but we hide it just in case */
.hero-image-foreground {
  display: none;
}

/* This fixes the giant text to look good on our new background */
.page-title {
  mix-blend-mode: normal; /* Disables the weird transparent effect */
  color: white; /* Makes the text solid white so it's readable */
  text-align: center;
  width: 100%;
}
.hero-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.large-title {
    white-space: normal; /* Allows the title to wrap if needed */
}

/* New style for our added subtitle */
.hero-subtitle-custom {
    color: white;
    opacity: 0.9;
    font-size: 1.25rem;
    max-width: 600px;
    margin-top: 1rem;
    line-height: 1.6;
}

/* --- CUSTOM NAVBAR STYLES --- */
.logo-text-nav {
    margin-top: 0; /* Resets spacing */
    margin-bottom: 0;
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: 700;
    color: #1e1e1e; /* Uses the template's black color */
}
.nav-link {
    color: #1e1e1e; /* Makes nav links black */
}

/* --- CUSTOM HERO HEADLINE STYLES --- */

/* This targets the container for our new text */
.hero-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* This styles our main headline: "OWN THE EV REVOLUTION." */
.hero-headline-custom {
    color: white;
    letter-spacing: -2px;
    text-transform: uppercase;
    white-space: normal; /* Allows text to wrap */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 8vw; /* Scales with screen width, smaller than original */
    font-weight: 700;
    line-height: 110%;
    text-align: center;
    /* This is the key part that keeps the cool transparent effect! */
    mix-blend-mode: overlay; 
}

/* This styles our new sub-headline */
.hero-subheadline-custom {
    color: white;
    text-align: center;
    max-width: 650px; /* Keeps the line length readable */
    margin-top: 1rem;
    font-size: 1.5rem; /* Larger, more impactful font size */
    font-weight: 500;
    line-height: 1.5;
    /* We turn off the blend mode here so this text is solid and easy to read */
    mix-blend-mode: normal; 
}

/* --- RESPONSIVE FIXES FOR TABLET & MOBILE --- */

/* For devices smaller than a typical landscape tablet (991px) */
@media screen and (max-width: 991px) {
    .hero-headline-custom {
        font-size: 10vw; /* Make text a bit bigger relative to the screen */
        line-height: 1.1;
    }
    .hero-subheadline-custom {
        font-size: 1.25rem;
        max-width: 90%;
    }
}

/* For devices smaller than a typical phone (479px) */
@media screen and (max-width: 479px) {
    /* Make the top navigation logo a bit smaller */
    .logo-text-nav {
        font-size: 1.2rem; 
    }

    .hero-headline-custom {
        /* This is the key fix. We make the font much larger relative to the screen width.
           This forces the words to stack vertically, which is a strong mobile design pattern. */
        font-size: 14vw;
        letter-spacing: -1px; /* Tighten up the letters a little */
    }

    .hero-subheadline-custom {
        /* We make the sub-headline smaller to give the main title more impact. */
        font-size: 1.1rem; /* A comfortable, readable size on mobile */
        max-width: 95%;   /* Use more of the screen width */
        margin-top: 0.5rem; /* Reduce the space from the headline */
    }
}

/* --- GUARANTEED MOBILE MENU STYLES --- */

/* This CSS works with the custom JavaScript snippet in index.html */
/* It only applies on screens 991px wide or smaller */

@media screen and (max-width: 991px) {
    /*
     * By default, Webflow hides the .w-nav-menu on mobile. This is correct.
     * The rule below targets the menu ONLY when our JavaScript has opened it.
     */
    .w-nav-menu[data-nav-menu-open] {
        display: block; /* This makes the menu visible */
        position: absolute;
        top: 100%; /* Position it right below the navbar */
        left: 0;
        right: 0;
        z-index: 1001; /* Ensure it's on top of other content */
        background-color: white; /* Give it a solid background */
        box-shadow: 0 8px 50px rgba(0, 0, 0, 0.08); /* Add a subtle shadow */
    }

    /* Style the list of links inside for better layout */
    .w-nav-menu[data-nav-menu-open] .nav-menu-two {
        display: flex;
        flex-direction: column; /* Stack the links vertically */
        align-items: flex-start; /* Align links to the left */
        padding: 10px 20px;
    }
    
    /* Style the individual links for spacing and clarity */
    .w-nav-menu[data-nav-menu-open] .nav-link {
        padding: 15px 0;
        width: 100%; /* Make the entire row clickable */
    }
}

/* --- STEP 1: HERO BUTTON STYLES --- */

/* Add a top margin to create space below the subtitle */
.hero-button {
    margin-top: 25px;
    width: auto; /* Override the default 100% width from the other button */
    padding: 12px 35px; /* Make it slightly larger and more prominent */
    font-size: 0.875rem; /* Increase font size a bit for visibility */
    border-radius: 5px; /* Adding a subtle rounded corner */
    background-color: #9e9e9ed4; /* <-- ADD THIS LINE */
    border-color: transparent; /* <-- ADD THIS LINE to remove the white border */
}

/* --- HOW IT WORKS SECTION STYLES --- */

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates a 3-column grid */
    grid-gap: 40px; /* Space between the columns and rows */
    margin-top: 40px;
}

.how-it-works-step {
    text-align: center; /* Center aligns the icon, title, and text */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.how-it-works-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #f7f7f7; /* A light grey background */
    border-radius: 50%; /* Makes it a circle */
    margin-bottom: 20px;
    color: #1e1e1e; /* Sets the icon color to black */
}

.how-it-works-step h3 {
    margin-bottom: 10px;
    font-size: 1.5rem; /* Larger font size for the heading */
}


/* --- RESPONSIVE STYLES FOR "HOW IT WORKS" --- */

/* For tablets and smaller devices */
@media screen and (max-width: 991px) {
    .how-it-works-grid {
        grid-template-columns: 1fr; /* Stacks the 3 steps into a single column */
        grid-gap: 60px; /* Increase vertical space when stacked */
    }
}

/* --- TESTIMONIAL SECTION STYLES --- */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    grid-gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.testimonial-rating {
    color: #f5c518; /* A nice gold color for the stars */
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.testimonial-quote {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    flex-grow: 1; /* Allows the quote to take up available space */
    margin-bottom: 20px;
}

.testimonial-author {
    border-top: 1px solid #e8e8e8;
    padding-top: 20px;
}

.author-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.author-title {
    margin: 0;
    font-size: 0.875rem;
    color: var(--grey);
}

/* --- RESPONSIVE STYLES FOR TESTIMONIALS --- */

/* For tablets */
@media screen and (max-width: 991px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
}

/* For mobile phones */
@media screen and (max-width: 767px) {
    .testimonial-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* --- ROTATING TESTIMONIAL STYLES (MOBILE-ONLY) --- */

@media screen and (max-width: 767px) {
    .testimonial-grid {
        /* This prevents the grid from growing to fit all 6 hidden cards */
        min-height: 0; 
    }

    .testimonial-card {
        /* Hide all cards by default on mobile */
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    
    .testimonial-card.is-visible {
        /* This class will be added by JavaScript to show the current two */
        display: flex; /* Overrides the 'display: none' */
        opacity: 1;
    }
}

/* --- FAQ SECTION STYLES --- */

.faq-container {
    max-width: 800px; /* Constrain width for better readability */
    margin: 40px auto 0 auto; /* Center the container */
    border-top: 1px solid #e8e8e8; /* Top border for the whole section */
}

.faq-item {
    border-bottom: 1px solid #e8e8e8; /* Separator line for each item */
}

.faq-question {
    font-size: 1.25rem;
    font-weight: 500;
    padding: 25px 0;
    cursor: pointer;
    position: relative;
    list-style: none; /* Removes the default arrow/marker */
    padding-right: 40px; /* Make space for our custom arrow */
}

/* Custom arrow for the accordion */
.faq-question::after {
    content: '+';
    font-size: 2rem;
    font-weight: 300;
    color: var(--grey);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

/* When the accordion is open, rotate the arrow */
details[open] > summary.faq-question::after {
    content: '−'; /* Use a minus sign when open */
    transform: translateY(-50%);
}

.faq-answer {
    color: var(--grey);
    padding-bottom: 25px;
    padding-right: 40px; /* Align with the question text */
    line-height: 1.7;
}

/* Remove the default focus outline for a cleaner look */
.faq-question:focus {
    outline: none;
}

/* --- FIX FOR FOOTER IMAGE OVERLAP (DESKTOP ONLY) --- */

/* This media query targets screens 992px and wider */
@media screen and (min-width: 992px) {
    /* This rule will now ONLY apply on larger screens */
    .floating-image-wrapper.contact-section {
        margin-top: 160px; 
    }
}

/* --- LOGIN PAGE STYLES --- */

.login-page-body {
    background-color: #ffffff;
    font-family: Satoshi, Arial, sans-serif;
    color: #1e1e1e;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.login-container {
    width: 100%;
    max-width: 1200px; /* Max width for the whole page content */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 40px;
}

.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}

.login-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.login-form-wrapper {
    width: 100%;
    max-width: 380px; /* Constrains the form width */
    align-self: center; /* This is the key fix */
}

.login-form-wrapper h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    white-space: normal;
}

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

.input-group label {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #5c5e62;
}

.info-icon {
    margin-left: 5px;
    color: #8e8e8e;
}

.input-group input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #3e6ae1;
}

.btn {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-primary {
    background-color: #3e6ae1;
    color: white;
}
.btn-primary:hover {
    background-color: #3457b2;
}

.btn-secondary {
    background-color: #f0f0f0;
    color: var(--black);
}
.btn-secondary:hover {
    background-color: #e0e0e0;
}

.trouble-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #5c5e62;
    text-decoration: none;
    font-weight: 500;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #8e8e8e;
    margin: 30px 0;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.separator:not(:empty)::before {
    margin-right: .5em;
}

.separator:not(:empty)::after {
    margin-left: .5em;
}

.login-footer {
    text-align: center;
    padding: 40px 0;
    font-size: 0.8rem;
    color: #8e8e8e;
}

.login-footer .footer-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.login-footer a {
    color: #5c5e62;
    text-decoration: none;
    font-weight: 500;
}

/* Responsive adjustments */
@media screen and (max-width: 479px) {
    .login-container {
        padding: 0 20px;
    }
    .login-header {
        padding: 20px 0;
    }
}

/* --- SINGLE-PAGE REGISTRATION STYLES --- */

.hidden {
    display: none;
}

.form-navigation {
    display: flex;
    gap: 15px;
}

.form-navigation .btn-primary {
    flex-grow: 7; /* Makes the primary button take up more space */
}

.btn-tertiary {
    background-color: transparent;
    color: #5c5e62;
    border: 1px solid #e0e0e0;
}
.btn-tertiary:hover {
    background-color: #f9f9f9;
}

/* --- STYLES FOR NEW REGISTRATION FIELDS --- */

/* Style dropdowns to look like text inputs */
.input-group select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    font-size: 1rem;
    color: var(--black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom arrow for dropdowns */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
}

/* --- REGISTRATION FORM SPACING ADJUSTMENTS --- */

/* Add space between the reCAPTCHA widget and the legal text below it */
.g-recaptcha + .legal-text {
    margin-top: 20px;
}

/* Add space between the legal text and the primary 'Next' button below it */
.legal-text + .btn-primary {
    margin-top: 20px;
}

/* --- VERIFICATION PAGE SPACING ADJUSTMENT --- */

/* This targets the 'Back to Sign In' button specifically on the verification step */
.verify-text + .btn-secondary {
    margin-top: 30px;
}

/* --- STYLE FOR READ-ONLY LOGIN INPUT --- */

.input-group input[readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

/* --- NEW DASHBOARD STYLES V2 (SCOPED & BLACK THEME) --- */
/* These styles will ONLY apply to the dashboard page. */

.dashboard-page {
    /* Updated color variables for the black/grey theme */
    --primary-color: #1e1e1e;   /* Set to black */
    --primary-dark: #333333;    /* A slightly lighter black for hover */
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    
    background-color: var(--secondary-bg);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    padding-bottom: 80px; /* For the mobile nav */
}

/* --- MOBILE NAVIGATION (Bottom Bar) --- */
.dashboard-page .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
}

.dashboard-page .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.65rem;
    gap: 4px;
    transition: color 0.2s;
}

.dashboard-page .nav-link.active {
    color: var(--primary-color);
}

.dashboard-page .nav-link i {
    font-size: 1.25rem;
}

.dashboard-page .nav-link-primary {
    background-color: var(--primary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adjusted shadow for black */
}
.dashboard-page .nav-link-primary:hover {
    background-color: var(--primary-dark);
}
.dashboard-page .nav-link-primary i {
    font-size: 1.5rem;
}

/* --- SIDEBAR NAVIGATION (Desktop) --- */
.dashboard-page .sidebar-nav {
    display: none;
}
.dashboard-page #logout-button-desktop {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* --- MAIN CONTENT & HEADERS --- */
.dashboard-page .main-content {
    padding: 20px;
}
.dashboard-page .desktop-header {
    display: none;
}

.dashboard-page .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.dashboard-page .mobile-header .user-info p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-light);
}
.dashboard-page .mobile-header .user-info h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -1px;
    white-space: normal;
    line-height: 1.2;
}
.dashboard-page .logout-icon {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-light);
    padding: 10px;
}

/* --- GENERIC CARD STYLES --- */
.dashboard-page .card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

/* --- DASHBOARD GRID --- */
.dashboard-page .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* --- BALANCE CARD --- */
.dashboard-page .balance-card .balance-header p {
    margin: 0;
    color: var(--text-light);
}
.balance-card .balance-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    line-height: 1;
}
.dashboard-page .balance-card .balance-amount span {
    font-size: 2rem;
    font-weight: 600;
    margin-right: 4px;
    margin-top: 5px;
}
.balance-card .balance-amount p {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-dark);
}
.dashboard-page .balance-card .balance-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--positive-green);
    font-weight: 600;
}
.dashboard-page .balance-card .balance-subtitle p {
    margin: 0;
}
.dashboard-page .balance-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}
.dashboard-page .btn {
    flex: 1;
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
}
.dashboard-page .btn i {
    margin-right: 8px;
}
.dashboard-page .btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.dashboard-page .btn-primary:hover {
    background-color: var(--primary-dark);
}
.dashboard-page .btn-secondary {
    background-color: #c0c8d5;
    color: var(--text-dark);
}

/* --- Balance Card V2 Styles --- */
.dashboard-page .balance-card .balance-amount p {
    display: flex;
    align-items: flex-start; /* Aligns the top of the symbol with the top of the number */
    justify-content: center;
    line-height: 1;
}

.dashboard-page .balance-card .balance-amount .currency-symbol {
    font-size: 3.5rem; /* Smaller font size for the dollar sign */
    font-weight: 600;
    margin-right: 2px;
    margin-top: 5px;   /* Fine-tunes vertical alignment */
}

.dashboard-page .balance-card .balance-amount #platform-balance-home {
    font-size: 3.5rem; /* Larger, more prominent font size for the number */
    font-weight: 700;
}

/* --- CHART CARD --- */
.dashboard-page .chart-card .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.dashboard-page .chart-card h3 {
    margin: 0;
    font-size: 1.1rem;
}
.dashboard-page .chart-timespan {
    display: flex;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 4px;
}
.dashboard-page .timespan-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
}
.dashboard-page .timespan-btn.active {
    background-color: var(--card-bg);
    color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.dashboard-page .chart-placeholder img {
    width: 100%;
}

/* --- ACTIVITY CARD --- */
.dashboard-page .activity-card h3 {
    font-size: 1.1rem;
    margin: 0 0 15px 0;
}
.dashboard-page .activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-page .activity-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .activity-item:last-child {
    border-bottom: none;
}
.dashboard-page .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
.dashboard-page .activity-details {
    flex-grow: 1;
}
.dashboard-page .activity-details p {
    margin: 0;
    font-weight: 600;
}
.dashboard-page .activity-details span {
    font-size: 0.8rem;
    color: var(--text-light);
}
.dashboard-page .activity-amount {
    font-weight: 600;
}
.dashboard-page .activity-amount.positive {
    color: var(--positive-green);
}

/* --- DESKTOP RESPONSIVE STYLES (768px and up) --- */
@media screen and (min-width: 768px) {
    .dashboard-page {
        display: flex;
        padding-bottom: 0;
    }

    /* Show Sidebar, Hide Bottom Nav */
    .dashboard-page .bottom-nav {
        display: none;
    }
    .dashboard-page .sidebar-nav {
        display: flex;
        flex-direction: column;
        width: 240px;
        background-color: var(--card-bg);
        border-right: 1px solid var(--border-color);
        padding: 20px;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
    }
    .dashboard-page .sidebar-logo {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-dark);
        text-decoration: none;
        padding: 15px 10px;
    }
    .dashboard-page .sidebar-links {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .dashboard-page .sidebar-link {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 15px;
        border-radius: 8px;
        text-decoration: none;
        color: var(--text-light);
        font-weight: 600;
        transition: background-color 0.2s, color 0.2s;
    }
    .dashboard-page .sidebar-link i {
        font-size: 1.2rem;
    }
    .dashboard-page .sidebar-link:hover {
        background-color: var(--secondary-bg);
    }
    .dashboard-page .sidebar-link.active {
        background-color: var(--primary-color);
        color: white;
    }
    .dashboard-page .sidebar-logout {
        margin-top: auto;
    }
    .dashboard-page .sidebar-logout button {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 12px 15px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--text-light);
      font-weight: 600;
      transition: background-color 0.2s, color 0.2s;
    }
    .dashboard-page .sidebar-logout button:hover {
        background-color: var(--secondary-bg);
    }

    /* Adjust main content for sidebar */
    .dashboard-page .main-content {
        flex-grow: 1;
        margin-left: 240px;
        padding: 40px;
    }

    /* Show Desktop Header, Hide Mobile Header */
    .dashboard-page .mobile-header {
        display: none;
    }
    .dashboard-page .desktop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
    .dashboard-page .desktop-header h1 {
        font-size: 2rem;
        margin: 0;
    }
    .dashboard-page .desktop-header .user-info {
        font-weight: 600;
    }

    /* Re-grid the dashboard cards for desktop */
    .dashboard-page .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "balance chart"
            "activity activity";
        gap: 30px;
    }
    .dashboard-page .card {
        margin-bottom: 0;
    }
    .dashboard-page .balance-card { grid-area: balance; }
    .dashboard-page .chart-card { grid-area: chart; }
    .dashboard-page .activity-card { grid-area: activity; }
}


/* --- MOBILE-ONLY CARDLESS STYLE ADJUSTMENT --- */

/* This media query targets mobile devices (screens 767px and smaller) */
@media screen and (max-width: 767px) {
    /* Select both the balance and chart cards specifically */
    .dashboard-page .balance-card,
    .dashboard-page .chart-card {
        background-color: transparent; /* Remove the white background */
        border: none;                  /* Remove the 1px border */
        box-shadow: none;              /* Remove any potential shadow */
        border-radius: 0;              /* Remove the rounded corners */
        padding: 0;                    /* Remove the card's internal padding */
    }

    /* Remove the bottom margin from the balance card to connect it to the chart */
    .dashboard-page .balance-card {
        margin-bottom: 0;
    }
    
    /* Ensure consistent spacing between the chart and the activity card below it */
    .dashboard-page .chart-card {
        margin-bottom: 20px; 
    }

    /* --- ADD THIS NEW BLOCK TO CENTER THE TEXT --- */
    .dashboard-page .balance-header {
        text-align: center;
    }
    .dashboard-page .balance-amount,
    .dashboard-page .balance-subtitle {
        justify-content: center;
    }
    /* --- END OF NEW BLOCK --- */
}

/* --- MINIMALIST DESIGN REFINEMENTS (MOBILE-ONLY) --- */

@media screen and (max-width: 767px) {
    /* 1. Add space above the balance info */
    .dashboard-page .balance-card {
        margin-top: 30px; 
    }

    /* 2. Hide the Withdraw and Deposit buttons */
    .dashboard-page .balance-actions {
        display: none;
    }

    /* 3. Style the new SVG chart to give it a height */
    .dashboard-page .chart-svg {
        width: 100%;
        height: 150px; /* Give the chart a visible height */
        margin-top: 40px;
    }
    
    /* 4. Hide the "Earnings Over Time" title */
    .dashboard-page .chart-card .chart-header {
        display: none;
    }
    
    /* 5. Center the timespan buttons and move them below the chart */
    .dashboard-page .chart-timespan {
        width: fit-content; /* Make the container only as wide as its content */
        margin: 20px auto 0 auto; /* Center it horizontally with margin */
    }
}

/* --- SINGLE-PAGE APP & MY PORTS STYLES --- */

/* Utility class to hide sections */
.page-content.hidden {
    display: none;
}

/* My Ports List Styles */
.dashboard-page .ports-list {
    display: grid;
    gap: 20px;
}

.dashboard-page .port-item {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 25px;
}

.dashboard-page .port-details {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-page .port-location {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-page .port-id {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 4px 0 0 0;
}

.dashboard-page .port-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dashboard-page .port-info-item {
    display: flex;
    flex-direction: column;
}

.dashboard-page .port-label {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 5px;
}

.dashboard-page .port-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.dashboard-page .port-status {
    display: inline-block;
    width: fit-content;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-page .status-active {
    background-color: #e0f5ea;
    color: #158a4a;
}

.dashboard-page .status-construction {
    background-color: #fff3cd;
    color: #856404;
}

.dashboard-page .status-pending-approval {
    background-color: #e3e8f7;
    color: #3b5bdb;
}

/* Responsive Styles for My Ports */
@media screen and (max-width: 500px) {
    .dashboard-page .port-info-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on small mobile */
    }
}

/* --- PORT DETAILS MODAL STYLES --- */

.dashboard-page .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-page .modal-overlay:not(.hidden) {
    opacity: 1;
}

.dashboard-page .modal-content {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 30px;
    width: 100%;
    max-width: 550px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.dashboard-page .modal-overlay:not(.hidden) .modal-content {
    transform: scale(1);
}

.dashboard-page .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .modal-header h2 { margin: 0; font-size: 1.5rem; }

.dashboard-page .modal-close-button {
    background: none;
    border: none;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
}

.dashboard-page .modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.dashboard-page .modal-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* New Status Badge for "Inactive" */
.dashboard-page .status-inactive {
    background-color: #eef0f3; /* Light grey */
    color: #6c757d; /* Dark grey */
}

/* New Action Button Styles */
.dashboard-page .btn.btn-danger {
    background-color: #d93025; /* Red for deactivation */
    color: white;
}
.dashboard-page .btn.btn-success {
    background-color: #1e8e3e; /* Green for activation */
    color: white;
}

/* In your style.css file */


/* --- Deposit Modal: QR Code Centering & Spacing --- */
.dashboard-page .qr-code-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* This horizontally centers the QR code and caption */
    margin: 30px 0;      /* This adds the space above and below */
}

.dashboard-page .qr-code-container {
    padding: 10px; /* Adds some white space around the QR code */
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 10px; /* Space between QR code and its caption */
}

.dashboard-page .qr-code-caption {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
    margin: 0;
}

/* --- WALLET PAGE STYLES --- */

.dashboard-page .wallet-summary-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-page .wallet-balance-info .balance-amount {
    margin-top: 5px;
}

.dashboard-page .wallet-actions {
    display: flex;
    gap: 15px;
}
.dashboard-page .wallet-actions .btn {
    flex: 1; /* Make buttons take equal space */
}

/* --- Wallet Page: Main Balance Card --- */
.dashboard-page .wallet-main-card {
    text-align: center; /* Center all content */
}

.dashboard-page .wallet-main-card .balance-amount p {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    margin: 10px 0 25px 0; /* Add margin for spacing */
}

.dashboard-page .wallet-main-card .balance-amount .currency-symbol {
    font-size: 3.5rem; /* Adjust size for wallet page */
    font-weight: 700;
    margin-right: 0px;
    margin-top: 0px;
}

.dashboard-page .wallet-main-card .balance-amount #wallet-balance {
    font-size: 3.5rem; /* Adjust size for wallet page */
    font-weight: 700;
}

/* This makes the "Withdraw" button light grey as per the design */
.dashboard-page .wallet-main-card .wallet-actions .btn-secondary {
    background-color: #1E1E1E;
    color: white;
}

.dashboard-page .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
}
.dashboard-page .btn.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}
.dashboard-page .btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}
.dashboard-page .btn-outline:hover {
    background-color: var(--secondary-bg);
    border-color: var(--secondary-bg);
}

.dashboard-page .linked-accounts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-page .linked-account-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .linked-account-item:last-child {
    border-bottom: none;
}
.dashboard-page .linked-account-item i {
    font-size: 1.25rem;
    color: var(--text-light);
}
.dashboard-page .account-details p {
    margin: 0;
    font-weight: 500;
}
.dashboard-page .account-details span {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* --- Wallet Page: Token Swap Card Input Styling --- */
.dashboard-page .token-swap-card .swap-input-group {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Add a focus ring to the whole group when a child is active */
.dashboard-page .token-swap-card .swap-input-group:focus-within {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

.dashboard-page .token-swap-card .swap-input-group input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 12px 15px; /* Use the container's padding now */
    font-size: 1rem;
    color: var(--text-dark);
    width: 100%;
}

/* Remove the default focus outline from the input itself */
.dashboard-page .token-swap-card .swap-input-group input:focus {
    outline: none;
}

.dashboard-page .token-swap-card .swap-input-group select {
    flex-basis: 120px; /* Give the select a consistent width */
    border: none;
    border-left: 1px solid var(--border-color); /* Separator line */
    background: transparent;
    padding: 12px 15px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0 7px 7px 0; /* Round only the right corners */
    padding-right: 40px; /* Make space for the arrow */
}

.dashboard-page .token-swap-card .swap-input-group select:focus {
    outline: none;
}

/* Make activity list inside card have borders */
.dashboard-page .card .activity-list .activity-item {
    padding: 15px 25px;
}
.dashboard-page .card .activity-list .activity-item:first-child {
    padding-top: 20px;
}
.dashboard-page .card .activity-list .activity-item:last-child {
    border-bottom: none;
    padding-bottom: 20px;
}

/* Modal Form Styles */
.dashboard-page .modal-content .form-group {
    margin-bottom: 15px;
}
.dashboard-page .modal-content label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.dashboard-page .modal-content input,
.dashboard-page .modal-content select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 1rem;
    color: var(--text-dark);
}
.dashboard-page .modal-content input:focus,
.dashboard-page .modal-content select:focus {
    outline: none;
    border-color: var(--primary-color);
}
.dashboard-page .modal-content .input-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 10px;
}


/* Responsive adjustments for Wallet */
@media screen and (min-width: 768px) {
    .dashboard-page .wallet-summary-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- DASHBOARD STYLES --- */
.dashboard-page {
    --primary-color: #1e1e1e;
    --primary-dark: #333333;
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    background-color: var(--secondary-bg);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    padding-bottom: 80px;
    opacity: 0; /* Initially hidden for fade-in */
}
.dashboard-page .bottom-nav { display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; height: 65px; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border-color); z-index: 1000; }
.dashboard-page .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); text-decoration: none; font-size: 0.65rem; gap: 4px; transition: color 0.2s; padding: 0 10px; }
.dashboard-page .nav-link.active { color: var(--primary-color); }
.dashboard-page .nav-link i { font-size: 1.25rem; }
.dashboard-page .nav-link-primary { background-color: var(--primary-color); color: white; width: 50px; height: 50px; border-radius: 50%; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.dashboard-page .nav-link-primary:hover { background-color: var(--primary-dark); }
.dashboard-page .nav-link-primary i { font-size: 1.5rem; }
.dashboard-page .sidebar-nav { display: none; }
.dashboard-page #logout-button-desktop { background: none; border: none; cursor: pointer; padding: 0; }
.dashboard-page .main-content { padding: 20px; }
.dashboard-page .desktop-header { display: none; }
.dashboard-page .mobile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.dashboard-page .mobile-header .user-info p { margin: 0; font-size: 1rem; color: var(--text-light); }
.dashboard-page .mobile-header .user-info h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -1px; white-space: normal; line-height: 1.2; }
.dashboard-page .logout-icon { background: none; border: none; font-size: 1.25rem; color: var(--text-light); padding: 10px; }
.dashboard-page .card { background-color: var(--card-bg); border-radius: 16px; padding: 25px; border: 1px solid var(--border-color); margin-bottom: 20px; }
.dashboard-page .dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.dashboard-page .balance-card .balance-header p { margin: 0; color: var(--text-light); }
.dashboard-page .balance-card .balance-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    line-height: 1;
}
.dashboard-page .balance-card .balance-amount span { font-size: 2rem; font-weight: 600; margin-right: 4px; margin-top: 5px; }
.dashboard-page .balance-card .balance-amount p {
    font-size: 4rem;
    font-weight: 700;
    color: var(--text-dark);
}
.dashboard-page .balance-card .balance-subtitle { display: flex; align-items: center; gap: 8px; color: var(--positive-green); font-weight: 600; }
.dashboard-page .balance-card .balance-subtitle p { margin: 0; }
.dashboard-page .balance-actions { display: flex; gap: 15px; margin-top: 25px; }
.dashboard-page .btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; padding: 15px; font-size: 1rem; font-weight: 600; border-radius: 12px; border:none; cursor:pointer; }
.dashboard-page .btn i { margin-right: 8px; }
.dashboard-page .btn-primary { background-color: var(--primary-color); color: white; }
.dashboard-page .btn-primary:hover { background-color: var(--primary-dark); }
.dashboard-page .btn-secondary { background-color: #eef0f3; color: var(--text-dark); }
.dashboard-page .chart-card .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dashboard-page .chart-card h3 { margin: 0; font-size: 1.1rem; }
.dashboard-page .chart-timespan { display: flex; background-color: var(--secondary-bg); border-radius: 8px; padding: 4px; }
.dashboard-page .timespan-btn { background: none; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; color: var(--text-light); cursor: pointer; }
.dashboard-page .timespan-btn.active { background-color: var(--card-bg); color: var(--text-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.dashboard-page .chart-svg { width: 100%; height: 150px; margin-top: 40px; }
.dashboard-page .activity-card h3 { font-size: 1.1rem; margin: 0 0 15px 0; }
.dashboard-page .activity-list { list-style: none; padding: 0; margin: 0; }
.dashboard-page .activity-item { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-page .activity-item:last-child { border-bottom: none; }
.dashboard-page .activity-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; }
.dashboard-page .activity-details { flex-grow: 1; }
.dashboard-page .activity-details p { margin: 0; font-weight: 600; }
.dashboard-page .activity-details span { font-size: 0.8rem; color: var(--text-light); }
.dashboard-page .activity-amount { font-weight: 600; white-space: nowrap; }
.dashboard-page .activity-amount.positive { color: var(--positive-green); }
.dashboard-page .activity-amount.negative { color: var(--negative-red); }
.dashboard-page .page-content.hidden { display: none; }
.dashboard-page .ports-list { display: grid; gap: 20px; }
.dashboard-page .port-item { background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); padding: 25px; cursor: pointer; }
.dashboard-page .port-details { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.dashboard-page .port-location { font-size: 1.25rem; font-weight: 600; margin: 0; }
.dashboard-page .port-id { font-size: 0.9rem; color: var(--text-light); margin: 4px 0 0 0; }
.dashboard-page .port-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dashboard-page .port-info-item { display: flex; flex-direction: column; }
.dashboard-page .port-label { font-size: 0.8rem; color: var(--text-light); margin-bottom: 5px; }
.dashboard-page .port-value { font-size: 1.1rem; font-weight: 600; }
.dashboard-page .port-status { display: inline-block; width: fit-content; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.dashboard-page .status-active { background-color: #e0f5ea; color: #158a4a; }
.dashboard-page .status-inactive { background-color: #eef0f3; color: #6c757d; }
.dashboard-page .status-construction { background-color: #fff3cd; color: #856404; }
.dashboard-page .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 20px; opacity: 1; transition: opacity 0.3s ease; }
.dashboard-page .modal-overlay.hidden { opacity: 0; pointer-events: none; }
.dashboard-page .modal-content { background-color: var(--card-bg); border-radius: 16px; padding: 30px; width: 100%; max-width: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: scale(1); transition: transform 0.3s ease; }
.dashboard-page .modal-overlay.hidden .modal-content { transform: scale(0.95); }
.dashboard-page .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.dashboard-page .modal-header h2 { margin: 0; font-size: 1.5rem; }
.dashboard-page .modal-close-button { background: none; border: none; font-size: 1.2rem; font-weight: 300; line-height: 1; color: var(--text-light); cursor: pointer; }
.dashboard-page .modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.dashboard-page .modal-actions { margin-top: 30px; }
.dashboard-page .btn.btn-danger { background-color: #d93025; color: white; }
.dashboard-page .btn.btn-success { background-color: #1e8e3e; color: white; }
.dashboard-page .wallet-summary-card { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.dashboard-page .wallet-balance-info .balance-amount { margin-top: 5px; }
.dashboard-page .wallet-actions { display: flex; gap: 15px; }
.dashboard-page .wallet-actions .btn { flex: 1; }
.dashboard-page .card-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.dashboard-page .card-header h3 { margin: 0; font-size: 1.1rem; }
.dashboard-page .btn.btn-sm { padding: 6px 14px; font-size: 0.8rem; width: auto; }
.dashboard-page .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-dark); }
.dashboard-page .btn-outline:hover { background-color: var(--secondary-bg); border-color: var(--secondary-bg); }
.dashboard-page .card-content { padding: 0 25px 10px; }
.dashboard-page .linked-accounts-list { list-style: none; padding: 0; margin: 0; }
.dashboard-page .linked-account-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-page .linked-account-item:last-child { border-bottom: none; }
.dashboard-page .linked-account-item i { font-size: 1.25rem; color: var(--text-light); }
.dashboard-page .account-details p { margin: 0; font-weight: 500; }
.dashboard-page .account-details span { font-size: 0.8rem; color: var(--text-light); }
.dashboard-page .card .activity-list .activity-item { padding: 15px 25px; }
.dashboard-page .modal-content .form-group { margin-bottom: 20px; }
.dashboard-page .modal-content label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; }
.dashboard-page .modal-content input, .dashboard-page .modal-content select { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--secondary-bg); font-size: 1rem; color: var(--text-dark); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.dashboard-page .modal-content select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: .65em auto; padding-right: 40px; }
.dashboard-page .modal-content input:focus, .dashboard-page .modal-content select:focus { outline: none; border-color: var(--primary-color); }
.dashboard-page .modal-content .input-hint { font-size: 0.8rem; color: var(--text-light); margin-top: 15px; text-align: center; }

@media screen and (max-width: 767px) {
    .dashboard-page .balance-card, .dashboard-page .chart-card { background-color: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
    .dashboard-page .balance-card { margin-bottom: 0; margin-top: 30px; }
    .dashboard-page .chart-card { margin-bottom: 20px; }
    .dashboard-page .balance-header { text-align: center; }
    .dashboard-page .balance-amount, .dashboard-page .balance-subtitle { justify-content: center; }
    .dashboard-page .balance-actions { display: none; }
    .dashboard-page .chart-card .chart-header { display: none; }
    .dashboard-page .chart-timespan { width: fit-content; margin: 20px auto 0 auto; }
}
@media screen and (max-width: 500px) { .dashboard-page .port-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (min-width: 768px) {
    .dashboard-page { display: flex; padding-bottom: 0; }
    .dashboard-page .bottom-nav { display: none; }
    .dashboard-page .sidebar-nav { display: flex; flex-direction: column; width: 240px; background-color: var(--card-bg); border-right: 1px solid var(--border-color); padding: 20px; height: 100vh; position: fixed; left: 0; top: 0; }
    .dashboard-page .sidebar-logo { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); text-decoration: none; padding: 15px 10px; }
    .dashboard-page .sidebar-links { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
    .dashboard-page .sidebar-link { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; }
    .dashboard-page .sidebar-link i { font-size: 1.2rem; width: 20px; text-align: center; }
    .dashboard-page .sidebar-link:hover { background-color: var(--secondary-bg); }
    .dashboard-page .sidebar-link.active { background-color: var(--primary-color); color: white; }
    .dashboard-page .sidebar-logout { margin-top: auto; }
    .dashboard-page .sidebar-logout button { width: 100%; display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; font-family: 'Inter', sans-serif; font-size: 1rem; }
    .dashboard-page .sidebar-logout button:hover { background-color: var(--secondary-bg); }
    .dashboard-page .main-content { flex-grow: 1; margin-left: 240px; padding: 40px; }
    .dashboard-page .mobile-header { display: none; }
    .dashboard-page .desktop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
    .dashboard-page .desktop-header h1 { font-size: 2rem; margin: 0; }
    .dashboard-page .desktop-header .user-info { font-weight: 600; }
    .dashboard-page .dashboard-grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "balance chart" "activity activity"; gap: 30px; }
    .dashboard-page .card { margin-bottom: 0; }
    .dashboard-page .balance-card { grid-area: balance; }
    .dashboard-page .chart-card { grid-area: chart; }
    .dashboard-page .activity-card { grid-area: activity; }
    .dashboard-page .wallet-summary-card { flex-direction: row; justify-content: space-between; align-items: center; }
}

@media screen and (min-width: 992px) {
    /*
     * Targets the container for the dollar amount within the main balance card.
     * We change the alignment from the default 'center' to 'flex-start' (left).
    */
    .dashboard-page .balance-card .balance-amount {
        justify-content: flex-start;
    }
}

/* --- CUSTOM DASHBOARD & PROFILE STYLES --- */

/* --- Base Fixes & Styles --- */
.dashboard-page .wallet-summary-card .balance-amount { display: flex; align-items: baseline; gap: 4px; }
.dashboard-page .wallet-summary-card .balance-amount span { font-size: 1.75rem; font-weight: 600; line-height: 1; }
.dashboard-page .wallet-summary-card .balance-amount p { font-size: 3rem; font-weight: 700; line-height: 1; }
.dashboard-page .wallet-balance-info { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dashboard-page .card-header { gap: 1rem; }
.dashboard-page .payment-options { display: flex; gap: 1rem; margin: 1.5rem 0; }
.dashboard-page .payment-options .btn { flex: 1; }
.dashboard-page .payment-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.dashboard-page .payment-instruction { margin-bottom: 1rem; color: var(--text-light); font-size: 0.9rem; line-height: 1.5; text-align: center; }
.dashboard-page .address-container { display: flex; gap: 0.5rem; }
.dashboard-page .address-container input { font-family: monospace; flex-grow: 1; }
.dashboard-page .address-container .btn { flex-shrink: 0; width: auto; padding: 10px 15px; }
.dashboard-page .withdrawal-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.dashboard-page .amount-input-group { display: flex; align-items: center; gap: 1rem; }
.dashboard-page .balance-display { color: var(--text-light); font-size: 0.9rem; white-space: nowrap; }
.dashboard-page .toggle-switch-container { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding: 12px 15px; border-radius: 8px; background-color: var(--secondary-bg); }
.dashboard-page .toggle-switch-container label { margin-bottom: 0; font-weight: 500; }
.dashboard-page .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.dashboard-page .toggle-switch input { opacity: 0; width: 0; height: 0; }
.dashboard-page .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.dashboard-page .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.dashboard-page input:checked + .toggle-slider { background-color: var(--primary-color); }
.dashboard-page input:checked + .toggle-slider:before { transform: translateX(22px); }
.dashboard-page .view-account-details .detail-item { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-page .view-account-details .detail-item:last-of-type { border-bottom: none; }
.dashboard-page .view-account-details .detail-label { color: var(--text-light); font-weight: 500; }
.dashboard-page .view-account-details .detail-value { font-weight: 600; }
.dashboard-page .linked-account-item { cursor: pointer; }
.dashboard-page .input-hint { font-size: 0.8rem; color: var(--text-light); margin-top: 5px; padding-left: 2px; }
.dashboard-page .activity-details p { overflow-wrap: break-word; }

/* ==========================================================================
   --- NFT DETAILS MODAL - PROPERTIES LIST FIX ---
   ========================================================================== */

.dashboard-page .properties-list {
    display: flex;
    flex-direction: column; /* Stacks each property vertically */
    gap: 0.75rem; /* Adds space between each property line */
    width: 100%;
}

.dashboard-page .property-item {
    display: flex;
    justify-content: space-between; /* Pushes the label and value to opposite ends */
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color); /* Separator line */
    font-size: 0.9rem;
}

.dashboard-page .property-item:last-child {
    border-bottom: none; /* Removes the line from the very last item */
}

.dashboard-page .property-item span {
    color: var(--text-light); /* Lighter color for the property label (e.g., "Description") */
}

.dashboard-page .property-item strong {
    color: var(--text-dark); /* Standard text color for the property value */
    text-align: right;
}

/* --- Dark Mode Adjustments for Properties List --- */
body[data-theme='dark'] .property-item {
    border-bottom-color: #3a3a3a; /* Darker border for dark mode */
}

body[data-theme='dark'] .property-item span {
    color: #a0a0a0; /* Lighter grey for labels in dark mode */
}

/* ==========================================================================
   --- NFT MARKETPLACE & MODAL - BENEFITS LIST STYLING ---
   ========================================================================== */

/* This styles the <ul> container */
.dashboard-page .package-features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    text-align: left; /* Ensures text is left-aligned */
    display: flex;
    flex-direction: column;
    gap: 8px; /* Adds consistent space between list items */
}

/* This styles each <li> list item */
.dashboard-page .package-features li {
    display: flex;
    align-items: flex-start; /* Aligns checkmark with top of text */
    gap: 10px; /* Space between checkmark and text */
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.5;
}

/* This pseudo-element creates the green checkmark */
.dashboard-page .package-features li::before {
    /* --- CORE ICON PROPERTIES (THE FIX) --- */
    font-family: "Font Awesome 6 Free"; /* Use the correct font family */
    font-weight: 900; /* This is required to select the "Solid" icon style */
    content: "\f00c"; /* The correct Unicode for the checkmark icon */
    -webkit-font-smoothing: antialiased; /* Ensures the icon looks crisp */
    display: inline-block; /* Ensures proper alignment and spacing */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    
    /* --- VISUAL STYLING --- */
    color: var(--positive-green);
    font-size: 0.9rem;
    margin-top: 3px; /* Fine-tunes vertical alignment */
}

/* --- Dark Mode Adjustment for the list text --- */
body[data-theme='dark'] .package-features li {
    color: #f8f9fa; /* A light, readable color for dark mode */
}

/* --- PROFILE PAGE & TABS STYLES --- */
.dashboard-page .profile-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.dashboard-page .profile-tab-link { background: none; border: none; padding: 1rem; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; position: relative; }
.dashboard-page .profile-tab-link.active { color: var(--text-dark); }
.dashboard-page .profile-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-color); }
.dashboard-page .profile-picture-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.dashboard-page .profile-picture-wrapper { position: relative; width: 120px; height: 120px; }
.dashboard-page .profile-picture { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background-color: var(--secondary-bg); border: 2px solid var(--border-color); }
.dashboard-page .profile-picture-upload-btn { position: absolute; bottom: 0; right: 0; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dashboard-page .profile-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media screen and (min-width: 768px) { .dashboard-page .profile-grid { grid-template-columns: 1fr 1fr; } }

/* --- PROFILE PAGE HEADING SPACING FIX --- */
.dashboard-page #profile-content .card h2 {
    font-size: 1rem;              /* Adjusts the font size to be more suitable */
    font-weight: 600;             /* Makes the font a bit bolder */
    text-transform: uppercase;    /* Keeps the all-caps style */
    color: var(--text-light);     /* Changes the color to a lighter grey for better hierarchy */
    letter-spacing: 0.8px;        /* THIS IS THE KEY FIX: It adds space between letters */
    margin-bottom: 1.5rem;        /* Adds some space below the heading */
    margin-top: 2rem;             /* Adds space above the heading */
    padding-bottom: 0.5rem;       /* Adds a little space before the border */
    border-bottom: 1px solid var(--border-color); /* Adds a subtle separator line */
}

/* This removes the extra top margin from the very first heading in each card */
.dashboard-page #profile-content .card h2:first-child {
    margin-top: 0;
}

/* --- KYC SECTION STYLES --- */
.dashboard-page .kyc-status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; text-transform: capitalize; }
.dashboard-page .kyc-status-badge.verified { background-color: #e0f5ea; color: #158a4a; }
.dashboard-page .kyc-status-badge.pending { background-color: #fff3cd; color: #856404; }
.dashboard-page .kyc-status-badge.unverified { background-color: #f7e3e3; color: #db3b3b; }
.dashboard-page .kyc-upload-area { text-align: center; border: 2px dashed var(--border-color); border-radius: 8px; padding: 2rem; }
.dashboard-page .kyc-upload-area .fa-id-card { font-size: 2.5rem; color: var(--text-light); margin-bottom: 1rem; }

/* --- KYC Rejection Notice Styles --- */
.dashboard-page .kyc-rejected-notice {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #f7e3e3; /* Light red background */
    border: 1px solid var(--negative-red);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px; /* Space between the notice and the upload form */
}

.dashboard-page .kyc-rejected-notice i {
    font-size: 1.5rem;
    color: var(--negative-red);
    margin-top: 3px;
}

.dashboard-page .kyc-rejected-notice p {
    margin: 0;
    line-height: 1.5;
}

.dashboard-page .kyc-rejected-notice p:first-child {
    font-weight: 600;
    color: var(--text-dark);
}

.dashboard-page .kyc-rejected-notice p:last-child {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* --- REFERRALS SECTION STYLES --- */
.dashboard-page .referral-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-page .stat-card { background-color: var(--secondary-bg); padding: 1.5rem; border-radius: 12px; text-align: center; }
.dashboard-page .stat-card .stat-value { font-size: 2rem; font-weight: 700; margin: 0; }
.dashboard-page .stat-card .stat-label { font-size: 0.9rem; color: var(--text-light); margin: 0; }
.dashboard-page .referral-link-container { display: flex; gap: 0.5rem; margin-top: 1rem; }
.dashboard-page .referral-link-container input { flex-grow: 1; }
.dashboard-page .referral-link-container .btn { width: auto; flex-shrink: 0; }
.dashboard-page .card h2 { font-size: 1.25rem; margin-top:0; }

/* --- Profile Page: Referral Link Input Styling --- */
.dashboard-page .referral-link-container {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    /* Add a focus ring to the whole group when a child is active */
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dashboard-page .referral-link-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

.dashboard-page .referral-link-container input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: var(--text-dark);
    /* Remove default focus outline from the input itself */
    outline: none;
}

.dashboard-page .referral-link-container .btn {
    border-radius: 0 6px 6px 0; /* Only round the right corners */
    flex-shrink: 0;
    /* Remove box-shadow to look more integrated */
    box-shadow: none;
    border-left: 1px solid var(--border-color);
}

/* --- UNIFIED DASHBOARD FORM STYLES (REPLACES MODAL-ONLY STYLES) --- */
.dashboard-page .form-group {
    margin-bottom: 1.25rem;
}
.dashboard-page .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600; /* Made slightly bolder for clarity */
    margin-bottom: 8px;
    color: var(--text-dark);
}
.dashboard-page .form-group input,
.dashboard-page .form-group select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 1rem;
    color: var(--text-dark);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dashboard-page .form-group input:focus,
.dashboard-page .form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}
.dashboard-page .form-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
    padding-right: 40px;
}
.dashboard-page .form-group input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* --- CUSTOM DASHBOARD & PROFILE STYLES --- */
.dashboard-page .wallet-summary-card .balance-amount { display: flex; align-items: baseline; gap: 4px; }
.dashboard-page .wallet-summary-card .balance-amount span { font-size: 1.75rem; font-weight: 600; line-height: 1; }
/* ... (rest of your custom CSS from the previous step) ... */

/* --- INVEST PAGE STYLES --- */
.dashboard-page .invest-step .step-header h2 {
    font-size: 1.5rem; /* Makes the step title smaller */
    letter-spacing: normal; /* Resets the squished letter spacing */
    line-height: 1.3;
}

.dashboard-page .package-card .package-details h3 {
    margin-top: 15px; /* THIS IS THE FIX: Adds space below the image */
}

.dashboard-page .invest-step .step-header {
    margin-bottom: 1.5rem; /* Adds space between the header text and the card below it */
}

.dashboard-page .invest-step .step-header h2 {
    /* ... existing rule ... */
}

.dashboard-page .package-card .package-details h3 {
    /* ... existing rule ... */
}

/* NEW styles for the Order Summary */
.dashboard-page .summary-details {
    margin: 1.5rem 0;
}
.dashboard-page .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .summary-item:last-child {
    border-bottom: none;
}
.dashboard-page .summary-item.total {
    font-size: 1.1rem;
}
.dashboard-page .summary-item span {
    color: var(--text-light);
}

/* NEW styles for the "What Happens Next" box */
.dashboard-page .what-happens-next {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}
.dashboard-page .what-happens-next h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.dashboard-page .what-happens-next p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* NEW styles to fix the checkbox alignment */
.dashboard-page .terms-agreement {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between checkbox and text */
    margin-bottom: 1.5rem;
}
.dashboard-page .terms-agreement input[type="checkbox"] {
    width: auto; /* Allow checkbox to be its natural size */
    margin-bottom: 0;
}
.dashboard-page .terms-agreement label {
    margin-bottom: 0;
    font-weight: 500;
}

/* ADD THIS NEW RULE TO FIX THE BUTTON SIZES */
.dashboard-page .form-navigation .btn {
    padding: 12px 10px;  /* Reduces the button height and inner spacing */
    font-size: 0.9rem;   /* Makes the text slightly smaller to prevent wrapping */
}

/* --- INVEST PAGE STEP 4 ALIGNMENT --- */
.dashboard-page .success-message-card .step-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-page .success-message-card .step-title-wrapper h2 {
    margin: 0; /* Removes default heading margins */
}

/* --- WALLET PAGE BUTTON CENTERING --- */
.dashboard-page .wallet-actions {
    display: flex;
    gap: 15px;
    justify-content: center; /* This centers the button(s) inside */
}

.dashboard-page .wallet-actions .btn {
    flex: 0 1 220px; /* Prevents the button from growing to full width */
}

/* --- NEW CHART STYLES --- */
.dashboard-page .chart-card .chart-header {
    text-align: center;
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
}
.dashboard-page .chart-card .chart-header h3 {
    font-size: 2.5rem;
    font-weight: 700;
}
.dashboard-page .chart-card .chart-header p {
    margin: 5px 0 0 0;
    font-weight: 600;
}
.dashboard-page .chart-card .chart-header p.positive {
    color: var(--positive-green);
}
.dashboard-page .chart-card .chart-header p.negative {
    color: var(--negative-red);
}
#earnings-chart {
    margin-top: -20px; /* Pulls chart up slightly */
    margin-bottom: 20px;
}

/* --- CORRECTED CHART STYLES --- */
#earnings-chart {
    margin: 10px 0;
}

/* This hides the empty text from the custom tooltip, leaving only the line */
.apexcharts-tooltip.apexcharts-active {
    display: none;
}

/* --- DESKTOP UI POLISH & LAYOUT ENHANCEMENTS (CORRECTED V2) --- */

/* 1. Universal Modal Title Fix */
.dashboard-page .modal-header h2 {
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* 2. CRITICAL MOBILE DASHBOARD FIX */
@media screen and (max-width: 767px) {
    /* This block restores the mobile dashboard's Available Balance view */
    .dashboard-page .chart-card .chart-header {
        display: block; /* Re-enables the header container */
    }
    .dashboard-page .chart-card .balance-info-wrapper {
        display: block; /* Ensures the balance info is visible */
        text-align: center; /* Re-centers the text content */
    }
    .dashboard-page .chart-card .balance-amount,
    .dashboard-page .chart-card .balance-subtitle {
        justify-content: center; /* Re-centers the flex items */
    }
    .dashboard-page .chart-card .chart-totals-wrapper {
        display: none; /* Explicitly hides the redundant chart totals on mobile */
    }
}

/* --- FINAL DESKTOP UI & LAYOUT ENHANCEMENTS V3 --- */

/* 1. Universal Modal Title Fix (Applies Everywhere) */
.dashboard-page .modal-header h2 {
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* 2. DESKTOP-ONLY STYLES (Will not affect mobile) */
@media screen and (min-width: 768px) {

    /* 2.1 Dashboard Page: Corrected Layout */
    .dashboard-page #home-content .dashboard-grid {
        grid-template-columns: 1fr 1fr; /* Two columns */
        grid-template-areas:
            "balance chart"
            "activity activity";
        gap: 30px;
    }
    .dashboard-page .balance-card { grid-area: balance; }
    .dashboard-page .chart-card { grid-area: chart; }
    .dashboard-page .activity-card { grid-area: activity; }

    /* Style the balance card to be the "hero" */
    .dashboard-page .balance-card {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center the content vertically */
    }
    .dashboard-page .balance-card .balance-amount p {
        font-size: 3.5rem;
    }
    .dashboard-page .balance-card .balance-amount span {
        font-size: 2rem;
    }
    .dashboard-page .balance-card .balance-subtitle {
        font-size: 1rem;
        color: var(--positive-green); /* Ensure color is applied */
        font-weight: 600;
    }
    .dashboard-page .balance-card .balance-actions {
        display: none; /* Hide withdraw/deposit buttons on dashboard */
    }

    /* Hide the redundant header on the chart card */
    .dashboard-page .chart-card .chart-header {
        display: none;
    }

    /* 2.2 Wallet Page: Layout & Button Fixes */
    .dashboard-page #wallet-content .wallet-layout-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }
    .dashboard-page #wallet-content .wallet-summary-card {
        margin-bottom: 0;
    }
    .dashboard-page #wallet-content .wallet-balance-info {
        align-items: flex-start;
    }
    .dashboard-page #wallet-content .wallet-actions .btn {
        flex-grow: 0;
        width: auto;
        padding-left: 30px;
        padding-right: 30px;
    }
    .dashboard-page #wallet-content .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .dashboard-page #wallet-content #add-account-btn {
        padding: 8px 16px;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    /* 2.3 Invest Page: Package Size & Button Alignment */
    .dashboard-page .package-selection-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: stretch;
    }
    .dashboard-page .package-card {
        display: flex;
        flex-direction: column;
    }
    .dashboard-page .package-image {
        max-height: 280px;
        width: 100%;
        object-fit: contain;
    }
    .dashboard-page .package-details {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .dashboard-page .package-features {
        flex-grow: 1;
    }
    .dashboard-page .select-package-btn {
        margin-top: auto;
    }

    /* 2.4 Profile Page: Spacing Between Cards */
    .dashboard-page #profile-settings-content .profile-cards-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 768px) { /* Adjust the max-width as needed for your definition of mobile */
  #chart-total-earnings {
    display: none;
  }

  #chart-comparison {
    display: none;
  }
}

/* --- CHARGESHARE ADMIN PANEL STYLES (V3 - FINAL) --- */
/* --- THIS IS THE START OF THE ADMIN-SPECIFIC STYLES --- */

.admin-page {
    background-color: #f2f2f2; /* Use a variable from the dashboard theme */
    opacity: 0;
    transition: opacity 0.3s;
    min-height: 100vh;
}

.admin-wrapper {
    display: flex;
    width: 100%;
}

/* --- FIX FOR ADMIN MODAL STACKING CONTEXT --- */
.admin-page .main-content {
    position: relative; /* This is necessary for z-index to apply */
    z-index: 1;
}

/* --- OVERRIDES & DEFAULTS --- */
.admin-page h1, 
.admin-page .desktop-header h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    text-transform: none !important;
    white-space: normal !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Specific fix for modal title */
.admin-page .modal-header #admin-modal-title {
    font-size: 1.5rem !important; /* Make modal titles smaller */
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.admin-page .main-content {
    width: 100%;
    flex-grow: 1;
    padding: 40px;
    height: 100vh;
    overflow-y: auto;
}


/* Re-using dashboard variables for consistency */
.admin-page {
    --primary-color: #1e1e1e;
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    --info-blue: #3b5bdb;
}

/* Use the same form group styles as the dashboard */
.admin-page .form-group {
    margin-bottom: 1.25rem;
}
.admin-page .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}
.admin-page .form-group input,
.admin-page .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #FFF;
    font-size: 1rem;
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-page .form-group input:focus,
.admin-page .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

/* --- DESKTOP SIDEBAR --- */
.admin-page .sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 260px;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    padding: 20px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2002;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
.admin-page .sidebar-logo { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); text-decoration: none; padding: 15px 10px; text-align: center; }
.admin-page .sidebar-links { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.admin-page .sidebar-link { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.admin-page .sidebar-link i { font-size: 1.2rem; width: 20px; text-align: center; }
.admin-page .sidebar-link:hover { background-color: var(--secondary-bg); }
.admin-page .sidebar-link.active { background-color: var(--primary-color); color: white; }
.admin-page .sidebar-logout { margin-top: auto; }
.admin-page .sidebar-logout button { width: 100%; display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; color: var(--text-light); font-weight: 600; font-family: 'Inter', sans-serif; font-size: 1rem; background: none; border: none; cursor: pointer; transition: background-color 0.2s; }
.admin-page .sidebar-logout button:hover { background-color: var(--secondary-bg); }

/* --- MOBILE NAVIGATION --- */
.admin-mobile-header { display: none; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.admin-page.sidebar-open .sidebar-nav { transform: translateX(0); }
.admin-page.sidebar-open .mobile-overlay { opacity: 1; visibility: visible; }

/* --- MODAL STYLES (CORRECTED) --- */
.admin-page .modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 3000; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.admin-page .modal-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }
.admin-page .modal-content {
    background-color: var(--card-bg); border-radius: 16px;
    padding: 30px; width: 100%; max-width: 650px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: scale(0.95); transition: transform 0.3s ease;
    display: flex; flex-direction: column;
}
.admin-page .modal-overlay:not(.hidden) .modal-content { transform: scale(1); }
.admin-page .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.admin-page .modal-close-button { background: none; border: none; font-size: 2.5rem; font-weight: 300; line-height: 1; color: var(--text-light); cursor: pointer; }
.admin-page .modal-body { overflow-y: auto; max-height: 75vh; padding-right: 15px; }
.admin-page .modal-card { background-color: var(--secondary-bg); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.admin-page .modal-card:last-child { margin-bottom: 0; }
.admin-page .modal-card h4 { margin-top: 0; margin-bottom: 15px; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.admin-page .modal-actions-group { display: flex; gap: 15px; margin-top: 20px;}
.admin-page .modal-actions-group .btn { flex: 1; }
.admin-page .kyc-viewer { margin-bottom: 15px; }
.admin-page .kyc-viewer img { max-width: 100%; height: auto; max-height: 250px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; }
.admin-page .modal-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.admin-page .modal-tab-link { background: none; border: none; padding: 1rem; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; position: relative; }
.admin-page .modal-tab-link.active { color: var(--text-dark); }
.admin-page .modal-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-color); }
.admin-page .modal-tab-pane.hidden { display: none; }


/* --- DASHBOARD & TABLE STYLES --- */
.admin-page .card { background-color: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); }
.admin-page .desktop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-page .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.admin-page .stat-card { text-align: center; padding: 25px; }
.admin-page .stat-card .stat-value { font-size: 2.5rem; margin:0; font-weight: 700; }
.admin-page .stat-card .stat-label { margin: 5px 0 0 0; color: var(--text-light); }
.admin-page .admin-table-controls { padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.admin-page .admin-table-controls input { width: 100%; max-width: 400px; padding: 10px 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--secondary-bg); font-size: 1rem; }
.admin-page .admin-table-container { overflow-x: auto; }
.admin-page .admin-table { width: 100%; border-collapse: collapse; }
.admin-page .admin-table th, .admin-page .admin-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; vertical-align: middle;}
.admin-page .admin-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-page .admin-table tbody tr:hover { background-color: var(--secondary-bg); }
.admin-page .status-badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.admin-page .status-badge.status-verified, .admin-page .status-badge.status-active { background-color: #e0f5ea; color: #158a4a; }
.admin-page .status-badge.status-pending { background-color: #fff3cd; color: #856404; }
.admin-page .status-badge.status-rejected, .admin-page .status-badge.status-banned { background-color: #f7e3e3; color: #db3b3b; }
.admin-page .status-badge.status-not-submitted { background-color: #eef0f3; color: #6c757d; }
.admin-page .btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 20px; font-size: 1rem; font-weight: 600; border-radius: 8px; border:none; cursor:pointer; text-decoration: none; }
.admin-page .btn-sm { padding: 8px 16px; font-size: 0.875rem; }
.admin-page .btn i { margin-right: 8px; }
.admin-page .btn-primary { background-color: var(--primary-color); color: white; }
.admin-page .btn-success { background-color: var(--positive-green); color: white; }
.admin-page .btn-danger { background-color: var(--negative-red); color: white; }
.admin-page .btn-outline { background-color: transparent; color: var(--text-dark); border: 1px solid var(--border-color); }
.admin-page .empty-state, .admin-page .error-state { text-align: center; padding: 40px; }
.admin-page .empty-state { color: var(--text-light); }
.admin-page .error-state { color: var(--negative-red); font-weight: 500; }

/* --- RESPONSIVE BREAKPOINT --- */
@media screen and (min-width: 992px) {
    .admin-page .sidebar-nav { transform: translateX(0); }
    .admin-page .main-content { margin-left: 260px; }
}

@media screen and (max-width: 991px) {
    .admin-page .main-content { padding: 20px; padding-top: 80px; }
    .admin-page .desktop-header { display: none; }
    .admin-page .admin-mobile-header { display: flex; align-items: center; gap: 20px; position: fixed; top: 0; left: 0; right: 0; height: 60px; padding: 0 20px; background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); z-index: 2000; }
    .admin-page .admin-menu-button { background: none; border: none; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; }
    .admin-page .mobile-header-title { font-size: 1.2rem; font-weight: 600; }
}

.admin-page .user-info-grid {
    display: grid;
    grid-template-columns: max-content 1fr; /* Label column sized to content, value column takes rest */
    gap: 20px 30px; /* 20px vertical gap, 30px horizontal gap */
    align-items: center;
}

.admin-page .user-info-grid .info-item {
    display: contents; /* Allows children to be direct grid items */
}

.admin-page .user-info-grid .info-item strong {
    font-weight: 600;
    color: var(--text-light); /* Lighter color for the label */
    text-align: right;
}

.admin-page .user-info-grid .info-item span {
    font-weight: 500;
    color: var(--text-dark); /* Darker color for the value */
    overflow-wrap: break-word; /* Prevents long IDs from breaking layout */
}

/* --- ADMIN PANEL: MANAGE USER MODAL - USER PORTS SECTION --- */

/* 1. Main container for the list of ports */
.admin-page .user-ports-list {
    /* Removes default list styling */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Creates space between each port card */
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

/* 2. Individual port item styling (the "card") */
.admin-page .port-list-item {
    background-color: #f9f9f9; /* A slightly off-white background */
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Consistent rounded corners */
    padding: 20px;
    display: grid; /* Use grid for flexible layout */
    grid-template-columns: 1fr auto; /* Info on left, button on right */
    grid-template-rows: auto auto; /* Two rows for content */
    align-items: center;
    gap: 5px 20px; /* 5px vertical gap, 20px horizontal */
}

/* 3. Port Location Name (e.g., "Freuchat Supermarket") */
.admin-page .port-list-item-name {
    grid-column: 1 / 2; /* Span the first column */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

/* 4. Port Identifier (e.g., "#C-12") */
.admin-page .port-list-item-id {
    grid-column: 1 / 2; /* Span the first column, on the second row */
    font-family: monospace; /* Gives IDs a distinct, code-like look */
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* 5. Status Badge Container */
.admin-page .port-list-item-status {
    grid-column: 2 / 3; /* Second column */
    grid-row: 1 / 2;    /* First row */
    justify-self: end;  /* Aligns the badge to the right */
}

/* 6. Action Button */
.admin-page .port-list-item .btn {
    grid-column: 2 / 3; /* Second column */
    grid-row: 2 / 3;    /* Second row */
    width: auto;        /* Button should only be as wide as its text */
    padding: 8px 16px;  /* Make the button a bit smaller */
    font-size: 0.875rem;
}

/* --- ADMIN PANEL: SITE SETTINGS (IMPROVED STYLES) --- */

/* 1. Style the introductory header text inside the card */
.admin-page #admin-settings-content .card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.admin-page #admin-settings-content .card p {
    color: var(--text-light);
    margin: 0 0 30px 0; /* Add space below the description */
    font-size: 0.95rem;
    max-width: 600px; /* Improve readability */
    line-height: 1.5;
}

/* 2. Style individual form groups for better spacing */
.admin-page #site-settings-form .form-group {
    margin-bottom: 25px; /* Consistent spacing between fields */
}

/* 3. Style the labels to match the rest of the admin panel */
.admin-page #site-settings-form .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}

/* 4. Ensure input fields have a white background, consistent with other forms */
.admin-page #site-settings-form .form-group input {
    background-color: #FFFFFF;
}

/* 5. Style the container for the save button for proper alignment */
.admin-page #site-settings-form .modal-actions-group {
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
    margin-top: 15px; /* Adjusts space above the separator line */
    display: flex;
    justify-content: flex-end; /* This aligns the button to the right */
}

/* 6. Ensure the button itself is not full-width */
.admin-page #site-settings-form .btn {
    width: auto; /* Allows the button to size to its content */
}

/* ===============================================
   Modal Body Scrolling Fix
   =============================================== */

/* This new class wraps the scrollable content inside the withdrawal modal */
.modal-body {
  /* 
    This prevents the modal body from growing too tall, especially on smaller screens. 
    60vh means it will be a maximum of 60% of the viewport's (browser window) height.
  */
  max-height: 60vh;

  /* 
    This is the key property. It adds a vertical scrollbar automatically, 
    but ONLY if the content inside is taller than the max-height set above.
  */
  overflow-y: auto;
}

/* --- PRESERVED ORIGINAL CSS FROM CHARGEPACE --- */
/* ... (all of your original style.css content is preserved here) ... */

/* ===============================================
   NEW STYLES FOR NODEPACE DASHBOARD
   =============================================== */

/* --- General Structure & Navigation --- */
.dashboard-page .profile-header-link {
    font-size: 2rem;
    color: var(--text-dark);
    padding: 0;
}
.dashboard-page .balance-subtitle-group {
    margin-top: 15px;
}
.dashboard-page .balance-subtitle.wallet {
    color: var(--text-light);
    font-weight: 500;
}
.dashboard-page .balance-subtitle.wallet i {
    color: var(--primary-color);
}
.dashboard-page .activity-toggle-card {
    padding: 0;
}
.dashboard-page .card-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .tab-link {
    background: none;
    border: none;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    flex-grow: 1; /* <-- This makes it expand */
    text-align: center; /* <-- This centers the text */
}
.dashboard-page .tab-link.active {
    color: var(--text-dark);
}
.dashboard-page .tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--primary-color);
}
.dashboard-page .tab-content.hidden {
    display: none;
}

/* --- NFT Hub Page --- */
.dashboard-page .rewards-dashboard {
    display: grid;
    /* This creates a firm 2x2 grid */
    grid-template-columns: 1fr 1fr;
    /* Adjusts the gap for a cleaner look */
    gap: 30px 20px; /* 30px vertical gap, 20px horizontal */
    text-align: left; /* Aligns text to the left as per the design */
    padding: 20px;
}
.dashboard-page .reward-stat {
    display: flex;
    flex-direction: column;
}
.dashboard-page .reward-label {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 8px;
}
.dashboard-page .reward-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.dashboard-page .section-title {
    font-size: 1.25rem;
    margin: 30px 0 15px 0;
}
.dashboard-page .nft-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.dashboard-page .empty-state-text {
    color: var(--text-light);
    padding: 30px;
    text-align: center;
    grid-column: 1 / -1; /* Make it span all columns */
}
.dashboard-page .nft-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}
.dashboard-page .nft-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
.dashboard-page .nft-card-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background-color: var(--secondary-bg);
    cursor: pointer;
}
.dashboard-page .nft-card-details {
    padding: 15px;
}
.dashboard-page .nft-card-details h4 {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.dashboard-page .nft-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.dashboard-page .nft-card-actions .btn {
    flex: 1;
    font-size: 0.8rem;
    padding: 10px;
}
.dashboard-page .btn-danger-outline {
    background-color: transparent;
    border: 1px solid var(--negative-red);
    color: var(--negative-red);
    width: 100%;
}
.dashboard-page .btn-danger-outline:hover {
    background-color: var(--negative-red);
    color: white;
}

/* --- Mint Page --- */
.dashboard-page .nft-gallery-grid.marketplace .nft-card-details {
    text-align: center;
}
.dashboard-page .nft-price {
    margin: 10px 0;
}
.dashboard-page .nft-price .eth {
    font-size: 1.25rem;
    font-weight: 700;
}
.dashboard-page .nft-price .usd {
    font-size: 0.9rem;
    color: var(--text-light);
}
.dashboard-page .form-control-file {
    padding: 10px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
}
.dashboard-page textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    resize: vertical;
}
.dashboard-page .mint-fee-summary {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    font-weight: 600;
}

/* --- Wallet Page --- */
.dashboard-page .wallet-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media screen and (min-width: 992px) {
    .dashboard-page .wallet-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "main staking"
            "connection history";
    }
    .wallet-main-card { grid-area: main; }
    .staking-hub-card { grid-area: staking; }
    #wallet-connection-card { grid-area: connection; }
    .transaction-history-card { grid-area: history; }
}
.dashboard-page .wallet-main-card .balance-amount { justify-content: center; }
.dashboard-page .staking-hub-card .form-control-sm {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-weight: 600;
}
.dashboard-page .staking-stats {
    display: grid;
    /* Mobile-First: Create a 2x2 grid by default */
    grid-template-columns: 1fr 1fr;
    /* Add spacing between the grid items */
    gap: 20px 10px; /* 20px vertical gap, 10px horizontal */
    text-align: center;
    margin-bottom: 20px;
}

/* For wider screens (like tablets and desktops), switch to a single row of 4 */
@media screen and (min-width: 576px) {
    .dashboard-page .staking-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}
.dashboard-page .staking-stat-item span {
    font-size: 0.8rem;
    color: var(--text-light);
}
.dashboard-page .staking-stat-item strong {
    display: block;
    font-size: 1.2rem;
    margin-top: 4px;
}
.dashboard-page .staking-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.dashboard-page .staking-actions .btn {
    flex: 1;
}
.dashboard-page .wallet-connection-prompt {
    text-align: center;
}
.dashboard-page .wallet-connection-prompt p {
    color: var(--text-light);
    margin: 10px 0 20px 0;
}
.dashboard-page .wallet-connection-info .wallet-address-display {
    display: flex;
    gap: 10px;
    align-items: center;
}
.dashboard-page .wallet-connection-info i {
    font-size: 1.5rem;
}
.dashboard-page .wallet-connection-info input {
    flex-grow: 1;
    font-family: monospace;
}

/* --- Games Page --- */
.dashboard-page .games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.dashboard-page .game-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.dashboard-page .game-banner {
    height: 180px;
    background-size: cover;
    background-position: center;
}
.dashboard-page .game-details {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.dashboard-page .game-details h3 {
    margin: 0 0 10px 0;
}
.dashboard-page .game-details p {
    color: var(--text-light);
    flex-grow: 1;
    line-height: 1.6;
}
.dashboard-page .game-details .btn {
    margin-top: 20px;
}

/* --- Profile Page --- */
.dashboard-page .toggle-switch-container.theme-toggle {
    background-color: transparent;
    padding: 0;
    margin-bottom: 20px;
}
.dashboard-page #logout-button-mobile {
    margin-top: 20px;
}
.dashboard-page .chat-window {
    height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}
/* --- Support Chat: Unified Input Field Styling --- */
.dashboard-page .chat-input-form {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dashboard-page .chat-input-form:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

.dashboard-page .chat-input-form input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
}

.dashboard-page .chat-input-form .btn {
    border-radius: 0 6px 6px 0;
    flex-shrink: 0;
    box-shadow: none;
    border-left: 1px solid var(--border-color);
    height: 100%; /* Ensure button height matches */
}

/* --- Support Chat: Message Bubble Styling --- */
.dashboard-page .chat-window {
    /* This ensures messages start from the bottom and stack up */
    display: flex;
    flex-direction: column-reverse; 
}

.dashboard-page .chat-bubble {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.dashboard-page .chat-bubble p {
    margin: 0;
    word-wrap: break-word; /* Prevents long words from overflowing */
}

.dashboard-page .chat-bubble span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
    text-align: right;
}

/* User's messages (blue, on the right) */
.dashboard-page .chat-bubble.user {
    align-self: flex-end;
    background-color: #007bff; /* A nice blue for the user */
    color: white;
    border-bottom-right-radius: 4px; /* Gives it the "bubble" tail */
}
.dashboard-page .chat-bubble.user span {
    text-align: right;
}

/* Admin/Support messages (grey, on the left) */
.dashboard-page .chat-bubble.admin {
    align-self: flex-start;
    background-color: var(--secondary-bg);
    color: var(--text-dark);
    border-bottom-left-radius: 4px; /* Bubble tail on the other side */
}
.dashboard-page .chat-bubble.admin span {
    text-align: left;
}

/* --- Modals --- */
.dashboard-page .modal-overlay.fullscreen .modal-content {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: flex; /* Add this */
    flex-direction: column;
}
.dashboard-page .game-content-area {
    flex-grow: 1;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    overflow-y: auto;
}
.dashboard-page .nft-modal-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media screen and (min-width: 576px) {
    .dashboard-page .nft-modal-body {
        grid-template-columns: 200px 1fr;
    }
}
.dashboard-page .modal-nft-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}
.dashboard-page .nft-properties h3 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.dashboard-page .properties-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 15px;
    font-size: 0.9rem;
}
.dashboard-page .properties-list .prop-label {
    color: var(--text-light);
    font-weight: 500;
}
.dashboard-page .properties-list .prop-value {
    font-weight: 600;
}
.dashboard-page .withdrawal-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* --- Find and REPLACE the entire quick actions block with this --- */
.quick-actions-card {
    background: none;
    border: none;
    padding: 0;
}

/* Default styles (Mobile-First) */
.quick-actions-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 10px;
    height: 100%;
}

.quick-action-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-dark);
    flex-basis: 70px; /* Give each item a base width */
    text-align: center;
}

.quick-action-icon-wrapper {
    width: 60px; /* Slightly smaller for mobile */
    height: 60px;
    background-color: var(--secondary-bg);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-action-link:hover .quick-action-icon-wrapper {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.07);
}

.quick-action-icon-wrapper i {
    font-size: 1.4rem;
    color: var(--text-dark);
}

.quick-action-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
}

/* Styles for Desktop (screens 992px and wider) */
@media screen and (min-width: 992px) {
    .quick-actions-card {
        padding: 20px; /* Add padding back on desktop */
        background-color: var(--card-bg); /* Give it a card background */
        border: 1px solid var(--border-color);
        border-radius: 12px;
    }

    .quick-actions-grid {
        display: grid; /* Switch to a 2x2 grid */
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 20px;
    }

    .quick-action-icon-wrapper {
        width: auto; /* Let it fill the space */
        height: auto;
        padding: 20px; /* Use padding instead of fixed height/width */
        background-color: var(--secondary-bg);
    }
    
    .quick-action-label {
        font-size: 1rem; /* Make label text larger on desktop */
    }
}

/* --- Confirmation Modal Specific Styles --- */
.confirmation-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
}

#confirmation-modal-image {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#confirmation-modal-image.hidden {
    display: none;
}

#confirmation-modal-message {
    font-size: 1rem;
    color: #555;
    margin-bottom: 2rem;
    max-width: 350px;
}

.modal-actions.confirmation {
    border-top: none;
    padding-top: 0;
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

/* --- Transaction Status Badges --- */
.status-pending {
    color: #ffc107; /* Amber */
    font-weight: 500;
}

.status-completed, .status-approved {
    color: #28a745; /* Green */
    font-weight: 500;
}

.status-rejected {
    color: #dc3545; /* Red */
    font-weight: 500;
}

/* --- Token Swap Card Styles --- */
.dashboard-page .token-swap-card .swap-group {
    margin-bottom: 15px;
}
.dashboard-page .token-swap-card .swap-input-group {
    display: flex;
    gap: 10px;
}
.dashboard-page .token-swap-card .swap-input-group input {
    flex-grow: 1;
}
.dashboard-page .token-swap-card .swap-input-group select {
    flex-basis: 120px; /* Give the select a fixed width */
    font-weight: 600;
}
.dashboard-page .swap-icon-divider {
    text-align: center;
    color: var(--text-light);
    margin: 10px 0;
}
.dashboard-page .swap-rate-display {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
    text-align: center;
    margin-top: 15px;
    height: 20px; /* Reserve space to prevent layout shift */
}

/* --- DARK MODE FINAL POLISH (V2) --- */

/* 1. Fix for all Dropdown / <select> Elements */
body[data-theme='dark'] .form-group select,
body[data-theme='dark'] .staking-hub-card .form-control-sm,
body[data-theme='dark'] .token-swap-card .swap-input-group select {
    background-color: #2c2c2c; /* Dark grey background */
    border-color: #3a3a3a;     /* Lighter border */
    color: var(--text-dark);      /* White text */
    /* Update the SVG arrow to be white for dark mode */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
}

/* 2. Fix for Read-Only Input Fields */
body[data-theme='dark'] .form-group input[readonly] {
    background-color: #252525; /* A slightly different dark grey to show it's disabled */
    color: #888; /* Grey out the text to indicate it's not editable */
}

/* 3. Fix for Coin Icons */
body[data-theme='dark'] .activity-icon {
    background-color: #333333 !important; /* Use !important to override inline style if necessary */
}

/* 4. Fix for Staking Hub Buttons */
/* This makes sure all buttons in this specific group have the correct dark theme styling */
body[data-theme='dark'] .staking-actions .btn-primary {
    background-color: var(--primary-color);
    color: #1e1e1e;
}
body[data-theme='dark'] .staking-actions .btn-secondary {
    background-color: #333333;
    color: var(--text-dark);
}
body[data-theme='dark'] .staking-actions .btn-outline {
    border-color: #555555;
    color: var(--text-dark);
}

/* --- DARK MODE FINAL POLISH (V3) - INPUT FOCUS & AUTOFILL FIX --- */

/* 1. General Input Focus Style for Dark Mode */
/* This rule applies when you CLICK or TAB into any input field */
body[data-theme='dark'] .form-group input:focus,
body[data-theme='dark'] .form-group textarea:focus,
body[data-theme='dark'] .form-group select:focus,
body[data-theme='dark'] .swap-input-group input:focus,
body[data-theme='dark'] .chat-input-form input:focus {
    background-color: #333333; /* Use a slightly lighter dark grey to indicate focus */
    border-color: var(--primary-color); /* Use the primary color (white) for the border glow */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1); /* Add a subtle outer glow */
    color: var(--text-dark); /* Ensure the text color remains white */
}

/* 2. CRITICAL FIX for Browser Autofill (especially Chrome) */
/* This forces the browser NOT to use its default white/yellow autofill background */
body[data-theme='dark'] input:-webkit-autofill,
body[data-theme='dark'] input:-webkit-autofill:hover,
body[data-theme='dark'] input:-webkit-autofill:focus,
body[data-theme='dark'] input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-dark) !important; /* Force text to be white */
    -webkit-box-shadow: 0 0 0 30px #2c2c2c inset !important; /* This is a trick to force the background color */
    transition: background-color 5000s ease-in-out 0s; /* Prevents a quick flash of the default color */
}

/* --- DARK MODE TOKEN SWAP INPUT FIX --- */

/* 1. Apply the BASE dark theme style to the swap inputs */
/* This is the main fix that makes them dark by default */
body[data-theme='dark'] .swap-input-group input {
    background-color: #2c2c2c; /* Dark grey background */
    border-color: #3a3a3a;     /* Lighter border */
    color: var(--text-dark);      /* White text */
}

/* 2. Ensure the FOCUS style also applies correctly */
/* This makes sure the on-click behavior remains correct */
body[data-theme='dark'] .swap-input-group input:focus {
    background-color: #333333; /* Slightly lighter on focus */
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

/* 3. Ensure the AUTOFILL style also applies for completeness */
body[data-theme='dark'] .swap-input-group input:-webkit-autofill,
body[data-theme='dark'] .swap-input-group input:-webkit-autofill:hover,
body[data-theme='dark'] .swap-input-group input:-webkit-autofill:focus,
body[data-theme='dark'] .swap-input-group input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-dark) !important;
    -webkit-box-shadow: 0 0 0 30px #2c2c2c inset !important;
}

/* --- FORTUNE SPINNER GAME STYLES (CORRECTED V2) --- */
.fortune-spinner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Better vertical spacing */
    align-items: center;
    padding: 1.5rem; /* Reduced padding for mobile */
    height: 100%;
    box-sizing: border-box; /* Ensures padding is included in height */
}

.spinner-wheel-wrapper {
    position: relative;
    width: 280px;  /* Slightly smaller to fit mobile screens better */
    height: 280px;
    flex-shrink: 0; /* Prevents the wheel from shrinking */
}

.spinner-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* Smaller pointer */
    border-right: 20px solid transparent;
    border-top: 30px solid #d93025;
    z-index: 10;
}

.spinner-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 8px solid #333;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    /* The spin animation - now slightly faster */
    transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1); 
}

/* --- THIS IS THE CRITICAL FIX FOR THE WHEEL SEGMENTS --- */
.spinner-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    /* clip-path creates the perfect wedge shape */
    clip-path: polygon(50% 50%, 100% 0, 100% 50%);
}

.spinner-segment .segment-content {
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 0% 100%;
}

.spinner-segment-label {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    padding-left: 30px; /* Push text away from the center */
}
/* --- END OF CRITICAL FIX --- */


.spinner-controls {
    text-align: center;
    width: 100%;
}
.spinner-controls h3 { margin-bottom: 5px; font-size: 1.5rem; }
.spinner-controls p { color: var(--text-light); margin-bottom: 20px; }
.spinner-cost { font-weight: 600; margin-bottom: 20px; }
#spin-btn { width: 100%; max-width: 250px; font-size: 1.2rem; padding: 15px; }


/* Dark Mode Specific Adjustments */
body[data-theme='dark'] .spinner-wheel {
    border-color: #e0e0e0;
}
body[data-theme='dark'] .spinner-segment-label {
    color: #1e1e1e;
}

/* --- CRYPTO FLIP GAME STYLES (CORRECTED) --- */
.game-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
}
.game-container.hidden { display: none; }

.crypto-flip-stage, .crypto-flip-result {
    width: 100%;
    max-width: 350px;
}
.crypto-flip-stage.hidden, .crypto-flip-result.hidden { display: none; }

.flip-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.flip-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.flip-choice-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.07);
}
.flip-choice-btn img {
    width: 60px;
    height: 60px;
}

.crypto-flip-result h2 {
    margin-top: 2rem;
    font-size: 1.75rem;
}

/* Coin Flip Animation */
.coin {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    transform-style: preserve-3d;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}
.coin-heads, .coin-tails {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

@keyframes flip-heads {
    from { transform: rotateY(0); }
    to { transform: rotateY(1800deg); } /* 5 full spins */
}
@keyframes flip-tails {
    from { transform: rotateY(0); }
    to { transform: rotateY(1980deg); } /* 5.5 spins to land on tails */
}

/* --- PATTERN POPPER GAME STYLES --- */
.popper-stats {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 350px;
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.popper-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 350px;
    perspective: 1000px; /* Enables 3D space for children */
}

.popper-card {
    background-color: transparent;
    aspect-ratio: 1 / 1; /* Makes cards perfectly square */
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.popper-card.is-flipped {
    transform: rotateY(180deg);
}

.popper-card .card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border-radius: 12px;
}

.popper-card .card-front {
    /* This is the side with the icon */
    background-color: var(--secondary-bg);
    color: var(--text-color);
    transform: rotateY(180deg);
}

.popper-card .card-back {
    /* This is the visible, dark side of the card */
    background-color: #2c2c2e; /* A dark color for the card back */
    border: 1px solid #444;
}

.popper-card.is-matched {
    transform: rotateY(180deg) scale(0.9);
    opacity: 0.6;
    cursor: default;
}

/* Dark Mode Adjustments */
body[data-theme='dark'] .popper-card .card-back {
    background-color: #2c2c2e;
    border: 1px solid #444;
}

body[data-theme='light'] .popper-card .card-back {
    background-color: #333;
    border: 1px solid #555;
}


.trivia-question-box {
    background-color: var(--secondary-bg);
    border-radius: 12px;
    padding: 2rem;
    margin: 1rem 0;
    width: 100%;
    max-width: 500px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}
.trivia-answers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
}
@media screen and (min-width: 576px) {
    .trivia-answers { grid-template-columns: 1fr 1fr; }
}
.trivia-answer-btn {
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-dark);
    cursor: pointer;
}

/* --- Crypto Flip Game Enhancements --- */

.crypto-flip-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.crypto-flip-stage .form-group {
    width: 80%;
    max-width: 250px;
}

.flip-choices {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
    width: 100%;
}

.flip-choice-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.flip-choice-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.flip-choice-btn img {
    width: 120px;
    height: 120px;
    display: block;
    margin-bottom: 0.5rem;
}

/* Update Coin Flipper Animation to use new images */
.coin-heads {
    background-image: url('images/coin-heads.png');
}
.coin-tails {
    background-image: url('images/coin-tails.png');
}

/* --- Toast Notification Styles --- */
.toast-container {
    position: fixed;
    bottom: 80px; /* Position above the mobile nav */
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateX(120%);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.toast.active {
    opacity: 1;
    transform: translateX(0);
}

.toast.success {
    background-color: var(--positive-green);
}

.toast.error {
    background-color: var(--negative-red);
}

/* Adjust position for desktop view */
@media screen and (min-width: 768px) {
    .toast-container {
        bottom: 20px;
    }
}

.notification-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    margin: 0 1rem 1rem 1rem;
    border-radius: 8px;
    border-left: 5px solid;
    background-color: var(--card-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.notification-banner.hidden {
    display: none;
}

.notification-banner__content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.notification-banner__content .fa-solid {
    font-size: 1.5rem;
}

.notification-banner__content strong {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.notification-banner__content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Color Variants */
.notification-banner--info {
    border-left-color: #007bff;
}
.notification-banner--info .fa-solid {
    color: #007bff;
}

.notification-banner--warning {
    border-left-color: #ffc107;
}
.notification-banner--warning .fa-solid {
    color: #ffc107;
}

.notification-banner--error {
    border-left-color: #dc3545;
}
.notification-banner--error .fa-solid {
    color: #dc3545;
}

.notification-banner__close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.75rem;
    font-weight: 300;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
}

.notification-banner__close-btn:hover {
    color: var(--text-primary);
}

/* Adjust for mobile */
@media (max-width: 768px) {
    .notification-banner {
        margin: 0 0 1rem 0; /* Full width on mobile */
        border-radius: 0;
        border-left: none;
        border-top: 4px solid;
    }
}

.choice-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 1.5rem;
}

.choice-buttons .btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    height: auto;
    gap: 0.75rem;
    border-radius: 8px;
}

.choice-buttons .btn .fa-solid,
.choice-buttons .btn .fa-brands {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.choice-buttons .btn small {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 4px;
}

/* --- MARKETPLACE DESKTOP GRID FIX --- */

/* This rule only applies to screens 992px and wider */
@media screen and (min-width: 992px) {
    
    /* 
     * We are specifically targeting the grid that has the ".marketplace" class.
     * This tells it to create exactly three equal-width columns.
    */
    .dashboard-page .nft-gallery-grid.marketplace {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- PROFILE PAGE DESKTOP CARD SPACING FIX (V2) --- */
@media screen and (min-width: 992px) {
    /* Target the new wrapper class instead of the ID */
    .dashboard-page .profile-cards-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px; /* This adds the desired space between the cards */
    }
}

/* --- SUPPORT CHAT SEND BUTTON FIX (V2 - DEFINITIVE) --- */

/*
 * This rule is highly specific, targeting the primary button
 * directly inside the chat input form.
*/
.dashboard-page .chat-input-form .btn.btn-primary {
    /* 
     * Flexbox properties to prevent the button from growing or shrinking
     * and set its ideal width to a compact 50px.
    */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50px;

    /* Override any existing padding that might be making it wide */
    padding-left: 0;
    padding-right: 0;

    /* A fallback width property for good measure */
    width: 50px;
}

/* 
 * This small addition ensures that the icon inside the button
 * doesn't have any right-side margin pushing the button's width.
*/
.dashboard-page .chat-input-form .btn.btn-primary i {
    margin-right: 0;
}

/* --- ADMIN PANEL CHAT STYLING FIX --- */

/*
 * This section makes the admin chat look identical to the user dashboard chat
 * by applying the same styles to the .admin-page.
*/

.admin-page .chat-window {
    height: 100%; /* Make admin chat window taller */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse; /* This is key for ordering */
}

.admin-page .chat-input-form {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-page .chat-input-form:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

.admin-page .chat-input-form input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
}

.admin-page .chat-input-form .btn {
    border-radius: 0 6px 6px 0;
    flex-shrink: 0;
    box-shadow: none;
    border-left: 1px solid var(--border-color);
    height: 100%;
}

.admin-page .chat-bubble {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.admin-page .chat-bubble p {
    margin: 0;
    word-wrap: break-word;
}

.admin-page .chat-bubble span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
    text-align: right;
}

.admin-page .chat-bubble.user {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 4px;
}

.admin-page .chat-bubble.admin {
    align-self: flex-start;
    background-color: var(--secondary-bg);
    color: var(--text-dark);
    border-bottom-left-radius: 4px;
}
.admin-page .chat-bubble.admin span {
    text-align: left;
}

/* ==========================================================================
   --- ADMIN SUPPORT CENTER UI OVERHAUL ---
   ========================================================================== */

/* 1. Main Layout: Create two distinct, separated columns */
.admin-page .support-center-layout {
    display: grid;
    grid-template-columns: 340px 1fr; /* A fixed width for the conversation list */
    gap: 30px; /* The space between the two columns */
    /* Make the layout fill the available height */
    height: calc(100vh - 80px); /* Adjust 80px based on your main-content padding */
}

/* On mobile, stack the columns */
@media (max-width: 991px) {
    .admin-page .support-center-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
    /* Hide the chat window on mobile until a conversation is selected */
    .admin-page .support-chat-window-card {
        display: none;
    }
    .admin-page.chat-is-active .support-chat-list-card {
        display: none;
    }
    .admin-page.chat-is-active .support-chat-window-card {
        display: flex;
    }
}

/* 2. Conversation List: Redesign for clarity and interaction */
.admin-page .support-chat-list-card,
.admin-page .support-chat-window-card {
    display: flex; /* This is key for the internal layout */
    flex-direction: column;
    overflow: hidden; /* Prevents children from breaking the card's shape */
}

.admin-page .support-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto; /* Make the list scrollable if it's too long */
}

.admin-page .support-user-item {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}

.admin-page .support-user-item:hover {
    background-color: var(--secondary-bg);
}

.admin-page .support-user-item.active {
    background-color: #e3e8f7; /* A light blue to indicate selection */
}

.admin-page .support-user-item strong {
    display: block;
    font-size: 1rem;
    color: var(--text-dark);
}

.admin-page .support-user-item small {
    color: var(--text-light);
}

/* 3. Chat Window: Make it a self-contained, scrolling component */
.admin-page #support-chat-header {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;   /* Center them horizontally */
    gap: 15px;             /* Add space between the name and the button */
    padding: 20px;         /* Give it some breathing room on mobile */
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* This is the scrollable chat area */
.admin-page #support-chat-window {
    flex-grow: 1; /* CRITICAL: This makes the window fill available space */
    overflow-y: auto; /* CRITICAL: This makes it scroll */
    padding: 20px;
    display: flex;
    flex-direction: column;
    max-height: 400px; 
}

/* 4. Chat Input Form: Fix the input/button size ratio */
.admin-page #support-chat-form {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent the form from shrinking */
    background-color: var(--card-bg);
}

.admin-page #chat-message-input {
    flex-grow: 1; /* CRITICAL: Allows the input to take all available width */
}

.admin-page #support-chat-form button {
    flex-shrink: 0; /* Prevents the button from being squished */
    flex-basis: 50px; /* Sets a fixed, smaller width for the button */
    padding: 10px;
}
.admin-page #support-chat-form button i {
    margin: 0; /* Removes any margin pushing the button's width */
}

/* 5. Resolve Button: Make it "better", not "bigger" */
.admin-page #chat-resolve-button {
    /* Uses existing btn-sm and btn-success styles, which is good. */
    /* Just add a transition for a smoother hover effect */
    transition: background-color 0.2s, color 0.2s;
}

/* ==========================================================================
   --- ADMIN SUPPORT CENTER - UI POLISH V2 ---
   ========================================================================== */

/* 1. Add a proper header to the "Active Conversations" card */
.admin-page .support-chat-list-card .card-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevents header from shrinking */
}

/* 2. Fix the cramped desktop chat header layout */
.admin-page #support-chat-header {
    gap: 20px; /* Adds space between the name and the button */
}
.admin-page #chat-current-user-name {
    flex-grow: 1; /* Allows the name to take all available space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Prevents long names from breaking the layout */
}
.admin-page #chat-resolve-button {
    flex-shrink: 0; /* Prevents the button from being squished */
}

/* 3. Fix mobile scrolling and add a "Back" button */
.mobile-only-btn {
    display: none; /* Hide the back button by default */
}

@media (max-width: 991px) {
    .admin-page .support-center-layout {
        /* When a chat is active, the container itself doesn't need special styles */
    }

    /* CRITICAL: This makes the chat window full-screen on mobile */
    .admin-page.chat-is-active .support-chat-window-card {
        position: fixed;
        top: 60px; /* Height of your mobile admin header */
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2001; /* Ensure it's above other content */
        border-radius: 0;
        overflow: hidden;
    }
    
    /* Show the back button only on mobile when a chat is active */
    .admin-page.chat-is-active .mobile-only-btn {
        display: inline-flex;
    }
    /* Hide the resolve button on mobile to give the name more space */
    .admin-page.chat-is-active #chat-resolve-button {
        display: none; 
    }
}

/* ==========================================================================
   --- ADMIN PANEL SUPPORT CHAT - BUBBLE ALIGNMENT FIX ---
   ========================================================================== */

/*
 * This section adds the correct alignment and color styles for the chat
 * bubbles specifically within the admin panel view.
*/

/* USER's message (styled to be on the LEFT in the admin panel) */
.admin-page .chat-bubble.user {
    align-self: flex-start; /* Aligns to the left */
    background-color: var(--secondary-bg); /* Grey bubble for the user */
    color: var(--text-dark);
    border-bottom-left-radius: 4px; /* Bubble "tail" on the correct side */
}

.admin-page .chat-bubble.user span {
    text-align: left;
}


/* ADMIN's message (styled to be on the RIGHT in the admin panel) */
.admin-page .chat-bubble.admin {
    align-self: flex-end; /* Aligns to the right */
    background-color: #007bff; /* Blue bubble for the admin's messages */
    color: white;
    border-bottom-right-radius: 4px; /* Bubble "tail" on the correct side */
}

.admin-page .chat-bubble.admin span {
    text-align: right;
}

/* --- Button width and Desktop layout for Support Chat Header --- */

/* This prevents the button from stretching to full width on mobile */
.admin-page #support-chat-header .btn {
    width: auto; 
    flex-shrink: 0; /* Prevents the button from being squished */
}

/* On screens 992px and wider, switch to a horizontal layout */
@media screen and (min-width: 992px) {
    .admin-page #support-chat-header {
        flex-direction: row; /* Go back to a horizontal row */
        justify-content: space-between; /* Push items to opposite ends */
        padding: 15px 20px; /* Adjust padding for desktop */
        gap: 20px;
    }
}

/* --- Support Chat: New Conversation Button --- */
#new-conversation-btn.hidden {
    display: none;
}

/* --- Support Chat: Professional System Message Separator (V3 - Final) --- */

/* 1. Use a more specific selector to FORCE the override of default bubble styles. */
.dashboard-page .chat-window > .chat-bubble.system {
    /* --- Style Resets --- */
    max-width: 100%;
    align-self: stretch;
    background-color: transparent !important; /* Force no background */
    border-radius: 0 !important; /* Force no rounded corners */
    padding: 1rem 0;
    margin: 0.5rem 0;

    /* --- Flexbox Layout for the Divider --- */
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* 2. Style the lines on either side of the text */
.dashboard-page .chat-window > .chat-bubble.system::before,
.dashboard-page .chat-window > .chat-bubble.system::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
}

/* 3. Style the text in the middle */
.dashboard-page .chat-window > .chat-bubble.system p {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
}

/* 4. Ensure the unnecessary timestamp remains hidden */
.dashboard-page .chat-window > .chat-bubble.system span {
    display: none !important;
}

/* ==========================================================================
   --- ADMIN PANEL: SITE SETTINGS (IMPROVED STYLES) ---
   ========================================================================== */

/* 1. Main Grid Layout for the Settings Page */
.admin-page .settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns on desktop */
    gap: 30px; /* Space between the cards */
}

/* 2. Card that spans the full width of the grid */
.admin-page .settings-grid .full-width-card {
    grid-column: 1 / -1; /* Makes this card span from the first to the last column */
}

/* 3. Responsive Stacking for Mobile */
@media (max-width: 991px) {
    .admin-page .settings-grid {
        grid-template-columns: 1fr; /* A single column on smaller screens */
    }
}

/* 4. Style the introductory header text inside each card */
.admin-page .settings-grid .card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.admin-page .settings-grid .card p {
    color: var(--text-light);
    margin: 0 0 30px 0; /* Add space below the description */
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 5. Style horizontal rules for clean separation */
.admin-page .settings-grid .card hr {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: 25px 0;
}

/* 6. Style sub-headings inside cards (like "Cryptocurrency Deposit Addresses") */
.admin-page .settings-grid .card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
}

/* 7. Style individual form groups for better spacing and alignment */
.admin-page .settings-grid .form-group {
    margin-bottom: 20px; /* Consistent spacing between fields */
}

.admin-page .settings-grid .form-group.inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-page .settings-grid .form-group.inline input {
    max-width: 120px;
}

/* 8. Style the container for the save button for proper alignment */
.admin-page .settings-grid .modal-actions-group {
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
    margin-top: 15px; /* Adjusts space above the separator line */
    display: flex;
    justify-content: flex-end; /* This aligns the button to the right */
}

/* 9. Ensure the button itself is not full-width */
.admin-page .settings-grid .btn {
    width: auto; /* Allows the button to size to its content */
}

/* ==========================================================================
   --- ADMIN PANEL: CARD & MODAL STYLING OVERHAUL ---
   ========================================================================== */

/* 1. Standard Card Header Styling */
.admin-page .card .card-header {
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
    background-color: #fcfcfc; /* A very subtle off-white for the header */
}

.admin-page .card .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 2. Standard Card Body Styling (THE FIX FOR PADDING) */
.admin-page .card .card-body {
    padding: 25px;
}

/* 3. Remove default card padding now that card-body handles it */
.admin-page .card {
    padding: 0; /* Override previous padding */
}

/* 4. Fix for Modal Card Padding */
.admin-page .modal-card {
    padding: 20px; /* This was missing, causing content to hit the edges */
}

/* 5. Cleanup for Settings Page specifically */
.admin-page .settings-grid .card p {
    margin-top: 10px;
    margin-bottom: 20px;
}

.admin-page .settings-grid .card .modal-actions-group {
    margin-top: 5px; /* Reduce top margin for save buttons */
}

/* ==========================================================================
   --- ADMIN PANEL: GAME SETTINGS TIER STYLING ---
   ========================================================================== */

/* 1. Style the container for each dynamic tier row */
.admin-page .game-tier-row {
    display: flex;
    align-items: center;
    gap: 15px; /* Adds space between the inputs/text */
    margin-bottom: 10px;
}

/* 2. Remove bottom margin from form-groups inside these rows to avoid double spacing */
.admin-page .game-tier-row .form-group {
    margin-bottom: 0;
    flex-grow: 1; /* Allows the input groups to expand and fill space */
}

/* 3. Ensure the remove button doesn't stretch */
.admin-page .game-tier-row .remove-tier-btn {
    flex-grow: 0;
    flex-shrink: 0;
}

/* 4. Style the plain text (like 'seconds, reward is $') inside the Popper tiers */
.admin-page .game-tier-row span {
    font-weight: 500;
    color: var(--text-light);
    white-space: nowrap; /* Prevents text from wrapping */
}

/* FIX: Ensure primary buttons with close functionality are styled correctly */
.btn-primary.modal-close-button {
  background: var(--primary-color);
  color: white;
  border: none;
}

/* Optional: Add a hover effect for consistency */
.btn-primary.modal-close-button:hover {
  background: var(--primary-hover-color);
}