/* style.css */
@charset "UTF-8";
/***************************************************************************************************
********************************* STAGE STYLES ****************************************************
***************************************************************************************************/
:root {
  --primary: #0d6efd;
  --secondary: #161925;
  --accent: #ff6600;
  --text: #161925;
  --lightgrey: #8EA8C3;
  --mediumgrey: #406E8E;
  --darkgrey: #23395B;
  --teal: #449F93;
  --darkteal: #006153;
  --cream: #EEE8A9;
  --dark-bg: #161925;
  --yellow: #e2b12e;
  --error: #b92924;
  --rust: #C15450;
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: #28a745;
}

.invalid-feedback {
  display: none;
  font-size: 0.875rem;
  color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback {
  display: block;
}

.stage-land {
  background-color: green;
  color: var(--text-light);
}

.stage-construction {
  background-color: yellow;
  color: var(--text-dark);
}

.stage-management {
  background-color: lightblue;
  color: var(--text-dark);
}

.stage-renovation {
  background-color: orange;
  color: var(--text-light);
}

.btn-primary {
  color: #fff;
  background-color: #09083a;
  border-color: #09083a;
}

.btn-primary:hover {
  color: #fff;
  background-color: #12114e;
  border-color: #12114e;
}

.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: #06052a;
  border-color: #06052a;
  box-shadow: 0 0 0 0.25rem rgba(9, 8, 58, 0.4);
}

.btn-primary:disabled {
  background-color: #09083a;
  border-color: #09083a;
  opacity: 0.65;
}

.navbar {
  --nav-brand: #09083a;
  --nav-ink: #3a3f63;
  background: #fff;
  padding: 0.5rem 2rem;
  min-height: 72px;
  box-shadow: 0 1px 0 rgba(16, 18, 48, 0.06), 0 6px 20px rgba(16, 18, 48, 0.05);
  position: relative;
}
.navbar .navbar-nav {
  align-items: center;
}
.navbar .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 1.5rem;
}
.navbar .navbar-brand img {
  height: 46px;
  width: auto;
  min-height: 0;
  max-height: 52px;
  max-width: 190px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}
.navbar .navbar-nav > .nav-item > .nav-link {
  font-weight: 500;
  color: var(--nav-ink);
  padding: 0.5rem 0.9rem;
  margin: 0 0.1rem;
  position: relative;
  transition: color 0.18s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link > span {
  position: relative;
  display: inline-block;
}
.navbar .navbar-nav > .nav-item > .nav-link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--nav-brand);
}
.navbar .navbar-nav > .nav-item > .nav-link:hover > span::after {
  transform: scaleX(1);
}
.navbar .navbar-nav > .nav-item > .nav-link.active {
  color: var(--nav-brand);
  font-weight: 600;
}
.navbar .navbar-nav > .nav-item > .nav-link.active > span::after {
  transform: scaleX(1);
}
.navbar .nav-points-chip,
.navbar .nav-link--points {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #b07700;
  background: #fff7e6;
  border: 1px solid #f3dca6;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin: 0 0.5rem 0 1rem;
  white-space: nowrap;
}
.navbar .nav-points-chip .bi,
.navbar .nav-link--points .bi {
  color: #f0a500;
}
.navbar .nav-points-chip > span::after,
.navbar .nav-link--points > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  border-radius: 50%;
  color: var(--nav-brand);
  background: #eef1fb;
  margin: 0 0.6rem;
  padding: 0 !important;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin .bi {
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
  margin: 0 !important;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin::after {
  display: none !important;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin:hover, .navbar .navbar-nav > .nav-item > .nav-link--admin:focus, .navbar .navbar-nav > .nav-item > .nav-link--admin.show {
  background: var(--nav-brand);
  color: #fff;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin:hover .bi, .navbar .navbar-nav > .nav-item > .nav-link--admin:focus .bi, .navbar .navbar-nav > .nav-item > .nav-link--admin.show .bi {
  color: #fff;
}
.navbar .navbar-nav > .nav-item > .language-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  flex: 0 0 auto;
  font-weight: 600;
  line-height: 1;
  color: var(--nav-ink);
  border: 1px solid #dde1f0;
  border-radius: 8px;
  padding: 0.45rem 0.8rem !important;
  margin-left: 0.6rem;
}
.navbar .navbar-nav > .nav-item > .language-toggle > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .language-toggle:hover {
  color: var(--nav-brand);
  border-color: var(--nav-brand);
}
.navbar .navbar-nav > .nav-item > .nav-link--login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  flex: 0 0 auto;
  font-weight: 600;
  color: #fff !important;
  background: var(--nav-brand);
  border-radius: 8px;
  padding: 0.45rem 1.15rem !important;
  margin-left: 0.6rem;
}
.navbar .navbar-nav > .nav-item > .nav-link--login > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--login:hover {
  background: #12114e;
}
.navbar .dropdown-menu {
  border: 1px solid #e7eaf6;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 18, 48, 0.12);
  padding: 0.4rem;
}
.navbar .dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: #eef1fb;
}
.navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active {
  background: var(--nav-brand);
  color: #fff;
}
.navbar .btn-signin {
  margin-left: 1rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 25px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.navbar .btn-signin:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/* Custom button based on Bootstrap btn-warning */
.btn-enter {
  --bs-btn-color: #fff; /* text color */
  --bs-btn-bg: #09083a; /* base background */
  --bs-btn-border-color: #09083a; /* border same as bg */
  --bs-btn-hover-bg: #12114e; /* slightly lighter/different on hover */
  --bs-btn-hover-border-color: #12114e;
  --bs-btn-focus-shadow-rgb: 9,8,58; /* focus ring uses brand color */
  --bs-btn-active-bg: #06052a; /* darker for active click */
  --bs-btn-active-border-color: #06052a;
  --bs-btn-disabled-bg: #09083a;
  --bs-btn-disabled-border-color: #09083a;
  display: inline-block;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem; /* same as default Bootstrap rounded corners */
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-enter:hover {
  color: #fff;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-enter:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-enter:active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-enter:disabled,
.btn-enter.disabled {
  opacity: 0.65;
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
}

* {
  font-family: acumin-variable, sans-serif;
}

b {
  font-weight: 900;
}

.program-card {
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}
.program-card:hover {
  transform: scale(1.02);
}
.program-card .card-header {
  background-size: cover;
  background-position: center;
  height: 100px;
  background-image: url("/public/img/land.jpg");
}
.program-card .card-header .program-stage {
  font-size: 0.8rem;
}
.program-card .card-header .program-location {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
  width: 30%;
}
.program-card .card-body {
  padding: 1.5rem 1rem;
}
.program-card .card-body .program-title {
  color: #4ed2f7;
}
.program-card .card-body .program-address {
  font-size: 0.7rem;
}
.program-card .card-body .program-stats {
  row-gap: 0.5rem;
}
.program-card .card-body .program-stats .stat {
  line-height: 1;
}
.program-card .card-body .program-stats .value {
  font-size: 1.25rem;
}
.program-card .card-body .program-stats .small {
  font-size: 0.75rem;
  color: #6c757d;
}
.program-card .card-footer {
  border-top: 1px solid #e9ecef;
  background-color: #fff;
}
.program-card .card-footer .action-btn {
  text-align: center;
  background-color: white;
  border: none;
}
.program-card .card-footer .action-btn:hover {
  color: #007bff;
}

tbody, td, tfoot, th, thead, tr {
  border-style: unset;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}
.table th, .table td {
  padding: 10px;
}
.table th {
  background-color: #666666;
  color: white;
  font-weight: 400;
}
.table .btn-link {
  color: #007bff;
  text-decoration: none;
}
.table .btn-link:hover {
  text-decoration: underline;
}

.dash-table {
  margin: 0;
  font-size: 0.9rem;
}
.dash-table thead th {
  background: transparent;
  color: #6b7194;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-bottom: 1.5px solid #e7eaf6;
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
}
.dash-table thead th .badge {
  font-weight: 600;
}
.dash-table tbody td {
  padding: 0.7rem 0.75rem;
  vertical-align: middle;
  border-color: #eef1f8;
}
.dash-table tbody tr:last-child td {
  border-bottom: 0;
}
.dash-table tbody tr:hover {
  background: #f7f9ff;
}

.dash-pill {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #eef1fb;
  color: #3a3f63;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.4;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: #eef8f8;
}

td:has(.module--edit-button) {
  text-align: right;
}

.module--edit-button {
  text-align: right;
}

.module--delete-button {
  text-align: right;
}

.module--add-button {
  background-color: #23395B;
  color: white;
  border-radius: 20px;
}

.fg-logo {
  width: 150px;
  margin-left: 2rem;
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2rem;
}
.modal-header .modal-header-content {
  text-align: center;
}
.modal-header .modal-title {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}
.modal-header .modal-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #6c757d;
}
.modal-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-body .form-label {
  margin-bottom: 0.5rem;
}
.modal-body .form-select {
  font-size: 1rem;
  padding: 0.5rem;
}

.stage-select {
  min-width: 300px;
  padding: 0.25rem;
  border-radius: 5px;
}

/* Align label and input fields on the same line */
.form-page .mb-3 {
  display: flex;
  align-items: flex-start;
}
.form-page .form-label {
  margin-right: 4rem;
  text-align: left;
}
.form-page .form-control {
  flex-grow: 1;
}

.card .row .group-title {
  background-color: #666666;
  color: #FFF;
}

.table-schema-added {
  color: var(--success) !important;
}

.table-schema-removed {
  color: var(--danger) !important;
}

.calc-direction-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 1rem;
}

.calc-direction-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--bs-secondary);
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.3rem 0.6rem;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}
.calc-direction-toggle:hover {
  background-color: #e9ecef;
}
.calc-direction-toggle:hover i {
  opacity: 1;
  font-size: 1.15rem;
}
.calc-direction-toggle i {
  font-size: 1.1rem;
  color: var(--bs-secondary);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.bi-arrow-right-circle-fill {
  font-size: 1.15rem;
}

.bi-arrow-left-circle-fill {
  font-size: 1.15rem;
}

.pdf-export-header {
  text-align: right;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-text {
  font-size: 10rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
  transform: rotate(352deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

.row.card-section-container {
  position: relative;
}

button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

button:disabled:hover {
  background-color: #e0e0e0;
  color: #a0a0a0;
}

.quick-links .filter-button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Fade-in and fade-out animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}
#equationModal .drag-placeholder {
  background-color: rgba(0, 123, 255, 0.2); /* Light blue transparent */
  border: 2px dashed #007bff; /* Dashed border */
  height: 30px;
  width: 100px;
  margin: 5px;
  display: inline-block;
}
#equationModal .eq-title {
  color: #204F88;
}
#equationModal .operator-container {
  background-color: #EFEFEF;
  border-top: 1px solid #EFF1F3;
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .operator-container .operator-btn-container {
  padding: 5px;
}
#equationModal .operator-container .operator-btn-container .operator-btn {
  background-color: #E9F6FB !important;
  border: 1px solid #97D8ED;
  font-size: 5rem;
  font-weight: 900;
  color: black;
}
#equationModal .cell-container {
  background-color: #F9F9F9;
  border-top: 1px solid #EFF1F3;
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .drag-pill {
  background-color: #FDF3C9;
  border: 1px solid black;
}
#equationModal .drag-pill .pill-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: white;
  color: #600000;
  width: 20px;
  height: 20px;
  border: 1px solid #600000;
  border-radius: 50%;
  padding: 0;
  padding-bottom: 2px;
  font-size: 1rem;
}
#equationModal .calculation-container {
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .calculation-container .operator-btn {
  background-color: #E9F6FB !important;
  border: 1px solid #97D8ED;
  font-size: 5rem;
  font-weight: 900;
  color: black;
}
#equationModal .search-group {
  position: relative;
  width: 250px;
}
#equationModal .search-group input {
  width: 100%;
  border: 1px solid black;
  padding: 0.5rem 1rem;
}
#equationModal .search-group i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.active-sort {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

.fave-toggle.active {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

#favourite-filter.active {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}

#favourite-filter.active i {
  color: white;
}

.thankyou-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9f9f9 60%, #eaf8f2 100%);
}

.thankyou-box {
  max-width: 500px;
  background: #fff;
  border-radius: 1rem;
}

.thankyou-icon i {
  font-size: 3rem;
  color: #28a745;
}

.thankyou-box h2 {
  font-size: 2rem;
  color: #333;
}

.thankyou-box p {
  font-size: 1.1rem;
}

/* ===== Fullscreen overlay remains ===== */
#toastOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1054;
}

.terms-list {
  counter-reset: term-counter;
  list-style: none;
}
.terms-list > .terms-section {
  counter-increment: term-counter;
  position: relative;
  padding-left: 2.5rem;
}
.terms-list > .terms-section::before {
  content: counter(term-counter) ".";
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-weight: 700;
  font-size: 1.25rem;
}

/* ===============================
   Contest Slider – Full CSS
   =============================== */
#contestHeroSection {
  min-height: 300px;
}

.contest-slider-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding: 2rem 0;
}
.contest-slider-wrapper h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 2rem;
}
.contest-slider-wrapper .contest-slider-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: transform 0.5s ease;
  justify-content: center;
}
.contest-slider-wrapper .contest-card {
  flex: 0 0 280px;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0.7;
  transform: scale(0.9);
}
.contest-slider-wrapper .contest-card img {
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
.contest-slider-wrapper .contest-card .card-body {
  padding: 1rem;
}
.contest-slider-wrapper .contest-card .card-body h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contest-slider-wrapper .contest-card .card-body p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.contest-slider-wrapper .contest-card .card-body .btn-primary {
  background-color: #09083a;
  border-color: #09083a;
  color: #fff;
  width: 100%;
}
.contest-slider-wrapper .contest-card .card-body .btn-primary:hover {
  background-color: #0d0c55;
  border-color: #0d0c55;
}
.contest-slider-wrapper .contest-card.active {
  transform: scale(1.15);
  opacity: 1;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.contest-slider-wrapper .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(9, 8, 58, 0.85);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.contest-slider-wrapper .slider-btn:hover {
  background-color: rgb(9, 8, 58);
}
.contest-slider-wrapper .slider-btn.slider-btn-prev {
  left: 0.5rem;
}
.contest-slider-wrapper .slider-btn.slider-btn-next {
  right: 0.5rem;
}
@media (max-width: 992px) {
  .contest-slider-wrapper .contest-card {
    flex: 0 0 240px;
  }
  .contest-slider-wrapper .contest-card.active {
    transform: scale(1.1);
  }
}
@media (max-width: 768px) {
  .contest-slider-wrapper .contest-card {
    flex: 0 0 200px;
  }
  .contest-slider-wrapper .contest-card.active {
    transform: scale(1.05);
  }
}

/* Contest Hero container text centering */
.contest-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.contest-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.contest-hero h1 {
  margin-top: 0;
}

.site-footer {
  position: relative;
  background: #111827;
  color: #f3f4f6;
  font-family: "Inter", sans-serif;
  padding-top: 2rem;
  /* === Yellow Triangle Decoration === */
}
.site-footer .footer-container {
  position: relative; /* keep content above triangle */
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.site-footer .footer-brand .footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.site-footer .footer-brand .footer-tagline {
  font-size: 0.9rem;
  color: #9ca3af;
}
.site-footer .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-links ul:not(.dropdown-menu) {
  display: grid;
}
.site-footer .footer-links ul {
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-rows: repeat(4, auto);
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
@media (max-width: 992px) {
  .site-footer .footer-links ul {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}
@media (max-width: 600px) {
  .site-footer .footer-links ul {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: 0.5rem;
  }
}
.site-footer .footer-links li {
  margin-bottom: 0.35rem;
  width: auto;
}
.site-footer .footer-links a {
  display: inline-block;
  width: auto;
  font-size: 0.95rem;
  color: #f3f4f6;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.site-footer .footer-links a:hover {
  color: #80f9c0;
}
.site-footer .footer-contact h4 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #ffffff;
}
.site-footer .footer-contact p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #d1d5db;
}
.site-footer .footer-contact .footer-social {
  margin-top: 0.5rem;
}
.site-footer .footer-contact .footer-social a {
  font-size: 1.25rem;
  color: #f3f4f6;
  margin-right: 0.75rem;
  transition: color 0.2s ease-in-out;
}
.site-footer .footer-contact .footer-social a:hover {
  color: #80f9c0;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: #9ca3af;
}

.fullwidth-banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.fullwidth-banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.fullwidth-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullwidth-banner .banner-text {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  padding: 0 1rem;
}

.learning-section {
  justify-content: space-evenly;
  padding: 4rem 2rem;
  min-height: 300px;
  position: relative;
}
.learning-section .learning-card {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  font-family: Arial, sans-serif;
  margin-bottom: 16px;
  padding: 0 !important;
}
.learning-section .learning-card .card-left {
  flex: 0 0 40%;
}
.learning-section .learning-card .card-left img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.learning-section .learning-card .card-middle {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.learning-section .learning-card .card-middle .card-label {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.25rem;
}
.learning-section .learning-card .card-middle .card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ff6600;
  margin-bottom: 6px;
}
.learning-section .learning-card .card-middle .card-description,
.learning-section .learning-card .card-middle .card-attempts {
  font-size: 14px;
  color: #555;
  margin: 2px 0;
}
.learning-section .learning-card .card-middle .card-requirement {
  font-size: 12px;
  font-style: italic;
  color: #888;
  margin-bottom: 8px;
}
.learning-section .learning-card .card-middle .card-score {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}
.learning-section .learning-card .card-middle .start-button {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s;
}
.learning-section .learning-card .card-middle .start-button.green {
  background-color: #a5e214;
  color: #000;
}
.learning-section .learning-card .card-middle .start-button.green:hover {
  background-color: #92c511;
}
.learning-section .learning-card .card-middle .start-button.orange {
  background-color: #ff9900;
  color: white;
}
.learning-section .learning-card .card-middle .start-button.orange:hover {
  background-color: #e48000;
}
.learning-section .learning-card .card-middle .start-button.resume {
  background-color: #f4c542;
  color: #333;
}
.learning-section .learning-card .card-middle .start-button.resume:hover {
  background-color: #e0b636;
}
.learning-section .learning-card .card-middle .btn.download-cert {
  display: inline-block;
  background: #eefae4;
  color: #2c7b00;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  margin-top: auto;
  border: 1px solid #a5e214;
}
.learning-section .learning-card .card-right {
  flex: 0 0 30px;
  background: #e5e5e5;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  letter-spacing: 0.6px;
  padding: 8px 4px;
}
.learning-section .learning-card .card-right.complete {
  background-color: #80c342 !important;
  color: white;
}
.learning-section .learning-card .card-right.incomplete {
  background-color: #e5e5e5;
  color: #333;
}

@media (max-width: 1024px) {
  .learning-section {
    padding: 2rem;
  }
  .learning-section .learning-card {
    flex-direction: column;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .learning-section .learning-card .card-left {
    width: 100%;
    height: auto;
  }
  .learning-section .learning-card .card-left img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .learning-section .learning-card .card-middle {
    padding: 1.25rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
  }
  .learning-section .learning-card .card-middle .card-title {
    font-size: 1.3rem;
    color: #ff6600;
    margin-bottom: 0.5rem;
  }
  .learning-section .learning-card .card-middle .card-description,
  .learning-section .learning-card .card-middle .card-attempts {
    font-size: 0.95rem;
    margin: 0.2rem 0;
  }
  .learning-section .learning-card .card-middle .card-requirement {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: #777;
  }
  .learning-section .learning-card .card-middle .start-button {
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: 25px;
  }
  .learning-section .learning-card .card-right {
    writing-mode: horizontal-tb;
    border-left: none;
    border-top: 1px solid #ccc;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
    justify-content: center;
    background: #f0f0f0;
  }
}
.learning-card.border-success {
  border: 2px solid #80c342;
}

/* ============ Each Question as a Card ============ */
.sortable-block {
  background: #f9fafc;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s ease;
}
.sortable-block:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.sortable-block {
  /* Question text (the label) */
}
.sortable-block > .d-flex > label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0rem;
}
.sortable-block {
  /* Answers list */
}
.sortable-block .form-check {
  margin-bottom: 0.5rem;
}
.sortable-block .form-check .form-check-input {
  margin-right: 0.5rem;
}

/* Submit / pagination buttons */
.form-button--next,
.form-button--prev {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border-radius: 4px;
}

.form-button--next.btn-primary {
  background-color: #308478;
  border: none;
}
.form-button--next.btn-primary:hover {
  background-color: #246c61;
}

/* legacy incomplete modal styles intentionally retired in favor of #submitProgressModal */
/* =========================
   Media Library Page
   ========================= */
/* =========================
   Media Library Page
   ========================= */
.media-library {
  padding: 2rem;
  position: relative;
  padding-top: 3rem;
  min-height: 300px;
}
.media-library .library-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #333;
}
.media-library .media-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  min-height: 300px;
}
.media-library .media-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out;
}
.media-library .media-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.media-library .media-card .media-thumb {
  position: relative;
}
.media-library .media-card .media-thumb .media-image {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.media-library .media-card .media-thumb .video-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 0.5rem;
}
.media-library .media-card .media-content {
  flex: 1;
  padding: 1rem;
}
.media-library .media-card .media-content .media-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.media-library .media-card .media-content .media-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.media-library .media-card .media-content .media-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.media-library .media-card .media-content .media-meta {
  font-size: 0.8rem;
  color: #888;
}
.media-library .media-card .media-content .media-meta .media-date {
  font-style: italic;
}
.media-library .media-card .media-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.media-library .media-card .media-actions a,
.media-library .media-card .media-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.media-library .media-card .media-actions .btn-download {
  background: #374955;
  color: #fff;
}
.media-library .media-card .media-actions .btn-download:hover {
  background: rgb(44.9821428571, 59.7035714286, 69.5178571429);
}
.media-library .media-card .media-actions .btn-edit {
  background: #308478;
  color: #fff;
}
.media-library .media-card .media-actions .btn-edit:hover {
  background: rgb(41.2, 113.3, 103);
}
.media-library .media-card .media-actions .btn-delete {
  background: #ff7e80;
  color: #fff;
}
.media-library .media-card .media-actions .btn-delete:hover {
  background: rgb(255, 100.5, 102.8953488372);
}

.media-grid:not(:has(.media-card:not(.template))) {
  display: none;
}

.contest-slider-wrapper:not(:has(.contest-card:not(.template))) {
  display: none;
}

.contest-widget {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  overflow: hidden;
}
.contest-widget .contest-widget-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.contest-widget .contest-widget-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.contest-widget .contest-widget-info .contest-widget-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #374955;
  margin-bottom: 0.25rem;
}
.contest-widget .contest-widget-info .contest-widget-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.contest-widget .contest-widget-info .btn {
  align-self: flex-start;
  background-color: #ff7e80;
  border: none;
  font-weight: 600;
}
.contest-widget .contest-widget-info .btn:hover {
  background-color: rgb(255, 95.4, 97.8744186047);
}
.contest-widget .contest-widget-cards {
  gap: 1.25rem;
  justify-content: flex-end;
}
.contest-widget .contest-widget-cards .contest-card {
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 1 calc(50% - 0.75rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contest-widget .contest-widget-cards .contest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contest-widget .contest-widget-cards .contest-card .contest-card-image {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/9;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .contest-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374955;
  margin-bottom: 0.25rem;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .contest-card-date {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .btn-outline-primary {
  color: #308478;
  border-color: #308478;
  font-weight: 600;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .btn-outline-primary:hover {
  background-color: #308478;
  color: #fff;
}
@media (max-width: 992px) {
  .contest-widget .contest-widget-cards {
    justify-content: center;
  }
  .contest-widget .contest-widget-cards .contest-card {
    flex: 0 1 100%;
  }
}

.rebates-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.rebates-section .rebate-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  width: 40%;
  position: relative;
}
.rebates-section .rebate-card .rebate-hero-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.rebates-section .rebate-card .rebate-hero-card .hero-img-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
}
.rebates-section .rebate-card .rebate-hero-card .hero-img-thumb {
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.rebates-section .rebate-card .rebate-hero-card .rebate-overlay-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff7e80;
  color: #fff;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: 700;
  z-index: 5;
  font-size: 0.95rem;
}
.rebates-section .rebate-card .rebate-content {
  padding: 1.5rem;
}
.rebates-section .rebate-card .rebate-content .rebate-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.rebates-section .rebate-card .rebate-content .rebate-summary {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 1rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-dates {
  font-size: 0.9rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-dates .label {
  font-weight: 600;
  margin-right: 0.25rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-cta {
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  background: #ff7e80;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-cta:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .rebate-card {
    width: 100%;
  }
  .rebate-card .rebate-hero {
    flex-direction: column;
    height: auto;
  }
  .rebate-card .rebate-hero .hero-img-group {
    width: 100%;
  }
  .rebate-card .rebate-hero .hero-img-thumb {
    width: 75px;
    height: 75px;
  }
}
.rebate-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.rebate-hero .rebate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.rebate-hero .rebate-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #fff;
  gap: 30px;
}
.rebate-hero .rebate-hero-inner .rebate-header-top {
  text-align: left;
  width: 100%;
}
.rebate-hero .rebate-hero-inner .rebate-header-top .rebate-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.rebate-hero .rebate-hero-inner .rebate-header-top .rebate-dates {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}
.rebate-hero .rebate-hero-inner .rebate-columns {
  display: flex;
  width: 100%;
  gap: 40px;
}
@media (max-width: 992px) {
  .rebate-hero .rebate-hero-inner .rebate-columns {
    flex-direction: column;
    gap: 30px;
  }
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left {
  width: 30%;
  justify-items: left;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual {
    flex-direction: column;
    gap: 30px;
  }
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group {
  flex: 1;
  text-align: center;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .label {
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .rebate-product-details {
  text-align: left;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .rebate-thumb {
  width: 250px;
  height: 250px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.062745098);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-divider {
  font-size: 1.25rem;
  font-weight: 700;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-right {
  flex: 1;
  background: #ffffff;
  color: #000;
  border-radius: 12px;
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto;
  align-self: flex-start;
}

#rebateFormContainer {
  display: none;
}

.rebate-summary-line {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}

.rebate-columns {
  display: flex;
  gap: 40px;
  width: 100%;
  margin-top: 35px;
}

.rebate-distributor-top {
  width: 100%;
  margin-top: 20px;
}

/* HORIZONTAL CARD STACK - MEDIUM OVERLAP + HOVER SLIDE */
.horizontal-stack {
  position: relative;
  height: 220px;
  width: auto;
  margin-top: 20px;
}
.horizontal-stack .thumb-wrapper {
  position: absolute;
  top: 0;
  transition: transform 0.35s ease, z-index 0.35s ease;
  cursor: pointer;
}
.horizontal-stack .rebate-thumb {
  width: 200px !important;
  height: 200px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #111 !important;
  border: none !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease;
}
.horizontal-stack {
  /* Positioning based on index */
}
.horizontal-stack .thumb-wrapper[data-i="0"] {
  left: 0px;
  z-index: 4;
}
.horizontal-stack .thumb-wrapper[data-i="1"] {
  left: 50px;
  z-index: 3;
}
.horizontal-stack .thumb-wrapper[data-i="2"] {
  left: 100px;
  z-index: 2;
}
.horizontal-stack .thumb-wrapper[data-i="3"] {
  left: 150px;
  z-index: 1;
}
.horizontal-stack .thumb-wrapper[data-i="4"] {
  left: 200px;
  z-index: 0;
}
.horizontal-stack .thumb-wrapper:hover {
  transform: translate(-25px, -10px) scale(1.05);
  z-index: 99;
}

.rebate-divider {
  position: relative;
  z-index: 0;
  margin: 30px 0;
}

@media (max-width: 768px) {
  .horizontal-stack {
    height: auto;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .horizontal-stack .thumb-wrapper {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
  .horizontal-stack .rebate-thumb {
    width: 150px;
    height: 150px;
  }
}
.rebate-inline-and {
  text-align: left;
  font-weight: 700;
  margin: 4px 0 8px 0;
  color: #fff;
  opacity: 0.85;
}

.login-box::-moz-placeholder {
  color: #fff !important;
  opacity: 1;
}

.login-box::placeholder {
  color: #fff !important;
  opacity: 1;
}

.navbar-brand img {
  width: auto;
}

/* ========================================
   ADMIN NAVBAR 
======================================== */
.admin-navbar {
  height: 64px;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.admin-navbar .container-fluid {
  height: 100%;
  display: flex;
  align-items: center;
}

/* -------------------------------
   Logo Scaling
-------------------------------- */
.admin-navbar-logo-img {
  height: 48px;
  width: auto;
}

/* -------------------------------
   Right-side controls
-------------------------------- */
.admin-navbar-controls {
  display: flex;
  align-items: center;
}
.admin-navbar-controls > * {
  margin-left: 0.75rem;
}
.admin-navbar-controls .btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* -------------------------------
   Notification Bell + Dropdown
-------------------------------- */
.admin-navbar .notification-bell {
  top: 4.5rem !important;
}

/* -------------------------------
   Profile Icon
-------------------------------- */
#profileDropdown i {
  font-size: 24px;
}

.coming-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.coming-soon-overlay span {
  font-size: 2rem;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tab-pane {
  position: relative; /* ensures overlay is contained */
}

.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  pointer-events: all; /* overlay catches interaction */
}
.coming-soon-overlay span {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
}

/* ==========================================================
   THEME VARIABLES (LIGHT + DARK MODE)
   ========================================================== */
:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --card-border: #dce3ea;
  --text: #374955;
  --text-soft: #7a8790;
  --shadow: 0 8px 18px rgba(0,0,0,0.06);
  --accent-pink: #ff7e80;
  --accent-teal: #308478;
  --hero-bg-1: #ffffff;
  --hero-bg-2: #edf1f7;
}

/* LIGHT MODE */
body.theme-light {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --card-border: #dce3ea;
  --text: #374955;
  --text-soft: #7a8790;
  --shadow: 0 8px 18px rgba(0,0,0,0.06);
  --accent-pink: #ff7e80;
  --accent-teal: #308478;
  --hero-bg-1: #ffffff;
  --hero-bg-2: #edf1f7;
}

/* DARK MODE */
body.theme-dark {
  --bg: #1e2429;
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.10);
  --text: #e5e9ee;
  --text-soft: #a3b0bb;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --accent-pink: #ff7e80;
  --accent-teal: #80f9c0;
  --hero-bg-1: #181c20;
  --hero-bg-2: #111416;
}

/* Smooth theme switching */
body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
  font-family: system-ui, sans-serif;
}

:root {
  --rebate-primary: #2f855a;
}

.rebate-upload-shell {
  margin-top: 2rem;
}

.rebate-step-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Main white card */
.rebate-upload-card-simple {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.rebate-upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 1.75rem;
}
@media (max-width: 768px) {
  .rebate-upload-layout {
    grid-template-columns: 1fr;
  }
}

.rebate-upload-input {
  display: none;
}

/* Dashed box */
.rebate-dropzone-wrapper {
  width: 100%;
}

.rebate-dropzone-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 16px;
  border: 2px dashed #9ca3af;
  background: #f9fafb;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  height: -webkit-fill-available;
  transition: all 0.16s ease-out;
}
.rebate-dropzone-simple:hover, .rebate-dropzone-simple:focus-within {
  border-color: var(--rebate-primary);
  background: #effdf6;
  box-shadow: 0 6px 16px rgba(47, 133, 90, 0.2);
}

.rebate-dropzone-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(47, 133, 90, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rebate-dropzone-icon i {
  font-size: 1.4rem;
  color: var(--rebate-primary);
}

.rebate-dropzone-text {
  display: flex;
  flex-direction: column;
}

.rebate-dropzone-main {
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

.rebate-dropzone-meta {
  font-size: 0.8rem;
  color: #6b7280;
}

.rebate-upload-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.rebate-receipt-thumb {
  align-self: start;
}

.rebate-receipt-thumb-inner {
  width: 110px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 10px 8px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.rebate-receipt-line {
  height: 6px;
  border-radius: 4px;
  background: #d1d5db;
  margin-bottom: 5px;
}
.rebate-receipt-line.short {
  width: 70%;
}

.rebate-upload-tips {
  font-size: 0.84rem;
  color: #4b5563;
}
.rebate-upload-tips .rebate-upload-tip-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rebate-upload-tips ul {
  padding-left: 1.1rem;
  margin: 0;
}
.rebate-upload-tips li + li {
  margin-top: 0.12rem;
}

.rebate-upload-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.rebate-primary-btn {
  border: none;
  background: var(--rebate-primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  min-width: 190px;
  transition: background 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.05s ease-out;
}
.rebate-primary-btn:hover {
  background: #276749;
  box-shadow: 0 8px 18px rgba(39, 103, 73, 0.35);
  transform: translateY(-1px);
}
.rebate-primary-btn:active {
  background: #22543d;
  box-shadow: none;
  transform: translateY(0);
}

.rebate-upload-status {
  font-size: 0.83rem;
  min-height: 1.1em;
}
.rebate-eligible-preview {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem 1.1rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.rebate-eligible-preview .rebate-eligible-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.rebate-eligible-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.rebate-eligible-section-title {
  font-weight: 700;
  margin: 0 0 10px 0;
}

#rebateUploadCard .rebate-upload-status#rebateUploadStatus {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f7f9fc;
  color: #223;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-info {
  background: #eef6ff;
  border-color: rgba(20, 90, 160, 0.25);
  color: #0b2b4a;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-success {
  background: #eefaf3;
  border-color: rgba(35, 140, 90, 0.25);
  color: #0f3b27;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-error {
  background: #fff0f1;
  border-color: rgba(190, 30, 45, 0.25);
  color: #5b1217;
}

.rebate-eligible-card {
  flex: 1 1 100%;
  border-radius: 14px;
  width: 95%;
  padding: 0.75rem 0.85rem;
  background: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.8);
  cursor: pointer;
  transition: all 0.16s ease-out;
}
.rebate-eligible-card:hover {
  border-color: var(--rebate-primary);
  background: #effdf6;
  box-shadow: 0 4px 10px rgba(47, 133, 90, 0.18);
}
.rebate-eligible-card.selected {
  border-color: var(--rebate-primary);
  background: #e6fbf1;
  box-shadow: 0 0 0 1px rgba(47, 133, 90, 0.6), 0 6px 14px rgba(47, 133, 90, 0.25);
}
.rebate-eligible-card.rebate-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rebate-eligible-card.rebate-disabled:hover {
  transform: none;
  box-shadow: none;
}

.rebate-eligible-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.rebate-eligible-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #374151;
  background: #dcfce7;
}

.rebate-card-selected-tag {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(22, 101, 52);
  font-weight: 700;
  font-size: 0.85rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

.rebate-eligible-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.rebate-eligible-summary {
  font-size: 0.8rem;
  color: #6b7280;
}

.rebate-step-actions .btn {
  min-width: 130px;
}

.rebate-purchases-shell {
  max-width: 1000px;
  margin: 0 auto;
}

.rebate-step-subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 1.25rem;
}

.rebate-summary-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 18px 40px rgba(15, 35, 52, 0.08);
  margin-bottom: 1.5rem;
}

.rebate-summary-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .rebate-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rebate-summary-item {
  min-width: 0;
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.summary-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.summary-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.rebate-items-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.rebate-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.rebate-items-header .items-header-title {
  font-size: 1rem;
  font-weight: 600;
}

.rebate-add-item-btn {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: #e0f2fe;
  color: #1d4ed8;
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.05s ease-out;
}
.rebate-add-item-btn:hover {
  background: #bfdbfe;
  transform: translateY(-1px);
}

.rebate-items-table {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.rebate-items-table-head,
.rebate-items-row {
  display: grid;
  grid-template-columns: 3.5fr 0.9fr 1.3fr 1.3fr 40px;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  align-items: center;
}

.rebate-items-table-head {
  background: #f9fafb;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.rebate-items-table-body {
  max-height: 320px;
  overflow-y: auto;
}

.rebate-items-row {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.rebate-items-row:nth-child(odd) {
  background: #ffffff;
}
.rebate-items-row:nth-child(even) {
  background: #f9fafb;
}

/* Inputs */
.rebate-item-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0.3rem 0.5rem;
  font-size: 0.88rem;
}
.rebate-item-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.rebate-item-remove {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}
.rebate-item-remove:hover {
  color: #ef4444;
}

.rebate-items-empty {
  padding: 0.7rem 0.9rem 0.8rem;
  font-size: 0.85rem;
  color: #6b7280;
  display: none;
}

.rebate-items-note {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: #6b7280;
}

.rebate-wizard .rebate-steps-bar {
  display: flex;
  align-items: stretch;
  background: #0b3a2f;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  overflow: hidden;
}
.rebate-wizard .rebate-step-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rebate-wizard .rebate-step-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.rebate-wizard .rebate-step-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab.is-complete {
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab:disabled {
  opacity: 0.4;
  cursor: default;
}
.rebate-wizard .rebate-step-tab .step-status {
  display: flex;
  align-items: center;
}
.rebate-wizard .rebate-step-tab .step-circle {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem;
}
.rebate-wizard .rebate-step-tab.is-active .step-circle, .rebate-wizard .rebate-step-tab.is-complete .step-circle {
  border-color: #7fd9a3;
  background: #7fd9a3;
}
.rebate-wizard .rebate-step-tab .step-index,
.rebate-wizard .rebate-step-tab .step-check {
  font-size: 0.75rem;
  line-height: 1;
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab .step-check {
  display: none;
}
.rebate-wizard .rebate-step-tab.is-complete .step-check {
  display: inline;
}
.rebate-wizard .rebate-step-tab.is-complete .step-index {
  display: none;
}
.rebate-wizard .rebate-step-tab .step-label {
  white-space: nowrap;
}

.rebate-step1-nudge {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rebate-step1-nudge__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25, 135, 84, 0.14);
  flex: 0 0 auto;
}
.rebate-step1-nudge__icon i {
  font-size: 18px;
}
.rebate-step1-nudge__content {
  flex: 1 1 auto;
  min-width: 0;
}
.rebate-step1-nudge__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.rebate-step1-nudge__text {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.25;
}
.rebate-step1-nudge__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  opacity: 0.9;
  flex: 0 0 auto;
  display: none;
}

#rebateStep1NextBtn.is-attention {
  position: relative;
  animation: rebatePulse 1.4s ease-in-out infinite;
}
#rebateStep1NextBtn.is-attention:focus, #rebateStep1NextBtn.is-attention:hover {
  animation: none;
}

@keyframes rebatePulse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.rebate-receipts-list-wrap {
  margin-top: 14px;
  padding-top: 8px;
}

.rebate-receipts-list-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.rebate-receipts-list-title {
  font-weight: 700;
}

.rebate-receipts-list-subtitle {
  font-size: 0.92rem;
  opacity: 0.8;
}

.rebate-receipts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rebate-receipt-row {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.rebate-receipt-row:hover {
  border-color: rgba(0, 0, 0, 0.22);
}
.rebate-receipt-row.is-active {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}
.rebate-receipt-row__left {
  flex: 1 1 auto;
  min-width: 0;
}
.rebate-receipt-row__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rebate-receipt-row__meta {
  font-size: 0.92rem;
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rebate-receipt-row__right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rebate-receipt-row__btn {
  border: none;
  background: transparent;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
}
.rebate-receipt-row__btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rebate-pill {
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}
.rebate-pill.is-success {
  border-color: rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.1);
}
.rebate-pill.is-error {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.1);
}
.rebate-pill.is-info {
  border-color: rgba(13, 202, 240, 0.25);
  background: rgba(13, 202, 240, 0.12);
}

.rb-why-eligible {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rb-why-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.rb-why-items {
  margin: 0;
  padding-left: 18px;
}

.rb-why-items li {
  margin: 4px 0;
  font-size: 13px;
}

.rb-meta {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #64748b;
}

/* ============================= */
/* Rebate Card Layout            */
/* ============================= */
.rebate-card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.rebate-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f6f8;
}
.rebate-card-image .rebate-image {
  max-width: 300px;
}

.rebate-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ============================= */
/* Right-side content            */
/* ============================= */
.rebate-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rebate-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rebate-card-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.rebate-card-summary {
  font-size: 0.9rem;
  color: #5f6b7a;
}

.rebate-card-reward {
  font-weight: 600;
}

/* ============================= */
/* Qualifying items              */
/* ============================= */
.rebate-card-qualifies {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rebate-card-qualifies-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.rebate-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rebate-card-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.rebate-card-item-icon {
  font-size: 1rem;
  line-height: 1.2;
}

.rebate-card-item-name {
  font-size: 0.9rem;
}

.rebate-card-item-code {
  font-size: 0.8rem;
  color: #6b7280;
}

.rb-rebate-card .rebate-card-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rb-rebate-card .rebate-card-top .rb-rebate-card-select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.rb-rebate-card .rebate-card-top .rb-rebate-card-select {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border-bottom: 2px dashed green;
  padding-bottom: 1rem;
}

.rb-rebate-card-select {
  position: relative;
}

.rebate-eligible-card.selected .rb-rebate-card-select::after {
  content: "✓\aRebate selected";
  white-space: pre;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.95);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.45);
  pointer-events: none;
  z-index: 5;
}

.rb-rebate-card .rebate-card-bottom {
  width: 100%;
}

@media (max-width: 768px) {
  .rb-rebate-card .rebate-card-top .rb-rebate-card-select {
    grid-template-columns: 1fr;
  }
}
.rb-receipt-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  margin: 10px 0 8px;
}

.rb-receipt-summary-file {
  font-weight: 700;
}

.rb-receipt-summary-meta {
  display: flex;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

.rb-receipt-summary-total {
  font-weight: 700;
}

.rb-promo-receipt-group {
  padding-bottom: 10px;
}

.rb-receipt-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin: 12px 0 6px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid #22c55e;
  border-radius: 8px;
}

.rb-receipt-summary-file {
  font-weight: 700;
  font-size: 14px;
}

.rb-receipt-summary-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
}

.rb-receipt-summary-total {
  font-weight: 700;
  font-size: 14px;
}

.rb-promo-receipt-group .rebate-items-row {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px dashed rgba(15, 23, 42, 0.08);
}

.rb-promo-context-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.rb-promo-receipts-summary {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.rb-promo-receipts-summary__title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.rb-promo-receipts-summary__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rb-promo-receipt-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid rgba(34, 197, 94, 0.9);
  border-radius: 10px;
}

.rb-promo-receipt-chip__label {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.1;
}

.rb-promo-receipt-chip__meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rb-dot {
  opacity: 0.65;
}

.rb-promo-receipt-chip__total {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
}

.rb-typeahead-menu {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  max-height: 240px;
  overflow: auto;
  padding: 6px;
}

.rb-typeahead-item {
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.rb-typeahead-item:hover {
  background: rgba(15, 23, 42, 0.06);
}

.rb-typeahead-name {
  font-weight: 700;
}

.rb-typeahead-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.rb-typeahead-empty {
  padding: 10px;
  opacity: 0.7;
}

.rb-typeahead-menu {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}

.rb-typeahead-item {
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.rb-typeahead-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rb-typeahead-name {
  font-weight: 600;
  line-height: 1.2;
}

.rb-typeahead-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.rb-typeahead-empty {
  padding: 10px;
  font-size: 13px;
  opacity: 0.7;
}

#rbStep2TotalsSummary {
  display: none;
}

#rbStep2ReceiptsHome {
  display: none;
}

.navbar-receipt {
  height: 54px;
  width: 100%;
  background: linear-gradient(180deg, #0f5e5f 0%, #0b4f50 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-receipt__inner {
  height: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-receipt__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.navbar-receipt__logo {
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}
.navbar-receipt__nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.navbar-receipt__link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  padding: 8px 6px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar-receipt__link:hover, .navbar-receipt__link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
@media (max-width: 520px) {
  .navbar-receipt__inner {
    padding: 0 12px;
  }
  .navbar-receipt__nav {
    gap: 14px;
  }
  .navbar-receipt__link {
    font-size: 13px;
  }
}

.hero-receipt {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-receipt__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.38) 70%), url(/bank/content/images/Blog-image-Multi-Level-Garden-Design.jpg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero-receipt__content {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 20px 40px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-receipt__title {
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 4.5vw, 58px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero-receipt__subtitle {
  max-width: 640px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 28px;
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-receipt__actions {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-receipt__cta {
  width: 100%;
  max-width: 320px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #57b861;
  color: #ffffff;
  padding: 18px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transition: background 0.15s ease, transform 0.08s ease;
}
.hero-receipt__cta:hover, .hero-receipt__cta:focus-visible {
  background: #4aa954;
  outline: none;
}
.hero-receipt__cta:active {
  transform: translateY(1px);
}
.hero-receipt__cta-icon {
  margin-left: 10px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
}
.hero-receipt__cta-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.hero-receipt__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(0, 0, 0, 0.75);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  max-width: 260px;
  transition: background 0.15s ease;
}
.hero-receipt__secondary:hover, .hero-receipt__secondary:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  outline: none;
}
.hero-receipt .hero-receipt__partners {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.hero-receipt .hero-receipt__partners-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.hero-receipt .hero-receipt__partners-inner img {
  height: 75px;
  max-height: 75px;
  width: auto;
  display: block;
  opacity: 1;
  filter: none;
}
.hero-receipt .hero-receipt__terms {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.65);
}
.hero-receipt .hero-receipt__terms:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .hero-receipt .hero-receipt__partners-inner {
    gap: 28px;
  }
  .hero-receipt .hero-receipt__partners-inner img {
    height: 36px;
    max-height: 36px;
  }
}
@media (max-width: 560px) {
  .hero-receipt .hero-receipt__partners-inner {
    padding: 16px 16px;
    gap: 20px;
  }
  .hero-receipt .hero-receipt__partners-inner img {
    height: 26px;
    max-height: 26px;
  }
}

.rb-view-hidden {
  display: none !important;
}

@media (max-width: 680px) {
  .rebate-wizard .rebate-steps-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    scrollbar-width: none;
  }
  .rebate-wizard .rebate-steps-bar::-webkit-scrollbar {
    display: none;
  }
  .rebate-wizard .rebate-step-tab {
    flex: 0 0 auto;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
  }
  .rebate-wizard .rebate-step-tab .step-label {
    white-space: nowrap;
    font-size: 0.82rem;
  }
  .rebate-wizard .rebate-step-tab .step-circle {
    width: 22px;
    height: 22px;
    margin-right: 0.2rem;
  }
  .rebate-wizard .rebate-step-tab:not(:last-child)::after {
    top: 30%;
    bottom: 30%;
  }
}

.rebate-thank-you {
  background: #f6fafc;
}
.rebate-thank-you-card {
  max-width: 720px;
  background: #ffffff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.rebate-thank-you-icon {
  font-size: 3rem;
  color: #2f8f6b;
  margin-bottom: 1rem;
}
.rebate-thank-you-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.rebate-thank-you-lead {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 2rem;
}
.rebate-thank-you-processing-note {
  color: #666;
  margin-bottom: 2.5rem;
}
.rebate-thank-you-actions .btn {
  min-width: 180px;
}
.rebate-thank-you .rebate-confirmation-box {
  border: 1px dashed #cfe6dd;
  background: #f2fbf7;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b7f6c;
  margin-bottom: 0.5rem;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-code {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1f5f4a;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-note {
  font-size: 0.85rem;
  color: #6b8f82;
  margin-top: 0.25rem;
}

/* =====================================================
   REBATE UPLOAD ENHANCEMENTS - FIXED
   Bold spinner overlay + improved status messages
   ===================================================== */
/* -----------------------------------------------------
   1. FULL-CARD LOADING OVERLAY
   ----------------------------------------------------- */
.rebate-upload-card-simple {
  position: relative;
}

.rebate-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-radius: inherit;
  padding: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rebate-overlay-spinner {
  width: 80px;
  height: 80px;
  border: 6px solid #e9ecef;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: rebate-spin 0.9s linear infinite;
}

@keyframes rebate-spin {
  to {
    transform: rotate(360deg);
  }
}
.rebate-overlay-title {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
  line-height: 1.3;
}

.rebate-overlay-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #6c757d;
  margin: 0;
  max-width: 360px;
}

.rebate-overlay-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.rebate-overlay-progress-dot {
  width: 10px;
  height: 10px;
  background: #0d6efd;
  border-radius: 50%;
  animation: rebate-pulse 1.2s ease-in-out infinite;
}

@keyframes rebate-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}
/* -----------------------------------------------------
   2. ENHANCED STATUS MESSAGES
   ----------------------------------------------------- */
.rebate-upload-status {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: all 0.25s ease;
}
.rebate-upload-status:empty, .rebate-upload-status[hidden] {
  display: none !important;
}
.rebate-upload-status:not(:empty) {
  display: block;
}
.rebate-upload-status.is-info {
  background: linear-gradient(135deg, #e7f1ff 0%, #d0e3ff 100%);
  border: 2px solid #0d6efd;
  color: #084298;
}
.rebate-upload-status.is-info::before {
  content: "ℹ️ ";
}
.rebate-upload-status.is-info.is-processing {
  animation: rebate-status-pulse 2s ease-in-out infinite;
}
.rebate-upload-status.is-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
  border: 2px solid #198754;
  color: #0f5132;
}
.rebate-upload-status.is-success::before {
  content: "✅ ";
}
.rebate-upload-status.is-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
  border: 2px solid #dc3545;
  color: #842029;
}
.rebate-upload-status.is-error::before {
  content: "⚠️ ";
}

@keyframes rebate-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}
/* -----------------------------------------------------
   3. STEP 1 NUDGE ENHANCEMENTS
   ----------------------------------------------------- */
#rebateStep1Nudge {
  padding: 20px 24px;
  border-radius: 14px;
  margin-top: 20px;
  border-width: 2px;
  border-style: solid;
}

#rebateStep1Nudge.is-info {
  background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
  border-color: #0d6efd;
}

#rebateStep1Nudge.is-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
  border-color: #198754;
}

#rebateStep1Nudge.is-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
  border-color: #dc3545;
}

#rebateStep1NudgeTitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#rebateStep1NudgeText {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
}

/* -----------------------------------------------------
   4. RECEIPT ROW STATUS PILLS (enhanced)
   ----------------------------------------------------- */
.rebate-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rebate-pill.is-info {
  background: #0d6efd;
  color: #fff;
  animation: rebate-pill-pulse 1.5s ease-in-out infinite;
}
.rebate-pill.is-success {
  background: #198754;
  color: #fff;
}
.rebate-pill.is-error {
  background: #dc3545;
  color: #fff;
}

@keyframes rebate-pill-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.rebate-upload-card-simple.is-uploading .rebate-upload-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rebate-upload-card-simple {
  /* -----------------------------------------------------
     5. DISABLED CARD STATE (email gate)
     ----------------------------------------------------- */
}
.rebate-upload-card-simple[aria-disabled=true] .rebate-dropzone-simple {
  pointer-events: none;
  cursor: not-allowed;
}
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView {
  pointer-events: auto;
  opacity: 1;
}
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView input,
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView button {
  pointer-events: auto;
}

/* =====================================================
   STEP 1 VALIDATION STYLES
   Add these to your existing CSS
   ===================================================== */
/* -----------------------------------------------------
   Missing field indicators
   ----------------------------------------------------- */
/* Field wrapper when missing */
.rb-meta-field.is-missing input {
  border-color: #dc3545 !important;
  background-color: #fff8f8;
}

.rb-meta-field.is-missing input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
  background-color: #fff;
}

/* "Required" badge next to input */
.rb-field-required {
  display: inline-block;
  color: #dc3545;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  vertical-align: middle;
}

/* Warning indicator on row title */
.rb-row-warning {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #dc3545;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 6px;
}

/* Receipt row with missing fields */
.rebate-receipt-row.has-missing-fields {
  border-color: rgba(220, 53, 69, 0.3);
  background: linear-gradient(135deg, #fff 0%, #fff8f8 100%);
}

.rebate-receipt-row.has-missing-fields:hover {
  border-color: rgba(220, 53, 69, 0.5);
}

/* -----------------------------------------------------
   Better meta field layout
   ----------------------------------------------------- */
.rb-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.rb-meta-field strong {
  white-space: nowrap;
}

/* -----------------------------------------------------
   Pulse animation on Continue button when ready
   ----------------------------------------------------- */
#rebateStep1NextBtn:not(:disabled) {
  animation: step1-ready-pulse 2s ease-in-out infinite;
}

#rebateStep1NextBtn:not(:disabled):hover {
  animation: none;
}

@keyframes step1-ready-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}
/* -----------------------------------------------------
   Enhanced disabled button state
   ----------------------------------------------------- */
#rebateStep1NextBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* -----------------------------------------------------
   Error nudge enhancement
   ----------------------------------------------------- */
#rebateStep1Nudge.is-error {
  animation: nudge-shake 0.5s ease-in-out;
}

@keyframes nudge-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}/*# sourceMappingURL=style.css.map */
/* multiform.css */
.multi-form .header.modal-header {
  border-bottom: unset;
}
.multi-form .form-tab-indicators > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.multi-form .form-tab-indicators i {
  opacity: 0.3;
  color: #161925;
  margin: 0;
}
.multi-form .form-tab-indicators .form-tab-indicator-line {
  width: 100%;
  height: 2px;
  align-self: start;
  background-color: rgba(22, 25, 37, 0.3);
  position: relative;
  z-index: 0;
  margin-top: 8px;
}
.multi-form .form-tab-indicators .form-tab-indicator-line:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0%;
  height: 2px;
  opacity: 1;
  z-index: 1;
  background-color: #161925;
  transition: width 0.5s ease-in-out;
}
.multi-form .form-tab-indicators .multi-current {
  opacity: 1;
  color: #037FB0;
  font-weight: bold;
}
.multi-form .form-tab-indicators .multi-current i {
  opacity: 0.6;
  color: #037FB0;
}
.multi-form .form-tab-indicators .multi-current .form-tab-indicator-line:after {
  background-color: #037FB0;
  width: 100%;
}
.multi-form .form-tab-indicators .multi-complete {
  opacity: 1;
  color: #A0EB83;
}
.multi-form .form-tab-indicators .multi-complete i {
  opacity: 0.6;
  color: #A0EB83;
}
.multi-form .form-tab-indicators .multi-complete .form-tab-indicator-line:after {
  background-color: #A0EB83;
  width: 100%;
}

.pac-container {
  z-index: 1000000 !important;
}

.file-image-content {
  position: relative;
  min-height: 100px;
  min-width: 300px;
  margin-top: 1rem;
  container-type: inline-size;
}
.file-image-content .form-control.fileImageUpload.invalid + .fileupload {
  border-color: #FF0000;
  border-width: 2px;
}
.file-image-content .fileupload {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  align-self: center;
}
.file-image-content .file-upload-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

@container (width <= 400px) {
  .file-upload-label {
    padding: 0.5rem !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
}
.fileupload-tabulator .file-image {
  min-height: unset;
  max-height: unset;
  min-width: unset;
  max-width: unset;
}

.file-preview-list .file-preview-image {
  object-fit: cover;
}
.file-preview-list .file-preview-delete-button {
  width: 28px;
  height: 28px;
  z-index: 2;
}

/*# sourceMappingURL=multiform.css.map */

/* print.css */
@media print {
  @page {}
  html, body {
    width: 100%;
    background-color: white;
    font-size: 11pt;
  }
  h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
  }
  h1, h2, h3 {
    font-size: 14pt;
  }
  h4, h5 {
    font-size: 11pt;
  }
  h6 {
    font-size: 10pt;
  }
  p, a, li, td, th, span, div {
    color: #000 !important;
    font-size: 10pt;
  }
  nav, footer {
    display: none !important;
  }
  .container--hero, .feedback, .input-container, .nav--spacer {
    display: none !important;
  }
  #FilterCheckbox, #FilterSearch {
    display: none !important;
  }
  #product-rows {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  #product-rows > div {
    flex: 1 0 25%;
    box-sizing: border-box;
    height: 65mm;
    margin: 0;
    padding: 0 !important;
    border: 0;
    box-shadow: none;
  }
  #product-rows > div .card-text {
    margin-bottom: 0.5mm !important;
  }
  #product-rows > div .product-thumbnail {
    padding-bottom: 75%;
  }
  #product-rows > div .product-name {
    font-size: 10pt !important;
  }
  #product-rows > div .card-text--category {
    font-size: 9pt !important;
  }
  .lottie {
    display: none !important;
  }
  #mobileFilter {
    display: none !important;
  }
  .feedback-icon {
    display: none !important;
  }
}

/*# sourceMappingURL=print.css.map */

/* table.css */
@charset "UTF-8";
/* Style the resize handle */
.table {
  font-size: 0.75rem;
}

.table-responsive-scroll {
  max-height: 300px;
  overflow-y: auto;
}
.table-responsive-scroll thead th {
  position: sticky;
  top: -1px; /* Adjusted to ensure header is visible */
  z-index: 2;
  background-color: #f8f9fa; /* Light background for header */
  border-top: none; /* Prevents extra top border from sticky positioning */
}
.table-responsive-scroll.table-bordered thead {
  border-top: 1px solid #dee2e6; /* Ensures top border is present */
}

.table-resizable th {
  position: relative;
  overflow: hidden;
}

.table-resizable th .resize-handle {
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.table-resizable th .resize-handle:hover {
  background-color: #ddd;
}

.sort-icon {
  font-size: 0.7rem;
  padding: 0 0.5rem;
}
.sort-icon.asc::after {
  content: "▲"; /* Up arrow for ascending sort */
}
.sort-icon.desc::after {
  content: "▼"; /* Down arrow for descending sort */
}
.sort-icon.unsorted::after {
  content: ""; /* No icon for unsorted state */
}

/*# sourceMappingURL=table.css.map */

/* core.css */
@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap");
/* Bootstrap Overrides */
:root {
  --primary: #0d6efd;
  --primary-dark: rgb(1.7442622951, 86.3409836066, 211.0557377049);
  --primary-darker: rgb(1.3081967213, 64.7557377049, 158.2918032787);
  --primary-darkest: rgb(0.8721311475, 43.1704918033, 105.5278688525);
  --primary-light: rgb(61.4, 139, 253.4);
  --primary-lighter: rgb(109.8, 168, 253.8);
  --primary-lightest: rgb(158.2, 197, 254.2);
  --primary-rgb: 13, 110, 253;
  --primary-rgb-dark: 1.7442622951, 86.3409836066, 211.0557377049;
  --primary-rgb-darker: 1.3081967213, 64.7557377049, 158.2918032787;
  --primary-rgb-darkest: 0.8721311475, 43.1704918033, 105.5278688525;
  --primary-rgb-light: 61.4, 139, 253.4;
  --primary-rgb-lighter: 109.8, 168, 253.8;
  --primary-rgb-lightest: 158.2, 197, 254.2;
  --secondary: #161925;
  --secondary-dark: rgb(17.6, 20, 29.6);
  --secondary-darker: rgb(13.2, 15, 22.2);
  --secondary-darkest: rgb(8.8, 10, 14.8);
  --secondary-light: rgb(55.6338983051, 63.2203389831, 93.5661016949);
  --secondary-lighter: rgb(89.2677966102, 101.4406779661, 150.1322033898);
  --secondary-lightest: rgb(141.8677966102, 151.0406779661, 187.7322033898);
  --secondary-rgb: 22, 25, 37;
  --secondary-rgb-dark: 17.6, 20, 29.6;
  --secondary-rgb-darker: 13.2, 15, 22.2;
  --secondary-rgb-darkest: 8.8, 10, 14.8;
  --secondary-rgb-light: 55.6338983051, 63.2203389831, 93.5661016949;
  --secondary-rgb-lighter: 89.2677966102, 101.4406779661, 150.1322033898;
  --secondary-rgb-lightest: 141.8677966102, 151.0406779661, 187.7322033898;
  --accent: #ff6600;
  --accent-dark: rgb(204, 81.6, 0);
  --accent-darker: rgb(153, 61.2, 0);
  --accent-darkest: rgb(102, 40.8, 0);
  --accent-light: rgb(255, 132.6, 51);
  --accent-lighter: rgb(255, 163.2, 102);
  --accent-lightest: rgb(255, 193.8, 153);
  --accent-rgb: 255, 102, 0;
  --accent-rgb-dark: 204, 81.6, 0;
  --accent-rgb-darker: 153, 61.2, 0;
  --accent-rgb-darkest: 102, 40.8, 0;
  --accent-rgb-light: 255, 132.6, 51;
  --accent-rgb-lighter: 255, 163.2, 102;
  --accent-rgb-lightest: 255, 193.8, 153;
  --text-light: #000;
  --text-light-dark: black;
  --text-light-darker: black;
  --text-light-darkest: black;
  --text-light-light: #333333;
  --text-light-lighter: #666666;
  --text-light-lightest: #999999;
  --text-light-rgb: 0, 0, 0;
  --text-light-rgb-dark: 0, 0, 0;
  --text-light-rgb-darker: 0, 0, 0;
  --text-light-rgb-darkest: 0, 0, 0;
  --text-light-rgb-light: 51, 51, 51;
  --text-light-rgb-lighter: 102, 102, 102;
  --text-light-rgb-lightest: 153, 153, 153;
  --text-dark: #fff;
  --text-dark-dark: #cccccc;
  --text-dark-darker: #999999;
  --text-dark-darkest: #666666;
  --text-dark-light: white;
  --text-dark-lighter: white;
  --text-dark-lightest: white;
  --text-dark-rgb: 255, 255, 255;
  --text-dark-rgb-dark: 204, 204, 204;
  --text-dark-rgb-darker: 153, 153, 153;
  --text-dark-rgb-darkest: 102, 102, 102;
  --text-dark-rgb-light: 255, 255, 255;
  --text-dark-rgb-lighter: 255, 255, 255;
  --text-dark-rgb-lightest: 255, 255, 255;
  --light: rgba(228, 220, 203, 0.7960784314);
  --light-dark: rgba(198.5392405063, 181.8101265823, 146.2607594937, 0.7960784314);
  --light-darker: rgba(169.0784810127, 143.6202531646, 89.5215189873, 0.7960784314);
  --light-darkest: rgba(113.4784810127, 96.0202531646, 58.9215189873, 0.7960784314);
  --light-light: rgba(233.4, 227, 213.4, 0.7960784314);
  --light-lighter: rgba(238.8, 234, 223.8, 0.7960784314);
  --light-lightest: rgba(244.2, 241, 234.2, 0.7960784314);
  --light-rgb: 228, 220, 203;
  --light-rgb-dark: 198.5392405063, 181.8101265823, 146.2607594937;
  --light-rgb-darker: 169.0784810127, 143.6202531646, 89.5215189873;
  --light-rgb-darkest: 113.4784810127, 96.0202531646, 58.9215189873;
  --light-rgb-light: 233.4, 227, 213.4;
  --light-rgb-lighter: 238.8, 234, 223.8;
  --light-rgb-lightest: 244.2, 241, 234.2;
  --dark: rgba(0, 0, 0, 0.5333333333);
  --dark-dark: rgba(0, 0, 0, 0.5333333333);
  --dark-darker: rgba(0, 0, 0, 0.5333333333);
  --dark-darkest: rgba(0, 0, 0, 0.5333333333);
  --dark-light: rgba(51, 51, 51, 0.5333333333);
  --dark-lighter: rgba(102, 102, 102, 0.5333333333);
  --dark-lightest: rgba(153, 153, 153, 0.5333333333);
  --dark-rgb: 0, 0, 0;
  --dark-rgb-dark: 0, 0, 0;
  --dark-rgb-darker: 0, 0, 0;
  --dark-rgb-darkest: 0, 0, 0;
  --dark-rgb-light: 51, 51, 51;
  --dark-rgb-lighter: 102, 102, 102;
  --dark-rgb-lightest: 153, 153, 153;
  --input-light: rgba(255, 255, 255, 0.5333333333);
  --input-light-dark: rgba(204, 204, 204, 0.5333333333);
  --input-light-darker: rgba(153, 153, 153, 0.5333333333);
  --input-light-darkest: rgba(102, 102, 102, 0.5333333333);
  --input-light-light: rgba(255, 255, 255, 0.5333333333);
  --input-light-lighter: rgba(255, 255, 255, 0.5333333333);
  --input-light-lightest: rgba(255, 255, 255, 0.5333333333);
  --input-light-rgb: 255, 255, 255;
  --input-light-rgb-dark: 204, 204, 204;
  --input-light-rgb-darker: 153, 153, 153;
  --input-light-rgb-darkest: 102, 102, 102;
  --input-light-rgb-light: 255, 255, 255;
  --input-light-rgb-lighter: 255, 255, 255;
  --input-light-rgb-lightest: 255, 255, 255;
  --input-dark: rgba(255, 255, 255, 0.0666666667);
  --input-dark-dark: rgba(204, 204, 204, 0.0666666667);
  --input-dark-darker: rgba(153, 153, 153, 0.0666666667);
  --input-dark-darkest: rgba(102, 102, 102, 0.0666666667);
  --input-dark-light: rgba(255, 255, 255, 0.0666666667);
  --input-dark-lighter: rgba(255, 255, 255, 0.0666666667);
  --input-dark-lightest: rgba(255, 255, 255, 0.0666666667);
  --input-dark-rgb: 255, 255, 255;
  --input-dark-rgb-dark: 204, 204, 204;
  --input-dark-rgb-darker: 153, 153, 153;
  --input-dark-rgb-darkest: 102, 102, 102;
  --input-dark-rgb-light: 255, 255, 255;
  --input-dark-rgb-lighter: 255, 255, 255;
  --input-dark-rgb-lightest: 255, 255, 255;
  --border-light: rgba(216, 216, 216, 0.4);
  --border-light-dark: rgba(172.8, 172.8, 172.8, 0.4);
  --border-light-darker: rgba(129.6, 129.6, 129.6, 0.4);
  --border-light-darkest: rgba(86.4, 86.4, 86.4, 0.4);
  --border-light-light: rgba(223.8, 223.8, 223.8, 0.4);
  --border-light-lighter: rgba(231.6, 231.6, 231.6, 0.4);
  --border-light-lightest: rgba(239.4, 239.4, 239.4, 0.4);
  --border-light-rgb: 216, 216, 216;
  --border-light-rgb-dark: 172.8, 172.8, 172.8;
  --border-light-rgb-darker: 129.6, 129.6, 129.6;
  --border-light-rgb-darkest: 86.4, 86.4, 86.4;
  --border-light-rgb-light: 223.8, 223.8, 223.8;
  --border-light-rgb-lighter: 231.6, 231.6, 231.6;
  --border-light-rgb-lightest: 239.4, 239.4, 239.4;
  --border-dark: rgba(51, 51, 51, 0.4);
  --border-dark-dark: rgba(40.8, 40.8, 40.8, 0.4);
  --border-dark-darker: rgba(30.6, 30.6, 30.6, 0.4);
  --border-dark-darkest: rgba(20.4, 20.4, 20.4, 0.4);
  --border-dark-light: rgba(91.8, 91.8, 91.8, 0.4);
  --border-dark-lighter: rgba(132.6, 132.6, 132.6, 0.4);
  --border-dark-lightest: rgba(173.4, 173.4, 173.4, 0.4);
  --border-dark-rgb: 51, 51, 51;
  --border-dark-rgb-dark: 40.8, 40.8, 40.8;
  --border-dark-rgb-darker: 30.6, 30.6, 30.6;
  --border-dark-rgb-darkest: 20.4, 20.4, 20.4;
  --border-dark-rgb-light: 91.8, 91.8, 91.8;
  --border-dark-rgb-lighter: 132.6, 132.6, 132.6;
  --border-dark-rgb-lightest: 173.4, 173.4, 173.4;
  --success: #5be5ac;
  --success-dark: rgb(35.7578947368, 220.2421052632, 144.0421052632);
  --success-darker: rgb(26.2736842105, 165.7263157895, 108.1263157895);
  --success-darkest: rgb(17.5157894737, 110.4842105263, 72.0842105263);
  --success-light: rgb(123.8, 234.2, 188.6);
  --success-lighter: rgb(156.6, 239.4, 205.2);
  --success-lightest: rgb(189.4, 244.6, 221.8);
  --success-rgb: 91, 229, 172;
  --success-rgb-dark: 35.7578947368, 220.2421052632, 144.0421052632;
  --success-rgb-darker: 26.2736842105, 165.7263157895, 108.1263157895;
  --success-rgb-darkest: 17.5157894737, 110.4842105263, 72.0842105263;
  --success-rgb-light: 123.8, 234.2, 188.6;
  --success-rgb-lighter: 156.6, 239.4, 205.2;
  --success-rgb-lightest: 189.4, 244.6, 221.8;
  --highlight: #fff3c4;
  --highlight-dark: rgb(255, 224.6542372881, 105.8);
  --highlight-darker: rgb(255, 206.3084745763, 15.6);
  --highlight-darkest: rgb(180.4, 143.7084745763, 0);
  --highlight-light: rgb(255, 245.4, 207.8);
  --highlight-lighter: rgb(255, 247.8, 219.6);
  --highlight-lightest: rgb(255, 250.2, 231.4);
  --highlight-rgb: 255, 243, 196;
  --highlight-rgb-dark: 255, 224.6542372881, 105.8;
  --highlight-rgb-darker: 255, 206.3084745763, 15.6;
  --highlight-rgb-darkest: 180.4, 143.7084745763, 0;
  --highlight-rgb-light: 255, 245.4, 207.8;
  --highlight-rgb-lighter: 255, 247.8, 219.6;
  --highlight-rgb-lightest: 255, 250.2, 231.4;
  --lightgrey: #8EA8C3;
  --lightgrey-dark: rgb(97.9757225434, 134.1052023121, 171.6242774566);
  --lightgrey-darker: rgb(70.1271676301, 100.5156069364, 132.0728323699);
  --lightgrey-darkest: rgb(46.7514450867, 67.0104046243, 88.0485549133);
  --lightgrey-light: rgb(164.6, 185.4, 207);
  --lightgrey-lighter: rgb(187.2, 202.8, 219);
  --lightgrey-lightest: rgb(209.8, 220.2, 231);
  --lightgrey-rgb: 142, 168, 195;
  --lightgrey-rgb-dark: 97.9757225434, 134.1052023121, 171.6242774566;
  --lightgrey-rgb-darker: 70.1271676301, 100.5156069364, 132.0728323699;
  --lightgrey-rgb-darkest: 46.7514450867, 67.0104046243, 88.0485549133;
  --lightgrey-rgb-light: 164.6, 185.4, 207;
  --lightgrey-rgb-lighter: 187.2, 202.8, 219;
  --lightgrey-rgb-lightest: 209.8, 220.2, 231;
  --mediumgrey: #406E8E;
  --mediumgrey-dark: rgb(51.2, 88, 113.6);
  --mediumgrey-darker: rgb(38.4, 66, 85.2);
  --mediumgrey-darkest: rgb(25.6, 44, 56.8);
  --mediumgrey-light: rgb(87.3572815534, 141.6640776699, 179.4427184466);
  --mediumgrey-lighter: rgb(129.267961165, 169.9980582524, 198.332038835);
  --mediumgrey-lightest: rgb(171.1786407767, 198.332038835, 217.2213592233);
  --mediumgrey-rgb: 64, 110, 142;
  --mediumgrey-rgb-dark: 51.2, 88, 113.6;
  --mediumgrey-rgb-darker: 38.4, 66, 85.2;
  --mediumgrey-rgb-darkest: 25.6, 44, 56.8;
  --mediumgrey-rgb-light: 87.3572815534, 141.6640776699, 179.4427184466;
  --mediumgrey-rgb-lighter: 129.267961165, 169.9980582524, 198.332038835;
  --mediumgrey-rgb-lightest: 171.1786407767, 198.332038835, 217.2213592233;
  --darkgrey: #23395B;
  --darkgrey-dark: rgb(28, 45.6, 72.8);
  --darkgrey-darker: rgb(21, 34.2, 54.6);
  --darkgrey-darkest: rgb(14, 22.8, 36.4);
  --darkgrey-light: rgb(56.3333333333, 91.7428571429, 146.4666666667);
  --darkgrey-lighter: rgb(88.6, 128.8285714286, 191);
  --darkgrey-lightest: rgb(144.0666666667, 170.8857142857, 212.3333333333);
  --darkgrey-rgb: 35, 57, 91;
  --darkgrey-rgb-dark: 28, 45.6, 72.8;
  --darkgrey-rgb-darker: 21, 34.2, 54.6;
  --darkgrey-rgb-darkest: 14, 22.8, 36.4;
  --darkgrey-rgb-light: 56.3333333333, 91.7428571429, 146.4666666667;
  --darkgrey-rgb-lighter: 88.6, 128.8285714286, 191;
  --darkgrey-rgb-lightest: 144.0666666667, 170.8857142857, 212.3333333333;
  --teal: #449F93;
  --teal-dark: rgb(54.4, 127.2, 117.6);
  --teal-darker: rgb(40.8, 95.4, 88.2);
  --teal-darkest: rgb(27.2, 63.6, 58.8);
  --teal-light: rgb(96.4202643172, 187.1797356828, 175.2114537445);
  --teal-lighter: rgb(136.0651982379, 204.1348017621, 195.1585903084);
  --teal-lightest: rgb(175.7101321586, 221.0898678414, 215.1057268722);
  --teal-rgb: 68, 159, 147;
  --teal-rgb-dark: 54.4, 127.2, 117.6;
  --teal-rgb-darker: 40.8, 95.4, 88.2;
  --teal-rgb-darkest: 27.2, 63.6, 58.8;
  --teal-rgb-light: 96.4202643172, 187.1797356828, 175.2114537445;
  --teal-rgb-lighter: 136.0651982379, 204.1348017621, 195.1585903084;
  --teal-rgb-lightest: 175.7101321586, 221.0898678414, 215.1057268722;
  --darkteal: #006153;
  --darkteal-dark: rgb(0, 77.6, 66.4);
  --darkteal-darker: rgb(0, 58.2, 49.8);
  --darkteal-darkest: rgb(0, 38.8, 33.2);
  --darkteal-light: rgb(0, 179.6, 153.6783505155);
  --darkteal-lighter: rgb(7.2, 255, 219.2350515464);
  --darkteal-lightest: rgb(89.8, 255, 231.1567010309);
  --darkteal-rgb: 0, 97, 83;
  --darkteal-rgb-dark: 0, 77.6, 66.4;
  --darkteal-rgb-darker: 0, 58.2, 49.8;
  --darkteal-rgb-darkest: 0, 38.8, 33.2;
  --darkteal-rgb-light: 0, 179.6, 153.6783505155;
  --darkteal-rgb-lighter: 7.2, 255, 219.2350515464;
  --darkteal-rgb-lightest: 89.8, 255, 231.1567010309;
  --cream: #EEE8A9;
  --cream-dark: rgb(224.5650485437, 213.8233009709, 101.0349514563);
  --cream-darker: rgb(203.8951456311, 189.6699029126, 40.3048543689);
  --cream-darkest: rgb(135.9300970874, 126.4466019417, 26.8699029126);
  --cream-light: rgb(241.4, 236.6, 186.2);
  --cream-lighter: rgb(244.8, 241.2, 203.4);
  --cream-lightest: rgb(248.2, 245.8, 220.6);
  --cream-rgb: 238, 232, 169;
  --cream-rgb-dark: 224.5650485437, 213.8233009709, 101.0349514563;
  --cream-rgb-darker: 203.8951456311, 189.6699029126, 40.3048543689;
  --cream-rgb-darkest: 135.9300970874, 126.4466019417, 26.8699029126;
  --cream-rgb-light: 241.4, 236.6, 186.2;
  --cream-rgb-lighter: 244.8, 241.2, 203.4;
  --cream-rgb-lightest: 248.2, 245.8, 220.6;
  --dark-bg: #161925;
  --dark-bg-dark: rgb(17.6, 20, 29.6);
  --dark-bg-darker: rgb(13.2, 15, 22.2);
  --dark-bg-darkest: rgb(8.8, 10, 14.8);
  --dark-bg-light: rgb(55.6338983051, 63.2203389831, 93.5661016949);
  --dark-bg-lighter: rgb(89.2677966102, 101.4406779661, 150.1322033898);
  --dark-bg-lightest: rgb(141.8677966102, 151.0406779661, 187.7322033898);
  --dark-bg-rgb: 22, 25, 37;
  --dark-bg-rgb-dark: 17.6, 20, 29.6;
  --dark-bg-rgb-darker: 13.2, 15, 22.2;
  --dark-bg-rgb-darkest: 8.8, 10, 14.8;
  --dark-bg-rgb-light: 55.6338983051, 63.2203389831, 93.5661016949;
  --dark-bg-rgb-lighter: 89.2677966102, 101.4406779661, 150.1322033898;
  --dark-bg-rgb-lightest: 141.8677966102, 151.0406779661, 187.7322033898;
  --yellow: #e2b12e;
  --yellow-dark: rgb(191.0857142857, 146.2857142857, 26.5142857143);
  --yellow-darker: rgb(143.3142857143, 109.7142857143, 19.8857142857);
  --yellow-darkest: rgb(95.5428571429, 73.1428571429, 13.2571428571);
  --yellow-light: rgb(231.8, 192.6, 87.8);
  --yellow-lighter: rgb(237.6, 208.2, 129.6);
  --yellow-lightest: rgb(243.4, 223.8, 171.4);
  --yellow-rgb: 226, 177, 46;
  --yellow-rgb-dark: 191.0857142857, 146.2857142857, 26.5142857143;
  --yellow-rgb-darker: 143.3142857143, 109.7142857143, 19.8857142857;
  --yellow-rgb-darkest: 95.5428571429, 73.1428571429, 13.2571428571;
  --yellow-rgb-light: 231.8, 192.6, 87.8;
  --yellow-rgb-lighter: 237.6, 208.2, 129.6;
  --yellow-rgb-lightest: 243.4, 223.8, 171.4;
  --error: #b92924;
  --error-dark: rgb(148, 32.8, 28.8);
  --error-darker: rgb(111, 24.6, 21.6);
  --error-darkest: rgb(74, 16.4, 14.4);
  --error-light: rgb(217.3384615385, 66.6923076923, 61.4615384615);
  --error-lighter: rgb(226.7538461538, 113.7692307692, 109.8461538462);
  --error-lightest: rgb(236.1692307692, 160.8461538462, 158.2307692308);
  --error-rgb: 185, 41, 36;
  --error-rgb-dark: 148, 32.8, 28.8;
  --error-rgb-darker: 111, 24.6, 21.6;
  --error-rgb-darkest: 74, 16.4, 14.4;
  --error-rgb-light: 217.3384615385, 66.6923076923, 61.4615384615;
  --error-rgb-lighter: 226.7538461538, 113.7692307692, 109.8461538462;
  --error-rgb-lightest: 236.1692307692, 160.8461538462, 158.2307692308;
  --rust: #C15450;
  --rust-dark: rgb(161.2658227848, 60.8202531646, 57.1341772152);
  --rust-darker: rgb(120.9493670886, 45.6151898734, 42.8506329114);
  --rust-darkest: rgb(80.6329113924, 30.4101265823, 28.5670886076);
  --rust-light: rgb(205.4, 118.2, 115);
  --rust-lighter: rgb(217.8, 152.4, 150);
  --rust-lightest: rgb(230.2, 186.6, 185);
  --rust-rgb: 193, 84, 80;
  --rust-rgb-dark: 161.2658227848, 60.8202531646, 57.1341772152;
  --rust-rgb-darker: 120.9493670886, 45.6151898734, 42.8506329114;
  --rust-rgb-darkest: 80.6329113924, 30.4101265823, 28.5670886076;
  --rust-rgb-light: 205.4, 118.2, 115;
  --rust-rgb-lighter: 217.8, 152.4, 150;
  --rust-rgb-lightest: 230.2, 186.6, 185;
}

body {
  font-family: "Zalando Sans", "Arial", sans-serif;
  font-weight: 300;
  color: #333;
  width: 100vw;
  max-width: 100%;
  background-color: rgba(var(--bs-light-rgb, var(--bs-bg-opacity)));
}

.template {
  display: none;
}

.hidden {
  display: unset !important;
}

.pcamessage, .pcalogoen, .pcaflagbutton {
  display: none !important;
}

.modal .modal-header {
  position: relative;
  display: flex;
  flex-direction: column;
}
.modal .modal-header .modal-subtitle {
  margin: 0;
}
.modal .modal-header .btn-close {
  position: absolute;
  right: 1rem;
}

.content-area {
  flex-grow: 1;
  transition: width 0.3s ease-in-out;
}

hr {
  border: none;
  border-bottom: 1px solid #D8D8D8;
  min-width: 100%;
  max-width: 100%;
}

/***************************************************************************************************
********************************* NAVBAR STYLES ****************************************************
***************************************************************************************************/
:root {
  --navbar-height: 80px;
}

.navbar-brand img {
  min-height: 40px;
  max-height: 80px;
}

.navbar-brand:has(> span) img {
  max-height: 60px;
}

/***************************************************************************************************
********************************* LOGIN STYLES ****************************************************
***************************************************************************************************/
login {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  background-image: url(/public/img/background.png);
  background-size: cover;
  background-position: center;
}
login .card {
  background: var(--light);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border: 1px solid var(--border-light);
  color: var(--text-light);
  width: 400px;
}
login .card form .input-group .input-group-text {
  background: var(--input-light);
  border-color: var(--border-dark);
  border-right: 0;
}
login .card form .input-group .input-group-text i {
  color: var(--text-light);
}
login .card form .input-group input {
  background: var(--input-light);
  color: var(--text-light);
  border-color: var(--border-dark);
  border-left: 0;
  margin-left: 0 !important;
}
login .card form .input-group input::placeholder {
  color: var(--text-light);
}
login .card form .input-group button[type=submit] {
  background: var(--primary);
  color: var(--text-dark);
  border: 1px solid var(--primary);
}
login .card form .input-group button.toggle-password {
  position: absolute;
  right: 2rem;
  cursor: pointer;
  color: var(--text-light);
  background: transparent;
  border: none;
  height: 100%;
}
@media (prefers-color-scheme: dark) {
  login .card form .input-group .input-group-text {
    background: var(--input-dark);
    border-color: var(--border-light);
  }
  login .card form .input-group .input-group-text i {
    color: var(--text-dark);
  }
  login .card form .input-group input {
    background: var(--input-dark);
    color: var(--text-dark);
    border-color: var(--border-light);
  }
  login .card form .input-group input::placeholder {
    color: var(--text-dark);
  }
}
@media (prefers-color-scheme: dark) {
  login .card {
    color: var(--text-dark);
    background: var(--dark);
    border: 1px solid var(--dark);
  }
}

.infinite-scroll {
  min-height: 50px;
}

:invalid {
  content: "invalid";
}

.drag-placeholder {
  border: 2px dashed var(--bs-border-color);
  border-radius: 999px;
  min-height: 2.25rem;
  min-width: 6.5rem;
  margin: 0 0.5rem 0.5rem 0;
  display: inline-block;
  background: rgba(13, 110, 253, 0.06);
}

.drag-image-proxy {
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}

.draggable-btn-top-container {
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.draggable-btn-top-container .draggable-btn-container .draggable-btn-container--container button {
  width: 100%;
}
.draggable-btn-top-container .draggable-btn-container .create-draggable-pill-btn {
  border: 1px solid;
  font-size: 5rem;
  font-weight: 900;
}

.drag-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-sm);
  user-select: none;
  cursor: grab;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.1s ease;
}
.drag-pill:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
  background: var(--bs-light-bg-subtle);
}
.drag-pill:active {
  cursor: grabbing;
  transform: scale(0.99);
}
.drag-pill.is-dragging {
  cursor: grabbing;
  transform: scale(0.99);
}
.drag-pill .pill-label {
  font-weight: 600;
  line-height: 1.1;
}
.drag-pill .pill-drag-handle {
  display: none;
}
.drag-pill .pill-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 50%;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  background: #fff;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.drag-pill .pill-delete-btn:hover {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.draggable-pill-top-container {
  border-bottom: 1px solid;
}
.draggable-pill-top-container .create-draggable-pill-btn {
  border: 1px solid;
  font-size: 5rem;
  font-weight: 900;
}

.infinite-scroll {
  min-height: 50px;
  overflow-y: auto;
}

.spinner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  min-height: 200px;
  transition: opacity 0.3s ease;
}
.spinner-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
.spinner-overlay .spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ==================================================================================
                            GENERIC PAGE COMPONENT STYLES
   ================================================================================== */
/* =========================
Slider Component
========================= */
.content-slider {
  padding: 2rem 0;
}
.content-slider .slider-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
}
.content-slider .slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.content-slider .slider-nav {
  background: #374955;
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 2;
}
.content-slider .slider-nav:hover {
  background: rgb(52.25, 69.35, 80.75);
}
.content-slider .slider-nav.prev {
  margin-right: 1rem;
}
.content-slider .slider-nav.next {
  margin-left: 1rem;
}
.content-slider .slider-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.5rem 0;
}
.content-slider .slider-track::-webkit-scrollbar {
  display: none;
}
.content-slider .slider-card {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out;
}
.content-slider .slider-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.content-slider .slider-card .card-thumb {
  position: relative;
}
.content-slider .slider-card .card-thumb .card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.content-slider .slider-card .card-content {
  flex: 1;
  padding: 1rem;
}
.content-slider .slider-card .card-content .card-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.content-slider .slider-card .card-content .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.content-slider .slider-card .card-content .card-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.content-slider .slider-card .card-content .card-meta {
  font-size: 0.8rem;
  color: #888;
}
.content-slider .slider-card .card-content .card-meta .card-date {
  font-style: italic;
}
.content-slider .slider-card .card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.content-slider .slider-card .card-actions .btn-cta {
  background: #308478;
  color: #fff;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.content-slider .slider-card .card-actions .btn-cta:hover {
  background: rgb(45.6, 125.4, 114);
}

.tabs-section {
  padding: 4rem 0;
  background: #f9fafc;
}
.tabs-section .tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.tabs-section .tabs-header {
  text-align: center;
  margin-bottom: 2rem;
}
.tabs-section .tabs-header .tabs-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #222;
}
.tabs-section .tabs-header .tabs-subtitle {
  font-size: 1rem;
  color: #666;
}
.tabs-section .tabs-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin-bottom: 2rem;
  padding: 0;
}
.tabs-section .tabs-nav .tabs-nav-btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-bottom: 3px solid transparent;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tabs-section .tabs-nav .tabs-nav-btn.active {
  border-color: #ff7e80;
  color: #ff7e80;
}
.tabs-section .tabs-nav .tabs-nav-btn:hover {
  color: #308478;
}
.tabs-section .tabs-panels .tabs-panel .tabs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.tabs-section .tabs-card {
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tabs-section .tabs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tabs-section .tabs-card.upcoming {
  border: 1px solid #ff8150;
}
.tabs-section .tabs-card.closed {
  opacity: 0.7;
}
.tabs-section .tabs-card .tabs-thumb {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.tabs-section .tabs-card .tabs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tabs-section .tabs-card .tabs-body {
  padding: 1rem;
}
.tabs-section .tabs-card .tabs-body .tabs-type {
  font-size: 0.875rem;
  font-weight: 600;
  color: #308478;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tabs-section .tabs-card .tabs-body .tabs-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.5rem 0;
  color: #374955;
}
.tabs-section .tabs-card .tabs-body .tabs-card-desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 1rem;
}
.tabs-section .tabs-card .tabs-body .tabs-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  background: #ff7e80;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}
.tabs-section .tabs-card .tabs-body .tabs-btn:hover:not(.disabled) {
  background: rgb(255, 95.52, 97.9925581395);
}
.tabs-section .tabs-card .tabs-body .tabs-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}
@media (max-width: 768px) {
  .tabs-section .tabs-nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .tabs-section .tabs-card .tabs-thumb {
    height: 160px;
  }
}

.gallery-section {
  padding: 4rem 0;
  background: #f9fafc;
}
.gallery-section .gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.gallery-section .gallery-header {
  text-align: center;
  margin-bottom: 2rem;
}
.gallery-section .gallery-header .gallery-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #222;
}
.gallery-section .gallery-header .gallery-subtitle {
  font-size: 1rem;
  color: #666;
}
.gallery-section .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.gallery-section .gallery-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.gallery-section .gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.gallery-section .gallery-item .gallery-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.gallery-section .gallery-item .gallery-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.gallery-section .gallery-item .gallery-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
  background-color: #f0f0f0;
  transition: transform 0.3s ease;
}
.gallery-section .gallery-item .gallery-thumb:hover img {
  transform: scale(1.03);
}
.gallery-section .gallery-item .gallery-info {
  padding: 0.75rem 1rem;
  background: #fff;
}
.gallery-section .gallery-item .gallery-info .gallery-item-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
  color: #374955;
}
.gallery-section .gallery-item .gallery-info .gallery-item-meta {
  font-size: 0.8rem;
  font-weight: 500;
  color: #777;
  text-transform: uppercase;
}
.gallery-section .text-center {
  grid-column: 1/-1;
  text-align: center;
  color: #999;
  font-size: 1rem;
}
.gallery-section .text-center i {
  color: #ccc;
}
@media (max-width: 992px) {
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (max-width: 768px) {
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .gallery-section .gallery-header {
    margin-bottom: 1.5rem;
  }
  .gallery-section .gallery-header .gallery-title {
    font-size: 1.5rem;
  }
}

.gallery-thumb img {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.masonry-preview-item {
  cursor: grab;
  position: relative;
}
.masonry-preview-item:active {
  cursor: grabbing;
}
.masonry-preview-item .resize-handle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 12px;
  height: 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  cursor: ns-resize;
}

.masonry-preview-wrapper {
  max-height: 350px;
  overflow: auto;
}

.masonry-preview-item {
  cursor: grab;
  position: relative;
}

.masonry-preview-item.dragging {
  opacity: 0.7;
}

.masonry-preview-item .resize-handle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.18);
  cursor: ns-resize;
}

.masonry-preview-item .mp-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mp-btn {
  font: 600 11px/1 system-ui, -apple-system, Segoe UI, Roboto;
  padding: 4px 6px;
  border: 0;
  border-radius: 4px;
  color: #374955;
  background: #eef1f6;
  cursor: pointer;
}

.mp-btn:hover {
  background: #e3e8ef;
}

.mp-sep {
  width: 1px;
  background: #d9dfe7;
  margin: 0 2px;
}

.cookies-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  padding: 1.5rem 2rem;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1100;
  text-align: center;
}
.cookies-banner .cookies-banner--content {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 0.9rem;
}
.cookies-banner .cookies-banner--button {
  background: var(--primary);
  color: var(--text-dark);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}
.cookies-banner .cookies-banner--button:hover {
  background: var(--primary-dark);
}
@media (prefers-color-scheme: dark) {
  .cookies-banner {
    background: var(--dark-bg);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  }
  .cookies-banner .cookies-banner--content {
    color: var(--text-dark);
  }
  .cookies-banner .cookies-banner--button {
    background: var(--primary);
    color: var(--text-dark);
  }
  .cookies-banner .cookies-banner--button:hover {
    background: var(--primary-light);
  }
}

/* ==================================================================================
                            END OF GENERIC PAGE COMPONENT STYLES
   ================================================================================== */
/* ==================================================================================
                            CUSTOM COMPONENT STYLES
   ================================================================================== */
.floating-button {
  position: fixed;
  bottom: 0.5rem;
  right: 1rem;
  background-color: var(--primary);
  padding: 1rem;
  color: var(--light);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1050; /* Above modals */
  transition: background-color 0.3s ease;
}
.floating-button:hover {
  background: var(--primary-dark);
}

.btn-clear {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}

/* ==================================================================================
                            END OF CUSTOM COMPONENT STYLES
   ================================================================================== */
/* =========================
Page Builder Styles
========================= */
.content-area {
  background-color: aliceblue !important;
}

#components {
  margin-top: 1rem;
}
#components h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #374955;
}
#components .sortable-block {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  margin-bottom: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#components .sortable-block:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
}
#components .sortable-block .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  color: var(--bs-secondary-color);
  cursor: grab;
  user-select: none;
  transition: color 0.2s ease;
}
#components .sortable-block .drag-handle:hover, #components .sortable-block .drag-handle:focus-visible {
  color: var(--primary);
}
#components .sortable-block .question-text-input {
  min-height: 5rem;
  border-radius: var(--bs-border-radius-sm);
}
#components .sortable-block .answer-type-input {
  border-radius: var(--bs-border-radius-sm);
}
#components .sortable-block .remove-question-btn {
  white-space: nowrap;
}
#components .sortable-block #component-container {
  min-height: 50px;
  border: 1px solid var(--bs-border-color);
}

.add-component-card .card-body .text-muted {
  font-size: 0.95rem;
  line-height: 1.4;
}
.add-component-card .card-body .add-new-component-card {
  padding: 0.5rem 1rem;
  border: 2px dashed #d1d5db;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  color: #374955;
  transition: all 0.2s ease;
}
.add-component-card .card-body .add-new-component-card:hover {
  border-color: #ff7e80;
  background: rgba(255, 126, 128, 0.05);
  color: #ff7e80;
}
.add-component-card .card-body .add-new-component-card i {
  font-size: 1.2rem;
  color: #ff7e80;
}
.add-component-card .card-body .component-add-type-selector {
  min-width: 180px;
  border-radius: 6px;
}

/* ================================
   MASONRY BUILDER CORE LAYOUT
================================ */
.masonry-builder {
  display: flex;
  gap: 24px;
  flex-wrap: nowrap !important;
}

.masonry-builder .col-md-5 {
  min-width: 240px;
}

.masonry-builder .col-md-7 {
  flex: 1;
}

/* ================================
   AVAILABLE FIELDS (LEFT SIDE)
================================ */
.masonry-source-pill {
  cursor: grab;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
  user-select: none;
}
.masonry-source-pill:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
  transform: translateY(-1px);
}
.masonry-source-pill .pill-label {
  font-weight: 600;
}

.masonry-source-pill.used {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.masonry-builder {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.masonry-preview-wrapper {
  min-height: 300px;
  background: #f8f9fa;
  border: 1px dashed #ccc;
  padding: 12px;
}

/* ================================
   PREVIEW AREA (RIGHT SIDE)
================================ */
.masonry-preview-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background-color: #f8f9fa;
  border-style: dashed;
  min-height: 300px;
  max-height: none !important;
  overflow-y: visible !important;
}

/* ================================
   FIELD PILLS (INSIDE LAYOUT)
================================ */
.masonry-field {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  container-type: inline-size;
}

.masonry-field-header {
  cursor: default;
}

.masonry-field-header:active {
  cursor: default;
}

.masonry-field-header-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(10rem, 1fr);
  gap: 0.5rem;
  align-items: end;
}

.masonry-field-header-label,
.masonry-field-header-width {
  min-width: 0;
}

.masonry-field-header-label-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drag-handle-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.masonry-field-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  color: #6c757d;
  cursor: grab;
  user-select: none;
}

.masonry-field-header {
  cursor: grab;
}

.masonry-field-header input,
.masonry-field-header textarea,
.masonry-field-header select,
.masonry-field-header button,
.masonry-field-header a {
  cursor: auto;
}

.masonry-field-drag-handle:active {
  cursor: grabbing;
}

.masonry-field-settings {
  width: fit-content;
}

.masonry-field-settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 999px;
  background: #fff;
  color: #495057;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.masonry-field-settings-toggle::-webkit-details-marker {
  display: none;
}

.masonry-field-settings-toggle::after {
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.masonry-field-settings[open] .masonry-field-settings-toggle::after {
  content: "−";
}

.masonry-field-settings-menu {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.masonry-field-body {
  margin-top: 0.25rem;
}

.masonry-ghost {
  opacity: 0.6;
  border-style: dashed;
}

.masonry-builder {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
}

.masonry-preview-wrapper {
  min-height: 300px;
  background: #f8f9fa;
  border: 1px dashed #ccc;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@container (max-width: 30rem) {
  .masonry-field-header-top {
    grid-template-columns: 1fr;
  }
}
.date-range-picker {
  position: relative;
}
.date-range-picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.date-range-picker__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.date-range-picker__panel {
  position: absolute;
  top: 0;
  left: 0;
  min-width: min(100vw - 1rem, 23rem);
  width: min(100vw - 1rem, 23rem);
  max-width: calc(100vw - 1rem);
  max-height: min(32rem, 100vh - 1rem);
  overflow-y: auto;
  z-index: 1085;
}
.date-range-picker__selection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.date-range-picker__selection-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.875rem;
  background: #f8fafc;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.date-range-picker__selection-item.is-active {
  border-color: rgba(13, 110, 253, 0.32);
  background: rgba(13, 110, 253, 0.08);
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.08);
}
.date-range-picker__selection-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.date-range-picker__selection-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}
.date-range-picker__helper {
  grid-column: 1/-1;
  font-size: 0.82rem;
  color: #64748b;
}
.date-range-picker__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.date-range-picker__time-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.date-range-picker__time-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}
.date-range-picker__time-input {
  min-width: 0;
}
.date-range-picker__calendar {
  padding: 0.875rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 1rem;
  background: #fff;
}
.date-range-picker__calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.date-range-picker__calendar-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.date-range-picker__calendar-nav:hover {
  border-color: rgba(13, 110, 253, 0.35);
  background: rgba(13, 110, 253, 0.06);
  color: #0d6efd;
}
.date-range-picker__calendar-nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
}
.date-range-picker__month-label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.date-range-picker__weekdays, .date-range-picker__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
  background: linear-gradient(to right, rgba(251, 146, 60, 0.08) 0, rgba(251, 146, 60, 0.08) 14.2857142857%, transparent 14.2857142857%, transparent 85.7142857143%, rgba(251, 146, 60, 0.08) 85.7142857143%, rgba(251, 146, 60, 0.08) 100%);
  border-radius: 0.875rem;
}
.date-range-picker__weekdays {
  margin-bottom: 0.35rem;
}
.date-range-picker__weekday {
  padding: 0.2rem 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.date-range-picker__weekday:first-child, .date-range-picker__weekday:last-child {
  color: #c2410c;
}
.date-range-picker__day {
  position: relative;
  min-height: 2.5rem;
  padding: 0.125rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.date-range-picker__day span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
  border-radius: 999px;
  font-size: 0.9rem;
}
.date-range-picker__day:hover {
  background: rgba(13, 110, 253, 0.08);
}
.date-range-picker__day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.18);
  z-index: 1;
}
.date-range-picker__day.is-outside-month {
  color: #94a3b8;
}
.date-range-picker__day.is-in-range {
  background: rgba(13, 110, 253, 0.12);
}
.date-range-picker__day.is-range-start {
  border-radius: 999px 0 0 999px;
}
.date-range-picker__day.is-range-end {
  border-radius: 0 999px 999px 0;
}
.date-range-picker__day.is-range-start span, .date-range-picker__day.is-range-end span, .date-range-picker__day.is-single-point span {
  background: #0d6efd;
  color: #fff;
  font-weight: 700;
}
.date-range-picker__day.is-single-point {
  border-radius: 999px;
  background: transparent;
}
.date-range-picker__day.is-range-start.is-range-end {
  border-radius: 999px;
}
.date-range-picker__day.is-today:not(.is-range-start):not(.is-range-end):not(.is-single-point) span {
  box-shadow: inset 0 0 0 1px rgba(13, 110, 253, 0.45);
  color: #0d6efd;
  font-weight: 700;
}
.date-range-picker__actions {
  align-items: center;
}
.date-range-picker.is-open .date-range-picker__toggle {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.12);
}

@media (max-width: 991.98px) {
  .date-range-picker__panel {
    min-width: 100%;
    width: 100%;
  }
  .date-range-picker__selection {
    grid-template-columns: 1fr;
  }
  .date-range-picker__times {
    grid-template-columns: 1fr;
  }
}
.form-check-input.is-valid ~ .form-check-label,
.was-validated .form-check-input:valid ~ .form-check-label {
  color: unset;
}

/* Empty/switched-off page-builder components: invisible to site visitors
   (render nothing), but inside the editor preview iframe they show this
   labelled placeholder so the block stays visible and selectable. */
.component-empty-state {
  border: 2px dashed #c3c9d4;
  border-radius: 0.75rem;
  padding: 2.5rem 1.5rem;
  margin: 0.75rem 0;
  text-align: center;
  color: #6c757d;
  background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 12px, #f2f4f7 12px, #f2f4f7 24px);
}
.component-empty-state .component-empty-state-message {
  font-weight: 600;
  font-size: 1.05rem;
}
.component-empty-state .component-empty-state-hint {
  font-size: 0.875rem;
  margin-top: 0.35rem;
}

/* Direction A home design: Hero Banner + Feature Cards page-builder
   components (CustomPages\HeroComponent / CapabilitiesComponent). The canvas
   is drawn by templates/page/js/heroNetwork.js. */
.pb-hero {
  position: relative;
  overflow: hidden;
  background: #141a35;
  color: #fff;
  padding: clamp(4rem, 10vw, 7rem) 1.5rem;
}

.pb-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pb-hero__content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
}

.pb-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e3a23c;
  margin-bottom: 1.1rem;
}

.pb-hero__heading {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 0;
}

.pb-hero__subheading {
  color: #d9dce8;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 44rem;
  margin: 1.25rem auto 0;
}

.pb-hero__ctas {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

.pb-hero__cta {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pb-hero__cta--primary {
  background: #e3a23c;
  color: #141a35;
}
.pb-hero__cta--primary:hover, .pb-hero__cta--primary:focus {
  background: #cf8d26;
  color: #141a35;
}
.pb-hero__cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
}
.pb-hero__cta--ghost:hover, .pb-hero__cta--ghost:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.pb-capability-strip {
  padding: 4rem 1.5rem;
}
.pb-capability-strip__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
}

.pb-capability-card {
  background: #fff;
  border: 1px solid #e2e5ef;
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px -18px rgba(20, 26, 53, 0.25);
}
.pb-capability-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(227, 162, 60, 0.14);
  color: #b97f22;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.pb-capability-card__name {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.pb-capability-card__desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #565e7e;
  margin-bottom: 0;
}

/* Composable page-builder primitives: buttons, icons, cards, and the
   layout-neutral container child wrapper. */
.pb-container-children {
  display: contents;
}

.pb-btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border-radius: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pb-btn--primary {
  background: #e3a23c;
  color: #141a35;
}
.pb-btn--primary:hover, .pb-btn--primary:focus {
  background: #cf8d26;
  color: #141a35;
}
.pb-btn--ghost {
  background: transparent;
  border: 1px solid rgba(20, 26, 53, 0.35);
  color: #141a35;
}
.pb-btn--ghost:hover, .pb-btn--ghost:focus {
  background: rgba(20, 26, 53, 0.08);
  color: #141a35;
}
.pb-btn--link {
  background: transparent;
  color: #b97f22;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
}
.pb-btn--link:hover, .pb-btn--link:focus {
  color: #8a5d15;
}

/* Buttons inside the dark hero keep the original CTA look. */
.pb-hero .pb-btn--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.pb-hero .pb-btn--ghost:hover, .pb-hero .pb-btn--ghost:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.pb-hero .pb-btn--link {
  color: #e3a23c;
}
.pb-hero .pb-btn--link:hover, .pb-hero .pb-btn--link:focus {
  color: #f0be6d;
}

.pb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.pb-card {
  background: #fff;
  border: 1px solid #e2e5ef;
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px -18px rgba(20, 26, 53, 0.25);
}
.pb-card .pb-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(227, 162, 60, 0.14);
  color: #b97f22;
  margin-bottom: 1rem;
}
.pb-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.pb-card p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #565e7e;
  margin-bottom: 0;
}

/* Composed heroes carry the pb-hero__* classes on component wrapper divs
   (via the class format); descendant rules make the typography land on the
   actual elements. Heading tags carry their own sizes, so inherited
   font-size alone would lose to element CSS. */
.pb-heading {
  text-wrap: balance;
}

.pb-hero__heading h1,
.pb-hero__heading h2 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 0;
}

.pb-hero__eyebrow p,
.pb-hero__eyebrow div {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #e3a23c;
  margin-bottom: 0;
}

.pb-hero__subheading p,
.pb-hero__subheading div {
  color: #d9dce8;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 44rem;
  margin: 0 auto;
}

.pb-hero__ctas {
  margin-top: 2.25rem;
}

/*# sourceMappingURL=core.css.map */

/* points.css */
/* Points Management admin page (/admin/points). Everything is scoped under
   #pointsMgmt so this file can ride the global bundle without leaking.
   Tokens lean on Bootstrap CSS variables for theme-awareness, matching the
   Media Library admin page convention. Compile: sass points.scss points.css */
#pointsMgmt {
  --pm-brand: #09083a;
  --pm-brand-hover: #12114e;
  --pm-surface: var(--bs-body-bg, #fff);
  --pm-success: #198754;
  --pm-danger: #dc3545;
  --pm-points: #b3801f;
}
#pointsMgmt .pm-subtitle {
  font-size: 0.9rem;
}
#pointsMgmt {
  /* ---------------- Header ---------------- */
}
#pointsMgmt .pm-header-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}
#pointsMgmt {
  /* ---------------- Panels ---------------- */
}
#pointsMgmt .pm-panel {
  background: var(--pm-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(2, 6, 23, 0.06);
  overflow: hidden;
  height: 100%;
}
#pointsMgmt .pm-panel-head {
  padding: 1.05rem 1.3rem;
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--pm-brand);
}
#pointsMgmt .pm-panel-head i {
  color: var(--bs-secondary-color);
}
#pointsMgmt {
  /* ---------------- Search ---------------- */
}
#pointsMgmt .pm-search .pm-search-input {
  padding-left: 38px;
  box-shadow: none;
}
#pointsMgmt .pm-search .pm-search-input:focus {
  border-color: color-mix(in srgb, var(--pm-brand) 35%, var(--bs-border-color));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pm-brand) 12%, transparent);
}
#pointsMgmt .pm-search .pm-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 6px;
  color: var(--bs-secondary-color);
  pointer-events: none;
}
#pointsMgmt {
  /* ---------------- User list ---------------- */
}
#pointsMgmt .pm-user-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.6rem 0.6rem;
  max-height: 540px;
  overflow-y: auto;
}
#pointsMgmt .pm-user-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 60px;
  padding: 0.6rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
#pointsMgmt .pm-user-row + .pm-user-row {
  margin-top: 2px;
}
#pointsMgmt .pm-user-row:hover {
  background: color-mix(in srgb, var(--pm-brand) 5%, transparent);
}
#pointsMgmt .pm-user-row:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--pm-brand) 35%, var(--bs-border-color));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pm-brand) 18%, transparent);
}
#pointsMgmt .pm-user-row[aria-selected=true] {
  background: color-mix(in srgb, var(--pm-brand) 8%, transparent);
  border-color: color-mix(in srgb, var(--pm-brand) 25%, var(--bs-border-color));
}
#pointsMgmt .pm-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  text-transform: uppercase;
}
#pointsMgmt .pm-user-meta {
  min-width: 0;
  flex: 1;
}
#pointsMgmt .pm-user-name {
  font-weight: 600;
  color: var(--bs-body-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pointsMgmt .pm-user-email {
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#pointsMgmt .pm-balance-pill {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pm-points) 14%, var(--pm-surface));
  color: var(--pm-points);
}
#pointsMgmt .pm-list-msg {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}
#pointsMgmt {
  /* ---------------- Pager ---------------- */
}
#pointsMgmt .pm-pager {
  padding: 0.75rem 1.3rem;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#pointsMgmt .pm-pager-label {
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  font-weight: 600;
}
#pointsMgmt {
  /* ---------------- Empty state ---------------- */
}
#pointsMgmt .pm-empty {
  padding: 4rem 1.5rem;
}
#pointsMgmt .pm-empty-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--pm-brand) 6%, transparent);
}
#pointsMgmt .pm-empty-copy {
  max-width: 360px;
  font-size: 0.9rem;
}
#pointsMgmt {
  /* ---------------- Balance hero ---------------- */
}
#pointsMgmt .pm-hero {
  padding: 1.5rem;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #0b1437 0%, #1e2a6b 100%);
}
#pointsMgmt .pm-hero-coin {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.45);
}
#pointsMgmt .pm-hero-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.7;
}
#pointsMgmt .pm-hero-value {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
#pointsMgmt .pm-hero-value .pm-hero-unit {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.65;
  margin-left: 0.35rem;
}
#pointsMgmt .pm-hero-stat-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.6;
}
#pointsMgmt .pm-hero-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#pointsMgmt .pm-hero-stat-value.is-earned {
  color: #6ee7b7;
}
#pointsMgmt .pm-hero-stat-value.is-spent {
  color: #fca5a5;
}
#pointsMgmt {
  /* ---------------- Adjust form ---------------- */
}
#pointsMgmt .pm-adjust {
  background: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 70%, var(--pm-surface));
  border: 1px solid var(--bs-border-color);
  border-radius: 18px;
  padding: 1.25rem;
}
#pointsMgmt .pm-adjust-title {
  color: var(--pm-brand);
}
#pointsMgmt {
  /* Segmented Add / Remove control */
}
#pointsMgmt .pm-segment {
  display: inline-flex;
  background: var(--bs-tertiary-bg, #e9ecef);
  border-radius: 999px;
  padding: 4px;
}
#pointsMgmt .pm-segment-btn {
  border: none;
  background: transparent;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
#pointsMgmt .pm-segment-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--pm-brand) 25%, transparent);
}
#pointsMgmt .pm-segment-btn[aria-pressed=true][data-mode=add] {
  background: var(--pm-surface);
  color: var(--pm-success);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#pointsMgmt .pm-segment-btn[aria-pressed=true][data-mode=remove] {
  background: var(--pm-surface);
  color: var(--pm-danger);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#pointsMgmt .pm-apply-btn {
  border: none;
  font-weight: 700;
  color: #fff;
  transition: filter 150ms ease, transform 80ms ease;
}
#pointsMgmt .pm-apply-btn:disabled {
  opacity: 0.6;
}
#pointsMgmt .pm-apply-btn:not(:disabled):hover {
  filter: brightness(1.06);
}
#pointsMgmt .pm-apply-btn:not(:disabled):active {
  transform: translateY(1px);
}
#pointsMgmt[data-mode=add] .pm-apply-btn {
  background: linear-gradient(135deg, #20c997, #198754);
}
#pointsMgmt[data-mode=remove] .pm-apply-btn {
  background: linear-gradient(135deg, #f1707b, #dc3545);
}
#pointsMgmt {
  /* ---------------- History ---------------- */
}
#pointsMgmt .pm-history-title {
  color: var(--pm-brand);
}
#pointsMgmt .pm-count-badge {
  background: color-mix(in srgb, var(--pm-brand) 10%, var(--pm-surface));
  color: var(--pm-brand);
  font-weight: 700;
}
#pointsMgmt .pm-history-scroll {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
#pointsMgmt .pm-table {
  font-size: 0.85rem;
}
#pointsMgmt .pm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--bs-secondary-color);
}
#pointsMgmt .pm-table .pm-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#pointsMgmt .pm-table .pm-amount.is-pos {
  color: var(--pm-success);
}
#pointsMgmt .pm-table .pm-amount.is-neg {
  color: var(--pm-danger);
}
#pointsMgmt .pm-table .pm-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--pm-brand) 8%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
#pointsMgmt .pm-table .pm-dash {
  color: var(--bs-secondary-color);
  opacity: 0.5;
}
#pointsMgmt .pm-table .pm-expired {
  color: var(--pm-danger);
  font-weight: 600;
}
#pointsMgmt {
  /* ---------------- Skeletons ---------------- */
}
#pointsMgmt .pm-skel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
}
#pointsMgmt .pm-skel-dot,
#pointsMgmt .pm-skel-line {
  background: linear-gradient(90deg, var(--bs-tertiary-bg, #eef2f7) 25%, var(--bs-secondary-bg, #e2e8f0) 50%, var(--bs-tertiary-bg, #eef2f7) 75%);
  background-size: 200% 100%;
  animation: pmShimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}
#pointsMgmt .pm-skel-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
}
#pointsMgmt .pm-skel-lines {
  flex: 1;
}
#pointsMgmt .pm-skel-line {
  display: block;
  height: 10px;
  width: 60%;
}
#pointsMgmt .pm-skel-line + .pm-skel-line {
  margin-top: 8px;
}
#pointsMgmt .pm-skel-line.pm-skel-line-short {
  width: 40%;
}
@media (max-width: 575.98px) {
  #pointsMgmt .pm-hero {
    flex-wrap: wrap;
  }
  #pointsMgmt .pm-hero-stats {
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
  }
}

@keyframes pmShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/*# sourceMappingURL=points.css.map */

/* notifications.css */
.notification {
  position: fixed;
  z-index: 9999;
  bottom: 25px;
  right: -250px;
  padding: 1rem 1.5rem;
  transition: right 5000ms ease-out;
  transition-delay: 500ms;
}
.notification.animate {
  right: 1rem;
}

.cloning-notification {
  position: fixed;
  top: 50%;
  width: 30vw;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(233, 233, 233, 0.5);
  padding: 20px 40px;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1055;
  backdrop-filter: blur(10px);
  text-align: center;
  animation: fadeIn 0.3s ease, fadeOut 0.3s ease 2.5s forwards;
}
.cloning-notification .cloning-notification-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cloning-notification .cloning-notification-content i {
  font-size: 3rem;
}
.cloning-notification .cloning-notification-content p {
  margin: 0;
  font-size: 1.2rem;
  color: #28a745;
}

/*# sourceMappingURL=notifications.css.map */

/* walkthrough.css */
@charset "UTF-8";
/*
 * Guided-walkthrough / product-tour styles.
 *
 * Layering: the launcher sits at 1090 (above content, below Bootstrap modals'
 * backdrop region), and the tour overlay at 1120 (above modals ~1055 and
 * tooltips/popovers ~1085) so a tour is always on top.
 *
 * The dim is produced by the spotlight's huge box-shadow spread: a small rounded
 * "hole" is left transparent and everything around it is darkened. Moving the
 * hole between steps animates smoothly via transitions on its box metrics.
 *
 * Colours use Bootstrap's theme-aware variables (--bs-body-bg / --bs-body-color /
 * --bs-border-color) plus the project --primary token, so the tour adapts to
 * light and dark automatically (see darkmode.scss). prefers-reduced-motion
 * disables the non-essential motion.
 */
:root {
  --wt-dim: 0.62; /* backdrop opacity */
  --wt-radius: 10px; /* spotlight corner radius */
  --wt-accent: var(--primary, #0d6efd);
  --wt-accent-rgb: var(--primary-rgb, 13, 110, 253);
}

/* ------------------------------------------------------------------ */
/* Overlay root                                                       */
/* ------------------------------------------------------------------ */
.walkthrough-root {
  position: fixed;
  inset: 0;
  z-index: 1120;
  pointer-events: none; /* only the catcher / bubble opt back in */
  animation: wt-fade-in 0.22s ease both;
}
.walkthrough-root.is-closing {
  animation: wt-fade-out 0.24s ease both;
}

/* Full-screen click blocker — active only on tap-to-advance steps. */
.walkthrough-catcher {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.walkthrough-catcher.is-active {
  pointer-events: auto;
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Dim layer (SVG mask cutout)                                        */
/* ------------------------------------------------------------------ */
/*
 * The dim used to be a single huge box-shadow spread (0 0 0 100vmax) on the
 * spotlight hole. That relies on the browser growing the box's own
 * border-radius by the spread distance for the shadow's outer corners
 * (border-radius + spread ⇒ ~1900px radius here), which visibly rounds the
 * shadow away from the true viewport corner and leaves an uncovered sliver
 * exactly at the corner farthest from the hole. An SVG mask has no such
 * scale-dependent corner math — the hole is drawn at its real size — so
 * coverage is exact regardless of viewport size or hole position.
 */
.walkthrough-dim {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.walkthrough-dim rect.wt-dim-fill {
  fill: rgba(0, 0, 0, var(--wt-dim));
  transition: fill 0.2s ease;
}
.walkthrough-dim rect.wt-dim-hole {
  fill: #000;
  transition: x 0.35s cubic-bezier(0.22, 1, 0.36, 1), y 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.walkthrough-root:not(.is-dim) .walkthrough-dim rect.wt-dim-fill {
  fill: rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------------ */
/* Spotlight (the animated ring/glow drawn over the hole)              */
/* ------------------------------------------------------------------ */
.walkthrough-spotlight {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--wt-radius);
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(var(--wt-accent-rgb), 0.9), 0 0 22px 6px rgba(var(--wt-accent-rgb), 0.45);
  transition: top 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.walkthrough-spotlight.is-hidden {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

/* A gentle pulse on the highlight ring to draw the eye. */
.walkthrough-spotlight:not(.is-hidden)::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(var(--wt-accent-rgb), 0.85);
  animation: wt-pulse 1.8s ease-out infinite;
}

/* Step opted out of dimming. */
.walkthrough-root:not(.is-dim) .walkthrough-spotlight {
  box-shadow: 0 0 0 2px rgba(var(--wt-accent-rgb), 0.9), 0 0 22px 6px rgba(var(--wt-accent-rgb), 0.35);
}

/* ------------------------------------------------------------------ */
/* Bubble                                                             */
/* ------------------------------------------------------------------ */
.walkthrough-bubble {
  position: fixed;
  z-index: 1; /* above the spotlight within the root */
  max-width: 340px;
  min-width: 220px;
  padding: 18px 20px;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #1a1a1a);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  outline: none;
  animation: wt-bubble-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.walkthrough-bubble .walkthrough-text {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.5;
}
.walkthrough-bubble .walkthrough-lottie {
  width: 100%;
  max-height: 120px;
  margin-bottom: 8px;
}
.walkthrough-bubble .walkthrough-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.walkthrough-bubble .walkthrough-progress {
  font-size: 0.8rem;
  opacity: 0.6;
  white-space: nowrap;
}
.walkthrough-bubble .walkthrough-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.walkthrough-bubble {
  /* Little pointer toward the target. */
}
.walkthrough-bubble::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
}
.walkthrough-bubble.anchor-center::after {
  display: none;
}
.walkthrough-bubble.anchor-bottom::after {
  top: -7px;
  left: 50%;
  margin-left: -6px;
  border-bottom: 0;
  border-right: 0;
}
.walkthrough-bubble.anchor-top::after {
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  border-top: 0;
  border-left: 0;
}
.walkthrough-bubble.anchor-left::after {
  right: -7px;
  top: 50%;
  margin-top: -6px;
  border-bottom: 0;
  border-left: 0;
}
.walkthrough-bubble.anchor-right::after {
  left: -7px;
  top: 50%;
  margin-top: -6px;
  border-top: 0;
  border-right: 0;
}

/* ------------------------------------------------------------------ */
/* Launcher (persistent "?" replay button)                            */
/* ------------------------------------------------------------------ */
.walkthrough-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1090;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--wt-accent);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(var(--wt-accent-rgb), 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.walkthrough-launcher:hover, .walkthrough-launcher:focus-visible {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 26px rgba(var(--wt-accent-rgb), 0.6);
  outline: none;
}
.walkthrough-launcher.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Keyframes                                                          */
/* ------------------------------------------------------------------ */
@keyframes wt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wt-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes wt-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes wt-pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  70% {
    opacity: 0;
    transform: scale(1.14);
  }
  100% {
    opacity: 0;
    transform: scale(1.14);
  }
}
/* ------------------------------------------------------------------ */
/* Reduced motion                                                     */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .walkthrough-root,
  .walkthrough-bubble {
    animation: none;
  }
  .walkthrough-spotlight {
    transition: none;
  }
  .walkthrough-spotlight::after {
    animation: none;
  }
  .walkthrough-launcher {
    transition: none;
  }
}

/*# sourceMappingURL=walkthrough.css.map */

/* services.css */
.dashboard {
  background-color: #f8f9fa;
  height: 100vh;
  padding: 0rem 5rem;
}
.dashboard .module-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.dashboard .module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}
.dashboard .module-card .module-icon i {
  font-size: 2.5rem;
}

[data-module=lms] .module-icon i {
  color: #007bff;
}

[data-module=contest] .module-icon i {
  color: #ffc107;
}

[data-module=rebate] .module-icon i {
  color: #28a745;
}

[data-module=reporting] .module-icon i {
  color: #17a2b8;
}

[data-module=cms] .module-icon i {
  color: #dc3545;
}

/*# sourceMappingURL=services.css.map */

/* landing.css */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.hero .hero-content .hero-title {
  font-size: 2.8rem;
  font-weight: 700;
}
.hero .hero-content .hero-title .word {
  opacity: 0;
  display: inline-block;
  margin: 0 0.5rem;
  transform: translateY(30px);
  animation: wordIn 1s forwards;
}
.hero .hero-content .hero-title .word:nth-child(1) {
  animation-delay: 0s;
}
.hero .hero-content .hero-title .word:nth-child(2) {
  animation-delay: 1s;
}
.hero .hero-content .hero-title .word:nth-child(3) {
  animation-delay: 2s;
}
.hero .hero-content p {
  margin: 1rem 0 2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}
.hero .hero-content .btn-cta {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
}

@keyframes wordIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.news-resources {
  background: #f9fafb;
}
.news-resources .section-header h2 {
  font-size: 2rem;
  color: #222;
}
.news-resources .section-header p {
  font-size: 1rem;
  color: #555;
}
.news-resources .news-card {
  border-radius: 10px;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.news-resources .news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.news-resources .news-card .news-card-img {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.news-resources .news-card .news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-resources .news-card .news-card-img .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff6600;
  color: #fff;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 20px;
}
.news-resources .news-card .news-card-body {
  padding: 1.25rem;
}
.news-resources .news-card .news-card-body h5 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: #222;
}
.news-resources .news-card .news-card-body p {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.news-resources .news-card .news-card-body a {
  font-weight: 600;
  color: #ff6600;
}
.news-resources .news-card .news-card-body a:hover {
  text-decoration: underline;
}

.contest-section {
  background: #f2f1ff url("/assets/images/contest-bg.svg") no-repeat bottom right;
  background-size: cover;
  position: relative;
}
.contest-section .section-header h2 {
  font-size: 2rem;
  color: #222;
}
.contest-section .section-header p {
  font-size: 1rem;
  color: #555;
}
.contest-section .contest-info h4 {
  font-size: 1.25rem;
  color: #ff6600;
  margin-top: 1rem;
}
.contest-section .contest-info p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}
.contest-section .contest-info ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #444;
}
.contest-section .contest-form {
  border: 1px solid #ddd;
}
.contest-section .contest-form .form-label {
  font-size: 0.9rem;
  color: #333;
}
.contest-section .contest-form .form-control {
  border-radius: 6px;
}
.contest-section .contest-form .form-control:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}
.contest-section .contest-form button {
  background: #ff6600;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.contest-section .contest-form button:hover {
  background: #e05500;
}

.contest-section-overlay .contest-overlay-card {
  display: flex;
  flex-wrap: wrap;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 500px;
}
.contest-section-overlay .contest-overlay-left {
  flex: 1 1 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.contest-section-overlay .contest-overlay-form {
  flex: 1 1 50%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}
.contest-section-overlay .form-control,
.contest-section-overlay .form-select {
  border-radius: 8px;
}
.contest-section-overlay button {
  font-weight: bold;
}

.contest-hero-section {
  position: relative;
}
.contest-hero-section .contest-hero-bg {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contest-hero-section .contest-hero-bg .form-hero-container {
  z-index: 10;
}
.contest-hero-section .contest-hero-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
}
.contest-hero-section .contest-hero-form {
  max-width: 700px;
  width: 100%;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}

/*# sourceMappingURL=landing.css.map */

/* multiform.css */
@charset "UTF-8";
.multiform:not([data-multiform-initialized=true]) .multiform-navigation .form-button--next,
.multiform:not([data-multiform-initialized=true]) .multiform-navigation .form-button--prev {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.multiform.multiform--in-modal {
  display: flex;
  flex-direction: column;
}
.multiform .multiform-navigation {
  align-items: center;
  min-height: calc(2.5rem + 2px);
}
.multiform .multiform-navigation .form-button--next,
.multiform .multiform-navigation .form-button--prev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.5rem + 2px);
  transform: scale(1);
  opacity: 1;
  transform-origin: center center;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.multiform .multiform-navigation .form-button--placeholder,
.multiform .multiform-navigation .form-button--hidden {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
}
.multiform .multiform-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.multiform .multiform-radio-group .invalid-feedback {
  display: none;
  width: 100%;
}
.multiform .multiform-radio-group.is-invalid .invalid-feedback {
  display: block;
}
.multiform .multiform-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.multiform .multiform-checkbox-group.is-invalid .form-check-input {
  border-color: var(--bs-form-invalid-border-color, #dc3545);
}
.multiform .multiform-checkbox-group.is-invalid .form-check-label {
  color: var(--bs-form-invalid-color, #dc3545);
}
.multiform .multiform-checkbox-group .invalid-feedback {
  display: none;
  width: 100%;
}
.multiform .multiform-checkbox-group.is-invalid .invalid-feedback {
  display: block;
}
.multiform .form-indicators {
  --multiform-indicator-active: #0d6efd;
  --multiform-indicator-muted: #98a2b3;
  --multiform-indicator-text: #667085;
  --multiform-indicator-line-width: 2.75rem;
  --multiform-indicator-line-height: 3px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.multiform .form-indicators .step-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--multiform-indicator-text);
  transition: color 240ms ease, opacity 240ms ease, transform 240ms ease;
}
.multiform .form-indicators .step-indicator.clickable {
  cursor: pointer;
}
.multiform .form-indicators .step-indicator.active {
  color: var(--multiform-indicator-active);
}
.multiform .form-indicators .step-indicator--summary {
  color: #9c9c9c;
}
.multiform .form-indicators .step-indicator__label {
  line-height: 1;
}
.multiform .form-indicators .step-indicator__line {
  display: block;
  width: var(--multiform-indicator-line-width);
  height: var(--multiform-indicator-line-height);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.32;
  transform: scaleX(0.35);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 280ms ease, background-color 280ms ease;
}
.multiform .form-indicators .step-indicator.active .step-indicator__line {
  opacity: 1;
  transform: scaleX(1);
}
.multiform .form-indicators[data-transition-direction=forward] .step-indicator__line {
  transform-origin: left center;
}
.multiform .form-indicators[data-transition-direction=backward] .step-indicator__line {
  transform-origin: right center;
}
.multiform .form-indicators[data-transition-direction=none] .step-indicator__line {
  transform-origin: center center;
}
.multiform .form-indicators--icons .step-indicator {
  color: var(--multiform-indicator-muted);
  font-size: 0.95rem;
}
.multiform .form-indicators--icons .step-indicator:not(.active) {
  opacity: 0.55;
}
.multiform .form-indicators--text .step-indicator {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.multiform .form-indicators--text .step-indicator:not(.active) {
  opacity: 0.65;
}
.multiform .form-indicators--text_underscore {
  gap: 0.85rem 1rem;
}
.multiform .form-indicators--text_underscore .step-indicator {
  flex-direction: column;
  gap: 0.45rem;
  min-width: 4.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.multiform .form-indicators--underscore {
  gap: 0.75rem;
  --multiform-indicator-line-width: 2.4rem;
}
.multiform .form-indicators--underscore .step-indicator {
  flex-direction: column;
  min-width: var(--multiform-indicator-line-width);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  color: var(--multiform-indicator-muted);
}
.multiform .multiform-pages {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.multiform .form-page {
  width: 100%;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current,
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: transform 360ms ease;
  will-change: transform;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current {
  z-index: 1;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next {
  z-index: 2;
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current.form-page--transition-forward {
  transform: translate3d(0, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next.form-page--transition-forward {
  transform: translate3d(100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current.form-page--transition-backward {
  transform: translate3d(0, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next.form-page--transition-backward {
  transform: translate3d(-100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-current.form-page--transition-forward {
  transform: translate3d(-100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-next.form-page--transition-forward {
  transform: translate3d(0, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-current.form-page--transition-backward {
  transform: translate3d(100%, 0, 0);
}
.multiform .multiform-pages.multiform-pages--transitioning.multiform-pages--animating > .form-page.form-page--transition-next.form-page--transition-backward {
  transform: translate3d(0, 0, 0);
}
.multiform .file-upload-container {
  margin-bottom: 1rem;
}
.multiform .file-upload-container .upload-area {
  min-height: 132px;
  padding: 1rem 1.25rem;
  border: 2px dashed #b6c4d2;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #f2f7fc 100%);
  color: #435467;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.multiform .file-upload-container .upload-area:hover {
  border-color: #7fa7c8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.multiform .file-upload-container .upload-area.dragging {
  border-color: #2a7db8;
  background: linear-gradient(180deg, #eef8ff 0%, #e7f2ff 100%);
  box-shadow: 0 0 0 4px rgba(42, 125, 184, 0.12), 0 14px 30px rgba(16, 24, 40, 0.14);
  transform: translateY(-2px);
}
.multiform .file-upload-container .upload-area .file-select {
  color: #145b99;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 91, 153, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.multiform .file-upload-container .upload-area .file-select:hover {
  color: #0f4a7d;
  border-color: rgba(15, 74, 125, 0.7);
}
.multiform .file-upload-container .file-preview-list {
  margin-top: 0.75rem;
}
.multiform .file-upload-container .file-preview-list .file-image {
  height: fit-content;
  z-index: 2;
}
.multiform .file-upload-container .file-preview-list .file-preview-image {
  object-fit: cover;
}
.multiform .file-upload-container .file-preview-list .file-preview-delete-button {
  width: 28px;
  height: 28px;
  z-index: 2;
}
.multiform .file-upload-container .file-preview-list .badge {
  height: fit-content;
  width: fit-content;
  z-index: 2;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area {
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  transition: min-height 0.25s ease, padding 0.2s ease;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area .upload-prompt {
  width: 100%;
  text-align: center;
  padding: 0.5rem 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area .file-preview-list {
  margin-top: 0.5rem;
  width: 100%;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files {
  min-height: 0;
  padding: 0.75rem;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files .file-preview-list {
  margin-top: 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files.upload-single-file {
  min-height: 132px;
  align-items: center;
  justify-content: center;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files.upload-single-file .file-preview-list {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files.upload-single-file .file-item {
  width: 160px;
  max-width: 160px;
  padding: 0;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files:not(.upload-single-file)::after {
  content: "+ Add more";
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.45rem 0;
  border: 1.5px dashed #b6c4d2;
  border-radius: 8px;
  color: #7a93aa;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.multiform .file-upload-container.file-upload-container--preview-inside .upload-area.has-files:not(.upload-single-file):hover::after {
  border-color: #7fa7c8;
  color: #145b99;
}
.multiform .sortable-block .fill-blank {
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  width: 80px;
  display: inline-block;
  text-align: center;
}
.multiform .draggable-pill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.multiform .drag-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--bs-body-color);
  box-shadow: var(--bs-box-shadow-sm);
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.multiform .drag-pill:hover {
  border-color: var(--primary);
  box-shadow: var(--bs-box-shadow);
  transform: translateY(-1px);
}
.multiform .drag-pill:active {
  cursor: grabbing;
  transform: scale(0.99);
}
.multiform .drag-pill .pill-label {
  font-weight: 600;
  line-height: 1.1;
}
.multiform .drag-pill .pill-delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 50%;
  background: #fff;
  color: #dc3545;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.multiform .drag-pill .pill-delete-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.multiform .drag-pill.used {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ */
/* Multiform nav relocated into a real modal footer                   */
/* ------------------------------------------------------------------ */
/*
 * When a multiform is inside a modal, multiform_navigation.js moves its
 * .multiform-navigation out of the form and into a .modal-footer sibling of
 * .modal-body (creating the footer if the modal doesn't already have one),
 * and marks the modal scrollable so .modal-body scrolls while the header and
 * this footer stay pinned in view — the standard Bootstrap
 * modal-dialog-scrollable layout, applied only to modals that need it.
 */
.modal-footer > .multiform-navigation {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-current,
  .multiform .multiform-pages.multiform-pages--transitioning > .form-page.form-page--transition-next {
    transition: none !important;
  }
}
@media (max-width: 576px) {
  .multiform .file-upload-container .upload-area {
    min-height: 116px;
    padding: 0.9rem;
  }
}
.multiform--dropdown {
  position: relative;
}

.multiform--dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  max-width: calc(100vw - 1rem);
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem 0;
  max-height: min(18rem, 100vh - 1rem);
  z-index: 1085;
  overflow-y: auto;
}
.multiform--dropdown-menu.show {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.multiform--dropdown-menu .filtered-items-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
.multiform--dropdown-menu .multiform--dropdown-divider {
  margin: 0.5rem 0;
}
.multiform--dropdown-menu li {
  list-style: none;
}
.multiform--dropdown-menu .multiform--dropdown-item {
  padding: 0 0.5rem;
  cursor: pointer;
  text-decoration: none !important;
  color: #333;
}
.multiform--dropdown-menu .multiform--dropdown-item:hover {
  background-color: #f0f0f0;
}

/* ----- Form Builder: Section layout element ----- */
.form-section-wrapper {
  margin-top: 1.5rem;
}
.form-section-wrapper:first-child {
  margin-top: 0;
}

.form-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  box-sizing: border-box;
  box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06);
}

.form-section-header {
  margin-bottom: 1.25rem;
}

.form-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.35rem 0;
  line-height: 1.15;
  color: #0f172a;
}

.form-section-subtitle {
  color: #64748b;
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.form-section[data-title-position=left] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
}
.form-section[data-title-position=left] .form-section-header {
  margin-bottom: 0;
}
.form-section[data-title-position=left] .form-section-body {
  margin: 0;
}

@media (max-width: 767.98px) {
  .form-section {
    padding: 1.25rem;
  }
  .form-section[data-title-position=left] {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
/* ----- Form Builder editor: section card ----- */
.masonry-field--section .masonry-field-header-label input.masonry-field-name {
  font-weight: 600;
}

.multiform-hotspot-container {
  -webkit-user-select: none;
  user-select: none;
}
.multiform-hotspot-container .hotspot-region {
  transition: background-color 0.12s ease, border-color 0.12s ease;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: crosshair;
}
.multiform-hotspot-container:not([disabled]) .hotspot-region:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
}
.multiform-hotspot-container .hotspot-region.selected {
  background-color: rgba(13, 110, 253, 0.25);
  border-color: #0d6efd;
}
.multiform-hotspot-container .hotspot-region.selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  background: #0d6efd;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.multiform-hotspot-container[disabled] {
  cursor: default;
}
.multiform-hotspot-container[disabled] .hotspot-region {
  cursor: default;
}

/*# sourceMappingURL=multiform.css.map */

/* medialibrary.css */
@charset "UTF-8";
.video-player-container {
  position: relative;
  display: inline-block;
}
.video-player-container video {
  display: block;
  width: 100%; /* ensure it defines the container’s size */
  height: auto;
}
.video-player-container .play-pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  z-index: 4; /* above overlay */
  pointer-events: none; /* clicks pass through to overlay/video */
}
.video-player-container .video-click-layer {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 3;
}

.has-background-media {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.has-background-media video, .has-background-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.has-background-media .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.has-background-media .overlaid-content {
  position: relative;
  z-index: 2;
}

/* =========================
   Media Library Page
   ========================= */
.media-library {
  padding: 2rem;
  position: relative;
  padding-top: 3rem;
  min-height: 300px;
}
.media-library .library-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #333;
}
.media-library .media-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  min-height: 300px;
}
.media-library .media-card .media-thumb {
  position: relative;
}
.media-library .media-card .media-thumb .media-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.media-library .media-card .media-thumb .video-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 0.5rem;
}
.media-library .media-card .media-content {
  flex: 1;
  padding: 1rem;
}
.media-library .media-card .media-content .media-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.media-library .media-card .media-content .media-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.media-library .media-card .media-content .media-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.media-library .media-card .media-content .media-meta {
  font-size: 0.8rem;
  color: #888;
}
.media-library .media-card .media-content .media-meta .media-date {
  font-style: italic;
}
.media-library .media-card .media-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.media-library .media-card .media-actions a,
.media-library .media-card .media-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.media-library .media-card .media-actions .btn-download {
  background: #374955;
  color: #fff;
}
.media-library .media-card .media-actions .btn-download:hover {
  background: rgb(44.9821428571, 59.7035714286, 69.5178571429);
}
.media-library .media-card .media-actions .btn-edit {
  background: #308478;
  color: #fff;
}
.media-library .media-card .media-actions .btn-edit:hover {
  background: rgb(41.2, 113.3, 103);
}
.media-library .media-card .media-actions .btn-delete {
  background: #ff7e80;
  color: #fff;
}
.media-library .media-card .media-actions .btn-delete:hover {
  background: rgb(255, 100.5, 102.8953488372);
}

.media-grid:not(:has(.media-card:not(.template))) {
  display: none;
}

/*# sourceMappingURL=medialibrary.css.map */

/* activities.css */
.activity-take {
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
  padding-top: 6rem;
}

/* Activity shell */
.activity-shell {
  position: relative;
  max-width: 1100px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

/* Override legacy .activity-take flex centering styles when using the newer shell layout. */
.activity-take.activity-shell {
  max-width: none;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 2rem;
  min-height: calc(100vh - 74px - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
}
.activity-take.activity-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 0;
  pointer-events: none;
}
.activity-take.activity-shell > .activity-shell__hero,
.activity-take.activity-shell > .quiz-card-wrapper {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
}

.activity-shell__hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #d7dee8;
  background: linear-gradient(140deg, #f8fbff 0%, #eef4ff 60%, #f6f9ff 100%);
}

.activity-shell__hero-left {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7edf9;
  color: #334b78;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
}

.activity-shell__hero-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.activity-shell__action {
  border-radius: 10px;
  font-weight: 600;
}

.activity-take.activity-shell .quiz-card-wrapper {
  max-width: none;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #dce4ef;
  background: #f7f9fc;
  box-shadow: 0 10px 28px rgba(18, 41, 74, 0.12);
  padding: 1rem;
}

/* Main quiz container */
.activity-take.activity-shell .quiz-card {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
}

/* Title */
.activity-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #1e3357;
}

@media (max-width: 768px) {
  .activity-shell__hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .activity-shell__hero-right {
    width: 100%;
    justify-content: flex-start;
  }
}/*# sourceMappingURL=activities.css.map */
/* activities.css */
/* Question Creator Styling */
/* === Brand Palette === */
.content-area {
  background-color: aliceblue !important;
}

#components .question-sortable-header,
#components .component-sortable-header {
  cursor: grab;
}
#components .question-sortable-header button,
#components .question-sortable-header .btn,
#components .question-sortable-header input,
#components .question-sortable-header textarea,
#components .question-sortable-header select,
#components .question-sortable-header a,
#components .component-sortable-header button,
#components .component-sortable-header .btn,
#components .component-sortable-header input,
#components .component-sortable-header textarea,
#components .component-sortable-header select,
#components .component-sortable-header a {
  cursor: auto;
}
#components .component-drag-handle,
#components .drag-handle-mc,
#components .drag-handle-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-width: 1.5rem;
  color: #6b7c88;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
}
#components .component-drag-handle {
  color: var(--bs-secondary-color, #6c757d);
}
#components .component-drag-handle:hover {
  color: var(--primary, #0d6efd);
}
#components {
  /* Multiple choice options */
}
#components .mc-options-container {
  margin-top: 0.75rem;
  padding-left: 2rem;
}
#components .mc-options-container .mc-option {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  transition: background 0.2s ease;
}
#components .mc-options-container .mc-option.mc-option-correct {
  border-color: #80f9c0;
  background: #f0fdf6;
}
#components .mc-options-container .mc-option:hover {
  background: #f3f4f6;
}
#components .mc-options-container .mc-option .drag-handle-mc {
  padding: 0.25rem;
}
#components .mc-options-container .mc-option .drag-handle-mc:hover {
  color: #ff8150;
}
#components .mc-options-container .mc-option .mc-option-text {
  flex: 1;
}
#components .mc-options-container .mc-option .mc-correct-checkbox {
  margin-top: 0;
}
#components .mc-options-container .mc-option .mark-correct-label {
  color: #308478;
  padding-left: 0;
}
#components .mc-options-container .mc-option .remove-mc-option-btn {
  color: #ff7e80;
}
#components .mc-options-container .mc-option .remove-mc-option-btn:hover {
  color: rgb(255, 75, 77.7906976744);
}
#components {
  /* Fill in the blank editor */
}
#components .fill-blank-editor {
  margin-top: 1rem;
}
#components .fill-blank-editor .fill-blank-preview {
  font-style: italic;
}
#components .fill-blank-editor .fill-blank-preview input {
  margin: 0 0.25rem;
}
#components .fill-blank-editor .fill-blank-block {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.75rem;
}
#components .fill-blank-editor .fill-blank-block .fb-answer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#components .fill-blank-editor .fill-blank-block .remove-fb-answer-btn {
  color: #ff7e80;
}
#components {
  /* Order choices */
}
#components .order-option {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}
#components .order-option .drag-handle-order {
  margin-right: 0.5rem;
}
#components .order-option .drag-handle-order:hover {
  color: #ff8150;
}
#components .order-option .remove-order-option-btn {
  color: #ff7e80;
}
#components {
  /* Preview blocks */
}
#components .preview-sortable-block {
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 6px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}
#components .preview-sortable-block label {
  font-weight: 500;
}

.media-component .media-selector .searchable-input {
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
.media-component .media-selector .dropdown-menu {
  max-height: 240px;
  overflow-y: auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.media-component .media-selector .dropdown-menu .dropdown-item {
  padding: 0.5rem 0.75rem;
}
.media-component .media-selector .dropdown-menu .dropdown-item:hover {
  background-color: #f3f4f6;
}
.media-component .selected-media {
  background: #f9fafb;
  border-color: #e5e7eb;
}
.media-component .selected-media .fw-semibold {
  color: #374955;
}

#activityMultiform.multiform--final-page .multiform-navigation {
  display: none !important;
}
#activityMultiform .submitbtn-activity {
  width: 100%;
  margin-top: 1.5rem;
}
#activityMultiform .submitbtn-activity__prev {
  white-space: nowrap;
}
#activityMultiform:not(.multiform--has-previous-page) .submitbtn-activity__prev {
  display: none !important;
}
#activityMultiform .submitbtn-activity--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
#activityMultiform .submitbtn-activity--center .submitbtn-activity__prev--link {
  padding: 0;
  font-size: 0.9rem;
  color: #6c757d;
  text-decoration: underline;
}
#activityMultiform .submitbtn-activity--right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
#activityMultiform .submitbtn-activity--right .submitbtn-activity__submit {
  margin-left: auto;
}
@media (max-width: 575.98px) {
  #activityMultiform .submitbtn-activity--right {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #activityMultiform .submitbtn-activity--right .submitbtn-activity__submit,
  #activityMultiform .submitbtn-activity--right .submitbtn-activity__prev {
    width: 100%;
  }
}

.quiz-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #e5e7eb;
}
.quiz-footer-actions .left-actions {
  display: flex;
  gap: 0.75rem;
}
.quiz-footer-actions .left-actions .add-question-btn {
  background-color: #ff7e80;
  border-color: #ff7e80;
  color: #fff;
}
.quiz-footer-actions .left-actions .add-question-btn:hover {
  background-color: rgb(255, 90.3, 92.8534883721);
}
.quiz-footer-actions .left-actions .remove-quiz-btn {
  border: 1px solid #e5e7eb;
  color: #e63946;
}
.quiz-footer-actions .left-actions .remove-quiz-btn:hover {
  background-color: rgba(230, 57, 70, 0.08);
  border-color: #e63946;
}
.quiz-footer-actions .right-actions {
  display: flex;
  gap: 0.75rem;
}
.quiz-footer-actions .right-actions .btn {
  border-radius: 6px;
  padding: 0.5rem 1rem;
}
.quiz-footer-actions .right-actions .btn-light {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}
.quiz-footer-actions .right-actions .btn-success {
  background-color: #308478;
  border-color: #308478;
  color: #fff;
}
.quiz-footer-actions .right-actions .btn-success:hover {
  background-color: rgb(38.48, 105.82, 96.2);
}

/* Component explainer */
.components-explainer {
  background: #f0f9ff;
  border: 1px solid #d0e7ff;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  color: #374955;
}
.components-explainer h5 {
  color: #308478;
}

/* Page break styling */
.page-break-component {
  background: #ffdc75;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  text-align: center;
}
.page-break-component p {
  color: #000;
  margin-bottom: 0.5rem;
}
.page-break-component button {
  margin-top: 0.5rem;
}

/* Media component styling */
.media-component h3 {
  color: #374955;
  margin-bottom: 0.75rem;
}
.media-component .multiform--dropdown input.searchable-input {
  border-radius: 6px;
  border: 1px solid #d1d5db;
}
.media-component .multiform--dropdown input.searchable-input:focus {
  border-color: #308478;
  box-shadow: 0 0 0 2px rgba(48, 132, 120, 0.2);
}
.media-component .multiform--dropdown .multiform--dropdown-menu {
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.media-component .multiform--dropdown .multiform--dropdown-menu .multiform--dropdown-item {
  padding: 0.5rem 0.75rem;
  color: #374955;
  transition: background 0.2s;
}
.media-component .multiform--dropdown .multiform--dropdown-menu .multiform--dropdown-item:hover {
  background: #f3f4f6;
  color: #308478;
}
.media-component button {
  margin-top: 0.75rem;
}

.activity-take {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  background: url("/public/img/abstractBG.jpg") center/cover no-repeat fixed;
}
.activity-take::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}
.activity-take .quiz-card-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
}
.activity-take .quiz-card-wrapper .quiz-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.5rem 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.activity-take .quiz-card-wrapper .quiz-card .quiz-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.activity-take .quiz-card-wrapper .quiz-card .activity-title {
  margin: 1rem 0;
}

.btn {
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease-in-out;
}
.btn.btn-orange {
  background: #ff7e80;
  border: none;
  color: #fff;
}
.btn.btn-orange:hover {
  background: rgb(255, 100.5, 102.8953488372);
}
.btn.btn-green {
  background: #308478;
  border: none;
  color: #fff;
}
.btn.btn-green:hover {
  background: rgb(41.2, 113.3, 103);
}

/* Sortable.js styling for draggable pills */
.sortable-ghost {
  display: none !important;
}

.sortable-chosen {
  opacity: 0.5;
}

.sortable-drag {
  opacity: 1;
}

.learning-section {
  justify-content: space-evenly;
  padding: 4rem 2rem;
  min-height: 300px;
  position: relative;
}
.learning-section .learning-card {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  font-family: Arial, sans-serif;
  margin-bottom: 16px;
  padding: 0 !important;
}
.learning-section .learning-card .card-left {
  flex: 0 0 40%;
}
.learning-section .learning-card .card-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.learning-section .learning-card .card-middle {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.learning-section .learning-card .card-middle .card-label {
  color: #999;
  margin-bottom: 0.25rem;
}
.learning-section .learning-card .card-middle .card-title {
  font-weight: bold;
  color: #ff6600;
  margin-bottom: 6px;
}
.learning-section .learning-card .card-middle .card-description,
.learning-section .learning-card .card-middle .card-attempts {
  color: #555;
  margin: 2px 0;
}
.learning-section .learning-card .card-middle .card-requirement {
  font-style: italic;
  color: #888;
  margin-bottom: 8px;
}
.learning-section .learning-card .card-middle .card-score {
  color: #333;
  font-weight: 600;
}
.learning-section .learning-card .card-middle .start-button {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 20px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s;
}
.learning-section .learning-card .card-middle .start-button.green {
  background-color: #a5e214;
  color: #000;
}
.learning-section .learning-card .card-middle .start-button.green:hover {
  background-color: #92c511;
}
.learning-section .learning-card .card-middle .start-button.orange {
  background-color: #ff9900;
  color: white;
}
.learning-section .learning-card .card-middle .start-button.orange:hover {
  background-color: #e48000;
}
.learning-section .learning-card .card-middle .start-button.resume {
  background-color: #f4c542;
  color: #333;
}
.learning-section .learning-card .card-middle .start-button.resume:hover {
  background-color: #e0b636;
}
.learning-section .learning-card .card-middle .btn.download-cert {
  display: inline-block;
  background: #eefae4;
  color: #2c7b00;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  margin-top: auto;
  border: 1px solid #a5e214;
}
.learning-section .learning-card .card-right {
  flex: 0 0 30px;
  background: #e5e5e5;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #333;
  letter-spacing: 0.6px;
  padding: 8px 4px;
}
.learning-section .learning-card .card-right.complete {
  background-color: #80c342 !important;
  color: white;
}
.learning-section .learning-card .card-right.incomplete {
  background-color: #e5e5e5;
  color: #333;
}

@media (max-width: 1024px) {
  .learning-section {
    padding: 2rem;
  }
  .learning-section .learning-card {
    flex-direction: column;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .learning-section .learning-card .card-left {
    width: 100%;
    height: auto;
  }
  .learning-section .learning-card .card-left img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .learning-section .learning-card .card-middle {
    padding: 1.25rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
  }
  .learning-section .learning-card .card-middle .card-title {
    color: #ff6600;
    margin-bottom: 0.5rem;
  }
  .learning-section .learning-card .card-middle .card-description,
  .learning-section .learning-card .card-middle .card-attempts {
    margin: 0.2rem 0;
  }
  .learning-section .learning-card .card-middle .card-requirement {
    margin-bottom: 1rem;
    color: #777;
  }
  .learning-section .learning-card .card-middle .start-button {
    padding: 10px 16px;
    border-radius: 25px;
  }
  .learning-section .learning-card .card-right {
    writing-mode: horizontal-tb;
    border-left: none;
    border-top: 1px solid #ccc;
    padding: 0.75rem 1.25rem;
    justify-content: center;
    background: #f0f0f0;
  }
}
.learning-card.border-success {
  border: 2px solid #80c342;
}

/* Main quiz container */
.quiz-card {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Header row */
.quiz-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.quiz-card-header .btn {
  padding: 0.4rem 1rem;
}

/* Title */
.activity-title {
  color: #222;
}

/* ============ Each Question as a Card ============ */
.sortable-block {
  background: #f9fafc;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s ease;
}
.sortable-block:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* Question text (the label) */
.sortable-block > .d-flex > label {
  margin-bottom: 0rem;
}

/* Answers list */
.sortable-block .form-check {
  margin-bottom: 0.5rem;
}
.sortable-block .form-check .form-check-input {
  margin-right: 0.5rem;
}

/* Submit / pagination buttons */
.form-button--next.btn-primary {
  background-color: #308478;
  border: none;
}
.form-button--next.btn-primary:hover {
  background-color: #246c61;
}

/* =========================
   Completion Toast Modal
   ========================= */
.toast-container {
  position: fixed !important;
  z-index: 1055;
}
.toast-container #notificationToast {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: visible;
}
.toast-container #notificationToast .rt-header {
  position: relative;
  padding: 1rem 1.5rem;
  text-align: center;
  color: #fff;
}
.toast-container #notificationToast .rt-header.rt-pass {
  background: linear-gradient(135deg, #308478, #2c5f5c);
}
.toast-container #notificationToast .rt-header.rt-fail {
  background: linear-gradient(135deg, #c62828, #8b0000);
}
.toast-container #notificationToast .rt-header.rt-partial {
  background: linear-gradient(135deg, #ff8150, #e06a38);
}
.toast-container #notificationToast .rt-header .rt-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}
.toast-container #notificationToast .rt-body {
  padding: 1.2rem 1.5rem 0.5rem;
  text-align: center;
}
.toast-container #notificationToast .rt-body .rt-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.toast-container #notificationToast .rt-body .rt-badges .rt-badge {
  background: #f1f3f5;
  color: #333;
  padding: 0.4rem 0.9rem;
  border-radius: 1rem;
}
.toast-container #notificationToast .rt-actions {
  padding: 1rem 1.5rem 1.25rem;
  text-align: center;
  background: #fafafa;
  border-top: 1px solid #eee;
  position: relative;
  overflow: visible;
}
.toast-container #notificationToast .rt-actions .dropdown-menu {
  z-index: 1060;
}
.toast-container #notificationToast .rt-actions .btn.orange {
  display: inline-block;
  background: #ff8150;
  color: #fff !important;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.toast-container #notificationToast .rt-actions .btn.orange:hover {
  background: #e36c3f;
}
.toast-container #notificationToast .rt-actions {
  /* remove link look for btn-link inside .orange */
}
.toast-container #notificationToast .rt-actions .btn-link.btn.orange {
  border: none;
}

#incompleteModal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#incompleteModal .modal-content {
  background-color: #fff;
  padding: 2rem;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  text-align: center;
  margin: 5rem auto;
}
#incompleteModal .modal-content h3 {
  margin-bottom: 1rem;
}
#incompleteModal .modal-content p {
  margin-bottom: 1.5rem;
}
#incompleteModal .modal-content .modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
#incompleteModal .modal-content .modal-buttons button {
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  border: 2px solid #374955;
  background-color: #fff;
  color: #374955;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
#incompleteModal .modal-content .modal-buttons button:hover {
  background-color: #374955;
  color: #fff;
}

/* ===== Fullscreen overlay remains ===== */
#toastOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1054;
}

/* ===== Toast card ===== */
.result-toast {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  max-height: 100%;
  /* card fits container */
  /* ===== Scrollable inner area ===== */
}
.result-toast .rt-body, .result-toast .rt-actions {
  flex-shrink: 0;
}
.result-toast .rt-scroll {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  flex: 1 1 auto;
  min-height: 0;
  /* important for flexbox scroll */
}

#moduleModal .modal-content {
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
  border: none;
}
#moduleModal .modal-header {
  padding: 1.5rem 1.75rem 0.75rem;
}
#moduleModal .modal-header .modal-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.25rem;
}
#moduleModal .modal-header .modal-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}
#moduleModal .modal-header .btn-close {
  opacity: 0.4;
}
#moduleModal .modal-header .btn-close:hover {
  opacity: 0.7;
}
#moduleModal .modal-body {
  padding: 0.75rem 1.75rem 1.75rem;
}
#moduleModal .modal-body label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #374955;
  margin-bottom: 0.35rem;
}
#moduleModal .modal-body .form-control,
#moduleModal .modal-body .form-select {
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  transition: all 0.15s ease;
}
#moduleModal .modal-body .form-control:focus,
#moduleModal .modal-body .form-select:focus {
  border-color: #308478;
  box-shadow: 0 0 0 3px rgba(48, 132, 120, 0.15);
}
#moduleModal .modal-body .form-control::placeholder,
#moduleModal .modal-body .form-select::placeholder {
  color: #9ca3af;
}
#moduleModal .modal-body .field-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.4rem;
}
#moduleModal .btn-primary,
#moduleModal .btn-success {
  background-color: #308478;
  border-color: #308478;
  border-radius: 8px;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}
#moduleModal .btn-primary:hover,
#moduleModal .btn-success:hover {
  background-color: #256e66;
  border-color: #256e66;
}

.quiz-instructions-content {
  border: none;
  border-radius: 12px;
  overflow: hidden;
}
.quiz-instructions-content .modal-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  padding: 1.25rem 1.75rem;
}
.quiz-instructions-content .modal-header .modal-title {
  color: #1a1a2e;
  font-weight: 700;
  font-size: 1.35rem;
}
.quiz-instructions-content .modal-body {
  padding: 1.75rem;
}
.quiz-instructions-content .modal-body .instructions-headline {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 1rem;
  font-style: italic;
}
.quiz-instructions-content .modal-body .instructions-intro {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.quiz-instructions-content .modal-body .instructions-intro strong {
  color: #1a1a2e;
}
.quiz-instructions-content .modal-body .instructions-structure {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.quiz-instructions-content .modal-body .instructions-structure .structure-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #444;
  border: 1px solid #eee;
}
.quiz-instructions-content .modal-body .instructions-structure .structure-step::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6c757d;
  flex-shrink: 0;
}
.quiz-instructions-content .modal-body .instructions-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 576px) {
  .quiz-instructions-content .modal-body .instructions-cards {
    grid-template-columns: 1fr;
  }
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card:hover {
  border-color: #ced4da;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f1f3f5;
  flex-shrink: 0;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-icon i {
  font-size: 1.1rem;
  color: #495057;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-body strong {
  font-size: 0.85rem;
  color: #1a1a2e;
}
.quiz-instructions-content .modal-body .instructions-cards .instruction-card .instruction-card-body span {
  font-size: 0.8rem;
  color: #6c757d;
  line-height: 1.4;
}
.quiz-instructions-content .modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 1rem 1.75rem;
}
.quiz-instructions-content .modal-footer .btn-primary {
  background: #1a1a2e;
  border-color: #1a1a2e;
  border-radius: 8px;
  padding: 0.5rem 2rem;
  font-weight: 600;
}
.quiz-instructions-content .modal-footer .btn-primary:hover {
  background: #2d2d44;
  border-color: #2d2d44;
}

/*# sourceMappingURL=activities.css.map */

/* catalog.css */
.catalog--section {
  position: relative;
}

.catalog--header {
  gap: 0.75rem;
}

.catalog--body {
  --catalog-filter-width: clamp(240px, 26vw, 320px);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0;
  transition: gap 0.3s ease;
}

.catalog--section.catalog--filters-open .catalog--body {
  gap: 2rem;
}

.catalog--filters {
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.75rem;
  width: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-1rem);
  transition: width 0.35s ease, padding 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  will-change: width, padding, opacity, transform;
}

.catalog--section.catalog--filters-open .catalog--filters {
  width: var(--catalog-filter-width);
  padding: 1.5rem;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.catalog--filters-form {
  font-size: 0.95rem;
}

.catalog--filter-label {
  letter-spacing: 0.08em;
}

.catalog--products {
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.05);
  min-height: 320px;
  min-width: 0;
  overflow: hidden;
  transition: padding 0.35s ease;
}

.catalog--products-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(var(--catalog-card-min, 220px), 1fr));
  overflow: visible;
}

.infinite-scroll--end-message {
  font-size: 0.95rem;
  color: var(--bs-secondary, #6c757d);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 2rem;
}
.infinite-scroll--end-message i {
  font-size: 1.1rem;
}

.catalog--products[data-view=grid] {
  --catalog-card-min: 260px;
}

.catalog--products[data-view=grid-compact] {
  --catalog-card-min: 140px;
}

.catalog--products[data-view=grid-compact] .catalog--products-grid {
  gap: 0.85rem;
}

.catalog--products[data-view=list] {
  --catalog-card-min: 100%;
}

.catalog--products[data-view=list] .catalog--products-grid {
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.catalog--product-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.08);
  min-height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.catalog--product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
}

.catalog--product-media {
  width: 100%;
}

.catalog--product-thumbnail {
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.15));
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--bs-primary, #0d6efd);
  overflow: hidden;
}
.catalog--product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.catalog--product-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
}

.catalog--product-title {
  font-size: 1rem;
  font-weight: 600;
}

.catalog--product-actions {
  margin-top: auto;
}

.catalog--product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.catalog--product-price {
  font-weight: 700;
  font-size: 1.05rem;
}

.catalog--products[data-view=list] .catalog--product-card {
  flex-direction: row;
  align-items: stretch;
  padding: 1.25rem;
  min-height: unset;
}

.catalog--products[data-view=list] .catalog--product-media {
  flex: 0 0 220px;
}

.catalog--products[data-view=list] .catalog--product-body {
  justify-content: center;
}

.catalog--products[data-view=grid-compact] .catalog--product-title {
  font-size: 0.95rem;
}

.catalog--products[data-view=grid-compact] .catalog--product-description {
  font-size: 0.85rem;
}

.catalog--products[data-view=grid-compact] .catalog--product-card {
  padding: 0.85rem;
}

.catalog--products.is-transitioning .catalog--product-card {
  animation: catalogCardSwap 0.45s ease both;
  animation-delay: calc(var(--catalog-card-order, 0) * 50ms);
}

.catalog-card-entering {
  animation: catalogCardSwap 0.45s ease both;
  animation-delay: calc(var(--catalog-card-enter-index, 0) * 60ms) !important;
  animation-fill-mode: both;
}

.catalog--view-icon.is-active .bi {
  color: var(--bs-primary, #0d6efd);
}

.catalog--filter-toggle {
  color: inherit;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.catalog--filter-indicator {
  position: absolute;
  top: -0.15rem;
  right: -0.1rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--bs-danger, #dc3545);
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.catalog--filter-toggle.has-active-filters .catalog--filter-indicator {
  transform: scale(1);
}

.cart--toggle {
  position: relative;
  z-index: 1;
}
.cart--toggle.floating-button {
  position: fixed;
}

.cart--toggle.cart--wiggle {
  animation: cartWiggle 0.6s ease;
}

.cart--toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.cart--toggle.cart--wiggle::after {
  animation: cartPing 1.2s ease-out forwards 2;
}

@keyframes cartWiggle {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes cartPing {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.5);
  }
  60% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2);
  }
}
.cart--spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  animation: cartSpark 0.6s ease forwards;
  transform: translate(-50%, -50%);
  z-index: 1055;
  opacity: 0;
}

@keyframes cartSpark {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--cart-spark-x)), calc(-50% + var(--cart-spark-y))) scale(0);
  }
}
.catalog--price-slider .catalog--price-display {
  font-size: 0.95rem;
}
.catalog--price-slider .catalog--price-slider-inputs {
  position: relative;
  height: 1.75rem;
  display: block;
}
.catalog--price-slider .catalog--price-slider-track {
  --start: 0%;
  --end: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.35rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--bs-border-color, rgba(0, 0, 0, 0.1));
  pointer-events: none;
}
.catalog--price-slider .catalog--price-slider-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start);
  right: calc(100% - var(--end));
  border-radius: inherit;
  background: var(--bs-primary, #0d6efd);
}
.catalog--price-slider .catalog--price-input {
  position: absolute;
  inset: 0;
  --thumb-size: 1rem;
  height: 1.75rem;
  padding: 0;
  background: transparent;
  pointer-events: none;
}
.catalog--price-slider .catalog--price-input::-webkit-slider-thumb {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.catalog--price-slider .catalog--price-input::-moz-range-thumb {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.catalog--price-slider .catalog--price-input::-webkit-slider-runnable-track {
  background: transparent;
}
.catalog--price-slider .catalog--price-input::-moz-range-track {
  background: transparent;
}
.catalog--price-slider .catalog--price-input-min {
  z-index: 3;
}
.catalog--price-slider .catalog--price-input-max {
  z-index: 2;
}

.catalog--options {
  gap: 0.5rem;
}

.catalog--view-control {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 0;
}

.catalog--view-toggle {
  color: inherit;
  position: relative;
  z-index: 3;
}

.catalog--view-toggle:focus-visible,
.catalog--view-icon:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.6);
  outline-offset: 2px;
}

.catalog--view-options {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.5rem);
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(8px);
  z-index: 2;
}

.catalog--view-control.is-open .catalog--view-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.catalog--view-control.is-closing .catalog--view-options {
  opacity: 1;
  pointer-events: none;
  transform: translateY(-50%) translateX(0);
}

.catalog--view-control.is-closing .catalog--view-icon {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.catalog--view-icon {
  color: inherit;
  opacity: 0;
  transform: translateX(8px) scale(0.92);
  transition: color 0.2s ease;
  position: relative;
  z-index: 1;
  --catalog-view-exit-x: 40px;
}

.catalog--view-indicator {
  position: absolute;
  bottom: -0.15rem;
  right: -0.1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px var(--bs-body-bg, #fff);
  transform: scale(0);
  transition: transform 0.2s ease;
}

.catalog--view-control.is-open .catalog--view-icon {
  animation: catalogViewBubble 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--catalog-view-delay-in, 0ms);
}

.catalog--view-control.is-closing .catalog--view-icon {
  animation: catalogViewBubbleOut 0.45s cubic-bezier(0.34, 1.06, 0.64, 1) forwards;
  animation-delay: var(--catalog-view-delay-out, 0ms);
}

.catalog--view-icon:hover .bi,
.catalog--view-icon:focus .bi {
  color: var(--bs-body-color, #212529);
}

.catalog--view-icon.is-active .catalog--view-indicator {
  transform: scale(1);
}

@media (max-width: 991.98px) {
  .catalog--body {
    grid-template-columns: 1fr;
  }
  .catalog--filters {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    transform: translateY(-10px);
  }
  .catalog--section.catalog--filters-open .catalog--filters {
    transform: translateY(0);
  }
  .catalog--products {
    padding: 1.25rem;
  }
  .catalog--products[data-view=list] .catalog--product-card {
    flex-direction: column;
  }
  .catalog--products[data-view=list] .catalog--product-media {
    flex-basis: auto;
  }
}
@media (min-width: 1200px) {
  .catalog--products[data-view=grid] .catalog--products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .catalog--products[data-view=grid-compact] .catalog--products-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .catalog--products[data-view=grid-compact] .catalog--products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@keyframes catalogViewBubble {
  0% {
    opacity: 0;
    transform: translateX(18px) scale(0.85);
  }
  55% {
    opacity: 1;
    transform: translateX(-6px) scale(1.08);
  }
  75% {
    transform: translateX(2px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes catalogViewBubbleOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  30% {
    transform: translateX(-10px) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--catalog-view-exit-x, 40px)) scale(0.78);
  }
}
@keyframes catalogCardSwap {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.activities-admin-dashboard-shell .catalog--product-media,
.portal-activities-catalog-shell .catalog--product-media {
  position: relative;
}
.activities-admin-dashboard-shell .activity-dashboard-card-status,
.activities-admin-dashboard-shell .portal-activity-card-status,
.portal-activities-catalog-shell .activity-dashboard-card-status,
.portal-activities-catalog-shell .portal-activity-card-status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: none;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(25, 135, 84, 0.92);
  color: #fff;
  box-shadow: 0 0.35rem 0.9rem rgba(25, 135, 84, 0.28);
}
.activities-admin-dashboard-shell .activity-dashboard-card-status.is-complete,
.activities-admin-dashboard-shell .portal-activity-card-status.is-complete,
.portal-activities-catalog-shell .activity-dashboard-card-status.is-complete,
.portal-activities-catalog-shell .portal-activity-card-status.is-complete {
  display: inline-flex;
}
.activities-admin-dashboard-shell .activity-dashboard-card-status.is-in-progress,
.activities-admin-dashboard-shell .portal-activity-card-status.is-in-progress,
.portal-activities-catalog-shell .activity-dashboard-card-status.is-in-progress,
.portal-activities-catalog-shell .portal-activity-card-status.is-in-progress {
  display: inline-flex;
  background: rgba(13, 110, 253, 0.88);
  box-shadow: 0 0.35rem 0.9rem rgba(13, 110, 253, 0.28);
}
.activities-admin-dashboard-shell .catalog--product-actions .d-flex,
.portal-activities-catalog-shell .catalog--product-actions .d-flex {
  width: 100%;
}
.activities-admin-dashboard-shell .catalog--product-actions .btn,
.portal-activities-catalog-shell .catalog--product-actions .btn {
  min-width: 0;
}
.activities-admin-dashboard-shell .catalog--products[data-view=list] .catalog--product-actions .d-flex,
.portal-activities-catalog-shell .catalog--products[data-view=list] .catalog--product-actions .d-flex {
  flex-wrap: nowrap;
}
.activities-admin-dashboard-shell .catalog--products[data-view=grid-compact] .catalog--product-description,
.portal-activities-catalog-shell .catalog--products[data-view=grid-compact] .catalog--product-description {
  display: none;
}
.activities-admin-dashboard-shell .catalog--products[data-view=grid-compact] .catalog--product-actions .btn,
.portal-activities-catalog-shell .catalog--products[data-view=grid-compact] .catalog--product-actions .btn {
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}

/*# sourceMappingURL=catalog.css.map */

/* cart.css */
.cart--offcanvas .cart-item-count {
  font-size: 0.7rem;
}
.cart--offcanvas .cart--item-qty-input {
  width: 50px;
}

/*# sourceMappingURL=cart.css.map */

/* generic_contests.css */
/* ==========================================
   Contest Details Group
   ========================================== */
.contest-details-group.form-group-wrapper {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid var(--contest-group-accent, #ff7e80);
  border-radius: 8px;
  padding: 2rem 2.25rem;
}
.contest-details-group.form-group-wrapper .form-group-title {
  color: var(--contest-group-accent-text, #475569);
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.contest-details-group.form-group-wrapper .form-group-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* top full-width input */
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-name-field {
  flex: 1 1 100%;
}
.contest-details-group.form-group-wrapper .form-group-inner {
  /* bottom row layout */
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-image-field {
  flex: 1 1 45%;
  min-width: 320px;
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-image-field .upload-area {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-desc-field {
  flex: 1 1 50%;
  min-width: 320px;
}
.contest-details-group.form-group-wrapper .form-group-inner .contest-desc-field textarea.form-control {
  min-height: 160px;
  resize: vertical;
}
.contest-details-group.form-group-wrapper label.form-label {
  font-weight: 600;
  color: #374955;
}
.contest-details-group.form-group-wrapper > small.text-muted,
.contest-details-group.form-group-wrapper .text-muted.small,
.contest-details-group.form-group-wrapper p.text-muted.small {
  display: block;
  background: var(--contest-group-accent-soft, rgb(255, 242.1, 242.3));
  border-left: 3px solid var(--contest-group-accent, #ff7e80);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--contest-group-accent-text, #475569);
  font-weight: 500;
  line-height: 1.5;
}
.contest-details-group.form-group-wrapper .form-control,
.contest-details-group.form-group-wrapper textarea.form-control {
  border-radius: 6px;
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
}

/* ==========================================
   Contest Dates Group (special field rules)
   ========================================== */
.contest-dates-group.form-group-duplicate .form-control[type=datetime-local] {
  font-size: 0.95rem;
  max-width: 100%;
  border-radius: 6px;
}

/* ==========================================
   Global spacing & consistency
   ========================================== */
.contest-multiform {
  --contest-group-accent: #ff7e80;
  --contest-group-accent-text: rgb(199, 111.16, 115.96);
  --contest-group-accent-soft: rgb(255, 242.1, 242.3);
  --contest-group-accent-soft-border: rgb(233.25, 205.5, 212);
}
.contest-multiform .form-page[data-page] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.contest-multiform .form-page > *:nth-child(12n+1) {
  --contest-group-accent: #ff7e80;
  --contest-group-accent-text: rgb(199, 111.16, 115.96);
  --contest-group-accent-soft: rgb(255, 242.1, 242.3);
  --contest-group-accent-soft-border: rgb(233.25, 205.5, 212);
}
.contest-multiform .form-page > *:nth-child(12n+2) {
  --contest-group-accent: #308478;
  --contest-group-accent-text: rgb(49.96, 115.48, 110.2);
  --contest-group-accent-soft: rgb(234.3, 242.7, 241.5);
  --contest-group-accent-soft-border: rgb(181.5, 207, 210);
}
.contest-multiform .form-page > *:nth-child(12n+3) {
  --contest-group-accent: #4a90e2;
  --contest-group-accent-text: rgb(68.68, 124.12, 186.52);
  --contest-group-accent-soft: rgb(236.9, 243.9, 252.1);
  --contest-group-accent-soft-border: rgb(188, 210, 236.5);
}
.contest-multiform .form-page > *:nth-child(12n+4) {
  --contest-group-accent: #ffa64c;
  --contest-group-accent-text: rgb(199, 139.96, 78.52);
  --contest-group-accent-soft: rgb(255, 246.1, 237.1);
  --contest-group-accent-soft-border: rgb(233.25, 215.5, 199);
}
.contest-multiform .form-page > *:nth-child(12n+5) {
  --contest-group-accent: #6c63ff;
  --contest-group-accent-text: rgb(93.16, 91.72, 207.4);
  --contest-group-accent-soft: rgb(240.3, 239.4, 255);
  --contest-group-accent-soft-border: rgb(196.5, 198.75, 243.75);
}
.contest-multiform .form-page > *:nth-child(12n+6) {
  --contest-group-accent: #3bb273;
  --contest-group-accent-text: rgb(57.88, 148.6, 106.6);
  --contest-group-accent-soft: rgb(235.4, 247.3, 241);
  --contest-group-accent-soft-border: rgb(184.25, 218.5, 208.75);
}
.contest-multiform .form-page > *:nth-child(12n+7) {
  --contest-group-accent: #d96c75;
  --contest-group-accent-text: rgb(171.64, 98.2, 108.04);
  --contest-group-accent-soft: rgb(251.2, 240.3, 241.2);
  --contest-group-accent-soft-border: rgb(223.75, 201, 209.25);
}
.contest-multiform .form-page > *:nth-child(12n+8) {
  --contest-group-accent: #5b8def;
  --contest-group-accent-text: rgb(80.92, 121.96, 195.88);
  --contest-group-accent-soft: rgb(238.6, 243.6, 253.4);
  --contest-group-accent-soft-border: rgb(192.25, 209.25, 239.75);
}
.contest-multiform .form-page > *:nth-child(12n+9) {
  --contest-group-accent: #c58a2b;
  --contest-group-accent-text: rgb(157.24, 119.8, 54.76);
  --contest-group-accent-soft: rgb(249.2, 243.3, 233.8);
  --contest-group-accent-soft-border: rgb(218.75, 208.5, 190.75);
}
.contest-multiform .form-page > *:nth-child(12n+10) {
  --contest-group-accent: #7d8597;
  --contest-group-accent-text: rgb(105.4, 116.2, 132.52);
  --contest-group-accent-soft: rgb(242, 242.8, 244.6);
  --contest-group-accent-soft-border: rgb(200.75, 207.25, 217.75);
}
.contest-multiform .form-page > *:nth-child(12n+11) {
  --contest-group-accent: #e76f51;
  --contest-group-accent-text: rgb(181.72, 100.36, 82.12);
  --contest-group-accent-soft: rgb(252.6, 240.6, 237.6);
  --contest-group-accent-soft-border: rgb(227.25, 201.75, 200.25);
}
.contest-multiform .form-page > *:nth-child(12n+12) {
  --contest-group-accent: #2a9d8f;
  --contest-group-accent-text: rgb(45.64, 133.48, 126.76);
  --contest-group-accent-soft: rgb(233.7, 245.2, 243.8);
  --contest-group-accent-soft-border: rgb(180, 213.25, 215.75);
}
.contest-multiform .form-control,
.contest-multiform textarea.form-control {
  border-radius: 6px;
}
.contest-multiform .form-group-wrapper + .form-group-wrapper {
  margin-top: 1.25rem;
}

/* ==========================================
   Entry Fields Group (fieldset version)
   ========================================== */
.entry-fields-group.form-group-duplicate {
  background: #fff;
  border: 1px solid #ddd;
  border-left: 4px solid var(--contest-group-accent, #ff7e80);
  border-radius: 8px;
  margin-bottom: 2rem;
}
.entry-fields-group.form-group-duplicate legend {
  color: var(--contest-group-accent-text, #475569);
  font-weight: 700;
  margin-bottom: 1rem;
}
.entry-fields-group.form-group-duplicate {
  /* each checkbox item */
}
.entry-fields-group.form-group-duplicate > .mb-3.row {
  flex: 1 1 calc(33.333% - 2rem);
  max-width: calc(33.333% - 2rem);
  min-width: 260px;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
  /* hide duplicate top label */
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-label {
  display: none;
}
.entry-fields-group.form-group-duplicate > .mb-3.row {
  /* checkbox + label inline */
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-input {
  border: 2px solid var(--contest-group-accent, #ff7e80);
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-input:checked {
  background-color: var(--contest-group-accent, #ff7e80);
  border-color: var(--contest-group-accent, #ff7e80);
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-label {
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}
.entry-fields-group.form-group-duplicate > .mb-3.row .form-check .form-check-label:hover {
  color: #374955;
}

/* ==========================================
   Contest Form Builder
   ========================================== */
.contest-multiform .form-page[data-page="4"]:not(.d-none) .entry-fields-group {
  border: none !important;
  padding: 0 !important;
  background: transparent;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .entry-fields-group > legend {
  color: var(--contest-group-accent-text, #475569);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill:not(.used) {
  border-color: #93c5fd !important;
  background: #f0f7ff !important;
  color: #1e40af;
  font-weight: 600;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill:not(.used):hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.2);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper:empty::after,
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper:not(:has(.masonry-field))::after {
  content: "Click fields on the left to add them here";
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
  padding: 20px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 16px;
  min-height: 300px;
  background: #fffbeb;
  border-color: #fbbf24;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-preview-wrapper:has(.masonry-field) {
  background: #fafbfc;
  border-color: #cbd5e1;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-live-preview {
  border-color: #e2e8f0 !important;
  background: #fff !important;
  padding: 0;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-live-preview > div {
  padding: 24px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill {
  margin: 0 !important;
  text-align: center;
  padding: 8px 10px !important;
  font-size: 1rem;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  background: #fff !important;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill:hover:not(.used) {
  border-color: #818cf8 !important;
  background: #eef2ff !important;
  color: #4338ca;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.15);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill.used {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #94a3b8;
  cursor: default;
  opacity: 0.6;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-source-pill.used .pill-label {
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .form-group-wrapper[data-group-label="Custom Question or Field"] {
  max-width: 100%;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group {
  background: #fafbfc;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid var(--contest-group-accent, #ff7e80) !important;
  border-radius: 10px;
  padding: 16px 18px !important;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group > small.text-muted:first-of-type {
  display: block;
  background: var(--contest-group-accent-soft, rgb(255, 242.1, 242.3));
  border-left: 3px solid var(--contest-group-accent, #ff7e80);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--contest-group-accent-text, #475569);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 14px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group > legend {
  color: var(--contest-group-accent-text, #475569);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .form-label {
  font-size: 1rem;
  font-weight: 600;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .form-control,
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .form-select,
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .searchable-input {
  font-size: 1rem;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .custom-question-actions {
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  margin-top: 6px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .custom-question-actions .add-to-masonry {
  width: 100%;
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  border-radius: 6px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .custom-questions-group .custom-question-actions .add-to-masonry:hover {
  background: #7c3aed;
  border-color: #7c3aed;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field-header {
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  padding: 8px 12px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field-body {
  padding: 12px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field-translator {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  gap: 8px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-view-tabs {
  margin-bottom: 12px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-view-tabs .masonry-view-tab {
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 6px;
}
.contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-view-tabs .masonry-view-tab.active {
  background: #1e293b;
  color: #fff;
  border-color: #1e293b;
}
@media (max-width: 991px) {
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-builder {
    flex-wrap: wrap !important;
    gap: 1rem;
  }
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-left,
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-right,
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .form-group-wrapper[data-group-label="Custom Question or Field"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-field,
  .contest-multiform .form-page[data-page="4"]:not(.d-none) .masonry-live-preview .d-flex.flex-wrap.gap-3 > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
.contest-multiform #form_builder_layout_source .masonry-source-pill:not(.used) {
  border-color: #fcd34d !important;
  background: #fffbeb !important;
  color: #92400e;
  border-style: dashed !important;
}

/* ==========================================
   Contest Setup Groups (fieldset version)
   ========================================== */
.contest-details-group.form-group-duplicate,
.contest-entry-rules-group.form-group-duplicate,
.contest-dates-group.form-group-duplicate,
.contest-draw-verification-group.form-group-duplicate,
.contest-settings-group.form-group-duplicate {
  background: #fafafa;
  border: 1px solid #e1e1e1;
  border-left: 4px solid var(--contest-group-accent, #ff7e80);
  border-radius: 8px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.25rem;
}
.contest-details-group.form-group-duplicate legend,
.contest-entry-rules-group.form-group-duplicate legend,
.contest-dates-group.form-group-duplicate legend,
.contest-draw-verification-group.form-group-duplicate legend,
.contest-settings-group.form-group-duplicate legend {
  font-weight: 700;
  color: var(--contest-group-accent-text, #475569);
  margin-bottom: 1rem;
}
.contest-details-group.form-group-duplicate > .mb-3.row,
.contest-entry-rules-group.form-group-duplicate > .mb-3.row,
.contest-dates-group.form-group-duplicate > .mb-3.row,
.contest-draw-verification-group.form-group-duplicate > .mb-3.row,
.contest-settings-group.form-group-duplicate > .mb-3.row {
  margin-bottom: 1.25rem;
}
.contest-details-group.form-group-duplicate .form-control,
.contest-details-group.form-group-duplicate textarea.form-control,
.contest-entry-rules-group.form-group-duplicate .form-control,
.contest-entry-rules-group.form-group-duplicate textarea.form-control,
.contest-dates-group.form-group-duplicate .form-control,
.contest-dates-group.form-group-duplicate textarea.form-control,
.contest-draw-verification-group.form-group-duplicate .form-control,
.contest-draw-verification-group.form-group-duplicate textarea.form-control,
.contest-settings-group.form-group-duplicate .form-control,
.contest-settings-group.form-group-duplicate textarea.form-control {
  border-radius: 6px;
}
.contest-details-group.form-group-duplicate label.form-label,
.contest-entry-rules-group.form-group-duplicate label.form-label,
.contest-dates-group.form-group-duplicate label.form-label,
.contest-draw-verification-group.form-group-duplicate label.form-label,
.contest-settings-group.form-group-duplicate label.form-label {
  margin-bottom: 0.35rem;
  font-weight: 600;
}
.contest-details-group.form-group-duplicate > small.text-muted,
.contest-details-group.form-group-duplicate .text-muted.small,
.contest-details-group.form-group-duplicate p.text-muted.small,
.contest-entry-rules-group.form-group-duplicate > small.text-muted,
.contest-entry-rules-group.form-group-duplicate .text-muted.small,
.contest-entry-rules-group.form-group-duplicate p.text-muted.small,
.contest-dates-group.form-group-duplicate > small.text-muted,
.contest-dates-group.form-group-duplicate .text-muted.small,
.contest-dates-group.form-group-duplicate p.text-muted.small,
.contest-draw-verification-group.form-group-duplicate > small.text-muted,
.contest-draw-verification-group.form-group-duplicate .text-muted.small,
.contest-draw-verification-group.form-group-duplicate p.text-muted.small,
.contest-settings-group.form-group-duplicate > small.text-muted,
.contest-settings-group.form-group-duplicate .text-muted.small,
.contest-settings-group.form-group-duplicate p.text-muted.small {
  display: block;
  background: var(--contest-group-accent-soft, rgb(255, 242.1, 242.3));
  border-left: 3px solid var(--contest-group-accent, #ff7e80);
  border-radius: 0 6px 6px 0;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--contest-group-accent-text, #475569);
  font-weight: 500;
  line-height: 1.5;
}

.custom-question-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================
   Contest Entry Detail
   ========================================== */
.contest-entry-detail {
  max-width: 1680px;
  margin: 0 auto;
}
.contest-entry-detail__shell {
  background: linear-gradient(180deg, #f7f8fc 0%, #ffffff 18%);
  border: 1px solid rgba(22, 25, 37, 0.08);
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}
.contest-entry-detail__hero {
  border-bottom: 1px solid rgba(22, 25, 37, 0.08);
  padding: 1.5rem 1.5rem 1.25rem;
  background: radial-gradient(circle at top right, rgba(3, 127, 176, 0.1), transparent 28%), linear-gradient(135deg, rgba(9, 8, 58, 0.04), rgba(3, 127, 176, 0.02));
}
.contest-entry-detail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(9, 8, 58, 0.06);
  color: #09083a;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contest-entry-detail__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-top: 1rem;
}
.contest-entry-detail__title {
  margin: 0;
  color: #161925;
  font-size: clamp(1.55rem, 2vw, 2.2rem);
  line-height: 1.08;
}
.contest-entry-detail__subtitle {
  margin-top: 0.45rem;
  color: #677184;
  font-size: 0.92rem;
}
.contest-entry-detail__entry-chip {
  min-width: 140px;
  padding: 0.8rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(22, 25, 37, 0.08);
  background: #fff;
  text-align: right;
}
.contest-entry-detail__entry-chip-label {
  color: #7a8194;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contest-entry-detail__entry-chip-value {
  margin-top: 0.25rem;
  color: #161925;
  font-size: 1.2rem;
  font-weight: 700;
}
.contest-entry-detail__content {
  padding: 1.25rem;
}
.contest-entry-detail__panel {
  height: 100%;
  border: 1px solid rgba(22, 25, 37, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.contest-entry-detail__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(22, 25, 37, 0.07);
}
.contest-entry-detail__panel-title {
  margin: 0;
  color: #161925;
  font-size: 1rem;
  font-weight: 700;
}
.contest-entry-detail__panel-subtitle {
  margin: 0.2rem 0 0;
  color: #7a8194;
  font-size: 0.78rem;
}
.contest-entry-detail__panel-body {
  padding: 1rem;
}
.contest-entry-detail__meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.contest-entry-detail__meta-item, .contest-entry-detail__field-item {
  border: 1px solid rgba(22, 25, 37, 0.08);
  border-radius: 14px;
  background: #fbfcfe;
}
.contest-entry-detail__meta-item {
  padding: 0.7rem 0.85rem;
}
.contest-entry-detail__meta-label, .contest-entry-detail__field-label {
  display: block;
  margin: 0 0 0.3rem;
  color: #7a8194;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contest-entry-detail__meta-value {
  color: #161925;
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: break-word;
}
.contest-entry-detail__meta-value .text-muted, .contest-entry-detail__field-value .text-muted {
  font-size: inherit;
}
.contest-entry-detail__fields-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.contest-entry-detail__field-item {
  padding: 0.65rem 0.75rem;
}
.contest-entry-detail__field-value {
  color: #161925;
  font-size: 0.84rem;
  line-height: 1.35;
  word-break: break-word;
}
.contest-entry-detail__field-value ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}
@media (max-width: 1199.98px) {
  .contest-entry-detail__fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991.98px) {
  .contest-entry-detail__hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .contest-entry-detail__entry-chip {
    text-align: left;
  }
}
@media (max-width: 767.98px) {
  .contest-entry-detail__content {
    padding: 1rem;
  }
  .contest-entry-detail__hero {
    padding: 1.15rem 1rem 1rem;
  }
  .contest-entry-detail__meta-grid, .contest-entry-detail__fields-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rebate-thank-you {
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  text-align: center;
  padding: 6rem 1rem;
}
.rebate-thank-you h1 {
  color: #374955;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.rebate-thank-you p.lead {
  color: #374955;
  font-size: 1.25rem;
  font-weight: 500;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}
.rebate-thank-you p.text-muted {
  color: #6c757d;
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}
.rebate-thank-you .btn-primary {
  background-color: #ff7e80;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  padding: 0.75rem 2.5rem;
  font-weight: 600;
  transition: all 0.25s ease;
}
.rebate-thank-you .btn-primary:hover {
  background-color: rgb(255, 85.2, 87.8325581395);
  transform: translateY(-2px);
}
.rebate-thank-you .btn-primary:active {
  background-color: rgb(255, 49.5, 52.6860465116);
  transform: translateY(0);
}
.rebate-thank-you::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/public/img/rebate-bg-texture.jpg") center/cover no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
@media (max-width: 768px) {
  .rebate-thank-you {
    padding: 4rem 1rem;
  }
  .rebate-thank-you h1 {
    font-size: 2rem;
  }
  .rebate-thank-you p.lead {
    font-size: 1.1rem;
  }
}

.rebate-status-banner {
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 12px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  color: #fff;
}

.rebate-status-banner.approved {
  background-color: #28a745;
}

.rebate-status-banner.denied {
  background-color: #dc3545;
}

.rebate-status-banner.pending {
  background-color: #6c757d;
}

.rebate-status-banner.manual {
  background-color: #007bff;
}

.rebate-status-banner.partial {
  background-color: #ff9800;
}

.decision-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2000;
}

.decision-modal.visible {
  opacity: 1;
  pointer-events: all;
}

.decision-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.decision-modal-content {
  position: relative;
  background: #fff;
  padding: 28px 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 1;
  font-size: 18px;
  font-weight: 600;
}

.decision-modal-content h3 {
  margin: 0;
  color: #28a745;
}

.decision-modal-content h3:contains("Denied") {
  color: #dc3545;
}

.rebate-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}
.rebate-tabs .reason-col {
  display: none;
  white-space: pre-wrap;
  color: #dc3545;
  font-weight: 500;
}
.rebate-tabs .tab-btn {
  background: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}
.rebate-tabs .tab-btn.active {
  background: #308478;
  border-color: #308478;
  color: #fff;
}
.rebate-tabs .tab-btn:hover {
  background: #80f9c0;
  color: #374955;
}

#contestMultiform .row.mb-3 {
  margin-bottom: 0 !important;
}
#contestMultiform {
  /* remove extra padding resets so columns can use gutter */
}
#contestMultiform .col-md-12.mb-3,
#contestMultiform .col-md-6.mb-3,
#contestMultiform .col-md-3.mb-3,
#contestMultiform .col-12.mb-3 {
  margin-bottom: 0 !important;
}
#contestMultiform .form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
  font-weight: 500;
}
#contestMultiform .form-control,
#contestMultiform .searchable-input {
  height: 42px;
  padding: 0.45rem 0.75rem;
  font-size: 0.95rem;
  border-radius: 4px;
}
#contestMultiform .file-upload-container {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
}
#contestMultiform .file-upload-container .upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  padding: 0.75rem;
  text-align: center;
  border-radius: 4px;
  font-size: 0.9rem;
  width: 100%;
}
#contestMultiform .file-upload-container .file-preview-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0.75rem;
  margin-left: 0;
  margin-right: 0;
  justify-content: center;
}
#contestMultiform .file-upload-container .file-preview-list > .file-item {
  padding-left: 0;
  padding-right: 0;
}
#contestMultiform .file-upload-container .file-preview-list > .file-item.col-4.mx-auto {
  flex: 0 0 100%;
  width: 100%;
  max-width: 20rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#contestMultiform .file-upload-container .file-preview-list > .file-item.col-4.mx-auto .card {
  width: 100%;
}
#contestMultiform .form-check {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}
#contestMultiform .form-check .form-check-input {
  margin-right: 0.5rem;
  margin-top: 0;
}
#contestMultiform .form-check .form-check-label {
  font-size: 0.9rem;
}
#contestMultiform .row.col-12 .form-check {
  justify-content: flex-start;
  align-self: self-start;
}
#contestMultiform .invalid-feedback {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}
#contestMultiform .form-button--next {
  min-width: 120px;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
}
#contestMultiform.multiform--final-page .multiform-navigation {
  display: none !important;
}
#contestMultiform .submitbtn-contest {
  width: 100%;
  margin-top: 1.5rem;
}
#contestMultiform .submitbtn-contest__prev {
  white-space: nowrap;
}
#contestMultiform:not(.multiform--has-previous-page) .submitbtn-contest__prev {
  display: none !important;
}
#contestMultiform .submitbtn-contest--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
#contestMultiform .submitbtn-contest--center .submitbtn-contest__prev--link {
  padding: 0;
  font-size: 0.9rem;
  color: #6c757d;
  text-decoration: underline;
}
#contestMultiform .submitbtn-contest--right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
#contestMultiform .submitbtn-contest--right .submitbtn-contest__submit {
  margin-left: auto;
}
@media (max-width: 575.98px) {
  #contestMultiform .submitbtn-contest--right {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #contestMultiform .submitbtn-contest--right .submitbtn-contest__submit,
  #contestMultiform .submitbtn-contest--right .submitbtn-contest__prev {
    width: 100%;
  }
}
#contestMultiform .card.p-4 {
  padding: 2rem 1.5rem !important;
}

.contest-form .container {
  padding-left: 0;
  padding-right: 0;
}

/*# sourceMappingURL=generic_contests.css.map */

/* handout.css */
/**
 * Handouts Styling
 */
/* Certificate Cards */
.handout-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.handout-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.handout-card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
}

.handout-card-title {
  font-weight: 600;
  margin: 0 0 5px 0;
  font-size: 1rem;
}

.handout-card-subtitle {
  font-size: 0.85rem;
  opacity: 0.9;
  margin: 0;
}

.handout-card-body {
  padding: 20px;
}

.handout-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #555;
}
.handout-info i {
  width: 20px;
  color: #667eea;
  margin-right: 10px;
}

/* Badge styling */
.badge-pdf {
  background-color: #ffe5e5;
  color: #c82333;
}

.badge-html {
  background-color: #e5f5ff;
  color: #0066cc;
}

.badge-png {
  background-color: #e5ffe5;
  color: #2d7a3a;
}

.portal-certificate-card .catalog--product-media {
  position: relative;
}
.portal-certificate-card .portal-certificate-card-status {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  box-shadow: 0 0.35rem 1rem rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

/* Certificate Templates */
.certificate-template {
  background: white;
  padding: 40px;
  font-family: "Georgia", serif;
  min-height: 600px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.certificate-simple {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: 3px solid #2c3e50;
  border-radius: 8px;
  text-align: center;
}

.certificate-diploma {
  background: linear-gradient(to right, #fffacd 0%, #fff9e6 50%, #fffacd 100%);
  border: 8px solid #8b7355;
  border-radius: 10px;
  position: relative;
}

.certificate-printable {
  background: white;
  border: none;
  padding: 20mm;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state-icon {
  font-size: 4rem;
  color: #bdc3c7;
  margin-bottom: 20px;
}

.empty-state-text {
  color: #7f8c8d;
  margin: 10px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .certificate-template {
    padding: 20px;
    min-height: 400px;
    font-size: 0.9rem;
  }
  .handout-card {
    margin-bottom: 15px;
  }
  .portal-certificate-card .portal-certificate-card-status {
    top: 0.65rem;
    left: 0.65rem;
  }
}
/* Print styles */
@media print {
  body {
    background: white;
    margin: 0;
    padding: 0;
  }
  .certificate-template {
    box-shadow: none;
    page-break-inside: avoid;
  }
  .handout-card,
  .btn,
  .modal-backdrop {
    display: none !important;
  }
}
.ht-card {
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ht-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13) !important;
  transform: translateY(-2px);
}
.ht-card--inactive {
  opacity: 0.6;
}
.ht-card-header {
  position: relative;
  min-height: 110px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ht-card-header--global {
  background: linear-gradient(135deg, #1a3a5c 0%, #2e79c4 100%);
}
.ht-card-header--activity {
  background: linear-gradient(135deg, #1a4d2e 0%, #27ae60 100%);
}
.ht-card-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.ht-card-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}
.ht-card-scope-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  margin-bottom: 6px;
  width: fit-content;
}
.ht-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  position: relative;
  word-break: break-word;
}
.ht-card-desc {
  font-size: 0.82rem;
  color: #6c757d;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ht-card-status {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.ht-add-card {
  border: 2px dashed #ced4da;
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  color: #6c757d;
  text-decoration: none;
}
.ht-add-card:hover {
  border-color: #0d6efd;
  background: #f0f5ff;
  color: #0d6efd;
}
.ht-add-card-icon {
  font-size: 2rem;
  margin-bottom: 8px;
  line-height: 1;
}
.ht-add-card-label {
  font-size: 0.88rem;
  font-weight: 600;
}

/*# sourceMappingURL=handout.css.map */

/* import2db.css */
.i2db-modal .i2db-table {
  height: 300px;
}
.i2db-modal .i2db-table tbody {
  height: 300px;
  overflow-y: auto;
}

/*# sourceMappingURL=import2db.css.map */

/* nav.css */
/* Keep nav vertical + let collapse be in normal flow */
.navbar-nav.flex-column .collapse {
  position: static;
  width: 100%;
}

/* Make nested items expand full width in a sidebar */
.navbar-nav .nav-item .nav-link {
  display: block;
  width: 100%;
}

#nav-tree-container .pb-tree-node {
  margin-left: 2rem;
}
#nav-tree-container .pb-tree-node .pb-tree-label {
  height: 100%;
}
#nav-tree-container .pb-tree-node .pb-tree-label-inner {
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  flex-direction: row;
}
#nav-tree-container .pb-tree-subnodes {
  margin-left: unset;
}
#nav-tree-container .pb-tree-node-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem;
}
#nav-tree-container .pb-tree-node-actions .btn {
  font-size: 1rem;
}

/*# sourceMappingURL=nav.css.map */

/* activities.css */
.activity-take {
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
  padding-top: 6rem;
}

/* Activity shell */
.activity-shell {
  position: relative;
  max-width: 1100px;
  margin: 1.5rem auto 2.5rem;
  padding: 0 1rem;
}

/* Override legacy .activity-take flex centering styles when using the newer shell layout. */
.activity-take.activity-shell {
  max-width: none;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem) 2rem;
  min-height: calc(100vh - 74px - 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: url("/public/img/abstractBG.webp") center/cover no-repeat fixed;
}
.activity-take.activity-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  z-index: 0;
  pointer-events: none;
}
.activity-take.activity-shell > .activity-shell__hero,
.activity-take.activity-shell > .quiz-card-wrapper {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
}

.activity-shell__hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid #d7dee8;
  background: linear-gradient(140deg, #f8fbff 0%, #eef4ff 60%, #f6f9ff 100%);
}

.activity-shell__hero-left {
  flex: 1 1 auto;
  min-width: 0;
}

.activity-shell__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #e7edf9;
  color: #334b78;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
}

.activity-shell__hero-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.activity-shell__action {
  border-radius: 10px;
  font-weight: 600;
}

.activity-take.activity-shell .quiz-card-wrapper {
  max-width: none;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #dce4ef;
  background: #f7f9fc;
  box-shadow: 0 10px 28px rgba(18, 41, 74, 0.12);
  padding: 1rem;
}

/* Main quiz container */
.activity-take.activity-shell .quiz-card {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
}

/* Title */
.activity-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: #1e3357;
}

@media (max-width: 768px) {
  .activity-shell__hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .activity-shell__hero-right {
    width: 100%;
    justify-content: flex-start;
  }
}

/*# sourceMappingURL=activities.css.map */

/* style.css */
@charset "UTF-8";
/***************************************************************************************************
********************************* STAGE STYLES ****************************************************
***************************************************************************************************/
:root {
  --primary: #0d6efd;
  --secondary: #161925;
  --accent: #ff6600;
  --text: #161925;
  --lightgrey: #8EA8C3;
  --mediumgrey: #406E8E;
  --darkgrey: #23395B;
  --teal: #449F93;
  --darkteal: #006153;
  --cream: #EEE8A9;
  --dark-bg: #161925;
  --yellow: #e2b12e;
  --error: #b92924;
  --rust: #C15450;
}

.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
  border-color: #28a745;
}

.invalid-feedback {
  display: none;
  font-size: 0.875rem;
  color: #dc3545;
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-feedback {
  display: block;
}

.stage-land {
  background-color: green;
  color: var(--text-light);
}

.stage-construction {
  background-color: yellow;
  color: var(--text-dark);
}

.stage-management {
  background-color: lightblue;
  color: var(--text-dark);
}

.stage-renovation {
  background-color: orange;
  color: var(--text-light);
}

.btn-primary {
  color: #fff;
  background-color: #09083a;
  border-color: #09083a;
}

.btn-primary:hover {
  color: #fff;
  background-color: #12114e;
  border-color: #12114e;
}

.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: #06052a;
  border-color: #06052a;
  box-shadow: 0 0 0 0.25rem rgba(9, 8, 58, 0.4);
}

.btn-primary:disabled {
  background-color: #09083a;
  border-color: #09083a;
  opacity: 0.65;
}

.navbar {
  --nav-brand: #09083a;
  --nav-ink: #3a3f63;
  background: #fff;
  padding: 0.5rem 2rem;
  min-height: 72px;
  box-shadow: 0 1px 0 rgba(16, 18, 48, 0.06), 0 6px 20px rgba(16, 18, 48, 0.05);
  position: relative;
}
.navbar .navbar-nav {
  align-items: center;
}
.navbar .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 1.5rem;
}
.navbar .navbar-brand img {
  height: 46px;
  width: auto;
  min-height: 0;
  max-height: 52px;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
.navbar .navbar-nav > .nav-item > .nav-link {
  font-weight: 500;
  color: var(--nav-ink);
  padding: 0.5rem 0.9rem;
  margin: 0 0.1rem;
  position: relative;
  transition: color 0.18s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link > span {
  position: relative;
  display: inline-block;
}
.navbar .navbar-nav > .nav-item > .nav-link > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--nav-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--nav-brand);
}
.navbar .navbar-nav > .nav-item > .nav-link:hover > span::after {
  transform: scaleX(1);
}
.navbar .navbar-nav > .nav-item > .nav-link.active {
  color: var(--nav-brand);
  font-weight: 600;
}
.navbar .navbar-nav > .nav-item > .nav-link.active > span::after {
  transform: scaleX(1);
}
.navbar .nav-points-chip,
.navbar .nav-link--points {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #b07700;
  background: #fff7e6;
  border: 1px solid #f3dca6;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  margin: 0 0.5rem 0 1rem;
  white-space: nowrap;
}
.navbar .nav-points-chip .bi,
.navbar .nav-link--points .bi {
  color: #f0a500;
}
.navbar .nav-points-chip > span::after,
.navbar .nav-link--points > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  border-radius: 50%;
  color: var(--nav-brand);
  background: #eef1fb;
  margin: 0 0.6rem;
  padding: 0 !important;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin .bi {
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
  margin: 0 !important;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin::after {
  display: none !important;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin:hover, .navbar .navbar-nav > .nav-item > .nav-link--admin:focus, .navbar .navbar-nav > .nav-item > .nav-link--admin.show {
  background: var(--nav-brand);
  color: #fff;
}
.navbar .navbar-nav > .nav-item > .nav-link--admin:hover .bi, .navbar .navbar-nav > .nav-item > .nav-link--admin:focus .bi, .navbar .navbar-nav > .nav-item > .nav-link--admin.show .bi {
  color: #fff;
}
.navbar .navbar-nav > .nav-item > .language-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  flex: 0 0 auto;
  font-weight: 600;
  line-height: 1;
  color: var(--nav-ink);
  border: 1px solid #dde1f0;
  border-radius: 8px;
  padding: 0.45rem 0.8rem !important;
  margin-left: 0.6rem;
}
.navbar .navbar-nav > .nav-item > .language-toggle > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .language-toggle:hover {
  color: var(--nav-brand);
  border-color: var(--nav-brand);
}
.navbar .navbar-nav > .nav-item > .nav-link--login {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  flex: 0 0 auto;
  font-weight: 600;
  color: #fff !important;
  background: var(--nav-brand);
  border-radius: 8px;
  padding: 0.45rem 1.15rem !important;
  margin-left: 0.6rem;
}
.navbar .navbar-nav > .nav-item > .nav-link--login > span::after {
  display: none;
}
.navbar .navbar-nav > .nav-item > .nav-link--login:hover {
  background: #12114e;
}
.navbar .dropdown-menu {
  border: 1px solid #e7eaf6;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(16, 18, 48, 0.12);
  padding: 0.4rem;
}
.navbar .dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.navbar .dropdown-menu .dropdown-item:hover {
  background: #eef1fb;
}
.navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active {
  background: var(--nav-brand);
  color: #fff;
}
.navbar .btn-signin {
  margin-left: 1rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 25px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.navbar .btn-signin:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/* Custom button based on Bootstrap btn-warning */
.btn-enter {
  --bs-btn-color: #fff; /* text color */
  --bs-btn-bg: #09083a; /* base background */
  --bs-btn-border-color: #09083a; /* border same as bg */
  --bs-btn-hover-bg: #12114e; /* slightly lighter/different on hover */
  --bs-btn-hover-border-color: #12114e;
  --bs-btn-focus-shadow-rgb: 9,8,58; /* focus ring uses brand color */
  --bs-btn-active-bg: #06052a; /* darker for active click */
  --bs-btn-active-border-color: #06052a;
  --bs-btn-disabled-bg: #09083a;
  --bs-btn-disabled-border-color: #09083a;
  display: inline-block;
  font-weight: 600;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid var(--bs-btn-border-color);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.375rem; /* same as default Bootstrap rounded corners */
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-enter:hover {
  color: #fff;
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-enter:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-enter:active {
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn-enter:disabled,
.btn-enter.disabled {
  opacity: 0.65;
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
}

* {
  font-family: acumin-variable, sans-serif;
}

b {
  font-weight: 900;
}

.program-card {
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}
.program-card:hover {
  transform: scale(1.02);
}
.program-card .card-header {
  background-size: cover;
  background-position: center;
  height: 100px;
  background-image: url("/public/img/land.jpg");
}
.program-card .card-header .program-stage {
  font-size: 0.8rem;
}
.program-card .card-header .program-location {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
  width: 30%;
}
.program-card .card-body {
  padding: 1.5rem 1rem;
}
.program-card .card-body .program-title {
  color: #4ed2f7;
}
.program-card .card-body .program-address {
  font-size: 0.7rem;
}
.program-card .card-body .program-stats {
  row-gap: 0.5rem;
}
.program-card .card-body .program-stats .stat {
  line-height: 1;
}
.program-card .card-body .program-stats .value {
  font-size: 1.25rem;
}
.program-card .card-body .program-stats .small {
  font-size: 0.75rem;
  color: #6c757d;
}
.program-card .card-footer {
  border-top: 1px solid #e9ecef;
  background-color: #fff;
}
.program-card .card-footer .action-btn {
  text-align: center;
  background-color: white;
  border: none;
}
.program-card .card-footer .action-btn:hover {
  color: #007bff;
}

tbody, td, tfoot, th, thead, tr {
  border-style: unset;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}
.table th, .table td {
  padding: 10px;
}
.table th {
  background-color: #666666;
  color: white;
  font-weight: 400;
}
.table .btn-link {
  color: #007bff;
  text-decoration: none;
}
.table .btn-link:hover {
  text-decoration: underline;
}

.dash-table {
  margin: 0;
  font-size: 0.9rem;
}
.dash-table thead th {
  background: transparent;
  color: #6b7194;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 0;
  border-bottom: 1.5px solid #e7eaf6;
  padding: 0.6rem 0.75rem;
  white-space: nowrap;
}
.dash-table thead th .badge {
  font-weight: 600;
}
.dash-table tbody td {
  padding: 0.7rem 0.75rem;
  vertical-align: middle;
  border-color: #eef1f8;
}
.dash-table tbody tr:last-child td {
  border-bottom: 0;
}
.dash-table tbody tr:hover {
  background: #f7f9ff;
}

.dash-pill {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #eef1fb;
  color: #3a3f63;
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.4;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: #eef8f8;
}

td:has(.module--edit-button) {
  text-align: right;
}

.module--edit-button {
  text-align: right;
}

.module--delete-button {
  text-align: right;
}

.module--add-button {
  background-color: #23395B;
  color: white;
  border-radius: 20px;
}

.fg-logo {
  width: 150px;
  margin-left: 2rem;
}

.modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 2rem;
}
.modal-header .modal-header-content {
  text-align: center;
}
.modal-header .modal-title {
  margin: 0;
  font-size: 2rem;
  font-weight: bold;
}
.modal-header .modal-subtitle {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #6c757d;
}
.modal-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.modal-body .form-label {
  margin-bottom: 0.5rem;
}
.modal-body .form-select {
  font-size: 1rem;
  padding: 0.5rem;
}

.stage-select {
  min-width: 300px;
  padding: 0.25rem;
  border-radius: 5px;
}

/* Align label and input fields on the same line */
.form-page .mb-3 {
  display: flex;
  align-items: flex-start;
}
.form-page .form-label {
  margin-right: 4rem;
  text-align: left;
}
.form-page .form-control {
  flex-grow: 1;
}

.card .row .group-title {
  background-color: #666666;
  color: #FFF;
}

.table-schema-added {
  color: var(--success) !important;
}

.table-schema-removed {
  color: var(--danger) !important;
}

.calc-direction-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-bottom: 1rem;
}

.calc-direction-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--bs-secondary);
  cursor: pointer;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 0.3rem 0.6rem;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}
.calc-direction-toggle:hover {
  background-color: #e9ecef;
}
.calc-direction-toggle:hover i {
  opacity: 1;
  font-size: 1.15rem;
}
.calc-direction-toggle i {
  font-size: 1.1rem;
  color: var(--bs-secondary);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.bi-arrow-right-circle-fill {
  font-size: 1.15rem;
}

.bi-arrow-left-circle-fill {
  font-size: 1.15rem;
}

.pdf-export-header {
  text-align: right;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-text {
  font-size: 10rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.2);
  transform: rotate(352deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.row.card-section-container {
  position: relative;
}

button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

button:disabled:hover {
  background-color: #e0e0e0;
  color: #a0a0a0;
}

.quick-links .filter-button:disabled {
  background-color: #e0e0e0;
  color: #a0a0a0;
  border: 1px solid #d0d0d0;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Fade-in and fade-out animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}
#equationModal .drag-placeholder {
  background-color: rgba(0, 123, 255, 0.2); /* Light blue transparent */
  border: 2px dashed #007bff; /* Dashed border */
  height: 30px;
  width: 100px;
  margin: 5px;
  display: inline-block;
}
#equationModal .eq-title {
  color: #204F88;
}
#equationModal .operator-container {
  background-color: #EFEFEF;
  border-top: 1px solid #EFF1F3;
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .operator-container .operator-btn-container {
  padding: 5px;
}
#equationModal .operator-container .operator-btn-container .operator-btn {
  background-color: #E9F6FB !important;
  border: 1px solid #97D8ED;
  font-size: 5rem;
  font-weight: 900;
  color: black;
}
#equationModal .cell-container {
  background-color: #F9F9F9;
  border-top: 1px solid #EFF1F3;
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .drag-pill {
  background-color: #FDF3C9;
  border: 1px solid black;
}
#equationModal .drag-pill .pill-delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: white;
  color: #600000;
  width: 20px;
  height: 20px;
  border: 1px solid #600000;
  border-radius: 50%;
  padding: 0;
  padding-bottom: 2px;
  font-size: 1rem;
}
#equationModal .calculation-container {
  border-bottom: 1px solid #EFF1F3;
}
#equationModal .calculation-container .operator-btn {
  background-color: #E9F6FB !important;
  border: 1px solid #97D8ED;
  font-size: 5rem;
  font-weight: 900;
  color: black;
}
#equationModal .search-group {
  position: relative;
  width: 250px;
}
#equationModal .search-group input {
  width: 100%;
  border: 1px solid black;
  padding: 0.5rem 1rem;
}
#equationModal .search-group i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.active-sort {
  background-color: #0d6efd;
  color: white;
  border-color: #0d6efd;
}

.fave-toggle.active {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

#favourite-filter.active {
  background-color: #dc3545;
  color: white;
  border-color: #dc3545;
}

#favourite-filter.active i {
  color: white;
}

.thankyou-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #f9f9f9 60%, #eaf8f2 100%);
}

.thankyou-box {
  max-width: 500px;
  background: #fff;
  border-radius: 1rem;
}

.thankyou-icon i {
  font-size: 3rem;
  color: #28a745;
}

.thankyou-box h2 {
  font-size: 2rem;
  color: #333;
}

.thankyou-box p {
  font-size: 1.1rem;
}

/* ===== Fullscreen overlay remains ===== */
#toastOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1054;
}

.terms-list {
  counter-reset: term-counter;
  list-style: none;
}
.terms-list > .terms-section {
  counter-increment: term-counter;
  position: relative;
  padding-left: 2.5rem;
}
.terms-list > .terms-section::before {
  content: counter(term-counter) ".";
  position: absolute;
  left: 0;
  top: 0.2rem;
  font-weight: 700;
  font-size: 1.25rem;
}

/* ===============================
   Contest Slider – Full CSS
   =============================== */
#contestHeroSection {
  min-height: 300px;
}

.contest-slider-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding: 2rem 0;
}
.contest-slider-wrapper h2 {
  text-align: center;
  font-weight: 700;
  margin-bottom: 2rem;
}
.contest-slider-wrapper .contest-slider-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: transform 0.5s ease;
  justify-content: center;
}
.contest-slider-wrapper .contest-card {
  flex: 0 0 280px;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
  opacity: 0.7;
  transform: scale(0.9);
}
.contest-slider-wrapper .contest-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.contest-slider-wrapper .contest-card .card-body {
  padding: 1rem;
}
.contest-slider-wrapper .contest-card .card-body h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contest-slider-wrapper .contest-card .card-body p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.contest-slider-wrapper .contest-card .card-body .btn-primary {
  background-color: #09083a;
  border-color: #09083a;
  color: #fff;
  width: 100%;
}
.contest-slider-wrapper .contest-card .card-body .btn-primary:hover {
  background-color: #0d0c55;
  border-color: #0d0c55;
}
.contest-slider-wrapper .contest-card.active {
  transform: scale(1.15);
  opacity: 1;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.contest-slider-wrapper .slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(9, 8, 58, 0.85);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.contest-slider-wrapper .slider-btn:hover {
  background-color: rgb(9, 8, 58);
}
.contest-slider-wrapper .slider-btn.slider-btn-prev {
  left: 0.5rem;
}
.contest-slider-wrapper .slider-btn.slider-btn-next {
  right: 0.5rem;
}
@media (max-width: 992px) {
  .contest-slider-wrapper .contest-card {
    flex: 0 0 240px;
  }
  .contest-slider-wrapper .contest-card.active {
    transform: scale(1.1);
  }
}
@media (max-width: 768px) {
  .contest-slider-wrapper .contest-card {
    flex: 0 0 200px;
  }
  .contest-slider-wrapper .contest-card.active {
    transform: scale(1.05);
  }
}

/* Contest Hero container text centering */
.contest-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}
.contest-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.contest-hero h1 {
  margin-top: 0;
}

.site-footer {
  position: relative;
  background: #111827;
  color: #f3f4f6;
  font-family: "Inter", sans-serif;
  padding-top: 2rem;
  /* === Yellow Triangle Decoration === */
}
.site-footer .footer-container {
  position: relative; /* keep content above triangle */
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .site-footer .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.site-footer .footer-brand .footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.site-footer .footer-brand .footer-tagline {
  font-size: 0.9rem;
  color: #9ca3af;
}
.site-footer .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-links ul:not(.dropdown-menu) {
  display: grid;
}
.site-footer .footer-links ul {
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-rows: repeat(4, auto);
  column-gap: 1.25rem;
}
@media (max-width: 992px) {
  .site-footer .footer-links ul {
    column-gap: 1rem;
  }
}
@media (max-width: 600px) {
  .site-footer .footer-links ul {
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: 0.5rem;
  }
}
.site-footer .footer-links li {
  margin-bottom: 0.35rem;
  width: auto;
}
.site-footer .footer-links a {
  display: inline-block;
  width: auto;
  font-size: 0.95rem;
  color: #f3f4f6;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.site-footer .footer-links a:hover {
  color: #80f9c0;
}
.site-footer .footer-contact h4 {
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #ffffff;
}
.site-footer .footer-contact p {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: #d1d5db;
}
.site-footer .footer-contact .footer-social {
  margin-top: 0.5rem;
}
.site-footer .footer-contact .footer-social a {
  font-size: 1.25rem;
  color: #f3f4f6;
  margin-right: 0.75rem;
  transition: color 0.2s ease-in-out;
}
.site-footer .footer-contact .footer-social a:hover {
  color: #80f9c0;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 2rem;
  padding: 1rem 0;
  text-align: center;
  font-size: 0.8rem;
  color: #9ca3af;
}

.fullwidth-banner {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.fullwidth-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fullwidth-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullwidth-banner .banner-text {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  padding: 0 1rem;
}

.learning-section {
  justify-content: space-evenly;
  padding: 4rem 2rem;
  min-height: 300px;
  position: relative;
}
.learning-section .learning-card {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  font-family: Arial, sans-serif;
  margin-bottom: 16px;
  padding: 0 !important;
}
.learning-section .learning-card .card-left {
  flex: 0 0 40%;
}
.learning-section .learning-card .card-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.learning-section .learning-card .card-middle {
  flex: 1;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.learning-section .learning-card .card-middle .card-label {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0.25rem;
}
.learning-section .learning-card .card-middle .card-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #ff6600;
  margin-bottom: 6px;
}
.learning-section .learning-card .card-middle .card-description,
.learning-section .learning-card .card-middle .card-attempts {
  font-size: 14px;
  color: #555;
  margin: 2px 0;
}
.learning-section .learning-card .card-middle .card-requirement {
  font-size: 12px;
  font-style: italic;
  color: #888;
  margin-bottom: 8px;
}
.learning-section .learning-card .card-middle .card-score {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}
.learning-section .learning-card .card-middle .start-button {
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 14px;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: background-color 0.3s;
}
.learning-section .learning-card .card-middle .start-button.green {
  background-color: #a5e214;
  color: #000;
}
.learning-section .learning-card .card-middle .start-button.green:hover {
  background-color: #92c511;
}
.learning-section .learning-card .card-middle .start-button.orange {
  background-color: #ff9900;
  color: white;
}
.learning-section .learning-card .card-middle .start-button.orange:hover {
  background-color: #e48000;
}
.learning-section .learning-card .card-middle .start-button.resume {
  background-color: #f4c542;
  color: #333;
}
.learning-section .learning-card .card-middle .start-button.resume:hover {
  background-color: #e0b636;
}
.learning-section .learning-card .card-middle .btn.download-cert {
  display: inline-block;
  background: #eefae4;
  color: #2c7b00;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
  margin-top: auto;
  border: 1px solid #a5e214;
}
.learning-section .learning-card .card-right {
  flex: 0 0 30px;
  background: #e5e5e5;
  border-left: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  letter-spacing: 0.6px;
  padding: 8px 4px;
}
.learning-section .learning-card .card-right.complete {
  background-color: #80c342 !important;
  color: white;
}
.learning-section .learning-card .card-right.incomplete {
  background-color: #e5e5e5;
  color: #333;
}

@media (max-width: 1024px) {
  .learning-section {
    padding: 2rem;
  }
  .learning-section .learning-card {
    flex-direction: column;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
  }
  .learning-section .learning-card .card-left {
    width: 100%;
    height: auto;
  }
  .learning-section .learning-card .card-left img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  .learning-section .learning-card .card-middle {
    padding: 1.25rem;
    padding-top: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
  }
  .learning-section .learning-card .card-middle .card-title {
    font-size: 1.3rem;
    color: #ff6600;
    margin-bottom: 0.5rem;
  }
  .learning-section .learning-card .card-middle .card-description,
  .learning-section .learning-card .card-middle .card-attempts {
    font-size: 0.95rem;
    margin: 0.2rem 0;
  }
  .learning-section .learning-card .card-middle .card-requirement {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: #777;
  }
  .learning-section .learning-card .card-middle .start-button {
    font-size: 1rem;
    padding: 10px 16px;
    border-radius: 25px;
  }
  .learning-section .learning-card .card-right {
    writing-mode: horizontal-tb;
    border-left: none;
    border-top: 1px solid #ccc;
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
    justify-content: center;
    background: #f0f0f0;
  }
}
.learning-card.border-success {
  border: 2px solid #80c342;
}

/* ============ Each Question as a Card ============ */
.sortable-block {
  background: #f9fafc;
  border: 1px solid #e1e5ea;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  transition: box-shadow 0.2s ease;
}
.sortable-block:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.sortable-block {
  /* Question text (the label) */
}
.sortable-block > .d-flex > label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0rem;
}
.sortable-block {
  /* Answers list */
}
.sortable-block .form-check {
  margin-bottom: 0.5rem;
}
.sortable-block .form-check .form-check-input {
  margin-right: 0.5rem;
}

/* Submit / pagination buttons */
.form-button--next,
.form-button--prev {
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  border-radius: 4px;
}

.form-button--next.btn-primary {
  background-color: #308478;
  border: none;
}
.form-button--next.btn-primary:hover {
  background-color: #246c61;
}

/* legacy incomplete modal styles intentionally retired in favor of #submitProgressModal */
/* =========================
   Media Library Page
   ========================= */
/* =========================
   Media Library Page
   ========================= */
.media-library {
  padding: 2rem;
  position: relative;
  padding-top: 3rem;
  min-height: 300px;
}
.media-library .library-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #333;
}
.media-library .media-grid {
  display: grid;
  position: relative;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  min-height: 300px;
}
.media-library .media-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease-in-out;
}
.media-library .media-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.media-library .media-card .media-thumb {
  position: relative;
}
.media-library .media-card .media-thumb .media-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #f7f7f7;
  display: block;
}
.media-library .media-card .media-thumb .video-icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  padding: 0.5rem;
}
.media-library .media-card .media-content {
  flex: 1;
  padding: 1rem;
}
.media-library .media-card .media-content .media-type {
  font-size: 0.8rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.media-library .media-card .media-content .media-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 0.5rem;
}
.media-library .media-card .media-content .media-description {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}
.media-library .media-card .media-content .media-meta {
  font-size: 0.8rem;
  color: #888;
}
.media-library .media-card .media-content .media-meta .media-date {
  font-style: italic;
}
.media-library .media-card .media-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.media-library .media-card .media-actions a,
.media-library .media-card .media-actions button {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.media-library .media-card .media-actions .btn-download {
  background: #374955;
  color: #fff;
}
.media-library .media-card .media-actions .btn-download:hover {
  background: rgb(44.9821428571, 59.7035714286, 69.5178571429);
}
.media-library .media-card .media-actions .btn-edit {
  background: #308478;
  color: #fff;
}
.media-library .media-card .media-actions .btn-edit:hover {
  background: rgb(41.2, 113.3, 103);
}
.media-library .media-card .media-actions .btn-delete {
  background: #ff7e80;
  color: #fff;
}
.media-library .media-card .media-actions .btn-delete:hover {
  background: rgb(255, 100.5, 102.8953488372);
}

.media-grid:not(:has(.media-card:not(.template))) {
  display: none;
}

.contest-slider-wrapper:not(:has(.contest-card:not(.template))) {
  display: none;
}

.contest-widget {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  overflow: hidden;
}
.contest-widget .contest-widget-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.contest-widget .contest-widget-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.contest-widget .contest-widget-info .contest-widget-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #374955;
  margin-bottom: 0.25rem;
}
.contest-widget .contest-widget-info .contest-widget-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.contest-widget .contest-widget-info .btn {
  align-self: flex-start;
  background-color: #ff7e80;
  border: none;
  font-weight: 600;
}
.contest-widget .contest-widget-info .btn:hover {
  background-color: rgb(255, 95.4, 97.8744186047);
}
.contest-widget .contest-widget-cards {
  gap: 1.25rem;
  justify-content: flex-end;
}
.contest-widget .contest-widget-cards .contest-card {
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 1 calc(50% - 0.75rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contest-widget .contest-widget-cards .contest-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.contest-widget .contest-widget-cards .contest-card .contest-card-image {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16/9;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .contest-card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #374955;
  margin-bottom: 0.25rem;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .contest-card-date {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .btn-outline-primary {
  color: #308478;
  border-color: #308478;
  font-weight: 600;
}
.contest-widget .contest-widget-cards .contest-card .contest-card-body .btn-outline-primary:hover {
  background-color: #308478;
  color: #fff;
}
@media (max-width: 992px) {
  .contest-widget .contest-widget-cards {
    justify-content: center;
  }
  .contest-widget .contest-widget-cards .contest-card {
    flex: 0 1 100%;
  }
}

.rebates-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.rebates-section .rebate-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  width: 40%;
  position: relative;
}
.rebates-section .rebate-card .rebate-hero-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 260px;
  overflow: hidden;
}
.rebates-section .rebate-card .rebate-hero-card .hero-img-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
}
.rebates-section .rebate-card .rebate-hero-card .hero-img-thumb {
  width: 90px;
  height: 90px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
}
.rebates-section .rebate-card .rebate-hero-card .rebate-overlay-pill {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff7e80;
  color: #fff;
  padding: 6px 20px;
  border-radius: 50px;
  font-weight: 700;
  z-index: 5;
  font-size: 0.95rem;
}
.rebates-section .rebate-card .rebate-content {
  padding: 1.5rem;
}
.rebates-section .rebate-card .rebate-content .rebate-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.rebates-section .rebate-card .rebate-content .rebate-summary {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 1rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-dates {
  font-size: 0.9rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-dates .label {
  font-weight: 600;
  margin-right: 0.25rem;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-cta {
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  background: #ff7e80;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
.rebates-section .rebate-card .rebate-content .rebate-meta .rebate-cta:hover {
  opacity: 0.85;
}

@media (max-width: 768px) {
  .rebate-card {
    width: 100%;
  }
  .rebate-card .rebate-hero {
    flex-direction: column;
    height: auto;
  }
  .rebate-card .rebate-hero .hero-img-group {
    width: 100%;
  }
  .rebate-card .rebate-hero .hero-img-thumb {
    width: 75px;
    height: 75px;
  }
}
.rebate-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.rebate-hero .rebate-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.rebate-hero .rebate-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #fff;
  gap: 30px;
}
.rebate-hero .rebate-hero-inner .rebate-header-top {
  text-align: left;
  width: 100%;
}
.rebate-hero .rebate-hero-inner .rebate-header-top .rebate-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.rebate-hero .rebate-hero-inner .rebate-header-top .rebate-dates {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 30px;
}
.rebate-hero .rebate-hero-inner .rebate-columns {
  display: flex;
  width: 100%;
  gap: 40px;
}
@media (max-width: 992px) {
  .rebate-hero .rebate-hero-inner .rebate-columns {
    flex-direction: column;
    gap: 30px;
  }
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left {
  width: 30%;
  justify-items: left;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual {
    flex-direction: column;
    gap: 30px;
  }
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group {
  flex: 1;
  text-align: center;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .label {
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .rebate-product-details {
  text-align: left;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-group .rebate-thumb {
  width: 250px;
  height: 250px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.062745098);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-left .rebate-offer-visual .rebate-divider {
  font-size: 1.25rem;
  font-weight: 700;
}
.rebate-hero .rebate-hero-inner .rebate-columns .rebate-right {
  flex: 1;
  background: #ffffff;
  color: #000;
  border-radius: 12px;
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto;
  align-self: flex-start;
}

#rebateFormContainer {
  display: none;
}

.rebate-summary-line {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
}

.rebate-columns {
  display: flex;
  gap: 40px;
  width: 100%;
  margin-top: 35px;
}

.rebate-distributor-top {
  width: 100%;
  margin-top: 20px;
}

/* HORIZONTAL CARD STACK - MEDIUM OVERLAP + HOVER SLIDE */
.horizontal-stack {
  position: relative;
  height: 220px;
  width: auto;
  margin-top: 20px;
}
.horizontal-stack .thumb-wrapper {
  position: absolute;
  top: 0;
  transition: transform 0.35s ease, z-index 0.35s ease;
  cursor: pointer;
}
.horizontal-stack .rebate-thumb {
  width: 200px !important;
  height: 200px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #111 !important;
  border: none !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease;
}
.horizontal-stack {
  /* Positioning based on index */
}
.horizontal-stack .thumb-wrapper[data-i="0"] {
  left: 0px;
  z-index: 4;
}
.horizontal-stack .thumb-wrapper[data-i="1"] {
  left: 50px;
  z-index: 3;
}
.horizontal-stack .thumb-wrapper[data-i="2"] {
  left: 100px;
  z-index: 2;
}
.horizontal-stack .thumb-wrapper[data-i="3"] {
  left: 150px;
  z-index: 1;
}
.horizontal-stack .thumb-wrapper[data-i="4"] {
  left: 200px;
  z-index: 0;
}
.horizontal-stack .thumb-wrapper:hover {
  transform: translate(-25px, -10px) scale(1.05);
  z-index: 99;
}

.rebate-divider {
  position: relative;
  z-index: 0;
  margin: 30px 0;
}

@media (max-width: 768px) {
  .horizontal-stack {
    height: auto;
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .horizontal-stack .thumb-wrapper {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
  .horizontal-stack .rebate-thumb {
    width: 150px;
    height: 150px;
  }
}
.rebate-inline-and {
  text-align: left;
  font-weight: 700;
  margin: 4px 0 8px 0;
  color: #fff;
  opacity: 0.85;
}

.login-box::placeholder {
  color: #fff !important;
  opacity: 1;
}

.navbar-brand img {
  width: auto;
}

/* ========================================
   ADMIN NAVBAR 
======================================== */
.admin-navbar {
  height: 64px;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.admin-navbar .container-fluid {
  height: 100%;
  display: flex;
  align-items: center;
}

/* -------------------------------
   Logo Scaling
-------------------------------- */
.admin-navbar-logo-img {
  height: 48px;
  width: auto;
}

/* -------------------------------
   Right-side controls
-------------------------------- */
.admin-navbar-controls {
  display: flex;
  align-items: center;
}
.admin-navbar-controls > * {
  margin-left: 0.75rem;
}
.admin-navbar-controls .btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* -------------------------------
   Notification Bell + Dropdown
-------------------------------- */
.admin-navbar .notification-bell {
  top: 4.5rem !important;
}

/* -------------------------------
   Profile Icon
-------------------------------- */
#profileDropdown i {
  font-size: 24px;
}

.coming-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}
.coming-soon-overlay span {
  font-size: 2rem;
  font-weight: 600;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tab-pane {
  position: relative; /* ensures overlay is contained */
}

.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  pointer-events: all; /* overlay catches interaction */
}
.coming-soon-overlay span {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
}

/* ==========================================================
   THEME VARIABLES (LIGHT + DARK MODE)
   ========================================================== */
:root {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --card-border: #dce3ea;
  --text: #374955;
  --text-soft: #7a8790;
  --shadow: 0 8px 18px rgba(0,0,0,0.06);
  --accent-pink: #ff7e80;
  --accent-teal: #308478;
  --hero-bg-1: #ffffff;
  --hero-bg-2: #edf1f7;
}

/* LIGHT MODE */
body.theme-light {
  --bg: #f5f7fa;
  --card-bg: #ffffff;
  --card-border: #dce3ea;
  --text: #374955;
  --text-soft: #7a8790;
  --shadow: 0 8px 18px rgba(0,0,0,0.06);
  --accent-pink: #ff7e80;
  --accent-teal: #308478;
  --hero-bg-1: #ffffff;
  --hero-bg-2: #edf1f7;
}

/* DARK MODE */
body.theme-dark {
  --bg: #1e2429;
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.10);
  --text: #e5e9ee;
  --text-soft: #a3b0bb;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --accent-pink: #ff7e80;
  --accent-teal: #80f9c0;
  --hero-bg-1: #181c20;
  --hero-bg-2: #111416;
}

/* Smooth theme switching */
body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s ease, color 0.3s ease;
  font-family: system-ui, sans-serif;
}

:root {
  --rebate-primary: #2f855a;
}

.rebate-upload-shell {
  margin-top: 2rem;
}

.rebate-step-heading {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* Main white card */
.rebate-upload-card-simple {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

.rebate-upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr);
  gap: 1.75rem;
}
@media (max-width: 768px) {
  .rebate-upload-layout {
    grid-template-columns: 1fr;
  }
}

.rebate-upload-input {
  display: none;
}

/* Dashed box */
.rebate-dropzone-wrapper {
  width: 100%;
}

.rebate-dropzone-simple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 16px;
  border: 2px dashed #9ca3af;
  background: #f9fafb;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  height: -webkit-fill-available;
  transition: all 0.16s ease-out;
}
.rebate-dropzone-simple:hover, .rebate-dropzone-simple:focus-within {
  border-color: var(--rebate-primary);
  background: #effdf6;
  box-shadow: 0 6px 16px rgba(47, 133, 90, 0.2);
}

.rebate-dropzone-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(47, 133, 90, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rebate-dropzone-icon i {
  font-size: 1.4rem;
  color: var(--rebate-primary);
}

.rebate-dropzone-text {
  display: flex;
  flex-direction: column;
}

.rebate-dropzone-main {
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

.rebate-dropzone-meta {
  font-size: 0.8rem;
  color: #6b7280;
}

.rebate-upload-aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.rebate-receipt-thumb {
  align-self: start;
}

.rebate-receipt-thumb-inner {
  width: 110px;
  height: 150px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 10px 8px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.rebate-receipt-line {
  height: 6px;
  border-radius: 4px;
  background: #d1d5db;
  margin-bottom: 5px;
}
.rebate-receipt-line.short {
  width: 70%;
}

.rebate-upload-tips {
  font-size: 0.84rem;
  color: #4b5563;
}
.rebate-upload-tips .rebate-upload-tip-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.rebate-upload-tips ul {
  padding-left: 1.1rem;
  margin: 0;
}
.rebate-upload-tips li + li {
  margin-top: 0.12rem;
}

.rebate-upload-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.rebate-primary-btn {
  border: none;
  background: var(--rebate-primary);
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.7rem 1.8rem;
  font-size: 0.95rem;
  min-width: 190px;
  transition: background 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.05s ease-out;
}
.rebate-primary-btn:hover {
  background: #276749;
  box-shadow: 0 8px 18px rgba(39, 103, 73, 0.35);
  transform: translateY(-1px);
}
.rebate-primary-btn:active {
  background: #22543d;
  box-shadow: none;
  transform: translateY(0);
}

.rebate-upload-status {
  font-size: 0.83rem;
  min-height: 1.1em;
}
.rebate-eligible-preview {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem 1.1rem;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.rebate-eligible-preview .rebate-eligible-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.rebate-eligible-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

.rebate-eligible-section-title {
  font-weight: 700;
  margin: 0 0 10px 0;
}

#rebateUploadCard .rebate-upload-status#rebateUploadStatus {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #f7f9fc;
  color: #223;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-info {
  background: #eef6ff;
  border-color: rgba(20, 90, 160, 0.25);
  color: #0b2b4a;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-success {
  background: #eefaf3;
  border-color: rgba(35, 140, 90, 0.25);
  color: #0f3b27;
}
#rebateUploadCard .rebate-upload-status#rebateUploadStatus.is-error {
  background: #fff0f1;
  border-color: rgba(190, 30, 45, 0.25);
  color: #5b1217;
}

.rebate-eligible-card {
  flex: 1 1 100%;
  border-radius: 14px;
  width: 95%;
  padding: 0.75rem 0.85rem;
  background: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.8);
  cursor: pointer;
  transition: all 0.16s ease-out;
}
.rebate-eligible-card:hover {
  border-color: var(--rebate-primary);
  background: #effdf6;
  box-shadow: 0 4px 10px rgba(47, 133, 90, 0.18);
}
.rebate-eligible-card.selected {
  border-color: var(--rebate-primary);
  background: #e6fbf1;
  box-shadow: 0 0 0 1px rgba(47, 133, 90, 0.6), 0 6px 14px rgba(47, 133, 90, 0.25);
}
.rebate-eligible-card.rebate-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rebate-eligible-card.rebate-disabled:hover {
  transform: none;
  box-shadow: none;
}

.rebate-eligible-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.rebate-eligible-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #374151;
  background: #dcfce7;
}

.rebate-card-selected-tag {
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: rgb(22, 101, 52);
  font-weight: 700;
  font-size: 0.85rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.rebate-eligible-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
}

.rebate-eligible-summary {
  font-size: 0.8rem;
  color: #6b7280;
}

.rebate-step-actions .btn {
  min-width: 130px;
}

.rebate-purchases-shell {
  max-width: 1000px;
  margin: 0 auto;
}

.rebate-step-subtitle {
  font-size: 0.95rem;
  color: #6b7280;
  margin-bottom: 1.25rem;
}

.rebate-summary-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 18px 40px rgba(15, 35, 52, 0.08);
  margin-bottom: 1.5rem;
}

.rebate-summary-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) {
  .rebate-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.rebate-summary-item {
  min-width: 0;
}

.summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.summary-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 0.55rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.summary-input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.rebate-items-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.rebate-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.rebate-items-header .items-header-title {
  font-size: 1rem;
  font-weight: 600;
}

.rebate-add-item-btn {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  background: #e0f2fe;
  color: #1d4ed8;
  cursor: pointer;
  transition: background 0.15s ease-out, transform 0.05s ease-out;
}
.rebate-add-item-btn:hover {
  background: #bfdbfe;
  transform: translateY(-1px);
}

.rebate-items-table {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.rebate-items-table-head,
.rebate-items-row {
  display: grid;
  grid-template-columns: 3.5fr 0.9fr 1.3fr 1.3fr 40px;
  column-gap: 0.5rem;
  align-items: center;
}

.rebate-items-table-head {
  background: #f9fafb;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}

.rebate-items-table-body {
  max-height: 320px;
  overflow-y: auto;
}

.rebate-items-row {
  padding: 0.4rem 0.75rem;
  border-top: 1px solid #e5e7eb;
}
.rebate-items-row:nth-child(odd) {
  background: #ffffff;
}
.rebate-items-row:nth-child(even) {
  background: #f9fafb;
}

/* Inputs */
.rebate-item-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  padding: 0.3rem 0.5rem;
  font-size: 0.88rem;
}
.rebate-item-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.rebate-item-remove {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}
.rebate-item-remove:hover {
  color: #ef4444;
}

.rebate-items-empty {
  padding: 0.7rem 0.9rem 0.8rem;
  font-size: 0.85rem;
  color: #6b7280;
  display: none;
}

.rebate-items-note {
  margin-top: 0.8rem;
  font-size: 0.82rem;
  color: #6b7280;
}

.rebate-wizard .rebate-steps-bar {
  display: flex;
  align-items: stretch;
  background: #0b3a2f;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  overflow: hidden;
}
.rebate-wizard .rebate-step-tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rebate-wizard .rebate-step-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.rebate-wizard .rebate-step-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab.is-complete {
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab:disabled {
  opacity: 0.4;
  cursor: default;
}
.rebate-wizard .rebate-step-tab .step-status {
  display: flex;
  align-items: center;
}
.rebate-wizard .rebate-step-tab .step-circle {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem;
}
.rebate-wizard .rebate-step-tab.is-active .step-circle, .rebate-wizard .rebate-step-tab.is-complete .step-circle {
  border-color: #7fd9a3;
  background: #7fd9a3;
}
.rebate-wizard .rebate-step-tab .step-index,
.rebate-wizard .rebate-step-tab .step-check {
  font-size: 0.75rem;
  line-height: 1;
  color: #ffffff;
}
.rebate-wizard .rebate-step-tab .step-check {
  display: none;
}
.rebate-wizard .rebate-step-tab.is-complete .step-check {
  display: inline;
}
.rebate-wizard .rebate-step-tab.is-complete .step-index {
  display: none;
}
.rebate-wizard .rebate-step-tab .step-label {
  white-space: nowrap;
}

.rebate-step1-nudge {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rebate-step1-nudge__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(25, 135, 84, 0.14);
  flex: 0 0 auto;
}
.rebate-step1-nudge__icon i {
  font-size: 18px;
}
.rebate-step1-nudge__content {
  flex: 1 1 auto;
  min-width: 0;
}
.rebate-step1-nudge__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
.rebate-step1-nudge__text {
  font-size: 0.95rem;
  opacity: 0.9;
  line-height: 1.25;
}
.rebate-step1-nudge__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  opacity: 0.9;
  flex: 0 0 auto;
  display: none;
}

#rebateStep1NextBtn.is-attention {
  position: relative;
  animation: rebatePulse 1.4s ease-in-out infinite;
}
#rebateStep1NextBtn.is-attention:focus, #rebateStep1NextBtn.is-attention:hover {
  animation: none;
}

@keyframes rebatePulse {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
  100% {
    transform: translateY(0);
  }
}
.rebate-receipts-list-wrap {
  margin-top: 14px;
  padding-top: 8px;
}

.rebate-receipts-list-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.rebate-receipts-list-title {
  font-weight: 700;
}

.rebate-receipts-list-subtitle {
  font-size: 0.92rem;
  opacity: 0.8;
}

.rebate-receipts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rebate-receipt-row {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.rebate-receipt-row:hover {
  border-color: rgba(0, 0, 0, 0.22);
}
.rebate-receipt-row.is-active {
  border-color: rgba(13, 110, 253, 0.45);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}
.rebate-receipt-row__left {
  flex: 1 1 auto;
  min-width: 0;
}
.rebate-receipt-row__title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rebate-receipt-row__meta {
  font-size: 0.92rem;
  opacity: 0.8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rebate-receipt-row__right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rebate-receipt-row__btn {
  border: none;
  background: transparent;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 8px;
}
.rebate-receipt-row__btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rebate-pill {
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}
.rebate-pill.is-success {
  border-color: rgba(25, 135, 84, 0.25);
  background: rgba(25, 135, 84, 0.1);
}
.rebate-pill.is-error {
  border-color: rgba(220, 53, 69, 0.25);
  background: rgba(220, 53, 69, 0.1);
}
.rebate-pill.is-info {
  border-color: rgba(13, 202, 240, 0.25);
  background: rgba(13, 202, 240, 0.12);
}

.rb-why-eligible {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rb-why-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 6px;
}

.rb-why-items {
  margin: 0;
  padding-left: 18px;
}

.rb-why-items li {
  margin: 4px 0;
  font-size: 13px;
}

.rb-meta {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #64748b;
}

/* ============================= */
/* Rebate Card Layout            */
/* ============================= */
.rebate-card-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}

.rebate-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #f4f6f8;
}
.rebate-card-image .rebate-image {
  max-width: 300px;
}

.rebate-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================= */
/* Right-side content            */
/* ============================= */
.rebate-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rebate-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rebate-card-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.rebate-card-summary {
  font-size: 0.9rem;
  color: #5f6b7a;
}

.rebate-card-reward {
  font-weight: 600;
}

/* ============================= */
/* Qualifying items              */
/* ============================= */
.rebate-card-qualifies {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.rebate-card-qualifies-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.rebate-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rebate-card-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.rebate-card-item-icon {
  font-size: 1rem;
  line-height: 1.2;
}

.rebate-card-item-name {
  font-size: 0.9rem;
}

.rebate-card-item-code {
  font-size: 0.8rem;
  color: #6b7280;
}

.rb-rebate-card .rebate-card-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rb-rebate-card .rebate-card-top .rb-rebate-card-select {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.rb-rebate-card .rebate-card-top .rb-rebate-card-select {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  border-bottom: 2px dashed green;
  padding-bottom: 1rem;
}

.rb-rebate-card-select {
  position: relative;
}

.rebate-eligible-card.selected .rb-rebate-card-select::after {
  content: "✓\aRebate selected";
  white-space: pre;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.9rem 1.1rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.95);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.45);
  pointer-events: none;
  z-index: 5;
}

.rb-rebate-card .rebate-card-bottom {
  width: 100%;
}

@media (max-width: 768px) {
  .rb-rebate-card .rebate-card-top .rb-rebate-card-select {
    grid-template-columns: 1fr;
  }
}
.rb-receipt-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  margin: 10px 0 8px;
}

.rb-receipt-summary-file {
  font-weight: 700;
}

.rb-receipt-summary-meta {
  display: flex;
  gap: 10px;
  color: #64748b;
  font-size: 12px;
  margin-top: 2px;
}

.rb-receipt-summary-total {
  font-weight: 700;
}

.rb-promo-receipt-group {
  padding-bottom: 10px;
}

.rb-receipt-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin: 12px 0 6px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid #22c55e;
  border-radius: 8px;
}

.rb-receipt-summary-file {
  font-weight: 700;
  font-size: 14px;
}

.rb-receipt-summary-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #64748b;
}

.rb-receipt-summary-total {
  font-weight: 700;
  font-size: 14px;
}

.rb-promo-receipt-group .rebate-items-row {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px dashed rgba(15, 23, 42, 0.08);
}

.rb-promo-context-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 6px;
}

.rb-promo-receipts-summary {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.rb-promo-receipts-summary__title {
  font-weight: 600;
  font-size: 13px;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.rb-promo-receipts-summary__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rb-promo-receipt-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-left: 4px solid rgba(34, 197, 94, 0.9);
  border-radius: 10px;
}

.rb-promo-receipt-chip__label {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  line-height: 1.1;
}

.rb-promo-receipt-chip__meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rb-dot {
  opacity: 0.65;
}

.rb-promo-receipt-chip__total {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  white-space: nowrap;
}

.rb-typeahead-menu {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  max-height: 240px;
  overflow: auto;
  padding: 6px;
}

.rb-typeahead-item {
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.rb-typeahead-item:hover {
  background: rgba(15, 23, 42, 0.06);
}

.rb-typeahead-name {
  font-weight: 700;
}

.rb-typeahead-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.rb-typeahead-empty {
  padding: 10px;
  opacity: 0.7;
}

.rb-typeahead-menu {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-height: 280px;
  overflow: auto;
  padding: 6px;
}

.rb-typeahead-item {
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.rb-typeahead-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rb-typeahead-name {
  font-weight: 600;
  line-height: 1.2;
}

.rb-typeahead-meta {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.rb-typeahead-empty {
  padding: 10px;
  font-size: 13px;
  opacity: 0.7;
}

#rbStep2TotalsSummary {
  display: none;
}

#rbStep2ReceiptsHome {
  display: none;
}

.navbar-receipt {
  height: 54px;
  width: 100%;
  background: linear-gradient(180deg, #0f5e5f 0%, #0b4f50 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar-receipt__inner {
  height: 100%;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-receipt__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.navbar-receipt__logo {
  height: 28px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25));
}
.navbar-receipt__nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.navbar-receipt__link {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  padding: 8px 6px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar-receipt__link:hover, .navbar-receipt__link:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
@media (max-width: 520px) {
  .navbar-receipt__inner {
    padding: 0 12px;
  }
  .navbar-receipt__nav {
    gap: 14px;
  }
  .navbar-receipt__link {
    font-size: 13px;
  }
}

.hero-receipt {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero-receipt__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.38) 70%), url(/bank/content/images/Blog-image-Multi-Level-Garden-Design.jpg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}
.hero-receipt__content {
  position: relative;
  z-index: 2;
  flex: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 20px 40px;
  text-align: center;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-receipt__title {
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  font-size: clamp(36px, 4.5vw, 58px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.hero-receipt__subtitle {
  max-width: 640px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 28px;
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-receipt__actions {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-receipt__cta {
  width: 100%;
  max-width: 320px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #57b861;
  color: #ffffff;
  padding: 18px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  transition: background 0.15s ease, transform 0.08s ease;
}
.hero-receipt__cta:hover, .hero-receipt__cta:focus-visible {
  background: #4aa954;
  outline: none;
}
.hero-receipt__cta:active {
  transform: translateY(1px);
}
.hero-receipt__cta-icon {
  margin-left: 10px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 6px;
}
.hero-receipt__cta-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.hero-receipt__secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(0, 0, 0, 0.75);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  max-width: 260px;
  transition: background 0.15s ease;
}
.hero-receipt__secondary:hover, .hero-receipt__secondary:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  outline: none;
}
.hero-receipt .hero-receipt__partners {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.hero-receipt .hero-receipt__partners-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}
.hero-receipt .hero-receipt__partners-inner img {
  height: 75px;
  max-height: 75px;
  width: auto;
  display: block;
  opacity: 1;
  filter: none;
}
.hero-receipt .hero-receipt__terms {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.65);
}
.hero-receipt .hero-receipt__terms:hover {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .hero-receipt .hero-receipt__partners-inner {
    gap: 28px;
  }
  .hero-receipt .hero-receipt__partners-inner img {
    height: 36px;
    max-height: 36px;
  }
}
@media (max-width: 560px) {
  .hero-receipt .hero-receipt__partners-inner {
    padding: 16px 16px;
    gap: 20px;
  }
  .hero-receipt .hero-receipt__partners-inner img {
    height: 26px;
    max-height: 26px;
  }
}

.rb-view-hidden {
  display: none !important;
}

@media (max-width: 680px) {
  .rebate-wizard .rebate-steps-bar {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    scrollbar-width: none;
  }
  .rebate-wizard .rebate-steps-bar::-webkit-scrollbar {
    display: none;
  }
  .rebate-wizard .rebate-step-tab {
    flex: 0 0 auto;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
  }
  .rebate-wizard .rebate-step-tab .step-label {
    white-space: nowrap;
    font-size: 0.82rem;
  }
  .rebate-wizard .rebate-step-tab .step-circle {
    width: 22px;
    height: 22px;
    margin-right: 0.2rem;
  }
  .rebate-wizard .rebate-step-tab:not(:last-child)::after {
    top: 30%;
    bottom: 30%;
  }
}

.rebate-thank-you {
  background: #f6fafc;
}
.rebate-thank-you-card {
  max-width: 720px;
  background: #ffffff;
  border-radius: 16px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.rebate-thank-you-icon {
  font-size: 3rem;
  color: #2f8f6b;
  margin-bottom: 1rem;
}
.rebate-thank-you-title {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.rebate-thank-you-lead {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 2rem;
}
.rebate-thank-you-processing-note {
  color: #666;
  margin-bottom: 2.5rem;
}
.rebate-thank-you-actions .btn {
  min-width: 180px;
}
.rebate-thank-you .rebate-confirmation-box {
  border: 1px dashed #cfe6dd;
  background: #f2fbf7;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b7f6c;
  margin-bottom: 0.5rem;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-code {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1f5f4a;
}
.rebate-thank-you .rebate-confirmation-box .confirmation-note {
  font-size: 0.85rem;
  color: #6b8f82;
  margin-top: 0.25rem;
}

/* =====================================================
   REBATE UPLOAD ENHANCEMENTS - FIXED
   Bold spinner overlay + improved status messages
   ===================================================== */
/* -----------------------------------------------------
   1. FULL-CARD LOADING OVERLAY
   ----------------------------------------------------- */
.rebate-upload-card-simple {
  position: relative;
}

.rebate-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: inherit;
  padding: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rebate-overlay-spinner {
  width: 80px;
  height: 80px;
  border: 6px solid #e9ecef;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: rebate-spin 0.9s linear infinite;
}

@keyframes rebate-spin {
  to {
    transform: rotate(360deg);
  }
}
.rebate-overlay-title {
  font-size: 24px;
  font-weight: 700;
  color: #212529;
  margin: 0;
  line-height: 1.3;
}

.rebate-overlay-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: #6c757d;
  margin: 0;
  max-width: 360px;
}

.rebate-overlay-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.rebate-overlay-progress-dot {
  width: 10px;
  height: 10px;
  background: #0d6efd;
  border-radius: 50%;
  animation: rebate-pulse 1.2s ease-in-out infinite;
}

@keyframes rebate-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }
}
/* -----------------------------------------------------
   2. ENHANCED STATUS MESSAGES
   ----------------------------------------------------- */
.rebate-upload-status {
  margin-top: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  transition: all 0.25s ease;
}
.rebate-upload-status:empty, .rebate-upload-status[hidden] {
  display: none !important;
}
.rebate-upload-status:not(:empty) {
  display: block;
}
.rebate-upload-status.is-info {
  background: linear-gradient(135deg, #e7f1ff 0%, #d0e3ff 100%);
  border: 2px solid #0d6efd;
  color: #084298;
}
.rebate-upload-status.is-info::before {
  content: "ℹ️ ";
}
.rebate-upload-status.is-info.is-processing {
  animation: rebate-status-pulse 2s ease-in-out infinite;
}
.rebate-upload-status.is-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
  border: 2px solid #198754;
  color: #0f5132;
}
.rebate-upload-status.is-success::before {
  content: "✅ ";
}
.rebate-upload-status.is-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
  border: 2px solid #dc3545;
  color: #842029;
}
.rebate-upload-status.is-error::before {
  content: "⚠️ ";
}

@keyframes rebate-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}
/* -----------------------------------------------------
   3. STEP 1 NUDGE ENHANCEMENTS
   ----------------------------------------------------- */
#rebateStep1Nudge {
  padding: 20px 24px;
  border-radius: 14px;
  margin-top: 20px;
  border-width: 2px;
  border-style: solid;
}

#rebateStep1Nudge.is-info {
  background: linear-gradient(135deg, #e7f1ff 0%, #cfe2ff 100%);
  border-color: #0d6efd;
}

#rebateStep1Nudge.is-success {
  background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
  border-color: #198754;
}

#rebateStep1Nudge.is-error {
  background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
  border-color: #dc3545;
}

#rebateStep1NudgeTitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

#rebateStep1NudgeText {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
}

/* -----------------------------------------------------
   4. RECEIPT ROW STATUS PILLS (enhanced)
   ----------------------------------------------------- */
.rebate-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rebate-pill.is-info {
  background: #0d6efd;
  color: #fff;
  animation: rebate-pill-pulse 1.5s ease-in-out infinite;
}
.rebate-pill.is-success {
  background: #198754;
  color: #fff;
}
.rebate-pill.is-error {
  background: #dc3545;
  color: #fff;
}

@keyframes rebate-pill-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.rebate-upload-card-simple.is-uploading .rebate-upload-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.rebate-upload-card-simple {
  /* -----------------------------------------------------
     5. DISABLED CARD STATE (email gate)
     ----------------------------------------------------- */
}
.rebate-upload-card-simple[aria-disabled=true] .rebate-dropzone-simple {
  pointer-events: none;
  cursor: not-allowed;
}
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView {
  pointer-events: auto;
  opacity: 1;
}
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView input,
.rebate-upload-card-simple[aria-disabled=true] #rebateGateView button {
  pointer-events: auto;
}

/* =====================================================
   STEP 1 VALIDATION STYLES
   Add these to your existing CSS
   ===================================================== */
/* -----------------------------------------------------
   Missing field indicators
   ----------------------------------------------------- */
/* Field wrapper when missing */
.rb-meta-field.is-missing input {
  border-color: #dc3545 !important;
  background-color: #fff8f8;
}

.rb-meta-field.is-missing input:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
  background-color: #fff;
}

/* "Required" badge next to input */
.rb-field-required {
  display: inline-block;
  color: #dc3545;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  vertical-align: middle;
}

/* Warning indicator on row title */
.rb-row-warning {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #dc3545;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(220, 53, 69, 0.1);
  border-radius: 6px;
}

/* Receipt row with missing fields */
.rebate-receipt-row.has-missing-fields {
  border-color: rgba(220, 53, 69, 0.3);
  background: linear-gradient(135deg, #fff 0%, #fff8f8 100%);
}

.rebate-receipt-row.has-missing-fields:hover {
  border-color: rgba(220, 53, 69, 0.5);
}

/* -----------------------------------------------------
   Better meta field layout
   ----------------------------------------------------- */
.rb-meta-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.rb-meta-field strong {
  white-space: nowrap;
}

/* -----------------------------------------------------
   Pulse animation on Continue button when ready
   ----------------------------------------------------- */
#rebateStep1NextBtn:not(:disabled) {
  animation: step1-ready-pulse 2s ease-in-out infinite;
}

#rebateStep1NextBtn:not(:disabled):hover {
  animation: none;
}

@keyframes step1-ready-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 110, 253, 0);
  }
}
/* -----------------------------------------------------
   Enhanced disabled button state
   ----------------------------------------------------- */
#rebateStep1NextBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* -----------------------------------------------------
   Error nudge enhancement
   ----------------------------------------------------- */
#rebateStep1Nudge.is-error {
  animation: nudge-shake 0.5s ease-in-out;
}

@keyframes nudge-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

/*# sourceMappingURL=style.css.map */

/* services.css */
.dashboard {
  background-color: #f8f9fa;
  height: 100vh;
  padding: 0rem 5rem;
}
.dashboard .module-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.dashboard .module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}
.dashboard .module-card .module-icon i {
  font-size: 2.5rem;
}

[data-module=lms] .module-icon i {
  color: #007bff;
}

[data-module=contest] .module-icon i {
  color: #ffc107;
}

[data-module=rebate] .module-icon i {
  color: #28a745;
}

[data-module=reporting] .module-icon i {
  color: #17a2b8;
}

[data-module=cms] .module-icon i {
  color: #dc3545;
}

/*# sourceMappingURL=services.css.map */

/* style.css */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
@font-face {
  font-family: "Helvetica Neue LT Heading";
  src: url("/public/font/HelveticaNeueLTStd-HvEx-title.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-HvEx-title.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Heading";
  src: url("/public/font/HelveticaNeueLTStd-BlkCnO.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-BlkCnO.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Subheading";
  src: url("/public/font/HelveticaNeueLTStd-BdEx-subheading.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-BdEx-subheading.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Subheading";
  src: url("/public/font/HelveticaNeueLTStd-BdExO.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Copy";
  src: url("/public/font/HelveticaNeueLTStd-Md.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-Md.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Copy";
  src: url("/public/font/HelveticaNeueLTStd-MdCnO.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-MdCnO.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Buttons";
  src: url("/public/font/HelveticaNeueLTStd-Ex-buttons.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-Ex-buttons.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT Buttons";
  src: url("/public/font/HelveticaNeueLTStd-Bd-buttons.woff2") format("woff2"), url("/public/font/HelveticaNeueLTStd-Bd-buttons.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* {
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ktw {
  --ktw-red: #d8131d;
  --ktw-red-dark: #a30c14;
  --ktw-yellow: #fef100;
  --ktw-cyan: #6fd6e6;
  --ktw-blue: #179fe9;
  --ktw-ink: #111;
  --bs-danger: var(--ktw-red);
  --bs-warning: var(--ktw-yellow);
}
.ktw .display-font {
  font-family: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 0.95;
}
.ktw .language-toggle {
  font-size: 0.75rem;
}

.ktw-hero {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.35) 100%), #0a1f3a url("/public/img/ktw/FieldBG.webp") center bottom/cover no-repeat;
  isolation: isolate;
  color: #fff;
}
@media (min-width: 768px) {
  .ktw-hero {
    background-image: radial-gradient(ellipse at center, transparent 5%, rgba(0, 0, 0, 0.05) 100%), url("/public/img/ktw/FieldBG_Wide.webp");
  }
}

.ktw-lockup {
  width: clamp(22rem, 32vw, 24rem);
  margin-top: -4rem;
}

.ktw-prize-text {
  max-width: min(53rem, 88vw);
  filter: drop-shadow(0 0.5rem 1.5rem rgba(0, 0, 0, 0.55));
  margin-top: -2rem;
}

@media (max-width: 1200px) {
  .ktw-prize-text {
    max-width: min(42rem, 88vw);
    filter: drop-shadow(0 0.5rem 1.5rem rgba(0, 0, 0, 0.55));
  }
}
.ktw-hero-bottom {
  max-width: 69%;
  margin-top: 1rem;
  gap: 7rem;
  margin-left: -1rem;
}
.ktw-hero-bottom .football {
  width: clamp(6rem, 13vw, 12rem);
  margin-top: -3rem;
  filter: drop-shadow(0 0.875rem 1.375rem rgba(0, 0, 0, 0.5));
}
@media (max-width: 575.98px) {
  .ktw-hero-bottom {
    max-width: 95%;
  }
  .ktw-hero-bottom .football {
    width: 5.5rem;
    margin-top: -2rem;
  }
  .ktw-hero-bottom .ktw-lockup {
    margin-bottom: 9.5rem !important;
    margin-top: 0rem !important;
  }
}

@media (max-width: 1400px) {
  .ktw-hero-bottom {
    max-width: 77%;
    margin-top: 2rem;
    gap: 7rem;
    margin-left: -1rem;
  }
  .ktw-hero-bottom .football {
    width: clamp(8rem, 16vw, 14rem);
    margin-top: -4.2rem;
    margin-right: 1rem;
    filter: drop-shadow(0 0.875rem 1.375rem rgba(0, 0, 0, 0.5));
  }
}
@media (max-width: 1200px) {
  .ktw-hero-bottom .football {
    width: clamp(8rem, 17vw, 14rem);
    margin-top: -3.2rem;
    margin-right: -1rem;
    filter: drop-shadow(0 0.875rem 1.375rem rgba(0, 0, 0, 0.5));
  }
}
@media (max-width: 992px) {
  .ktw-hero-blurb {
    width: 60%;
  }
  .ktw-hero-bottom {
    margin-top: 1.5rem;
    max-width: 100%;
    gap: 7rem;
  }
  .ktw-hero-bottom .football {
    width: clamp(8rem, 19vw, 14rem);
  }
}
@media (max-width: 768px) {
  .ktw-hero-bottom {
    max-width: 100%;
    margin-top: 1.5rem;
    gap: 7rem;
    margin-left: -1rem;
  }
  .ktw-hero-blurb {
    width: 60% !important;
  }
}
@media (max-width: 700px) {
  .ktw-hero-bottom {
    max-width: 88%;
    margin-top: 1.5rem;
    gap: 5rem;
    margin-left: -1rem;
  }
  .ktw-hero-bottom .football {
    width: clamp(7rem, 19vw, 14rem);
  }
  .ktw-hero-blurb {
    font-size: 1.35rem !important;
  }
}
@media (max-width: 600px) {
  .ktw-hero-bottom {
    max-width: 70%;
  }
}
@media (max-width: 500px) {
  .ktw-hero {
    min-height: 100svh;
  }
  .multiform .file-upload-container.file-upload-container--preview-inside .upload-area .upload-prompt {
    width: 100%;
    text-align: start;
    padding: 0.5rem 0;
    margin-left: 0rem;
  }
  .ktw-lockup {
    width: clamp(13rem, 64vw, 16rem) !important;
    margin-top: -1rem !important;
    margin-bottom: 0.5rem !important;
  }
  .ktw-prize-text {
    max-width: 98vw;
    margin-top: 0;
  }
  .ktw-hero-bottom {
    max-width: 96%;
    margin-top: 2.25rem;
    gap: 3rem;
    margin-left: -0.25rem;
  }
  .ktw-hero-bottom .football {
    width: 10rem;
    margin-top: -4rem;
  }
  .ktw-hero-blurb {
    font-size: 1.1rem !important;
    width: 55%;
  }
}
@media (max-width: 400px) {
  .ktw-hero-bottom {
    max-width: 90%;
    margin-top: 0.25rem;
    gap: 2.75rem;
    margin-left: -0.25rem;
  }
  .ktw-hero-bottom .football {
    width: 7rem;
    margin-top: -3.5rem;
    filter: drop-shadow(0 0.875rem 1.375rem rgba(0, 0, 0, 0.5));
  }
  .ktw-hero-blurb {
    font-size: 1rem !important;
  }
}
.ktw-hero-blurb {
  text-shadow: 0.125rem 0.1875rem 0.0625rem rgba(0, 0, 0, 0.9), 0 0 1rem rgba(0, 0, 0, 0.4);
  width: 40%;
  line-height: 0.95;
  font-style: italic;
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem) !important;
  z-index: 1;
}
.ktw-hero-blurb strong {
  font-family: "Helvetica Neue LT Heading", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
}

.ktw-btn-light-yellow {
  background: #fff;
  color: var(--ktw-ink);
  border: 0.1875rem solid var(--ktw-yellow);
  font-family: "Helvetica Neue LT Buttons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: none !important;
  margin-top: 5rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
}
.ktw-btn-light-yellow:hover, .ktw-btn-light-yellow:focus {
  background: var(--ktw-yellow);
  color: var(--ktw-ink);
}
@media (max-width: 575.98px) {
  .ktw-btn-light-yellow {
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    white-space: normal;
    border-width: 0.125rem;
  }
}

.ktw-thankyou {
  min-height: 100vh;
  overflow: hidden;
}
.ktw-thankyou .ktw-thankyou__card {
  max-width: 40rem;
  background: rgba(0, 0, 0, 0.55);
  border: 0.1875rem solid var(--ktw-yellow);
  border-radius: 1.25rem;
  padding: 2rem 1.75rem;
  backdrop-filter: blur(4px);
  overflow: hidden;
}
.ktw-thankyou .ktw-ty-chips {
  display: block;
  width: clamp(16rem, 75%, 26rem);
  margin: 1.5rem auto -6.5rem;
  pointer-events: none;
}
.ktw-thankyou .btn {
  font-size: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  margin-top: 0 !important;
}
.ktw-thankyou .ktw-thankyou__eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ktw-yellow);
  margin-bottom: 0.5rem;
}
.ktw-thankyou .ktw-thankyou__heading {
  font-family: "Helvetica Neue LT Heading", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 1rem;
}
.ktw-thankyou .ktw-thankyou__body {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.ktw-partners {
  background: var(--ktw-red);
  color: var(--ktw-yellow);
  overflow: hidden;
}
.ktw-partners .ktw-partners-label {
  background: var(--ktw-red-dark);
  position: relative;
  font-family: "Helvetica Neue LT Heading", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.2;
}
@media (min-width: 768px) {
  .ktw-partners .ktw-partners-label::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 100vw;
    background: var(--ktw-red-dark);
  }
}
.ktw-partners .ktw-partner-slot {
  height: 5rem;
  width: 9rem;
}
@media (max-width: 767.98px) {
  .ktw-partners .ktw-partner-slot {
    flex: 0 0 calc(50% - 0.75rem) !important;
    max-width: calc(50% - 0.75rem) !important;
    width: auto !important;
    height: 4.5rem;
  }
}
.ktw-partners .ktw-partner-slot img,
.ktw-partners .ktw-partner-slot .placeholder-chip {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.ktw-partners .ktw-partner-slot .placeholder-chip {
  background: #fff;
  color: var(--ktw-ink);
  font-weight: 800;
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ktw-choice-hotels,
.ktw-newera {
  height: 6rem !important;
  width: 10rem !important;
  max-height: none;
  max-width: none;
}
@media (max-width: 767.98px) {
  .ktw-choice-hotels,
  .ktw-newera {
    height: 4.5rem !important;
    width: auto !important;
  }
}

.amazing-text {
  font-size: 1.5rem;
}

.ktw-flavours {
  background: var(--ktw-blue);
  overflow: hidden;
}
@media (max-width: 768px) {
  .ktw-flavours .row {
    flex-direction: column-reverse;
  }
}
.ktw-flavours .ktw-chip-family {
  display: block;
  width: 115%;
  margin-left: -4.5%;
  margin-bottom: -7rem;
}
@media (max-width: 767.98px) {
  .ktw-flavours .ktw-chip-family {
    width: 105%;
    margin-left: -2.5%;
    margin-bottom: -2rem;
  }
}
.ktw-flavours .ktw-discover-logo {
  max-width: min(28rem, 80%);
  width: 100%;
  height: auto;
  filter: drop-shadow(0.35rem 0.25rem 0.2rem rgba(0, 0, 0, 0.85));
}
@media (max-width: 767.98px) {
  .ktw-flavours .ktw-discover-logo {
    max-width: 70vw;
    margin: 1.5rem 0 2.5rem;
  }
}

.ktw-dark-wrap {
  background: var(--ktw-form-bg, none) 0 0/50% auto repeat, #0d0d0d;
  overflow: hidden;
}

.ktw-form-section {
  position: relative;
  color: #000;
}
.ktw-form-section > .container {
  position: relative;
  z-index: 1;
}

.form-check-input {
  width: 2em !important;
  height: 2em !important;
}

sup {
  top: -0.35em;
}

.why-pick, .why-pick-subtitle {
  text-align: center;
}

.multiform--field-wrapper {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.ktw-form-section .form-section {
  background: #fff;
  border: 0.1875rem solid var(--ktw-yellow);
  border-radius: 1rem;
  color: var(--ktw-ink);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
}
.ktw-form-section .form-control,
.ktw-form-section .form-select,
.ktw-form-section .searchable-input {
  background: #eaf6fc;
  border: 0.0625rem solid var(--ktw-cyan);
  border-radius: 0.375rem;
  padding: 1rem;
}
.ktw-form-section .form-control:focus,
.ktw-form-section .form-select:focus,
.ktw-form-section .searchable-input:focus {
  background: #fff;
  border-color: var(--ktw-red);
  box-shadow: 0 0 0 0.1875rem rgba(216, 19, 29, 0.15);
}
.ktw-form-section textarea.form-control {
  min-height: 10rem;
  resize: vertical;
}
.ktw-form-section .form-label,
.ktw-form-section .form-check-label {
  font-family: "Roboto", "Helvetica Neue LT Copy", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.1rem !important;
  margin-bottom: 0.4rem;
}
.ktw-form-section .form-check-input:checked {
  background-color: var(--ktw-red);
  border-color: var(--ktw-red);
}
.ktw-form-section .form-check-input.is-valid:checked,
.ktw-form-section .form-check-input.is-invalid:checked,
.ktw-form-section .was-validated .form-check-input:valid:checked,
.ktw-form-section .was-validated .form-check-input:invalid:checked {
  background-color: var(--ktw-red) !important;
  border-color: var(--ktw-red) !important;
}
.ktw-form-section .form-check-input:focus {
  box-shadow: 0 0 0 0.1875rem rgba(216, 19, 29, 0.15);
}
.ktw-form-section .cb-label-link {
  color: var(--ktw-red);
  font-weight: 600;
  text-decoration: underline;
}
.ktw-form-section .file-upload-container .upload-area {
  border: 0.125rem dashed var(--ktw-yellow);
  border-radius: 0.625rem;
  min-height: 11rem;
  background: #fffef7;
  color: var(--ktw-red);
  cursor: pointer;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
}
.ktw-form-section .file-upload-container .upload-area:hover {
  background: #fff8d6;
  border-color: var(--ktw-red);
}
.ktw-form-section .file-select {
  color: var(--ktw-red);
  text-decoration: underline;
}

#and_tell_us_a_bit_about_your_picture + .invalid-feedback + .form-text {
  font-size: 0.8rem;
  font-style: italic;
}

.first-form-section .form-section-header::before {
  content: "";
  display: block;
  width: 3rem;
  height: 0.25rem;
  background: var(--ktw-red);
  border-radius: 0.125rem;
  margin-bottom: 1rem;
}

.first-section-title {
  font-style: italic;
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ktw-ink);
}

.first-section-subtitle {
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ktw-ink);
  margin-top: 0.25rem;
}

.form-text-block h1 {
  font-family: "Helvetica Neue LT Heading", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
  color: var(--ktw-ink);
  line-height: 1;
}

.form-text-block h4 {
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
}

.form-text-block p {
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
}

.section-form-section {
  background: transparent !important;
  color: var(--ktw-yellow);
}
.section-form-section .form-label,
.section-form-section .form-check-label {
  color: var(--ktw-yellow);
}
.section-form-section .file-upload-container .upload-area {
  background: transparent;
  border: 0.125rem dashed var(--ktw-yellow);
  border-radius: 0.625rem;
  color: var(--ktw-yellow);
  height: 17rem;
  min-height: 0;
  padding: 1.25rem;
  overflow: hidden;
  text-transform: none;
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.section-form-section .file-upload-container .upload-area .file-preview-list .file-item {
  max-width: 12rem;
}
.section-form-section textarea.form-control {
  height: 13.5rem;
  min-height: 0;
  resize: none;
}
.section-form-section .file-upload-container .upload-area:hover {
  background: rgba(255, 212, 0, 0.06);
  border-color: var(--ktw-yellow);
}
.section-form-section .file-select {
  color: var(--ktw-yellow);
  text-decoration: underline;
}
.section-form-section .form-text {
  color: var(--ktw-yellow);
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 0.75rem;
  text-align: center;
}

.second-section-title {
  color: var(--ktw-yellow);
  font-style: italic;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
  text-shadow: 0 0 1rem rgba(216, 19, 29, 0.35);
}

.second-section-subtitle {
  color: var(--ktw-yellow);
  font-style: italic;
  text-align: center;
  font-size: 0.95rem;
  max-width: 40rem;
  margin-inline: auto;
}

.ktw-form-section .submitbtn-contest__submit,
.ktw-form-section .multiform-navigation .btn,
.ktw-form-section .custom-submit-container .btn {
  border-radius: 50rem;
  font-family: "Helvetica Neue LT Buttons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ktw-red);
  color: #fff;
  border: 0;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ktw-form-section .submitbtn-contest__submit:hover, .ktw-form-section .submitbtn-contest__submit:focus,
.ktw-form-section .multiform-navigation .btn:hover,
.ktw-form-section .multiform-navigation .btn:focus,
.ktw-form-section .custom-submit-container .btn:hover,
.ktw-form-section .custom-submit-container .btn:focus {
  background: var(--ktw-red-dark);
  transform: translateY(-0.125rem);
  color: #fff;
}
.ktw-form-section .submitbtn-contest__submit:disabled,
.ktw-form-section .multiform-navigation .btn:disabled,
.ktw-form-section .custom-submit-container .btn:disabled {
  background: var(--ktw-red-dark);
}

.ktw-form-section .multiform-navigation .btn {
  box-shadow: none;
}
.ktw-form-section .multiform-navigation .btn:hover, .ktw-form-section .multiform-navigation .btn:focus {
  box-shadow: none;
}

.ktw-form-section .submitbtn-contest__submit {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.875rem 2.25rem !important;
}

.ktw-form-section .multiform {
  position: relative;
}

.ktw-form-section .multiform.multiform--final-page .form-indicators {
  flex-direction: row-reverse;
  justify-content: flex-end !important;
}

.ktw-form-section .multiform.multiform--final-page .submitbtn-contest__prev,
.ktw-form-section .multiform.multiform--final-page .submitbtn-contest__prev--link {
  display: none !important;
}

.ktw-form-section .multiform .ktw-form-prev-pill {
  display: none;
}

.ktw-form-section .multiform.multiform--final-page .ktw-form-prev-pill {
  display: inline-flex;
  align-items: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  background: #6c757d;
  color: #fff;
  font-family: "Helvetica Neue LT Buttons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 0;
  border-radius: 50rem;
  padding: 0.5rem 1.25rem;
  box-shadow: none;
  cursor: pointer;
}
.ktw-form-section .multiform.multiform--final-page .ktw-form-prev-pill:hover, .ktw-form-section .multiform.multiform--final-page .ktw-form-prev-pill:focus {
  background: #5a6268;
  color: #fff;
}

.ktw-form-section .submitbtn-contest__prev,
.ktw-form-section .submitbtn-contest__prev--link {
  color: #aaa;
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 1rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}
.ktw-form-section .submitbtn-contest__prev:hover, .ktw-form-section .submitbtn-contest__prev:focus,
.ktw-form-section .submitbtn-contest__prev--link:hover,
.ktw-form-section .submitbtn-contest__prev--link:focus {
  color: #fff;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.ktw-foot {
  color: #aaa;
}
.ktw-foot p {
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
}
.ktw-foot .ktw-mini-rules {
  font-size: 0.7rem;
  max-width: 72rem;
}
.ktw-foot .ktw-foot-divider {
  border: 0;
  border-top: 0.25rem solid var(--ktw-yellow);
  opacity: 1;
}
.ktw-foot .ktw-discover-logo {
  max-width: min(20rem, 60vw);
}
.ktw-foot .ktw-foot-mark {
  font-family: "Anton", Impact, sans-serif;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.ktw-foot .ktw-foot-mark .l2 {
  color: var(--ktw-yellow);
  margin: 0 0.2em;
}

.terms-content ol.terms-list {
  list-style: decimal outside !important;
  padding-left: 2.5rem;
  margin-left: 0;
}
.terms-content ol.terms-list > li {
  padding-left: 0.5rem;
  display: list-item;
}
.terms-content ol[type=i] {
  list-style: lower-roman outside !important;
  padding-left: 2rem;
}
.terms-content ol[type=i] > li {
  display: list-item;
}
.terms-content ul {
  list-style: disc outside !important;
  padding-left: 2rem;
}
.terms-content ul > li {
  display: list-item;
}

.ktw-form-section .multiform {
  background: transparent;
  transition: background 0.3s ease;
  border: 4px solid var(--ktw-yellow);
  border-radius: 1rem;
  padding: 2rem;
}
.ktw-form-section .multiform h1, .ktw-form-section .multiform h2, .ktw-form-section .multiform h3, .ktw-form-section .multiform h4, .ktw-form-section .multiform p, .ktw-form-section .multiform label, .ktw-form-section .multiform .otp-countdown, .ktw-form-section .multiform .form-text {
  color: var(--ktw-yellow) !important;
}
.ktw-form-section .multiform .btn-outline-secondary {
  color: black;
  border-color: black;
  background: yellow;
  font-weight: bold;
}
.ktw-form-section .multiform .btn-outline-secondary i {
  font-weight: bold;
}
.ktw-form-section .multiform .btn-outline-secondary:hover {
  background: var(--ktw-yellow);
  color: #000;
}
.ktw-form-section .multiform.ktw-multiform--white {
  background: white;
}
.ktw-form-section .multiform.ktw-multiform--white h1, .ktw-form-section .multiform.ktw-multiform--white h2, .ktw-form-section .multiform.ktw-multiform--white h3, .ktw-form-section .multiform.ktw-multiform--white h4, .ktw-form-section .multiform.ktw-multiform--white p, .ktw-form-section .multiform.ktw-multiform--white label, .ktw-form-section .multiform.ktw-multiform--white .otp-countdown, .ktw-form-section .multiform.ktw-multiform--white .form-text {
  color: var(--ktw-ink) !important;
}
.ktw-form-section .multiform .form-indicators {
  justify-content: center !important;
  margin-bottom: 0.5rem !important;
}
.ktw-form-section .multiform .form-indicators .step-indicator {
  display: none;
}
.ktw-form-section .multiform .form-indicators .step-indicator .step-indicator__line {
  background: transparent;
  height: 0.5rem;
  width: 6rem;
}
.ktw-form-section .multiform .form-indicators .step-indicator.active {
  display: block;
}
.ktw-form-section .multiform .form-indicators .step-indicator.active .step-indicator__line {
  background: var(--ktw-red);
}
.ktw-form-section .multiform .form-page input, .ktw-form-section .multiform .form-page select, .ktw-form-section .multiform .form-page textarea, .ktw-form-section .multiform .form-page .upload-area {
  border-radius: 0 !important;
  border: 2px solid var(--ktw-blue);
}
.ktw-form-section .multiform .form-page .upload-area {
  background: transparent !important;
  border: 4px dashed var(--ktw-yellow) !important;
  color: var(--ktw-yellow) !important;
  border-radius: 35px !important;
  height: 16rem !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 1.5rem 2rem;
  text-transform: none;
  font-family: "Helvetica Neue LT Copy", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.3125rem;
  text-align: left;
  justify-content: flex-start;
  line-height: 1.35;
  display: flex !important;
  flex-direction: column !important;
  align-items: start !important;
  justify-content: center !important;
  padding: 0.75rem !important;
  text-align: center !important;
  font-size: 1.6rem !important;
  width: 100% !important;
}
.ktw-form-section .multiform .form-page .upload-area .upload-prompt {
  display: block;
  max-width: 18rem;
  font-style: normal;
  font-size: 1.4rem !important;
}
.ktw-form-section .multiform .form-page .upload-area .upload-formats-hint {
  display: block;
  font-style: normal;
  font-size: 0.8rem !important;
  font-weight: 500;
  margin-top: 0.375rem;
  opacity: 0.85;
  line-height: 1.4;
}
.ktw-form-section .multiform .form-page .upload-area .file-select {
  display: block;
  width: fit-content;
  background: var(--ktw-yellow);
  color: var(--ktw-ink) !important;
  text-decoration: none !important;
  font-family: "Helvetica Neue LT Buttons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 1.25rem;
  border-radius: 50rem;
  margin-top: 0.5rem;
  cursor: pointer;
}
.ktw-form-section .multiform .form-page .upload-area .file-select:hover {
  background: #e6d800;
}
.ktw-form-section .multiform .form-page .upload-area:hover {
  background: rgba(255, 212, 0, 0.06) !important;
  border-color: var(--ktw-yellow) !important;
  color: var(--ktw-yellow) !important;
}
.ktw-form-section .multiform .form-page .upload-area .file-preview-list .file-item {
  max-width: 11rem;
}
.ktw-form-section .multiform .form-page textarea {
  height: 13.5rem !important;
  min-height: 0;
  resize: none;
}

.ktw-contest-closed {
  max-width: 850px;
}

.ktw-closed-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 32px;
  padding: 4rem 2rem;
  backdrop-filter: blur(12px);
}

.ktw-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: #f7d046;
  color: #111;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}

.ktw-closed-card h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
}

.ktw-closed-card p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  max-width: 42rem;
  margin-inline: auto;
}

.ktw-closed-chips img {
  max-width: 420px;
}

.multiform .file-upload-container.file-upload-container--preview-inside .upload-area .upload-prompt {
  width: 100%;
  text-align: start;
  padding: 0.5rem 0;
  margin-left: 2rem;
}

.form-page[data-page="2"] .form-text-block {
  text-align: center;
}

.ktw-form-section .multiform-navigation {
  justify-content: center !important;
  gap: 1rem;
}
.ktw-form-section .multiform-navigation .form-button--next {
  margin-left: 0 !important;
}
.ktw-form-section .multiform-navigation .form-button--prev.form-button--placeholder {
  display: none !important;
}
.ktw-form-section .multiform-navigation .form-button--prev {
  background: transparent !important;
  border: 2px solid var(--ktw-yellow) !important;
  color: var(--ktw-yellow) !important;
  box-shadow: none !important;
}
.ktw-form-section .multiform-navigation .form-button--prev:hover, .ktw-form-section .multiform-navigation .form-button--prev:focus {
  background: rgba(254, 241, 0, 0.12) !important;
  transform: none !important;
}

.ktw-form-section .multiform .form-page .upload-area .file-preview-image,
.ktw-form-section .multiform .form-page .upload-area .file-image img,
.ktw-form-section .multiform .form-page .upload-area img {
  object-fit: contain !important;
}

.ktw-form-section .multiform .upload-area .file-preview-list .file-item {
  width: 11rem !important;
  max-width: 11rem !important;
}

.ktw-form-section .multiform .upload-area .file-preview-delete-button,
.ktw-form-section .multiform .upload-area .delete-existing-file {
  top: 0.4rem !important;
  right: 0.4rem !important;
  margin: 0 !important;
  z-index: 5 !important;
}

.ktw-form-section .form-text-block {
  padding-right: 2.5rem;
}
@media (max-width: 767.98px) {
  .ktw-form-section .form-text-block {
    padding-right: 0;
  }
}

.ktw-form-section .form-check {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-left: 0 !important;
}
.ktw-form-section .form-check .form-check-input {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}
.ktw-form-section .form-check .form-check-label {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.ktw-form-section .form-check .invalid-feedback {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  padding-left: calc(2em + 0.75rem);
}

.form-page[data-page="1"] {
  margin-top: -0.5rem;
}

@media (max-width: 500px) {
  .ktw-form-section .form-check-label,
  .ktw-form-section .form-label {
    font-size: 0.9rem !important;
  }
}
@media (max-width: 500px) {
  .multiform .file-upload-container.file-upload-container--preview-inside .upload-area .upload-prompt {
    width: 100%;
    text-align: start;
    padding: 0.5rem 0;
    margin-left: 0rem;
    font-size: 1.25rem !important;
  }
  .ktw-form-section .submitbtn-contest__submit:hover, .ktw-form-section .submitbtn-contest__submit:focus, .ktw-form-section .multiform-navigation .btn:hover, .ktw-form-section .multiform-navigation .btn:focus, .ktw-form-section .custom-submit-container .btn:hover, .ktw-form-section .custom-submit-container .btn:focus {
    font-size: 1rem;
  }
}

/*# sourceMappingURL=style.css.map */

/* landing.css */
.navbar {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.navbar .navbar-brand {
  font-weight: 700;
  font-size: 1.3rem;
  color: #111;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}
.navbar .navbar-brand:hover {
  color: #007bff;
}
.navbar .nav-link {
  font-weight: 500;
  margin: 0 0.75rem;
  position: relative;
  transition: color 0.2s ease;
}
.navbar .nav-link:hover {
  color: #007bff;
}
.navbar .nav-link.active {
  color: #007bff;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #007bff;
  transition: width 0.25s ease;
}
.navbar .nav-link:hover::after {
  width: 100%;
}
.navbar .btn-signin {
  margin-left: 1rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 25px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
.navbar .btn-signin:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}
.hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}
.hero .hero-content .hero-title {
  font-size: 2.8rem;
  font-weight: 700;
}
.hero .hero-content .hero-title .word {
  opacity: 0;
  display: inline-block;
  margin: 0 0.5rem;
  transform: translateY(30px);
  animation: wordIn 1s forwards;
}
.hero .hero-content .hero-title .word:nth-child(1) {
  animation-delay: 0s;
}
.hero .hero-content .hero-title .word:nth-child(2) {
  animation-delay: 1s;
}
.hero .hero-content .hero-title .word:nth-child(3) {
  animation-delay: 2s;
}
.hero .hero-content p {
  margin: 1rem 0 2rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}
.hero .hero-content .btn-cta {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
}

@keyframes wordIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.news-resources {
  background: #f9fafb;
}
.news-resources .section-header h2 {
  font-size: 2rem;
  color: #222;
}
.news-resources .section-header p {
  font-size: 1rem;
  color: #555;
}
.news-resources .news-card {
  border-radius: 10px;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.news-resources .news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.news-resources .news-card .news-card-img {
  position: relative;
  height: 180px;
  overflow: hidden;
}
.news-resources .news-card .news-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-resources .news-card .news-card-img .badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff6600;
  color: #fff;
  font-size: 0.75rem;
  padding: 5px 10px;
  border-radius: 20px;
}
.news-resources .news-card .news-card-body {
  padding: 1.25rem;
}
.news-resources .news-card .news-card-body h5 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: #222;
}
.news-resources .news-card .news-card-body p {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.news-resources .news-card .news-card-body a {
  font-weight: 600;
  color: #ff6600;
}
.news-resources .news-card .news-card-body a:hover {
  text-decoration: underline;
}

.contest-section {
  background: #f2f1ff url("/assets/images/contest-bg.svg") no-repeat bottom right;
  background-size: cover;
  position: relative;
}
.contest-section .section-header h2 {
  font-size: 2rem;
  color: #222;
}
.contest-section .section-header p {
  font-size: 1rem;
  color: #555;
}
.contest-section .contest-info h4 {
  font-size: 1.25rem;
  color: #ff6600;
  margin-top: 1rem;
}
.contest-section .contest-info p {
  font-size: 1rem;
  color: #333;
  margin-bottom: 1rem;
}
.contest-section .contest-info ul li {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #444;
}
.contest-section .contest-form {
  border: 1px solid #ddd;
}
.contest-section .contest-form .form-label {
  font-size: 0.9rem;
  color: #333;
}
.contest-section .contest-form .form-control {
  border-radius: 6px;
}
.contest-section .contest-form .form-control:focus {
  border-color: #ff6600;
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
}
.contest-section .contest-form button {
  background: #ff6600;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}
.contest-section .contest-form button:hover {
  background: #e05500;
}

.contest-section-overlay .contest-overlay-card {
  display: flex;
  flex-wrap: wrap;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 500px;
}
.contest-section-overlay .contest-overlay-left {
  flex: 1 1 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.contest-section-overlay .contest-overlay-form {
  flex: 1 1 50%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border-left: 2px solid rgba(255, 255, 255, 0.2);
}
.contest-section-overlay .form-control,
.contest-section-overlay .form-select {
  border-radius: 8px;
}
.contest-section-overlay button {
  font-weight: bold;
}

.contest-hero-section {
  position: relative;
}
.contest-hero-section .contest-hero-bg {
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.contest-hero-section .contest-hero-bg .form-hero-container {
  z-index: 10;
}
.contest-hero-section .contest-hero-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
}
.contest-hero-section .contest-hero-form {
  max-width: 700px;
  width: 100%;
  border-radius: 1rem;
  backdrop-filter: blur(6px);
}

/*# sourceMappingURL=landing.css.map */