/* =============================================
   style.css — External CSS for entire project
   WAD Homework L2 — 2025_2026
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Lato:wght@300;400;700&display=swap');

/* ---------- VARIABLES ---------- */
:root {
  --primary : #2c3e50;
  --accent  : #e67e22;
  --light   : #f9f6f0;
  --white   : #ffffff;
  --gray    : #7f8c8d;
  --border  : #ddd;
  --danger  : #e74c3c;
  --success : #27ae60;
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body   { font-family:'Lato',sans-serif; background:var(--light); color:var(--primary); min-height:100vh; }
a      { text-decoration:none; color:inherit; }
ul     { list-style:none; }
img    { display:block; }

/* ---------- HEADER ---------- */
header {
  background: var(--primary);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 30px;
  max-width: 1200px;
  margin: 0 auto;
}
.header-logo { display:flex; align-items:center; gap:8px; font-size:1.3rem; font-weight:700; }
.header-logo span { font-size:1.9rem; }
header h1 {
  font-family:'Playfair Display',serif;
  font-size:1.5rem;
  color:var(--accent);
  text-align:center;
  flex:1;
}

/* ---------- NAV ---------- */
nav { background:var(--accent); }
nav ul { display:flex; flex-wrap:wrap; justify-content:center; max-width:1200px; margin:0 auto; }
nav ul li a {
  display:block; padding:11px 22px;
  color:var(--white); font-weight:700; font-size:.9rem; letter-spacing:.4px;
  transition:background .18s;
}
nav ul li a:hover,
nav ul li a.active { background:rgba(0,0,0,.18); }

/* ---------- PAGE WRAPPER ---------- */
.page-wrapper {
  display:flex; gap:20px;
  max-width:1200px; margin:0 auto;
  padding:24px 20px;
}
.main-content { flex:1; min-width:0; }

/* ---------- SIDE NAV (category pages) ---------- */
.side-nav { width:160px; flex-shrink:0; }
.side-nav ul { background:var(--white); border-radius:8px; border:1px solid var(--border); overflow:hidden; }
.side-nav ul li a { display:block; padding:11px 14px; border-bottom:1px solid var(--border); font-weight:600; transition:background .18s; }
.side-nav ul li a:hover { background:var(--accent); color:var(--white); }

/* ---------- HERO ---------- */
.hero {
  background:linear-gradient(120deg,var(--primary) 0%,#34495e 100%);
  color:var(--white); text-align:center;
  padding:56px 30px; border-radius:10px; margin-bottom:28px;
}
.hero h2 { font-family:'Playfair Display',serif; font-size:2.1rem; color:var(--accent); margin-bottom:10px; }
.hero p  { font-size:1.05rem; opacity:.85; }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-block; padding:9px 20px;
  background:var(--accent); color:var(--white);
  border-radius:5px; font-weight:700; font-size:.9rem;
  border:none; cursor:pointer; transition:background .18s;
}
.btn:hover       { background:#d35400; }
.btn-sm          { padding:6px 14px; font-size:.82rem; }
.btn-danger      { background:var(--danger); }
.btn-danger:hover{ background:#c0392b; }
.btn-gray        { background:var(--gray); }
.btn-gray:hover  { background:#636e72; }

/* ---------- CATEGORY CARDS (main page) ---------- */
.categories { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-bottom:28px; }
.category-card { background:var(--white); border-radius:10px; border:1px solid var(--border); overflow:hidden; transition:transform .2s,box-shadow .2s; }
.category-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.category-card img { width:100%; height:180px; object-fit:cover; }
.category-card .card-body { padding:16px; }
.category-card h3 { font-family:'Playfair Display',serif; margin-bottom:6px; font-size:1.15rem; }
.category-card p  { color:var(--gray); font-size:.9rem; margin-bottom:12px; line-height:1.4; }

/* ---------- PRODUCTS SECTION ---------- */
.products-section { margin-bottom:28px; }
.products-section h2 {
  font-family:'Playfair Display',serif; font-size:1.5rem;
  padding-bottom:8px; border-bottom:3px solid var(--accent); margin-bottom:20px;
}
.products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }

/* ---------- PRODUCT CARD ---------- */
article.product-card { background:var(--white); border-radius:10px; border:1px solid var(--border); overflow:hidden; transition:transform .2s,box-shadow .2s; }
article.product-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.1); }
article.product-card img   { width:100%; height:155px; object-fit:cover; }
article.product-card .product-info { padding:14px; }
article.product-card h3    { font-weight:700; font-size:1rem; margin-bottom:4px; }
article.product-card .price{ color:var(--accent); font-weight:700; font-size:1.1rem; margin-bottom:6px; }
article.product-card p     { color:var(--gray); font-size:.82rem; margin-bottom:10px; line-height:1.4; }
.qty-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.qty-row label { font-size:.85rem; font-weight:600; }
.qty-row input { width:60px; padding:5px 8px; border:1px solid var(--border); border-radius:4px; font-size:.9rem; }

/* ---------- ASIDE PANELS ---------- */
.aside-panels { display:flex; flex-direction:column; gap:16px; width:195px; flex-shrink:0; }
aside { background:var(--white); border:1px solid var(--border); border-radius:8px; padding:14px; position:sticky; top:76px; }
aside h4 { font-family:'Playfair Display',serif; font-size:.95rem; color:var(--accent); border-bottom:2px solid var(--accent); padding-bottom:5px; margin-bottom:10px; }
aside p  { font-size:.84rem; color:var(--gray); margin-bottom:5px; }
aside strong { color:var(--primary); }

/* Scrolling text (first aside) */
.scrolling-text-wrapper { height:96px; overflow:hidden; }
.scrolling-text { font-size:.8rem; color:var(--gray); line-height:1.7; animation:scrollUp 14s linear infinite; }
@keyframes scrollUp { 0%{transform:translateY(100%)} 100%{transform:translateY(-100%)} }

/* ---------- CHECKOUT BAR ---------- */
.checkout-bar {
  background:var(--success); color:var(--white);
  text-align:center; padding:13px; font-size:.95rem; font-weight:700;
}

/* ---------- AUTH PAGE ---------- */
.auth-wrapper { min-height:76vh; display:flex; align-items:center; justify-content:center; padding:30px; }
.auth-box {
  background:var(--white); border-radius:12px; padding:38px 34px;
  width:100%; max-width:420px; border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.auth-box h2     { font-family:'Playfair Display',serif; font-size:1.55rem; margin-bottom:5px; }
.auth-box .subtitle { color:var(--gray); font-size:.87rem; margin-bottom:22px; }

/* Tabs (Login / Register) */
.auth-tabs { display:flex; border-bottom:2px solid var(--border); margin-bottom:22px; }
.auth-tab  { flex:1; padding:10px; text-align:center; font-weight:700; cursor:pointer; color:var(--gray); border-bottom:3px solid transparent; margin-bottom:-2px; transition:color .2s,border-color .2s; }
.auth-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.auth-panel { display:none; }
.auth-panel.active { display:block; }

.form-group { margin-bottom:15px; }
.form-group label { display:block; font-weight:700; margin-bottom:5px; font-size:.88rem; }
.form-group input {
  width:100%; padding:9px 13px; border:1px solid var(--border);
  border-radius:6px; font-size:.93rem; font-family:inherit; transition:border-color .2s;
}
.form-group input:focus { outline:none; border-color:var(--accent); }
.form-group input::placeholder { color:#bbb; }
.auth-box .btn { width:100%; padding:11px; font-size:.97rem; margin-top:4px; }

.msg-error   { color:var(--danger);  font-size:.87rem; margin-top:10px; text-align:center; }
.msg-success { color:var(--success); font-size:.87rem; margin-top:10px; text-align:center; }

/* ---------- CART PAGE ---------- */
.cart-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.cart-table th,.cart-table td { padding:11px 15px; text-align:left; border-bottom:1px solid var(--border); font-size:.88rem; }
.cart-table th { background:var(--primary); color:var(--white); font-weight:700; }
.cart-table tbody tr:hover { background:#f7f7f7; }
.cart-summary { margin-top:14px; text-align:right; }
.cart-summary .total-label  { font-size:1.1rem; font-weight:700; }
.cart-summary .total-amount { font-size:1.4rem; font-weight:700; color:var(--accent); margin-left:8px; }
.cart-empty { text-align:center; padding:56px 20px; color:var(--gray); }
.cart-empty span { font-size:3rem; display:block; margin-bottom:12px; }

/* ---------- FOOTER ---------- */
footer { background:var(--primary); color:var(--white); padding:28px 20px; margin-top:30px; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.student-card { background:rgba(255,255,255,.08); border-radius:8px; padding:16px 22px; min-width:220px; }
.student-card p { font-size:.87rem; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.student-card .icon { font-size:1.05rem; }
.footer-bottom { text-align:center; margin-top:18px; font-size:.78rem; color:#aaa; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; max-width:1200px; margin-left:auto; margin-right:auto; }

/* ---------- UTILITIES ---------- */
.mt-10 { margin-top:10px; }
.mt-20 { margin-top:20px; }
.text-center { text-align:center; }