/*
BazaarBite brand system.
Primary: deep saffron/amber (#E85D2C-adjacent but shifted — a warm terracotta-orange,
distinct from Foodpanda's pink/magenta) paired with a near-black ink text color and
a clean off-white background. Rounded, card-based, generous whitespace.
*/

:root {
	--fp-primary: #D9622B;       /* terracotta-orange, warm and Pakistani-market-friendly */
	--fp-primary-dark: #B84D1E;
	--fp-primary-light: #FCE8DA;
	--fp-ink: #1F2328;
	--fp-ink-soft: #5B6470;
	--fp-bg: #FDFBF9;
	--fp-card: #FFFFFF;
	--fp-border: #EDE7E1;
	--fp-success: #1E8E5A;
	--fp-danger: #D64545;
	--fp-warning: #E0A22B;
	--fp-radius: 16px;
	--fp-radius-sm: 10px;
	--fp-shadow: 0 4px 20px rgba(31,35,40,0.06);
	--fp-font: 'Poppins', 'Segoe UI', -apple-system, sans-serif;
}

.fp-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.fp-py-lg { padding-top: 60px; padding-bottom: 60px; }

/* Buttons */
.fp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--fp-font); font-weight: 600; font-size: 15px;
	padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.fp-btn-primary { background: var(--fp-primary); color: #fff; }
.fp-btn-primary:hover { background: var(--fp-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217,98,43,0.3); }
.fp-btn-secondary { background: var(--fp-card); color: var(--fp-ink); border: 1.5px solid var(--fp-border); }
.fp-btn-secondary:hover { border-color: var(--fp-primary); color: var(--fp-primary); }
.fp-btn-danger { background: #fff; color: var(--fp-danger); border: 1.5px solid #F3D3D3; }
.fp-btn-small { padding: 8px 16px; font-size: 13px; }
.fp-btn-tiny { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* Cards */
.fp-restaurant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px,1fr)); gap: 20px; margin-top: 20px; }
.fp-restaurant-card { background: var(--fp-card); border-radius: var(--fp-radius); overflow: hidden; box-shadow: var(--fp-shadow); text-decoration: none; color: var(--fp-ink); transition: transform .2s ease; display:block; }
.fp-restaurant-card:hover { transform: translateY(-4px); }
.fp-restaurant-card-cover { height: 140px; background-size: cover; background-position: center; position: relative; }
.fp-restaurant-card-body { padding: 16px; }
.fp-restaurant-card-logo { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #fff; margin-top: -36px; box-shadow: 0 2px 6px rgba(0,0,0,.15); background:#fff; }
.fp-restaurant-card-meta { color: var(--fp-ink-soft); font-size: 13px; margin: 4px 0; }

.fp-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; position: absolute; top: 10px; }
.fp-badge-trusted { background: #FFF3E0; color: var(--fp-primary-dark); left: 10px; }
.fp-badge-open { background: #E4F6EC; color: var(--fp-success); right: 10px; }
.fp-badge-closed { background: #FBEAEA; color: var(--fp-danger); right: 10px; }

/* Storefront */
.fp-storefront-cover { height: 220px; background-size: cover; background-position: center; }
.fp-storefront-header { display: flex; gap: 20px; align-items: flex-start; margin: -40px 0 20px; }
.fp-storefront-logo { width: 88px; height: 88px; border-radius: 20px; border: 4px solid #fff; box-shadow: var(--fp-shadow); background:#fff; }
.fp-storefront-meta { color: var(--fp-ink-soft); font-size: 14px; }
.fp-storefront-body { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.fp-menu-category { margin-top: 28px; margin-bottom: 12px; font-size: 20px; }
.fp-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 16px; }
.fp-menu-item { background: var(--fp-card); border-radius: var(--fp-radius-sm); overflow: hidden; box-shadow: var(--fp-shadow); }
.fp-menu-item img { width: 100%; height: 120px; object-fit: cover; }
.fp-menu-item-body { padding: 12px; }
.fp-menu-item-desc { color: var(--fp-ink-soft); font-size: 12px; min-height: 30px; }
.fp-menu-item-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.fp-price { font-weight: 700; color: var(--fp-primary); }
.fp-menu-item-unavailable { opacity: .5; }
.fp-cart-sidebar { background: var(--fp-card); border-radius: var(--fp-radius); padding: 16px; box-shadow: var(--fp-shadow); position: sticky; top: 20px; }

/* Forms */
.fp-form-card { background: var(--fp-card); border-radius: var(--fp-radius); padding: 24px; box-shadow: var(--fp-shadow); max-width: 520px; margin: 20px 0; }
.fp-form-card label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--fp-ink); }
.fp-form-card input, .fp-form-card select, .fp-form-card textarea {
	width: 100%; padding: 10px 14px; margin-top: 6px; border-radius: var(--fp-radius-sm);
	border: 1.5px solid var(--fp-border); font-family: var(--fp-font); font-size: 14px; box-sizing: border-box;
}
.fp-form-message { font-size: 13px; margin: 8px 0; }
.fp-form-message.fp-success { color: var(--fp-success); }
.fp-form-message.fp-error { color: var(--fp-danger); }

/* Dashboards */
.fp-dashboard-tabs { display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 2px solid var(--fp-border); margin-bottom: 20px; }
.fp-tab-btn { background: none; border: none; padding: 12px 18px; font-weight: 600; cursor: pointer; color: var(--fp-ink-soft); border-bottom: 3px solid transparent; }
.fp-tab-btn.active { color: var(--fp-primary); border-color: var(--fp-primary); }
.fp-tab-panel { display: none; }
.fp-tab-panel.active { display: block; }
.fp-count-badge { background: var(--fp-danger); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }

.fp-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 14px; }
.fp-stat-grid-compact { grid-template-columns: repeat(3, 1fr); }
.fp-stat-card { background: var(--fp-card); border-radius: var(--fp-radius-sm); padding: 16px; box-shadow: var(--fp-shadow); text-align: center; }
.fp-stat-value { display: block; font-size: 24px; font-weight: 800; color: var(--fp-primary); }
.fp-stat-label { font-size: 12px; color: var(--fp-ink-soft); }

.fp-table { width: 100%; border-collapse: collapse; background: var(--fp-card); border-radius: var(--fp-radius-sm); overflow: hidden; margin-top: 14px; }
.fp-table th, .fp-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--fp-border); font-size: 13px; }
.fp-status-pill { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--fp-primary-light); color: var(--fp-primary-dark); }
.fp-status-delivered { background: #E4F6EC; color: var(--fp-success); }
.fp-status-cancelled, .fp-status-rejected { background: #FBEAEA; color: var(--fp-danger); }

.fp-share-link { background: var(--fp-primary-light); padding: 16px; border-radius: var(--fp-radius-sm); margin-top: 20px; }
.fp-hint { color: var(--fp-ink-soft); font-size: 12px; }

/* Tracking timeline */
.fp-timeline { list-style: none; padding: 0; margin: 24px 0; }
.fp-timeline-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--fp-ink-soft); }
.fp-timeline-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--fp-border); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.fp-timeline-done { color: var(--fp-ink); font-weight: 600; }
.fp-timeline-done .fp-timeline-dot { background: var(--fp-success); border-color: var(--fp-success); color: #fff; }
.fp-notice { padding: 14px; border-radius: var(--fp-radius-sm); margin: 16px 0; }
.fp-notice-error { background: #FBEAEA; color: var(--fp-danger); }

.fp-price-breakdown { width: 100%; margin-top: 12px; }
.fp-price-breakdown td { padding: 4px 0; font-size: 14px; }
.fp-price-total td { font-weight: 800; border-top: 1px solid var(--fp-border); padding-top: 8px; }

/* Rider dashboard */
.fp-rider-dashboard { max-width: 480px; margin: 0 auto; }
.fp-rider-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.fp-online-toggle { border: none; padding: 8px 20px; border-radius: 999px; background: var(--fp-border); color: var(--fp-ink-soft); font-weight: 700; cursor: pointer; }
.fp-online-toggle.is-online { background: var(--fp-success); color: #fff; }
.fp-request-card, .fp-active-delivery-card, .fp-complaint-card { background: var(--fp-card); border-radius: var(--fp-radius-sm); padding: 16px; box-shadow: var(--fp-shadow); margin-bottom: 12px; }
.fp-request-actions { display: flex; gap: 8px; margin-top: 10px; }

.fp-pending-notice { background: var(--fp-primary-light); padding: 30px; border-radius: var(--fp-radius); text-align: center; max-width: 500px; margin: 40px auto; }

@media (max-width: 780px) {
	.fp-storefront-body { grid-template-columns: 1fr; }
	.fp-stat-grid-compact { grid-template-columns: repeat(3,1fr); }
}