/* Core Storefront Styles */


/* =====================
   GLOBAL RESET
===================== */
* {
  box-sizing: border-box;
  font-family: 'Segoe UI', Arial, sans-serif;
}

body {
  margin: 0;
  background: #f5f2ef;
  color: #3a3028;
}

:root {
  --brand: #b47b4f;       /* warm light-golden */
  --brand-dark: #8d6347;  /* deeper golden for hover */
  --brand-muted: #faf1e9; /* soft background tint */
  --brand-contrast: #ffffff;
  --text-dark: #3a3028;
  --text-light: #6f6257;
  --border-light: #e7d9cd;
}

a {
  text-decoration: none;
  color: inherit;
}

/* =====================
   LAYOUT
===================== */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 16px;
  padding-top: 80px; /* fixed header space */
}

/* =====================
   FIXED HEADER
===================== */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 1000;
}

.logo {
  font-size: 18px;
  font-weight: 600;
  margin-left: 10px;
}

.menu-btn {
  font-size: 26px;
  cursor: pointer;
}

/* =====================
   SIDE MENU
===================== */
.side-menu {
  position: fixed;
  top: 56px;
  left: -260px;
  width: 240px;
  height: calc(100% - 56px);
  background: #fff;
  box-shadow: 4px 0 20px rgba(141, 99, 71, 0.15);
  transition: left 0.3s ease;
  z-index: 999;
}

.side-menu a {
  display: block;
  padding: 14px 18px;
  color: #333;
  font-weight: 500;
  border-bottom: 1px solid #eee;
}

.side-menu a:hover {
  background: #faf1e9;
  color: var(--brand-dark);
}

/* =====================
   HERO SECTION
===================== */
.hero-box {
  background: linear-gradient(135deg, var(--brand-muted), #ffffff);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(141, 99, 71, 0.1);
  margin-bottom: 20px;
  border-left: 4px solid var(--brand);
}

.hero-box h2 {
  margin: 0;
  font-size: 22px;
}

.hero-box p {
  color: #555;
  margin-top: 8px;
  line-height: 1.4;
}

/* =====================
   TRUST BADGES
===================== */
.trust-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.trust-row div {
  background: linear-gradient(135deg, #faf1e9, #ffffff);
  padding: 12px;
  text-align: center;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(141, 99, 71, 0.08);
  border: 1px solid rgba(141, 99, 71, 0.2);
  transition: all 0.3s;
}

.trust-row div:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(141, 99, 71, 0.15);
}

/* =====================
   PRODUCTS GRID
===================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* =====================
   PRODUCT CARD
===================== */
.product-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(141, 99, 71, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(141, 99, 71, 0.1);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(141, 99, 71, 0.15);
  border-color: var(--brand);
}

.product-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.product-body {
  padding: 16px;
}

.product-body h3 {
  margin: 0 0 6px;
  font-size: 18px;
}

.product-body p {
  font-size: 14px;
  color: #555;
  margin: 0 0 10px;
}

.price {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-dark);
}

/* =====================
   BUTTONS
===================== */
.btn,
.buy-btn,
.pay-btn {
  display: inline-block;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  text-align: center;
  border-radius: 10px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover,
.buy-btn:hover,
.pay-btn:hover {
  background: linear-gradient(135deg, var(--brand-dark), #a07214);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(141, 99, 71, 0.3);
}

/* =====================
   PRODUCT PAGE
===================== */
.product-page {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(141, 99, 71, 0.1);
  border: 1px solid rgba(141, 99, 71, 0.1);
}

.product-page img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
}

/* =====================
   REVIEWS
===================== */
.review {
  border-bottom: 1px solid rgba(141, 99, 71, 0.2);
  padding: 10px 0;
  transition: background 0.3s;
}

.review:hover {
  background: rgba(141, 99, 71, 0.05);
  padding-left: 10px;
}

.review b {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-dark);
}

/* =====================
   CHECKOUT
===================== */
.checkout-box {
  background: linear-gradient(135deg, #faf1e9, #ffffff);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 8px 25px rgba(141, 99, 71, 0.08);
  margin-bottom: 16px;
  border-left: 4px solid var(--brand);
}

.field {
  margin-bottom: 12px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  display: block;
}

input, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 2px solid rgba(141, 99, 71, 0.2);
  font-size: 15px;
  transition: all 0.3s;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 8px rgba(141, 99, 71, 0.3);
}

textarea {
  resize: none;
}

.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* =====================
   FOOTER
===================== */
.footer {
  text-align: center;
  font-size: 13px;
  color: #666;
  padding: 20px 0;
}

/* =====================
   MOBILE OPTIMIZATION
===================== */
@media (max-width: 600px) {
  .row-2 {
    grid-template-columns: 1fr;
  }

  .hero-box h2 {
    font-size: 20px;
  }
}
@media (max-width: 400px) {
  .top-header {
    padding: 0 10px;
  }

  .logo {
    font-size: 16px;
  }

  .menu-btn {
    font-size: 24px;
  }
}

/* AUTH HEADER */
.auth-header {
  height: 56px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 600;
  position: sticky;
  top: 0;
}

.back-btn {
  position: absolute;
  left: 15px;
  font-size: 22px;
  cursor: pointer;
}

.auth-box {
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(141, 99, 71, 0.1);
  border-top: 4px solid var(--brand);
}
/* INDEX PAGE PRODUCT IMAGE */
.img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  border-radius: 14px;
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PRODUCT IMAGE 1:1 RATIO */
.img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f6f6f6;
  border-radius: 14px;
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ADJUSTED PRODUCT PAGE IMAGE */
.product-page img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
}
/* ===== PRODUCT PAGE IMAGE GALLERY (FIXED) ===== */

.product-gallery {
  margin-bottom: 20px;
}

/* MAIN IMAGE CONTAINER */
.main-img {
  width: 100%;
  height: 320px;            /* fixed height for large screens */
  border-radius: 16px;
  background: var(--brand-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(141, 99, 71, 0.2);
}

/* MAIN IMAGE */
.main-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;      /* Keep full image visible */
}

/* THUMBNAILS */
.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.thumbs img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f5f5f5;
  transition: all 0.3s;
}

.thumbs img:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(141, 99, 71, 0.3);
  transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 600px) {
  .main-img {
    height: 260px;
  }

  .thumbs img {
    width: 56px;
    height: 56px;
  }
}


/* IMAGE GALLERY */
.gallery {
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow:0 6px 20px rgba(141, 99, 71, 0.1);
  margin-bottom:20px;
  border: 1px solid rgba(141, 99, 71, 0.15);
}

/* MAIN IMAGE */
.main-img {
  width:100%;
  aspect-ratio:1/1;
  border-radius:12px;
  overflow:hidden;
  background:var(--brand-muted);
}

.main-img img {
  width:100%;
  height:100%;
  object-fit: contain;   /* Prevent product image crop */
}

/* THUMBNAILS */
.thumbs {
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
}

.thumbs img {
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  border:2px solid transparent;
}

.thumbs img:hover {
  border-color:var(--brand);
}

/* MOBILE TWEAKS: tighter header, smaller images, narrower side menu */
@media (max-width: 600px) {
  .top-header { height: 50px; padding: 0 12px; }
  .container { padding-top: 72px; }
  .side-menu { top: 50px; left: -220px; width: 200px; height: calc(100% - 50px); }
  .product-card img { height: 180px; }
  .main-img { height: 220px; }
  .hero-box h2 { font-size: 20px; }
}

@media (max-width: 400px) {
  .top-header { padding: 0 10px; }
  .logo { font-size: 16px; }
  .menu-btn { font-size: 24px; }
  .product-card img { height: 140px; }
  .main-img { height: 180px; }
}

/* MOBILE PERFECT */
@media(max-width:600px){
  .thumbs img{
    width:56px;
    height:56px;
  }
}

/* ===== USER PANEL BASE (NORMAL STYLE) ===== */
@keyframes jcLift {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.auth-page,
.ac-page,
.mo-page,
.od-page {
  margin-top: 84px;
  min-height: calc(100vh - 84px);
  padding: 18px 0 34px;
  background:
    radial-gradient(circle at 12% 8%, rgba(65, 178, 162, 0.14), transparent 35%),
    radial-gradient(circle at 92% 88%, rgba(20, 94, 94, 0.14), transparent 35%),
    #eef2ff;
}

.auth-shell,
.ac-shell,
.mo-shell,
.od-shell {
  width: min(1180px, 95%);
  margin: 0 auto;
}

.auth-reveal {
  animation: jcLift 0.42s ease both;
}

/* Auth pages */
.auth-shell {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 14px;
  align-items: stretch;
}

.auth-shell--register {
  grid-template-columns: 1fr 1fr;
}

.auth-panel {
  border: 1px solid #d6e0ff;
  border-radius: 18px;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0 16px 28px rgba(15, 54, 53, 0.08);
}

.auth-panel--brand {
  background: linear-gradient(150deg, #eff7f6 0%, #f9fcfc 100%);
}

.auth-panel--form h2 {
  margin: 0;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 1.8rem;
  color: #102847;
}

.auth-kicker {
  margin: 0;
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #133f74;
  background: #daf0ed;
  border: 1px solid #bde0dc;
}

.auth-panel h1 {
  margin: 11px 0 0;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.15;
  color: #102847;
}

.auth-copy {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.66;
  color: #344860;
}

.auth-points,
.auth-benefits {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.auth-points li,
.auth-benefits p {
  margin: 0;
  border: 1px solid #d6e0ff;
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 0.87rem;
  color: #305a56;
  background: #ffffff;
  line-height: 1.45;
}

.auth-home-link {
  margin-top: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid #c4ddd9;
  border-radius: 10px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #133f74;
  background: #e7f3f1;
}

.auth-subtitle {
  margin: 8px 0 0;
  color: #344860;
  font-size: 0.91rem;
}

.auth-alert {
  margin-top: 12px;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 0.84rem;
  border: 1px solid transparent;
}

.auth-alert--error {
  border-color: #e8caca;
  background: #fff6f6;
  color: #9d3737;
}

.auth-form {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.auth-field label {
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #30415d;
  text-transform: uppercase;
}

.auth-field input,
.auth-field textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cfe2e0;
  border-radius: 11px;
  padding: 10px 12px;
  font-size: 0.9rem;
  color: #102847;
  background: #ffffff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:focus,
.auth-field textarea:focus {
  border-color: #133f74;
  box-shadow: 0 0 0 4px rgba(35, 149, 130, 0.14);
}

.auth-field textarea {
  min-height: 94px;
  resize: vertical;
}

.auth-btn {
  min-height: 44px;
  border: 1px solid #ff8f3d;
  border-radius: 11px;
  padding: 10px 14px;
  background: #ff8f3d;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.auth-switch {
  margin: 13px 0 0;
  font-size: 0.88rem;
  color: #344860;
}

.auth-switch a {
  color: #133f74;
  font-weight: 700;
  text-decoration: none;
}

/* Account page */
.ac-shell {
  display: grid;
  gap: 12px;
}

.ac-card {
  border: 1px solid #d6e0ff;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 14px 26px rgba(19, 58, 57, 0.06);
}

.ac-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  background: linear-gradient(145deg, #eef7f6, #ffffff);
}

.ac-hero__copy {
  flex: 1 1 420px;
}

.ac-kicker {
  margin: 0;
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid #c3dfdb;
  border-radius: 999px;
  background: #dff2ef;
  color: #133f74;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ac-hero h1 {
  margin: 10px 0 0;
  color: #123838;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  line-height: 1.14;
}

.ac-hero p {
  margin: 9px 0 0;
  color: #3d615e;
  line-height: 1.6;
}

.ac-hero__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ac-btn {
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ac-btn--primary {
  background: #ff8f3d;
  border-color: #ff8f3d;
  color: #ffffff;
}

.ac-btn--ghost {
  background: #f7f9ff;
  border-color: #bfd0ff;
  color: #133f74;
}

.ac-btn--danger {
  background: #fff4f4;
  border-color: #eacaca;
  color: #a03f3f;
}

.ac-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ac-card h2 {
  margin: 0 0 10px;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 1.28rem;
}

.ac-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #e2efed;
}

.ac-row:last-child {
  border-bottom: none;
}

.ac-row span {
  color: #344860;
}

.ac-row strong {
  color: #102847;
}

.ac-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ac-stat {
  border: 1px solid #d6e0ff;
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(145deg, #f7f9ff, #ffffff);
}

.ac-stat__value {
  margin: 0;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
}

.ac-stat__label {
  margin: 4px 0 0;
  color: #344860;
  font-size: 0.8rem;
}

.ac-recent__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ac-recent {
  overflow: hidden;
}

.ac-order-row__meta {
  min-width: 0;
}

.ac-recent__head a {
  text-decoration: none;
  color: #133f74;
  font-size: 0.81rem;
  font-weight: 700;
}

.ac-empty {
  border: 1px dashed #c9dfdc;
  border-radius: 11px;
  padding: 12px;
  color: #344860;
  background: #f7fbfb;
}

.ac-order-list {
  display: grid;
  gap: 9px;
}

.ac-order-row {
  display: grid;
  grid-template-columns: 1.25fr auto auto auto;
  gap: 9px;
  align-items: center;
  border: 1px solid #d6e0ff;
  border-radius: 12px;
  background: #ffffff;
  padding: 11px;
}

.ac-order-id {
  margin: 0;
  color: #102847;
  font-weight: 700;
}

.ac-order-date {
  margin: 4px 0 0;
  color: #344860;
  font-size: 0.8rem;
}

.ac-order-price {
  margin: 0;
  color: #102847;
  font-weight: 700;
}

.ac-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ac-badge--pending {
  background: #fff0d8;
  color: #915f22;
}

.ac-badge--confirmed {
  background: #dbf5f2;
  color: #1f6f67;
}

.ac-badge--completed {
  background: #dff5e8;
  color: #1f6d3d;
}

.ac-badge--cancelled {
  background: #fde3e3;
  color: #a23b3b;
}

.ac-order-link {
  min-height: 34px;
  padding: 7px 10px;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid #bfd0ff;
  border-radius: 10px;
  color: #133f74;
  background: #f7f9ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* My orders page */
.mo-shell {
  display: grid;
  gap: 12px;
}

.mo-card {
  border: 1px solid #d6e0ff;
  border-radius: 16px;
  background: #ffffff;
  padding: 15px;
  box-shadow: 0 14px 26px rgba(19, 58, 57, 0.06);
}

.mo-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(145deg, #eef7f6, #ffffff);
}

.mo-kicker {
  margin: 0;
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid #c3dfdb;
  border-radius: 999px;
  background: #dff2ef;
  color: #133f74;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mo-hero h1 {
  margin: 10px 0 0;
  color: #123838;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: clamp(1.65rem, 4vw, 2.2rem);
}

.mo-hero p {
  margin: 9px 0 0;
  color: #3f6360;
}

.mo-hero__actions {
  display: flex;
  gap: 8px;
}

.mo-btn {
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 13px;
  text-decoration: none;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mo-btn--primary {
  background: #ff8f3d;
  border-color: #ff8f3d;
  color: #ffffff;
}

.mo-btn--ghost,
.mo-btn--soft {
  background: #f7f9ff;
  border-color: #bfd0ff;
  color: #133f74;
}

.mo-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mo-stat,
.mo-order {
  display: block;
}

.mo-stat__value {
  margin: 0;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 1.24rem;
  font-weight: 800;
}

.mo-stat__label {
  margin: 4px 0 0;
  color: #344860;
  font-size: 0.82rem;
}

.mo-empty h2 {
  margin: 0;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
}

.mo-empty p {
  margin: 8px 0 0;
  color: #344860;
}

.mo-list {
  display: grid;
  gap: 10px;
}

.mo-order__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mo-order__id {
  margin: 0;
  color: #102847;
  font-weight: 700;
}

.mo-order__date {
  margin: 4px 0 0;
  color: #344860;
  font-size: 0.8rem;
}

.mo-status {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mo-status--pending {
  background: #fff0d8;
  color: #915f22;
}

.mo-status--confirmed {
  background: #dbf5f2;
  color: #1f6f67;
}

.mo-status--completed {
  background: #dff5e8;
  color: #1f6d3d;
}

.mo-status--cancelled {
  background: #fde3e3;
  color: #a23b3b;
}

.mo-order__body {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: center;
}

.mo-order__body img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #d6e0ff;
  background: #edf6f4;
}

.mo-order__info h3 {
  margin: 0;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 1rem;
}

.mo-order__info p {
  margin: 6px 0 0;
  color: #344860;
  font-size: 0.86rem;
}

.mo-price {
  color: #133f74;
  font-weight: 700;
}

.mo-order__foot {
  margin-top: 10px;
}

/* Order detail page */
.od-shell {
  display: grid;
  gap: 12px;
}

.od-card {
  border: 1px solid #d6e0ff;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 14px 26px rgba(19, 58, 57, 0.06);
}

.od-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  background: linear-gradient(145deg, #eef7f6, #ffffff);
}

.od-kicker {
  margin: 0;
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid #c3dfdb;
  border-radius: 999px;
  background: #dff2ef;
  color: #133f74;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.od-hero h1 {
  margin: 10px 0 0;
  color: #123838;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: clamp(1.58rem, 4vw, 2.04rem);
}

.od-date {
  margin: 8px 0 0;
  color: #344860;
}

.od-status-wrap {
  display: flex;
  align-items: center;
}

.od-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.od-card h2 {
  margin: 0 0 10px;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-size: 1.24rem;
}

.od-product {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 12px;
  align-items: center;
}

.od-product img {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border: 1px solid #d6e0ff;
  border-radius: 12px;
  background: #edf6f4;
}

.od-product__info h3 {
  margin: 0;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
}

.od-product__info p {
  margin: 6px 0 0;
  color: #344860;
}

.od-price {
  color: #133f74;
  font-weight: 700;
}

.od-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #e2efed;
}

.od-row:last-child {
  border-bottom: none;
}

.od-row span {
  color: #344860;
}

.od-row strong {
  color: #102847;
}

.od-address p {
  margin: 0 0 5px;
  color: #344860;
}

.od-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.od-btn {
  min-height: 39px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 13px;
  text-decoration: none;
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.od-btn--primary {
  background: #ff8f3d;
  border-color: #ff8f3d;
  color: #ffffff;
}

.od-btn--ghost {
  background: #f7f9ff;
  border-color: #bfd0ff;
  color: #133f74;
}

.od-badge {
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.od-badge--pending {
  background: #fff0d8;
  color: #915f22;
}

.od-badge--confirmed {
  background: #dbf5f2;
  color: #1f6f67;
}

.od-badge--completed {
  background: #dff5e8;
  color: #1f6d3d;
}

.od-badge--cancelled {
  background: #fde3e3;
  color: #a23b3b;
}

.od-error h1 {
  margin: 0;
  color: #102847;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
}

.od-error p {
  margin: 8px 0 0;
  color: #344860;
}

/* Shared utility */
.alert {
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 12px;
  border: 1px solid #d6e0ff;
  background: #f7fbfb;
  color: #344860;
}

.alert-error {
  border-color: #e8caca;
  background: #fff6f6;
  color: #9d3737;
}

.btn-back {
  min-height: 40px;
  padding: 9px 14px;
  text-decoration: none;
  border: 1px solid #bfd0ff;
  border-radius: 11px;
  background: #f7f9ff;
  color: #133f74;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.order-summary,
.payment-form {
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  .auth-shell,
  .auth-shell--register,
  .ac-grid,
  .od-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .auth-page,
  .ac-page,
  .mo-page,
  .od-page {
    margin-top: 56px;
    min-height: calc(100vh - 56px);
    padding-top: 12px;
  }

  .auth-shell,
  .ac-shell,
  .mo-shell,
  .od-shell {
    width: min(1180px, calc(100% - 0.8rem));
  }

  .auth-panel,
  .ac-card,
  .mo-card,
  .od-card {
    border-radius: 12px;
    padding: 12px;
  }

  .auth-field-row,
  .ac-stats-grid,
  .mo-stats,
  .ac-order-row {
    grid-template-columns: 1fr;
  }

  .ac-order-row,
  .mo-order__head {
    gap: 7px;
  }

  .mo-order__body,
  .od-product {
    grid-template-columns: 82px 1fr;
  }

  .mo-order__body img,
  .od-product img {
    width: 82px;
    height: 82px;
    border-radius: 10px;
  }

  .ac-hero__actions,
  .od-actions,
  .mo-hero__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .ac-btn,
  .mo-btn,
  .od-btn {
    width: 100%;
  }
}