/* =========================================================
   Bitelo Design System – Reusable Components
   ========================================================= */

/* Container */
.bit-container {
	width: 100%;
	max-width: var(--bit-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--bit-space-6);
	padding-right: var(--bit-space-6);
}

@media (min-width: 1024px) {
	.bit-container {
		padding-left: var(--bit-space-8);
		padding-right: var(--bit-space-8);
	}
}

/* Typography helpers */
.bit-text-xs { font-size: var(--bit-text-xs); }
.bit-text-sm { font-size: var(--bit-text-sm); }
.bit-text-base { font-size: var(--bit-text-base); }
.bit-text-lg { font-size: var(--bit-text-lg); }
.bit-text-xl { font-size: var(--bit-text-xl); }
.bit-text-2xl { font-size: var(--bit-text-2xl); }
.bit-text-3xl { font-size: var(--bit-text-3xl); }
.bit-text-4xl { font-size: var(--bit-text-4xl); }
.bit-text-5xl { font-size: var(--bit-text-5xl); }

.bit-font-medium { font-weight: var(--bit-weight-medium); }
.bit-font-semibold { font-weight: var(--bit-weight-semibold); }
.bit-font-bold { font-weight: var(--bit-weight-bold); }
.bit-font-extrabold { font-weight: var(--bit-weight-extrabold); }

.bit-text-muted { color: var(--bit-text-muted); }
.bit-text-subtle { color: var(--bit-text-subtle); }
.bit-text-gradient {
	background: linear-gradient(135deg, var(--bit-primary), var(--bit-secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Buttons */
.bit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: var(--bit-space-2);
	border: none;
	border-radius: var(--bit-radius-md);
	padding: 0.85em 1.5em;
	font-family: inherit;
	font-size: var(--bit-text-base);
	font-weight: var(--bit-weight-semibold);
	line-height: var(--bit-line-tight);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	background: var(--bit-surface);
	color: var(--bit-text);
	box-shadow: var(--bit-shadow-sm);
	transition: transform var(--bit-transition-fast), box-shadow var(--bit-transition-fast), background var(--bit-transition-fast), color var(--bit-transition-fast);
}

.bit-btn svg,
.bit-btn .bit-icon {
	width: 1.125em;
	height: 1.125em;
	flex-shrink: 0;
}

.bit-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--bit-shadow-md);
}

.bit-btn:active {
	transform: translateY(0) scale(0.98);
}

.bit-btn-primary {
	background: linear-gradient(135deg, var(--bit-primary), var(--bit-primary-600));
	color: #fff;
	box-shadow: var(--bit-shadow-sm), var(--bit-shadow-glow);
}

.bit-btn-primary:hover {
	box-shadow: var(--bit-shadow-md), var(--bit-shadow-glow);
}

.bit-btn-secondary {
	background: var(--bit-secondary);
	color: #fff;
}

.bit-btn-ghost {
	background: transparent;
	color: var(--bit-text);
	box-shadow: none;
	border: 1px solid var(--bit-border);
}

.bit-btn-ghost:hover {
	background: var(--bit-surface);
	border-color: var(--bit-border-strong);
}

.bit-btn-icon {
	padding: 0.75em;
	border-radius: var(--bit-radius-pill);
}

.bit-btn-sm { padding: 0.6em 1em; font-size: var(--bit-text-sm); }
.bit-btn-lg { padding: 1em 2em; font-size: var(--bit-text-lg); }
.bit-btn-pill { border-radius: var(--bit-radius-pill); }

.bit-btn:disabled,
.bit-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.bit-btn .bit-cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--bit-radius-pill);
	background: var(--bit-primary);
	color: #fff;
	font-size: 10px;
	font-weight: var(--bit-weight-bold);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--bit-shadow-sm);
}

/* Cards */
.bit-card {
	background: var(--bit-surface);
	border: 1px solid var(--bit-border);
	border-radius: var(--bit-radius-lg);
	box-shadow: var(--bit-shadow-sm);
	overflow: hidden;
	transition: transform var(--bit-transition), box-shadow var(--bit-transition), border-color var(--bit-transition);
}

.bit-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--bit-shadow-md);
	border-color: var(--bit-border-strong);
}

.bit-card-glass {
	background: var(--bit-surface-glass);
	backdrop-filter: blur(16px) saturate(1.6);
	-webkit-backdrop-filter: blur(16px) saturate(1.6);
	border: 1px solid var(--bit-border);
}

.bit-card-body {
	padding: var(--bit-space-6);
}

.bit-card-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--bit-gray-200);
	overflow: hidden;
}

.bit-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bit-transition-slow);
}

.bit-card:hover .bit-card-media img {
	transform: scale(1.06);
}

/* Inputs */
.bit-input {
	width: 100%;
	appearance: none;
	border: 1px solid var(--bit-border);
	border-radius: var(--bit-radius-md);
	padding: 0.85em 1em;
	font-family: inherit;
	font-size: var(--bit-text-base);
	color: var(--bit-text);
	background: var(--bit-surface);
	box-shadow: inset var(--bit-shadow-xs);
	transition: border-color var(--bit-transition-fast), box-shadow var(--bit-transition-fast);
}

.bit-input::placeholder {
	color: var(--bit-text-subtle);
}

.bit-input:focus {
	border-color: var(--bit-primary);
	box-shadow: 0 0 0 4px rgba(255, 106, 61, 0.12);
	outline: none;
}

.bit-input-group {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--bit-surface);
	border: 1px solid var(--bit-border);
	border-radius: var(--bit-radius);
	box-shadow: var(--bit-shadow-sm);
	padding: 0.45em;
	transition: box-shadow var(--bit-transition-fast);
}

.bit-input-group:focus-within {
	box-shadow: 0 0 0 4px rgba(255, 106, 61, 0.12);
	border-color: var(--bit-primary);
}

.bit-input-group .bit-input {
	flex: 1;
	border: none;
	background: transparent;
	box-shadow: none;
	padding: 0.7em 0.9em;
}

.bit-input-group .bit-input:focus {
	box-shadow: none;
}

.bit-input-icon {
	width: 1.5em;
	height: 1.5em;
	margin: 0 var(--bit-space-2) 0 var(--bit-space-3);
	color: var(--bit-text-muted);
	flex-shrink: 0;
}

/* Search */
.bit-search {
	display: flex;
	width: 100%;
	max-width: 680px;
	background: var(--bit-surface-glass);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--bit-border);
	border-radius: var(--bit-radius-xl);
	padding: var(--bit-space-2);
	box-shadow: var(--bit-shadow-md);
	gap: var(--bit-space-2);
}

.bit-search .bit-input {
	flex: 1;
	border: none;
	background: transparent;
	box-shadow: none;
	font-size: var(--bit-text-lg);
	padding: 0.75em 1em;
}

.bit-search .bit-btn {
	flex-shrink: 0;
	border-radius: var(--bit-radius);
}

/* Badges */
.bit-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bit-space-1);
	padding: 0.3em 0.75em;
	border-radius: var(--bit-radius-pill);
	font-size: var(--bit-text-xs);
	font-weight: var(--bit-weight-bold);
	line-height: 1.4;
	white-space: nowrap;
}

.bit-badge-open {
	background: var(--bit-accent-100);
	color: #1f5f00;
}

html[data-theme="dark"] .bit-badge-open {
	color: #b9f5a6;
}

.bit-badge-time {
	background: var(--bit-surface);
	color: var(--bit-text);
	border: 1px solid var(--bit-border);
	box-shadow: var(--bit-shadow-xs);
}

.bit-badge-cuisine {
	background: var(--bit-primary-100);
	color: var(--bit-primary-600);
}

html[data-theme="dark"] .bit-badge-cuisine {
	color: #ffb9a4;
}

/* Icons */
.bit-icon {
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex-shrink: 0;
}

.bit-icon-sm { width: 1em; height: 1em; }
.bit-icon-lg { width: 1.5em; height: 1.5em; }
.bit-icon-xl { width: 2em; height: 2em; }

/* Grid */
.bit-grid {
	display: grid;
	gap: var(--bit-space-6);
}

.bit-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bit-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bit-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bit-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 767px) {
	.bit-grid-2,
	.bit-grid-3,
	.bit-grid-4,
	.bit-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.bit-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bit-grid-4,
	.bit-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.bit-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.bit-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Stack / Spacing helpers */
.bit-stack {
	display: flex;
	flex-direction: column;
}

.bit-stack-xs { gap: var(--bit-space-1); }
.bit-stack-sm { gap: var(--bit-space-2); }
.bit-stack-md { gap: var(--bit-space-4); }
.bit-stack-lg { gap: var(--bit-space-6); }
.bit-stack-xl { gap: var(--bit-space-8); }

.bit-flex {
	display: flex;
	align-items: center;
}

.bit-flex-between { justify-content: space-between; }
.bit-flex-wrap { flex-wrap: wrap; }

/* Dropdowns */
.bit-dropdown {
	position: relative;
}

.bit-dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 220px;
	background: var(--bit-surface-glass);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--bit-border);
	border-radius: var(--bit-radius-lg);
	box-shadow: var(--bit-shadow-lg);
	padding: var(--bit-space-2) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--bit-transition-fast), transform var(--bit-transition-fast), visibility var(--bit-transition-fast);
	z-index: 1000;
}

.bit-dropdown.is-open .bit-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.bit-dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--bit-space-3);
	padding: var(--bit-space-3) var(--bit-space-4);
	color: var(--bit-text);
	font-size: var(--bit-text-sm);
	transition: background var(--bit-transition-fast);
}

.bit-dropdown-item:hover {
	background: var(--bit-gray-100);
	text-decoration: none;
}

html[data-theme="dark"] .bit-dropdown-item:hover {
	background: var(--bit-gray-800);
}

/* Skeleton */
.bit-skeleton,
.bit-skeleton-text,
.bit-skeleton-img {
	position: relative;
	overflow: hidden;
	background: var(--bit-gray-200) !important;
	color: transparent !important;
	border-radius: var(--bit-radius-md);
}

.bit-skeleton-text {
	height: 0.9em;
	margin-bottom: var(--bit-space-2);
	width: 100%;
}

.bit-skeleton-text:nth-child(2) { width: 80%; }
.bit-skeleton-text:nth-child(3) { width: 60%; }

.bit-skeleton-img { width: 100%; aspect-ratio: 16 / 10; }

.bit-skeleton::after,
.bit-skeleton-text::after,
.bit-skeleton-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 150%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	animation: bit-shimmer 1.4s infinite;
}

html[data-theme="dark"] .bit-skeleton::after,
html[data-theme="dark"] .bit-skeleton-text::after,
html[data-theme="dark"] .bit-skeleton-img::after {
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* Visibility helpers */
.bit-mobile-only { display: inherit; }
.bit-desktop-only { display: none; }

@media (min-width: 768px) {
	.bit-mobile-only { display: none !important; }
	.bit-desktop-only { display: inherit !important; }
}