/* styles.css */

/* ─── Custom Font ─────────────────────────────────────────────────────────── */
@font-face {
	font-family: 'AniMeMatrix';
	src: url('/static/AniMeMatrix-MB_EN.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap; /* Show fallback font immediately, swap when custom font loads */
}

/* ─── Color Palette ───────────────────────────────────────────────────────── */
:root {
	--color-bg: #0c0c0c;
	/* very dark background */
	--color-surface: #1a1a1a;
	/* slightly lighter panels */
	--color-accent: #ff7900;
	/* vibrant orange */
	--color-text: #f5f5f5;
	/* off-white text */
	--color-text-muted: #999999;
	/* for secondary text */
	--color-border: #333333;
	/* subtle borders */
	--transition: 0.3s ease;
}

/* ─── Global Reset & Base ─────────────────────────────────────────────────── */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* iOS/iPhone specific improvements */
@supports (-webkit-touch-callout: none) {
	/* iOS Safari specific fixes */
	html {
		-webkit-text-size-adjust: 100%; /* Prevent text scaling */
		-webkit-tap-highlight-color: transparent; /* Remove tap highlights */
	}
	
	body {
		-webkit-touch-callout: none; /* Disable callout on long press */
		-webkit-user-select: none; /* Disable text selection by default */
		user-select: none;
	}
	
	/* Allow text selection for input fields and content areas */
	input, textarea, [contenteditable] {
		-webkit-user-select: auto;
		user-select: auto;
	}
	
	/* Allow text selection for readable content */
	p, h1, h2, h3, h4, h5, h6, li, td {
		-webkit-user-select: auto;
		user-select: auto;
	}
}

html,
body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: "Segoe UI", Roboto, sans-serif;
	line-height: 1.6;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ─── Base Links & Buttons ───────────────────────────────────────────────── */
a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition);
}

a:hover {
	color: #ffa34d;
}

button,
.btn {
	display: inline-block;
	background: var(--color-accent);
	color: var(--color-bg);
	border: none;
	padding: 0.75em 1.5em;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
	transition: background var(--transition);
}

button:hover,
.btn:hover {
	background: #e26c00;
}

/* ─── Base Header & Navigation (Mobile) ──────────────────────────────────── */
header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--color-surface);
	padding: 0.5em 1em;
}

.header-left {
	flex: 1;
}

.header-center {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}

.header-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1em; /* Add gap between cart widget and logo */
}

.brand {
	font-family: 'AniMeMatrix', 'Arial Black', 'Impact', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.2rem;
	color: var(--color-accent);
	white-space: nowrap;
	font-weight: bold; /* Make fallback fonts closer to custom font appearance */
	/* Smooth font loading transition */
	transition: font-family 0.1s ease;
}

.logo-icon {
	width: 30px;
	height: auto;
}

/* ─── Cart Widget ──────────────────────────────────────────────────────── */
.cart-widget {
	display: flex;
	align-items: center; /* Center everything vertically within the widget box */
	gap: 0.75em;
	padding: 0.4em 0.8em; /* Made narrower vertically: 0.5em -> 0.4em */
	background: var(--color-accent);
	color: #000000; /* Changed to black for consistency with other orange backgrounds */
	border-radius: 6px;
	transition: background var(--transition);
	text-decoration: none;
	height: fit-content; /* Ensures button doesn't expand unnecessarily */
}

.cart-widget:hover {
	background: #e26c00;
	color: #000000; /* Keep black text on hover too */
}

.cart-icon {
	position: relative;
	display: flex;
	align-items: center; /* Center the SVG within the icon container */
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	/* Remove margin-top - let parent centering handle alignment */
}

.cart-icon svg {
	width: 20px;
	height: 20px;
	display: block; /* Remove any inline spacing */
	fill: currentColor; /* Use the current text color (black) */
}

.cart-count {
	position: absolute;
	top: -8px;
	right: -8px;
	background: #dc3545;
	color: white;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: bold;
	min-width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none; /* Don't interfere with click events */
	z-index: 10; /* Float well above other elements */
	white-space: nowrap; /* Prevent text wrapping */
}

.cart-details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	/* Let parent centering handle vertical alignment */
}

.cart-total {
	font-weight: bold;
	font-size: 0.9rem;
	line-height: 1.2; /* Tighter line height for better alignment */
	margin: 0; /* Remove any default margins */
	margin-bottom: 0; /* Explicitly remove bottom margin */
	padding: 0; /* Remove any default padding */
}


/* Base nav (you may choose to merge category-bar here) */
nav ul {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0.5em 1em;
	background: var(--color-accent);
}

nav a {
	color: var(--color-bg);
	font-weight: 600;
}

/* Admin menu items */
.admin-divider {
	color: var(--color-bg);
	font-weight: bold;
	padding: 0 0.25rem;
}

.admin-link {
	position: relative;
}

.admin-link::before {
	content: '⚙️';
	margin-right: 0.25rem;
}

.admin-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	padding: 0.25rem 0.5rem;
}

/* ─── Hero / Intro (Mobile) ───────────────────────────────────────────────── */
.hero {
	padding: 2em 1em;
	text-align: center;
}

.hero h1 {
	font-size: 6rem;
	margin-bottom: 0.5em;
}

.hero h2 {
	font-size: 4rem;
	margin-bottom: 0.5em;
}

.hero h3 {
	font-size: 2rem;
	margin-bottom: 0.5em;
}

.hero p {
	color: var(--color-text-muted);
	margin-bottom: 1em;
}

/* ─── Category Bar (alias of nav on mobile) ───────────────────────────────── */
.category-bar {
	/* mobile same as nav */
}

.category-bar ul {
	/* handled above in nav */
}

/* ─── Feature / Icon Section (Mobile) ─────────────────────────────────────── */
.features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5em;
	padding: 2em 1em;
	background: var(--color-surface);
}

.feature {
	text-align: center;
}

.feature svg {
	width: 36px;
	height: 36px;
	fill: var(--color-accent);
	margin-bottom: 0.5em;
}

.feature p {
	font-size: 0.9rem;
}

/* ─── Carousel (Mobile) ───────────────────────────────────────────────────── */
.carousel {
	position: relative;
	max-width: 100vw;
	margin: 2em auto;
	overflow: hidden;
}

.carousel-container {
	display: flex;
	transition: transform 0.5s ease-in-out;
}

.carousel-slide {
	min-width: 100%;
	position: relative;
}

.carousel-slide img {
	width: 100%;
	display: block;
	filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.carousel-slide .caption {
	position: absolute;
	bottom: 0.5em;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	padding: 0.3em 0.6em;
	border-radius: 4px;
}

.carousel-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: var(--color-accent);
	border: none;
	color: var(--color-bg);
	font-size: 1.5rem;
	padding: 0.2em 0.4em;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity var(--transition);
}

.carousel-btn:hover {
	opacity: 1;
}

.carousel-btn.prev {
	left: 0.5em;
}

.carousel-btn.next {
	right: 0.5em;
}

/* ─── FAQ Accordion (Mobile) ──────────────────────────────────────────────── */
.faq {
	padding: 2em 1em;
}

.faq-item+.faq-item {
	margin-top: 1em;
}

.faq-question {
	background: var(--color-surface);
	padding: 0.75em 1em;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background: var(--color-bg);
	padding: 0 1em;
	border-left: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

.faq-item.open .faq-answer {
	max-height: 500px;
	padding: 1em;
}

/* ─── Contact Form (Mobile) ───────────────────────────────────────────────── */
.contact {
	padding: 2em 1em;
	background: var(--color-surface);
}

.contact form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}

.contact textarea {
	grid-column: 1 / -1;
	height: 120px;
	resize: vertical;
}

.contact input,
.contact textarea {
	background: #1f1f1f;
	border: 1px solid var(--color-border);
	color: var(--color-text);
	padding: 0.75em;
	border-radius: 4px;
	font-size: 16px; /* Prevent iOS zoom */
	min-height: 44px; /* iOS touch target minimum */
}

/* iPhone-compatible select elements */
select {
	font-size: 16px; /* Prevent iOS zoom */
	min-height: 44px; /* iOS touch target minimum */
	-webkit-appearance: menulist; /* Use native iOS appearance for better compatibility */
	appearance: auto;
}

.contact label {
	font-size: 0.9rem;
	margin-bottom: 0.25em;
	display: block;
}

.contact .submit {
	justify-self: start;
}

/* ─── Products (Mobile) ───────────────────────────────────────────────────── */
.product-list {
	padding: 2em 1em;
}

/* .product-list h3 { */
/* 	color: #ffffff; */
/* 	text-align: center; */
/* 	margin-bottom: 1em; */
/* 	font-size: 2.5rem */
/* } */
.product-list h2 {
	color: var(--color-accent);
	text-align: center;
	margin-bottom: 1em;
	font-size: 1.8rem
}
.product-list h1 {
	color: var(--color-accent);
	text-align: center;
	margin-bottom: 1em;
	font-size: 3rem
}


.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* Center everything in each card */
.product-card {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;    /* horizontal centering */
	text-align: center;
}

/* Force card images into a fixed box and crop via object‑fit */
.product-card img {
  width: 100%;             /* full card width */
  height: 250px;           /* fixed height you choose */
  object-fit: cover;       /* crop & fill the box without distortion */
  object-position: center; /* center the image within its box */
}

.product-card:hover {
	transform: translateY(-4px);
}

.product-card h3 {
	margin: 0.75em 1em 0.25em;
	color: var(--color-text);
	font-size: 1rem;
	object-fit: cover;
	object-position: center;
	font-size: 1.25rem
}

.product-card .price {
	color: var(--color-accent);
	margin: 0 1em 1em;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Main content area ───────────────────────────────────────────────────── */
main {
	flex: 1;
}

/* ─── Footer (Mobile) ─────────────────────────────────────────────────────── */
footer {
	background: var(--color-surface);
	padding: 2em 1em;
	text-align: center;
	font-size: 0.85rem;
	border-top: 1px solid var(--color-border);
	margin-top: auto;
}

footer a {
	color: var(--color-text-muted);
	margin: 0 0.5em;
}

/* ─── Medium screens (481-599px) ─────────────────────────────────────── */
@media (min-width: 481px) and (max-width: 599px) {
	/* Hero text sizing for medium mobile screens */
	.hero h1 {
		font-size: 3.5rem;
	}

	.hero h2 {
		font-size: 2rem;
	}

	.hero h3 {
		font-size: 1.5rem;
	}
}

/* ─── Tablet & Up (≥600px) ───────────────────────────────────────────────────── */
@media (min-width: 600px) {

	/* Header */
	header {
		padding: 1em 2em;
	}

	.brand {
		font-size: 2rem;
	}

	.logo-icon {
		width: 60px;
	}

	/* Hero */
	.hero {
		padding: 3em 2em;
	}

	.hero h2 {
		font-size: 2rem;
	}

	/* Features: two columns */
	.features {
		grid-template-columns: repeat(2, 1fr);
		gap: 2em;
		padding: 3em 2em;
	}

	.feature svg {
		width: 48px;
		height: 48px;
	}

	/* Carousel */
	.carousel {
		margin: 3em auto;
		max-width: 900px;
	}

	.carousel-btn {
		font-size: 2rem;
		padding: 0.25em 0.6em;
	}

	/* Contact form: two columns */
	.contact form {
		grid-template-columns: 1fr 1fr;
	}

	.contact .submit {
		grid-column: 2 / 3;
		justify-self: end;
	}

	/* Products: three columns */
	.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
		padding: 2em 2em;
		max-width: 1000px;
	}

	/* Cart widget adjustments */
	.cart-widget {
		padding: 0.5em 1em; /* Adjusted to maintain narrow vertical height */
	}

	.cart-icon svg {
		width: 24px;
		height: 24px;
		fill: currentColor; /* Use the current text color */
	}

	.cart-details {
		/* Let parent centering handle alignment on tablets */
	}
	
	.cart-icon {
		width: 24px; /* Match larger SVG size on tablets */
		height: 24px;
		/* Let parent centering handle alignment */
	}

	.cart-total {
		font-size: 1rem;
	}
}

/* ─── Desktop & Up (≥1000px) ───────────────────────────────────────────────── */
@media (min-width: 1000px) {
	.products {
		max-width: 1200px;
	}

	header {
		padding: 1.5em 3em;
	}

	.brand {
		font-size: 3rem;
	}

	.logo-icon {
		width: 100px;
	}

	.products {
		max-width: 1200px;
	}
}

/* ─── Create Products ───────────────────────────────────────────────── */
.create-product-form {
	max-width: 600px;
	margin: 2em auto;
	background: var(--color-surface);
	padding: 2em;
	border-radius: 6px;
	border: 1px solid var(--color-border);
}

.create-product-form h2 {
	color: var(--color-accent);
	text-align: center;
	margin-bottom: 1.5em;
}

.create-product-form .form-group {
	margin-bottom: 1em;
}

.create-product-form label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 500;
}

.create-product-form input {
	width: 100%;
	padding: 0.6em;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: #1f1f1f;
	color: var(--color-text);
}

/* ─── Item Detail: Responsive Image ───────────────────────────────────────── */
.product-detail {
	/* center and constrain overall detail section */
	margin: 2em auto;
	padding: 1.5em; /* Increased padding for better spacing */
	max-width: 90vw;
	/* never wider than 90% of viewport */
	width: clamp(300px, 80vw, 600px);
	/* fluid between 300px and 600px */
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	font-family: "Segoe UI", Roboto, sans-serif; /* Revert to system font */
	font-size: 1.1rem; /* Slightly larger base text */
	line-height: 1.6;
	/* Ensure consistent text alignment throughout */
	text-align: center;
	/* Critical: Ensure content stays within container */
	overflow-wrap: break-word;
	word-wrap: break-word;
	box-sizing: border-box;
}

.detail-container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5em;
}

/* New layout container for content below separator line */
.content-below-line {
	display: flex;
	flex-direction: row;
	align-items: center; /* Center items vertically */
	gap: 1.5em;
	margin-top: 1em;
	min-height: 300px; /* Ensure minimum height for vertical centering */
	text-align: center; /* Ensure all content within is centered */
	/* Ensure content stays within bounds */
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden; /* Prevent content overflow */
}

.image-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
}

.detail-image {
	width: auto;
	max-width: 200px;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer; /* Show pointer cursor to indicate clickable */
	transition: opacity 0.2s ease;
}

.detail-image:hover {
	opacity: 0.8; /* Slight fade on hover to indicate interactivity */
}

.enlarge-hint {
	margin-top: 0.5em;
	margin-bottom: 0;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	text-align: center;
	font-style: italic;
}

.text-content {
	flex: 1;
	text-align: center;
	align-self: center; /* Center text content vertically to match image */
	margin: 0; /* Reset margins */
	padding: 0; /* Reset padding */
	width: 100%; /* Ensure full width for consistent centering */
	box-sizing: border-box;
	/* Critical: Prevent text overflow */
	max-width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	min-width: 0; /* Allow flex shrinking */
}

.details {
	flex: 1;
	text-align: center; /* Keep central alignment */
	margin: 0; /* Reset margins */
	padding: 0; /* Reset padding */
	width: 100%; /* Ensure full width for consistent centering */
	box-sizing: border-box;
}

.details h2 {
	margin: 0 0 0.75em 0; /* Reset all margins for consistency */
	font-family: 'AniMeMatrix', sans-serif; /* Ensure custom font for title */
	font-size: 1.8rem; /* Reasonable title size */
	color: var(--color-accent); /* Orange color for title */
	font-weight: bold;
	line-height: 1.2;
	text-align: center; /* Explicit center alignment */
}

/* ─── Very small screens: stack layout ────────────────────────────────── */
@media (max-width: 480px) {
	/* Cart widget on small screens - hide total text */
	.cart-details {
		display: none;
	}

	.cart-widget {
		padding: 0.3em 0.6em; /* Even more compact on small screens */
	}
	
	.header-right {
		gap: 0.5em; /* Smaller gap on mobile screens */
	}

	/* Hide logo icon on very small screens to prevent overflow */
	.logo-icon {
		display: none;
	}

	/* Make hero text mobile responsive */
	.hero h1 {
		font-size: 2.5rem; /* Smaller on mobile */
	}

	.hero h2 {
		font-size: 1.5rem; /* Much smaller on mobile */
	}

	.hero h3 {
		font-size: 1.2rem; /* Smaller on mobile */
	}

	.content-below-line {
		flex-direction: column;
		align-items: center;
		gap: 1em;
		min-height: auto; /* Remove fixed height on mobile */
		max-width: 100%;
	}

	.image-container {
		margin-bottom: 1em;
		max-width: 100%;
	}
	
	.detail-image {
		max-width: 150px;
		width: 100%;
		height: auto;
	}

	.text-content {
		text-align: center;
		max-width: 100%;
		width: 100%;
		padding: 0;
	}
	
	/* Adjust typography for mobile */
	.details h2 {
		font-size: 1.8rem; /* Smaller title on mobile */
	}
	
	.product-detail {
		font-size: 1rem; /* Smaller base text on mobile */
		padding: 1em; /* Less padding on mobile */
		width: calc(100vw - 2em); /* Full width minus margin */
		max-width: calc(100vw - 2em);
		margin: 1em;
		box-sizing: border-box;
	}
	
	/* Ensure mobile description text doesn't break layout */
	.product-detail .description {
		font-size: 1rem; /* Even smaller on mobile */
		padding: 0 0.25em;
		max-width: 100%;
		word-break: break-word;
	}
}

/* ─── Tablet & Up: larger image and spacing ──────────────────────────────── */
@media (min-width: 600px) {
	.detail-container {
		gap: 2em;
	}

	.detail-image {
		max-width: 250px;
		/* slightly larger on bigger screens */
	}
}

/* description text */
.product-detail .description {
	font-size: 1.1rem; /* Reduced size to prevent overflow */
	line-height: 1.6;
	margin: 0 0 1.5em 0; /* Reset all margins for consistency */
	padding: 0 0.5em; /* Add horizontal padding for better readability */
	color: var(--color-text);
	text-align: center !important; /* Force center alignment */
	white-space: normal; /* Use normal whitespace handling since we're using HTML breaks */
	word-wrap: break-word; /* Break long words */
	overflow-wrap: break-word; /* Modern browsers */
	max-width: 100%; /* Ensure it doesn't exceed container */
	box-sizing: border-box; /* Include padding in width calculation */
	/* Additional fixes for flex layout centering */
	display: block;
	width: 100%;
	/* Critical: prevent text from escaping container */
	contain: layout style;
	max-height: none; /* Allow natural height */
}

/* Links within product descriptions */
.product-detail .description .description-link {
	color: var(--color-accent); /* Orange color to match site theme */
	text-decoration: underline;
	transition: color var(--transition), text-decoration-color var(--transition);
	font-weight: 500;
}

.product-detail .description .description-link:hover {
	color: #e26c00; /* Slightly darker orange on hover */
	text-decoration: underline;
	text-decoration-color: #e26c00;
}

.product-detail .description .description-link:visited {
	color: #b8540a; /* Darker orange for visited links */
}

/* unit price */
.product-detail .unit-price {
	margin-bottom: 1em;
	font-size: 1.2rem; /* Larger price text */
	color: var(--color-text-muted);
	font-weight: 600;
	text-align: center; /* Keep central alignment */
}

/* stock status */
.product-detail .unit-quantity.in-stock {
	color: #28a745;
	font-weight: 600;
	margin-bottom: 1em;
	font-size: 1.1rem; /* Larger stock text */
}

.product-detail .unit-quantity.out-of-stock {
	color: #dc3545;
	font-weight: bold;
	margin-bottom: 1em;
	font-size: 1.15rem; /* Larger out of stock text */
}

/* out of stock message styling */
.out-of-stock-message {
	text-align: center;
	margin-top: 1.5em;
}

.out-of-stock-message p {
	color: var(--color-text-muted);
	margin-bottom: 1em;
	font-style: italic;
}

/* disabled button styling specifically for out-of-stock */
.btn-disabled,
.btn:disabled {
	background: var(--color-text-muted) !important;
	color: var(--color-bg) !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
}

/* cart form */
.cart-form {
	display: flex;
	flex-direction: column;
	align-items: center; /* Keep central alignment */
	gap: 1em;
	margin-top: 1.5em;
	font-family: "Segoe UI", Roboto, sans-serif; /* Revert to system font */
}

.cart-form label {
	font-weight: 600;
	font-size: 1.1rem; /* Larger label text */
	color: var(--color-text);
}

.cart-form select {
	padding: 0.5em; /* Normal padding */
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 1.1rem; /* Larger select text */
	font-family: "Segoe UI", Roboto, sans-serif; /* Revert to system font */
}

/* total price line */
.cart-form #total-price {
	color: var(--color-accent);
	font-weight: bold;
	font-size: 1.4rem; /* Larger total price */
}

/* cart form heading (Total: text) */
.cart-form h2 {
	font-family: "Segoe UI", Roboto, sans-serif; /* Revert to system font */
	font-size: 1.3rem; /* Larger heading size */
	color: var(--color-text);
	margin: 0.5em 0;
}

/* ─── Payment Page ─────────────────────────────────────────────────────────── */
.payment-section {
	padding: 2em 1em;
	max-width: 600px;
	margin: 0 auto;
}

.payment-container {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 2em;
}

.payment-container h2 {
	color: var(--color-accent);
	text-align: center;
	margin-bottom: 1.5em;
	font-size: 2rem;
}

.order-summary {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 1.5em;
	margin-bottom: 2em;
}

.order-summary h3 {
	color: var(--color-text);
	margin-bottom: 1em;
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 0.5em;
}

.order-summary p {
	margin: 0.5em 0;
	color: var(--color-text-muted);
}

.order-summary strong {
	color: var(--color-text);
}

.payment-form h3 {
	color: var(--color-text);
	margin-bottom: 1em;
}

#sumup-card {
	margin-bottom: 1.5em;
	min-height: 100px;
}

.pay-button {
	width: 100%;
	font-size: 1.1rem;
	padding: 1em 2em;
}

.pay-button:disabled {
	background: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.6;
}

.payment-status {
	display: none;
	margin-top: 2em;
}

.payment-result {
	display: none;
	padding: 1.5em;
	border-radius: 4px;
	text-align: center;
}

.payment-success {
	background: rgba(40, 167, 69, 0.1);
	border: 1px solid rgba(40, 167, 69, 0.3);
	color: #28a745;
}

.payment-success h3 {
	color: #28a745;
	margin-bottom: 0.5em;
}

.payment-error {
	background: rgba(220, 53, 69, 0.1);
	border: 1px solid rgba(220, 53, 69, 0.3);
	color: #dc3545;
}

.payment-error h3 {
	color: #dc3545;
	margin-bottom: 0.5em;
}

.payment-error .btn {
	margin-top: 1em;
}

/* Responsive adjustments for payment page */
@media (min-width: 600px) {
	.payment-section {
		padding: 3em 2em;
	}

	.payment-container {
		padding: 3em;
	}
}
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color-accent);
	font-size: 1.8rem;
}

/* add to cart button */
.cart-form .add-to-cart {
	width: 100%;
	max-width: 200px;
}

/* Tablet & up: allow a bit larger container */
@media (min-width: 600px) {
	.product-detail {
		width: clamp(400px, 60vw, 800px);
	}
}

/* Desktop & up: even wider */
@media (min-width: 1000px) {
	.product-detail {
		width: clamp(600px, 50vw, 1000px);
	}
}

/* ─── Lightbox Modal ───────────────────────────────────────────────────────── */
.lightbox-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.lightbox-modal.open {
	display: flex;
}

.lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
}

.lightbox-img {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	z-index: 1001;
	cursor: zoom-out;
}

/* ─── Image Gallery Styles ─────────────────────────────────────────────────── */
.image-thumbnails {
	display: flex;
	gap: 0.5em;
	margin-top: 1em;
	justify-content: center;
	flex-wrap: wrap;
}

.thumbnail {
	width: 60px;
	height: 60px;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	object-fit: cover;
	transition: border-color var(--transition), opacity var(--transition);
	opacity: 0.7;
}

.thumbnail:hover {
	opacity: 1;
	border-color: var(--color-accent);
}

.thumbnail.active {
	opacity: 1;
	border-color: var(--color-accent);
	box-shadow: 0 0 8px rgba(255, 121, 0, 0.3);
}

/* Responsive thumbnail sizes */
@media (min-width: 600px) {
	.thumbnail {
		width: 80px;
		height: 80px;
	}
}

@media (min-width: 1000px) {
	.thumbnail {
		width: 100px;
		height: 100px;
	}
}

/* ─── Calcuator formatting ───────────────────────────────────────────────────────── */
.form-row {
	display: flex;
	gap: 1em;
	justify-content: space-between;
}

.form-row .form-group {
	flex: 1;
}

@media (max-width: 500px) {
	.form-row {
		flex-direction: column;
	}
}

#custom-rates-section {
	transition: all 0.3s ease;
	display: none;
}

/* ─── Create Product Form Styles ──────────────────────────────────────────── */
/* Form inputs and textarea */
.create-product-form input[type="text"],
.create-product-form textarea {
  width: 100%;
  padding: 0.75em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border var(--transition);
}

/* Style the file input button */
.create-product-form input[type="file"]::file-selector-button,
.create-product-form input[type="file"]::-webkit-file-upload-button {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 0.6em 1em;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--transition);
}

.create-product-form input[type="file"]::file-selector-button:hover,
.create-product-form input[type="file"]::-webkit-file-upload-button:hover {
  background: #e26c00;
}

/* File input container */
.create-product-form input[type="file"] {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  padding: 0.4em;
  border-radius: 4px;
}

/* Focus states */
.create-product-form input:focus,
.create-product-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Submit button full width */
.create-product-form .btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1.5em;
}

/* Responsive adjustments */
@media (min-width: 600px) {
  .create-product-form {
    padding: 3em;
  }
}

/* Make the little up/down arrows on your quantity field orange */
.create-product-form input[type="number"]::-webkit-inner-spin-button,
.create-product-form input[type="number"]::-webkit-outer-spin-button {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Firefox: remove its default spinner so it doesn’t stay white */
.create-product-form input[type="number"] {
  -moz-appearance: textfield;
}

.field-separator {
	border-top: 1px dashed var(--color-border);
	height: 0px;
	margin: 1em 0;
	border-left: none;
	border-right: none;
	border-bottom: none;
	width: 100%;
	box-sizing: border-box;
}

/* ─── Shopping Cart Page ─────────────────────────────────────────────────── */
.cart {
  max-width: 800px;
  margin: 2em auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2em 1em;
}

.cart h2 {
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.8rem;
}

/* Table styling */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
}

.cart-table th,
.cart-table td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.cart-table th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 600;
}

.cart-table td {
  vertical-align: middle;
}

/* Product cell: image + name */
.cart-table td img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 0.75em;
  vertical-align: middle;
}

/* Center-align numbers */
.cart-table td:nth-child(2),
.cart-table td:nth-child(3),
.cart-table td:nth-child(4) {
  text-align: center;
}

/* Grand total & button */
.cart-total {
  text-align: center;
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: 1em;
}

.cart-total strong {
  color: var(--color-accent);
}

/* Center the checkout button */
.cart .btn {
  display: block;
  margin: 1em auto 0 auto;
  background: var(--color-accent);
  color: var(--color-bg);
  text-align: center;
  max-width: 250px;
}

/* Empty cart message */
.cart p {
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/* in styles.css */

.cart-link {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text);
}

/* ─── Qty selector ───────────────────────────────────────────────── */
.qty-selector {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.qty-btn {
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  padding: 0.25em 0.5em;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
  transition: background var(--transition);
}

.qty-btn:hover {
  background: #e26c00;
}

.qty-value {
  width: 2em;
  text-align: center;
  color: var(--color-text);
  font-weight: bold;
}

/* Disabled qty‑buttons */
.qty-btn:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
  opacity: 0.6;
}

/* make remove buttons a bit smaller */
.remove-btn {
  padding: 0.3em 0.6em;
  font-size: 0.9rem;
  background: #a00; /* dark red for danger */
  color: var(--color-bg);
}
.remove-btn:hover {
  background: #c00;
}

/* ─── Mobile Responsive Cart Table ──────────────────────────────────────── */
@media (max-width: 768px) {
  .cart {
    padding: 1em 0.5em;
    margin: 1em;
  }
  
  /* Hide the table headers on mobile */
  .cart-table thead {
    display: none;
  }
  
  /* Make each table row a card-like block */
  .cart-table tbody tr {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 1em;
    padding: 1em;
    position: relative;
  }
  
  /* Stack table cells vertically */
  .cart-table tbody td {
    display: block;
    padding: 0.5em 0;
    border: none;
    text-align: left !important;
    border-bottom: 1px solid var(--color-border);
  }
  
  /* Remove border from last cell */
  .cart-table tbody td:last-child {
    border-bottom: none;
  }
  
  /* Add labels before each cell using data attributes */
  .cart-table tbody td:nth-child(1):before {
    content: "Product: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .cart-table tbody td:nth-child(2):before {
    content: "Quantity: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .cart-table tbody td:nth-child(3):before {
    content: "Price: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .cart-table tbody td:nth-child(4):before {
    content: "Total: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .cart-table tbody td:nth-child(5):before {
    content: "Remove: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  /* Style the product cell differently on mobile */
  .cart-table tbody td:nth-child(1) {
    background: var(--color-surface);
    border-radius: 4px;
    padding: 0.75em;
    margin-bottom: 0.5em;
  }
  
  /* Make product images smaller on mobile */
  .cart-table td img {
    width: 40px;
    height: 40px;
    margin-right: 0.5em;
  }
  
  /* Improve quantity selector spacing on mobile */
  .cart-table tbody td:nth-child(2) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* Style remove button on mobile */
  .cart-table tbody td:nth-child(5) {
    text-align: center;
    padding: 1em 0 0 0;
  }
  
  .remove-btn {
    width: 100%;
    padding: 0.75em;
    font-size: 1rem;
  }
  
  /* Improve checkout button on mobile */
  .cart .btn {
    width: 100%;
    max-width: none;
    padding: 1em;
    font-size: 1.1rem;
    margin: 1.5em auto 0 auto;
  }
  
  /* Center cart total on mobile */
  .cart-total {
    text-align: center;
    margin: 1em 0;
  }
}

/* For very small screens (phones in portrait) */
@media (max-width: 480px) {
  .cart {
    margin: 0.5em;
    padding: 0.5em;
  }
  
  .cart h2 {
    font-size: 1.5rem;
  }
  
  /* Make product images even smaller on very small screens */
  .cart-table td img {
    width: 35px;
    height: 35px;
  }
  
  /* Adjust cart link layout for small screens */
  .cart-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25em;
  }
  
  .cart-link img {
    margin-bottom: 0.25em;
  }
}

/* ─── Checkout Form Panel ───────────────────────────────────────────── */
.checkout-form {
  max-width: 600px;
  margin: 2em auto;
  background: var(--color-surface);
  padding: 2em;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.checkout-form h2 {
  color: var(--color-accent);
  text-align: center;
  margin-bottom: 1em;
}

/* reuse your form‐group & form-row rules */
.checkout-form .form-group {
  margin-bottom: 1rem;
}

.checkout-form label {
  display: block;
  margin-bottom: 0.25em;
  font-weight: 500;
}

.checkout-form input,
.checkout-form select {
  width: 100%;
  padding: 0.6em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: #1f1f1f;
  color: var(--color-text);
  transition: border var(--transition);
}

.checkout-form input:focus,
.checkout-form select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* two‐column row */
.checkout-form .form-row {
  display: flex;
  gap: 1rem;
}

@media (max-width: 500px) {
  .checkout-form .form-row {
    flex-direction: column;
  }
}

/* summary of costs */
.checkout-form .summary {
  margin: 1.5em 0;
  text-align: center;
}

.checkout-form .summary p {
  margin: 0.5em 0;
  font-size: 1.1rem;
  color: var(--color-text);
}

/* buttons */
.checkout-form .btn.primary {
  background: var(--color-accent);
  color: var(--color-bg);
  width: 100%;
  display: block;
  margin-top: 1.5em;
}

.checkout-form .btn.primary:hover {
  background: #e26c00;
}

.checkout-form .btn.secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.checkout-form .btn.secondary:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* hidden helper */
.hidden {
  display: none;
}

/* Empty cart state styling */
.empty-cart {
  text-align: center;
  padding: 3em 2em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin: 2em 0;
}

.empty-cart p {
  color: var(--color-text-muted);
  font-size: 1.2rem;
  margin-bottom: 1.5em;
  font-style: italic;
}

.empty-cart .btn {
  display: inline-block;
  margin-top: 1em;
}

/* keep dark background & white text on focus/autofill */
.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

/* Chrome’s autofill tends to repaint to yellow/white—override that too */
.checkout-form input:-webkit-autofill,
.checkout-form input:-webkit-autofill:hover,
.checkout-form input:-webkit-autofill:focus {
  background-color: var(--color-surface) !important;
  -webkit-text-fill-color: var(--color-text) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* keep the dropdown dark & text light even when focused */
.checkout-form select,
.checkout-form select:focus {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

/* for Chrome/V8‑based browsers that sometimes repaint select to white */
.checkout-form select:-webkit-autofill,
.checkout-form select:-webkit-autofill:focus {
  background-color: var(--color-surface) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Always keep the dropdown dark-grey with white text */
.checkout-form select,
.checkout-form select:focus {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  font-size: 16px; /* Prevent iOS zoom */
  min-height: 44px; /* iOS touch target minimum */
}

/* iOS-specific fixes for checkout selects */
@supports (-webkit-touch-callout: none) {
  .checkout-form select {
    -webkit-appearance: menulist; /* Use native iOS appearance */
    appearance: auto;
    -webkit-border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Fallback for non-iOS browsers */
@supports not (-webkit-touch-callout: none) {
  .checkout-form select {
    appearance: none;
    -webkit-appearance: none;
  }
}

/* Add your own arrow icon on the right (optional) */
.checkout-form select {
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path fill='%23ffffff' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  padding-right: 2em;
}

/* Autofill hack: force dark background & white text via inset shadow */
.checkout-form select:-webkit-autofill,
.checkout-form select:-webkit-autofill:focus {
  box-shadow: inset 0 0 0 1000px var(--color-surface) !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* disable + grey‑out Place Order until shipping */
.checkout-form .btn:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ensure .checkout-form tables match rest of site */
.checkout-form .cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5em;
}
.checkout-form .cart-table th,
.checkout-form .cart-table td {
  border: 1px solid var(--color-border);
  padding: 0.75em;
  text-align: center;
}
.checkout-form .cart-table th {
  background: var(--color-surface);
}

/* ─── Mobile Responsive Checkout Form Cart Table ─────────────────────────────── */
@media (max-width: 768px) {
  .checkout-form {
    padding: 1em;
    margin: 1em;
  }
  
  /* Hide the table headers on mobile */
  .checkout-form .cart-table thead {
    display: none;
  }
  
  /* Make each table row a card-like block */
  .checkout-form .cart-table tbody tr {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 1em;
    padding: 1em;
  }
  
  /* Stack table cells vertically */
  .checkout-form .cart-table tbody td {
    display: block;
    padding: 0.5em 0;
    border: none;
    text-align: left !important;
    border-bottom: 1px solid var(--color-border);
  }
  
  /* Remove border from last cell */
  .checkout-form .cart-table tbody td:last-child {
    border-bottom: none;
  }
  
  /* Add labels before each cell for checkout form */
  .checkout-form .cart-table tbody td:nth-child(1):before {
    content: "Product: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .checkout-form .cart-table tbody td:nth-child(2):before {
    content: "Quantity: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .checkout-form .cart-table tbody td:nth-child(3):before {
    content: "Price: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  .checkout-form .cart-table tbody td:nth-child(4):before {
    content: "Total: ";
    font-weight: bold;
    color: var(--color-accent);
  }
  
  /* Style the product cell in checkout form */
  .checkout-form .cart-table tbody td:nth-child(1) {
    background: var(--color-surface);
    border-radius: 4px;
    padding: 0.75em;
    margin-bottom: 0.5em;
  }
  
  /* Make product images smaller in checkout form */
  .checkout-form .cart-table td img {
    width: 40px;
    height: 40px;
    margin-right: 0.5em;
  }
}

/* For very small screens - checkout form adjustments */
@media (max-width: 480px) {
  .checkout-form {
    margin: 0.5em;
    padding: 0.75em;
  }
  
  .checkout-form h2 {
    font-size: 1.4rem;
  }
  
  /* Make product images even smaller in checkout */
  .checkout-form .cart-table td img {
    width: 35px;
    height: 35px;
  }
}

/* ─── Success Page ─────────────────────────────────────────────────────────── */
.success-section {
  padding: 2em 1em;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.success-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 2em;
}

.success-container h2 {
  color: #28a745;
  margin-bottom: 1em;
  font-size: 2rem;
}

.success-message {
  margin-bottom: 2em;
}

.success-message h3 {
  color: var(--color-accent);
  margin-bottom: 0.5em;
}

.order-details {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1em;
  margin: 1em 0;
}

.order-details h4 {
  color: var(--color-text);
  margin-bottom: 0.5em;
}

.next-steps {
  margin-bottom: 2em;
  text-align: left;
}

.next-steps h4 {
  color: var(--color-text);
  margin-bottom: 0.5em;
}

.next-steps ul {
  color: var(--color-text-muted);
  padding-left: 1.5em;
}

.next-steps li {
  margin-bottom: 0.25em;
}

.success-actions {
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
}

.success-actions .btn {
  min-width: 150px;
}

/* Responsive adjustments for success page */
@media (min-width: 600px) {
  .success-section {
    padding: 3em 2em;
  }
  
  .success-container {
    padding: 3em;
  }
}

@media (max-width: 500px) {
  .success-actions {
    flex-direction: column;
  }
}


/* ─── Product Management Styles ────────────────────────────────────────────── */
.product-management {
	padding: 2rem;
	max-width: 1400px;
	margin: 0 auto;
}

.management-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 1rem;
}

.management-header h1 {
	color: var(--color-accent);
	font-size: 2rem;
}

.management-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.products-table-container {
	overflow-x: auto;
	background: var(--color-surface);
	border-radius: 8px;
	padding: 1rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.products-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 800px;
}

.products-table th,
.products-table td {
	padding: 1rem;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	vertical-align: middle;
}

.products-table th {
	background: var(--color-bg);
	color: var(--color-accent);
	font-weight: bold;
	position: sticky;
	top: 0;
	z-index: 10;
}

.product-row:hover {
	background: rgba(255, 121, 0, 0.1);
}

.product-image img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid var(--color-border);
}

.product-name strong {
	color: var(--color-text);
	font-size: 1.1rem;
}

.product-description {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-top: 0.25rem;
	max-width: 200px;
	word-wrap: break-word;
}

.product-price {
	font-weight: bold;
	font-size: 1.1rem;
	color: var(--color-accent);
}

.quantity-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-weight: bold;
	font-size: 0.9rem;
}

.quantity-badge.in-stock {
	background: #22c55e;
	color: #000000;
	font-weight: 900;
}

.quantity-badge.low-stock {
	background: #f59e0b;
	color: #000000;
	font-weight: 900;
}

.quantity-badge.out-of-stock {
	background: #ef4444;
	color: #000000;
	font-weight: 900;
}

.type-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: bold;
	text-transform: uppercase;
}

.type-badge.product {
	background: var(--color-accent);
	color: var(--color-bg);
}

.type-badge.adoptable {
	background: #8b5cf6;
	color: white;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 4rem 2rem;
	background: var(--color-surface);
	border-radius: 8px;
}

.empty-state-content {
	max-width: 400px;
	margin: 0 auto;
}

.empty-state-icon {
	font-size: 4rem;
	margin-bottom: 1rem;
}

.empty-state h2 {
	color: var(--color-text);
	margin-bottom: 1rem;
}

.empty-state p {
	color: var(--color-text-muted);
	margin-bottom: 2rem;
}

/* Modal Overrides for Product Management */
.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	animation: fadeIn 0.3s ease;
}

.modal-content {
	background-color: var(--color-surface);
	margin: 5% auto;
	padding: 0;
	border-radius: 8px;
	width: 90%;
	max-width: 500px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	animation: slideIn 0.3s ease;
}

.modal-header {
	padding: 1.5rem;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-header h2 {
	margin: 0;
	color: var(--color-text);
}

.close {
	color: var(--color-text-muted);
	float: right;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	line-height: 1;
}

.close:hover,
.close:focus {
	color: var(--color-accent);
}

.modal-body {
	padding: 1.5rem;
}

.modal-footer {
	padding: 1.5rem;
	border-top: 1px solid var(--color-border);
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
}

/* Animations */
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideIn {
	from {
		transform: translateY(-50px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Mobile Responsive for Product Management */
@media (max-width: 768px) {
	.management-header {
		flex-direction: column;
		gap: 1rem;
		align-items: flex-start;
	}

	.management-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.products-table-container {
		padding: 0.5rem;
	}

	.products-table th,
	.products-table td {
		padding: 0.5rem;
		font-size: 0.9rem;
	}

	.product-description {
		max-width: 150px;
	}

	.action-buttons {
		flex-direction: column;
	}

	.modal-content {
		margin: 10% auto;
		width: 95%;
	}

	.modal-header,
	.modal-body,
	.modal-footer {
		padding: 1rem;
	}

	.modal-footer {
		flex-direction: column;
	}

	.modal-footer .btn {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.product-management {
		padding: 1rem;
	}

	.management-header h1 {
		font-size: 1.5rem;
	}

	.products-table {
		min-width: 600px;
	}
}

/* ─── Gallery Styles ────────────────────────────────────────────────────────── */
.gallery-section {
	padding: 2em 1em;
	max-width: 1400px;
	margin: 0 auto;
}

.gallery-container {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 2em;
}

.gallery-header {
	text-align: center;
	margin-bottom: 2em;
}

.gallery-header h1 {
	color: var(--color-accent);
	font-size: 2.5rem;
	margin-bottom: 0.5em;
	font-family: 'AniMeMatrix', 'Arial Black', 'Impact', 'Helvetica Neue', Arial, sans-serif;
}

.gallery-description {
	color: var(--color-text-muted);
	font-size: 1.1rem;
	margin: 0;
}

/* Gallery Grid */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5em;
	margin-bottom: 3em;
}

.gallery-item {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.gallery-image-container {
	position: relative;
	width: 100%;
	padding-bottom: 75%; /* 4:3 aspect ratio */
	overflow: hidden;
	cursor: pointer;
}

.gallery-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
	cursor: pointer;
}

.gallery-image:hover {
	transform: scale(1.05);
}

.gallery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--transition);
}

.gallery-image-container:hover .gallery-overlay {
	opacity: 1;
}

.gallery-zoom-icon {
	font-size: 2rem;
	color: white;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.gallery-caption {
	padding: 1em;
	color: var(--color-text);
	font-size: 0.9rem;
	line-height: 1.4;
	border-top: 1px solid var(--color-border);
}

/* Gallery Pagination */
.gallery-pagination {
	border-top: 1px solid var(--color-border);
	padding-top: 2em;
	text-align: center;
}

.pagination-info {
	margin-bottom: 1em;
	color: var(--color-text-muted);
}

.pagination-info .item-count {
	font-size: 0.9em;
	opacity: 0.8;
}

.pagination-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

.pagination-btn,
.pagination-number {
	display: inline-block;
	padding: 0.75em 1.25em;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition: all var(--transition);
	font-weight: 500;
}

.pagination-btn:hover:not(.disabled),
.pagination-number:hover {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

.pagination-number.active {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

.pagination-btn.disabled {
	background: var(--color-bg);
	color: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.6;
}

.pagination-dots {
	padding: 0.75em 0.5em;
	color: var(--color-text-muted);
	font-weight: bold;
}

/* Empty State */
.gallery-empty-state {
	text-align: center;
	padding: 4em 2em;
	color: var(--color-text-muted);
}

.gallery-empty-state .empty-state-icon {
	font-size: 4rem;
	margin-bottom: 1em;
	opacity: 0.6;
}

.gallery-empty-state h2 {
	color: var(--color-text);
	margin-bottom: 1em;
	font-size: 1.5rem;
}

.gallery-empty-state p {
	max-width: 400px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Gallery Lightbox Enhancements */
.lightbox-close {
	position: absolute;
	top: 20px;
	right: 30px;
	font-size: 2rem;
	color: white;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition);
	z-index: 1002;
	user-select: none;
}

.lightbox-close:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* Ensure gallery lightbox modal works like product lightbox */
#gallery-lightbox-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.8);
}

#gallery-lightbox-modal.open {
	display: flex;
}

#gallery-lightbox-modal .lightbox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1001;
}

#gallery-lightbox-modal .lightbox-img {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	z-index: 1001;
	cursor: zoom-out;
}

/* Responsive Design */
@media (max-width: 768px) {
	.gallery-section {
		padding: 1em 0.5em;
	}

	.gallery-container {
		padding: 1em;
	}

	.gallery-header h1 {
		font-size: 2rem;
	}

	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 1em;
	}

	.pagination-controls {
		gap: 0.25em;
	}

	.pagination-btn,
	.pagination-number {
		padding: 0.5em 0.75em;
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}

	.gallery-header h1 {
		font-size: 1.75rem;
	}

	.pagination-controls {
		flex-direction: column;
		gap: 0.5em;
	}

	.pagination-btn {
		width: 100%;
		max-width: 200px;
	}
}

/* ─── Order Processing Page ─────────────────────────────────────────────────── */
.order-processing {
	max-width: 1200px;
	margin: 2em auto;
	padding: 2em;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
}

.order-processing h1 {
	color: var(--color-accent);
	margin-bottom: 1.5em;
	text-align: center;
}

/* Filter controls */
.order-filters {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2em;
	padding: 1em;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 4px;
}

.filter-toggle {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.filter-toggle input[type="checkbox"] {
	accent-color: var(--color-accent);
}

.filter-toggle label {
	cursor: pointer;
	user-select: none;
}

/* Order table */
.orders-table-container {
	overflow-x: auto;
	border-radius: 4px;
	border: 1px solid var(--color-border);
}

.orders-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-surface);
	min-width: 800px;
}

.orders-table th {
	background: var(--color-bg);
	color: var(--color-text);
	padding: 1rem;
	font-weight: 600;
	border-bottom: 2px solid var(--color-border);
	text-align: left;
}

.orders-table td {
	padding: 1rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}

.orders-table tr:hover {
	background: rgba(255, 121, 0, 0.05);
}

/* Order status badges */
.status-badge {
	padding: 0.25em 0.5em;
	border-radius: 12px;
	font-size: 0.875em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.status-pending {
	background: rgba(255, 193, 7, 0.2);
	color: #ffc107;
	border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-processing {
	background: rgba(0, 123, 255, 0.2);
	color: #007bff;
	border: 1px solid rgba(0, 123, 255, 0.3);
}

.status-shipped {
	background: rgba(40, 167, 69, 0.2);
	color: #28a745;
	border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-delivered {
	background: rgba(108, 117, 125, 0.2);
	color: #6c757d;
	border: 1px solid rgba(108, 117, 125, 0.3);
}

.status-cancelled {
	background: rgba(220, 53, 69, 0.2);
	color: #dc3545;
	border: 1px solid rgba(220, 53, 69, 0.3);
}

.status-paid {
	background: rgba(40, 167, 69, 0.2);
	color: #28a745;
	border: 1px solid rgba(40, 167, 69, 0.3);
}

.status-completed {
	background: rgba(108, 117, 125, 0.2);
	color: #6c757d;
	border: 1px solid rgba(108, 117, 125, 0.3);
}

.status-failed {
	background: rgba(220, 53, 69, 0.2);
	color: #dc3545;
	border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Order items display */
.order-items {
	max-width: 200px;
	font-size: 0.9em;
	color: var(--color-text-muted);
}

.order-items .item {
	margin-bottom: 0.25em;
}

/* Product links in order items */
.order-items .product-link {
	color: var(--color-accent);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition);
}

.order-items .product-link:hover {
	color: #e26c00;
	text-decoration: underline;
}

.order-items .product-link:visited {
	color: #b8540a; /* Slightly darker orange for visited links */
}

/* Status update controls */
.status-control {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.status-select {
	padding: 0.5em;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-bg);
	color: var(--color-text);
	font-size: 0.875em;
}

.status-select:focus {
	outline: none;
	border-color: var(--color-accent);
}

.update-btn {
	padding: 0.5em 1em;
	border: none;
	border-radius: 4px;
	background: var(--color-accent);
	color: var(--color-bg);
	font-size: 0.875em;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--transition);
}

.update-btn:hover:not(:disabled) {
	background: #e26c00;
}

.update-btn:disabled {
	background: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Pagination controls */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2em;
	gap: 1em;
}

.pagination-btn {
	padding: 0.75em 1.5em;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition: all var(--transition);
}

.pagination-btn:hover:not(.disabled) {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

.pagination-btn.disabled {
	background: var(--color-bg);
	color: var(--color-text-muted);
	cursor: not-allowed;
	border-color: var(--color-border);
}

.pagination-info {
	font-size: 0.9em;
	color: var(--color-text-muted);
}

/* Messages */
.message {
	padding: 1em;
	border-radius: 4px;
	margin-bottom: 1em;
	font-weight: 600;
}

.message.success {
	background: rgba(40, 167, 69, 0.1);
	color: #28a745;
	border: 1px solid rgba(40, 167, 69, 0.2);
}

.message.error {
	background: rgba(220, 53, 69, 0.1);
	color: #dc3545;
	border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Empty state */
.empty-state {
	text-align: center;
	padding: 3em 1em;
	color: var(--color-text-muted);
}

.empty-state h3 {
	margin-bottom: 1em;
	color: var(--color-text);
}

/* Loading state */
.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.order-processing {
		margin: 1em;
		padding: 1em;
	}

	.order-filters {
		flex-direction: column;
		gap: 1em;
		align-items: flex-start;
	}

	.orders-table th,
	.orders-table td {
		padding: 0.75em;
		font-size: 0.9em;
	}

	.order-items {
		max-width: 150px;
	}

	.status-control {
		flex-direction: column;
		gap: 0.25em;
		align-items: flex-start;
	}

	.status-select,
	.update-btn {
		width: 100%;
	}

	.pagination {
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.pagination-btn {
		padding: 0.5em 1em;
	}
}

@media (max-width: 480px) {
	.orders-table {
		min-width: 600px;
	}

	.order-processing h1 {
		font-size: 1.5rem;
	}
}