/************************************************
BASE
************************************************/
html,
body {
  background: var(--vaf-bg);
  color: var(--vaf-text-body);
  font-family: var(--vaf-font-body);
}

body,
input,
select,
textarea,
button {
  font-family: var(--vaf-font-body);
}

h1,
h2,
h3,
h4,
.panel-title,
.navbar-brand {
  font-family: var(--vaf-font-display);
  color: var(--vaf-navy);
}

a {
  color: var(--vaf-navy-mid);
  transition: color var(--vaf-transition);
}

  a:hover,
  a:focus {
    color: var(--vaf-amber-dark);
    text-decoration: none;
  }

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

.panel {
  border-radius: var(--vaf-radius);
}

/************************************************
SHARED SECTION UI
************************************************/
.vaf-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  gap: var(--vaf-section-header-gap);
  margin-bottom: 14px;
}

  .vaf-section-header:before,
  .vaf-section-header:after {
    display: none;
    content: none;
  }

  .vaf-section-header .pull-left,
  .vaf-section-header .pull-right {
    float: none !important;
  }

.vaf-section-title {
  margin: 0;
  margin-right: auto;
  font-family: var(--vaf-font-display);
  font-size: var(--vaf-section-title-size);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vaf-navy);
}

  .vaf-section-title span {
    color: var(--vaf-amber);
  }

.vaf-section-header .btn {
  margin-left: auto;
  align-items: center;
}

  .vaf-section-header .btn i {
    line-height: 1;
    transform: translateY(1px);
  }

/************************************************
SHARED CARDS
************************************************/
.vaf-event-card,
.vaf-lot-card,
.event-hp,
.vaf-lot-row-card {
  --card-border: 0;
  --card-hover-lift: -2px;
  position: relative;
  overflow: hidden;
  border: var(--card-border);
  border-radius: var(--vaf-radius);
  background: var(--vaf-white);
  box-shadow: var(--vaf-shadow-card);
  transition: transform var(--vaf-transition), box-shadow var(--vaf-transition);
}

  .vaf-event-card:hover,
  .vaf-lot-card:hover,
  .event-hp:hover {
    transform: translateY(var(--card-hover-lift));
    box-shadow: var(--vaf-shadow-hover);
  }

.vaf-lot-card-highlight {
  border: 2px solid var(--vaf-amber);
}

.vaf-stretched-link-wrapper a {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.vaf-lot-card .context-wrapper,
.vaf-lot-card .listing-badge {
  position: relative;
  z-index: 3;
}

.vaf-lot-card .vaf-lot-number {
  z-index: 3;
}

.vaf-event-card-image,
.vaf-lot-card-image {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fallback aspect-ratio when no admin .Aspect11/.Aspect43/.Aspect34
     class is present. Those rules are (0,2,0) specificity and override
     this when supplied. */
  aspect-ratio: 4 / 3;
  background: var(--vaf-gray-200);
}

  .vaf-event-card-image > a,
  .vaf-lot-card-image > a {
    position: absolute;
    inset: 0;
    display: block;
  }

  .vaf-event-card-image img,
  .vaf-lot-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    /* Default = "contain": show the whole image inside the box without
       cropping. When the admin enables CropGalleryImage, AWE adds
       .galleryImage__cropped to this container and the cover rule
       below kicks in. */
    object-fit: contain;
    transition: transform var(--vaf-transition-slow);
  }

  .vaf-event-card-image.galleryImage__cropped img,
  .vaf-lot-card-image.galleryImage__cropped img {
    object-fit: cover;
  }

.vaf-event-card:hover .vaf-event-card-image img,
.vaf-lot-card:hover .vaf-lot-card-image img {
  transform: scale(1.04);
}

.vaf-event-card .panel-body,
.vaf-lot-card .panel-body {
  position: relative;
  padding: var(--vaf-card-padding-y) var(--vaf-card-padding-x);
}

.vaf-lot-card-image .no-photo,
.vaf-lot-card-image .NoPhoto,
.vaf-lot-card-image .awe-no-photo {
  height: 100%;
}

.vaf-lot-number {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  background: var(--vaf-lot-number-bg);
}

/* Shared card title — variants set their own margin-bottom */
.vaf-event-card-title,
.vaf-lot-card-title {
  margin: 0;
  font-family: var(--vaf-font-body);
  font-size: var(--vaf-card-title-size);
  line-height: 1.4;
  font-weight: 600;
  color: var(--vaf-gray-800);
}

.vaf-event-card-title a,
.vaf-event-card-title a:hover,
.vaf-event-card-title a:focus,
.vaf-lot-card-title a,
.vaf-lot-card-title a:hover,
.vaf-lot-card-title a:focus {
  color: inherit;
  text-decoration: none;
}

/************************************************
EVENT CARDS
************************************************/
.vaf-event-card-image > a {
  color: var(--vaf-white);
}

.vaf-event-card-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--vaf-gray-200);
  color: var(--vaf-gray-400);
  font-weight: 700;
  text-transform: uppercase;
}

.vaf-event-card-date {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: var(--vaf-event-date-overlay);
  text-align: center;
  text-transform: uppercase;
}

  .vaf-event-card-date strong {
    font-family: var(--vaf-font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
  }

  .vaf-event-card-date small {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .75);
  }

.vaf-event-card .panel-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.vaf-event-card-title {
  margin-bottom: 4px;
}

.vaf-event-card-count {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  color: var(--vaf-gray-400);
}

.vaf-event-card-button {
  margin-top: auto;
}

/************************************************
LOT CARDS
************************************************/
.vaf-lot-card-title {
  margin-bottom: 10px;
}

.vaf-lot-card-bid-label {
  display: block;
  margin-bottom: 1px;
  font-size: 10px;
  color: var(--vaf-gray-400);
}

.vaf-lot-card-meta,
.vaf-lot-card-bids {
  font-size: 11px;
  color: var(--vaf-gray-600);
}

.vaf-lot-card-meta {
  margin-bottom: 4px;
}

.vaf-lot-card-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.vaf-lot-card-label {
  display: block;
  font-size: 11px;
  color: var(--vaf-gray-400);
}

.vaf-lot-card-link,
.vaf-lot-card-link:hover,
.vaf-lot-card-link:focus {
  display: block;
  color: inherit;
  text-decoration: none;
}

.vaf-lot-card-price {
  display: block;
  font-family: var(--vaf-font-display) !important;
  font-size: var(--vaf-price-size);
  line-height: 1;
  font-weight: 700;
  color: var(--vaf-navy);
}

.vaf-lot-card-time {
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
  color: var(--vaf-gray-600);
  padding-right: 0;
}

.galleryQTY {
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
  color: var(--vaf-gray-600);
  padding-right: 0;
  font-weight: bold;
}

  .vaf-lot-card-bids {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--vaf-gray-200);
  }

.galleryTitle {
  border: none;
  height: unset;
}

.galleryData--title, .galleryData--values, .gallery-quickbid {
  margin: 0;
  height: unset;
}

.vaf-lot-card .context-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--vaf-card-padding-y) var(--vaf-card-padding-x);
  gap: var(--vaf-card-padding-x);
  pointer-events: none;
}

.vaf-lot-card .context-wrapper > * {
  pointer-events: auto;
  margin: 0;
}

.galleryUnit .vaf-lot-card .context-wrapper > button {
  margin: 0;
}

.galleryUnit .no-photo {
  width: 100%;
}

.galleryUnit .context-wrapper button,
.vaf-lot-card .context-wrapper button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: .5rem;
  border: 1px solid var(--vaf-gray-300);
  border-radius: var(--vaf-radius-sm);
  background: var(--vaf-white);
  color: var(--vaf-navy);
  cursor: pointer;
  transition: background var(--vaf-transition), border-color var(--vaf-transition);
}

  .galleryUnit .context-wrapper button:hover,
  .galleryUnit .context-wrapper button:focus-visible,
  .vaf-lot-card .context-wrapper button:hover,
  .vaf-lot-card .context-wrapper button:focus-visible {
    background: var(--vaf-gray-100);
    border-color: var(--vaf-navy);
  }

.galleryUnit .context-wrapper button {
  margin: var(--vaf-card-padding-y) var(--vaf-card-padding-x);
}

/* Visual styling applies to ALL .label children, regardless of .awe-hidden.
   The display value is what we toggle below. AWE's SSR markup omits
   .awe-hidden on the initially-shown badge, but SignalR-revealed badges
   keep the class and rely on an inline `style="display: inline"` from
   jQuery .show() to become visible — without this split, the revealed
   badge would skip our pill styling and render as a default Bootstrap
   inline label (small, pill-less). */
.vaf-lot-card .context-wrapper .label,
.vaf-lot-row-badges .label {
  align-items: center;
  min-width: 0;
  border: 0;
  border-radius: var(--vaf-radius-sm);
  color: var(--vaf-white);
  font-family: var(--vaf-font-body);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vaf-lot-card .context-wrapper .label {
  height: 32px;
  padding: 0 .65rem;
  font-size: 11px;
  box-shadow: 0 2px 8px rgba(15, 31, 61, .18);
}

.vaf-lot-row-badges .label {
  height: 22px;
  padding: 0 .55rem;
  font-size: 10px;
}

/* Paid / Shipped status badge — opt-in via .vaf-status-badge, used on
   the invoice + statement views where these replaced the old stamp
   images and the default .label size reads too small. */
.label.vaf-status-badge {
  display: inline-block;
  padding: .5em .85em;
  border-radius: var(--vaf-radius-sm);
  font-size: 90%;
  letter-spacing: .02em;
}

/************************************************
LISTING BADGE (SALG / SALE)
Re-skin AWE's parallelogram-with-border-trick into a clean amber pill
that sits flush in the card's top-left corner. AWE keeps the text
content on `.listing-badge:before { content: '...' }` (set inline in
_Layout.cshtml from the Listing_Badge_Text resource), so we keep that
pseudo-element but override every visual property.
************************************************/
.vaf-lot-card .listing-badge,
.vaf-lot-row-card .listing-badge,
.galleryUnit .listing-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  pointer-events: none;
}

  .vaf-lot-card .listing-badge:before,
  .vaf-lot-row-card .listing-badge:before,
  .galleryUnit .listing-badge:before {
    position: static;
    display: inline-flex;
    align-items: center;
    height: auto;
    line-height: 1;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--vaf-radius-sm);
    background: var(--vaf-amber);
    color: var(--vaf-white);
    font-family: var(--vaf-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: none;
  }

  /* Hide the AWE decorative triangle "tail" — it doesn't make sense on
     a pill shape. */
  .vaf-lot-card .listing-badge:after,
  .vaf-lot-row-card .listing-badge:after,
  .galleryUnit .listing-badge:after {
    display: none;
    content: none;
  }

/* Display: inline-flex for the visible (non-hidden) badge. */
.vaf-lot-card .context-wrapper .label:not(.awe-hidden),
.vaf-lot-row-badges .label:not(.awe-hidden) {
  display: inline-flex;
}

/* SignalR uses jQuery `.show()` to reveal an `.awe-hidden` placeholder
   badge — it adds an inline `style="display: inline"` that beats the
   class's `display: none`. That inline-display would then beat our
   inline-flex (class specificity = same, inline always wins), so the
   revealed badge would render as a default inline label without the
   pill layout. Use !important here to force flex back on those
   specifically-revealed instances. */
.vaf-lot-card .context-wrapper .label.awe-hidden[style*="display: inline"],
.vaf-lot-row-badges .label.awe-hidden[style*="display: inline"] {
  display: inline-flex !important;
}

/* Disposition fills shared across both contexts. */
.vaf-lot-card .context-wrapper .label-success,
.vaf-lot-row-badges .label-success { background: var(--vaf-green); }

.vaf-lot-card .context-wrapper .label-danger,
.vaf-lot-row-badges .label-danger  { background: var(--vaf-red);   }

.vaf-lot-card .context-wrapper .label-warning,
.vaf-lot-row-badges .label-warning { background: var(--vaf-amber); }

.vaf-lot-card .context-wrapper .label-primary,
.vaf-lot-card .context-wrapper .label-default,
.vaf-lot-row-badges .label-primary,
.vaf-lot-row-badges .label-default { background: var(--vaf-navy); }

.vaf-lot-card .context-wrapper .label:empty,
.vaf-lot-row-badges .label:empty {
  display: none;
}

.icon__context--notWatching,
.icon__context--isWatching {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none !important;
  color: var(--vaf-navy);
  font-size: 16px;
  line-height: 1;
}

  .icon__context--notWatching::before,
  .icon__context--isWatching::before {
    font-family: "Font Awesome 5";
    content: "\f005";
    line-height: 1;
  }

  .icon__context--notWatching::before {
    font-weight: 300;
  }

  .icon__context--isWatching::before {
    font-weight: 900;
  }

/************************************************
LISTING DETAIL — TITLE + WATCH GROUP
************************************************/
.detail__title {
  display: flex;
  align-items: center;
  gap: 12px;
}

  .detail__title > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

.vaf-detail-watch {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

  .vaf-detail-watch .addOrRemoveWatchlist {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: var(--vaf-btn-padding-y);
    margin: 0;
    border: var(--vaf-btn-border-width, 1px) solid var(--vaf-gray-300);
    border-radius: var(--ps-btn-border-radius);
    background: var(--vaf-white);
    color: var(--vaf-navy);
    line-height: 1;
    cursor: pointer;
    transition: background var(--vaf-transition), border-color var(--vaf-transition);
  }

    .vaf-detail-watch .addOrRemoveWatchlist:hover,
    .vaf-detail-watch .addOrRemoveWatchlist:focus-visible {
      background: var(--vaf-gray-100);
      border-color: var(--vaf-navy);
    }

    .vaf-detail-watch .addOrRemoveWatchlist .icon__context--notWatching,
    .vaf-detail-watch .addOrRemoveWatchlist .icon__context--isWatching {
      width: var(--vaf-btn-line-height);
      height: var(--vaf-btn-line-height);
      font-size: var(--vaf-btn-line-height);
    }

  .vaf-detail-watch .addOrRemoveWatchlist[data-iswatching="True"] + .goToWatchListLink.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    white-space: nowrap;
  }

/************************************************
LOT ROW CARDS
************************************************/
.vaf-lot-row-card {
  --card-border: 1px solid var(--vaf-gray-200);
  padding: 0; /* defeat AWE_Bootstrap3.css `.listing { padding: 5px }` */
}

.myaccount .active-bid.vaf-lot-row-card,
.myaccount .watch-item.vaf-lot-row-card {
  padding: 0;
}

  .vaf-lot-row-card.highlight {
    box-shadow: 0 0 0 2px var(--vaf-amber) inset, var(--vaf-shadow-card);
  }

.vaf-lot-row-main {
  display: flex;
  align-items: stretch;
}

.vaf-lot-row-image {
  position: relative;
  flex: 0 0 200px;
  width: 200px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--vaf-gray-100);
}

  .vaf-lot-row-image img,
  .vaf-lot-row-image .img-responsive {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

.vaf-lot-row-lot-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: var(--vaf-radius-sm);
  background: rgba(15, 31, 61, .85);
  padding: 4px 9px;
  color: var(--vaf-white);
  font-family: var(--vaf-font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.vaf-lot-row-content {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.vaf-lot-row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vaf-lot-row-title {
  margin: 0 0 4px;
  font-family: var(--vaf-font-body);
  font-size: var(--vaf-section-title-size) !important;
  line-height: 1.1;
  font-weight: 700;
  color: var(--vaf-navy);
}

  .vaf-lot-row-title a,
  .vaf-lot-row-subtitle a {
    color: inherit;
    text-decoration: none;
  }

.vaf-lot-row-subtitle {
  display: block;
  margin: 2px 0 14px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--vaf-text-muted);
}

.vaf-lot-row-stats {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: auto;
}

.vaf-lot-row-stat-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--vaf-font-body);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vaf-gray-500);
}

.vaf-lot-row-stat-value {
  display: block;
  font-family: var(--vaf-font-body);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--vaf-navy);
  font-variant-numeric: tabular-nums;
}

  .vaf-lot-row-stat-value.vaf-lot-card-price {
    font-size: 18px;
  }

.vaf-lot-row-time.vaf-lot-row-stat-value {
  font-weight: 500;
  color: var(--vaf-text-body);
}

.vaf-lot-row-watch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  z-index: 4;
}

  .vaf-lot-row-watch .vaf-lot-row-badges {
    justify-content: flex-end;
    align-items: center;
    align-self: center;
    margin: 0;
  }

  .vaf-lot-row-watch button,
  .vaf-lot-row-watch .add-watch,
  .vaf-lot-row-watch [class*="watch"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--vaf-white);
    color: var(--vaf-navy);
    text-decoration: none;
    font-size: 14px;
    transition: background var(--vaf-transition), color var(--vaf-transition), border-color var(--vaf-transition);
  }

    .vaf-lot-row-watch a:hover,
    .vaf-lot-row-watch .add-watch:hover,
    .vaf-lot-row-watch [class*="watch"]:hover {
      color: var(--vaf-amber);
      border-color: var(--vaf-amber);
    }

.vaf-lot-row-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  padding: 18px 20px 18px 0;
  min-width: 180px;
  height: 100%;
}

  .vaf-lot-row-cta .btn {
    justify-content: center;
    min-width: 0;
  }

.vaf-lot-row-quickbid {
  margin: 0;
}

.vaf-lot-row-ended-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--vaf-green);
  font-variant-numeric: tabular-nums;
}

.vaf-lot-row-image .vaf-lot-row-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: var(--vaf-radius-sm);
  background: var(--vaf-white);
  box-shadow: 0 2px 8px rgba(15, 31, 61, .18);
  cursor: pointer;
  transition: background var(--vaf-transition);
}

.vaf-lot-row-image .vaf-lot-row-checkbox:hover {
  background: var(--vaf-gray-100);
}

.vaf-lot-row-image .vaf-lot-row-checkbox input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--vaf-navy);
  cursor: pointer;
}

.watch-item.vaf-lot-row-card .vaf-lot-row-watch > .close {
  position: static;
  top: auto;
  right: auto;
  float: none;
  opacity: 1;
  text-shadow: none;
  border: 0;
  padding: 0;
  font-size: 0;
}

.watch-item.vaf-lot-row-card .vaf-lot-row-watch > .close::before {
  font-family: "Font Awesome 5";
  font-weight: 900;
  content: "\f005";
  font-size: 16px;
  line-height: 1;
}

.vaf-lot-row-seller-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--vaf-text-muted);
  text-align: center;
}

@media (max-width: 767px) {
  .vaf-lot-row-main {
    display: block;
  }

  .vaf-lot-row-image {
    /* Stay 1:1 on mobile too — the row collapses to a vertical stack
       but the square thumbnail looks consistent with the desktop view. */
    width: 100%;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
  }

  .vaf-lot-row-content,
  .vaf-lot-row-cta {
    padding: 14px 16px;
  }

  .vaf-lot-row-cta {
    min-width: 0;
    padding-top: 0;
    position: relative !important;
    bottom: 0 !important;
    right: 0 !important;
  }

  .vaf-lot-row-title {
    padding-top: 0 !important;
  }

  .vaf-lot-row-stats {
    flex-wrap: wrap;
    gap: 14px 24px;
  }
}

/************************************************
EVENT ROW
************************************************/
.vaf-event-grid {
  margin-right: calc(var(--vaf-hero-gap) / -2);
  margin-left: calc(var(--vaf-hero-gap) / -2);
}

  .vaf-event-grid > [class*="col-"] {
    padding: calc(var(--vaf-hero-gap) / 2);
  }

  .vaf-event-grid .vaf-event-hero-side .vaf-event-hero-link {
    height: 250px;
  }

.event-hp {
  --card-border: 1px solid var(--vaf-gray-200);
  --card-hover-lift: -1px;
  margin-bottom: 0;
}

.event-hp.is-ended {
  --card-hover-lift: 0;
}

.event-hp.is-ended .vaf-event-hero-image {
  filter: grayscale(1) brightness(.5);
  transition: transform var(--vaf-transition-slow), filter var(--vaf-transition-slow);
}

.event-hp.is-ended:hover .vaf-event-hero-image {
  filter: grayscale(.85) brightness(.6);
}

.event-hp.is-ended .vaf-event-hero-overlay {
  background: linear-gradient(to top, rgba(20, 22, 28, .96), rgba(20, 22, 28, .65) 55%, rgba(20, 22, 28, .25));
}

.event-hp.is-ended .vaf-event-hero-button {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .9);
}

.event-hp.is-ended .vaf-event-hero-button:hover,
.event-hp.is-ended .vaf-event-hero-button:focus {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .55);
  color: var(--vaf-white);
}

.event-hp.is-paused .vaf-event-hero-image {
  filter: sepia(.55) brightness(.75) saturate(1.1);
}

.event-hp.is-paused .vaf-event-hero-overlay {
  background: linear-gradient(to top, rgba(179, 92, 0, .95), rgba(179, 92, 0, .55) 50%, rgba(179, 92, 0, .15));
}

/************************************************
EVENT FILTER NAV  (Event/Index page: Current / Upcoming / Closed)
************************************************/
ul.eFilter.nav-pills li.filter-option a {
  margin: 0;
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--vaf-radius);
  background: transparent;
  color: var(--vaf-text-body);
  font-weight: var(--vaf-font-body-weight-bold);
}

.nav-pills.eFilter li.filter-option a:hover,
.nav-pills.eFilter li.filter-option a:focus {
  background-color: var(--vaf-gray-200);
  color: var(--vaf-text-body);
}

.nav-pills.eFilter li.filter-option.active a {
  background-color: var(--vaf-navy);
  color: var(--vaf-white);
}

.nav-pills.eFilter li.filter-option.active a:hover,
.nav-pills.eFilter li.filter-option.active a:focus {
  background-color: var(--vaf-navy-mid);
  color: var(--vaf-white);
}

.nav-pills.eFilter li.filter-option a .glyphicon,
.nav-pills.eFilter li.filter-option a .fa {
  margin-right: 6px;
}

.form-group > .btn-group {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--vaf-gray-300);
  border-radius: var(--vaf-radius-sm);
  background: var(--vaf-gray-100);
}

.form-group > .btn-group > .btn {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--vaf-btn-padding-y-sm) var(--vaf-btn-padding-x-sm);
  font-size: var(--vaf-btn-font-size-sm);
}

.form-group > .btn-group > .btn-default {
  --bs-btn-color: var(--vaf-text-muted);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--vaf-navy);
  --bs-btn-hover-bg: var(--vaf-white);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--vaf-navy);
  --bs-btn-active-bg: var(--vaf-white);
  --bs-btn-active-border-color: transparent;
  border-radius: var(--vaf-radius-sm);
}

.form-group > .btn-group > .btn-primary {
  --bs-btn-bg: var(--vaf-navy);
  --bs-btn-border-color: var(--vaf-navy);
  --bs-btn-hover-bg: var(--vaf-navy-mid);
  --bs-btn-hover-border-color: var(--vaf-navy-mid);
  --bs-btn-active-bg: var(--vaf-navy-mid);
  --bs-btn-active-border-color: var(--vaf-navy-mid);
  border-radius: var(--vaf-radius-sm);
}

/************************************************
CATEGORY PILLS / CATEGORY LINKS
************************************************/
.vaf-cat-pill {
  display: flex !important;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--vaf-gray-200);
  border-radius: var(--vaf-radius);
  background: var(--vaf-white);
  color: var(--vaf-gray-600);
  padding: .75rem 1rem;
  font-family: var(--vaf-font-body);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--vaf-transition), color var(--vaf-transition), border-color var(--vaf-transition), box-shadow var(--vaf-transition), transform var(--vaf-transition);
}

  .vaf-cat-pill:hover,
  .vaf-cat-pill:focus,
  .nav > li.active > .vaf-cat-pill,
  .nav > li.active > a.vaf-cat-pill {
    border-color: var(--vaf-navy) !important;
    background: var(--vaf-navy) !important;
    color: var(--vaf-white) !important;
    box-shadow: var(--vaf-shadow-card);
    text-decoration: none;
  }

.vaf-cat-icon {
  display: block;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
}

.vaf-cat-text {
  display: block;
  min-width: 0;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/************************************************
CAROUSEL NAV BUTTONS
************************************************/
.vaf-carousel-shell {
  position: relative;
}

.vaf-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--vaf-carousel-nav-size);
  height: var(--vaf-carousel-nav-size);
  margin-top: calc(var(--vaf-carousel-nav-size) / -2);
  padding: 0;
  border: 1px solid var(--vaf-gray-200);
  border-radius: 50%;
  background: var(--vaf-white);
  color: var(--vaf-navy);
  box-shadow: var(--vaf-shadow-button);
  outline: none !important;
}

.vaf-carousel-shell.is-scrollable .vaf-carousel-btn {
  display: inline-flex;
}

.vaf-carousel-shell.is-static .vaf-carousel-btn {
  display: none;
}

.vaf-carousel-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin: 0;
  line-height: 1;
}

.vaf-carousel-btn .fa-fw {
  width: 1em;
}

.vaf-carousel-btn .fa-chevron-circle-left {
  transform: translateX(-.5px);
}

.vaf-carousel-btn .fa-chevron-circle-right {
  transform: translateX(.5px);
}

.vaf-carousel-prev {
  left: var(--vaf-carousel-nav-offset);
}

.vaf-carousel-next {
  right: var(--vaf-carousel-nav-offset);
}



.vaf-carousel-btn:hover:not(:disabled) {
  border-color: var(--vaf-navy);
  background: var(--vaf-navy);
  color: var(--vaf-white);
}

.vaf-carousel-btn:focus,
.vaf-carousel-btn:active,
.vaf-carousel-btn.active {
  border-color: var(--vaf-gray-200);
  background: var(--vaf-white);
  color: var(--vaf-navy);
  box-shadow: var(--vaf-shadow-button);
  outline: none !important;
}

.vaf-carousel-btn:disabled {
  cursor: default;
  opacity: .35;
  border-color: var(--vaf-gray-200);
  background: var(--vaf-white);
  color: var(--vaf-navy);
}

/************************************************
EMPTY STATES
************************************************/
.vaf-empty-section,
.vaf-home-empty-section {
  margin-bottom: 0;
  border-color: var(--vaf-amber);
  border-radius: var(--vaf-radius);
  background: var(--vaf-amber-light);
  color: var(--vaf-amber-dark);
}

/************************************************
HEADER
************************************************/
header {
  padding-top: 0;
}

@media (min-width: 768px) {
  header .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Navbar admin */
.navbar-admin {
  background: rgba(0, 0, 0, .6);
  padding-top: 14px;
  padding-bottom: 14px;
}

.header--style2 .navbar {
  margin-bottom: 0;
  border-radius: 0;
}

@media (max-width: 768px) {
  .header--style2 .navbar {
    padding: 0;
  }
}

.ps-navbar-wrapper {
  display: flex;
}

@media (max-width: 768px) {
  .ps-navbar-wrapper {
    flex-direction: column;
  }
}

/* Primary navbar */
@media (min-width: 768px) {
  .header--style2 .navbar.ps-primary-navbar,
  .ps-primary-navbar {
    padding: 10px 0;
    font-size: 14px;
  }
}

/* Logo wrapper */
.ps-navbar-logo-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

@media (max-width: 768px) {
  .ps-navbar-logo-wrapper {
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* Logo / brand */
.header--style2 .navbar-brand {
  padding: 0;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .header--style2 .navbar-brand img {
    max-height: 40px;
  }
}

/* Toggle button */
.header--style2 .navbar-toggle {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto;
}

/* User nav */
@media (max-width: 768px) {
  .ps-user-navbar-wrapper {
    margin: 0 -15px;
    background: var(--vaf-menu-bg);
  }

    .ps-user-navbar-wrapper .navbar-nav {
      margin: 0;
    }

      .ps-user-navbar-wrapper .navbar-nav:first-child {
        border-bottom: 1px solid var(--vaf-gray-300);
      }
}

.ps-user-account-link .nav-link {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.ps-user-account-link .label {
  background-color: var(--vaf-brand-blue);
  font-size: 10px;
}

.user-nav {
  margin-left: 0;
}

@media (min-width: 768px) {
  .user-nav {
    border-left: 1px solid var(--vaf-border-light);
  }
}

.ps-navbar-menu-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* Secondary navbar */
.header--style2 .navbar.ps-secondary-navbar,
.ps-secondary-navbar {
  padding: 0;
}

@media (min-width: 768px) {
  .ps-secondary-navbar .navbar-nav .nav-link {
    font-weight: 500;
  }
}

/************************************************
LISTING DETAIL
************************************************/
.ps_description_section {
  padding-top: 1rem;
}

/* Description tabs */
.ps_description_tabs .nav-tabs {
  border-bottom: 0;
  border-radius: var(--vaf-radius-sm);
  background: var(--vaf-gray-100);
  padding: 5px;
  font-weight: 600;
}

  .ps_description_tabs .nav-tabs > li {
    margin-bottom: 0;
  }

    .ps_description_tabs .nav-tabs > li > a {
      border: none !important;
      border-radius: var(--vaf-radius-sm);
      color: var(--vaf-text-body);
    }

    .ps_description_tabs .nav-tabs > li.active > a,
    .ps_description_tabs .nav-tabs > li.active > a:hover,
    .ps_description_tabs .nav-tabs > li.active > a:focus {
      background-color: var(--vaf-navy);
      color: var(--vaf-white);
    }

.ps_description_tabs .tab-content {
  padding-top: 1rem;
}

/* Custom tab content-header */
.ps-tab-content-header {
  margin-bottom: 1rem;
}

  .ps-tab-content-header > a {
    display: block;
    border-radius: var(--vaf-radius-sm);
    background: var(--vaf-gray-100);
    padding: 10px;
    font-weight: 600;
    color: var(--vaf-text-body);
  }

  .ps-tab-content-header:has(+ .tab-pane.active) a {
    background-color: var(--vaf-navy);
    color: var(--vaf-white);
  }

@media (min-width: 768px) {
  .ps-tab-content-header {
    display: none;
  }
}

.ps_description_tabs .tab-pane {
  margin-bottom: 1rem;
}

/* Specifications */
.detail__cfContainer {
  columns: 1 !important;
}

.detail__cfUnit {
  align-items: center;
}

.detail__cfName,
.detail__cfValue {
  overflow-wrap: break-word;
  background-color: transparent;
}

.detail__cfName  { width: 30%; font-weight: 600; }
.detail__cfValue { width: 70%; }

@media (max-width: 576px) {
  .detail__cfUnit {
    flex-direction: column;
    align-items: flex-start;
  }

  .detail__cfName,
  .detail__cfValue { width: 100%; }
  .detail__cfName  { border-right: none; }
  .detail__cfValue { padding-top: 0; }
}

/* Image gallery */
.detail__imageThumbnails img {
  width: 100%;
  height: 100%;
  border: 1px solid var(--vaf-gray-300);
  aspect-ratio: 1;
  object-fit: contain;
}

@media (max-width: 576px) {
  .detail__imageThumbnails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
  }

    .detail__imageThumbnails > div {
      width: 100%;
    }
}

/************************************************
LISTING DETAIL — ADDITIONAL DATA CARD
************************************************/
.detail__additionalData {
  margin: 1rem 0;
  padding: 0;
  border-radius: var(--vaf-radius);
  background: var(--vaf-white);
  box-shadow: var(--vaf-shadow-card);
  color: var(--vaf-gray-800);
  font-size: .9rem;
  overflow: hidden;
}

  .detail__additionalData > *:not(.detail__section) {
    display: none;
  }

  .detail__additionalData > .detail__section {
    margin: 0;
    padding: 16px 18px;
  }

    .detail__additionalData > .detail__section + .detail__section {
      border-top: 1px solid var(--vaf-gray-200);
    }

  .detail__additionalData .detail__sectionHeading {
    margin: 0 0 .5rem;
    font-family: var(--vaf-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vaf-gray-600);
  }

  .detail__additionalData .detail__sectionBody {
    color: var(--vaf-gray-800);
  }

    .detail__additionalData .detail__sectionBody p:last-child {
      margin-bottom: 0;
    }

/* General-data list — simple stacked rows, no bullets. */
.vaf-detail-data {
  margin: 0;
  padding: 0;
  list-style: none;
}

  .vaf-detail-data li {
    padding: 4px 0;
    color: var(--vaf-gray-800);
  }

    .vaf-detail-data li + li {
      border-top: 1px dashed var(--vaf-gray-200);
    }

  .vaf-detail-data strong {
    display: inline-block;
    min-width: 90px;
    font-weight: 600;
    color: var(--vaf-gray-600);
  }

/* Data row with a label on the left and a chip on the right (lot # + watch count). */
.vaf-detail-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.vaf-watch-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--vaf-gray-100);
  color: var(--vaf-gray-600);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

  .vaf-watch-count-chip i {
    font-size: 13px;
    color: var(--vaf-navy);
  }

/* Watcher / page-view stats — small inline chips with light icon. */
.vaf-detail-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

  .vaf-detail-stats li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--vaf-gray-100);
    color: var(--vaf-gray-600);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }

    .vaf-detail-stats li i {
      font-size: 13px;
      color: var(--vaf-navy);
    }

/* Bid / purchase history call-to-action. */
.vaf-detail-history-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 600;
}

  .vaf-detail-history-btn i {
    font-size: 14px;
  }

.detail__title > span.vaf-detail-watch {
  padding-right: 0;
}

/************************************************
CATEGORY MENU
************************************************/
@media (min-width: 768px) {
  .categories > div:first-child, .categories .region-container {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--vaf-gray-200);
    border-radius: var(--vaf-radius);
    background: var(--vaf-white);
    box-shadow: 0 4px 14px rgba(15, 31, 61, .06);
  }

  .categories h4 {
    margin: 0;
    padding: .85rem 1rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--vaf-navy) 0%, var(--vaf-navy-mid) 100%);
    color: var(--vaf-white);
    font-size: 1rem;
    font-weight: 700;
  }

  .categories ul.nav {
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, var(--vaf-white) 0%, var(--vaf-gray-100) 100%);
  }

    .categories ul.nav > li {
      float: none;
      margin: 0;
    }

      .categories ul.nav > li + li {
        margin-top: 2px;
        margin-left: 0;
      }

      .categories ul.nav > li > a,
      .categories ul.nav > li > a.vaf-cat-pill {
        display: block !important;
        margin: 0;
        padding: .8rem 1rem;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        color: var(--vaf-menu-link);
        font-size: .95rem;
        line-height: 1.1rem;
        font-weight: 400;
        text-align: left;
        text-decoration: none;
        transform: none;
        transition: none;
      }

          .categories ul.nav > li.active > a,
          .categories ul.nav > li.active > a.vaf-cat-pill {
            font-weight: 700;
          }

        .categories ul.nav > li > a .vaf-cat-icon {
          display: none;
        }

        .categories ul.nav > li > a .vaf-cat-text {
          display: block;
          font-size: .95rem;
          line-height: 1.1rem;
          text-align: left;
          white-space: normal;
        }
}

/* Browse.cshtml renders the category dropdown trigger inside
   `<div class="dropdown visible-sm visible-xs">`, so BS3 swaps to
   the dropdown at any viewport below 992px (md). Match that here —
   otherwise the 768–991px range (iPad Air portrait sits at 820px)
   gets the dropdown markup with no styling override, leaving the
   emoji icons + pill aesthetic that's meant only for the homepage
   slider. */
@media (max-width: 991px) {
  .categories .dropdown-menu .vaf-cat-pill {
    display: block !important;
    gap: 0;
    margin: 0;
    padding: .65rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--vaf-text-body) !important;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    box-shadow: none;
    transform: none;
    transition: background-color var(--vaf-transition), color var(--vaf-transition);
  }

  .categories .dropdown-menu .vaf-cat-pill:hover,
  .categories .dropdown-menu .vaf-cat-pill:focus {
    background: var(--vaf-amber-light) !important;
    color: var(--vaf-amber-dark) !important;
    border: 0 !important;
  }

  .categories .dropdown-menu .vaf-cat-icon {
    display: none;
  }

  .categories .dropdown-menu .vaf-cat-text {
    display: inline;
    font-size: inherit;
    line-height: inherit;
  }
}

.awe-category-back-link {
  border-bottom: 1px solid var(--vaf-gray-200);
}

.categories ul.nav > li > a.vaf-cat-back,
.vaf-cat-back {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--vaf-gray-600);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
}

.vaf-cat-back i {
  line-height: 1;
  color: var(--vaf-gray-400);
}

.categories ul.nav > li > a:hover,
.categories ul.nav > li > a:focus,
.categories ul.nav > li.active > a,
.categories ul.nav > li.active > a.vaf-cat-pill {
  background-color: var(--vaf-amber-light) !important;
  color: var(--vaf-amber-dark) !important;
  margin-left: 0 !important;
  padding-left: 1rem !important;
  box-shadow: none;
  text-decoration: none;
  transform: none;
}

.vaf-cat-back:hover,
.vaf-cat-back:focus {
  background-color: var(--vaf-gray-100) !important;
  color: var(--vaf-navy) !important;
  margin-left: 0 !important;
  padding-left: 1rem !important;
}

  .vaf-cat-back:hover i,
  .vaf-cat-back:focus i {
    color: var(--vaf-amber-dark);
  }

/************************************************
RESPONSIVE
************************************************/
@media (max-width: 767px) {
  .vaf-section-header {
    align-items: flex-start;
  }

    .vaf-section-header .btn {
      margin-left: 0;
    }

  .vaf-cat-icon {
    font-size: 18px;
  }

  .vaf-cat-text {
    font-size: 10px;
  }
}

h1.event-title {
  font-size: var(--vaf-hero-title-size);
  font-weight: var(--vaf-font-body-weight);
}

/************************************************
INVOICE PURCHASES — MOBILE CARD VIEW
Markup uses col-lg-* so both Bootstrap grids (the BS3 and BS5 layers
this project loads) collapse every cell to full width below lg
(<992px). CSS only needs to hide the header, render the data-label
above each value, and turn the action cell into a full-width button.
************************************************/
@media (max-width: 991px) {
  .vaf-invoice-table .heading {
    display: none;
  }

  .vaf-invoice-table .list {
    padding: 12px 14px;
    border-bottom: 1px solid var(--vaf-gray-200);
  }

    .vaf-invoice-table .list:last-child {
      border-bottom: 0;
    }

    .vaf-invoice-table .list .row {
      row-gap: 8px;
    }

    .vaf-invoice-table .list .row > [data-label]::before {
      content: attr(data-label);
      display: block;
      margin-bottom: 2px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--vaf-gray-600);
    }

    /* Override myaccount.css's `.myaccount .list > .row > [class*="col-"]
       { flex: 1 1 50%; max-width: 50% }` rule for the action cell so the
       Vis-faktura button can span the full card width on mobile. */
    .myaccount .vaf-invoice-table .list > .row > .vaf-invoice-action,
    .vaf-invoice-table .list .vaf-invoice-action {
      flex: 1 1 100%;
      max-width: 100%;
      margin-top: 4px;
    }

      .vaf-invoice-table .list .vaf-invoice-action .btn {
        display: block;
        width: 100%;
        padding: var(--vaf-btn-padding-y) var(--vaf-btn-padding-x);
        font-size: var(--vaf-btn-font-size);
      }
}

/************************************************
BID CONFIRMATION MODAL (BootstrapDialog)
************************************************/
.bootstrap-dialog .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 30px * 2);
  margin-top: 30px;
  margin-bottom: 30px;
}

.bootstrap-dialog .modal-content {
  width: 100%;
  border: 0;
  border-radius: var(--vaf-radius);
  background: var(--vaf-white);
  box-shadow: var(--vaf-shadow-hover);
  overflow: hidden;
}

.bootstrap-dialog[class*="type-"] .modal-header,
.bootstrap-dialog.type-primary .modal-header,
.bootstrap-dialog.type-info .modal-header,
.bootstrap-dialog.type-success .modal-header,
.bootstrap-dialog.type-warning .modal-header,
.bootstrap-dialog.type-danger .modal-header,
.bootstrap-dialog.type-default .modal-header {
  background: var(--vaf-white) !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--vaf-navy) !important;
}

.bootstrap-dialog .modal-header {
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--vaf-gray-200);
  background: var(--vaf-white);
  background-image: none;
}

  .bootstrap-dialog .modal-header .bootstrap-dialog-header {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
  }

.bootstrap-dialog .bootstrap-dialog-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--vaf-font-display);
  font-size: var(--vaf-section-title-size) !important;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
  color: var(--vaf-navy) !important;
  text-transform: none;
  white-space: normal;
}

    .bootstrap-dialog .bootstrap-dialog-title em {
      font-style: normal;
      font-weight: 500;
      color: var(--vaf-gray-400);
    }

  .bootstrap-dialog .bootstrap-dialog-close-button {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vaf-gray-600);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--vaf-transition), color var(--vaf-transition);
  }

    .bootstrap-dialog .bootstrap-dialog-close-button:hover,
    .bootstrap-dialog .bootstrap-dialog-close-button:focus {
      background: var(--vaf-gray-100);
      color: var(--vaf-navy);
    }

.bootstrap-dialog .modal-body {
  color: var(--vaf-gray-800);
  font-size: .95rem;
  line-height: 1.5;
}

  .bootstrap-dialog .modal-body p {
    margin: 0 0 .6rem;
  }

    .bootstrap-dialog .modal-body p:last-child {
      margin-bottom: 0;
    }

  .bootstrap-dialog .modal-body .text-success {
    color: var(--vaf-navy);
  }

  .bootstrap-dialog .modal-body .text-danger {
    color: var(--vaf-amber-dark, #b8730b);
  }

  /* Fee breakdown rows */
  .bootstrap-dialog .modal-body .BuyerFeeConfirmationRow1,
  .bootstrap-dialog .modal-body .BuyerFeeConfirmationRow1 + p {
    padding: 10px 12px;
    border-radius: var(--vaf-radius-sm);
    background: var(--vaf-gray-100);
    font-size: .875rem;
    color: var(--vaf-gray-600);
  }

  .bootstrap-dialog .modal-body .alert {
    margin: 12px 0 0;
    border-radius: var(--vaf-radius-sm);
  }

  /* Large-bid amount selection radios */
  .bootstrap-dialog .modal-body .radio {
    margin: 6px 0;
  }

    .bootstrap-dialog .modal-body .radio label {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border: 1px solid var(--vaf-gray-200);
      border-radius: var(--vaf-radius-sm);
      background: var(--vaf-white);
      font-weight: 500;
      cursor: pointer;
      transition: border-color var(--vaf-transition), background var(--vaf-transition);
    }

      .bootstrap-dialog .modal-body .radio label:hover {
        border-color: var(--vaf-navy);
        background: var(--vaf-gray-100);
      }

      .bootstrap-dialog .modal-body .radio input[type="radio"] {
        margin: 0;
      }

.bootstrap-dialog .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  border-top: none;
  background: var(--vaf-white);
}

  .bootstrap-dialog .modal-footer:before,
  .bootstrap-dialog .modal-footer:after {
    display: none;
    content: none;
  }

  .bootstrap-dialog .bootstrap-dialog-message .modal-footer {
    margin: 20px -22px -20px;
    padding: 16px 22px;
    background: var(--vaf-white);
  }

  .bootstrap-dialog .modal-footer .btn {
    min-width: 110px;
    font-weight: 600;
  }

  .bootstrap-dialog .modal-footer #modalSubmitButton,
  .bootstrap-dialog .modal-footer #modalConfirmLargeBidButton,
  .bootstrap-dialog .modal-footer .btn-success {
    background: var(--vaf-navy);
    border-color: var(--vaf-navy);
    color: var(--vaf-white);
  }

    .bootstrap-dialog .modal-footer #modalSubmitButton:hover,
    .bootstrap-dialog .modal-footer #modalSubmitButton:focus,
    .bootstrap-dialog .modal-footer #modalConfirmLargeBidButton:hover,
    .bootstrap-dialog .modal-footer #modalConfirmLargeBidButton:focus,
    .bootstrap-dialog .modal-footer .btn-success:hover,
    .bootstrap-dialog .modal-footer .btn-success:focus {
      background: var(--vaf-navy-mid, var(--vaf-navy));
      border-color: var(--vaf-navy-mid, var(--vaf-navy));
      color: var(--vaf-white);
    }

  /* Cancel: ships as .btn-link — render as a ghost button. */
  .bootstrap-dialog .modal-footer #modalCancelButton,
  .bootstrap-dialog .modal-footer .btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--vaf-gray-600);
    text-decoration: none;
  }

    .bootstrap-dialog .modal-footer #modalCancelButton:hover,
    .bootstrap-dialog .modal-footer #modalCancelButton:focus,
    .bootstrap-dialog .modal-footer .btn-link:hover,
    .bootstrap-dialog .modal-footer .btn-link:focus {
      background: var(--vaf-gray-200);
      color: var(--vaf-navy);
      text-decoration: none;
    }

.bootstrap-dialog .bootstrap-dialog-message img[src*="progress-wheel"] {
  display: block;
  margin: 24px auto;
}

@media (max-width: 575px) {
  .bootstrap-dialog .modal-dialog {
    margin: 12px;
  }

  .bootstrap-dialog .modal-header,
  .bootstrap-dialog .modal-body,
  .bootstrap-dialog .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .bootstrap-dialog .modal-footer .btn {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/************************************************
TRUST STRIP
************************************************/
.vaf-trust-strip {
  background: var(--vaf-navy);
  border-radius: var(--vaf-radius);
  padding: 22px 10px;
  color: var(--vaf-white);
}

  .vaf-trust-strip .vaf-trust-item {
    padding: 10px 14px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, .1);
  }

  .vaf-trust-strip .vaf-trust-item--cta {
    border-right: 0;
  }

  .vaf-trust-strip .vaf-trust-icon {
    display: block;
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1;
  }

  .vaf-trust-strip .vaf-trust-title {
    margin: 0 0 3px;
    font-family: var(--vaf-font-display);
    font-size: 14px;
    font-weight: var(--vaf-font-body-weight-bold);
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--vaf-white);
  }

  .vaf-trust-strip .vaf-trust-item--cta .vaf-trust-title {
    color: var(--vaf-amber);
  }

  .vaf-trust-strip .vaf-trust-sub {
    display: block;
    margin: 0;
    font-family: var(--vaf-font-body);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, .5);
  }

  .vaf-trust-strip .vaf-trust-item--cta .vaf-trust-sub {
    color: rgba(255, 255, 255, .55);
  }

  .vaf-trust-strip .vaf-trust-cta-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 18px;
    background: var(--vaf-amber);
    border: 0;
    border-radius: var(--vaf-radius-sm);
    font-family: var(--vaf-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vaf-white);
    text-decoration: none;
    transition: background var(--vaf-transition), color var(--vaf-transition);
  }

    .vaf-trust-strip .vaf-trust-cta-btn:hover,
    .vaf-trust-strip .vaf-trust-cta-btn:focus {
      background: var(--vaf-amber-dark);
      color: var(--vaf-white);
      text-decoration: none;
      outline: none;
    }

/************************************************
EVENT DETAILS — HIDE / VIEW TOGGLE
************************************************/
/* The two buttons toggle visibility of the event details panel on
   Event/Details.cshtml — only one ever shows at a time. Their
   resource strings differ in length ("Skjul auksjonsdetaljer" vs
   "Vis auksjonsdetaljer", "Hide auction details" vs "View auction
   details" etc.), so the surrounding flex row would otherwise jump
   as the button swaps.

   Solution: stack both buttons in a single CSS grid cell. The track
   sizes to the wider natural content, so both buttons share that
   width. The currently-hidden one is kept in layout via
   `visibility: hidden` instead of `display: none`, otherwise grid
   would only size to the visible one. */
.vaf-event-detail-toggle {
  display: inline-grid;
}

  .vaf-event-detail-toggle > #HideAuctionDetailsBTN,
  .vaf-event-detail-toggle > #ViewAuctionDetailsBTN {
    grid-area: 1 / 1;          /* stack both children in the same cell */
    justify-content: center;
  }

  /* Override AWE's `awe-hidden { display: none }` only inside this
     wrapper, so the hidden twin still claims its width. The toggle JS
     re-applies `display: ""` after toggling the class, so no inline
     style overrides this rule. */
  .vaf-event-detail-toggle > #HideAuctionDetailsBTN.awe-hidden,
  .vaf-event-detail-toggle > #ViewAuctionDetailsBTN.awe-hidden {
    display: inline-block !important;
    visibility: hidden;
    pointer-events: none;
  }