/* Reset / base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  background-color: #121212; /* dark background */
  color: #f0f0f0;           /* light text */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

ul {
	list-style-position: inside;
	margin: 0;
}

.textarea-vertical {
	resize: vertical;
}

.textarea-noresize {
	resize: none;
}

.center_text {
	text-align: center;
}

.ul_no_bullet {
  list-style-type: none;
}

/* Links */
a, a:visited {
  color: #4da3ff;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #82c4ff;
  text-decoration: underline;
}

.bold-link {
  font-weight: bold;
  color: #4da3ff;
  text-decoration: none;
}
.bold-link:hover,
.bold-link:focus {
  font-weight: bold;
  color: #82c4ff;
  text-decoration: underline;
}
.bold-link:visited {
  font-weight: bold;
  color: #4da3ff;
}

.deleted-link, .deleted-link:visited {
	color: red;
	text-decoration: line-through;
}
.deleted-link:hover,
.deleted-link: focus {
	color: #BE1931,
	text-decoration: underline;
}

/* Layout */
.body_container {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.body_content {
	display: flex;
	width: 100%;
	margin: 0 auto;
	flex: 1;
}

.body_column {
	width: 100%;
	margin: 0 auto;
	flex: 1;
}

.home_disclaimer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}


.product_listings {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem 0;
	gap: 3rem;
}

.product_listing_container {
  padding: 2rem;
  background-color: #1e1e1e;
  border-radius: 15px;
  max-width: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.product_listing_images {
  width: 100%;
  display: grid;
  gap: var(--pli-gap);
  grid-template-columns: 1fr auto; /* main | zoom */
	
  --pli-radius: 12px;
  --pli-gap: 12px;
  --pli-thumb-size: 72px;     /* height of thumbnails */
  --pli-border: 1px solid #2b2b2b33;
  --pli-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.pli-main {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--pli-radius);
  overflow: hidden;
  border: var(--pli-border);
  box-shadow: var(--pli-shadow);
  background: #111;
  /* optional aspect ratio to prevent layout shift before load */
  aspect-ratio: 4 / 3;
  max-width: 100%;
  
  background-position: center;
  background-repeat: no-repeat;
  background-color: #111;
}

.pli-main-img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
  object-position: center;
  background: #000;
  transition: opacity .15s ease;
}

.pli-main.is-zoomed .pli-main-img {
  opacity: 0;
  pointer-events: none; /* make sure background gets pointer events */
}

.pli-main.is-zoomable { cursor: zoom-in; }
.pli-main.is-zoomed   { cursor: zoom-out; }

/* Prev/Next */
.pli-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: .9;
}
.pli-prev { left: 10px; }
.pli-next { right: 10px; }
.pli-nav:hover,
.pli-nav:focus-visible { background: rgba(0,0,0,.75); }

/* Thumbnails strip */
.pli-thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--pli-gap);
  overflow-x: auto;
  padding: 8px;
  border-radius: var(--pli-radius);
  border: var(--pli-border);
  background: #0c0c0c;
  scroll-snap-type: x proximity;
  grid-column: 1 / -1; /* make thumbnails span full width */
}
.pli-thumbs::-webkit-scrollbar { height: 8px; }
.pli-thumbs::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

.pli-thumb {
  scroll-snap-align: start;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  position: relative;
}
.pli-thumb:focus-visible { outline: 2px solid #6aa0ff; outline-offset: 2px; }

.pli-thumb img {
  height: var(--pli-thumb-size);
  width: auto;
  display: block;
  border-radius: 6px;
  object-fit: cover;
  background: #111;
}

.pli-thumb.is-active {
  border-color: #6aa0ff;
  box-shadow: 0 0 0 2px rgba(106,160,255,.35);
}

/* Delete overlay element */
.pli-thumb .pli-thumb-delete {
    position: absolute;
    bottom: 0;
    right: 0;
	width: 100%;
	text-align: center;
    background: rgba(150, 0, 0, 0.65);
    color: #FF0000;
    font-size: 8px;
    padding: 10px 0;
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
	user-select: none;
}

/* Primary overlay element */
.pli-thumb .pli-thumb-primary {
	position: absolute;
    top: 0;
    right: 0;
	width: 100%;
	text-align: center;
    background: rgba(0, 150, 0, 0.65);
    color: #00FF00;
    font-size: 8px;
    padding: 10px 0;
    border: none;
    opacity: 1;
    pointer-events: none;
    transition: opacity .15s ease;
	user-select: none;
}

/* New overlay element */
.pli-thumb .pli-thumb-new {
	position: absolute;
    top: 0;
    right: 0;
	width: 100%;
	text-align: center;
    background: rgba(0, 150, 150, 0.65);
    color: #00FFFF;
    font-size: 8px;
    padding: 10px 0;
    border: none;
    opacity: 1;
    pointer-events: none;
    transition: opacity .15s ease;
	user-select: none;
}

/* Hover show */
.pli-thumb:hover .pli-thumb-delete {
    opacity: 1;
    pointer-events: auto;
}

/* Optional: fade image slightly on hover */
.pli-thumb:hover img {
    opacity: 0.75;
}


/* Responsive tweaks */
@media (max-width: 520px) {
  .product_listing_images { --pli-thumb-size: 56px; }
  .pli-nav { width: 36px; height: 36px; font-size: 18px; }
}

.product_listing_heading {
}

.product_listing_desc {
	padding-top: 1rem;
}



/* Navigation */

.header-contianer {
	background-color: #1e1e1e;
	border-bottom: 1px solid #2c2c2c;
	padding: 0.5rem 1rem;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.site-nav {
  padding: 0.5rem 1rem;
  display: flex;
  gap: 2rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.nav-links a {
  color: #f0f0f0;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-links a:hover,
.nav-links a:focus {
  background-color: #2c2c2c;
}

.nav-links a.active {
  background-color: #4da3ff;
  color: #121212;
}

.nav-links > li {
  position: relative;
}

.user-menu {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-menu .username {
  color: #f0f0f0;
  font-weight: 500;
}

.user-menu .logout-btn {
  background-color: #4da3ff;
  color: #121212;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-menu .logout-btn:hover,
.user-menu .logout-btn:focus {
  background-color: #82c4ff;
}

/* Footer */
.site-footer {
  background-color: #1e1e1e;
  border-top: 1px solid #2c2c2c;
  color: #cccccc;
  font-size: 12px;
}
.site-footer a {
	color: #ccc;
	text-decoration: underline;
}
.site-footer a:hover {
	color: #fff;
}

.footer_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem 0;
  
  display: flex;
}

.footer_section_container {
  gap: 2rem;
  width: 100%;
  display: flex;
  margin-left: auto;
}

.footer_section {
	padding: 0.25rem;
	width: 25%;
}

.footer_copyright_container {
	max-width: fit-content;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center; 
}

.footer_copyright {
  padding: 1rem;
}

.footer_social_links {
	width: 100%;
}


/* ==========================================================================
   Data table styling
   Use on <table class="data-table">
   ========================================================================== */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  background-color: #1e1e1e;
  border: 1px solid #2c2c2c;
  border-radius: 6px;
  overflow: hidden;
  table-layout: fixed;
}

.data-table thead {
  background-color: #2c2c2c;
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #2c2c2c;
}

.data-table th {
  font-weight: 600;
  color: #f0f0f0;
  background-color: #2c2c2c;
}

.data-table td {
  color: #ddd;
}

/* Zebra striping */
.data-table tbody tr:nth-child(even) {
  background-color: #242424;
}

/* Hover effect */
.data-table tbody tr:hover {
  background-color: #333;
}

/* Responsive: scroll on small screens */
.data-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.error-message {
  display: block;          /* makes centering work */
  margin-top: 1rem;        /* space above error */
  text-align: center;      /* center text */
  color: #ff4d4d;          /* red that pops on dark background */
  font-weight: 600;
}

.error-message-no-margin {
  display: block;          /* makes centering work */
  text-align: center;      /* center text */
  color: #ff4d4d;          /* red that pops on dark background */
  font-weight: 600;
}

.button-blue {
  background-color: #4da3ff;
  color: #121212;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button-blue:hover,
.button-blue:focus {
  filter: brightness(1.1);
  
}

.button-red {
  background-color: #BE1931;
  color: #121212;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button-red:hover,
.button-red:focus {
  filter: brightness(1.1);
  
}

.button-gray {
  background-color: #acacac;
  color: #121212;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.button-gray:hover,
.button-gray:focus {
  filter: brightness(1.1);
}

.button-disabled,
.button-disabled:hover,
.button-disabled:focus {
	filter: brightness(0.2) !important;
	cursor: not-allowed !important;
}

.reqd_ast {
	color: red;
}

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

.button-image {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.button-image img {
  width: 18px;
  height: 18px;
  border-radius: 8px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.button-image:hover img {
  transform: scale(1.05);
  opacity: 0.85;
}

.button-image-disabled {
	opacity: 0.25;
}

.is-hidden { display: none !important; }

button:focus-visible, input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}