/* Base Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Helvetica', sans-serif; }
body { background-color: #FAF5F0; color: #5A3E36; line-height:1.6; }

/* Header */
.header { display:flex; justify-content:space-between; align-items:center; padding: 1rem 3rem; background:#FAF5F0; position:sticky; top:0; z-index:1000; }
.header .logo { font-weight:bold; font-size:1.5rem; letter-spacing:2px; }
.header nav ul { display:flex; gap:2rem; }
.header nav a { text-decoration:none; color:#5A3E36; transition: color 0.3s; }
.header nav a:hover { color:#C49173; }

/* Hero */
.hero { display:flex; justify-content:center; align-items:center; text-align:center; height:90vh; padding:2rem; }
.hero h1 { font-size:3rem; margin-bottom:0.5rem; }
.hero .subtitle { font-size:1.2rem; font-style:italic; margin-bottom:1rem; color:#7A5A4B; }
.hero h2 { font-size:2rem; margin-bottom:1rem; }
.hero p { max-width:600px; margin:0 auto 2rem; color:#5A3E36; }

/* Button */
.btn-accent { background:#D9B99B; color:#fff; padding:0.8rem 2rem; border:none; border-radius:6px; cursor:pointer; font-weight:bold; transition: transform 0.3s, background 0.3s; }
.btn-accent:hover { background:#C49173; transform: translateY(-3px); }

/* Fade-in Animation */
.fade-in { opacity:0; transform: translateY(20px); animation: fadeInUp 1s forwards; animation-delay:0.3s; }
@keyframes fadeInUp {
  to { opacity:1; transform: translateY(0); }
}

/* Footer */
footer { text-align:center; padding:2rem; color:#7A5A4B; font-size:0.9rem; }

/* --- Orders page styles --- */
.bg-beige { background-color:#F5EDE2; }
.text-brown { color:#4A2C2A; }
.bg-brown { background-color:#4A2C2A; }
.bg-green-accent { background-color:#8A9A5B; }

.order-card {
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  padding:24px;
  margin-bottom:20px;
  transition:box-shadow .3s;
}
.order-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.15); }

.order-header { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  padding-bottom:16px;border-bottom:2px solid #f0f0f0;margin-bottom:16px; }

.order-id { font-size:18px;font-weight:bold;color:#4A2C2A; }

.status-badge {
  padding:6px 12px;border-radius:20px;font-size:12px;font-weight:bold;text-transform:uppercase;
}
.status-pending{background:#fef3c7;color:#92400e;}
.status-paid{background:#d1fae5;color:#065f46;}
.status-payment_failed{background:#fee2e2;color:#991b1b;}
.status-shipped{background:#dbeafe;color:#1e40af;}
.status-delivered{background:#dcfce7;color:#166534;}
.status-cancelled{background:#f3f4f6;color:#374151;}

.delivery-badge{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:bold;background:#e0e7ff;color:#3730a3;}

.product-item{display:flex;gap:15px;padding:12px;border:1px solid #f0f0f0;border-radius:8px;margin-bottom:10px;align-items:center;}
.product-image{width:60px;height:60px;object-fit:cover;border-radius:6px;background:#f9fafb;}
.product-details{flex:1;}
.product-name{font-weight:600;color:#4A2C2A;margin-bottom:4px;}
.product-meta{font-size:13px;color:#6b7280;}

.order-summary{margin-top:16px;padding-top:16px;border-top:1px solid #f0f0f0;}
.summary-row{display:flex;justify-content:space-between;padding:4px 0;font-size:14px;}
.summary-row.total{font-weight:bold;font-size:16px;color:#4A2C2A;margin-top:8px;padding-top:8px;border-top:2px solid #4A2C2A;}

.customer-info{margin-top:16px;padding:12px;background:#f9fafb;border-radius:8px;font-size:14px;}
.info-row{display:flex;gap:8px;margin-bottom:6px;}
.info-label{font-weight:600;min-width:80px;}

.loading-spinner{border:3px solid #f3f3f3;border-top:3px solid #8A9A5B;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:40px auto;}
@keyframes spin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}

.empty-state{text-align:center;padding:60px 20px;}
.empty-icon{font-size:64px;color:#d1d5db;margin-bottom:16px;}
#refresh-orders.refreshing i{animation:spin 1s linear infinite;}
/* --- Footer styles --- */
 footer {
      background-color: #4A2C2A;
      color: white;
      padding: 48px 0 24px;
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* Footer grid (3 columns) */
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-column h3 {
      color: #8A9A5B;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .footer-column ul { list-style: none; }
    .footer-column ul li { margin-bottom: 8px; }

    .footer-column ul li a {
      color: #d1d5db;
      text-decoration: none;
      font-size: 13px;
      transition: color 0.3s ease;
      display: inline-block;
    }

    .footer-column ul li a:hover {
      color: #8A9A5B;
      text-decoration: underline;
    }

    /* Contact info */
    .contact-info {
      font-size: 13px;
      color: #d1d5db;
      line-height: 1.8;
    }

    .contact-info p {
      margin-bottom: 8px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }

    .contact-info i {
      color: #8A9A5B;
      min-width: 14px;
      margin-top: 3px;
    }

    .contact-info a {
      color: #d1d5db;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .contact-info a:hover {
      color: #8A9A5B;
      text-decoration: underline;
    }

    /* Social links centered below all columns */
    .social-links {
      display: flex;
      justify-content: center;   /* ✅ centers the icons */
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 20px 0 30px;
    }

    .social-links a {
      color: white;
      font-size: 18px;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .social-links a:hover {
      background-color: #8A9A5B;
      transform: translateY(-2px);
    }

    /* Bottom bar */
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 20px;
      text-align: center;
      font-size: 13px;
      color: #9ca3af;
    }

    /* Responsive */
    @media (max-width: 992px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
      }
    }

    @media (max-width: 576px) {
      .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 24px;
      }

      .contact-info p {
        justify-content: center;
      }

      .social-links {
        justify-content: center;
      }
    
    }


    /* --- Cart fixes --- */

/* force small consistent thumbnails */
.cart-thumb,
#cart-container img {
  width: 48px !important;
  height: 48px !important;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* keep quantity buttons properly visible */
.quantity-btn {
  width: 28px !important;
  height: 28px !important;
  font-size: 16px !important;
  border: 1px solid #8A9A5B;
  background-color: #fff;
  color: #4A2C2A;
  transition: all 0.3s ease;
}

/* highlight hover */
.quantity-btn:hover:not(:disabled) {
  background-color: #8A9A5B;
  color: #fff;
}

/* fix display alignment */
.quantity-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}