/* ============================================================
   GLAM JEWELS — App Styles
   Custom components, admin layout, product cards, badges etc.
   ============================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --pink: #ff2d75;
  --pink-dark: #d4005e;
  --pink-light: #fff0f5;
  --gray-dark: #1a1a2e;
  --shadow-pink: 0 4px 15px rgba(255,45,117,.3);
  --transition: .2s cubic-bezier(.4,0,.2,1);
}

/* ── Global ───────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; background: #f9fafb; }
*:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
a { text-decoration: none; }

/* ── Gradient Utility ─────────────────────────────────────── */
.gradient-pink {
  background: linear-gradient(135deg, #ff2d75, #ff4d8d);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  background: linear-gradient(135deg, #ff2d75, #ff4d8d);
  color: #fff;
  font-weight: 700;
  font-size: .875rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 15px rgba(255,45,117,.3);
  white-space: nowrap;
}
.btn-pink:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(255,45,117,.4); }
.btn-pink:active { transform: translateY(0); opacity: 1; }
.btn-pink:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.btn-pink-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.25rem;
  background: #fff;
  color: #ff2d75;
  font-weight: 600; font-size: .875rem;
  border-radius: 9999px;
  border: 2px solid #ff2d75;
  cursor: pointer; text-decoration: none;
  transition: all var(--transition);
}
.btn-pink-outline:hover { background: #fff0f5; }

/* Admin buttons */
.btn-admin-primary {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem;
  background: linear-gradient(135deg, #ff2d75, #ff4d8d);
  color: #fff; font-weight: 700; font-size: .8125rem;
  border-radius: .75rem; border: none; cursor: pointer;
  text-decoration: none; transition: opacity var(--transition);
  box-shadow: 0 2px 8px rgba(255,45,117,.25);
}
.btn-admin-primary:hover { opacity: .9; }
.btn-admin-primary:disabled { opacity: .6; cursor: not-allowed; }

.btn-admin-secondary {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem;
  background: #fff; color: #374151; font-weight: 600; font-size: .8125rem;
  border-radius: .75rem; border: 1.5px solid #e5e7eb; cursor: pointer;
  text-decoration: none; transition: all var(--transition);
}
.btn-admin-secondary:hover { border-color: #ff2d75; color: #ff2d75; }

/* ── Inputs ───────────────────────────────────────────────── */
.input-pink {
  width: 100%; padding: .625rem .875rem;
  border: 2px solid #e5e7eb; border-radius: .75rem;
  font-size: .875rem; color: #111827; background: #fff;
  outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.input-pink:focus {
  border-color: #ff2d75;
  box-shadow: 0 0 0 3px rgba(255,45,117,.12);
}
.input-pink::placeholder { color: #9ca3af; }
select.input-pink { cursor: pointer; }

/* Admin inputs */
.admin-input {
  width: 100%; padding: .625rem .875rem;
  border: 1.5px solid #e5e7eb; border-radius: .625rem;
  font-size: .875rem; color: #111827; background: #fff;
  outline: none; transition: border-color var(--transition);
}
.admin-input:focus { border-color: #ff2d75; box-shadow: 0 0 0 3px rgba(255,45,117,.1); }
.admin-label { display: block; font-size: .75rem; font-weight: 600; color: #6b7280; margin-bottom: .375rem; }

/* Settings inputs */
.settings-input {
  width: 100%; padding: .625rem .875rem;
  border: 1.5px solid #e5e7eb; border-radius: .625rem;
  font-size: .875rem; color: #111827; background: #fff;
  outline: none; transition: border-color var(--transition); box-sizing: border-box;
}
.settings-input:focus { border-color: #ff2d75; box-shadow: 0 0 0 3px rgba(255,45,117,.1); }
.settings-label {
  display: block; font-size: .6875rem; font-weight: 700; color: #6b7280;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .375rem;
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .6rem;
  border-radius: 9999px; font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.badge-pink   { background: #fff0f5; color: #ff2d75; }
.badge-green  { background: #f0fdf4; color: #16a34a; }
.badge-red    { background: #fef2f2; color: #dc2626; }
.badge-blue   { background: #eff6ff; color: #2563eb; }
.badge-yellow { background: #fefce8; color: #ca8a04; }
.badge-gray   { background: #f3f4f6; color: #6b7280; }

/* ── Product Cards ────────────────────────────────────────── */
.product-card {
  background: #fff; border-radius: 1rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform .25s, box-shadow .25s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,45,117,.15); }

.card-img-wrap { position: relative; overflow: hidden; background: #fdf2f8; aspect-ratio: 1; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.product-card:hover .card-img-wrap img { transform: scale(1.06); }

.badge-sale {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  background: #ff2d75; color: #fff; font-size: .65rem; font-weight: 800;
  padding: .2rem .5rem; border-radius: 9999px;
}
.badge-new {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  background: #1a1a2e; color: #fff; font-size: .65rem; font-weight: 800;
  padding: .2rem .5rem; border-radius: 9999px;
}

.quick-actions {
  position: absolute; bottom: .5rem; right: .5rem; z-index: 2;
  display: flex; gap: .375rem;
  opacity: 0; transform: translateY(4px); transition: all .2s;
}
.product-card:hover .quick-actions { opacity: 1; transform: translateY(0); }
.quick-action-btn {
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  color: #374151; transition: all .2s;
}
.quick-action-btn:hover { background: #ff2d75; color: #fff; }

/* ── Page Hero ────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #fff0f5 0%, #fff 60%);
  padding: 2rem 1rem;
}
@media(min-width:640px){ .page-hero { padding: 2.5rem 1.5rem; } }

/* ── Admin Layout ─────────────────────────────────────────── */
.admin-layout {
  display: flex; min-height: 100vh; background: #f1f5f9;
}
.admin-main {
  flex: 1; min-width: 0;
  margin-left: 0;
  transition: margin-left .3s;
}
@media(min-width:1024px){
  .admin-main { margin-left: 256px; }
}

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

/* ── Stat Cards ───────────────────────────────────────────── */
.stat-card {
  background: #fff; border-radius: 1rem; padding: 1.25rem;
  border: 1px solid #f3f4f6; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ── Toast ────────────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 1.25rem; right: 1.25rem; z-index: 9999;
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem 1.25rem; border-radius: .875rem;
  background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.15);
  font-size: .875rem; font-weight: 500; color: #1f2937;
  pointer-events: auto; min-width: 260px; max-width: 360px;
  animation: toastSlide .3s ease-out;
  border-left: 4px solid #6b7280;
}
.toast.success { border-left-color: #22c55e; }
.toast.error   { border-left-color: #ef4444; }
.toast.info    { border-left-color: #3b82f6; }
.toast.warning { border-left-color: #f59e0b; }
.toast.hiding  { animation: toastFade .3s ease-in forwards; }
@keyframes toastSlide { from { opacity:0; transform:translateX(2rem); } to { opacity:1; transform:translateX(0); } }
@keyframes toastFade  { to   { opacity:0; transform:translateX(2rem); } }

/* ── Spinner ──────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Cart / Checkout ──────────────────────────────────────── */
.cart-row { transition: opacity .3s, transform .3s; }

/* ── Admin Sidebar ────────────────────────────────────────── */
#admin-sidebar {
  background: #0f0f1a !important; /* Force solid — no transparency */
  -webkit-font-smoothing: antialiased;
}
#admin-sidebar nav::-webkit-scrollbar { width: 0; }

/* ── Sticky Header ────────────────────────────────────────── */
#main-navbar { transition: box-shadow .2s; }

/* ── Lazy image ───────────────────────────────────────────── */
img[loading="lazy"] { background: #fdf2f8; }

/* ── SweetAlert2 override ─────────────────────────────────── */
.swal2-popup { border-radius: 1rem !important; font-family: inherit !important; }
.swal2-confirm { border-radius: 9999px !important; font-weight: 700 !important; }
.swal2-cancel  { border-radius: 9999px !important; font-weight: 600 !important; }

/* ── Wishlist heart active ────────────────────────────────── */
.heart-active i { color: #ff2d75 !important; font-weight: 900; }

/* ── Scrollbar thin (webkit) ──────────────────────────────── */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 9999px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }

/* ── Tab focus accessibility ──────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #ff2d75; outline-offset: 2px;
}

/* ── Print: hide sidebar, expand main ────────────────────── */
@media print {
  #admin-sidebar, #main-navbar, #mobile-menu { display: none !important; }
  .admin-main { margin-left: 0 !important; }
}

/* ── Auth Pages ───────────────────────────────────────────── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem 2rem;background:linear-gradient(135deg,#fdf2f8 0%,#fff 50%,#fdf2f8 100%)}
.auth-card{background:#fff;border-radius:1.5rem;box-shadow:0 20px 60px rgba(255,45,117,.1),0 2px 8px rgba(0,0,0,.06);padding:2.25rem 2rem;border:1px solid #fce7f3;width:100%;max-width:28rem;box-sizing:border-box}
.auth-logo{text-align:center;margin-bottom:1.75rem}
.auth-logo a{display:inline-flex;align-items:center;gap:.25rem;text-decoration:none}
.auth-label{display:block;font-size:.8125rem;font-weight:600;color:#374151;margin-bottom:.375rem}
.auth-field{margin-bottom:1.1rem}
.auth-input-wrap{position:relative}
.auth-input{width:100%;padding:.7rem 1rem .7rem 2.75rem;border:1.5px solid #e5e7eb;border-radius:.75rem;font-size:.875rem;color:#111827;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff;box-sizing:border-box}
.auth-input.no-icon{padding-left:1rem}
.auth-input.has-right{padding-right:2.75rem}
.auth-input:focus{border-color:#ff2d75;box-shadow:0 0 0 3px rgba(255,45,117,.12)}
.auth-input.error{border-color:#f87171;background:#fef2f2}
.auth-ico{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:.8rem;pointer-events:none}
.auth-ico-right{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#9ca3af;padding:0;font-size:.85rem}
.auth-ico-right:hover{color:#374151}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.825rem 1rem;border-radius:9999px;font-weight:700;font-size:.9rem;border:none;cursor:pointer;transition:opacity .2s,transform .2s;text-decoration:none;box-sizing:border-box}
.auth-btn-primary{background:linear-gradient(135deg,#ff2d75,#ff4d8d);color:#fff;box-shadow:0 4px 15px rgba(255,45,117,.35)}
.auth-btn-primary:hover{opacity:.92;transform:translateY(-1px)}
.auth-btn-outline{background:#fff;color:#ff2d75;border:2px solid #ff2d75}
.auth-btn-outline:hover{background:#fff0f5}
.auth-alert{display:flex;align-items:flex-start;gap:.625rem;padding:.875rem 1rem;border-radius:.75rem;font-size:.8125rem;margin-bottom:1.25rem}
.auth-alert.red{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}
.auth-alert.green{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.auth-alert.amber{background:#fffbeb;border:1px solid #fde68a;color:#b45309}
.auth-alert.blue{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}
.auth-field-err{font-size:.7rem;color:#ef4444;margin-top:.3rem;display:flex;align-items:center;gap:.25rem}
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;font-size:.7rem;color:#9ca3af}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#f3f4f6}
.auth-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem;margin-top:1.25rem;width:100%;max-width:28rem}
.auth-perk{background:#fff;border-radius:1rem;padding:.75rem .5rem;text-align:center;border:1px solid #fce7f3;box-shadow:0 1px 4px rgba(255,45,117,.06)}