/* =======================================================================
   Beez Order App — brand system
   Matches the Beez admin dashboard (dark maroon + pink/purple/blue/orange
   gradient accents, rounded cards) and travelsim.beez.mn's layout language
   (pill badges, numbered steps, sticky CTA, clean rounded cards).
   ======================================================================= */

:root {
	--beez-maroon: #2b1116;
	--beez-maroon-soft: #3a1a20;
	--beez-pink: #e91e63;
	--beez-pink-dark: #c2185b;
	--beez-purple: #9c27f2;
	--beez-blue: #2196f3;
	--beez-orange: #ff7a1a;
	--beez-teal: #14c9a4;
	--beez-cream: #faf7f5;
	--beez-ink: #241016;
	--beez-muted: #8a7d80;
	--beez-border: #f0e6e9;
	--beez-radius: 16px;
	--beez-radius-sm: 10px;
	--beez-shadow: 0 8px 24px rgba(43, 17, 22, 0.08);
	--beez-shadow-lg: 0 16px 40px rgba(43, 17, 22, 0.14);
	--beez-grad-pink: linear-gradient(135deg, #ee2a7b 0%, #c81b64 100%);
	--beez-grad-purple: linear-gradient(135deg, #b224ef 0%, #7b2ff7 100%);
	--beez-grad-blue: linear-gradient(135deg, #3a8dff 0%, #1c62e0 100%);
	--beez-grad-orange: linear-gradient(135deg, #ff9a44 0%, #ff5f2e 100%);
	--beez-font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.beez-register-wrap, .beez-dashboard, .beez-menu-page, .beez-order-status {
	font-family: var(--beez-font);
	color: var(--beez-ink);
	max-width: 720px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------- forms */
.beez-form label, .beez-form h3 { display:block; margin:14px 0 6px; font-weight:700; }
.beez-form h3 { font-size:15px; text-transform:uppercase; letter-spacing:.04em; color:var(--beez-pink-dark); margin-top:26px; }
.beez-form input[type=text], .beez-form input[type=email], .beez-form input[type=password],
.beez-form input[type=number], .beez-form input[type=url], .beez-inline-form select {
	width:100%; max-width:420px; padding:11px 14px; border:1.5px solid var(--beez-border);
	border-radius:var(--beez-radius-sm); font-family:inherit; font-size:14px; background:#fff;
	transition:border-color .15s;
}
.beez-form input:focus, .beez-inline-form select:focus {
	outline:none; border-color:var(--beez-pink);
}

.beez-btn {
	background:var(--beez-grad-pink); color:#fff; border:none; padding:13px 26px;
	border-radius:999px; cursor:pointer; font-weight:700; font-family:inherit; font-size:14px;
	box-shadow:0 6px 16px rgba(233,30,99,.35); transition:transform .12s, box-shadow .12s;
}
.beez-btn:hover { transform:translateY(-1px); box-shadow:0 10px 22px rgba(233,30,99,.42); }
.beez-btn:active { transform:translateY(0); }
.beez-btn-sm { padding:9px 16px; font-size:13px; border-radius:999px; box-shadow:none; }

.beez-alert { padding:12px 16px; border-radius:var(--beez-radius-sm); margin:12px 0; font-size:14px; font-weight:600; }
.beez-alert-success { background:#e3faf0; color:#0a8a4e; }
.beez-alert-error { background:#fde7ea; color:#c21b3e; }
.beez-alert-warning { background:#fff4e0; color:#a05a00; }
.beez-hint { color:var(--beez-muted); font-size:13px; line-height:1.5; }

/* ---------------------------------------------------------------- tabs */
.beez-dashboard h2 { font-size:22px; margin-bottom:4px; }
.beez-tabs { display:flex; gap:4px; margin:18px 0 22px; background:var(--beez-cream); padding:5px; border-radius:999px; }
.beez-tab-btn {
	flex:1; background:none; border:none; padding:10px 14px; cursor:pointer; font-weight:700;
	font-family:inherit; font-size:13px; color:var(--beez-muted); border-radius:999px; transition:.15s;
}
.beez-tab-btn.active { color:#fff; background:var(--beez-grad-pink); box-shadow:0 4px 12px rgba(233,30,99,.3); }

.beez-row {
	display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
	border:1px solid var(--beez-border); border-radius:var(--beez-radius-sm); margin-bottom:8px; background:#fff;
}
.beez-row button { background:none; border:none; color:var(--beez-muted); cursor:pointer; font-size:16px; }
.beez-row button:hover { color:var(--beez-pink-dark); }
.beez-inline-form { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 26px; align-items:center; }

.beez-table-card {
	display:inline-block; text-align:center; margin:0 10px 10px 0; padding:16px;
	border:1px solid var(--beez-border); border-radius:var(--beez-radius); background:#fff; box-shadow:var(--beez-shadow);
}
.beez-table-card strong { display:block; margin-bottom:8px; }
.beez-table-card img { border-radius:8px; }
.beez-table-card .beez-btn-sm { display:inline-block; margin:8px 4px 0; text-decoration:none; color:#fff; }

/* ------------------------------------------------------------ homepage badge */
.beez-badge {
	display:inline-flex; align-items:center; gap:6px; background:var(--beez-cream); color:var(--beez-pink-dark);
	font-weight:700; font-size:12px; padding:6px 14px; border-radius:999px; margin-bottom:14px;
}

/* --------------------------------------------------------- menu / order page */
.beez-menu-page { padding-bottom:100px; }
.beez-menu-header {
	text-align:center; padding:28px 16px 22px; margin:-1px -1px 20px; border-radius:0 0 28px 28px;
	background:var(--beez-maroon); color:#fff;
}
.beez-menu-header h2 { margin:0 0 6px; font-size:22px; }
.beez-menu-header p { margin:0; opacity:.75; font-size:13px; }

.beez-cat-title { margin:26px 4px 12px; font-size:16px; font-weight:800; color:var(--beez-maroon); }
.beez-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; padding:0 4px; }
.beez-product-card {
	border:1px solid var(--beez-border); border-radius:var(--beez-radius); padding:14px; position:relative;
	background:#fff; box-shadow:var(--beez-shadow); transition:box-shadow .15s;
}
.beez-product-card:hover { box-shadow:var(--beez-shadow-lg); }
.beez-product-card img { width:100%; height:120px; object-fit:cover; border-radius:12px; margin-bottom:10px; }
.beez-product-info { display:flex; flex-direction:column; gap:4px; margin-bottom:4px; }
.beez-product-info strong { font-size:14px; }
.beez-product-info span { color:var(--beez-pink-dark); font-weight:700; font-size:14px; }
.beez-add-btn {
	position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
	background:var(--beez-grad-pink); color:#fff; border:none; font-size:20px; cursor:pointer;
	box-shadow:0 4px 10px rgba(233,30,99,.4); line-height:1;
}

.beez-cart-bar {
	position:fixed; left:0; right:0; bottom:0; background:var(--beez-maroon); color:#fff; padding:16px 20px;
	display:flex; justify-content:space-between; align-items:center; box-shadow:0 -10px 30px rgba(0,0,0,.2);
	z-index:999;
}
.beez-cart-bar #beez-cart-summary { font-weight:700; font-size:14px; }
.beez-cart-bar .beez-btn { padding:11px 22px; font-size:13px; }

/* -------------------------------------------------------------- order status */
.beez-order-status { text-align:center; padding:40px 20px; }
.beez-order-status h2 { font-size:20px; }
#beez-status-label {
	display:inline-block; padding:8px 18px; border-radius:999px; font-weight:700; font-size:13px;
	background:var(--beez-cream); color:var(--beez-pink-dark); margin:10px 0;
}
.beez-receipt { margin-top:24px; padding:20px; border:1px solid var(--beez-border); border-radius:var(--beez-radius); }
.beez-receipt img { margin-top:10px; border-radius:8px; }

/* ------------------------------------------------------------ step badges (optional use) */
.beez-steps { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:24px 0; }
.beez-step { flex:1; min-width:150px; text-align:center; padding:18px 12px; border-radius:var(--beez-radius); background:var(--beez-cream); }
.beez-step-num {
	width:32px; height:32px; border-radius:50%; background:var(--beez-grad-pink); color:#fff; font-weight:800;
	display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:13px;
}

@media (max-width:480px) {
	.beez-menu-page, .beez-dashboard, .beez-register-wrap, .beez-order-status { padding-left:10px; padding-right:10px; }
}