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

.daia-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.daia-logo-link img {
  display: block;
}

/* Keep the brand and navigation frame identical on legacy pages that still
   carry their own header CSS. */
body .site-navbar {
  width: min(96%, 1600px) !important;
  margin: 12px auto 0 !important;
  border-radius: 18px !important;
}

body .site-navbar__inner {
  gap: 0.6rem !important;
  padding: 8px 16px !important;
  flex-wrap: nowrap !important;
}

body .navbar-brand img,
body .site-brand img,
body .auction-brand img {
  width: auto !important;
  height: 52px !important;
}

@media (max-width: 768px) {
  body .site-navbar__inner {
    flex-direction: column;
    flex-wrap: wrap !important;
    text-align: center;
  }
}

.daia-ui-switcher {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 12000;
  width: min(260px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
  color: #0f172a;
  font-family: "Poppins", "Inter", Arial, sans-serif;
}

.daia-ui-switcher__controls {
  display: grid;
  gap: 12px;
}

.daia-ui-switcher__title {
  margin-bottom: 10px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.daia-ui-switcher__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.daia-ui-switcher__button,
.daia-ui-switcher__select {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.daia-ui-switcher__button:hover,
.daia-ui-switcher__select:hover {
  transform: translateY(-1px);
}

.daia-ui-switcher__button.is-active {
  background: linear-gradient(135deg, #2563eb, #0f766e);
  border-color: transparent;
  color: #ffffff;
}

.daia-ui-switcher__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}

.daia-ui-switcher__select {
  padding: 0 12px;
}

.daia-ui-switcher.daia-ui-switcher--inline {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  width: auto !important;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  color: inherit;
}

.daia-ui-switcher--inline .daia-ui-switcher__title {
  display: none;
}

.daia-ui-switcher--inline .daia-ui-switcher__controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.daia-ui-switcher--inline .daia-ui-switcher__row {
  width: 126px;
  margin: 0;
  flex-shrink: 0;
}

.daia-ui-switcher--inline .daia-ui-switcher__field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.daia-ui-switcher--inline .daia-ui-switcher__label {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.daia-ui-switcher--inline .daia-ui-switcher__button,
.daia-ui-switcher--inline .daia-ui-switcher__select {
  min-height: 34px;
  font-size: 0.84rem;
  border-radius: 10px;
}

.daia-ui-switcher--inline .daia-ui-switcher__select {
  min-width: 132px;
}

:root {
  --daia-font-body: 18px;
  --daia-font-ui: 1.12rem;
  --daia-font-helper: 1rem;
  --daia-line-body: 1.6;
  --daia-line-tight: 1.4;
}

body {
  font-size: var(--daia-font-body) !important;
  line-height: var(--daia-line-body) !important;
  font-family: "Poppins", "Segoe UI", Arial, sans-serif !important;
}

/* ============================================================
   Unified, 40+ friendly type scale — shared by every Client page
   so font size & family stay consistent across Home, Bidding,
   Result, My Account, Top Up, User Guide, etc.
   ============================================================ */
.daia-typescale-anchor,
body h1, body .h1 { font-size: 30px !important; line-height: 1.25 !important; }
body h2, body .h2 { font-size: 25px !important; line-height: 1.3 !important; }
body h3, body .h3 { font-size: 21px !important; line-height: 1.35 !important; }
body h4, body .h4 { font-size: 19px !important; line-height: 1.4 !important; }
body h5, body h6, body .h5 { font-size: 18px !important; }

/* Content text */
body p,
body label,
body li,
body dt,
body dd,
body a {
  font-size: 18px !important;
  line-height: 1.55 !important;
}

/* Form controls + buttons — a touch smaller so dense forms stay tidy */
body .btn,
body button,
body .form-control,
body .form-select,
body select,
body textarea,
body input[type="text"],
body input[type="password"],
body input[type="number"],
body input[type="email"],
body input[type="search"],
body input[type="tel"],
body input[type="date"] {
  font-size: 17px !important;
  line-height: 1.5 !important;
}

/* Data tables — compact so table-based pages (e.g. Result) match the
   card-based pages instead of rendering oversized. */
body td,
body th {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

/* Keep genuinely-secondary text smaller so the hierarchy still reads */
body small,
body .small,
body sub,
body sup,
body .badge,
body .label,
body .listing-source-badge,
body .status-chip,
body .page-subtitle,
body .page-header-note,
body .helper-text,
body .daia-ui-switcher__label {
  font-size: 16px !important;
}

.navbar .navbar-nav > li > a,
.navbar .nav > li > a,
.navbar .nav-link,
.site-nav-link,
.navbar .navbar-text,
#lblLoginText,
#liWalletBalance a,
.token-chip,
.auction-navbar__note,
.auction-navbar__user,
.page-subtitle,
.hero-step,
.bulk-copy p,
.bulk-guide ul,
.auction-panel-note,
.search-container label,
.filter-section label,
.wallet-details,
.card-text,
.list-group-item,
.table,
.table td,
.table th,
.table-elevated,
.table-elevated td,
.table-elevated th,
.shoping-cart-table,
.shoping-cart-table td,
.shoping-cart-table td.desc dl,
.shoping-cart-table td.desc .product-details,
.ibox-content p,
.ibox-content span,
.page-header-note,
.redirect,
.message-stack,
#lblSuccessMessage,
#lblErrorMessage,
.panel-title,
.panel-title a,
.form-control,
.form-select,
.btn:not(.btn-place-bid),
.btn-sm,
.btn-toolbar,
.btn-row-action,
.btn-back,
.auction-navbar__back,
.btn-primary-gradient,
.btn-outline-light,
.btn-subtle,
.btn-gradient,
.card-header button {
  font-size: var(--daia-font-ui) !important;
  line-height: var(--daia-line-body) !important;
}

.table thead th,
.table-elevated thead th,
.hero-kicker,
.section-eyebrow,
.hero-checklist-title,
.auction-navbar__eyebrow,
.auction-tag,
.auction-date-badge,
.status-chip,
.method-chip,
.identity-pill,
.lot-badge,
.money-pill,
.deposit-pill,
.listing-source-badge,
.pager-style a,
.pager-style span,
.daia-ui-switcher__title,
.daia-ui-switcher__label {
  font-size: var(--daia-font-helper) !important;
  line-height: var(--daia-line-tight) !important;
}

.daia-ui-switcher__button,
.daia-ui-switcher__select,
.daia-ui-switcher--inline .daia-ui-switcher__button,
.daia-ui-switcher--inline .daia-ui-switcher__select {
  font-size: 0.95rem !important;
  line-height: var(--daia-line-tight) !important;
}

@media (max-width: 768px) {
  .daia-ui-switcher {
    top: auto;
    right: 12px;
    bottom: 12px;
    width: min(240px, calc(100vw - 24px));
  }

  .daia-ui-switcher.daia-ui-switcher--inline {
    width: 100% !important;
  }

  .daia-ui-switcher--inline .daia-ui-switcher__controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .daia-ui-switcher--inline .daia-ui-switcher__row,
  .daia-ui-switcher--inline .daia-ui-switcher__field,
  .daia-ui-switcher--inline .daia-ui-switcher__select {
    width: 100%;
  }

  .daia-ui-switcher--inline .daia-ui-switcher__field {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  body {
    font-size: 16px !important;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: linear-gradient(180deg, #0f172a 0%, #111827 48%, #0b1220 100%) !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .page-shell,
html[data-theme="dark"] .content-wrapper,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .wrapper-content {
  color: #e5e7eb !important;
}

html[data-theme="dark"] .navbar,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .page-header-hero,
html[data-theme="dark"] .search-container,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .wallet-card,
html[data-theme="dark"] .ibox,
html[data-theme="dark"] .ibox-title,
html[data-theme="dark"] .ibox-content,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .panel-heading,
html[data-theme="dark"] .panel-body,
html[data-theme="dark"] .bulk-section,
html[data-theme="dark"] .bulk-guide,
html[data-theme="dark"] .hero-checklist,
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .well,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .wallet,
html[data-theme="dark"] .left-wallet,
html[data-theme="dark"] .right-trans,
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .filter-section,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .account-container,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .info-container,
html[data-theme="dark"] .wishlist-card,
html[data-theme="dark"] .tab-content,
html[data-theme="dark"] .container {
  background: #111827 !important;
  color: #e5e7eb !important;
  border-color: rgba(71, 85, 105, 0.65) !important;
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.36) !important;
}

html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-container thead th,
html[data-theme="dark"] .pager-style span.aspNetDisabled,
html[data-theme="dark"] .pager-style .active span {
  background: #1e293b !important;
  color: #f8fafc !important;
  border-color: rgba(71, 85, 105, 0.65) !important;
}

html[data-theme="dark"] .table tbody tr:hover,
html[data-theme="dark"] .table tbody tr:hover td,
html[data-theme="dark"] .table-elevated tbody tr:hover,
html[data-theme="dark"] .table-elevated tbody tr:hover td {
  background: rgba(30, 41, 59, 0.92) !important;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table a,
html[data-theme="dark"] .product-details,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] span,
html[data-theme="dark"] li,
html[data-theme="dark"] div,
html[data-theme="dark"] strong,
html[data-theme="dark"] small,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: inherit !important;
}

html[data-theme="dark"] a {
  color: #93c5fd !important;
}

html[data-theme="dark"] .page-subtitle,
html[data-theme="dark"] .auction-panel-note,
html[data-theme="dark"] .bulk-copy p,
html[data-theme="dark"] .bulk-guide ul,
html[data-theme="dark"] .wallet-details,
html[data-theme="dark"] .uploaded-file-list,
html[data-theme="dark"] .redirect,
html[data-theme="dark"] .marquee-content,
html[data-theme="dark"] .trans-type-date,
html[data-theme="dark"] .search-container label,
html[data-theme="dark"] .daia-ui-switcher__label {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .token-chip,
html[data-theme="dark"] .method-chip,
html[data-theme="dark"] .identity-pill,
html[data-theme="dark"] .lot-badge,
html[data-theme="dark"] .money-pill,
html[data-theme="dark"] .deposit-pill,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .label,
html[data-theme="dark"] .badge {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(71, 85, 105, 0.72) !important;
}

html[data-theme="dark"] .btn-white,
html[data-theme="dark"] .btn-subtle,
html[data-theme="dark"] .btn-outline-light,
html[data-theme="dark"] .btn-default,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .pager-style a,
html[data-theme="dark"] .pager-style span {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: rgba(71, 85, 105, 0.72) !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary-gradient,
html[data-theme="dark"] .btn-gradient,
html[data-theme="dark"] .btn-back {
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-danger:hover {
  color: #ffffff !important;
}

html[data-theme="dark"] .notification-count {
  color: #ffffff !important;
}

html[data-theme="dark"] .daia-ui-switcher {
  background: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
  border-color: rgba(71, 85, 105, 0.7);
}

html[data-theme="dark"] .daia-ui-switcher__button,
html[data-theme="dark"] .daia-ui-switcher__select {
  background: #0f172a;
  color: #f8fafc;
  border-color: rgba(71, 85, 105, 0.72);
}

html[data-theme="dark"] .daia-ui-switcher__button.is-active {
  background: linear-gradient(135deg, #2563eb, #0f766e);
  color: #ffffff;
}

html[data-theme="dark"] .daia-ui-switcher.daia-ui-switcher--inline {
  background: transparent;
  border: none;
}

/* ============================================================
   Floating "back to top" button (all pages)
   ============================================================ */
.daia-scroll-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 13000;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #5866e9 0%, #4a5fd8 100%);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(31, 42, 68, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.daia-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.daia-scroll-top:hover {
  filter: brightness(1.06);
}

/* ============================================================
   Mobile layer — restructure only on small screens / landscape
   phones. Desktop/web UI is untouched (all inside max-width media
   queries).
   ============================================================ */
@media (max-width: 991px) {
  /* Navbars shouldn't hog the screen on mobile: let them scroll away
     (static, not sticky) and wrap their items neatly. */
  .site-navbar,
  .auction-navbar {
    position: static !important;
    width: auto !important;
    margin: 8px !important;
    border-radius: 16px !important;
  }

  .navbar {
    position: static !important;
  }

  .site-navbar__inner,
  .auction-navbar__inner {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
  }

  .site-nav-links,
  .site-nav-actions {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

@media (max-width: 768px) {
  /* Slightly smaller, tidy type so content fits small screens */
  body { font-size: 16px !important; line-height: 1.5 !important; }
  body h1, body .h1 { font-size: 23px !important; }
  body h2, body .h2 { font-size: 20px !important; }
  body h3, body .h3 { font-size: 18px !important; }
  body h4, body .h4 { font-size: 17px !important; }
  body p, body label, body li, body a, body dd, body dt { font-size: 16px !important; }
  body td, body th { font-size: 14px !important; }
  body .btn, body button,
  body .form-control, body .form-select, body select, body textarea,
  body input[type="text"], body input[type="password"], body input[type="number"],
  body input[type="email"], body input[type="search"], body input[type="tel"],
  body input[type="date"] { font-size: 16px !important; }

  /* Compact logos + nav links */
  #logo-image,
  .site-brand img,
  .auction-brand img { height: 46px !important; }

  .site-navbar .site-nav-link {
    font-size: 14px !important;
    padding: 6px 9px !important;
    min-height: 34px !important;
  }

  /* Hide non-essential chrome on mobile to keep it light & neat */
  .shell-brand__meta,
  .shell-brand__kicker,
  .auction-navbar__note,
  .auction-navbar__eyebrow,
  .page-header-note,
  .search-support-copy,
  .search-support-note,
  #homeSearchSupportCopy,
  #homeSearchSupportNote { display: none !important; }

  /* Stack card layouts full-width */
  .list-item-layout { flex-direction: column !important; }

  /* Tables scroll horizontally instead of breaking the layout */
  .table-container,
  .table-wrap,
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Back-to-top button a touch smaller / closer to the corner */
  .daia-scroll-top {
    width: 44px;
    height: 44px;
    right: 12px;
    bottom: 12px;
    font-size: 22px;
  }

  /* Auction cards: lighter & shorter on mobile so there's less scrolling.
     Keep the important rows (Lot No, Car Plate, Auction Date/Time, Selling
     Price) and hide the secondary ones (Specification, Year Make/Registration,
     Seller Name). The full detail is still available on the item's detail view. */
  .car-image,
  .list-item-media img {
    max-height: 190px !important;
    object-fit: cover;
  }

  .vehicle-meta-grid {
    padding: 8px 10px !important;
  }

  .vehicle-meta-row.list-item-text {
    padding: 5px 9px !important;
    margin: 2px 0 !important;
  }

  .vehicle-meta-grid .vehicle-meta-row:nth-child(4),
  .vehicle-meta-grid .vehicle-meta-row:nth-child(5),
  .vehicle-meta-grid .vehicle-meta-row:nth-child(6) {
    display: none !important;
  }
}