html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.modal textarea {
  min-height: 80px;
}

/* Bottom tab bar — anchor element resets (B87) */
a.bottom-tab,
a.bottom-tab-create {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ============================================================
   VENDOR SLIDER SECTION (UI-55: move all inline styles to CSS)
   ============================================================ */

.vendor-slider-section {
  padding: 64px 0;
  background: var(--neutral-50);
}

.vendor-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}

.vendor-slider-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--neutral-900);
  margin-bottom: 4px;
}

.vendor-slider-subtitle {
  font-size: 16px;
  color: var(--neutral-600);
}

.vendor-slider-view-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}

.vendor-slider-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* UI-56: vendor tab active/inactive state via CSS classes only */
.vendor-tab {
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  color: var(--neutral-700);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.vendor-tab.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

.vendor-tab:hover:not(.active) {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.vendor-tab-icon {
  margin-right: 4px;
}

.vendor-slider-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.vendor-slide-card {
  min-width: 280px;
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms, box-shadow 200ms;
}

.vendor-slide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.vendor-slide-card.hidden,
.campaign-card.hidden {
  display: none;
}

.vendor-slide-image {
  height: 160px;
  background: linear-gradient(135deg, #f0fdf4, #e8f5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.vendor-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vendor-slide-placeholder-icon {
  font-size: 48px;
  color: var(--neutral-400);
}

.vendor-slide-body {
  padding: 16px;
}

.vendor-slide-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--neutral-900);
  margin-bottom: 4px;
}

.vendor-slide-desc {
  font-size: 13px;
  color: var(--neutral-600);
  margin-bottom: 8px;
}

.vendor-slide-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #F59E0B;
  margin-bottom: 8px;
}

.vendor-slide-rating-count {
  color: var(--neutral-600);
}

.vendor-slide-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--primary-color);
  font-weight: 600;
}

.vendor-slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.vendor-slider-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--neutral-200);
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-700);
  transition: background 150ms, color 150ms, border-color 150ms;
}

.vendor-slider-btn:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* ============================================================
   ADMIN HEADER (UI-47: replaces public nav in auth layout)
   ============================================================ */

.admin-header {
  background: var(--white, #fff);
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.admin-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.admin-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bell button — polished (UI-49) */
.admin-bell-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--neutral-100, #f3f4f6);
  border: 1.5px solid var(--neutral-200, #e5e7eb);
  color: var(--neutral-600, #4b5563);
  transition: background 150ms, border-color 150ms, color 150ms;
  cursor: pointer;
  outline: none;
}

.admin-bell-btn:hover {
  background: var(--neutral-200, #e5e7eb);
  border-color: var(--neutral-300, #d1d5db);
  color: var(--neutral-900, #111827);
}

.admin-bell-btn:focus-visible {
  outline: 2px solid var(--primary-color, #166534);
  outline-offset: 2px;
}

.admin-bell-icon {
  font-size: 20px;
  line-height: 1;
}

/* Initials pill — polished (UI-49) */
.admin-avatar-pill {
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-color, #166534);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 150ms, box-shadow 150ms;
  outline: none;
  white-space: nowrap;
}

.admin-avatar-pill:hover {
  background: var(--primary-dark, #14532d);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.admin-avatar-pill:focus-visible {
  outline: 2px solid var(--primary-color, #166534);
  outline-offset: 2px;
}

/* ============================================================
   ADMIN MINIMAL FOOTER (UI-48: replaces public footer in auth layout)
   ============================================================ */

.admin-footer {
  background: var(--neutral-50, #f9fafb);
  border-top: 1px solid var(--neutral-200, #e5e7eb);
  padding: 16px 24px;
  margin-top: auto;
}

.admin-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--neutral-500, #6b7280);
}

.admin-footer-links {
  display: flex;
  gap: 16px;
}

.admin-footer-links a {
  color: var(--neutral-500, #6b7280);
  text-decoration: none;
  font-size: 13px;
  transition: color 150ms;
}

.admin-footer-links a:hover {
  color: var(--primary-color, #166534);
  text-decoration: underline;
}

@media (max-width: 576px) {
  .admin-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ============================================================
   ENQUIRY FORM — textarea min-height (UX-59)
   ============================================================ */

.enquiry-textarea,
.enquiry-form-wrapper textarea {
  min-height: 120px;
}

/* ============================================================
   ADMIN DASHBOARD — stat cards and orders table (Phase 7)
   UI-50: icon container tinted backgrounds
   UI-51: stat card box-shadow/elevation
   UI-54: recent orders thead background
   ============================================================ */

/* Stat card elevation (UI-51) */
.admin-stat-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 200ms;
}

.admin-stat-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Icon container tinted background (UI-50) */
.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-stat-icon--green {
  background: rgba(46, 125, 50, 0.12);
  color: #2E7D32;
}

.admin-stat-icon--blue {
  background: rgba(21, 101, 192, 0.12);
  color: #1565C0;
}

.admin-stat-icon--light-green {
  background: rgba(76, 175, 80, 0.12);
  color: #4CAF50;
}

.admin-stat-icon--orange {
  background: rgba(232, 145, 45, 0.12);
  color: #E8912D;
}

.admin-stat-icon--yellow {
  background: rgba(255, 203, 57, 0.18);
  color: #B38600;
}

.admin-stat-icon--purple {
  background: rgba(123, 31, 162, 0.12);
  color: #7B1FA2;
}

/* Recent orders thead background (UI-54) */
.admin-orders-table thead tr {
  background: var(--neutral-50, #f9fafb);
}

.admin-orders-table thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500, #6b7280);
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

/* ============================================================
   ADMIN APP SETTINGS TABLE (Phase 8)
   UI-60: typographic hierarchy — NAME bold/dark, VALUE monospace/lighter
   UI-61: JSON value blocks with word-wrap
   UX-69: clickable name button
   UX-70: empty state
   ============================================================ */

/* NAME column: bold, dark */
.appsettings-name-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-weight: 700;
  color: var(--neutral-900, #111827);
  cursor: pointer;
  text-align: left;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color 150ms, text-decoration-color 150ms;
}

.appsettings-name-btn:hover,
.appsettings-name-btn:focus-visible {
  color: var(--primary-color, #166534);
  text-decoration-color: currentColor;
  outline: none;
}

.appsettings-name-btn:focus-visible {
  outline: 2px solid var(--primary-color, #166534);
  outline-offset: 2px;
  border-radius: 2px;
}

/* VALUE column: monospace, lighter tone */
.appsettings-value-cell {
  max-width: 480px;
}

.appsettings-value-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  color: var(--neutral-600, #4b5563);
  word-break: break-word;
}

/* JSON block rendering (UI-61) */
.appsettings-json-block {
  margin: 0;
  padding: 8px 10px;
  background: var(--neutral-50, #f9fafb);
  border: 1px solid var(--neutral-200, #e5e7eb);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--neutral-700, #374151);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 160px;
  overflow-y: auto;
}

.appsettings-json-block code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* Empty state (UX-70) */
.appsettings-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--neutral-500, #6b7280);
  font-size: 15px;
}

.appsettings-empty-icon {
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ============================================================
   ADMIN USER ACCOUNTS TABLE (Phase 9)
   UI-63: thead background
   UI-64: organisation column text-wrap
   UI-65: consistent header button styling
   UX-72: disable action danger modal
   UX-74: empty state
   A-35: STATUS badge text+icon
   ============================================================ */

/* UI-63: thead background */
.admin-users-thead tr {
  background: var(--neutral-50, #f9fafb);
}

.admin-users-thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500, #6b7280);
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

/* UI-64: organisation column — allow wrapping, constrain min-width */
.admin-users-org-col {
  min-width: 140px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* UX-74: empty state */
.admin-users-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--neutral-500, #6b7280);
  font-size: 15px;
}

.admin-users-empty-icon {
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* ============================================================
   EMAIL VERIFICATION BANNER (UX-84)
   ============================================================ */

.email-verify-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #92400e;
}

.email-verify-banner .mdi {
  font-size: 18px;
  flex-shrink: 0;
  color: #d97706;
}

.email-verify-banner span {
  flex: 1;
}

.email-verify-dismiss {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: #92400e;
  opacity: 0.7;
  line-height: 1;
  flex-shrink: 0;
}

.email-verify-dismiss:hover {
  opacity: 1;
}

/* ============================================================
   CREATOR LISTING TABLES (Phase 10)
   UI-66: thead background for creator listing tables
   ============================================================ */

/* UI-66: creator listing thead background */
.creator-listing-thead tr {
  background: var(--neutral-50, #f9fafb);
}

.creator-listing-thead th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--neutral-500, #6b7280);
  border-bottom: 1px solid var(--neutral-200, #e5e7eb);
}

/* ============================================================
   DASHBOARD BUTTON TOKENS (Phase 15)
   UI-69: btn-elfrique-accent and btn-elfrique-primary — solid
   primary CTA style for dashboard/admin pages
   ============================================================ */

.btn-elfrique-accent,
.btn-elfrique-primary {
  background-color: var(--primary-color, #166534);
  border-color: var(--primary-color, #166534);
  color: #fff;
  font-weight: 600;
}

.btn-elfrique-accent:hover,
.btn-elfrique-primary:hover {
  background-color: var(--primary-dark, #14532d);
  border-color: var(--primary-dark, #14532d);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.btn-elfrique-accent:focus-visible,
.btn-elfrique-primary:focus-visible {
  outline: 2px solid var(--primary-color, #166534);
  outline-offset: 2px;
}

/* ============================================================
   TEXT OVERLAP PREVENTION (Phase 15)
   UI-73: prevent stacking-context / overflow issues on dashboard
   pages that cause text to overlap
   ============================================================ */

/* Ensure dashboard content area establishes its own stacking context
   and content does not overflow into fixed/sticky header */
.layout-page .content-wrapper,
.layout-wrapper .layout-page {
  position: relative;
  z-index: 1;
}

/* Page header row: prevent flex children from overflowing */
.page-header {
  min-width: 0;
}

.page-header h1,
.page-header h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Stat cards and table cells: guard against long content overlap */
.admin-stat-card .card-title,
.event-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   FOOTER LEGAL LINKS (F-4-1: extract from inline styles)
   ============================================================ */

.footer-legal-link {
  color: rgba(255, 255, 255, 0.5);
}

.footer-legal-link--mr {
  margin-right: 16px;
}

/* ============================================================
   AFFILIATE SECTION (F-1-2: extract from inline styles)
   ============================================================ */

.affiliate-icon-lg {
  font-size: 64px;
  color: var(--secondary-color);
}

/* ============================================================
   CAMPAIGN META ICONS (F-2-2: extract from inline styles)
   ============================================================ */

.campaign-meta-icon {
  font-size: 14px;
  opacity: 0.7;
}

/* ============================================================
   ADMIN DASHBOARD STAT CARDS (F-7-1: extract from inline styles)
   ============================================================ */

.admin-stat-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.admin-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.admin-stat-label {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* ============================================================
   CREATOR DASHBOARD STAT CARDS (extracted from inline <style>)
   ============================================================ */

.stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  transition: transform 150ms, box-shadow 150ms;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}

.stat-value {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.stat-label {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* ============================================================
   AD BANNER (Home page — extracted from inline styles)
   ============================================================ */

.ad-banner {
  padding: 40px 0;
  background: var(--white, #fff);
}

.ad-banner-inner {
  background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 100%);
  border-radius: var(--radius-lg, 16px);
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  gap: 32px;
}

.ad-banner-content h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ad-banner-content p {
  font-size: 15px;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .ad-banner-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
  }
  .ad-banner-content h3 {
    font-size: 20px;
  }
}

/* ============================================================
   IMAGE SKELETON / PLACEHOLDER (IMG-001)
   Subtle pulse animation on image containers while loading.
   Apply .img-skeleton to an image wrapper; the skeleton is
   covered once the <img> paints.
   ============================================================ */

.img-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--neutral-100, #f3f4f6);
}

.img-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: img-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes img-skeleton-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Once the image loads the skeleton is invisible behind it */
.img-skeleton img {
  position: relative;
  z-index: 1;
}

/* ============================================================
   BROKEN IMAGE FALLBACK (IMG-001)
   When an <img> fails to load, the onerror handler adds
   .img-broken. The parent container shows a neutral icon
   placeholder instead of the browser's broken-image icon.
   ============================================================ */

img.img-broken {
  display: none !important;
}

/* Parent container fallback — applied via .img-fallback-bg */
.img-fallback-bg {
  background: linear-gradient(135deg, var(--neutral-100, #f3f4f6), var(--neutral-200, #e5e7eb));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-400, #9ca3af);
  font-size: 32px;
}

/* Standalone fallback icon shown by JS when image breaks */
.img-fallback-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--neutral-400, #9ca3af);
  font-size: 32px;
}

.img-fallback-icon.visible {
  display: flex;
}

/* ============================================================
   QR CODE SECTION (Home page — extracted from inline styles)
   ============================================================ */

.qr-section {
  padding: 64px 0;
  background: var(--neutral-50, #f9fafb);
}

.qr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.qr-feature {
  text-align: center;
  padding: 32px 24px;
  background: var(--white, #fff);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-1, 0 1px 4px rgba(0, 0, 0, 0.08));
}

.qr-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--radius-md, 12px);
  background: var(--neutral-50, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.qr-feature h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.qr-feature p {
  font-size: 14px;
  color: var(--neutral-600, #4b5563);
}

@media (max-width: 768px) {
  .qr-grid {
    grid-template-columns: 1fr;
  }
}

.sa-detail-back {
  min-width: 44px;
  min-height: 44px;
}

/* ============================================================
   VOTING CONTEST — contestant card photo image
   R5: use contain so images are not cropped (full image visible)
   ============================================================ */
.contestant-photo .photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}