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;
}

/* Custom brand palette (from Shopify screenshot) */
:root {
  --brand-bg: #FFFFFF;
  --brand-text: #111111;
  --brand-solid: #FF3B3F; /* solid button background */
  --brand-solid-label: #FFFFFF;
  --brand-outline: #00C2A8; /* outline button */
  --brand-shadow: rgba(28,28,28,0.15);
}

body {
  background: var(--brand-bg);
  color: var(--brand-text);
}

/* Use Inter font */
body, h1, h2, h3, h4, h5, h6, .btn, .form-control {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.copyright__content { font-size: 11px; }

.image-card {
  border-radius: 8px;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 18px var(--brand-shadow);
}

.image-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px var(--brand-shadow);
}

.image-card img.card-img-top {
  object-fit: cover;
  height: 320px;
  width: 100%;
}

.card-buttons {
  padding: 0.5rem 0;
}

/* Center single image in viewport */
.single-image-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.single-image-row .image-card img.card-img-top {
  height: 70vh;
}

/* Modal override for fullscreen translucent background */
.modal-backdrop.show {
  background-color: rgba(0,0,0,0.7);
}

.modal-fullscreen .modal-content {
  background: rgba(0,0,0,0.85);
}

.thank-you-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
}

.thank-you-box {
  background: #fff;
  border-radius: 8px;
  max-width: 480px;
  width: 90%;
}

.thank-you-overlay.d-none { display: none; }

.approve-btn {
  border-color: transparent;
  color: #ffffff;
  background-color: #00C2A8; /* teal */
}

.approve-btn:hover {
  background-color: #00a890;
}

.reject-btn {
  color: #ffffff;
  background-color: #FF3B3F; /* red */
  border-color: transparent;
}

.reject-btn:hover {
  background-color: #e23336;
}

.btn-solid {
  background-color: var(--brand-solid);
  color: var(--brand-solid-label);
  border: none;
}

.btn-outline-custom {
  color: var(--brand-outline);
  border-color: var(--brand-outline);
  background: transparent;
}

.pending-badge {
  display: none;
}

.badge.bg-success { background-color: #28a745 !important; }
.badge.bg-danger { background-color: #dc3545 !important; }

.actions-bar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Confirm modal button styles */
.btn-approve {
  background-color: #00C2A8;
  color: #fff;
  border: none;
}

.btn-danger {
  background-color: #FF3B3F !important;
  color: #fff;
}

.btn-confirm {
  min-width: 110px;
}

.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;
}