/* Shared styles used by both the main app (style.css) and standalone pages (pages.css) */

/* ── Global tooltip ──
 * Any element with [data-tooltip="..."] gets a hover popup. Defaults to a
 * pill shown BELOW the element. Add data-tooltip-pos="top" to flip it above
 * (useful for elements near the bottom of the viewport or floating on top of
 * content like in-page component icons). The host needs `position: relative`
 * (or already-positioned) for the popup to anchor correctly.
 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e2433;
  color: #e5e7eb;
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10010;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-tooltip-pos="top"]:hover::after {
  top: auto;
  bottom: calc(100% + 6px);
}

* {
  scrollbar-color: #3a3f4b #1a1e27;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1e27;
}

::-webkit-scrollbar-thumb {
  background: #3a3f4b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a5060;
}

/* User dropdown menu */
.user-menu-wrap {
  position: relative;
  display: flex;
  margin-left: auto;
}

.user-menu-wrap > button {
  border: 0;
  padding: 3px;
  margin: 0 2px;
  display: flex;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s linear;
  border-radius: 5px;
}

.user-menu-wrap > button:hover {
  background-color: #515a6d;
}

.user-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #13171f;
  border: 1px solid #374151;
  border-radius: 6px;
  min-width: 140px;
  z-index: 10001;
  overflow: hidden;
}

.user-menu.open {
  display: flex;
  flex-direction: column;
}

.user-menu a,
.user-menu form {
  display: block;
  width: 100%;
  padding: 8px 14px;
  margin: 0;
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.6;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.user-menu a:hover,
.user-menu form:hover {
  background-color: #515a6d;
}

.user-menu button {
  display: block;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.6;
  color: inherit;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.user-menu__register {
  color: #60a5fa !important;
}
/* Styles for standalone content pages (about, contact, privacy, terms, cookies) */

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

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #222730;
  color: #e5e7eb;
  line-height: 1.6;
  overflow: hidden;
}

/* Toolbar */
.page-toolbar {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10000;
  height: 35px;
  gap: 0.3rem;
  padding: 0 10px;
  background-color: #13171f;
  color: #fff;
}

.page-toolbar > a:last-child {
  margin-left: auto;
}

.page-toolbar > a {
  border: 0;
  padding: 3px;
  margin: 0 2px;
  display: flex;
  background: transparent;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  transition: all 0.2s linear;
  border-radius: 5px;
  position: relative;
}

.page-toolbar > a:hover {
  background-color: #515a6d;
}

.page-toolbar > a:last-child[data-tooltip]:hover::after,
.page-toolbar .user-menu-wrap button[data-tooltip]:hover::after {
  left: auto;
  right: 0;
  transform: none;
}

.page {
  position: fixed;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 3rem max(1.5rem, calc((100% - 1024px) / 2));
}

.page h1 {
  font-size: 1.8rem;
  margin-bottom: 0.25rem;
  color: #fff;
}

.page h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.5rem;
  color: #fff;
}

.page p {
  margin-bottom: 1rem;
  color: #b0b7c3;
}

.page ul {
  margin: 0 0 1rem 1.5rem;
  color: #b0b7c3;
}

.page .pricing-card ul {
  margin: 0;
}

.page ul li {
  margin-bottom: 0.4rem;
}

.page a {
  color: #60a5fa;
}

.page__updated {
  font-size: 0.85rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
}

/* (page__back removed — replaced by page-toolbar) */

.page__footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2a2f3a;
  font-size: 0.85rem;
  color: #b0b7c3;
}

.page__footer a {
  color: #b0b7c3;
  text-decoration: none;
  margin: 0 0.5rem;
}

.page__footer a:hover {
  color: #fff;
}

/* Form elements (contact page) */
.page label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.page input,
.page textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 1rem;
  background: #222730;
  color: #e5e7eb;
}

.page input:focus,
.page textarea:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
  border-color: #3b82f6;
}

.page textarea {
  resize: vertical;
  min-height: 140px;
}

.page button {
  padding: 10px 20px;
  background: #1e2433;
  color: #e5e7eb;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  font-weight: 500;
}

.page button:hover {
  background: #2a3345;
  color: #fff;
}

.page .success {
  background: #0d2818;
  color: #34d399;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.page .error {
  background: #3b1111;
  color: #f87171;
  padding: 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* Table elements (cookies page) */
.page table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.page th,
.page td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #2a2f3a;
}

.page th {
  font-weight: 600;
  color: #e5e7eb;
}

.page td {
  color: #b0b7c3;
}

/* Shared styles for account pages (profile, billing) */
.account-wrap { position: fixed; top: 35px; left: 0; right: 0; bottom: 0; overflow-y: auto; padding: 2rem; padding-bottom: 4rem; }
.account-page { width: 100%; max-width: 800px; margin: 0 auto; }
.account-page h1 { font-size: 1.5rem; margin-bottom: 1.5rem; color: #fff; }
.account-page .card { background: #13171f; padding: 1.5rem; border-radius: 8px; border: 1px solid #2a2f3a; margin-bottom: 1.5rem; }
.account-page .card h2 { font-size: 1.1rem; margin-bottom: 1rem; border-bottom: 1px solid #2a2f3a; padding-bottom: 0.5rem; color: #fff; }
.account-page .btn { padding: 10px 20px; border: none; border-radius: 6px; font-size: 0.95rem; cursor: pointer; display: inline-block; text-decoration: none; background: #1e2433; color: #e5e7eb; font-weight: 500; }
.account-page .btn:hover { background: #2a3345; color: #fff; }
.account-page .btn-danger { background: rgba(248,113,113,0.1); color: #f87171; }
.account-page .btn-danger:hover { background: rgba(248,113,113,0.25); color: #fca5a5; }
.account-page .btn-success { background: rgba(52,211,153,0.1); color: #34d399; }
.account-page .btn-success:hover { background: rgba(52,211,153,0.25); color: #6ee7b7; }
.account-page .info-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #2a2f3a; }
.account-page .info-row:last-child { border-bottom: none; }
.account-page .info-label { font-size: 0.85rem; color: #9ca3af; }
.account-page .info-value { font-size: 0.95rem; font-weight: 500; }
.account-page .actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; }
.account-page .success-msg { background: #0d2818; color: #34d399; padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; }
.account-page .error-msg { background: #3b1111; color: #f87171; padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.9rem; }
.account-page .nav-links { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.account-page .nav-links a { color: #9ca3af; text-decoration: none; font-size: 0.9rem; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.account-page .nav-links a:hover, .account-page .nav-links a.active { color: #fff; border-bottom-color: #fff; }