/* ── Facebook Empire Pack — Front-End Styles ── */
:root {
  --fep-blue:     #1877F2;
  --fep-blue-dk:  #0a5bc4;
  --fep-bg:       #f0f2f5;
  --fep-surface:  #ffffff;
  --fep-border:   #dde1e7;
  --fep-text:     #1c1e21;
  --fep-muted:    #65676b;
  --fep-success:  #2e7d32;
  --fep-warning:  #e65100;
  --fep-error:    #c62828;
  --fep-gold:     #f5a623;
  --fep-radius:   10px;
  --fep-shadow:   0 2px 12px rgba(0,0,0,.10);
  --fep-trans:    180ms ease;
}

/* ── Tabs ── */
.fep-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.fep-tab {
  padding:8px 18px; border-radius:20px; border:2px solid var(--fep-border);
  background:var(--fep-surface); color:var(--fep-muted); cursor:pointer;
  font-size:.875rem; font-weight:600; transition:all var(--fep-trans);
}
.fep-tab:hover { border-color:var(--fep-blue); color:var(--fep-blue); }
.fep-tab.active { background:var(--fep-blue); border-color:var(--fep-blue); color:#fff; }

/* ── Category Section ── */
.fep-category-section { margin-bottom:40px; }
.fep-cat-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding:16px 20px; background:var(--fep-surface); border-radius:var(--fep-radius); box-shadow:var(--fep-shadow); }
.fep-cat-header svg { color:var(--fep-blue); flex-shrink:0; }
.fep-cat-header h3 { margin:0; font-size:1.1rem; color:var(--fep-text); }
.fep-cat-sub { margin:2px 0 0; font-size:.8rem; color:var(--fep-muted); }

/* ── Product Grid ── */
.fep-product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:18px; }

/* ── Product Card ── */
.fep-product-card {
  background:var(--fep-surface); border:2px solid var(--fep-border);
  border-radius:var(--fep-radius); padding:22px 18px; position:relative;
  transition:transform var(--fep-trans), box-shadow var(--fep-trans);
  display:flex; flex-direction:column; gap:10px;
}
.fep-product-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(24,119,242,.15); border-color:var(--fep-blue); }
.fep-product-card.is-popular { border-color:var(--fep-blue); }

.fep-badge {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--fep-blue); color:#fff; font-size:.7rem; font-weight:700;
  padding:3px 12px; border-radius:20px; white-space:nowrap;
}

.fep-product-tier { font-size:1rem; font-weight:700; color:var(--fep-text); }
.fep-product-price { font-size:1.6rem; font-weight:800; color:var(--fep-blue); }
.fep-product-stock { font-size:.8rem; color:var(--fep-muted); }
.fep-product-stock.low-stock { color:var(--fep-warning); font-weight:600; }
.fep-out { color:var(--fep-error); font-weight:700; }

/* ── Features List ── */
.fep-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.fep-features li { display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--fep-text); }
.fep-feat-check.yes { color:var(--fep-success); font-weight:700; }
.fep-feat-check.no  { color:var(--fep-error);  font-weight:700; }
.fep-feat-val { margin-left:auto; font-weight:600; color:var(--fep-blue); }

/* ── Buy Button ── */
.fep-btn-buy {
  margin-top:auto; padding:10px 0; width:100%;
  background:var(--fep-blue); color:#fff; border:none; border-radius:8px;
  font-size:.9rem; font-weight:700; cursor:pointer;
  transition:background var(--fep-trans), transform var(--fep-trans);
}
.fep-btn-buy:hover:not(.disabled) { background:var(--fep-blue-dk); transform:scale(1.02); }
.fep-btn-buy.disabled { background:#ccc; cursor:not-allowed; }

/* ── Modal ── */
.fep-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:99999; padding:16px;
}
.fep-modal {
  background:var(--fep-surface); border-radius:var(--fep-radius);
  padding:28px; max-width:520px; width:100%; max-height:90vh; overflow-y:auto;
  position:relative; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.fep-modal-close {
  position:absolute; top:14px; right:16px; background:none; border:none;
  font-size:1.5rem; cursor:pointer; color:var(--fep-muted); line-height:1;
}

/* ── Checkout Form ── */
.fep-checkout-header { margin-bottom:20px; }
.fep-checkout-header h3 { font-size:1.2rem; color:var(--fep-text); margin:0 0 8px; }
.fep-product-summary { display:flex; justify-content:space-between; background:var(--fep-bg); padding:10px 14px; border-radius:8px; font-size:.95rem; }

.fep-form { display:flex; flex-direction:column; gap:14px; }
.fep-field { display:flex; flex-direction:column; gap:4px; }
.fep-field label { font-size:.82rem; font-weight:600; color:var(--fep-muted); }
.fep-field input, .fep-field select, .fep-field textarea {
  padding:10px 12px; border:1.5px solid var(--fep-border); border-radius:8px;
  font-size:.9rem; color:var(--fep-text); background:var(--fep-surface);
  transition:border-color var(--fep-trans), box-shadow var(--fep-trans);
}
.fep-field input:focus, .fep-field select:focus, .fep-field textarea:focus {
  outline:none; border-color:var(--fep-blue); box-shadow:0 0 0 3px rgba(24,119,242,.12);
}
.fep-coupon-input-wrap { display:flex; gap:8px; }
.fep-coupon-input-wrap input { flex:1; }
.fep-coupon-input-wrap button {
  padding:10px 14px; background:var(--fep-bg); border:1.5px solid var(--fep-border);
  border-radius:8px; cursor:pointer; font-weight:600; white-space:nowrap;
  transition:background var(--fep-trans);
}
.fep-coupon-input-wrap button:hover { background:var(--fep-blue); color:#fff; border-color:var(--fep-blue); }

.fep-order-total { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:1.5px solid var(--fep-border); font-size:1rem; }
.fep-order-total strong { font-size:1.3rem; color:var(--fep-blue); }

.fep-btn-submit {
  padding:13px; background:var(--fep-blue); color:#fff; border:none;
  border-radius:8px; font-size:1rem; font-weight:700; cursor:pointer;
  transition:background var(--fep-trans);
}
.fep-btn-submit:hover { background:var(--fep-blue-dk); }

.fep-msg { padding:10px; border-radius:8px; font-size:.875rem; }
.fep-msg.success { background:#e8f5e9; color:var(--fep-success); }
.fep-msg.error   { background:#ffebee; color:var(--fep-error); }

/* ── Track Order ── */
.fep-track-wrap, .fep-refund-wrap { max-width:540px; margin:0 auto; }
.fep-track-wrap h3, .fep-refund-wrap h3 { margin-bottom:20px; color:var(--fep-text); }
.fep-field-or { text-align:center; color:var(--fep-muted); font-size:.875rem; font-weight:600; padding:4px 0; }

/* ── Order Status ── */
.fep-order-status { background:var(--fep-surface); border-radius:var(--fep-radius); padding:20px; margin-top:20px; border:2px solid var(--fep-border); }
.fep-order-status-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.fep-order-num { font-size:.875rem; color:var(--fep-muted); }
.fep-order-detail-table { width:100%; border-collapse:collapse; }
.fep-order-detail-table th { text-align:left; padding:8px 12px; background:var(--fep-bg); font-size:.82rem; color:var(--fep-muted); width:40%; }
.fep-order-detail-table td { padding:8px 12px; font-size:.9rem; }
.fep-delivery-data { margin-top:16px; background:var(--fep-bg); padding:14px; border-radius:8px; }
.fep-delivery-data h4 { font-size:.875rem; margin-bottom:8px; }
.fep-delivery-data pre { font-family:monospace; font-size:.8rem; white-space:pre-wrap; word-break:break-all; }

/* ── Status Badges ── */
.fep-status-badge { padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:700; display:inline-block; }
.status-pending    { background:#fff3e0; color:#e65100; }
.status-paid       { background:#e8f5e9; color:#2e7d32; }
.status-processing { background:#e3f2fd; color:#0d47a1; }
.status-delivered  { background:#e8f5e9; color:#1b5e20; }
.status-refund_requested { background:#fce4ec; color:#880e4f; }
.status-refunded   { background:#f3e5f5; color:#4a148c; }
.status-cancelled  { background:#fafafa; color:#616161; }
.status-approved   { background:#e8f5e9; color:#2e7d32; }
.status-rejected   { background:#ffebee; color:#c62828; }
.status-active     { background:#e3f2fd; color:#0d47a1; }
.status-inactive   { background:#fafafa; color:#616161; }

/* ── Refund Policy ── */
.fep-refund-policy { background:var(--fep-bg); border-radius:var(--fep-radius); padding:20px; margin-bottom:24px; }
.fep-refund-policy h3 { margin-bottom:14px; color:var(--fep-text); }
.fep-policy-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fep-policy-item { display:flex; align-items:flex-start; gap:8px; padding:10px; border-radius:8px; background:var(--fep-surface); font-size:.82rem; color:var(--fep-text); }
.fep-policy-icon { font-weight:900; font-size:1rem; flex-shrink:0; }
.fep-policy-item.ok .fep-policy-icon  { color:var(--fep-success); }
.fep-policy-item.no .fep-policy-icon  { color:var(--fep-error); }

/* ── Spinner ── */
@keyframes fep-spin { to { transform:rotate(360deg); } }
.fep-spinner { width:20px; height:20px; border:3px solid var(--fep-border); border-top-color:var(--fep-blue); border-radius:50%; animation:fep-spin .7s linear infinite; display:inline-block; }

/* ── Responsive ── */
@media (max-width:600px) {
  .fep-product-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .fep-modal { padding:20px; }
  .fep-policy-grid { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .fep-product-grid { grid-template-columns:1fr; }
}