:root {
  font-family: 'Barlow', 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
  --bg: #0b1220;
  --bg-secondary: #101a2d;
  --card: rgba(16, 26, 45, 0.92);
  --card-border: rgba(100, 126, 170, 0.18);
  --text: #e6f1ff;
  --muted: #9aa8c2;
  --accent: #3b82f6;
  --accent-soft: rgba(59, 130, 246, 0.18);
  --accent-hover: #60a5fa;
  --success: #22d3ee;
  --error: #f87171;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.28), transparent 55%),
    radial-gradient(circle at 100% 15%, rgba(34, 211, 238, 0.12), transparent 45%),
    var(--bg);
  padding: 0 1.5rem 3rem;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}

.brand {
  text-align: center;
  margin: 0 auto;
}

.brand h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  max-width: 32rem;
  font-size: 0.98rem;
}

#user-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 600;
  color: var(--muted);
  position: absolute;
  right: 0;
}

main {
  display: grid;
  gap: 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

section.card {
  background: var(--card);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
  box-shadow: 0 25px 50px -20px rgba(8, 9, 18, 0.9);
}

.section-header h2 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

.auth {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

.auth .card {
  background: rgba(15, 18, 32, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: 0 15px 35px -25px rgba(8, 9, 18, 0.9);
  max-width: 340px;
}

.auth .card h2 {
  font-size: 1.15rem;
  margin: 0 0 1rem;
  letter-spacing: 0.03em;
}

.auth .card label {
  font-size: 0.82rem;
}

.auth .card input,
.auth .card button {
  font-size: 0.9rem;
}

.auth .card button {
  width: 100%;
  padding: 0.65rem 0.75rem;
  text-transform: none;
  font-weight: 600;
}

.auth .card button.secondary {
  background: rgba(148, 163, 184, 0.14);
}

.card form {
  display: grid;
  gap: 0.9rem;
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--muted);
}

input,
textarea,
button,
select {
  font: inherit;
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(12, 14, 24, 0.85);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
  resize: vertical;
}

button {
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 18px 30px -18px rgba(255, 39, 64, 0.7);
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 32px -18px rgba(255, 39, 64, 0.8);
}

button.secondary {
  background: rgba(148, 163, 184, 0.12);
  box-shadow: none;
  text-transform: none;
  font-weight: 600;
}

button.secondary:hover {
  background: rgba(148, 163, 184, 0.18);
  transform: none;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.product-card {
  border-radius: 18px;
  display: grid;
  gap: 0.9rem;
  background: linear-gradient(160deg, rgba(12, 14, 24, 0.9), rgba(18, 22, 38, 0.9));
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.product-card.sold-out {
  opacity: 0.7;
}

.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(255, 39, 64, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.product-card:hover::after {
  opacity: 1;
}

.product-card img {
  width: 100%;
  border-radius: 14px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.product-card h3 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.product-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.product-card .price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
}

.product-card .inventory {
  font-size: 0.9rem;
  color: var(--muted);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.badge.danger {
  background: rgba(255, 39, 64, 0.2);
  color: var(--accent);
}

#cart-items {
  display: grid;
  gap: 0.85rem;
}

.cart-item {
  display: grid;
  gap: 0.55rem;
  background: rgba(12, 14, 24, 0.9);
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-item header,
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#cart-summary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: 1.05rem;
}

#orders {
  display: block;
}

.order-card {
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 1.25rem;
  background: rgba(12, 14, 24, 0.9);
}

.order-history__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 120px;
  gap: 1rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.order-history__body {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.9rem;
}

.order-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 120px;
  gap: 1rem;
  align-items: flex-start;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.order-history__row:first-child {
  border-top: none;
  padding-top: 0;
}

.order-history__order strong {
  font-size: 1.05rem;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.order-history__date,
.order-history__total {
  font-size: 0.95rem;
  color: var(--muted);
}

.order-history__total {
  font-weight: 600;
  color: var(--text);
}

.order-history__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.order-history__item {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--muted);
}

.order-history__item-name {
  color: var(--text);
}

.order-history__item-meta {
  font-size: 0.82rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .order-history__header,
  .order-history__row {
    grid-template-columns: 1fr;
  }

  .order-history__header {
    display: none;
  }

  .order-history__row {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1rem;
  }

  .order-history__date,
  .order-history__total {
    color: var(--text);
  }
}

footer {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

#message {
  margin-top: 0.6rem;
  min-height: 1.2rem;
}

#message[data-variant='error'] {
  color: var(--error);
}

#message[data-variant='info'] {
  color: var(--accent-hover);
}

#message[data-variant='success'] {
  color: var(--success);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-grid textarea {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
}

.muted {
  color: var(--muted);
}

.admin-users {
  margin-top: 2.5rem;
  display: grid;
  gap: 1rem;
}

.admin-users .section-header h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.user-list {
  display: grid;
  gap: 0.75rem;
}

.user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(12, 14, 24, 0.85);
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.9rem;
}

.user-card strong {
  color: var(--text);
  font-size: 1rem;
}

.user-card span {
  display: block;
}

.user-card .meta {
  text-align: right;
}

.user-card .meta .badge {
  display: inline-block;
  background: rgba(76, 255, 172, 0.16);
  color: var(--success);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-card .meta time {
  display: block;
  font-size: 0.78rem;
  margin-top: 0.25rem;
  color: var(--muted);
}

.user-card .meta button {
  margin-top: 0.6rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  header {
    flex-direction: column;
    align-items: flex-start;
  }

  body {
    padding: 0 1rem 2.5rem;
  }
}

@media (max-width: 600px) {
  section.card {
    padding: 1.5rem;
  }

  button {
    width: 100%;
  }

  #cart-summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- New Security Footer Styling --- */
.security-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.security-footer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.fastly-brand {
  font-weight: 700;
  color: #FF2740; /* Fastly Red */
}

/* Base container styling - Pre-allocate space to prevent layout shift */
.fastly-challenge {
    content:"Powered by Fastly";
    display: inline-flex;
    align-items: center;
    min-height: 24px; /* Smaller */
    min-width: auto; /* Let it shrink */
    position: relative;
    contain: layout;
    /* Remove text from the challenge div itself by hiding ::after if you only want the icon */
    /* Or scale it down */
    transform: scale(0.85); 
    transform-origin: center left;
}

/* Overriding text to be hidden since we have our own label now, or keeping it but smaller? 
   The prompt says "Place it at the bottom... and label it 'You have been verified...'"
   This implies the text "Verified" inside the box might be redundant or should be minimal.
   I will hide the text generated by the script CSS to avoid duplication, 
   OR just let the icon be the indicator. 
   
   Actually, the user said "I would like the security check display smaller and more discrete".
   I'll hide the text generated by the challenge.css and only show the icon.
*/

.fastly-challenge[data-challenge-status]::after {
    display: none; /* Hide the default "Verified", "Error" text */
}

/* Adjust icon size if needed, but scaling the whole container is easier */


/* Initialize with a placeholder to prevent empty state */
/*.fastly-challenge:empty::before,
.fastly-challenge:not([data-challenge-status])::before {
    content: "";
    width: 32px;
    height: 32px;
    display: inline-flex;
    border-radius: 50%;
    background: #f3f4f6;
    border: 2px solid #e5e7eb;
    opacity: 0.5;
    animation: gentlePulse 2s ease-in-out infinite;
}*/

/* Challenge indicator base - Force immediate rendering */
.fastly-challenge[data-challenge-status]::before {
    content: "";
    width: 24px; /* Smaller icon */
    height: 24px; /* Smaller icon */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Force immediate paint in Firefox */
    transform: translateZ(0) scale(1);
    will-change: transform, background;
    /* Ensure transitions work in Firefox */
    transition-property: transform, box-shadow, background;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ✅ COMPLETE STATE */
.fastly-challenge[data-challenge-status="complete"]::before {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /* Ensure animation plays even on quick transitions */
    animation: successPulse 0.8s ease both;
    animation-fill-mode: both;
}

/* Checkmark icon for complete */
.fastly-challenge[data-challenge-status="complete"]::before {
    background-image:
        linear-gradient(135deg, #10b981 0%, #059669 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 100%, 14px 14px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* ❌ ERROR STATE */
.fastly-challenge[data-challenge-status="error"]::before {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    animation: errorShake 0.6s ease both;
}

.fastly-challenge[data-challenge-status="error"]::before {
    background-image:
        linear-gradient(135deg, #ef4444 0%, #dc2626 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    background-size: 100%, 14px 14px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* ⏳ STARTED STATE */
.fastly-challenge[data-challenge-status="started"]::before {
    background: #ffffff;
    border: 2px solid #f59e0b;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    /* Ensure animation starts immediately */
    animation: gentlePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation-play-state: running;
}

/* 🔄 PROCESSING STATE - Firefox-safe spinner */
.fastly-challenge[data-challenge-status="processing"]::before {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-right-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    /* Use Firefox-compatible animation */
    animation: spinSimple 1s linear infinite;
    animation-play-state: running;
    /* Force animation in Firefox */
    -moz-animation: spinSimple 1s linear infinite;
}

/* 🔐 CAPTCHA PROMPTED STATE */
.fastly-challenge[data-challenge-status="captcha_prompted"] {
    color: white;
}

.fastly-challenge[data-challenge-status="captcha_prompted"]::before {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    animation: captchaBounce 0.8s ease both;
}

.fastly-challenge[data-challenge-status="captcha_prompted"]::before {
    background-image:
        linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
    background-size: 100%, 14px 14px;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

/* ===================================
   FIREFOX-SPECIFIC OVERRIDES
=================================== */

@-moz-document url-prefix() {
    /* Firefox-specific optimizations */
    .fastly-challenge[data-challenge-status]::before {
        /* Force repaint in Firefox */
        backface-visibility: hidden;
        perspective: 1000px;
        transform-style: preserve-3d;
    }

    /* Ensure processing animation works in Firefox */
    .fastly-challenge[data-challenge-status="processing"]::before {
        animation-name: spinSimple !important;
        animation-duration: 1s !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
}

/* ===================================
   ANIMATIONS (Firefox-optimized)
=================================== */

@keyframes gentlePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95) translateZ(0);
    }
}

/* Firefox-compatible simple spin */
@keyframes spinSimple {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

/* Firefox prefix for spin animation */
@-moz-keyframes spinSimple {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateX(-10px) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes successPulse {
    0% {
        transform: scale(0.9) translateZ(0);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        transform: scale(1.05) translateZ(0);
        opacity: 1;
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0) translateZ(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-2px) translateZ(0);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(2px) translateZ(0);
    }
}

@keyframes textPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes captchaBounce {
    0% {
        transform: scale(0.85) translateZ(0);
        opacity: 0.8;
    }
    40% {
        transform: scale(1.1) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateZ(0);
        opacity: 1;
    }
}

/* ===================================
   HOVER EFFECTS (Optimized)
=================================== */

.fastly-challenge[data-challenge-status="complete"]:hover::before,
.fastly-challenge[data-challenge-status="error"]:hover::before {
    transform: scale(1.1) translateZ(0);
    transition: transform 0.2s ease;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
=================================== */

@media (max-width: 480px) {
    .fastly-challenge[data-challenge-status]::before {
        width: 24px;
        height: 24px;
    }
}

/* ===================================
   DARK MODE SUPPORT (optional)
=================================== */

@media (prefers-color-scheme: dark) {
    .fastly-challenge[data-challenge-status]::before {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}