/* ============================================================================
   DEKOLE DESIGN SYSTEM  —  dekole-design-system.css
   One shared component layer for DekoGo, DekoShop, DekoDeals, DekoLocal &
   Marketplace.

   How it works
   ------------
   • Canonical tokens live under :root as --ds-*  (neutrals, radii, shadows,
     spacing, typography, status colours).
   • Brand identity is NOT baked into the components. Each platform keeps its
     own accent via a THEME SCOPE class that only re-points a handful of
     --ds-accent* tokens:
         .ds-theme-go     .ds-theme-shop   .ds-theme-deals
         .ds-theme-local  .ds-theme-market
   • Every component (.ds-card, .ds-badge, .ds-btn, .ds-chip, .ds-field,
     .ds-modal, .ds-table, and the card family) is written ONCE against
     --ds-* tokens, so wrapping it in a theme scope re-skins it with zero
     markup changes.

   Non-breaking: this file introduces new .ds-* class names only. It never
   overrides the existing --dg-*, --mkt-*, --dekole-*, --dkpg-* palettes, so
   current pages are untouched. Adopt component-by-component.
   ========================================================================== */

:root {
    /* ---- Brand accent (default = DekoGo blue; theme scopes override) ---- */
    --ds-accent:          #2563EB;
    --ds-accent-2:        #1D4ED8;
    --ds-accent-soft:     #EFF6FF;
    --ds-accent-contrast: #FFFFFF;

    /* ---- Neutrals / surfaces ---- */
    --ds-bg:        #F8FAFC;
    --ds-surface:   #FFFFFF;
    --ds-surface-2: #F1F5F9;
    --ds-text:      #0F172A;
    --ds-muted:     #64748B;
    --ds-faint:     #94A3B8;
    --ds-border:    #E2E8F0;
    --ds-border-2:  #CBD5E1;

    /* ---- Status ---- */
    --ds-success: #16A34A;
    --ds-warning: #F59E0B;
    --ds-danger:  #EF4444;
    --ds-info:    #0EA5E9;

    /* ---- Radii ---- */
    --ds-radius-sm:   8px;
    --ds-radius:      12px;
    --ds-radius-lg:   18px;
    --ds-radius-pill: 999px;

    /* ---- Shadows ---- */
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --ds-shadow:    0 6px 20px rgba(15, 23, 42, .08);
    --ds-shadow-lg: 0 18px 48px rgba(15, 23, 42, .16);

    /* ---- Spacing scale ---- */
    --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px;
    --ds-4: 16px; --ds-5: 24px; --ds-6: 32px;

    /* ---- Type ---- */
    --ds-font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ds-fs-xs: 11px; --ds-fs-sm: 13px; --ds-fs-md: 14.5px;
    --ds-fs-lg: 17px; --ds-fs-xl: 22px;
}

/* ---------------------------------------------------------------------------
   THEME SCOPES  —  wrap any block (or a whole platform layout) in one of these
   to re-brand every .ds-* component inside it.
   --------------------------------------------------------------------------- */
.ds-theme-go     { --ds-accent:#2563EB; --ds-accent-2:#1D4ED8; --ds-accent-soft:#EFF6FF; --ds-accent-contrast:#fff; }
.ds-theme-shop   { --ds-accent:#0EA5E9; --ds-accent-2:#2563EB; --ds-accent-soft:#E0F2FE; --ds-accent-contrast:#fff; }
.ds-theme-deals  { --ds-accent:#E11D48; --ds-accent-2:#BE123C; --ds-accent-soft:#FFE4E6; --ds-accent-contrast:#fff; }
.ds-theme-local  { --ds-accent:#16A34A; --ds-accent-2:#15803D; --ds-accent-soft:#DCFCE7; --ds-accent-contrast:#fff; }
.ds-theme-market { --ds-accent:#F59F00; --ds-accent-2:#E94E1B; --ds-accent-soft:#FEF3C7; --ds-accent-contrast:#1F2937; }

/* Dark-mode friendliness for surfaces (opt-in via [data-ds-dark] or media). */
@media (prefers-color-scheme: dark) {
    .ds-auto-dark {
        --ds-bg:#0B1220; --ds-surface:#111827; --ds-surface-2:#0F172A;
        --ds-text:#F8FAFC; --ds-muted:#94A3B8; --ds-faint:#64748B;
        --ds-border:#1E293B; --ds-border-2:#334155;
    }
}

/* ===========================================================================
   1. BUTTONS  —  .ds-btn  (+ variants / sizes)
   =========================================================================== */
.ds-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--ds-font); font-size:var(--ds-fs-md); font-weight:600;
    line-height:1; padding:11px 20px; border-radius:var(--ds-radius-pill);
    border:1.5px solid transparent; cursor:pointer; text-decoration:none;
    transition:transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
}
.ds-btn:hover      { text-decoration:none; transform:translateY(-1px); }
.ds-btn:active     { transform:translateY(0); }
.ds-btn:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }
.ds-btn[disabled], .ds-btn.is-disabled { opacity:.55; pointer-events:none; }

.ds-btn-primary { background:var(--ds-accent); color:var(--ds-accent-contrast); box-shadow:var(--ds-shadow-sm); }
.ds-btn-primary:hover { background:var(--ds-accent-2); color:var(--ds-accent-contrast); box-shadow:var(--ds-shadow); }
.ds-btn-outline { background:transparent; color:var(--ds-accent); border-color:var(--ds-border-2); }
.ds-btn-outline:hover { border-color:var(--ds-accent); background:var(--ds-accent-soft); color:var(--ds-accent-2); }
.ds-btn-ghost   { background:var(--ds-surface-2); color:var(--ds-text); }
.ds-btn-ghost:hover { background:var(--ds-border); color:var(--ds-text); }
.ds-btn-danger  { background:var(--ds-danger); color:#fff; }
.ds-btn-danger:hover { background:#DC2626; color:#fff; }

.ds-btn-sm { padding:7px 14px; font-size:var(--ds-fs-sm); }
.ds-btn-lg { padding:14px 26px; font-size:var(--ds-fs-lg); }
.ds-btn-block { width:100%; }

/* ===========================================================================
   2. BADGES  —  .ds-badge  (status / tone variants)
   =========================================================================== */
.ds-badge {
    display:inline-flex; align-items:center; gap:5px;
    font-family:var(--ds-font); font-size:var(--ds-fs-xs); font-weight:700;
    letter-spacing:.02em; line-height:1; padding:4px 10px;
    border-radius:var(--ds-radius-pill); border:1px solid transparent;
    text-transform:uppercase;
}
.ds-badge i { font-size:.9em; }
.ds-badge-accent  { background:var(--ds-accent-soft); color:var(--ds-accent-2); border-color:transparent; }
.ds-badge-neutral { background:var(--ds-surface-2); color:var(--ds-muted); }
.ds-badge-success { background:#DCFCE7; color:#15803D; }
.ds-badge-warning { background:#FEF3C7; color:#B45309; }
.ds-badge-danger  { background:#FEE2E2; color:#B91C1C; }
.ds-badge-info    { background:#E0F2FE; color:#0369A1; }
.ds-badge-solid   { background:var(--ds-accent); color:var(--ds-accent-contrast); }
/* Verified tick — used by organizer / review / event cards */
.ds-verified { color:var(--ds-info); }

/* ===========================================================================
   3. FILTER CHIP  —  .ds-chip
   =========================================================================== */
.ds-chip {
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--ds-font); font-size:var(--ds-fs-sm); font-weight:600;
    line-height:1; padding:8px 14px; border-radius:var(--ds-radius-pill);
    background:var(--ds-surface); color:var(--ds-text);
    border:1.5px solid var(--ds-border); cursor:pointer;
    transition:all .15s ease; user-select:none;
}
.ds-chip:hover { border-color:var(--ds-accent); color:var(--ds-accent-2); }
.ds-chip.is-active,
.ds-chip[aria-pressed="true"] {
    background:var(--ds-accent); color:var(--ds-accent-contrast);
    border-color:var(--ds-accent);
}
.ds-chip .ds-chip-x { font-size:11px; opacity:.7; }
.ds-chip .ds-chip-x:hover { opacity:1; }
.ds-chip-group { display:flex; flex-wrap:wrap; gap:8px; }

/* ===========================================================================
   4. FORM FIELDS  —  .ds-field
   =========================================================================== */
.ds-field { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--ds-4); }
.ds-field-label {
    font-family:var(--ds-font); font-size:var(--ds-fs-sm); font-weight:600;
    color:var(--ds-text);
}
.ds-field-label .ds-req { color:var(--ds-danger); margin-left:2px; }
.ds-field-control {
    font-family:var(--ds-font); font-size:var(--ds-fs-md); color:var(--ds-text);
    background:var(--ds-surface); border:1.5px solid var(--ds-border);
    border-radius:var(--ds-radius-sm); padding:11px 14px; width:100%;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.ds-field-control::placeholder { color:var(--ds-faint); }
.ds-field-control:focus {
    outline:none; border-color:var(--ds-accent);
    box-shadow:0 0 0 3px var(--ds-accent-soft);
}
textarea.ds-field-control { min-height:110px; resize:vertical; }
select.ds-field-control { appearance:none; background-image:
    linear-gradient(45deg,transparent 50%,var(--ds-muted) 50%),
    linear-gradient(135deg,var(--ds-muted) 50%,transparent 50%);
    background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px; }
.ds-field-hint { font-size:var(--ds-fs-xs); color:var(--ds-muted); }
.ds-field.is-invalid .ds-field-control { border-color:var(--ds-danger); }
.ds-field.is-invalid .ds-field-error { font-size:var(--ds-fs-xs); color:var(--ds-danger); }
.ds-field-inline { display:inline-flex; align-items:center; gap:8px; flex-direction:row; }

/* ===========================================================================
   5. MODAL  —  .ds-modal
   =========================================================================== */
.ds-modal { position:fixed; inset:0; z-index:1200; display:none; }
.ds-modal.is-open { display:block; }
.ds-modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.ds-modal-dialog {
    position:relative; z-index:1; margin:6vh auto; width:min(560px, 92vw);
    background:var(--ds-surface); border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-lg); overflow:hidden;
    animation:ds-modal-in .2s ease;
}
@keyframes ds-modal-in { from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }
.ds-modal-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 22px; border-bottom:1px solid var(--ds-border);
}
.ds-modal-title { font-family:var(--ds-font); font-size:var(--ds-fs-lg); font-weight:700; color:var(--ds-text); margin:0; }
.ds-modal-close {
    border:none; background:var(--ds-surface-2); color:var(--ds-muted);
    width:34px; height:34px; border-radius:var(--ds-radius-pill); cursor:pointer;
    font-size:16px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.ds-modal-close:hover { background:var(--ds-border); color:var(--ds-text); }
.ds-modal-body { padding:22px; max-height:64vh; overflow:auto; color:var(--ds-text); }
.ds-modal-foot {
    display:flex; align-items:center; justify-content:flex-end; gap:10px;
    padding:16px 22px; border-top:1px solid var(--ds-border); background:var(--ds-surface-2);
}

/* ===========================================================================
   6. DASHBOARD TABLE  —  .ds-table
   =========================================================================== */
.ds-table-wrap { width:100%; overflow-x:auto; border:1px solid var(--ds-border);
    border-radius:var(--ds-radius); background:var(--ds-surface); }
.ds-table { width:100%; border-collapse:collapse; font-family:var(--ds-font); font-size:var(--ds-fs-md); }
.ds-table thead th {
    text-align:left; font-size:var(--ds-fs-xs); font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:var(--ds-muted); background:var(--ds-surface-2);
    padding:12px 16px; border-bottom:1px solid var(--ds-border); white-space:nowrap;
}
.ds-table tbody td { padding:14px 16px; border-bottom:1px solid var(--ds-border); color:var(--ds-text); vertical-align:middle; }
.ds-table tbody tr:last-child td { border-bottom:none; }
.ds-table tbody tr:hover { background:var(--ds-accent-soft); }
.ds-table .ds-table-actions { display:flex; gap:8px; }
.ds-table-empty { text-align:center; color:var(--ds-muted); padding:36px 16px; }

/* ===========================================================================
   7. CARD BASE  —  .ds-card  (all card variants extend this)
   =========================================================================== */
.ds-card {
    display:flex; flex-direction:column; background:var(--ds-surface);
    border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg);
    box-shadow:var(--ds-shadow-sm); overflow:hidden;
    transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease;
    font-family:var(--ds-font); position:relative; height:100%;
}
.ds-card:hover { transform:translateY(-3px); box-shadow:var(--ds-shadow); border-color:var(--ds-border-2); }
.ds-card-media { position:relative; aspect-ratio:16/10; background:var(--ds-surface-2); overflow:hidden; }
.ds-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.ds-card:hover .ds-card-media img { transform:scale(1.04); }
.ds-card-badges { position:absolute; top:10px; left:10px; display:flex; flex-wrap:wrap; gap:6px; z-index:2; }
.ds-card-fav {
    position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px;
    border-radius:var(--ds-radius-pill); background:rgba(255,255,255,.92);
    border:none; color:var(--ds-danger); cursor:pointer; display:inline-flex;
    align-items:center; justify-content:center; box-shadow:var(--ds-shadow-sm);
}
.ds-card-fav:hover { background:#fff; }
.ds-card-body { display:flex; flex-direction:column; gap:8px; padding:16px; flex:1; }
.ds-card-title { font-size:var(--ds-fs-lg); font-weight:700; color:var(--ds-text); margin:0; line-height:1.3; }
.ds-card-title a { color:inherit; text-decoration:none; }
.ds-card-title a:hover { color:var(--ds-accent-2); }
.ds-card-sub { font-size:var(--ds-fs-sm); color:var(--ds-muted); margin:0; }
.ds-card-meta { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--ds-fs-sm); color:var(--ds-muted); }
.ds-card-meta span { display:inline-flex; align-items:center; gap:5px; }
.ds-card-meta i { color:var(--ds-accent); }
.ds-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px; }
.ds-card-price { font-size:var(--ds-fs-lg); font-weight:800; color:var(--ds-text); }
.ds-card-price.is-free { color:var(--ds-success); }
.ds-card-btns { display:flex; gap:8px; }
.ds-card-btns .ds-btn { flex:1; }
.ds-card-rate { display:inline-flex; align-items:center; gap:4px; font-size:var(--ds-fs-sm); font-weight:600; color:var(--ds-text); }
.ds-card-rate i { color:#F59E0B; }

/* Responsive grid any platform can reuse */
.ds-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.ds-rail { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; }
.ds-rail > * { flex:0 0 clamp(240px, 78%, 300px); scroll-snap-align:start; }

/* ---- 7a. Organizer / seller card (avatar-led) ---- */
.ds-card-org .ds-card-body { align-items:center; text-align:center; padding-top:0; }
.ds-org-ava { width:76px; height:76px; border-radius:var(--ds-radius-pill); object-fit:cover;
    border:3px solid var(--ds-surface); box-shadow:var(--ds-shadow-sm); margin-top:-38px; background:var(--ds-surface-2); }
.ds-org-cover { height:70px; background:linear-gradient(120deg,var(--ds-accent),var(--ds-accent-2)); }

/* ---- 7b. Ticket card (stub with perforation) ---- */
.ds-ticket { flex-direction:row; align-items:stretch; }
.ds-ticket-main { flex:1; padding:16px; display:flex; flex-direction:column; gap:6px; }
.ds-ticket-stub {
    width:96px; border-left:2px dashed var(--ds-border-2); padding:16px 12px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    background:var(--ds-surface-2); text-align:center; position:relative;
}
.ds-ticket-stub::before, .ds-ticket-stub::after {
    content:""; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%;
    background:var(--ds-bg); border:1px solid var(--ds-border);
}
.ds-ticket-stub::before { top:-9px; } .ds-ticket-stub::after { bottom:-9px; }
.ds-ticket-qr { width:60px; height:60px; }
.ds-ticket-code { font-size:var(--ds-fs-xs); font-weight:700; letter-spacing:.08em; color:var(--ds-muted); }

/* ---- 7c. Certificate card ---- */
.ds-cert { border:1px solid var(--ds-border); }
.ds-cert-head { display:flex; align-items:center; gap:12px; padding:16px; background:linear-gradient(120deg,var(--ds-accent-soft),transparent); }
.ds-cert-seal { width:46px; height:46px; border-radius:var(--ds-radius-pill); background:var(--ds-accent);
    color:var(--ds-accent-contrast); display:inline-flex; align-items:center; justify-content:center; font-size:20px; }

/* ---- 7d. Review card ---- */
.ds-review { padding:18px; gap:10px; }
.ds-review-top { display:flex; align-items:flex-start; gap:12px; }
.ds-review-ava { width:44px; height:44px; border-radius:var(--ds-radius-pill); background:var(--ds-accent);
    color:var(--ds-accent-contrast); display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex:none; }
.ds-review-who { flex:1; }
.ds-review-who strong { display:flex; align-items:center; gap:6px; color:var(--ds-text); font-size:var(--ds-fs-md); }
.ds-review-stars i { color:#F59E0B; font-size:13px; }
.ds-review-date { font-size:var(--ds-fs-xs); color:var(--ds-faint); }
.ds-review-photos { display:flex; flex-wrap:wrap; gap:8px; }
.ds-review-photo { width:72px; height:72px; border-radius:var(--ds-radius-sm); overflow:hidden; border:1px solid var(--ds-border); }
.ds-review-photo img { width:100%; height:100%; object-fit:cover; }
.ds-review-reply { margin-top:4px; padding:10px 14px; background:var(--ds-surface-2);
    border-left:3px solid var(--ds-accent); border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0; }
.ds-review-reply-head { font-size:var(--ds-fs-xs); font-weight:700; color:var(--ds-accent-2); margin-bottom:3px; }

/* Utilities so platforms can compose quickly */
.ds-stack { display:flex; flex-direction:column; }
.ds-row   { display:flex; align-items:center; }
.ds-gap-1{gap:4px}.ds-gap-2{gap:8px}.ds-gap-3{gap:12px}.ds-gap-4{gap:16px}
.ds-mt-2{margin-top:8px}.ds-mt-4{margin-top:16px}
.ds-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }