:root {
  /* Yut Store palette: white / blue / orange */
  --ah-cream: #F4F8FC;
  --ah-cream-soft: #E8F0FA;
  --ah-primary: #1D63D8;
  --ah-primary-dark: #144A9E;
  --ah-accent: #F5820A;
  --ah-accent-dark: #D66900;
  --ah-gold: #FFB35C;
  --ah-brick: #C0392B;
  --ah-taupe: #64748B;
  --ah-charcoal: #1E2A38;
  --ah-charcoal-soft: #64748B;
  --ah-white: #FFFFFF;

  --ah-font-display: "Noto Sans Thai", sans-serif;
  --ah-font-body: "Noto Sans Thai", sans-serif;

  --ah-radius: .75rem;
  --ah-shadow: 0 6px 18px rgba(29, 99, 216, 0.08);
}

body {
  font-family: var(--ah-font-body);
  color: var(--ah-charcoal);
  background-color: var(--ah-white);
}

h1, h2, h3, .ah-brand {
  font-family: var(--ah-font-display);
}

a {
  text-decoration: none;
}

/* Header */
.ah-navbar {
  background-color: rgba(246, 241, 235, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(42, 42, 40, 0.08);
  z-index: 1030;
}

.ah-brand {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ah-primary);
  flex-shrink: 0;
}

.ah-header-search input {
  border-radius: 999px;
  border: 1px solid rgba(42, 42, 40, 0.15);
  padding: .5rem 1rem;
}

.ah-header-link {
  color: var(--ah-charcoal);
  font-weight: 500;
  font-size: .95rem;
}

.ah-header-link:hover {
  color: var(--ah-primary);
}

.ah-lang-toggle {
  background: transparent;
  border: 1px solid rgba(42, 42, 40, 0.15);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ah-charcoal);
  padding: .35rem .8rem;
  flex-shrink: 0;
}

.ah-lang-toggle:hover {
  border-color: var(--ah-primary);
  color: var(--ah-primary);
}

/* Buttons */
.ah-btn-primary {
  background-color: var(--ah-primary);
  border: 1px solid var(--ah-primary);
  color: var(--ah-white);
  border-radius: 999px;
  font-weight: 700;
  padding: .55rem 1.4rem;
  box-shadow: 0 6px 16px rgba(44, 79, 108, 0.25);
  white-space: nowrap;
}

.ah-btn-primary:hover {
  background-color: var(--ah-primary-dark);
  border-color: var(--ah-primary-dark);
  color: var(--ah-white);
}

.ah-btn-outline {
  background-color: var(--ah-white);
  border: 1px solid rgba(42, 42, 40, 0.15);
  color: var(--ah-charcoal);
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  padding: .5rem 1.2rem;
}

.ah-btn-outline:hover {
  border-color: var(--ah-primary);
  color: var(--ah-primary);
}

/* Hero */
.ah-hero {
  padding: 3.5rem 0 3rem;
  background-color: var(--ah-white);
}

.ah-eyebrow {
  color: var(--ah-accent);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: .5rem;
}

.ah-h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ah-primary-dark);
  margin-bottom: 1.5rem;
}

.ah-h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--ah-primary-dark);
}

.ah-h3-banner {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ah-primary-dark);
}

.ah-search-wrap {
  max-width: 38rem;
  display: flex;
  gap: .5rem;
  background-color: var(--ah-white);
  border-radius: 999px;
  padding: .4rem .4rem .4rem 1.25rem;
  box-shadow: var(--ah-shadow);
}

.ah-search-input {
  border: none;
  flex: 1;
  font-size: 1rem;
}

.ah-search-input:focus {
  box-shadow: none;
  outline: none;
}

.ah-search-btn {
  flex-shrink: 0;
}

.ah-search-hint {
  color: var(--ah-charcoal-soft);
  font-size: .85rem;
  margin-top: .75rem;
}

/* Sections */
.ah-section {
  padding: 3.5rem 0;
}

.ah-alt-bg {
  background-color: var(--ah-white);
}

.ah-link-more {
  color: var(--ah-accent-dark);
  font-weight: 600;
  font-size: .9rem;
}

.ah-link-more:hover {
  color: var(--ah-brick);
}

/* Quick Action Grid */
.ah-quick-actions {
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.ah-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background-color: var(--ah-white);
  border: 1px solid rgba(42, 42, 40, 0.08);
  border-radius: var(--ah-radius);
  padding: 1.25rem .5rem;
  text-align: center;
  color: var(--ah-charcoal);
  font-weight: 600;
  font-size: .85rem;
  height: 100%;
}

.ah-quick-card:hover {
  border-color: var(--ah-primary);
  color: var(--ah-primary);
}

.ah-quick-icon {
  font-size: 1.75rem;
}

/* Filter bar (Lost & Found) */
.ah-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.ah-filter-select {
  width: auto;
  border-radius: 999px;
  border: 1px solid rgba(42, 42, 40, 0.15);
  font-size: .85rem;
  padding: .4rem 1rem;
}

.ah-filter-pills {
  display: flex;
  gap: .4rem;
}

.ah-pill {
  border: 1px solid rgba(42, 42, 40, 0.15);
  background-color: var(--ah-white);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .9rem;
  color: var(--ah-charcoal-soft);
}

.ah-pill.is-active {
  background-color: var(--ah-primary);
  border-color: var(--ah-primary);
  color: var(--ah-white);
}

/* Portrait mobile — horizontal scroll strip with premium rectangular chips */
@media (max-width: 767px) and (orientation: portrait) {
  .ah-filter-pills {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: .5rem;
    padding-bottom: .25rem;
    /* Hide scrollbar but keep scroll */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .ah-filter-pills::-webkit-scrollbar { display: none; }

  .ah-pill {
    flex-shrink: 0;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    padding: .45rem 1.1rem;
    letter-spacing: .02em;
    border: 1.5px solid rgba(44, 79, 108, 0.18);
    background: var(--ah-white);
    box-shadow: 0 1px 4px rgba(44, 79, 108, 0.08);
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s;
  }

  .ah-pill.is-active {
    background: linear-gradient(135deg, var(--ah-primary) 0%, var(--ah-primary-dark) 100%);
    border-color: transparent;
    color: var(--ah-white);
    box-shadow: 0 2px 8px rgba(44, 79, 108, 0.28);
  }
}

/* Lost & Found cards */
.ah-lf-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background-color: var(--ah-white);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  overflow: hidden;
  height: 270px;
}

.ah-lf-card:hover {
  box-shadow: 0 12px 28px rgba(42, 42, 40, 0.12);
}

.ah-lf-photo {
  height: 155px;
  background-size: cover;
  background-position: center;
  background-color: var(--ah-cream-soft);
  position: relative;
  flex-shrink: 0;
}

.ah-lf-badge {
  position: absolute;
  top: .5rem;
  left: .5rem;
  background-color: rgba(0,0,0,.45);
  color: var(--ah-white);
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
}

.ah-lf-status-tag {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
  color: var(--ah-white);
}
.ah-lf-status-tag.is-lost   { background-color: var(--ah-brick); }
.ah-lf-status-tag.is-found  { background-color: #2a9d5c; }
.ah-lf-status-tag.is-closed { background-color: var(--ah-charcoal-soft); }

.ah-lf-body {
  padding: .6rem .75rem .5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ah-lf-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--ah-primary-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .1rem;
}

.ah-lf-meta {
  font-size: .75rem;
  color: var(--ah-charcoal-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ah-lf-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .4rem;
  gap: .3rem;
}

.ah-lf-reward {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ah-accent-dark);
  white-space: nowrap;
}

.ah-lf-detail-btn {
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: none;
  background-color: var(--ah-primary);
  color: var(--ah-white);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Clinic cards */
.ah-clinic-card {
  background-color: var(--ah-white);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  padding: 1.1rem;
  height: 100%;
}

.ah-clinic-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}

.ah-clinic-name {
  font-weight: 700;
  color: var(--ah-primary-dark);
}

.ah-clinic-emergency {
  background-color: var(--ah-brick);
  color: var(--ah-white);
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.ah-clinic-meta {
  font-size: .85rem;
  color: var(--ah-charcoal-soft);
  margin: .4rem 0 .8rem;
}

.ah-clinic-open {
  color: var(--ah-primary);
  font-weight: 600;
}

.ah-clinic-actions {
  display: flex;
  gap: .5rem;
}

.ah-clinic-actions .ah-btn-outline {
  flex: 1;
  text-align: center;
}

/* Marketplace mini cards */
.ah-mini-card {
  background-color: var(--ah-white);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  padding: 1.25rem .5rem;
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.ah-mini-icon {
  font-size: 1.75rem;
}

/* Marketplace product cards (backend-driven) */
.ah-product-card {
  color: inherit;
  background-color: var(--ah-white);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.ah-product-photo {
  width: 100%;
  /* Square (1:1), not a fixed short 188px height — most marketplace product photos (Shopee
     included) are themselves near-square, so a square box means "contain" fills it edge to
     edge with little/no letterboxing, and it scales symmetrically with the card's own width
     at every breakpoint instead of looking small/cropped at a fixed short height. */
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--ah-white);
  position: relative;
}

.ah-product-icon-badge {
  position: absolute;
  bottom: .5rem;
  left: .5rem;
  background-color: var(--ah-white);
  font-size: 1rem;
  line-height: 1;
  padding: .3rem .45rem;
  border-radius: 999px;
  box-shadow: var(--ah-shadow);
}

/* No-image fallback — must reserve the exact same square box as .ah-product-photo so cards
   without a product image still line up with cards that have one, instead of collapsing to
   their content height and leaving a ragged gap in the grid row. */
.ah-product-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 2.5rem;
  background-color: var(--ah-cream-soft);
}

.ah-product-body {
  padding: .75rem .75rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.ah-product-name {
  font-weight: 600;
  font-size: .9rem;
}

.ah-product-price {
  color: var(--ah-accent-dark);
  font-weight: 700;
  font-size: .9rem;
}

/* Shopee + view-details buttons — a single edge-to-edge row split evenly left/right, breaking
   out of .ah-product-body's side AND bottom padding (negative margins matching .75rem/1.1rem)
   so the row sits flush against the card's bottom edge with no gap. overflow:hidden + border-
   radius on the card naturally rounds the row's bottom corners. */
.ah-product-actions {
  display: flex;
  width: calc(100% + 1.5rem);
  margin: .5rem -.75rem -1.1rem;
}

.ah-product-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  font-size: .7rem;
  padding: .6rem .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ah-btn-shopee {
  background-color: #FA4F2F;
  color: var(--ah-white);
}

.ah-btn-shopee:hover {
  background-color: #e0431f;
  color: var(--ah-white);
}

.ah-db-btn-edit {
  background-color: #FA4F2F;
  color: var(--ah-white);
  font-size: .78rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-weight: 600;
}

.ah-db-btn-edit:hover {
  background-color: #e0431f;
  color: var(--ah-white);
}

.ah-db-btn-delete {
  background-color: #dc3545;
  color: var(--ah-white);
  font-size: .78rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-weight: 600;
}

.ah-db-btn-delete:hover {
  background-color: #bb2d3b;
  color: var(--ah-white);
}

.ah-product-card:hover {
  box-shadow: 0 10px 22px rgba(42, 42, 40, 0.12);
}

/* Tighter gutters in the main Marketplace grid (homepage + marketplace.html) so the now-fixed
   Cards sit closer together instead of Bootstrap's row g-3 gap. #relatedMarketplaceGrid
   (marketplace-product.html's "other products" row) shares every rule in this block too, so its
   cards render pixel-identical to the homepage grid. */
#marketplaceGrid > div,
#relatedMarketplaceGrid > div,
#searchMarketplaceGrid > div {
  padding-left: 7px;
  padding-right: 7px;
}

#marketplaceGrid,
#relatedMarketplaceGrid,
#searchMarketplaceGrid {
  --bs-gutter-y: 1.5rem;
}

/* More breathing room above the Marketplace pagination controls — scoped to this id rather
   than redefining the shared .mt-3 utility (used all over the site). Needs !important since
   Bootstrap's own .mt-3 utility is !important by design and otherwise wins regardless of
   selector specificity. */
#marketplacePagination {
  margin-top: 2rem !important;
}

/* Shopee-style card body: shop badge → name (1 line) → price row (price/compare-at left,
   sold count right) → actions, each stacked as its own full-width row. */
#marketplaceGrid .ah-product-body,
#relatedMarketplaceGrid .ah-product-body,
#searchMarketplaceGrid .ah-product-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: .6rem .75rem 1.1rem;
  gap: .25rem;
}

#marketplaceGrid .ah-product-shop-badge,
#relatedMarketplaceGrid .ah-product-shop-badge,
#searchMarketplaceGrid .ah-product-shop-badge {
  align-self: flex-start;
  font-size: .65rem;
  font-weight: 600;
  color: var(--ah-primary);
  background-color: var(--ah-cream-soft);
  border: 1px solid var(--ah-primary);
  border-radius: 999px;
  padding: .05rem .5rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#marketplaceGrid .ah-product-name,
#relatedMarketplaceGrid .ah-product-name,
#searchMarketplaceGrid .ah-product-name {
  font-weight: 300;
  font-size: .8rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  min-width: 0;
}

#marketplaceGrid .ah-product-meta-row,
#relatedMarketplaceGrid .ah-product-meta-row,
#searchMarketplaceGrid .ah-product-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  row-gap: .1rem;
  column-gap: .4rem;
}

#marketplaceGrid .ah-product-price-group,
#relatedMarketplaceGrid .ah-product-price-group,
#searchMarketplaceGrid .ah-product-price-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  min-width: 0;
}

#marketplaceGrid .ah-product-price,
#relatedMarketplaceGrid .ah-product-price,
#searchMarketplaceGrid .ah-product-price {
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
  color: var(--ah-accent-dark);
}

#marketplaceGrid .ah-product-compare-price,
#relatedMarketplaceGrid .ah-product-compare-price,
#searchMarketplaceGrid .ah-product-compare-price {
  font-size: .7rem;
  color: var(--ah-charcoal-soft);
  text-decoration: line-through;
  white-space: nowrap;
}

#marketplaceGrid .ah-product-sold,
#relatedMarketplaceGrid .ah-product-sold,
#searchMarketplaceGrid .ah-product-sold {
  font-size: .7rem;
  text-align: right;
  white-space: nowrap;
  color: var(--ah-charcoal-soft);
  flex-shrink: 0;
}

#marketplaceGrid .ah-product-actions,
#relatedMarketplaceGrid .ah-product-actions,
#searchMarketplaceGrid .ah-product-actions {
  margin-top: auto;
}

/* Discount badge — top-right of the product photo, only ever rendered when a real
   compare-at price backs the percentage (see discountPercent in marketplace.ts). */
.ah-product-discount-badge {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background-color: var(--ah-brick);
  color: var(--ah-white);
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 6px;
  box-shadow: var(--ah-shadow);
}

/* index (#marketplace section) and marketplace-product detail page (related grid) —
   min-height (not a hard height) so a card with more rows (shop badge/compare-price/sold,
   or a square photo taller than the old fixed 188px) can grow instead of clipping content. */
.page-index #marketplaceGrid .ah-product-card,
.page-product #relatedMarketplaceGrid .ah-product-card {
  min-height: 270px;
}

/* search results + full marketplace listing keep their own size */
#searchMarketplaceGrid .ah-product-card,
.page-marketplace #marketplaceGrid .ah-product-card {
  min-height: 270px;
}

#marketplaceGrid .ah-product-actions,
#relatedMarketplaceGrid .ah-product-actions,
#searchMarketplaceGrid .ah-product-actions {
  margin-top: auto;
}

.ah-product-detail-photo {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: var(--ah-radius);
}

/* Detail-page photo gallery (big photo + small slide thumbnails) — Lost & Found for now,
   reusable anywhere else a detail page needs more than one photo. */
.ah-gallery-thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
}

.ah-gallery-thumb {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: var(--ah-radius);
  cursor: pointer;
  opacity: .55;
  border: 2px solid transparent;
  transition: opacity .15s ease, border-color .15s ease;
}

.ah-gallery-thumb:hover {
  opacity: .85;
}

.ah-gallery-thumb.is-active {
  opacity: 1;
  border-color: var(--ah-primary);
}

/* Status badge (Lost & Found) */
.ah-status-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: 999px;
  color: var(--ah-white);
}

.ah-status-badge.is-lost {
  background-color: var(--ah-brick);
}

.ah-status-badge.is-found {
  background-color: var(--ah-primary);
}

.ah-status-badge.is-closed {
  background-color: var(--ah-taupe);
}

/* Pagination (Marketplace) */
.ah-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.ah-pagination-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .6rem;
  border-radius: var(--ah-radius);
  border: 1px solid var(--ah-cream-soft);
  background-color: var(--ah-white);
  color: var(--ah-charcoal-soft);
  font-weight: 600;
  font-size: .85rem;
}

.ah-pagination-btn.is-active {
  background-color: var(--ah-primary);
  border-color: var(--ah-primary);
  color: var(--ah-white);
}

.ah-pagination-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.ah-pagination-ellipsis {
  min-width: 1.25rem;
  text-align: center;
  color: var(--ah-charcoal-soft);
  font-weight: 600;
  font-size: .85rem;
}

/* List cards (Knowledge / Community / Activity) */
.ah-list-card {
  background-color: var(--ah-white);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  overflow: hidden;
}

.ah-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid rgba(42, 42, 40, 0.06);
  color: inherit;
  transition: background-color .15s ease;
}

.ah-list-item:last-child {
  border-bottom: none;
}

/* Community items are links (open a detail page) — Knowledge/Activity stay plain divs */
a.ah-list-item:hover {
  background-color: var(--ah-cream-soft);
}

.ah-list-item-title {
  font-weight: 600;
  color: var(--ah-charcoal);
  font-size: .92rem;
}

.ah-list-item-meta {
  font-size: .78rem;
  color: var(--ah-charcoal-soft);
}

.ah-list-item-tag {
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ah-primary);
  background-color: rgba(44, 79, 108, 0.1);
  padding: .25rem .55rem;
  border-radius: 999px;
}

/* AI banner */
.ah-ai-banner {
  background-color: var(--ah-primary-dark);
  color: var(--ah-white);
  padding: 3rem 0;
}

.ah-ai-banner .ah-h3-banner {
  color: var(--ah-white);
}

.ah-ai-banner-text {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.ah-chip {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--ah-white);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .9rem;
}

.ah-chip:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.ah-ai-input-wrap {
  display: flex;
  gap: .5rem;
  background-color: var(--ah-white);
  border-radius: 999px;
  padding: .35rem .35rem .35rem 1.1rem;
}

.ah-ai-input-wrap input {
  border: none;
  flex: 1;
  font-size: .9rem;
}

.ah-ai-input-wrap input:focus {
  box-shadow: none;
  outline: none;
}

/* Dashboard */
.ah-pet-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--ah-white);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  padding: 1.1rem;
}

.ah-pet-icon {
  font-size: 2.25rem;
}

.ah-pet-name {
  font-weight: 700;
  color: var(--ah-primary-dark);
}

.ah-pet-status {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 999px;
  margin: .2rem 0;
}

.ah-pet-status-ok {
  background-color: rgba(44, 79, 108, 0.1);
  color: var(--ah-primary);
}

.ah-pet-due {
  font-size: .8rem;
  color: var(--ah-accent-dark);
  font-weight: 600;
}

/* Footer */
.ah-footer {
  background-color: var(--ah-charcoal);
  color: rgba(255, 255, 255, 0.75);
  padding: 3rem 0 2rem;
  margin-top: 2rem;
}

.ah-footer-brand {
  color: var(--ah-white);
  margin-bottom: .75rem;
}

.ah-footer-text {
  color: rgba(255, 255, 255, 0.65);
  max-width: 22rem;
}

.ah-footer-heading {
  color: var(--ah-white);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.ah-footer-links li {
  margin-bottom: .6rem;
}

.ah-footer-links a {
  color: rgba(255, 255, 255, 0.75);
}

.ah-footer-links a:hover {
  color: var(--ah-white);
}

.ah-footer-divider {
  border-color: rgba(255, 255, 255, 0.15);
  margin: 2rem 0 1.5rem;
}

.ah-footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  font-size: .85rem;
  margin: 0;
}

/* Scroll reveal */
.ah-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.ah-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .ah-hero {
    padding: 2.5rem 0 2rem;
  }
}

/* Auth modal */
.ah-auth-modal-content {
  border: none;
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  padding: .5rem;
}

/* My Articles (member-owned Knowledge & Articles CRUD) */
.ah-row-actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
}

.ah-row-link {
  background: none;
  border: none;
  padding: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ah-primary);
  cursor: pointer;
}

.ah-row-link:hover {
  text-decoration: underline;
}

.ah-row-link-danger {
  color: var(--ah-brick);
}

.ah-row-link:disabled {
  color: var(--ah-charcoal-soft);
  cursor: not-allowed;
  text-decoration: none;
}

.ah-status-badge {
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 999px;
}

.ah-status-badge-published {
  color: #1E7A4F;
  background-color: rgba(30, 122, 79, 0.12);
}

.ah-status-badge-draft {
  color: var(--ah-taupe);
  background-color: rgba(122, 106, 99, 0.14);
}

.ah-status-badge-disabled {
  color: var(--ah-brick);
  background-color: rgba(140, 58, 53, 0.12);
}

.ah-form-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.ah-form-full {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .ah-form-page-grid {
    grid-template-columns: 1fr;
  }
}

.ah-field-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ah-charcoal);
  margin-bottom: .35rem;
}

.ah-field-hint {
  font-size: .76rem;
  color: var(--ah-charcoal-soft);
  margin: .35rem 0 0;
}

.ah-cover-preview {
  display: block;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: var(--ah-radius);
  margin-top: .6rem;
}

.ah-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  background-color: var(--ah-cream-soft);
  border: 1px solid rgba(42, 42, 40, 0.1);
  border-bottom: none;
  border-radius: var(--ah-radius) var(--ah-radius) 0 0;
  padding: .5rem;
}

.ah-editor-btn {
  background-color: var(--ah-white);
  border: 1px solid rgba(42, 42, 40, 0.12);
  border-radius: .4rem;
  font-size: .8rem;
  padding: .25rem .55rem;
  cursor: pointer;
}

.ah-editor-btn:hover {
  background-color: var(--ah-cream);
}

.ah-editor-sep {
  width: 1px;
  background-color: rgba(42, 42, 40, 0.12);
  margin: .15rem .2rem;
}

.ah-editor-body {
  min-height: 220px;
  border: 1px solid rgba(42, 42, 40, 0.1);
  border-radius: 0 0 var(--ah-radius) var(--ah-radius);
  padding: .8rem 1rem;
  font-size: .92rem;
  line-height: 1.6;
}

.ah-editor-body:focus {
  outline: none;
  border-color: var(--ah-primary);
}

.ah-editor-body img {
  max-width: 100%;
  border-radius: .5rem;
}

/* ============================================================
   ANIMATION SYSTEM
   ============================================================ */

/* --- Keyframes --- */
@keyframes ah-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ah-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ah-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ah-scale-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ah-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes ah-pulse-shadow {
  0%, 100% { box-shadow: 0 6px 16px rgba(44,79,108,.18); }
  50%       { box-shadow: 0 12px 28px rgba(44,79,108,.32); }
}
@keyframes ah-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes ah-spin-once {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Scroll reveal (enhanced stagger) --- */
.ah-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.ah-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger siblings inside a grid/row */
.ah-reveal:nth-child(2) { transition-delay: .07s; }
.ah-reveal:nth-child(3) { transition-delay: .14s; }
.ah-reveal:nth-child(4) { transition-delay: .21s; }
.ah-reveal:nth-child(5) { transition-delay: .28s; }
.ah-reveal:nth-child(6) { transition-delay: .35s; }

/* --- Navbar --- */
.ah-navbar {
  transition: box-shadow .25s ease, background-color .25s ease;
}
.ah-navbar.scrolled {
  box-shadow: 0 2px 16px rgba(44,79,108,.13);
  background-color: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
}
.ah-header-link {
  position: relative;
  transition: color .2s ease;
}
.ah-header-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ah-primary);
  border-radius: 2px;
  transition: width .25s cubic-bezier(.22,1,.36,1);
}
.ah-header-link:hover::after,
.ah-header-link.active::after { width: 100%; }

/* --- Hero --- */
.ah-hero .ah-eyebrow   { animation: ah-slide-right .5s cubic-bezier(.22,1,.36,1) both; }
.ah-hero .ah-h1        { animation: ah-fade-up .6s .1s cubic-bezier(.22,1,.36,1) both; }
.ah-hero .ah-lead      { animation: ah-fade-up .6s .18s cubic-bezier(.22,1,.36,1) both; }
.ah-hero .d-flex.gap-3 { animation: ah-fade-up .6s .26s cubic-bezier(.22,1,.36,1) both; }
.ah-hero .ah-hero-image-col { animation: ah-scale-in .7s .1s cubic-bezier(.22,1,.36,1) both; }

/* --- Buttons --- */
.ah-btn-primary {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background-color .2s ease;
}
.ah-btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 28px rgba(44,79,108,.32);
}
.ah-btn-primary:active { transform: translateY(-1px) scale(1); }

.ah-btn-outline {
  transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .15s ease, color .15s ease, box-shadow .2s ease;
}
.ah-btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(44,79,108,.1);
}
.ah-btn-outline:active { transform: translateY(0); }

.ah-btn-shopee {
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.ah-btn-shopee:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(250,79,47,.28);
}

/* --- Quick-action cards --- */
.ah-quick-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.ah-quick-card:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 28px rgba(44,79,108,.16);
}
.ah-quick-icon {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ah-quick-card:hover .ah-quick-icon { transform: scale(1.18) rotate(-6deg); }

/* --- Product cards --- */
.ah-product-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.ah-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(44,79,108,.14);
}
.ah-product-photo {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.ah-product-card:hover .ah-product-photo { transform: scale(1.06); }

/* --- Lost & Found cards --- */
.ah-lf-card {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.ah-lf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(44,79,108,.13);
}

/* --- List cards --- */
.ah-list-card {
  transition: box-shadow .2s ease;
}

/* --- List items (knowledge, community sidebar links) --- */
.ah-list-item {
  transition: background-color .15s ease, padding-left .2s ease;
}
.ah-list-item:hover { padding-left: .35rem; }

/* --- Pagination buttons --- */
.ah-pagination-btn {
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.ah-pagination-btn:not(:disabled):hover { transform: scale(1.12); }
.ah-pagination-btn:not(:disabled):active { transform: scale(.96); }

/* --- Section headings (ah-h2) on scroll --- */
.ah-h2 {
  transition: color .3s ease;
}

/* --- Footer links --- */
.ah-footer-links a {
  transition: color .2s ease, letter-spacing .2s ease;
}
.ah-footer-links a:hover { letter-spacing: .02em; }

/* --- Modal --- */
.modal.fade .modal-dialog {
  transform: translateY(16px) scale(.97);
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}

/* --- Skeleton shimmer (for loading states) --- */
.ah-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: ah-shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* --- Spinner button feedback --- */
.ah-btn-primary.loading,
.ah-btn-outline.loading {
  pointer-events: none;
  opacity: .7;
}

/* --- Page-load fade for sections --- */
.ah-section {
  animation: ah-fade-in .5s ease both;
}

/* --- Alt-bg sections slide in from slight offset --- */
.ah-alt-bg {
  animation: ah-fade-up .6s .08s cubic-bezier(.22,1,.36,1) both;
}

/* --- Reduce motion (accessibility) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}