﻿.hostara-paymenter-theme {
  --hostara-bg: #090d18;
  --hostara-bg-soft: #121b30;
  --hostara-line: #253455;
  --hostara-text: #eaf0ff;
  --hostara-muted: #b3c0df;
  --hostara-accent-a: #36e4bd;
  --hostara-accent-b: #41b7ff;
  --hostara-accent-c: #9567ff;
  --hostara-radius: 14px;
  --hostara-shadow: 0 18px 48px rgba(2, 7, 17, 0.45);
  --hostara-font: 'Sora', 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

.hostara-paymenter-theme body {
  background:
    radial-gradient(circle at 70% -8%, rgba(149, 103, 255, 0.2) 0%, rgba(149, 103, 255, 0) 35%),
    radial-gradient(circle at 15% 10%, rgba(65, 183, 255, 0.14) 0%, rgba(65, 183, 255, 0) 28%),
    linear-gradient(180deg, #0b1020 0%, var(--hostara-bg) 100%) !important;
  color: var(--hostara-text) !important;
  font-family: var(--hostara-font);
}

.hostara-paymenter-theme nav,
.hostara-paymenter-theme header,
.hostara-paymenter-theme [data-theme='default'] nav,
.hostara-paymenter-theme [data-theme='default'] header {
  background: rgba(15, 22, 40, 0.64) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(112, 130, 181, 0.35) !important;
}

.hostara-paymenter-theme main,
.hostara-paymenter-theme [role='main'] {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.hostara-paymenter-theme main a,
.hostara-paymenter-theme footer a,
.hostara-paymenter-theme nav a {
  color: var(--hostara-muted);
}

.hostara-paymenter-theme main a:hover,
.hostara-paymenter-theme footer a:hover,
.hostara-paymenter-theme nav a:hover {
  color: var(--hostara-text);
}

.hostara-paymenter-theme .card,
.hostara-paymenter-theme .panel,
.hostara-paymenter-theme [data-testid='product-card'],
.hostara-paymenter-theme [class*='rounded'][class*='border'],
.hostara-paymenter-theme .table,
.hostara-paymenter-theme .alert,
.hostara-paymenter-theme article {
  border: 1px solid rgba(119, 141, 193, 0.3) !important;
  border-radius: var(--hostara-radius) !important;
  background: linear-gradient(165deg, rgba(19, 29, 53, 0.62), rgba(11, 16, 30, 0.68)) !important;
  box-shadow: var(--hostara-shadow);
}

.hostara-paymenter-theme .container > .flex.flex-col.md\:grid.md\:grid-cols-4.gap-4 {
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 1.35rem;
}

.hostara-paymenter-theme .container > .flex.flex-col.md\:grid.md\:grid-cols-4.gap-4 > .flex.flex-col.gap-2 {
  position: sticky;
  top: 88px;
  align-self: start;
}

.hostara-paymenter-theme .container > .flex.flex-col.md\:grid.md\:grid-cols-4.gap-4 > .col-span-3 {
  min-width: 0;
}

.hostara-paymenter-theme .container .grid.sm\:grid-cols-2.md\:grid-cols-3.gap-4.h-fit {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.hostara-paymenter-theme .prose {
  max-width: 68ch;
}

.hostara-paymenter-theme .prose p,
.hostara-paymenter-theme article p {
  line-height: 1.6;
}

.hostara-paymenter-theme .container .flex.flex-col.bg-background-secondary,
.hostara-paymenter-theme .container div[class*='bg-background-secondary'][class*='rounded-lg'] {
  padding: 1rem 1rem 1.1rem !important;
}

.hostara-paymenter-theme .container .col-span-3 .flex.flex-col.bg-background-secondary,
.hostara-paymenter-theme .container .col-span-3 div[class*='bg-background-secondary'][class*='rounded-lg'] {
  min-height: 220px;
}

.hostara-paymenter-theme .container .col-span-3 article.prose {
  display: -webkit-box;
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hostara-paymenter-theme .container h1 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  letter-spacing: 0.015em;
}

.hostara-paymenter-theme .container h2 {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
}

.hostara-paymenter-theme .container h3 {
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.2rem);
}

.hostara-paymenter-theme .container .mt-auto.pt-2.flex.items-center.gap-2 {
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(119, 141, 193, 0.2);
}

.hostara-paymenter-theme .container .col-span-3 .flex.flex-col.bg-background-secondary:hover {
  border-color: rgba(137, 171, 255, 0.48) !important;
  box-shadow: 0 20px 34px rgba(4, 14, 30, 0.45), 0 0 0 1px rgba(80, 219, 192, 0.22);
}

.hostara-paymenter-theme h1,
.hostara-paymenter-theme h2,
.hostara-paymenter-theme h3,
.hostara-paymenter-theme h4,
.hostara-paymenter-theme h5 {
  color: var(--hostara-text) !important;
  letter-spacing: 0.01em;
}

.hostara-paymenter-theme p,
.hostara-paymenter-theme li,
.hostara-paymenter-theme span {
  color: var(--hostara-muted);
}

.hostara-paymenter-theme .btn,
.hostara-paymenter-theme button,
.hostara-paymenter-theme a[class*='btn'],
.hostara-paymenter-theme input[type='submit'] {
  border-radius: 12px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hostara-paymenter-theme .btn:hover,
.hostara-paymenter-theme button:hover,
.hostara-paymenter-theme a[class*='btn']:hover,
.hostara-paymenter-theme input[type='submit']:hover {
  transform: translateY(-1px);
}

.hostara-paymenter-theme .btn-primary,
.hostara-paymenter-theme button[type='submit'],
.hostara-paymenter-theme a[class*='bg-primary'],
.hostara-paymenter-theme .bg-primary,
.hostara-paymenter-theme .bg-indigo-600,
.hostara-paymenter-theme .bg-blue-600 {
  background: linear-gradient(120deg, var(--hostara-accent-c), var(--hostara-accent-b) 55%, var(--hostara-accent-a)) !important;
  border: none !important;
  color: #04131a !important;
  box-shadow: 0 12px 28px rgba(48, 194, 244, 0.22);
}

.hostara-paymenter-theme input,
.hostara-paymenter-theme select,
.hostara-paymenter-theme textarea {
  color: var(--hostara-text) !important;
  background: rgba(12, 18, 34, 0.72) !important;
  border: 1px solid rgba(119, 141, 193, 0.32) !important;
  border-radius: 10px !important;
}

.hostara-paymenter-theme hr,
.hostara-paymenter-theme .border,
.hostara-paymenter-theme [class*='border-'] {
  border-color: rgba(119, 141, 193, 0.26) !important;
}

.hostara-paymenter-theme .text-muted,
.hostara-paymenter-theme .text-gray-400,
.hostara-paymenter-theme .text-gray-500,
.hostara-paymenter-theme .text-slate-400,
.hostara-paymenter-theme .text-slate-500 {
  color: var(--hostara-muted) !important;
}

/* Ecosystem quick links injected via JS */
.hostara-ecosystem-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.75rem;
  flex-wrap: wrap;
}

.hostara-ecosystem-links a {
  color: var(--hostara-text) !important;
  border: 1px solid rgba(112, 130, 181, 0.42);
  border-radius: 999px;
  padding: 0.38rem 0.78rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.hostara-ecosystem-links a:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-1px);
}

@media (max-width: 980px) {
  .hostara-paymenter-theme .container > .flex.flex-col.md\:grid.md\:grid-cols-4.gap-4 {
    display: flex !important;
    flex-direction: column;
  }

  .hostara-paymenter-theme .container > .flex.flex-col.md\:grid.md\:grid-cols-4.gap-4 > .flex.flex-col.gap-2 {
    position: static;
  }

  .hostara-paymenter-theme .container .grid.sm\:grid-cols-2.md\:grid-cols-3.gap-4.h-fit {
    grid-template-columns: 1fr;
  }

  .hostara-ecosystem-links {
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0;
  }

  .hostara-ecosystem-links a {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Auth screens: enforce usable layout for login/register */
.hostara-paymenter-theme form#login,
.hostara-paymenter-theme form#register {
  width: 100% !important;
  max-width: min(980px, 96vw) !important;
  margin: 2rem auto !important;
  padding: 2rem !important;
  border: 1px solid rgba(119, 141, 193, 0.32) !important;
  border-radius: 18px !important;
  background: linear-gradient(165deg, rgba(19, 29, 53, 0.72), rgba(11, 16, 30, 0.78)) !important;
  box-shadow: 0 24px 56px rgba(2, 7, 17, 0.48);
}

.hostara-paymenter-theme form#login {
  max-width: min(740px, 94vw) !important;
}

.hostara-paymenter-theme form#register {
  max-width: min(1060px, 96vw) !important;
}

.hostara-paymenter-theme form#login fieldset,
.hostara-paymenter-theme form#register fieldset {
  width: 100%;
}

.hostara-paymenter-theme form#login input:not([type='checkbox']):not([type='radio']),
.hostara-paymenter-theme form#register input:not([type='checkbox']):not([type='radio']),
.hostara-paymenter-theme form#register select,
.hostara-paymenter-theme form#register textarea {
  display: block;
  width: 100% !important;
  min-height: 42px;
  padding: 0.62rem 0.78rem !important;
}

.hostara-paymenter-theme form#login input[type='checkbox'],
.hostara-paymenter-theme form#register input[type='checkbox'] {
  width: 1rem !important;
  min-width: 1rem;
  max-width: 1rem;
  height: 1rem !important;
  min-height: 1rem;
  padding: 0 !important;
  margin: 0;
}

.hostara-paymenter-theme form#login .flex.flex-row {
  align-items: center;
  gap: 0.6rem;
}

.hostara-paymenter-theme form#login .flex.flex-row .flex.items-center {
  flex: 0 0 auto;
  width: auto;
}

.hostara-paymenter-theme form#login .flex.flex-row a {
  margin-left: auto !important;
  display: inline-block;
  white-space: nowrap;
}

.hostara-paymenter-theme form#login button,
.hostara-paymenter-theme form#register button {
  width: 100% !important;
  min-height: 42px;
}

.hostara-paymenter-theme form#register .md\:grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.hostara-paymenter-theme form#register .col-span-2 {
  grid-column: span 2 / span 2;
}

@media (max-width: 900px) {
  .hostara-paymenter-theme form#login,
  .hostara-paymenter-theme form#register {
    max-width: calc(100vw - 1.2rem) !important;
    padding: 1.15rem !important;
  }

  .hostara-paymenter-theme form#register .md\:grid {
    grid-template-columns: 1fr;
  }

  .hostara-paymenter-theme form#register .col-span-2 {
    grid-column: span 1 / span 1;
  }
}
