/* ==========================================================================
   Nunua Chai — Modern UI refresh layer
   Loaded after main.css & custom.css. Overrides visuals only:
   every class name, id and DOM hook used by JS is left untouched.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap");

/* ---------- Design tokens ---------- */
:root {
  --heading-font: "Plus Jakarta Sans", "Inter", sans-serif;
  --body-font: "Inter", system-ui, -apple-system, sans-serif;

  /* Warm "chai" neutrals */
  --ink: 26 30% 14%;
  --ink-soft: 26 12% 36%;
  --cream: 38 45% 97%;
  --cream-deep: 36 35% 94%;

  --heading-color: var(--ink);
  --light: var(--ink-soft); /* body text */
  --gray-white: var(--cream); /* page background */
  --body-bg: var(--cream);
  --card-bg: 36 28% 95%;
  --border-color: 30, 16%, 80%, 0.55;

  --box-shadow: 0 1px 2px rgb(30 18 2 / 0.05), 0 8px 24px rgb(30 18 2 / 0.06);
  --shadow-md: 0 2px 6px rgb(30 18 2 / 0.06), 0 14px 34px rgb(30 18 2 / 0.09);
  --shadow-lg: 0 4px 10px rgb(30 18 2 / 0.07), 0 24px 60px rgb(30 18 2 / 0.13);

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */
body {
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-color: hsl(var(--cream));
  background-image: radial-gradient(
      900px 480px at 85% -120px,
      hsl(var(--base) / 0.07),
      transparent 70%
    ),
    radial-gradient(
      700px 420px at -10% 10%,
      hsl(var(--base) / 0.05),
      transparent 70%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

a {
  transition: color 0.2s var(--ease);
}

img {
  user-select: none;
}

:focus-visible {
  outline: 2px solid hsl(var(--base));
  outline-offset: 2px;
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: hsl(38 45% 97% / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid hsl(30 20% 80% / 0.4);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}

.header.fixed-header {
  background-color: hsl(38 45% 97% / 0.94);
  box-shadow: 0 6px 24px rgb(30 18 2 / 0.08);
}

@media screen and (max-width: 991px) {
  .header {
    position: sticky;
    background-color: hsl(38 45% 97% / 0.92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* Nav links — pill hover instead of underline */
@media (min-width: 992px) {
  .nav-menu .nav-item .nav-link {
    padding: 8px 16px;
    line-height: 1.4;
    border-radius: 999px;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  }

  .nav-menu .nav-item .nav-link::before {
    display: none;
  }

  .nav-menu .nav-item:hover .nav-link {
    background-color: hsl(var(--base) / 0.12);
    color: hsl(var(--ink)) !important;
  }

  .nav-menu .nav-item.active .nav-link {
    color: hsl(var(--base-d-300)) !important;
    background-color: hsl(var(--base) / 0.14);
  }

  .nav-menu .nav-item {
    padding-right: 6px;
  }
}

/* "Get Started" CTA in nav */
@media (min-width: 992px) {
  .nav-menu .nav-item.login-btn {
    border-radius: 999px;
    box-shadow: 0 4px 14px hsl(var(--base) / 0.4);
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }

  .nav-menu .nav-item.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px hsl(var(--base) / 0.45);
  }
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--body-font);
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease), border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn:active {
  top: auto;
}

.btn--base {
  color: hsl(26 40% 12%);
  box-shadow: 0 4px 14px hsl(var(--base) / 0.35);
}

.btn--base:hover,
.btn--base:focus,
.btn--base:focus-visible {
  color: hsl(26 40% 12%) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px hsl(var(--base) / 0.42) !important;
}

.btn--base .icon {
  color: hsl(26 40% 12%);
}

.btn:hover .icon {
  padding-inline: 10px;
}

.btn-outline--base {
  background-color: hsl(var(--base) / 0.06);
}

.btn-outline--base:hover,
.btn-outline--base:focus,
.btn-outline--base:focus-visible {
  color: hsl(26 40% 12%) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px hsl(var(--base) / 0.4) !important;
}

.btn--outline:hover,
.btn--outline:focus,
.btn--outline:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--box-shadow) !important;
}

.btn--sm {
  border-radius: 999px;
}

/* ---------- Forms ---------- */
.form--label {
  color: hsl(var(--ink) / 0.75);
  font-weight: 600;
  font-size: 0.9rem;
}

.form--control,
.select {
  border-radius: var(--radius-md);
  border: 1.5px solid hsl(var(--border-color));
  background-color: hsl(var(--white));
  line-height: 1.4;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.form--control:hover,
.select:hover {
  border-color: hsl(30 16% 68% / 0.7);
}

.form--control:focus,
.select:focus,
.select:focus-visible {
  border: 1.5px solid hsl(var(--base));
  box-shadow: 0 0 0 4px hsl(var(--base) / 0.18);
  outline: none;
}

.form--control::placeholder {
  color: hsl(var(--ink-soft) / 0.55);
}

.input-group-text {
  border-radius: var(--radius-md);
  border: 1.5px solid hsl(var(--border-color));
  background-color: hsl(var(--cream-deep));
  color: hsl(var(--ink-soft));
  font-weight: 500;
}

.form--check,
.form-check-input {
  accent-color: hsl(var(--base));
}

.form-check-input:checked {
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
}

.form-check-input:focus {
  border-color: hsl(var(--base));
  box-shadow: 0 0 0 4px hsl(var(--base) / 0.18);
}

/* ---------- Cards & panels ---------- */
.custom--card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

.custom--card .card-body {
  background-color: hsl(var(--white));
  border-radius: 0;
}

.custom--card .card-header {
  background-color: hsl(var(--white));
  border-bottom: 1px solid hsl(var(--border-color));
}

.custom--card .card-footer {
  border-top: 1px solid hsl(var(--border-color));
}

/* ---------- Hero / banner ---------- */
.banner-section {
  padding: 150px 0 160px;
  background:
    radial-gradient(640px 320px at 20% 0%, hsl(var(--base) / 0.14), transparent 70%),
    radial-gradient(560px 300px at 80% 10%, hsl(var(--base) / 0.1), transparent 70%);
}

@media screen and (max-width: 991px) {
  .banner-section {
    padding: 130px 0 90px;
  }
}

@media screen and (max-width: 575px) {
  .banner-section {
    padding: 96px 0 60px;
  }
}

.banner-content__title {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.banner-content__input {
  border-radius: 999px;
  border: 1.5px solid hsl(var(--border-color));
  box-shadow: var(--shadow-md);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.banner-content__input:focus-within {
  border-color: hsl(var(--base));
  box-shadow: 0 0 0 5px hsl(var(--base) / 0.18), var(--shadow-md);
}

.banner-content__input input[type="text"] {
  color: hsl(var(--ink));
}

.banner-content__button .btn {
  border-radius: 999px;
  height: 62px;
  font-size: 1.05rem;
  font-weight: 700;
  padding-inline: 36px;
  box-shadow: 0 6px 20px hsl(var(--base) / 0.45);
}

.banner-content__button .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px hsl(var(--base) / 0.5);
}

.banner-icons .icon-list {
  filter: saturate(0.9);
  opacity: 0.9;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.banner-icons .icon-list:hover {
  transform: translateY(-4px);
  opacity: 1;
}

/* ---------- Section headings ---------- */
.section-heading {
  margin-bottom: 56px;
}

.section-heading__title {
  font-weight: 800;
  letter-spacing: -0.025em;
}

.section-heading__title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: hsl(var(--base));
  margin: 14px auto 0;
}

.section-heading__title:empty::after {
  content: none;
}

.section-heading.style-left .section-heading__title::after {
  margin-left: 0;
}

.section-heading__desc {
  color: hsl(var(--ink-soft));
  font-size: 1.075rem;
}

.section-bg {
  background-color: hsl(var(--cream-deep) / 0.6);
}

/* ---------- Feature cards ---------- */
.feature-card {
  background: hsl(var(--white));
  border: 1px solid hsl(var(--border-color));
  border-radius: var(--radius-lg);
  padding: 28px;
  height: 100%;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--base) / 0.5);
}

.feature-card__thumb {
  display: inline-flex;
  padding: 12px;
  border-radius: 14px;
  background: hsl(var(--base) / 0.12);
  margin-bottom: 14px;
}

.feature-card__title {
  font-weight: 700;
}

/* ---------- About / service lists ---------- */
.about-section__item {
  background: hsl(var(--white));
  border: 1px solid hsl(var(--border-color));
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.about-section__item:hover {
  transform: translateX(4px);
  box-shadow: var(--box-shadow);
}

.about-section__thumb img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

/* ---------- Steps ---------- */
.step-list .step .step-card__content {
  background: hsl(var(--white));
  border: 1px solid hsl(var(--border-color));
  border-radius: var(--radius-lg);
  box-shadow: var(--box-shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.step-list .step .step-card__content:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.step-list .step__title {
  font-weight: 800;
}

/* ---------- Profile page ---------- */
.profile-template {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.user-profile .profile-template__body .profile-menu {
  gap: 8px;
  border-bottom: 1px solid hsl(var(--border-color));
}

.user-profile .profile-template__body .profile-menu__item {
  padding-bottom: 0;
}

.user-profile .profile-template__body .profile-menu__link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.user-profile .profile-template__body .profile-menu__link:hover {
  background-color: hsl(var(--base) / 0.1);
  color: hsl(var(--ink));
}

.user-profile .profile-template__body .profile-menu__item.active {
  border-bottom: 0;
}

.user-profile .profile-template__body .profile-menu__item.active .profile-menu__link {
  background-color: hsl(var(--base));
  color: hsl(26 40% 12%);
  font-weight: 700;
}

/* Support ("buy coffee") card — the conversion element */
.user-profile .profile-template__body .buy-coffee-card,
#supportModal .buy-coffee-card,
.membershipModal .buy-coffee-card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--shadow-md);
}

.user-profile .profile-template__body .buy-coffee-card__list {
  border-radius: var(--radius-md);
  border: 1.5px solid hsl(var(--base) / 0.6);
  background-color: hsl(var(--base) / 0.06);
}

/* fix: original had `display: inlien-grid` (invalid), icon never centered */
.user-profile .profile-template__body .buy-coffee-card__list .coffee-cup {
  display: inline-grid;
  place-items: center;
}

.user-profile .profile-template__body .post {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--box-shadow);
  transition: box-shadow 0.25s var(--ease);
}

.user-profile .profile-template__body .post:hover {
  box-shadow: var(--shadow-md);
}

.profile-cover-img {
  border-radius: 0;
}

.post-details-card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--box-shadow);
  overflow: hidden;
}

/* ---------- Dashboard ---------- */
.dashboard-header {
  background: hsl(var(--cream) / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border-color));
}

.sidebar-menu {
  background-color: hsl(var(--cream));
}

.sidebar-menu__inner {
  border-right: 1px solid hsl(var(--border-color));
}

.sidebar-menu-list__link {
  border-radius: 12px;
  font-weight: 500;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.sidebar-menu-list__item:hover,
.sidebar-menu-list__item.active a {
  background-color: hsl(var(--base) / 0.14);
  border-radius: 12px;
  color: hsl(var(--ink));
}

.sidebar-menu-list__item.active a {
  font-weight: 700;
}

.template .dashboard-widget {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--box-shadow);
}

/* ---------- Auth pages ---------- */
.account {
  background-color: transparent;
}

.account-form {
  background-color: hsl(var(--white));
  border: 1px solid hsl(var(--border-color));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.social-login .login-link {
  border: 1px solid hsl(var(--border-color));
  background-color: hsl(var(--white));
  border-radius: 999px;
  font-weight: 600;
}

.social-login .login-link:hover {
  background-color: hsl(var(--base) / 0.15);
  border-color: hsl(var(--base) / 0.6);
}

/* ---------- Modals & dropdowns ---------- */
.modal-content,
.custom--modal .modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--shadow-lg);
}

.custom--modal .modal-header {
  border-bottom: 1px solid hsl(var(--border-color));
}

.modal-backdrop.show {
  opacity: 0.45;
}

.dropdown-menu {
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--shadow-md);
  padding: 6px;
}

.dropdown-item {
  border-radius: 8px;
  font-weight: 500;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: hsl(var(--base) / 0.12);
  color: hsl(var(--ink));
}

.dropdown-item:active {
  background-color: hsl(var(--base) / 0.2);
  color: hsl(var(--ink));
}

/* ---------- Tabs ---------- */
.custom--tab {
  border-bottom: 0;
  gap: 6px;
}

.custom--tab .nav-item .nav-link {
  border-radius: 999px;
  font-weight: 600;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.custom--tab .nav-item .nav-link:hover {
  background-color: hsl(var(--base) / 0.12) !important;
  color: hsl(var(--ink));
}

.custom--tab .nav-item .nav-link.active,
.custom--tab .nav-item .nav-link .nav-pills .show > .nav-link {
  background-color: hsl(var(--base)) !important;
  color: hsl(26 40% 12%);
  border-bottom: 0;
}

/* ---------- Tables ---------- */
.table {
  --bs-table-bg: transparent;
}

.table > thead > tr > th {
  background-color: hsl(var(--cream-deep) / 0.7);
  color: hsl(var(--ink));
  font-weight: 700;
  border-bottom: 1px solid hsl(var(--border-color));
}

.table > tbody > tr > td {
  border-color: hsl(var(--border-color));
}

.table > tbody > tr {
  transition: background-color 0.15s var(--ease);
}

.table > tbody > tr:hover {
  background-color: hsl(var(--base) / 0.05);
}

/* ---------- Badges & alerts ---------- */
.badge,
.custom--badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.alert {
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border-color));
}

/* ---------- Pagination ---------- */
.pagination .page-link {
  border-radius: 10px;
  border: 1px solid hsl(var(--border-color));
  color: hsl(var(--ink-soft));
  font-weight: 600;
  transition: all 0.2s var(--ease);
}

.pagination .page-link:hover {
  background-color: hsl(var(--base) / 0.12);
  border-color: hsl(var(--base) / 0.5);
  color: hsl(var(--ink));
}

.pagination .page-item.active .page-link {
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
  color: hsl(26 40% 12%);
}

/* ---------- Accordion / FAQ ---------- */
.accordion-item,
.custom--accordion .accordion-item {
  border-radius: var(--radius-md) !important;
  border: 1px solid hsl(var(--border-color));
  overflow: hidden;
  margin-bottom: 10px;
  background: hsl(var(--white));
}

.accordion-button {
  font-weight: 600;
  font-family: var(--heading-font);
}

.accordion-button:not(.collapsed) {
  background-color: hsl(var(--base) / 0.1);
  color: hsl(var(--ink));
}

.accordion-button:focus {
  box-shadow: 0 0 0 4px hsl(var(--base) / 0.15);
}

/* ---------- Explore / search cards ---------- */
.explore-creator {
  border-radius: var(--radius-md) !important;
  border: 1px solid hsl(var(--border-color)) !important;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.explore-creator:hover {
  border-color: hsl(var(--base) / 0.6) !important;
  box-shadow: var(--box-shadow);
}

.explore-creator__thumb {
  border-radius: 50%;
  overflow: hidden;
}

.search-list {
  border-radius: var(--radius-md);
}

.creator-search-box {
  border-radius: 999px !important;
}

/* ---------- Gallery ---------- */
.gallery li {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ---------- Footer ---------- */
.footer-area {
  background-color: hsl(26 28% 15%);
  color: hsl(36 25% 80%);
  border-top: 1px solid hsl(30 20% 24%);
}

.footer-area .footer-menu__link {
  color: hsl(36 25% 78%);
  font-weight: 500;
}

.footer-area .footer-menu__link:hover {
  color: hsl(var(--base));
  text-decoration: none;
}

.footer-area .bottom-footer-text {
  color: hsl(36 18% 68%);
}

.footer-area .bottom-footer-text a {
  color: hsl(var(--base));
  font-weight: 600;
}

.footer-area .footer-menu__item .footer-menu__social {
  color: hsl(36 25% 80%) !important;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid hsl(36 20% 30%);
  transition: all 0.25s var(--ease);
}

.footer-area .footer-menu__item .footer-menu__social:hover {
  color: hsl(26 40% 12%) !important;
  background-color: hsl(var(--base));
  border-color: hsl(var(--base));
  transform: translateY(-2px);
}

.footer-area .footer-menu__item {
  color: hsl(36 25% 80%);
}

.footer-area .hide-on-mobile {
  color: hsl(36 15% 45%);
}

/* ---------- Scroll to top ---------- */
.scroll-top {
  color: hsl(26 40% 12%);
  box-shadow: var(--shadow-md);
}

.scroll-top:hover {
  color: hsl(26 40% 12%);
  transform: scale(1.08);
}

/* ---------- Cookies card ---------- */
.cookies-card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border-color));
  box-shadow: var(--shadow-lg);
  padding: 20px;
}

.cookies-card__icon {
  border-radius: 14px;
  background-color: hsl(var(--base) / 0.15);
  color: hsl(var(--base-d-300));
}

/* ---------- Preloader ---------- */
.preloader {
  background-color: hsl(var(--cream));
}

/* ---------- Misc polish ---------- */
.body-overlay.show,
.sidebar-overlay.show {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

::selection {
  color: hsl(26 40% 12%);
  background: hsl(var(--base) / 0.5);
}

input::selection {
  color: hsl(26 40% 12%);
  background: hsl(var(--base) / 0.5);
}

/* Payment / gateway lists */
.payment-system-list {
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border-color));
}

.payment-item:has(.payment-item__radio:checked) {
  background: hsl(var(--base) / 0.08);
  border-radius: 10px;
}

.payment-card-title {
  border-radius: var(--radius-md);
}

/* Cart dropdown */
.cart-dropdown {
  border-radius: var(--radius-md);
}

#mobileStickyCart .cart-btn,
#desktopStickyCart .cart-btn {
  color: hsl(26 40% 12%);
  box-shadow: var(--shadow-md) !important;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .feature-card,
  .about-section__item,
  .banner-icons .icon-list,
  .scroll-top,
  .footer-area .footer-menu__item .footer-menu__social {
    transition: none;
  }
}