/* ==========================================================================
   Drop Shop design system — shared across dropshop_seekers.php,
   dropshop_account.php, dropshop_pos.php, dropshop_addseeker.php.
   Load AFTER /theme.css and the page's own tiny <style> block.
   Bright surfaces only — no dark backgrounds. Body text is bold, near-black.
   ========================================================================== */

:root{
  /* ink */
  --ink:        #14161f;
  --ink-soft:   #4c5062;
  --muted:      #8a8fa0;

  /* surfaces — bright, warm, never dark */
  --paper:      #fbf8f2;
  --surface:    #ffffff;
  --line:       rgba(20,22,31,0.09);
  --line-soft:  rgba(20,22,31,0.06);

  /* accents */
  --blue-1:     #0074c4;  --blue-2:   #00c7d6;
  --violet-1:   #7c5cff;  --violet-2: #b98bff;
  --orange-1:   #ff7a1a;  --orange-2: #ffb648;
  --green-1:    #0fb56a;  --green-2:  #3fe08a;
  --red-1:      #e0244f;  --red-2:    #ff6f6f;

  --radius-lg:  22px;
  --radius-md:  14px;
  --radius-sm:  10px;

  --shadow-card: 0 1px 2px rgba(20,22,31,0.05), 0 10px 28px -14px rgba(20,22,31,0.22);
  --shadow-pop:  0 1px 2px rgba(20,22,31,0.06), 0 16px 34px -12px rgba(20,22,31,0.28);
}

/* ---- page canvas ---- */
body.ds-body{
  font-family:'Exo 2', sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,116,196,0.10) 1px, transparent 0),
    radial-gradient(1100px 500px at 100% -10%, rgba(255,122,26,0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(0,116,196,0.09), transparent 55%);
  background-size: 22px 22px, auto, auto;
  background-attachment: fixed, fixed, fixed;
  min-height: 100vh;
}

.ds-container{ max-width: 800px; margin: 0 auto; padding: 32px 20px 60px; }
.ds-container.ds-narrow{ max-width: 620px; }
.ds-container.ds-wide{ max-width: 1012px; }

.ds-back{
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom: 18px; font-size: 13px; font-weight: 800;
  color: var(--blue-1); text-decoration: none;
}
.ds-back:hover{ text-decoration: underline; }

.ds-page-title{
  font-family:'Rajdhani', sans-serif; font-size: 32px; font-weight: 900;
  letter-spacing: 1.5px; text-align:center; margin-bottom: 22px;
  color: var(--ink);
}

/* ---- alerts ---- */
.ds-msg{
  border-radius: var(--radius-sm); padding: 13px 18px; font-size: 13px;
  font-weight: 700; margin-bottom: 20px; border: 1.5px solid transparent;
}
.ds-msg.success{ background:#eafbf1; border-color:#b7ecc9; color:#0b7a3f; }
.ds-msg.error  { background:#fdedf0; border-color:#f7c3ce; color:#b3123a; }
.ds-msg.warn   { background:#fff4e8; border-color:#ffd8ab; color:#a65200; }

/* ---- avatar ---- */
.ds-avatar{
  width:52px; height:52px; border-radius:16px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani', sans-serif; font-weight:900; font-size:22px; color:#fff;
  box-shadow: var(--shadow-card);
}
.ds-avatar.a0{ background:linear-gradient(135deg,var(--blue-1),var(--blue-2)); }
.ds-avatar.a1{ background:linear-gradient(135deg,var(--violet-1),var(--violet-2)); }
.ds-avatar.a2{ background:linear-gradient(135deg,var(--orange-1),var(--orange-2)); }
.ds-avatar.a3{ background:linear-gradient(135deg,var(--green-1),var(--green-2)); }
.ds-avatar.a4{ background:linear-gradient(135deg,var(--red-1),var(--red-2)); }

/* ---- simple cards (search box, choice box, POS steps) ---- */
.ds-card{
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  padding: 24px; margin-bottom: 20px;
}
.ds-card.accent-blue   { border-top: 4px solid var(--blue-1); }
.ds-card.accent-orange { border-top: 4px solid var(--orange-1); }
.ds-card.accent-green  { border-top: 4px solid var(--green-1); }
.ds-card.accent-violet { border-top: 4px solid var(--violet-1); }
.ds-card.accent-red    { border-top: 4px solid var(--red-1); }
.ds-card-title{
  font-family:'Rajdhani', sans-serif; font-size:16px; font-weight:900;
  color: var(--ink); text-align:center; margin-bottom:16px;
  text-transform:uppercase; letter-spacing:1.5px;
}

/* ---- mega cards (sectioned boxes: header bar + body) ---- */
.ds-mega{
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  overflow:hidden; margin-bottom: 20px;
}
.ds-mega-header{
  padding: 15px 22px; display:flex; align-items:center; gap:12px;
  font-family:'Rajdhani', sans-serif; font-size:16px; font-weight:900;
  color:#fff; letter-spacing:1.2px; text-transform:uppercase;
  cursor:pointer; user-select:none; list-style:none;
}
.ds-mega-header::-webkit-details-marker{ display:none; }
.ds-mega-header::marker{ content:''; }
.ds-mega-toggle{ margin-left:auto; font-size:14px; transition:transform .18s ease; flex-shrink:0; }
details.ds-mega:not([open]) .ds-mega-toggle{ transform:rotate(-90deg); }
.ds-mega-header.hd-blue   { background:linear-gradient(120deg,var(--blue-1),var(--blue-2)); }
.ds-mega-header.hd-violet { background:linear-gradient(120deg,var(--violet-1),var(--violet-2)); }
.ds-mega-header.hd-orange { background:linear-gradient(120deg,var(--orange-1),var(--orange-2)); }
.ds-mega-header.hd-green  { background:linear-gradient(120deg,var(--green-1),var(--green-2)); }
.ds-mega-header.hd-red    { background:linear-gradient(120deg,var(--red-1),var(--red-2)); }

.ds-icon-chip{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.22); font-size:15px;
}
.ds-mega-body{ padding: 22px; }
.ds-divider{ border-top:1.5px solid var(--line-soft); margin: 20px -22px; }

/* ---- field display ---- */
.ds-field-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; }
.ds-field-label{ font-size:10.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.ds-field-value{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.5; }
.ds-field-value.mono{ font-family:'JetBrains Mono', monospace; }
.ds-field-empty{ font-size:13px; color:var(--muted); font-style:italic; }
.ds-field-value.stat-orange{ color:var(--orange-1); font-size:19px; font-family:'Rajdhani',sans-serif; font-weight:900; }
.ds-field-value.stat-blue{ color:var(--blue-1); font-size:19px; font-family:'Rajdhani',sans-serif; font-weight:900; }

/* ---- buttons ---- */
.ds-btn{
  padding:10px 20px; border-radius:999px; border:none; cursor:pointer;
  font-family:'Exo 2', sans-serif; font-weight:800; font-size:12.5px;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  gap:6px; transition: transform .12s ease, box-shadow .12s ease; color:#fff;
  box-shadow: 0 6px 16px -8px rgba(20,22,31,0.35);
}
.ds-btn:hover{ transform: translateY(-2px); }
.ds-btn:active{ transform: translateY(0); }
.ds-btn-blue    { background:linear-gradient(120deg,var(--blue-1),var(--blue-2)); }
.ds-btn-orange  { background:linear-gradient(120deg,var(--orange-1),var(--orange-2)); }
.ds-btn-green   { background:linear-gradient(120deg,var(--green-1),var(--green-2)); }
.ds-btn-red     { background:#fff; color:var(--red-1); border:1.5px solid #f6c3ce; box-shadow:none; }
.ds-btn-red:hover{ background:#fdedf0; }
.ds-btn-ghost   { background:#f1f2f6; color:var(--ink-soft); box-shadow:none; }
.ds-btn-ghost:hover{ background:#e6e8ef; }
.ds-btn-sm      { padding:6px 14px; font-size:11px; }
.ds-btn-uniform { width:92px; }
.ds-btn-block   { width:100%; }
.ds-btn-lg      { padding:15px 22px; font-size:15px; border-radius:16px; }

/* ---- badges ---- */
.ds-badge{
  display:inline-flex; padding:4px 12px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.3px;
}
.ds-badge-blue  { background:#e2f2fb; color:var(--blue-1); }
.ds-badge-green { background:#e3faec; color:#0b8f4c; }
.ds-badge-muted { background:#eef0f4; color:var(--ink-soft); }
.ds-badge-orange-solid { background:linear-gradient(120deg,var(--orange-1),var(--orange-2)); color:#fff; }

/* ---- forms ---- */
.ds-label{ font-size:11px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; display:block; }
.ds-input{
  width:100%; padding:11px 15px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:#f8f9fb;
  font-size:14px; font-family:'Exo 2', sans-serif; margin-bottom:14px;
  color:var(--ink); transition:border-color .12s ease, background .12s ease;
}
.ds-input:focus{ outline:none; border-color:var(--blue-1); background:#fff; box-shadow:0 0 0 4px rgba(0,116,196,0.12); }

.ds-edit-form{ display:none; margin-top:16px; padding-top:16px; border-top:1.5px dashed var(--line); }
.ds-edit-form.open{ display:block; }

/* ---- misc rows / lists ---- */
.ds-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px; }
.ds-row:last-child{ border-bottom:none; }
.ds-no-data{ text-align:center; color:var(--muted); font-weight:600; padding:18px; font-size:13px; }
.ds-placeholder{ font-size:12.5px; color:var(--muted); font-style:italic; padding:12px 14px; background:#f5f6f9; border-radius:var(--radius-sm); border:1px dashed var(--line); }

/* ---- action grid (Drop Shop landing choices) ---- */
.ds-action-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:28px; }
.ds-action-card{
  background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--line);
  box-shadow: var(--shadow-card); padding:16px 18px; text-decoration:none; color:inherit;
  transition: transform .12s ease, box-shadow .12s ease;
  border-top: 4px solid var(--line); /* overridden per-card by accent classes below */
}
.ds-action-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.ds-action-card.accent-blue   { border-top-color: var(--blue-1); }
.ds-action-card.accent-orange { border-top-color: var(--orange-1); }
.ds-action-card.accent-green  { border-top-color: var(--green-1); }
.ds-action-card.accent-violet { border-top-color: var(--violet-1); }
.ds-action-card.accent-red    { border-top-color: var(--red-1); }
.ds-action-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:10px; margin-left:auto; margin-right:auto; }
.ds-action-icon.i-blue{ background:#e2f2fb; }
.ds-action-icon.i-orange{ background:#fff1e2; }
.ds-action-icon.i-green{ background:#e3faec; }
.ds-action-icon.i-violet{ background:#f1ecff; }
.ds-action-icon.i-red{ background:#fdedf0; }
.ds-action-card.accent-teal   { border-top-color: #0288e7; }
.ds-action-icon.i-teal{ background:#e2f2fb; }
.ds-action-title{ font-family:'Rajdhani', sans-serif; font-size:16px; font-weight:900; color:var(--ink); margin-bottom:4px; text-align:center; }
.ds-action-desc{ font-size:12px; color:var(--ink-soft); font-weight:600; line-height:1.4; }

/* ---- search ---- */
.ds-search-row{ display:flex; gap:10px; }
.ds-search-row .ds-input{ margin-bottom:0; }
.ds-results{ display:flex; flex-direction:column; gap:8px; margin-top: 18px;}
.ds-result-row{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 16px; text-decoration:none; color:inherit; transition:border-color .12s ease, transform .12s ease;
}
.ds-result-row:hover{ border-color:var(--blue-1); transform: translateX(2px); }
.ds-result-name{ font-weight:800; font-size:14.5px; }
.ds-result-email{ font-size:12px; color:var(--muted); }

/* ---- POS: customer choice / banner / tabs ---- */
.ds-choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.ds-choice-btn{
  border-radius:var(--radius-md); border:1.5px solid var(--line); background:#f8f9fb;
  cursor:pointer; font-family:'Exo 2', sans-serif; font-weight:800; font-size:13px;
  text-align:center; text-decoration:none; color:var(--ink); padding:18px 12px; width:100%;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}
.ds-choice-btn:hover{ border-color:var(--blue-1); background:#fff; transform:translateY(-2px); }

.ds-banner{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:linear-gradient(120deg,#e2f2fb,#eafcff); border:1px solid #cdeaf7;
  border-radius:var(--radius-md); padding:13px 18px; margin-bottom:20px;
}

.ds-tabs{ display:flex; gap:8px; margin-bottom:20px; }
.ds-tab{
  flex:1; padding:13px; border-radius:var(--radius-md); border:1.5px solid var(--line);
  background:#f8f9fb; font-weight:800; font-size:13px; cursor:pointer; color:var(--ink-soft);
  transition:.12s ease;
}
.ds-tab.active{ border-color:var(--blue-1); background:#e2f2fb; color:var(--blue-1); }

.ds-cart-row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.ds-cart-row:last-child{ border-bottom:none; }
.ds-cart-name{ font-weight:800; }
.ds-cart-detail{ font-size:12px; color:var(--muted); }
.ds-totals-row{ display:flex; justify-content:space-between; padding:6px 0; font-size:14px; color:var(--ink-soft); font-weight:600; }
.ds-totals-row.grand{
  font-family:'Rajdhani', sans-serif; font-weight:900; font-size:20px; color:var(--blue-1);
  border-top:2px solid var(--line); margin-top:8px; padding-top:14px;
}

@media (max-width: 620px){
  .ds-page-title{ font-size:26px; }
  .ds-mega-body, .ds-card{ padding:18px; }
}