/* ═══════════════════════════════════════════════════════
   Pecah Duit by Bibifarah — Custom Styles
   Eid / Raya Theme
═══════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────── */
:root {
  --primary: #065f46;
  --primary-light: #d1fae5;
  --gold: #d97706;
  --gold-light: #fef3c7;
  --bg: #fef9f0;
  --card-shadow: 0 4px 24px rgba(6, 95, 70, 0.08);
}

/* ── Base ───────────────────────────────────────────── */
* { box-sizing: border-box; }
body { background: var(--bg); }
::selection { background: var(--primary-light); color: var(--primary); }

/* ── Ketupat SVG background pattern ────────────────── */
.ketupat-bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 L55 30 L30 55 L5 30 Z' fill='none' stroke='%23065f46' stroke-opacity='.06' stroke-width='1.5'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23d97706' fill-opacity='.08'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* ── Lantern animation ─────────────────────────────── */
.lantern {
  display: inline-block;
  transform-origin: top center;
  animation: lanternSwing 3s ease-in-out infinite;
}
.lantern:nth-child(even) {
  animation-delay: -1.5s;
  animation-direction: alternate-reverse;
}
@keyframes lanternSwing {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(8deg); }
}

/* ── Star sparkle ───────────────────────────────────── */
.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkleAnim 2s ease-in-out infinite;
}
@keyframes sparkleAnim {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* ── Hero banner ────────────────────────────────────── */
.hero-banner {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 40%, #047857 70%, #065f46 100%);
  position: relative;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 8 L72 40 L40 72 L8 40 Z' fill='none' stroke='%23ffffff' stroke-opacity='.04' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 80px 80px;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,119,6,.3) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Product cards ──────────────────────────────────── */
.product-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(6, 95, 70, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(6, 95, 70, 0.14);
}
.product-card .add-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: .55rem 1.2rem;
  font-weight: 700;
  font-size: .875rem;
  cursor: pointer;
  transition: background .2s, transform .15s;
  width: 100%;
  margin-top: .75rem;
}
.product-card .add-btn:hover  { background: #047857; transform: scale(1.03); }
.product-card .add-btn:active { transform: scale(.97); }
.product-card .add-btn.adding {
  animation: cartBounce .4s ease;
}
@keyframes cartBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  70%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* ── Badge ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .65rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.badge-success  { background: #d1fae5; color: #065f46; }
.badge-warning  { background: #fef3c7; color: #92400e; }
.badge-info     { background: #dbeafe; color: #1e40af; }
.badge-primary  { background: #ede9fe; color: #4c1d95; }
.badge-danger   { background: #fee2e2; color: #991b1b; }
.badge-secondary{ background: #f3f4f6; color: #6b7280; }

/* pending badge pulse */
.badge-warning { animation: badgePulse 2.5s ease-in-out infinite; }
@keyframes badgePulse {
  0%,100% { opacity:1; }
  50%     { opacity:.7; }
}

/* ── shadcn-style Card ──────────────────────────────── */
.card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0,0,0,.06);
}
.card-header {
  padding: 1.25rem 1.5rem .75rem;
  border-bottom: 1px solid #f3f4f6;
}
.card-body  { padding: 1.25rem 1.5rem; }
.card-footer{ padding: .75rem 1.5rem 1.25rem; border-top: 1px solid #f3f4f6; }

/* ── shadcn-style Button ────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1.2rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  transition: all .2s ease;
  border: none;
  text-decoration: none;
}
.btn:hover  { transform: scale(1.03); }
.btn:active { transform: scale(.97); }
.btn-primary   { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #047857; }
.btn-gold      { background: var(--gold); color: #fff; }
.btn-gold:hover{ background: #b45309; }
.btn-outline   { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-danger    { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-ghost     { background: transparent; color: #6b7280; }
.btn-ghost:hover { background: #f3f4f6; color: #111; }
.btn-sm { padding: .35rem .85rem; font-size: .8rem; }
.btn-lg { padding: .75rem 1.75rem; font-size: 1rem; }

/* ── Form inputs ────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%;
  padding: .6rem .9rem;
  border: 1.5px solid #e5e7eb;
  border-radius: .6rem;
  font-family: inherit;
  font-size: .9rem;
  color: #111827;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6, 95, 70, .12);
}
.textarea { resize: vertical; min-height: 90px; }
.label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: .35rem;
}

/* ── Quantity stepper ───────────────────────────────── */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.qty-stepper button {
  width: 34px; height: 34px;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  transition: background .15s;
}
.qty-stepper button:hover { background: var(--primary-light); }
.qty-stepper input {
  width: 46px;
  text-align: center;
  border: none;
  border-left: 1.5px solid #e5e7eb;
  border-right: 1.5px solid #e5e7eb;
  font-size: .9rem;
  font-weight: 600;
  color: #111;
  padding: 0;
  outline: none;
  height: 34px;
}

/* ── Status timeline ────────────────────────────────── */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: '';
  position: absolute;
  left: .6rem;
  top: 0; bottom: 0;
  width: 2px;
  background: #e5e7eb;
}
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-dot {
  position: absolute;
  left: -1.55rem;
  top: .15rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #e5e7eb;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e5e7eb;
}
.timeline-dot.active {
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.timeline-dot.done   { background: var(--primary); }
.timeline-dot.cancel { background: #ef4444; }

/* ── Order success confetti ─────────────────────────── */
#confettiCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* ── Fade up animation for sections ─────────────────── */
.animate-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.animate-fade-up.visible {
  opacity: 1;
  transform: none;
}

/* ── Admin table ────────────────────────────────────── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.admin-table th {
  background: #f9fafb;
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #6b7280;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.admin-table td {
  padding: .85rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
  vertical-align: middle;
}
.admin-table tr:hover td { background: #f9fafb; }
.admin-table tr:last-child td { border-bottom: none; }

/* ── KPI card ───────────────────────────────────────── */
.kpi-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
}
.kpi-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 4px; height: 100%;
  border-radius: 0 1rem 1rem 0;
}
.kpi-card.green::after  { background: var(--primary); }
.kpi-card.gold::after   { background: var(--gold); }
.kpi-card.blue::after   { background: #3b82f6; }
.kpi-card.purple::after { background: #8b5cf6; }

/* ── Modal ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-overlay.open { opacity: 1; }
.modal-box {
  background: #fff;
  border-radius: 1.25rem;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0,0,0,.2);
  transform: scale(.95);
  transition: transform .2s ease;
}
.modal-overlay.open .modal-box { transform: scale(1); }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Announcement bar ───────────────────────────────── */
.announcement-bar {
  background: linear-gradient(90deg, #b45309, #d97706, #b45309);
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Toast notification ─────────────────────────────── */
#toastContainer {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.toast {
  background: #1f2937;
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: .75rem;
  font-size: .875rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  display: flex;
  align-items: center;
  gap: .5rem;
  animation: toastIn .3s ease;
  max-width: 320px;
}
.toast.success { border-left: 3px solid #10b981; }
.toast.error   { border-left: 3px solid #ef4444; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(2rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(2rem); }
}

/* ── Print styles ───────────────────────────────────── */
@media print {
  header, footer, aside, .no-print, #toastContainer { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #e5e7eb !important; }
  body { background: #fff !important; }
}

/* ── Mobile tweaks ──────────────────────────────────── */
@media (max-width: 640px) {
  .admin-table { font-size: .8rem; }
  .admin-table th, .admin-table td { padding: .6rem .75rem; }
}