/* ============================================================================
   HYDRA PROJECT — THÈME NOIR & OR (LUXE)
   Palette : or #d4af37 · or clair #f0d48a · or foncé #8a6d1f · noir profond
   ============================================================================ */

:root {
  --gold: #d4af37;
  --gold-light: #f0d48a;
  --gold-dark: #8a6d1f;
  --gold-border: rgba(212, 175, 55, 0.25);
  --gold-border-strong: rgba(212, 175, 55, 0.45);
  --bg-0: #050507;
  --bg-1: #0d0e13;
  --bg-2: #15161d;
  --text-0: #e8e6df;
  --text-1: #9c9688;
}

body {
  background: var(--bg-0) url('../img/LuxuryHydra1.png') center/cover no-repeat fixed;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  color: var(--text-0);
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(212, 175, 55, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(212, 175, 55, 0.04) 0%, transparent 55%),
    rgba(0, 0, 0, 0.20);
  z-index: -1;
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
*, ::after, ::before { box-sizing: border-box; }
*:focus { outline: none; }
img { vertical-align: middle; border-style: none; object-fit: cover; }
p { margin-top: 0; margin-bottom: 5px; }

ol, ul { list-style-type: none; margin: 0; padding: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }

/* ===== LAYOUT ===== */
#main { min-height: 100vh; }
.index { height: 100vh; }
#login, #register { padding: 15px; }
.form { display: table-cell; vertical-align: middle; }
.nav-wrapper { text-transform: uppercase; }

.container-center {
  padding: 0;
  display: table;
  height: 100%;
}

.helper-text { font-size: 14px !important; }

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 3%;
  left: 1.5%;
}

.inline-right {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.padding-15 { padding: 15px !important; }
.padding-5 { padding: 5px !important; }

#data { padding: 10px 25px; }

.card .card-image img {
  padding-top: 15px;
  width: unset;
  display: unset;
}

.toast .toast-action {
  margin-left: 15px;
  margin-right: -15px;
}

.no-margin { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 600;
  color: #f5f0e4;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.22);
}

/* ===== NOIR & OR ===== */

/* Cards */
.card {
  position: relative;
  background: rgba(11, 12, 17, 0.94) !important;
  border: 1px solid var(--gold-border);
  border-radius: 16px !important;
  box-shadow:
    0 0 15px rgba(212, 175, 55, 0.07),
    0 10px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(212, 175, 55, 0.08);
  transition: all 0.3s ease;
}

.card:hover {
  border-color: var(--gold-border-strong);
  box-shadow:
    0 0 26px rgba(212, 175, 55, 0.22),
    0 14px 36px rgba(0, 0, 0, 0.55);
}

.card .card-content { background: transparent !important; }

.card .card-action {
  background: rgba(5, 6, 9, 0.7) !important;
  border-top: 1px solid var(--gold-border);
}

.card .card-title {
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

/* Navbar */
nav {
  background: rgba(7, 8, 11, 0.97) !important;
  border-bottom: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

/* Le logo et les liens doivent partager la largeur de la barre sans se
   superposer. Le groupe du logo reçoit une position inline ici pour écraser
   l'ancien centrage absolu défini directement dans le HTML. */
nav .nav-wrapper > .container {
  display: flex;
  align-items: center;
  height: 64px;
  overflow: visible;
}

nav .nav-logo-group {
  position: static !important;
  left: auto !important;
  -webkit-transform: none !important;
  transform: none !important;
  flex: 0 0 auto;
  margin-right: auto;
}

/* Discord reste un lien compact, mais l’invitation est lisible sous l’icône. */
nav .discord-link {
  display: inline-flex !important;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 112px;
  opacity: .95;
  line-height: 1;
}

nav .discord-link svg {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 5px rgba(114, 137, 218, .45));
}

nav .discord-label {
  color: #aeb9e9 !important;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .15px;
  line-height: 11px;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 0 7px rgba(114, 137, 218, .35);
}

nav .right.hide-on-med-and-down {
  display: flex !important;
  align-items: center;
  float: none !important;
  flex: 0 0 auto;
  margin-left: auto;
}

nav .right.hide-on-med-and-down li {
  float: none;
}

nav .right.hide-on-med-and-down li a {
  white-space: nowrap;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Aucun indicateur/underline animé sous les liens de navigation. */
nav .right.hide-on-med-and-down li a::before,
nav .right.hide-on-med-and-down li a::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Les menus sont positionnés par Materialize. Ne pas forcer `top` : cela
   écraserait la position calculée et ferait perdre le survol en les rejoignant. */
#dropdown1,
#dropdown2,
#dropdown3 {
  margin-top: 8px !important;
  z-index: 1005 !important;
}

/* Pont invisible entre chaque déclencheur et son sous-menu : le pointeur ne
   perd pas le survol pendant le déplacement vers le premier élément. */
#dropdown1::before,
#dropdown2::before,
#dropdown3::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

nav .brand-logo {
  color: var(--gold-light) !important;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
  font-weight: 700;
  letter-spacing: 2px;
  animation: goldBreath 3.6s ease-in-out infinite;
}

/* Halo doré respirant sur le logo HYDRA PROJECT */
@keyframes goldBreath {
  0%, 100% { text-shadow: 0 0 12px rgba(212, 175, 55, 0.35); }
  50% { text-shadow: 0 0 26px rgba(240, 212, 138, 0.75); }
}

nav a {
  color: #b3ada0 !important;
  transition: all 0.3s ease;
}

nav a:hover {
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Tabs */
.tabs {
  background: rgba(11, 12, 17, 0.9) !important;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.tabs .tab a {
  color: #85806f !important;
  transition: all 0.3s ease;
}

.tabs .tab a:hover {
  color: var(--gold) !important;
}

.tabs .tab.active a {
  color: var(--gold) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.tabs .tab-indicator {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light)) !important;
  height: 3px !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  background: rgba(8, 9, 13, 0.95) !important;
  color: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25), inset 0 0 10px rgba(212, 175, 55, 0.06) !important;
}

/* Labels */
label { color: #c4a95c !important; }

/* Buttons */
.btn {
  background: linear-gradient(135deg, #e0bc4f, #9a7b1e) !important;
  border: none !important;
  border-radius: 8px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: #171207 !important;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.22);
}

.btn:hover {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.45) !important;
  transform: translateY(-2px);
}

/* Bouton Discord (page de connexion) : le vrai bleu Discord doit écraser
   le dégradé or générique de .btn. La règle .btn générique utilise !important,
   donc on doit en faire autant avec une spécificité égale. */
.btn.btn-discord {
  background: #5865F2 !important;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(88, 101, 242, 0.45) !important;
}

.btn.btn-discord:hover {
  background: #4752c4 !important;
  box-shadow: 0 0 25px rgba(88, 101, 242, 0.7), 0 0 50px rgba(88, 101, 242, 0.25) !important;
  transform: translateY(-2px);
}

/* Texte des boutons : brun-noir élégant sur l'or. */
a.btn, a.btn:visited, a.btn:focus {
  color: #171207 !important;
  text-shadow: none;
}

a.btn:hover {
  color: #0c0a04 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

a.btn.btn-discord { color: #ffffff !important; }

/* Les boutons danger restent en texte blanc même au survol (spécificité
   supérieure à la règle a.btn:hover ci-dessus). */
a.btn.red:hover, a.btn.red.darken-3:hover, a.btn.red.darken-4:hover {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
}

.btn.green, .btn.green.darken-2 {
  background: linear-gradient(135deg, #c9b45e, #a08a2e) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

.btn.green:hover {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.45) !important;
}

.btn.red, .btn.red.darken-3, .btn.red.darken-4 {
  background: linear-gradient(135deg, #c0392b, #8e2418) !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(192, 57, 43, 0.3);
}

.btn.red:hover {
  box-shadow: 0 0 25px rgba(192, 57, 43, 0.5) !important;
}

.btn.blue, .btn.blue.darken-2 {
  background: linear-gradient(135deg, #b8a45a, #8f7a28) !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.22);
}

.btn.blue:hover {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.42) !important;
}

/* Tables */
table {
  background: rgba(8, 9, 13, 0.92) !important;
  border-radius: 8px;
  overflow: hidden;
}

table th {
  background: rgba(20, 17, 8, 0.96) !important;
  color: var(--gold) !important;
  border-bottom: 2px solid rgba(212, 175, 55, 0.35) !important;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

table td {
  color: #d8d4c8 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.08) !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(6, 7, 10, 0.85); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dark), var(--gold));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Modal */
.modal {
  background: rgba(9, 10, 14, 0.99) !important;
  border: 1px solid var(--gold-border);
  border-radius: 16px !important;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.12), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal .modal-content { color: #e8e6df !important; }

.modal-footer {
  background: rgba(5, 6, 9, 0.99) !important;
  border-top: 1px solid var(--gold-border);
}

/* Confirmation d'achat boutique : compacte, centrée et lisible. */
.shop-purchase-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: calc(100% - 32px) !important;
  max-width: 420px !important;
  max-height: none !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
}

.shop-purchase-modal .modal-content {
  padding: 22px 24px 14px !important;
  text-align: center;
}

.shop-purchase-modal .modal-content p {
  margin: 0 !important;
  color: #f5f0e4 !important;
  font-size: 15px;
  line-height: 1.45;
}

.shop-purchase-modal .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: auto !important;
  min-height: 64px;
  padding: 12px 18px !important;
}

.shop-purchase-modal .modal-footer .btn {
  flex: 0 0 auto;
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  font-size: 12px;
}

.shop-purchase-modal .shop-confirm-button {
  background: linear-gradient(135deg, #f0d48a, #d4af37) !important;
  color: #171207 !important;
  border: 1px solid rgba(255, 244, 190, 0.8) !important;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.4) !important;
  text-shadow: none !important;
}

.shop-purchase-modal .shop-confirm-button:hover,
.shop-purchase-modal .shop-confirm-button:focus {
  background: linear-gradient(135deg, #ffe9a8, #e0bc4f) !important;
  color: #0c0a04 !important;
  box-shadow: 0 0 22px rgba(240, 212, 138, 0.65) !important;
}

.shop-purchase-modal .modal-close:not(.shop-confirm-button) {
  background: rgba(42, 43, 50, 0.95) !important;
  color: #d8d4c8 !important;
  border: 1px solid rgba(212, 175, 55, 0.22) !important;
  box-shadow: none !important;
}

@media only screen and (max-width: 480px) {
  .shop-purchase-modal .modal-content {
    padding: 18px 16px 10px !important;
  }

  .shop-purchase-modal .modal-footer {
    justify-content: center;
    padding: 10px 12px !important;
  }
}

/* Toast */
.toast {
  background: rgba(18, 16, 8, 0.97) !important;
  color: var(--gold-light) !important;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25);
}

/* Dropdown */
.dropdown-content {
  background: rgba(9, 10, 14, 0.99) !important;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
}

.dropdown-content li a {
  color: #c8c2b4 !important;
  transition: all 0.2s ease;
}

.dropdown-content li a:hover {
  background: rgba(212, 175, 55, 0.08) !important;
  color: var(--gold) !important;
  text-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

/* Links */
a {
  color: #d9bc63 !important;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--gold-light) !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}

/* Grey backgrounds */
.grey.darken-3 {
  background: rgba(12, 13, 18, 0.92) !important;
}

.grey.darken-4 {
  background: rgba(7, 8, 11, 0.95) !important;
}

.white-text { color: #e8e6df !important; }

/* Footer */
footer {
  background: rgba(5, 6, 8, 0.98) !important;
  border-top: 1px solid var(--gold-border);
  box-shadow: 0 -1px 0 rgba(212, 175, 55, 0.12);
}

/* ===== Boutique : grille alignée =====
   Les cartes de la boutique ont des hauteurs différentes (champ Amount présent ou
   non), ce qui casse l'alignement de la grille Materialize à colonnes flottantes.
   On passe la grille en flexbox : rangées propres + cartes de hauteur égale. */
.shop-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px 20px !important;
}
.shop-grid > .col {
  display: flex;
  float: none;
  margin-left: 0 !important; /* Materialize met margin-left:auto sur .col -> en flexbox, la derniere ligne incomplete s'etale ; on force l'alignement gauche */
  padding: 8px;
}
.shop-grid > .col > .card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}
.shop-grid > .col > .card > .card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.shop-item-description {
  min-height: 42px;
  margin: 8px 0 10px !important;
  color: #aaa496 !important;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
.shop-booster-time {
  margin: -2px 0 8px !important;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.shop-booster-time.active {
  color: #ffb74d;
  text-shadow: 0 0 9px rgba(255, 152, 0, .35);
}
.shop-booster-time.inactive {
  color: #d85f55;
  text-shadow: 0 0 8px rgba(216, 95, 85, .28);
}
.shop-booster-time span {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.shop-grid > .col > .card > .card-action {
  margin-top: auto;
}

/* Price */
.price {
  color: #e6c44d !important;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* Colored text - nuances douces sur fond sombre */
.orange-text, .amber-text {
  color: #e8a53a !important;
  text-shadow: 0 0 8px rgba(232, 165, 58, 0.4);
}

.green-text {
  color: #8fd08c !important;
  text-shadow: 0 0 8px rgba(143, 208, 140, 0.35);
}

.red-text {
  color: #e0685f !important;
  text-shadow: 0 0 8px rgba(224, 104, 95, 0.35);
}

.blue-text {
  color: #9db8e0 !important;
  text-shadow: 0 0 8px rgba(157, 184, 224, 0.35);
}

/* Chips */
.chip {
  background: rgba(17, 18, 24, 0.95) !important;
  color: var(--gold-light) !important;
  border: 1px solid var(--gold-border);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.12);
}

/* Index form card */
.index .card {
  background: rgba(9, 10, 14, 0.97) !important;
}

/* Badge */
.badge {
  background: linear-gradient(135deg, #d4af37, #8a6d1f) !important;
  color: #171207 !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

/* Progress bar */
.progress {
  background: rgba(14, 15, 20, 0.7) !important;
}

.progress .determinate {
  background: linear-gradient(90deg, var(--gold-dark), var(--gold)) !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
}

/* Switch */
[type="checkbox"].filled-in:checked + span::after {
  border-color: var(--gold) !important;
  background-color: var(--gold) !important;
}

/* Sidenav */
.sidenav {
  background: rgba(9, 10, 14, 0.99) !important;
  border-right: 1px solid var(--gold-border);
}

/* Responsive nav */
@media only screen and (max-width: 992px) {
  nav .brand-logo {
    left: unset !important;
    -webkit-transform: unset !important;
    transform: unset !important;
  }
  .nav-logo-group {
    position: static !important;
    left: unset !important;
    -webkit-transform: none !important;
    transform: none !important;
    float: left;
    height: 64px;
  }
  .hide-on-med-and-down {
    display: unset !important;
  }
}

/* Striped tables */
table.striped > tbody > tr:nth-child(odd) {
  background-color: rgba(212, 175, 55, 0.045) !important;
}

/* Disabled buttons */
.btn.disabled, .btn:disabled, .btn-large:disabled, .btn-small:disabled {
  background-color: rgba(42, 42, 42, 0.5) !important;
  background-image: none !important;
  color: #8a8578 !important;
}

/* Select wrapper */
.select-wrapper input {
  color: #fff !important;
}

/* Invalid input */
input[type=text]:not(.browser-default).invalid ~ .helper-text[data-error] {
  color: transparent !important;
}

/* Container max width */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section spacing */
section {
  padding: 20px 0;
}

/* Main content area */
#main > .container {
  padding: 20px;
}

/* ===== Badges Premium boutique ===== */
.premium-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  border-radius: 999px;
  color: #1a1a2e;
  background: linear-gradient(135deg, #ffd54f, #ffb300);
  box-shadow: 0 0 10px rgba(255, 193, 7, .45);
  text-transform: uppercase;
  animation: premiumPulse 2s ease-in-out infinite;
}
.premium-item-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(135deg, #ffd54f, #f57f17);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.old-price {
  color: #f44336 !important;
  text-decoration: line-through;
  opacity: .75;
  margin-right: 4px;
  font-weight: 400 !important;
}
@keyframes premiumPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 193, 7, .35); }
  50% { box-shadow: 0 0 16px rgba(255, 193, 7, .7); }
}