@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@500;600;700;800&family=Outfit:wght@600;700;800&display=swap");

:root {
  --ink: #0d0f12;
  --night: #0b0d10;
  --cloud: #f6f3ee;
  --paper: #ffffff;
  --slate: #5b6472;
  --accent: #0b57c9;
  --accent-2: #ffb547;
  --accent-3: #2bb673;
  --outline: rgba(13, 15, 18, 0.08);
  --shadow-soft: 0 10px 30px rgba(12, 20, 35, 0.12);
  --shadow-hover: 0 18px 40px rgba(12, 20, 35, 0.18);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  border-top: 0 !important;
  outline: 0 !important;
  margin: 0;
  padding: 0;
}

body {
  border-top: 0 !important;
  outline: 0 !important;
  font-family: "Inter", "Segoe UI", sans-serif;
  margin: 0;
  /* Reserve space for the fixed header so content doesn't hide behind it */
  padding-top: 72px;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  background-attachment: fixed;
  background-color: #f8f9fb;
  background-image:
    radial-gradient(at 0% 0%, rgba(11, 87, 201, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(255, 181, 71, 0.08) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(11, 87, 201, 0.08) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(255, 181, 71, 0.08) 0px, transparent 50%);
}

.hidden {
  display: none !important;
}

body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  background: radial-gradient(circle at 20% 80%, rgba(43, 182, 115, 0.12), transparent 55%),
    radial-gradient(circle at 90% 20%, rgba(255, 181, 71, 0.12), transparent 50%);
  z-index: -1;
  pointer-events: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13, 15, 18, 0.94);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

header.scrolled {
  background: rgba(13, 15, 18, 0.98);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 24px;
}

.header-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.header-brand img {
  height: 52px;
  width: auto;
  transition: transform 0.2s ease;
}

.header-brand:hover img {
  transform: scale(1.04);
}

nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

nav a {
  color: rgba(244, 246, 251, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
  white-space: nowrap;
  position: relative;
}

nav a:hover,
nav a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
  outline: none;
}

nav a[aria-current="page"] {
  background: rgba(255, 181, 71, 0.22);
  color: #fff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.search-toggle,
.menu-toggle {
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  transition: background 0.25s ease, transform 0.2s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  letter-spacing: -0.02em;
}

.menu-toggle {
  display: none;
}

.search-toggle:hover,
.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.menu-toggle span {
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  display: block;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav overlay */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-overlay.active {
  display: block;
  opacity: 1;
}

/* Mobile header */
@media (max-width: 768px) {
  .header-inner {
    padding: 8px 16px;
  }

  .header-brand img {
    height: 42px;
  }

  nav {
    position: fixed;
    top: 0;
    right: -280px;
    width: 270px;
    height: 100vh;
    background: rgba(13, 15, 18, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 80px 20px 40px;
    gap: 4px;
    z-index: 1001;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
  }

  nav.active {
    right: 0;
  }

  nav a {
    font-size: 15px;
    padding: 14px 18px;
    border-radius: 12px;
    text-align: center;
  }

  nav a:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .menu-toggle {
    display: flex;
    z-index: 1002;
  }

  .search-toggle {
    width: 36px;
    height: 36px;
  }

  .search-toggle svg {
    width: 20px;
    height: 20px;
  }
}

/* Banner */
.banner {
  position: relative;
  background: linear-gradient(120deg, rgba(5, 10, 25, 0.72), rgba(5, 10, 25, 0.4)),
    url("../../banner.png") center/cover no-repeat;
  min-height: 280px;
  display: flex;
  align-items: center;
  /* Center vertically */
  justify-content: center;
  text-align: center;
  padding: 40px 20px 50px;
  color: #fff;
}

.banner h1 {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  background: rgba(13, 15, 18, 0.55);
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}

/* Section titles */
.section-title {
  text-align: center;
  padding: 18px 10px 8px;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  font-weight: 700;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  color: var(--night);
}

.section-title:empty {
  display: none;
}

/* Search box */
.search-container {
  width: 100%;
  max-width: 700px;
  margin: 24px auto;
  padding: 0 18px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box input {
  width: 100%;
  padding: 14px 44px 14px 44px;
  border: 1px solid var(--outline);
  border-radius: 16px;
  font-size: 16px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(12, 20, 35, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-box input:focus {
  outline: none;
  border-color: rgba(11, 87, 201, 0.4);
  box-shadow: 0 8px 20px rgba(11, 87, 201, 0.18);
}

.search-box::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}

.clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  display: none;
}

.clear-search:hover {
  background: #e8eaef;
}

.search-box input:not(:placeholder-shown)+.clear-search {
  display: block;
}

.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  color: var(--slate);
  font-size: 1.05rem;
}

/* Products grid */
.products {
  display: grid;
  grid-template-columns: minmax(auto, 320px);
  /* Limit card width on mobile */
  gap: 18px;
  /* Standard gap */
  padding: 18px 14px 28px;
  margin: 0 auto 36px;
  width: 100%;
  max-width: 1200px;
  flex: 1;
  box-sizing: border-box;
  justify-content: center;
  /* Center the card horizontally */
}

@media (min-width: 600px) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 2 columns on tablet */
    gap: 20px;
    padding: 20px 16px 32px;
  }
}

@media (min-width: 1024px) {
  .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}

.product {
  background: var(--paper);
  border-radius: 14px;
  /* Slightly tighter radius */
  padding: 0;
  box-shadow: 0 4px 12px rgba(12, 20, 35, 0.08);
  /* More visible shadow initially */
  border: 1px solid rgba(13, 15, 18, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s cubic-bezier(.2, .8, .2, 1), box-shadow 0.2s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(12, 20, 35, 0.14);
  border-color: rgba(11, 87, 201, 0.15);
  /* Highlight border on hover */
}

.product-img-wrapper {
  /* Create a perfectly square viewport that matches card width */
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #f0f2f5;
  position: relative;
}

/* Optional: Add a subtle inner border for images specifically */
.product-img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
  pointer-events: none;
}

.product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fill the square while preserving 1:1 ratio */
  border-radius: 0;
}

.product-content {
  padding: 14px 16px 16px;
  /* Standard padding */
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  text-align: center;
  align-items: center;
}

@media (min-width: 600px) {
  .product-content {
    padding: 14px 16px 16px;
  }
}

.product-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(11, 87, 201, 0.07);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product h3 {
  margin: 0;
  font-size: 1.15rem;
  /* Restored size */
  line-height: 1.4;
  font-weight: 700;
  color: var(--night);
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 600px) {
  .product h3 {
    font-size: 1.2rem;
  }
}

/* Price row — inline: discount + original + badge */
.product .price-row {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.product .card-price {
  font-weight: 800;
  font-size: 1.4rem;
  /* Restored size */
  color: var(--accent);
  /* Use accent color to stand out */
  line-height: 1.2;
}

@media (min-width: 600px) {
  .product .card-price {
    font-size: 1.6rem;
  }
}

.product .card-original-price {
  font-size: 0.9rem;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}

.product .card-discount-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(43, 182, 115, 0.12);
  color: #18a064;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Card button row */
.product .card-btn-row {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Side by side buttons */
  gap: 8px;
  width: 100%;
}

@media (min-width: 600px) {
  .product .card-btn-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }
}

.product .card-view-btn,
.product .card-buy-btn {
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  text-align: center;
}

.product .card-view-btn {
  background: #f0f1f3;
  color: var(--night);
  box-shadow: none;
}

.product .card-view-btn:hover {
  background: #e2e4e8;
  transform: translateY(-1px);
}

.product .card-buy-btn {
  background: var(--accent);
  /* Blue accent for primary action */
  color: #fff;
  box-shadow: 0 4px 10px rgba(11, 87, 201, 0.25);
  /* Colored shadow */
}

.product .card-buy-btn:hover {
  background: #0947a6;
  /* Darker blue on hover */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 87, 201, 0.35);
}

/* Updated Buttons */
.view-details,
.product button,
.btn,
.buy-now-btn,
.copy-btn,
.messenger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.view-details,
.buy-now-btn {
  background: var(--night);
  /* Sleek black/dark theme */
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.view-details:hover,
.buy-now-btn:hover {
  transform: translateY(-2px);
  background: #222;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Secondary style for View Details to differentiate */
.view-details {
  background: #f3f4f6;
  color: var(--night);
  box-shadow: none;
}

.view-details:hover {
  background: #e5e7eb;
  color: #000;
  box-shadow: none;
}

.btn-secondary,
.back-btn {
  background: #fff;
  color: var(--night);
  border: 1px solid var(--outline);
}

.btn-secondary:hover,
.back-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.copy-btn {
  background: #f0f3ff;
  color: var(--accent);
  border: 1px solid rgba(11, 87, 201, 0.2);
  box-shadow: none;
}

.copy-btn:hover {
  background: #e3e9ff;
}

/* Other products */
.other-products {
  padding: 50px 16px;
  background: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 40px;
  width: 100%;
  box-sizing: border-box;
}

.other-products h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: var(--night);
}

.other-products-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Contact */
.page-title {
  text-align: center;
  margin: 40px 15px 20px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  font-family: "Inter", "Segoe UI", sans-serif;
  color: var(--night);
}

.contact-page .page-title {
  max-width: 1120px;
  margin: 40px auto 30px;
  padding: 0 24px;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-container {
  max-width: 640px;
  margin: 0 auto 60px;
  background: var(--paper);
  padding: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.contact-page .contact-container {
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 40px;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro service"
    "social service";
  gap: 30px 40px;
  animation: fadeInUp 0.6s ease-out forwards;
}

.contact-page .contact-container > p {
  grid-area: intro;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #64748b;
  font-weight: 400;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.contact-page .social-links {
  grid-area: social;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
  justify-content: unset;
}

.social-links a {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #0d0f12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
  text-decoration: none;
}

.contact-page .social-links a {
  position: relative;
  width: auto;
  height: auto;
  padding: 32px 24px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.contact-page .social-links a::after {
  content: attr(aria-label);
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #334155;
  text-transform: capitalize;
}

.social-links a:hover {
  transform: translateY(-2px);
  background: #1d2230;
}

.contact-page .social-links a:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
  border-color: transparent;
}

.contact-page .social-links a:hover img {
  transform: scale(1.1);
}

.contact-page .social-links a.facebook:hover {
  background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
}

.contact-page .social-links a.whatsapp:hover {
  background: linear-gradient(to bottom right, #f0fdf4, #dcfce7);
}

.contact-page .social-links a.email:hover {
  background: linear-gradient(to bottom right, #fff1f2, #ffe4e6);
}

.contact-page .social-links a.youtube:hover {
  background: linear-gradient(to bottom right, #fef2f2, #fee2e2);
}

.social-links img {
  width: 30px;
  height: 30px;
}

.contact-page .social-links img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
}

/* Contact page location section */
.location-section {
  grid-area: service;
  border-radius: 24px;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  padding: 32px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.location-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.location-details h3 {
  margin: 0 0 16px;
  font-family: "Inter", "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.location-details p {
  margin: 0 0 10px;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.location-details .area {
  color: #38bdf8;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.location-details .business-hours {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.location-details .business-hours p:first-child {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 8px;
  font-weight: 700;
}

.location-details .business-hours p:nth-child(2) {
  color: #22c55e;
  font-weight: 700;
  font-size: 1.1rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contact page responsive */
@media (max-width: 900px) {
  .contact-page .contact-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "intro"
      "social"
      "service";
    padding: 32px;
    gap: 24px;
    margin: 0 20px 40px;
  }

  .contact-page .social-links {
    grid-template-columns: repeat(4, 1fr);
  }

  .contact-page .location-section {
    min-height: 200px;
  }
}

@media (max-width: 640px) {
  .contact-page .page-title {
    margin: 24px auto;
    font-size: 2.2rem;
  }

  .contact-page .contact-container {
    padding: 24px;
    gap: 20px;
  }

  .contact-page .social-links {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-page .social-links a {
    padding: 20px;
    flex-direction: row;
    justify-content: start;
  }

  .contact-page .social-links img {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 400px) {
  .contact-page .contact-container {
    padding: 16px;
    border-radius: 20px;
  }

  .contact-page .social-links {
    grid-template-columns: 1fr;
  }
}

/* Floating messenger */
.floating-messenger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messenger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.messenger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

.messenger-btn img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.facebook-btn {
  background: #1877f2;
}

.facebook-btn:hover {
  background: #1666d0;
}

.whatsapp-btn {
  background: #1e8e3e;
}

.whatsapp-btn:hover {
  background: #136b2c;
}

/* Footer */
.site-footer {
  background: #0b0d10;
  color: #c8cdd6;
  padding: 0;
  margin-top: auto;
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 52px 32px 40px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-brand-col {
  padding-right: 24px;
}

.site-footer .footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.site-footer .footer-brand img {
  height: 44px;
  width: auto;
}

.footer-tagline {
  font-size: 0.88rem;
  line-height: 1.65;
  color: #8b94a5;
  margin: 0 0 20px;
}

.footer-heading {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0 0 18px;
  position: relative;
  padding-bottom: 12px;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a,
.footer-links span {
  color: #8b94a5;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease, padding-left 0.2s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #fff;
  padding-left: 4px;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact-list svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
  opacity: 0.7;
}

.site-footer .footer-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.site-footer .footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease;
}

.site-footer .footer-social a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.16);
}

.site-footer .footer-social img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  padding: 18px 24px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  color: #5b6472;
}

/* Footer responsive — tablet */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 40px 24px 32px;
  }

  .footer-brand-col {
    grid-column: 1 / -1;
    padding-right: 0;
  }
}

/* Footer responsive — mobile */
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 20px 24px;
  }

  .footer-brand-col {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .admin-layout {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--outline);
    padding-bottom: 12px;
    margin-bottom: 16px;
  }

  /* Responsive Table - Card View */
  .table-modern thead {
    display: none;
  }

  .table-modern,
  .table-modern tbody,
  .table-modern tr,
  .table-modern td {
    display: block;
    width: 100%;
  }

  .table-modern tr {
    margin-bottom: 16px;
    background: var(--paper);
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  }

  .table-modern td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    text-align: right;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }

  .table-modern td:last-child {
    border-bottom: none;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px dashed var(--outline);
  }

  .table-modern td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--slate);
    text-align: left;
    margin-right: 16px;
  }

  /* Hide columns marked to hide on mobile if they are empty or redundant, 
     but in card view we usually want to show everything with labels. 
     If specific columns must be hidden, use :not() or similar. 
     For now, we override the .hide-mobile to show them in card view with labels. */
  .hide-mobile {
    display: flex !important;
  }

  .actions-cell {
    width: 100%;
    margin-top: 4px;
  }
}

/* Copy Button Styles */
.copy-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  color: var(--accent);
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  flex-shrink: 0;
}

.copy-btn-icon:hover {
  background: rgba(11, 87, 201, 0.12);
}

.copy-btn-icon:active {
  background: rgba(11, 87, 201, 0.2);
}

.copy-btn-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

@media (max-width: 768px) {
  .copy-btn-icon {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }

  .copy-btn-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--night);
  color: #fff;
  padding: 12px 24px;
  border-radius: 99px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2000;
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-icon {
  color: #2bb673;
}

/* Status Chips Enhancement */
.status-chip {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

.status-chip.success {
  background: rgba(43, 182, 115, 0.15);
  color: #18a064;
}

.status-chip.pending {
  background: rgba(255, 181, 71, 0.15);
  color: #b87a00;
}

/* Action Buttons Enhancement */
.action-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: none;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: #f0f1f3;
  color: var(--ink);
}

.action-btn:hover {
  background: #e2e4e8;
  transform: translateY(-1px);
}

.action-btn.primary {
  background: var(--accent);
  color: white;
}

.action-btn.primary:hover {
  background: #0947a6;
  box-shadow: 0 4px 12px rgba(11, 87, 201, 0.2);
}

.action-btn.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.action-btn.danger:hover {
  background: #dc2626;
  color: white;
}

.action-btn.warning {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.action-btn.warning:hover {
  background: #d97706;
  color: white;
}

/* Forms */
input,
select,
textarea {
  font-family: inherit;
}

/* Animations */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 900px) {
  header {
    padding: 10px 16px;
    justify-content: space-between;
  }

  nav {
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(13, 15, 18, 0.98);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 18px 0;
    gap: 8px;
  }

  nav.active {
    display: flex;
  }

  nav a {
    width: 100%;
    text-align: center;
  }

  .menu-toggle {
    display: flex;
  }
}

@media (max-width: 600px) {
  .products {
    padding: 14px 10px 20px;
    gap: 14px;
    margin: 0 auto 24px;
  }

  .product-content {
    padding: 12px 14px 16px;
  }

  .product .card-view-btn,
  .product .card-buy-btn {
    padding: 12px 0;
    font-size: 0.88rem;
  }

  .other-products {
    padding: 30px 12px;
  }

  .other-products-container {
    padding: 0 8px;
    gap: 12px;
  }

  .social-links {
    gap: 16px;
  }
}

/* Admin */
.muted {
  color: #6b7280;
  font-size: 0.95rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin: 0 0 6px;
}

.admin-shell {
  width: 100%;
  margin: 0 auto 60px;
  padding: 0 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .admin-shell {
    padding: 0 12px 32px;
  }
}

@media (max-width: 480px) {
  .admin-shell {
    padding: 0 10px 24px;
  }
}

.admin-hero {
  width: 100%;
  max-width: 1280px;
  margin: 24px auto 18px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(11, 87, 201, 0.15), rgba(43, 182, 115, 0.1)), #0b0d10;
  color: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .admin-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 18px;
    margin: 16px auto 14px;
  }

  .admin-hero h1 {
    font-size: 1.5rem;
  }

  .hero-tags {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.admin-hero h1 {
  color: #fff;
  margin: 6px 0 0;
  font-size: 2rem;
}

.hero-meta {
  color: rgba(255, 255, 255, 0.78);
  margin: 4px 0 0;
}

.hero-tags {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.pill.success {
  background: rgba(43, 182, 115, 0.18);
  color: #18a064;
  border-color: rgba(43, 182, 115, 0.35);
}

.pill.soft {
  background: rgba(255, 255, 255, 0.12);
  color: #e8ecf5;
  border-color: rgba(255, 255, 255, 0.2);
}

.pill.accent {
  background: rgba(255, 181, 71, 0.2);
  color: #ffb547;
  border-color: rgba(255, 181, 71, 0.4);
}

.pill.neutral {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border-color: rgba(107, 114, 128, 0.4);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 16px;
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 12px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-value {
    font-size: 1.5rem;
  }
}

.stat-card {
  background: linear-gradient(135deg, #fff 0%, #f8f9fb 100%);
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--outline);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.stat-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.stat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--night);
  margin: 8px 0 4px;
}

.stat-meta {
  font-size: 0.85rem;
  color: var(--slate);
  margin: 0;
}

.stat-label {
  font-size: 0.85rem;
  color: var(--slate);
  font-weight: 600;
}

/* Admin Layout */
.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto 40px;
  padding: 0 16px;
  min-height: 600px;
  box-sizing: border-box;
}

.admin-sidebar {
  background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--outline);
  height: fit-content;
  position: sticky;
  top: 110px;
  transition: all 0.3s ease;
}

.sidebar-header {
  margin-bottom: 20px;
}

.sidebar-header h3 {
  margin: 0;
  color: var(--night);
  font-size: 1.1rem;
  font-weight: 700;
}

.admin-sidebar button {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  background: #fff;
  color: var(--slate);
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.admin-sidebar button:hover {
  background: #f0f3ff;
  color: var(--accent);
  border-color: rgba(11, 87, 201, 0.2);
  transform: translateX(4px);
}

.admin-sidebar button.active {
  background: linear-gradient(135deg, #0b57c9, #1c3f9b);
  color: #fff;
  box-shadow: 0 8px 16px rgba(11, 87, 201, 0.25);
}

.sidebar-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--outline);
}

.admin-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Admin Card & Panel */
.admin-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--outline);
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
}

.admin-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--outline);
  gap: 12px;
}

.panel-header h2 {
  margin: 6px 0 0;
  color: var(--night);
  font-size: 1.5rem;
}

.panel-header .muted {
  margin: 4px 0 0;
}

.panel-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Login Container */
.login-container {
  width: 100%;
  max-width: 500px;
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0 16px;
  box-sizing: border-box;
}

.login-copy {
  text-align: center;
}

.login-copy p:first-child {
  margin-top: 0;
}

.login-copy h2 {
  margin: 8px 0 12px;
  color: var(--night);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Form Styles */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-weight: 600;
  color: var(--slate);
  font-size: 0.9rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--outline);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s ease;
  box-sizing: border-box;
  background: #fff;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11, 87, 201, 0.12);
  background: #f8f9fb;
}

.admin-form {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--outline);
  margin-bottom: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.form-head {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--outline);
}

.form-head h3 {
  margin: 0;
  color: var(--night);
  font-size: 1.2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  padding-top: 16px;
  border-top: 1px solid var(--outline);
}

/* Button Styles */
.btn {
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #0b57c9, #1c3f9b);
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 87, 201, 0.22);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11, 87, 201, 0.3);
}

.btn:active {
  transform: translateY(-1px);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-ghost {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--outline);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
  color: var(--slate);
}

.btn-ghost:hover {
  background: #f8f9fb;
  color: var(--night);
  border-color: #c5d0e3;
  transform: translateY(-1px);
}

.btn-ghost:active {
  background: #eef0f9;
  transform: translateY(0);
}

.link-danger {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1.5px solid rgba(214, 69, 69, 0.4);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: rgba(214, 69, 69, 0.08);
  color: #d64545;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.link-danger:hover {
  background: rgba(214, 69, 69, 0.15);
  border-color: rgba(214, 69, 69, 0.6);
  transform: translateY(-1px);
}

.link-danger:active {
  transform: translateY(0);
}

/* Toolbar */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--outline);
  margin-bottom: 12px;
}

.input-icon {
  flex: 1;
  position: relative;
  min-width: 100px;
  max-width: 100%;
}

.input-icon input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--outline);
  border-radius: 10px;
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: all 0.2s ease;
  background: #fff;
}

.input-icon input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11, 87, 201, 0.12);
}

.toolbar select {
  padding: 10px 12px;
  border: 1.5px solid var(--outline);
  border-radius: 10px;
  font-size: 0.9rem;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  color: var(--slate);
  font-weight: 500;
}

.toolbar select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(11, 87, 201, 0.12);
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  width: 100%;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.table-modern {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
  table-layout: fixed;
}

.table-modern thead {
  background: linear-gradient(180deg, #f8f9fb 0%, #f0f3ff 100%);
  border-bottom: 2px solid var(--outline);
}

.table-modern th {
  padding: 14px 12px;
  text-align: left;
  font-weight: 700;
  color: var(--slate);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-modern td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--outline);
  color: var(--night);
  word-break: break-word;
  overflow-wrap: break-word;
}

.table-modern tbody tr {
  transition: all 0.2s ease;
}

.table-modern tbody tr:hover {
  background: #f8f9fb;
  box-shadow: inset 0 0 0 1px rgba(11, 87, 201, 0.1);
}

.table-modern tbody tr:last-child td {
  border-bottom: none;
}

.table-modern td.small {
  font-size: 0.8rem;
  color: var(--slate);
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-badge.complete,
.status-badge.success {
  background: rgba(43, 182, 115, 0.15);
  color: #18a064;
}

.status-badge.incomplete,
.status-badge.pending {
  background: rgba(255, 181, 71, 0.2);
  color: #b37400;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f0f3ff;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.action-btn:hover {
  background: #e3e9ff;
  transform: translateY(-1px);
}

.action-btn.primary {
  background: linear-gradient(135deg, #0b57c9, #1c3f9b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(11, 87, 201, 0.2);
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, #0e4fb8, #1a378a);
  box-shadow: 0 6px 16px rgba(11, 87, 201, 0.3);
}

.action-btn.warning {
  background: rgba(255, 181, 71, 0.15);
  color: #b37400;
}

.action-btn.warning:hover {
  background: rgba(255, 181, 71, 0.25);
}

.action-btn.danger {
  background: rgba(214, 69, 69, 0.15);
  color: #d64545;
}

.action-btn.danger:hover {
  background: rgba(214, 69, 69, 0.25);
}

.form-section {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--outline);
  margin-bottom: 30px;
  max-width: 800px;
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--slate);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--outline);
  border-radius: 10px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 87, 201, 0.1);
}

/* Mobile Responsive Admin */
@media (max-width: 1024px) {
  .admin-layout {
    grid-template-columns: 1fr;
    padding: 0 16px;
    gap: 20px;
  }

  .admin-sidebar {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
    height: auto;
  }

  .admin-sidebar button {
    margin-bottom: 0;
    padding: 12px 14px;
    font-size: 0.9rem;
  }

  .sidebar-footer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .admin-shell {
    padding: 0 12px 40px;
    margin: 0 auto 40px;
    width: 100%;
    box-sizing: border-box;
  }

  .admin-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 14px auto 10px;
    padding: 14px;
    width: calc(100% - 24px);
    max-width: none;
    box-sizing: border-box;
    border-radius: 14px;
  }

  .admin-hero h1 {
    font-size: 1.3rem;
  }

  .hero-tags {
    width: 100%;
    flex-wrap: wrap;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
  }

  .stat-card {
    padding: 14px;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .admin-layout {
    padding: 0 12px;
    gap: 16px;
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    height: auto;
    width: 100%;
    box-sizing: border-box;
  }

  .admin-sidebar button {
    margin-bottom: 0;
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .sidebar-header {
    margin-bottom: 12px;
  }

  .sidebar-header h3 {
    font-size: 0.95rem;
  }

  .admin-card {
    padding: 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .panel-header {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
  }

  .panel-header h2 {
    font-size: 1.2rem;
  }

  .panel-actions {
    width: 100%;
    gap: 8px;
    flex-direction: column;
  }

  .panel-actions button {
    width: 100%;
    flex: 1;
  }

  .toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    margin-bottom: 10px;
  }

  .input-icon {
    min-width: 100%;
    max-width: 100%;
  }

  .toolbar select {
    width: 100%;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .field input,
  .field textarea,
  .field select {
    padding: 10px 12px;
    font-size: 0.95rem;
  }

  .form-head {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .form-head h3 {
    font-size: 1.05rem;
  }

  .form-actions {
    gap: 8px;
    flex-direction: column;
    padding-top: 12px;
  }

  .form-actions button,
  .form-actions .btn,
  .form-actions .btn-ghost {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
  }

  .login-container {
    margin: 20px auto;
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
  }

  .admin-form {
    padding: 14px;
    margin-bottom: 16px;
  }

  .field label {
    font-size: 0.85rem;
  }

  .muted {
    font-size: 0.9rem;
  }

  .eyebrow {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .admin-shell {
    padding: 0 8px 30px;
  }

  .admin-hero {
    padding: 10px;
    width: calc(100% - 16px);
    gap: 8px;
  }

  .admin-hero h1 {
    font-size: 1.1rem;
  }

  .stat-grid {
    padding: 0 8px;
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-head {
    flex-direction: column;
    gap: 6px;
  }

  .stat-value {
    font-size: 1.3rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .stat-meta {
    font-size: 0.8rem;
  }

  .admin-layout {
    padding: 0 8px;
    gap: 12px;
  }

  .admin-sidebar {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .table-wrapper {
    border-radius: 10px;
  }

  .table-modern th,
  .table-modern td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }

  .panel-header h2 {
    font-size: 1.05rem;
  }

  .toolbar {
    gap: 8px;
  }

  .button {
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  .action-btn {
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  .login-container {
    margin: 16px auto;
    padding: 0 10px;
    max-width: none;
  }

  .admin-form {
    padding: 12px;
    border-radius: 12px;
  }

  .field input,
  .field textarea,
  .field select {
    padding: 10px 10px;
    font-size: 0.9rem;
    border-radius: 8px;
  }

  .form-grid {
    gap: 10px;
  }

  .modal-container {
    max-width: calc(100% - 16px);
    border-radius: 14px;
  }

  .modal-overlay {
    padding: 8px;
  }

  /* Loading indicator animation */
  .table-modern.loading {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
  }

  /* Status update animation */
  .table-modern tbody tr {
    animation: slideDown 0.3s ease-out;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 15, 18, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}

.modal-container {
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-container .admin-form {
  margin: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

/* Copy Button Styling */
.copy-btn-icon {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: all 0.2s ease;
  margin-left: 6px;
  flex-shrink: 0;
  border-radius: 6px;
  position: relative;
}

.copy-btn-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.copy-btn-icon:hover {
  background: rgba(11, 87, 201, 0.1);
  color: var(--accent-2);
  transform: scale(1.1);
}

.copy-btn-icon:active {
  transform: scale(0.95);
}

.copy-btn-icon::tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 14px 18px;
  background: #333;
  color: #fff;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3000;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast-icon {
  font-weight: bold;
  font-size: 1.1rem;
}

/* Status Chip */
.status-chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-chip.success {
  background: rgba(43, 182, 115, 0.15);
  color: #18a064;
}

.status-chip.pending {
  background: rgba(255, 181, 71, 0.15);
  color: #b37400;
}

.status-chip.warning {
  background: rgba(255, 181, 71, 0.15);
  color: #b37400;
}

/* Modal Improvements */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 15, 18, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.25s ease-out;
}

.modal-container {
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 18px;
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-container .admin-form {
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Table Responsive Mobile View */
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }

  /* In admin table card view, show all cells (including Email/WhatsApp) with labels */
  .table-wrapper .table-modern td.hide-mobile {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
  }

  .table-wrapper .table-modern td.hide-mobile .copy-btn-icon {
    justify-self: end;
  }

  .table-modern td.hide-mobile::before {
    display: block !important;
  }

  /* Card View for Tables on Mobile */
  .table-modern {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border: none;
    background: transparent;
    table-layout: auto;
    font-size: 0.9rem;
  }

  .table-modern thead {
    display: none;
  }

  .table-modern tbody {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .table-modern tr {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--outline);
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
  }

  .table-modern tr:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .table-modern td {
    padding: 8px 0;
    border: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    border-bottom: none;
  }

  .table-modern td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--slate);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }

  .table-modern td.small::before {
    display: none;
  }

  .table-modern td.actions-cell {
    display: flex;
    flex-direction: column;
    grid-template-columns: auto 1fr;
    padding-top: 12px;
    border-top: 1px solid var(--outline);
    gap: 8px;
    margin-top: 8px;
  }

  .table-modern td.actions-cell::before {
    content: "Actions";
    font-weight: 600;
    color: var(--slate);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .action-btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.85rem;
  }

  .action-btn.primary {
    background: linear-gradient(135deg, #0b57c9, #1c3f9b);
    color: #fff;
  }

  .action-btn.danger {
    background: rgba(214, 69, 69, 0.15);
    color: #d64545;
  }

  .action-btn.warning {
    background: rgba(255, 181, 71, 0.15);
    color: #b37400;
  }

  /* Admin modal: full-bleed on very small screens, ensure form scrolls */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .modal-container {
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .modal-container .admin-form {
    border-radius: 0;
    padding: 20px 16px 32px;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  .form-actions .btn,
  .form-actions .btn-ghost {
    flex: 1;
    min-width: 120px;
  }
}

/* Live Indicator */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(43, 182, 115, 0.15);
  color: #18a064;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  animation: slideDown 0.3s ease-out;
}

.live-indicator::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #18a064;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

/* Enhanced Table Row Animation */
.table-modern tbody tr {
  animation: slideDown 0.3s ease-out;
}

/* Status Change Glow */
.table-modern tbody tr.status-changed {
  box-shadow: 0 0 0 3px rgba(43, 182, 115, 0.2);
  animation: pulse 2s ease-in-out;
}

/* Smooth Transitions for Admin Elements */
.admin-layout * {
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .table-modern {
    background: #1a1d21;
  }

  .table-modern thead {
    background: #222529;
  }

  .table-modern th {
    color: #9ca3af;
  }

  .table-modern td {
    color: #e5e7eb;
    border-bottom-color: #2d3139;
  }

  .admin-card {
    background: #1a1d21;
    border-color: #2d3139;
  }

  .admin-sidebar {
    background: #1a1d21;
    border-color: #2d3139;
  }

  .admin-sidebar button {
    background: #222529;
    color: #9ca3af;
  }

  .admin-sidebar button:hover {
    background: #2d3139;
  }
}

/* Admin UI refresh: scoped visual update without changing structure/behavior */
.admin-hero {
  background:
    radial-gradient(circle at 84% 22%, rgba(56, 189, 248, 0.22), transparent 50%),
    radial-gradient(circle at 14% 82%, rgba(16, 185, 129, 0.18), transparent 46%),
    linear-gradient(135deg, #0f172a 0%, #111827 52%, #0b1220 100%);
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
}

.admin-hero .eyebrow {
  color: rgba(186, 230, 253, 0.85);
}

.hero-meta {
  color: rgba(226, 232, 240, 0.86);
}

.admin-hero .pill {
  background: rgba(15, 23, 42, 0.35);
  border-color: rgba(148, 163, 184, 0.28);
  color: #f8fafc;
}

.admin-hero .pill.success {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
}

.admin-hero .pill.soft {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.32);
  color: #bae6fd;
}

.admin-hero .pill.accent {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.36);
  color: #bbf7d0;
}

.stat-card {
  background: linear-gradient(160deg, #ffffff 0%, #f5f9ff 100%);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.stat-card:hover {
  box-shadow: 0 18px 30px rgba(15, 23, 42, 0.12);
}

.stat-label,
.stat-meta,
.admin-shell .muted {
  color: #64748b;
}

.admin-layout .eyebrow,
.login-container .eyebrow {
  color: #475569;
}

.admin-sidebar {
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.admin-sidebar button {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.22);
  color: #334155;
}

.admin-sidebar button:hover {
  background: #eef6ff;
  border-color: rgba(14, 116, 144, 0.3);
  color: #0f766e;
}

.admin-sidebar button.active {
  background: linear-gradient(135deg, #0f766e 0%, #0e7490 100%);
  box-shadow: 0 10px 20px rgba(15, 118, 110, 0.28);
  color: #f8fafc;
}

.admin-card,
.admin-form,
.form-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.panel-header,
.toolbar,
.form-head,
.form-actions {
  border-bottom-color: rgba(148, 163, 184, 0.28);
}

.form-actions {
  border-top-color: rgba(148, 163, 184, 0.28);
}

.admin-shell .field input,
.admin-shell .field textarea,
.admin-shell .field select,
.modal-container .field input,
.modal-container .field textarea,
.modal-container .field select,
.admin-shell .input-icon input,
.admin-shell .toolbar select {
  border-color: rgba(148, 163, 184, 0.35);
  background: #ffffff;
  color: #0f172a;
}

.admin-shell .field input:focus,
.admin-shell .field textarea:focus,
.admin-shell .field select:focus,
.modal-container .field input:focus,
.modal-container .field textarea:focus,
.modal-container .field select:focus,
.admin-shell .input-icon input:focus,
.admin-shell .toolbar select:focus {
  border-color: #0ea5a4;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.16);
  background: #f8fdff;
}

.admin-shell .btn,
.modal-overlay .btn {
  background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
  box-shadow: 0 10px 20px rgba(14, 116, 144, 0.26);
}

.admin-shell .btn:hover,
.modal-overlay .btn:hover {
  box-shadow: 0 14px 28px rgba(14, 116, 144, 0.34);
}

.admin-shell .btn-ghost,
.modal-overlay .btn-ghost {
  background: #f7fbff;
  border-color: rgba(148, 163, 184, 0.4);
  color: #334155;
}

.admin-shell .btn-ghost:hover,
.modal-overlay .btn-ghost:hover {
  background: #eef6ff;
  color: #0f172a;
  border-color: rgba(14, 116, 144, 0.34);
}

.admin-shell .link-danger {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.32);
  color: #dc2626;
}

.admin-shell .link-danger:hover {
  background: rgba(239, 68, 68, 0.14);
}

.admin-content .table-wrapper {
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.admin-content .table-modern {
  background: #ffffff;
}

.admin-content .table-modern thead {
  background: linear-gradient(180deg, #f7fbff 0%, #ecf5ff 100%);
  border-bottom-color: rgba(148, 163, 184, 0.34);
}

.admin-content .table-modern th {
  color: #475569;
}

.admin-content .table-modern td {
  color: #0f172a;
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

.admin-content .table-modern tbody tr:hover {
  background: #f4fbff;
  box-shadow: inset 0 0 0 1px rgba(14, 116, 144, 0.16);
}

.admin-content .status-badge.complete,
.admin-content .status-badge.success {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

.admin-content .status-badge.incomplete,
.admin-content .status-badge.pending {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.admin-content .action-btn {
  background: #eaf7ff;
  color: #0369a1;
}

.admin-content .action-btn:hover {
  background: #dff2ff;
}

.admin-content .action-btn.primary {
  background: linear-gradient(135deg, #0f766e 0%, #0891b2 100%);
  color: #ffffff;
}

.admin-content .action-btn.warning {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.admin-content .action-btn.danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

@media (max-width: 768px) {
  .admin-content .table-modern tr {
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  .admin-content .table-modern tr:hover {
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
    background: #ffffff;
  }

  .admin-content .table-modern td.actions-cell {
    border-top-color: rgba(148, 163, 184, 0.28);
  }
}

/* Admin polish: typography, status stability, and button layout */
.admin-shell,
.admin-shell input,
.admin-shell select,
.admin-shell textarea,
.admin-shell button,
.modal-overlay input,
.modal-overlay select,
.modal-overlay textarea,
.modal-overlay button {
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.admin-hero h1,
.panel-header h2,
.sidebar-header h3,
.form-head h3 {
  font-family: "Outfit", "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.admin-shell .eyebrow {
  letter-spacing: 0.1em;
  font-weight: 800;
}

.admin-shell .table-modern tbody tr,
.admin-content .table-modern tbody tr {
  animation: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.admin-shell .table-modern tbody tr.status-changed,
.admin-content .table-modern tbody tr.status-changed {
  animation: none;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}

.admin-shell .status-badge,
.admin-content .status-badge {
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid transparent;
}

.admin-shell .status-badge.complete:hover,
.admin-shell .status-badge.success:hover,
.admin-content .status-badge.complete:hover,
.admin-content .status-badge.success:hover {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}

.admin-shell .status-badge.incomplete:hover,
.admin-shell .status-badge.pending:hover,
.admin-content .status-badge.incomplete:hover,
.admin-content .status-badge.pending:hover {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}

.panel-actions {
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
}

.panel-actions .btn,
.panel-actions .btn-ghost {
  min-height: 42px;
  min-width: 120px;
}

.admin-shell .btn,
.admin-shell .btn-ghost,
.admin-shell .link-danger,
.admin-content .action-btn,
.modal-overlay .btn,
.modal-overlay .btn-ghost {
  border-radius: 12px;
  min-height: 40px;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}

.admin-shell .btn,
.modal-overlay .btn,
.admin-content .action-btn.primary {
  border: 1px solid rgba(8, 145, 178, 0.22);
}

.admin-shell .btn-ghost,
.modal-overlay .btn-ghost {
  border-width: 1px;
}

.admin-content .action-buttons {
  width: 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.admin-content td.actions-cell {
  text-align: right;
}

.admin-content .action-btn {
  min-width: 84px;
}

.admin-sidebar button {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 700;
}

.admin-sidebar button:hover {
  transform: none;
}

@media (max-width: 768px) {
  .panel-actions {
    margin-left: 0;
    width: 100%;
    justify-content: stretch;
  }

  .panel-actions .btn,
  .panel-actions .btn-ghost {
    width: 100%;
    min-width: 0;
  }

  .admin-content td.actions-cell {
    text-align: left;
  }

  .admin-content .action-buttons {
    justify-content: stretch;
  }
}

/* Admin responsive optimization: mobile usability + desktop layout + orders overflow fixes */
.admin-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  max-width: 1360px;
  gap: 28px;
  align-items: start;
}

.admin-content {
  gap: 20px;
}

.panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 10px;
}

.panel-header>div:first-child {
  min-width: 0;
}

#ordersInfo,
#productsInfo {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.toolbar .input-icon {
  min-width: 0;
}

#orderStatusFilter {
  min-width: 170px;
}

.admin-content .table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

/* Keep desktop columns readable instead of squeezing/overlapping */
#ordersSection .table-modern {
  table-layout: auto;
  min-width: 1080px;
}

#ordersSection .table-modern th,
#ordersSection .table-modern td {
  vertical-align: top;
}

#ordersSection .table-modern td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#ordersSection .table-modern th:nth-child(1),
#ordersSection .table-modern td:nth-child(1) {
  min-width: 130px;
}

#ordersSection .table-modern th:nth-child(2),
#ordersSection .table-modern td:nth-child(2) {
  min-width: 150px;
}

#ordersSection .table-modern th:nth-child(6),
#ordersSection .table-modern td:nth-child(6) {
  min-width: 180px;
}

#ordersSection .table-modern th:nth-child(10),
#ordersSection .table-modern td:nth-child(10) {
  min-width: 190px;
}

#ordersSection .status-chip {
  white-space: nowrap;
}

#ordersSection .actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

#ordersSection .actions-cell .action-btn {
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 1024px) {
  .admin-layout {
    grid-template-columns: 1fr;
    max-width: 100%;
    gap: 16px;
    padding: 0 12px;
  }

  .admin-sidebar {
    position: static;
    top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .sidebar-header,
  .sidebar-footer {
    grid-column: 1 / -1;
  }

  .toolbar {
    grid-template-columns: 1fr;
  }

  #orderStatusFilter {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
  .admin-shell {
    padding: 0 10px 28px;
    gap: 14px;
  }

  .admin-hero {
    margin: 12px auto 10px;
    padding: 12px;
    width: calc(100% - 20px);
  }

  .stat-grid {
    grid-template-columns: 1fr;
    padding: 0 10px;
  }

  .admin-card {
    padding: 12px;
  }

  .panel-header {
    grid-template-columns: 1fr;
  }

  .panel-actions {
    margin-left: 0;
    width: 100%;
    justify-content: stretch;
  }

  .panel-actions .btn,
  .panel-actions .btn-ghost {
    width: 100%;
    min-width: 0;
  }

  /* In card mode table is stacked; remove desktop min width constraints */
  #ordersSection .table-modern {
    min-width: 0;
  }

  .table-modern td {
    grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
    align-items: start;
  }

  .table-modern td>* {
    min-width: 0;
    max-width: 100%;
  }

  .table-wrapper .table-modern td.hide-mobile {
    grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
    align-items: start;
  }

  .table-wrapper .table-modern td.hide-mobile>div {
    min-width: 0;
    width: 100%;
  }

  #ordersSection .actions-cell,
  .table-modern td.actions-cell {
    justify-content: stretch;
    text-align: left;
  }

  #ordersSection .actions-cell .action-btn,
  .table-modern td.actions-cell .action-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .admin-shell {
    padding: 0 8px 24px;
  }

  .admin-hero {
    width: calc(100% - 16px);
    padding: 10px;
  }

  .admin-layout {
    padding: 0 8px;
  }

  .table-modern td {
    gap: 6px;
    grid-template-columns: minmax(88px, 40%) minmax(0, 1fr);
  }
}

/* Admin UX updates: sign-in refresh, sign-out placement, and mobile order stability */
.admin-utility-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 2px;
}

.admin-utility-bar .link-danger {
  min-width: 112px;
}

.login-container {
  max-width: 860px;
  margin: 30px auto;
  padding: 0 14px;
}

.login-surface {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr);
  gap: 22px;
  align-items: stretch;
}

.login-copy {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-copy h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.login-points {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.login-form-card {
  background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.login-form {
  gap: 14px;
}

.login-form .field label {
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-form .field input {
  min-height: 44px;
}

.login-hint {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

.cell-copy-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.cell-copy-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-content .status-cell,
.table-modern td.status-cell {
  text-align: center;
}

.admin-content .status-cell .status-chip,
.table-modern td.status-cell .status-chip {
  position: static;
}

.admin-content .actions-cell .action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}

#productsSection .toolbar {
  grid-template-columns: minmax(240px, 1fr);
}

#productSearch {
  width: 100%;
}

@media (max-width: 1024px) {
  .login-surface {
    grid-template-columns: 1fr;
  }

  .admin-utility-bar {
    margin-bottom: 6px;
  }
}

@media (max-width: 768px) {
  .admin-utility-bar {
    justify-content: stretch;
  }

  .admin-utility-bar .link-danger {
    width: 100%;
  }

  .login-container {
    margin: 16px auto;
    padding: 0 8px;
  }

  .login-form-card {
    padding: 12px;
  }

  .cell-copy-wrap {
    align-items: flex-start;
  }

  .cell-copy-text {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
  }

  .table-modern td.status-cell,
  .admin-content .status-cell {
    align-items: start;
    text-align: left;
  }

  .table-modern td.status-cell .status-chip,
  .admin-content .status-cell .status-chip {
    justify-self: start;
  }

  .table-modern td.actions-cell .action-buttons,
  .admin-content .actions-cell .action-buttons {
    justify-content: stretch;
  }

  .table-modern td.actions-cell .action-btn,
  .admin-content .actions-cell .action-btn {
    width: 100%;
  }
}

header .header-actions #signOutBtn {
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Login interface refresh */
#loginSection.admin-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

#loginSection .login-surface {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
  gap: 0;
}

#loginSection .login-copy {
  padding: 28px 24px;
  background:
    radial-gradient(circle at 78% 20%, rgba(56, 189, 248, 0.3), transparent 48%),
    linear-gradient(135deg, #0f172a 0%, #0f2e3a 100%);
  color: #f8fafc;
}

#loginSection .login-copy .eyebrow {
  color: rgba(186, 230, 253, 0.9);
}

#loginSection .login-copy h2 {
  color: #f8fafc;
}

#loginSection .login-copy .muted {
  color: rgba(226, 232, 240, 0.88);
}

#loginSection .login-form-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: #ffffff;
  padding: 24px 22px;
}

#loginSection .login-form .btn {
  width: 100%;
  min-height: 46px;
}

/* Ensure key order labels remain visible in mobile cards */
@media (max-width: 768px) {

  #ordersSection .table-modern td.order-id-cell::before,
  #ordersSection .table-modern td.trx-cell::before {
    display: block !important;
  }

  #ordersSection .table-modern td.status-cell {
    grid-template-columns: minmax(96px, 42%) minmax(0, 1fr);
    align-items: center;
  }

  #ordersSection .table-modern td.status-cell .status-chip {
    justify-self: start;
    align-self: center;
  }
}

@media (max-width: 768px) {
  #loginSection .login-surface {
    border-radius: 14px;
  }

  #loginSection .login-copy {
    padding: 18px 14px;
  }

  #loginSection .login-form-card {
    padding: 14px;
  }

  header .header-actions #signOutBtn {
    font-size: 0.75rem;
    padding: 8px 10px;
  }
}

/* Compact mobile orders cards (labels preserved) */
@media (max-width: 768px) {

  #ordersSection .table-modern,
  #ordersSection .table-modern tbody {
    gap: 8px;
  }

  #ordersSection .table-modern tr {
    padding: 12px 10px;
    gap: 8px;
  }

  #ordersSection .table-modern td {
    padding: 6px 0;
    gap: 6px;
    grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
  }

  #ordersSection .table-modern td::before {
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }

  #ordersSection .table-modern td.small {
    font-size: 0.82rem;
  }

  #ordersSection .cell-copy-wrap {
    gap: 4px;
  }

  #ordersSection .copy-btn-icon {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
  }

  #ordersSection .status-chip {
    font-size: 0.72rem;
    padding: 4px 9px;
  }

  #ordersSection .table-modern td.actions-cell {
    padding-top: 8px;
    margin-top: 4px;
  }

  #ordersSection .table-modern td.actions-cell .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  #ordersSection .table-modern td.actions-cell .action-btn {
    min-height: 34px;
    padding: 8px 10px;
    font-size: 0.78rem;
    width: 100%;
  }
}

@media (max-width: 480px) {
  #ordersSection .table-modern tr {
    padding: 10px 8px;
  }

  #ordersSection .table-modern td {
    grid-template-columns: minmax(82px, 38%) minmax(0, 1fr);
    gap: 5px;
  }

  #ordersSection .table-modern td.actions-cell .action-buttons {
    grid-template-columns: 1fr;
  }
}

/* Final mobile status alignment + stronger sign-out CTA */
@media (max-width: 768px) {
  #ordersSection .table-modern td.status-cell {
    grid-template-columns: minmax(90px, 40%) minmax(0, 1fr);
    align-items: center;
  }

  #ordersSection .table-modern td.status-cell .status-chip {
    justify-self: center;
    align-self: center;
  }
}

header .header-actions #signOutBtn {
  font-family: "Outfit", "Manrope", "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 18px rgba(185, 28, 28, 0.35);
}

header .header-actions #signOutBtn:hover {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 10px 20px rgba(185, 28, 28, 0.42);
}

@media (max-width: 768px) {
  #ordersSection .table-modern td.status-cell {
    grid-template-columns: 1fr !important;
    justify-items: center;
    align-items: center;
    text-align: center;
    gap: 4px;
  }

  #ordersSection .table-modern td.status-cell::before {
    width: 100%;
    text-align: center;
    margin: 0;
  }

  #ordersSection .table-modern td.status-cell .status-chip {
    justify-self: center !important;
    align-self: center;
    margin: 0 auto;
  }
}

/* Final: center status chips for both Orders and Products mobile cards */
@media (max-width: 768px) {

  #ordersSection .table-modern td.status-cell,
  #productsSection .table-modern td.status-cell {
    grid-template-columns: minmax(92px, 40%) minmax(0, 1fr) !important;
    align-items: center !important;
    text-align: left !important;
  }

  #ordersSection .table-modern td.status-cell::before,
  #productsSection .table-modern td.status-cell::before {
    justify-self: start !important;
    margin: 0 !important;
  }

  #ordersSection .table-modern td.status-cell .status-chip,
  #productsSection .table-modern td.status-cell .status-chip {
    justify-self: center !important;
    align-self: center !important;
    margin: 0 auto !important;
  }
}

/* Improved, premium status badges (override and responsive fixes) */
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 6px 18px rgba(12,20,35,0.06);
}

/* Color mapping by area to avoid changing JS */
/* Orders: Pending (orange) / Completed (blue) */
#ordersSection .status-chip.pending {
  background: rgba(255, 159, 67, 0.12);
  color: #b45a00;
}
#ordersSection .status-chip.success {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

/* Products: Active (green) / Inactive (red) */
#productsSection .status-chip.success {
  background: rgba(43, 182, 115, 0.12);
  color: #16a34a;
}
#productsSection .status-chip.pending {
  /* product 'inactive' currently uses pending class in JS */
  background: rgba(244, 63, 94, 0.12);
  color: #dc2626;
}

/* Optional warning style kept consistent */
.status-chip.warning {
  background: rgba(255, 181, 71, 0.12);
  color: #b37400;
}

/* Prevent overflow on small screens and keep alignment with labels */
.table-modern td .status-chip,
.admin-content .status-cell .status-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  /* Align status cell like other labeled cells on mobile (left-aligned) */
  #ordersSection .table-modern td.status-cell,
  #productsSection .table-modern td.status-cell,
  .admin-content .status-cell {
    display: grid !important;
    grid-template-columns: minmax(92px, 40%) minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 6px !important;
  }

  /* Position label at left and chip at right in the status cell */
  #ordersSection .table-modern td.status-cell,
  #productsSection .table-modern td.status-cell,
  .admin-content .status-cell {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 6px !important;
  }

  /* Ensure ::before (label) is left and chip aligns to the right */
  #ordersSection .table-modern td.status-cell::before,
  #productsSection .table-modern td.status-cell::before,
  .admin-content .status-cell::before {
    justify-self: start !important;
    grid-column: 1 / 2 !important;
    margin-right: 8px !important;
  }

  #ordersSection .table-modern td.status-cell .status-chip,
  #productsSection .table-modern td.status-cell .status-chip,
  .admin-content .status-cell .status-chip {
    justify-self: end !important;
    align-self: center !important;
    grid-column: 2 / 3 !important;
    margin: 0 !important;
    padding: 5px 9px !important;
    font-size: 0.72rem !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}