/* =========================================================
   INKMANA DARK UI SYSTEM
   Central source of truth for the dark interface.
   This file is intentionally scoped to html[data-theme="dark"].
   ========================================================= */

html[data-theme="dark"] {
  --ink-dark-bg: #171d29;
  --ink-dark-surface: #1f2837;
  --ink-dark-surface-2: #273246;
  --ink-dark-surface-3: #2d3a4f;
  --ink-dark-border: #3b4658;
  --ink-dark-border-strong: #4a586d;
  --ink-dark-text: #f3f6fb;
  --ink-dark-text-soft: #d5dbe5;
  --ink-dark-muted: #aeb8c7;
  --ink-dark-muted-2: #8e9aab;
  --ink-dark-primary: #304466;
  --ink-dark-primary-hover: #3b5278;
  --ink-dark-focus: #718fb7;
  --ink-dark-link: #91afd3;
  --ink-dark-success: #43b86a;
  --ink-dark-danger: #d65a62;
  --ink-dark-warning: #d3a53a;
  --ink-dark-hover-surface: #273246;
  --ink-dark-hover-surface-2: #2d3a4f;
  --ink-dark-interactive-border: #4a586d;
  --ink-dark-buy-bg: #061728;
  --ink-dark-buy-hover: #0d2238;
  --ink-dark-active-bg: #f8fafc;
  --ink-dark-active-text: #061728;

  /* Bootstrap geometry is normalized here instead of page-by-page. */
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 10px;
  --bs-border-radius-xl: 12px;
  --bs-border-radius-xxl: 12px;
  --bs-border-radius-pill: 8px;
  --bs-body-bg: var(--ink-dark-bg);
  --bs-body-color: var(--ink-dark-text);
  --bs-border-color: var(--ink-dark-border);
  --bs-secondary-color: var(--ink-dark-muted);
  --bs-link-color: var(--ink-dark-link);
  --bs-link-hover-color: #b2c7e1;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--ink-dark-bg);
  color: var(--ink-dark-text);
}

/* ---------- Forms ---------- */
html[data-theme="dark"] :is(.form-control, .form-select, .input-group-text) {
  background-color: var(--ink-dark-surface-2);
  border-color: var(--ink-dark-border);
  color: var(--ink-dark-text);
  border-radius: 8px;
  box-shadow: none;
}

html[data-theme="dark"] :is(.form-control, .form-select)::placeholder {
  color: var(--ink-dark-muted-2);
  opacity: 1;
}

html[data-theme="dark"] :is(.form-control, .form-select):focus {
  background-color: var(--ink-dark-surface-2);
  border-color: var(--ink-dark-focus);
  color: var(--ink-dark-text);
  box-shadow: 0 0 0 3px rgba(113, 143, 183, .16);
}

/* ---------- Buttons ---------- */
html[data-theme="dark"] :is(.btn-primary, .btn-dark) {
  --bs-btn-bg: var(--ink-dark-primary);
  --bs-btn-border-color: var(--ink-dark-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ink-dark-primary-hover);
  --bs-btn-hover-border-color: var(--ink-dark-primary-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ink-dark-primary-hover);
  --bs-btn-active-border-color: var(--ink-dark-primary-hover);
  background: var(--ink-dark-primary);
  border-color: var(--ink-dark-primary);
  color: #fff;
  border-radius: 8px;
  box-shadow: none;
}

html[data-theme="dark"] :is(.btn-primary, .btn-dark):hover,
html[data-theme="dark"] :is(.btn-primary, .btn-dark):focus-visible {
  background: var(--ink-dark-primary-hover);
  border-color: var(--ink-dark-primary-hover);
  color: #fff;
  transform: none;
  box-shadow: 0 0 0 3px rgba(113, 143, 183, .14);
}

html[data-theme="dark"] :is(.btn-outline-primary, .btn-outline-dark) {
  background: transparent;
  border-color: var(--ink-dark-border-strong);
  color: var(--ink-dark-text);
  border-radius: 8px;
}

html[data-theme="dark"] :is(.btn-outline-primary, .btn-outline-dark):hover,
html[data-theme="dark"] :is(.btn-outline-primary, .btn-outline-dark):focus-visible {
  background: var(--ink-dark-surface-2);
  border-color: var(--ink-dark-focus);
  color: var(--ink-dark-text);
  transform: none;
  box-shadow: none;
}

/* .rounded-pill remains semantically available, but dark controls use a discreet radius. */
html[data-theme="dark"] .btn.rounded-pill,
html[data-theme="dark"] .form-control.rounded-pill,
html[data-theme="dark"] .form-select.rounded-pill {
  border-radius: 8px !important;
}

/* ---------- Modal standard ---------- */
html[data-theme="dark"] .modal-content {
  background: var(--ink-dark-surface) !important;
  color: var(--ink-dark-text) !important;
  border: 1px solid var(--ink-dark-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .42) !important;
  overflow: hidden;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--ink-dark-border) !important;
}

html[data-theme="dark"] .modal-title {
  color: var(--ink-dark-text);
}

/* X canônico: sem caixa branca/inversão, maior e geometricamente discreto. */
html[data-theme="dark"] body .modal .btn-close,
html[data-theme="dark"] body .modal .modal-header .btn-close {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--ink-dark-border) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  color: var(--ink-dark-text-soft) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}

html[data-theme="dark"] body .modal .btn-close::before,
html[data-theme="dark"] body .modal .modal-header .btn-close::before {
  content: "×";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 29px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-1px);
}

html[data-theme="dark"] body .modal .btn-close:hover,
html[data-theme="dark"] body .modal .btn-close:focus-visible {
  background: var(--ink-dark-hover-surface) !important;
  border-color: var(--ink-dark-border-strong) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- Dropdown / popover / accordion ---------- */
html[data-theme="dark"] :is(.dropdown-menu, .popover, .accordion-item) {
  background: var(--ink-dark-surface);
  border-color: var(--ink-dark-border);
  color: var(--ink-dark-text);
}

/* Dropdowns são menus geométricos: sem radius/pill. */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .dropdown-menu.show,
html[data-theme="dark"] .dropdown-menu .dropdown-item {
  border-radius: 0 !important;
}

html[data-theme="dark"] .dropdown-item {
  color: var(--ink-dark-text-soft);
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background: var(--ink-dark-surface-2);
  color: var(--ink-dark-text);
}

html[data-theme="dark"] .accordion-button {
  background: var(--ink-dark-surface);
  color: var(--ink-dark-text);
  box-shadow: none;
}

html[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: var(--ink-dark-surface-2);
  color: var(--ink-dark-text);
}

/* ---------- Alerts / pagination ---------- */
html[data-theme="dark"] .alert {
  border-radius: 8px;
}

html[data-theme="dark"] .pagination .page-link {
  background: var(--ink-dark-surface);
  border-color: var(--ink-dark-border);
  color: var(--ink-dark-text-soft);
}

html[data-theme="dark"] .pagination .page-link:hover {
  background: var(--ink-dark-surface-2);
  color: var(--ink-dark-text);
}

/* ---------- Login modal: canonical dark appearance ---------- */
html[data-theme="dark"] #loginModal .modal-content {
  background: var(--ink-dark-surface) !important;
  border: 1px solid var(--ink-dark-border) !important;
  border-radius: 12px !important;
}

html[data-theme="dark"] #loginModal .modal-title,
html[data-theme="dark"] #loginModal .modal-title .bi {
  color: var(--ink-dark-text) !important;
}

html[data-theme="dark"] #loginModal .btn-google {
  background: #f8fafc !important;
  color: #172033 !important;
  border: 1px solid #d7dce4 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] #loginModal .btn-google:hover {
  background: #eef2f6 !important;
  color: #172033 !important;
  border-color: #c9d0da !important;
  transform: none !important;
}

html[data-theme="dark"] #loginModal .form-control {
  background: var(--ink-dark-surface-2) !important;
  border: 1px solid var(--ink-dark-border) !important;
  color: var(--ink-dark-text) !important;
  border-radius: 8px !important;
  height: 48px;
}

html[data-theme="dark"] #loginModal .form-control:focus {
  border-color: var(--ink-dark-focus) !important;
  box-shadow: 0 0 0 3px rgba(113, 143, 183, .16) !important;
}

html[data-theme="dark"] #loginModal .btn-dark {
  background: var(--ink-dark-primary) !important;
  border: 1px solid var(--ink-dark-primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] #loginModal .btn-dark::before {
  display: none !important;
}

html[data-theme="dark"] #loginModal .btn-dark:hover {
  background: var(--ink-dark-primary-hover) !important;
  border-color: var(--ink-dark-primary-hover) !important;
  transform: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #loginModal .text-center a {
  color: var(--ink-dark-link) !important;
}


/* ---------- Canonical pagination active state ---------- */
html[data-theme="dark"] .pagination .page-link {
  background: var(--ink-dark-surface) !important;
  border-color: var(--ink-dark-border) !important;
  color: var(--ink-dark-text-soft) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .pagination .page-link:hover,
html[data-theme="dark"] .pagination .page-link:focus {
  background: var(--ink-dark-hover-surface) !important;
  border-color: var(--ink-dark-border-strong) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link {
  background: var(--ink-dark-active-bg) !important;
  border-color: var(--ink-dark-active-bg) !important;
  color: var(--ink-dark-active-text) !important;
  font-weight: 750;
}

/* =========================================================
   INKMANA 20260811 REVIEW MODAL + ADDED STATE
   ========================================================= */
html[data-theme="dark"] body #addReviewModal .modal-dialog {
  max-width: 800px;
}
html[data-theme="dark"] body #addReviewModal .modal-content {
  background: var(--ink-dark-surface) !important;
  border: 1px solid var(--ink-dark-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
}
html[data-theme="dark"] body #addReviewModal .modal-header,
html[data-theme="dark"] body #addReviewModal .modal-footer {
  background: var(--ink-dark-surface) !important;
  border-color: var(--ink-dark-border) !important;
  padding: 14px 16px !important;
}
html[data-theme="dark"] body #addReviewModal .modal-body {
  background: var(--ink-dark-surface) !important;
  padding: 18px 16px !important;
}
html[data-theme="dark"] body #addReviewModal :is(.form-control, textarea.form-control, input[type="file"].form-control) {
  background: var(--ink-dark-surface-2) !important;
  border: 1px solid var(--ink-dark-border) !important;
  border-radius: 8px !important;
  color: var(--ink-dark-text) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body #addReviewModal input[type="file"].form-control {
  padding: 0 !important;
  overflow: hidden;
  min-height: 42px;
}
html[data-theme="dark"] body #addReviewModal input[type="file"]::file-selector-button,
html[data-theme="dark"] body #addReviewModal input[type="file"]::-webkit-file-upload-button {
  min-height: 40px;
  margin: 0 12px 0 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-right: 1px solid var(--ink-dark-border) !important;
  border-radius: 0 !important;
  background: #172235 !important;
  color: var(--ink-dark-text-soft) !important;
  font-weight: 600;
  cursor: pointer;
}
html[data-theme="dark"] body #addReviewModal input[type="file"]:hover::file-selector-button,
html[data-theme="dark"] body #addReviewModal input[type="file"]:hover::-webkit-file-upload-button {
  background: var(--ink-dark-hover-surface) !important;
  color: #fff !important;
}
html[data-theme="dark"] body #addReviewModal .form-text {
  color: var(--ink-dark-muted) !important;
}
html[data-theme="dark"] body #addReviewModal .modal-footer .btn {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-weight: 700;
  box-shadow: none !important;
}
html[data-theme="dark"] body #addReviewModal .modal-footer .btn-secondary {
  background: var(--ink-dark-surface-2) !important;
  border: 1px solid var(--ink-dark-border) !important;
  color: var(--ink-dark-text-soft) !important;
}
html[data-theme="dark"] body #addReviewModal .modal-footer .btn-secondary:hover {
  background: var(--ink-dark-hover-surface) !important;
  border-color: var(--ink-dark-border-strong) !important;
  color: #fff !important;
}
html[data-theme="dark"] body #addReviewModal .modal-footer .btn-primary {
  background: var(--ink-dark-primary) !important;
  border: 1px solid var(--ink-dark-primary) !important;
  color: #fff !important;
}
html[data-theme="dark"] body #addReviewModal .modal-footer .btn-primary:hover {
  background: var(--ink-dark-primary-hover) !important;
  border-color: var(--ink-dark-primary-hover) !important;
}

/* Item já adicionado ao carrinho = sucesso/verde em todo o catálogo. */
html[data-theme="dark"] :is(.cart-toggle.added, .card-button.cart-toggle.added, .home-booster-buy.added) {
  background: #2f9e54 !important;
  border-color: #2f9e54 !important;
  color: #fff !important;
  box-shadow: none !important;
}
html[data-theme="dark"] :is(.cart-toggle.added, .card-button.cart-toggle.added, .home-booster-buy.added):hover:not(:disabled) {
  background: #278747 !important;
  border-color: #278747 !important;
  color: #fff !important;
}