/* style.css — Luxury Light Theme (Cream + Gold + Charcoal)
   Full replacement file (store + modal + admin + lightbox) */

:root{
  --bg:#f6f4ef;           /* soft cream */
  --card:#ffffff;         /* white cards */
  --card2:#f1efe9;        /* soft secondary */
  --text:#1c1c1c;         /* deep charcoal */
  --muted:#6f6a5e;        /* warm muted */
  --line:#e2dfd6;         /* soft border */
  --primary:#b48a3c;      /* luxury gold */
  --danger:#c0392b;
  --shadow: 0 12px 28px rgba(0,0,0,.08);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(to bottom, #f6f4ef, #ffffff);
  color:var(--text);
}

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

.container{max-width:1100px;margin:0 auto;padding:18px}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}

.row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.divider{height:1px;background:var(--line);margin:12px 0}

/* Topbar */
.topbar{border-bottom:1px solid var(--line); background:#f0ede6}
.topbar-inner{display:flex;justify-content:space-between;gap:12px;align-items:center}
.topbar-left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.topbar-right{display:flex;gap:14px;align-items:center}
.link{color:var(--muted)}
.link:hover{color:var(--text)}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--card2);
}

/* Header / Nav */
.header{
  position:sticky;top:0;
  background:rgba(246,244,239,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  z-index:10
}
.nav{display:flex;justify-content:space-between;align-items:center;gap:14px}
.brand{display:flex;gap:10px;align-items:center}
.brand-name{font-weight:800}
.brand-sub{font-size:.92rem}

.logo{
  width:44px;height:44px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.nav-actions{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{
  border:1px solid var(--line);
  background:var(--card);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--text);
}
.btn:hover{filter:brightness(1.03)}
.btn-primary{
  background: linear-gradient(135deg, #b48a3c, #d4af37);
  border-color: transparent;
  color:white;
}
.btn-ghost{background:transparent}
.danger{background:var(--danger);border-color:transparent;color:white}
button:disabled{opacity:.55;cursor:not-allowed}

/* Inputs */
.input, input, textarea, select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#ffffff;
  color:var(--text);
}
textarea{resize:vertical}
.label{display:block;margin:8px 0 6px;color:var(--muted)}

/* Hero */
.hero{padding:28px 0}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:stretch;
}
.hero-copy h1{margin:0 0 10px;font-size:clamp(1.6rem, 2.4vw, 2.4rem);line-height:1.15}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.stat{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card2)}
.stat-title{color:var(--muted);font-size:.92rem}
.stat-value{font-weight:800;margin-top:4px}
.note{margin-top:10px}

.hero-media{padding:0;overflow:hidden}
.hero-media-inner{position:relative}
.hero-chip{
  position:absolute; top:14px; left:14px;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(0,0,0,.08);
  font-size:.9rem;
}
.hero-media img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
}
.hero-media-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  align-items:flex-end;
}
.hero-title{font-weight:800}
.hero-desc{font-size:.95rem}

.price{font-weight:900;font-size:1.15rem}

/* Sections */
.section{padding:26px 0}
.section h2{margin:0 0 8px}
.section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-end;flex-wrap:wrap}

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.feature{padding:14px}
.feature-icon{font-size:1.4rem}

.filters{display:flex;gap:10px;flex-wrap:wrap}

/* Product grid */
.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.product{padding:12px;overflow:hidden}
.product-media{
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#faf8f2; /* changed from dark */
}
.product img, .product video{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}
.p-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.p-name{font-weight:850}
.tag{
  border:1px solid var(--line);
  padding:4px 8px;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:.85rem;
}
.p-desc{margin:8px 0 0;font-size:.95rem}
.p-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.stock{font-size:.92rem}
.in{color:#1b8f55}
.out{color:#c83f3f}

/* Testimonials */
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.tcard{padding:14px}
.stars{letter-spacing:1px;color:#b48a3c}

/* FAQ */
.faq{display:grid;gap:10px;margin-top:12px}
details{padding:12px}
summary{cursor:pointer;font-weight:800}
details p{margin:10px 0 0}

/* CTA + Footer */
.cta{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
  align-items:stretch;
}
.cta-card{padding:14px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.footer{border-top:1px solid var(--line);padding:18px 0}
.footer-inner{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Modal */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  z-index:100;
}
.hidden{display:none}
.modal-card{
  width:min(1100px, 100%);
  max-height: 92vh;
  overflow:auto;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#ffffff; /* changed from bg */
  box-shadow: var(--shadow);
  position:relative;
}
.xbtn{
  position:sticky;
  top:10px;
  float:right;
  border:1px solid var(--line);
  background:var(--card2);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.modal-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
.modal-media{padding:12px}
.media-wrap{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#faf8f2; /* changed from dark */
}
.main-media{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  border-radius:14px;
}

.thumbs{
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.thumb{
  width:74px;
  height:54px;
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  background:#faf8f2; /* changed from dark */
  padding:0;
  display:grid;
  place-items:center;
  color:var(--text);
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.modal-info{padding:6px 4px}
.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card2);
  color:var(--muted);
  margin-bottom:10px;
  font-size:.9rem;
}
.price-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.order-box{padding:14px;margin-top:12px}
.order-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Pay status panel */
.pay-status{
  margin-top:10px;
  padding:10px;
  border-radius:12px;
  background:var(--card2);
  border:1px solid var(--line);
}
.pay-title{font-weight:800;margin-bottom:4px}
.pay-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

/* Admin helpers */
.form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:10px;
}
.mini{margin:10px 0}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:#f9f9f9;
  display:grid;
  place-items:center;
  z-index:9999;
  padding:18px;
}
.lightbox-img{
  max-width:96vw;
  max-height:90vh;
  border-radius:14px;
}
.lightbox-close{
  position:fixed;
  top:14px;
  right:14px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.35);
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 980px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .hero-media img{height:280px}
  .cta{grid-template-columns:1fr}
  .modal-grid{grid-template-columns:1fr}
  .main-media{height:320px}
  .features{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .topbar-right{display:none}
  .nav-actions{display:none}
}

/* Professional inline messages (replace emojis) */
.msg{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(6px);
}
.msg svg{ width:18px; height:18px; flex:0 0 auto; }
.msg-success{ border-color: rgba(22,163,74,.25); }
.msg-error{ border-color: rgba(220,38,38,.25); }
.msg-info{ border-color: rgba(37,99,235,.25); }
.msg-warn{ border-color: rgba(217,119,6,.25); }

/* Lucide icons */
i[data-lucide] { width: 18px; height: 18px; display: inline-block; }
.feature-icon i[data-lucide] { width: 22px; height: 22px; }
.badge { display: inline-flex; align-items: center; gap: 8px; }
.stars { display: inline-flex; gap: 4px; align-items: center; }

/* Payment status title colors */
#payTitle.success {
  color: #16a34a !important;
}
.link {
  text-decoration: underline;
  font-weight: 600;
}

/* admin.css — Admin-only overrides (does NOT affect storefront)
   Requires: <body class="admin-page"> on admin.html */

body.admin-page{
  /* keep background consistent on admin */
  background: linear-gradient(to bottom, #f6f4ef, #ffffff);
  color: #1c1c1c;
}

/* Headings / text visibility */
body.admin-page .admin-head h1,
body.admin-page .admin-section h2{
  color:#1c1c1c;
  font-weight:800;
  letter-spacing:.2px;
}

body.admin-page .muted,
body.admin-page .admin-head p,
body.admin-page .admin-section p{
  color:#6f6a5e;
}

/* Admin menu */
body.admin-page .admin-menu{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 16px;
}

body.admin-page .admin-tab.is-active{
  background:#1c1c1c;
  color:#ffffff;
  border-color:#1c1c1c;
}

/* KPI grid */
body.admin-page .orders-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:10px;
  margin: 10px 0 12px;
}

body.admin-page .orders-grid .kpi{
  background:#ffffff;
  border:1px solid #e2dfd6;
  border-radius:14px;
  padding:10px 12px;
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
}

body.admin-page .orders-grid .kpi .label{
  font-size:12px;
  color:#6f6a5e;
}

body.admin-page .orders-grid .kpi .value{
  font-size:18px;
  font-weight:900;
  margin-top:4px;
  color:#1c1c1c;
}

/* Table horizontal scroll */
body.admin-page .table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  border-radius:14px;
  border:1px solid #e2dfd6;
  background:#ffffff;
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
}

/* Optional scrollbar style */
body.admin-page .table-wrap::-webkit-scrollbar{ height:10px; }
body.admin-page .table-wrap::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
body.admin-page .table-wrap::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.06);
}

/* Table */
body.admin-page .admin-table{
  border-collapse:collapse;
  width:max-content;     /* table grows naturally */
  min-width:1400px;      /* so columns don't squeeze */
  color:#1c1c1c;
}

body.admin-page .admin-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background:#f1efe9;
  color:#1c1c1c;
  text-align:left;
  padding:10px 12px;
  font-size:13px;
  white-space:nowrap;
  border-bottom:1px solid #e2dfd6;
}

body.admin-page .admin-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid #e2dfd6;
  font-size:13px;
  white-space:nowrap;
  color:#1c1c1c;
}

body.admin-page .admin-table tbody tr:hover{
  background:#faf8f2;
}

/* Column helpers */
body.admin-page .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12.5px;
}

body.admin-page .cell-tight{ max-width:220px; overflow:hidden; text-overflow:ellipsis; }
body.admin-page .cell-wide{ max-width:360px; overflow:hidden; text-overflow:ellipsis; }

/* Status badges */
body.admin-page .badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
}

body.admin-page .badge-success{
  background: rgba(34,197,94,0.15);
  color:#16a34a;
  border:1px solid rgba(34,197,94,0.25);
}

body.admin-page .badge-failed{
  background: rgba(239,68,68,0.15);
  color:#dc2626;
  border:1px solid rgba(239,68,68,0.25);
}

body.admin-page .badge-pending{
  background: rgba(148,163,184,0.15);
  color:#64748b;
  border:1px solid rgba(148,163,184,0.25);
}

/* Responsive KPI grid */
@media (max-width: 900px){
  body.admin-page .orders-grid{
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

body.admin-page .admin-form-grid{
  align-items:start;
}

body.admin-page .admin-manual-field{
  display:grid;
  gap:6px;
}

body.admin-page .admin-manual-wide{
  grid-column:1 / -1;
}

body.admin-page .admin-label,
body.admin-page .admin-media-title{
  color:#1c1c1c;
  font-size:13px;
  font-weight:800;
}

body.admin-page .admin-media-panel{
  display:grid;
  gap:12px;
  margin:14px 0;
  padding:12px;
  border:1px solid #e2dfd6;
  border-radius:14px;
  background:#faf8f2;
}

body.admin-page .admin-media-upload{
  display:grid;
  gap:8px;
}

body.admin-page .admin-picker-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}

body.admin-page .admin-upload-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

body.admin-page .admin-upload-controls .input[type="file"]{
  flex:1 1 280px;
  min-width:240px;
}

body.admin-page .admin-library-select{
  width:100%;
}

body.admin-page .admin-library-select[multiple]{
  min-height:160px;
}

body.admin-page .admin-media-preview{
  display:grid;
  gap:12px;
}

body.admin-page .admin-preview-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:10px;
}

body.admin-page .admin-media-thumb{
  border:1px solid #e2dfd6;
  border-radius:12px;
  overflow:hidden;
  background:#ffffff;
  padding:0;
  cursor:pointer;
  text-align:left;
}

body.admin-page .admin-media-thumb img{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  display:block;
}

body.admin-page .admin-media-caption{
  display:block;
  padding:8px;
  font-size:12px;
  font-weight:700;
  color:#1c1c1c;
}

body.admin-page .admin-media-thumb.is-main .admin-media-caption{
  color:#16a34a;
}

body.admin-page .admin-video-card{
  display:grid;
  gap:8px;
}

body.admin-page .admin-video-preview{
  width:100%;
  max-width:320px;
  border:1px solid #e2dfd6;
  border-radius:12px;
  background:#000000;
}

@media (max-width: 700px){
  body.admin-page .admin-upload-controls .input[type="file"]{
    min-width:0;
  }
}