/* Lumina Swap & Video Portal (LSVP) UI
   - Inherit mode (default): typography & form controls inherit from the active theme (Blocksy-friendly)
   - Isolated mode: plugin applies its own UI skin
*/

#lsvp-app{
  --lsvp-accent: var(--theme-palette-color-1, #7a1f5c);
  --lsvp-card-bg: var(--theme-palette-color-8, #ffffff);
  --lsvp-card-border: var(--theme-border-color, rgba(0,0,0,.10));
  --lsvp-radius: var(--theme-border-radius, 16px);
  --lsvp-shadow: var(--theme-box-shadow, 0 6px 22px rgba(0,0,0,.05));
  --lsvp-gap: 14px;

  max-width: 1100px;
  margin: 20px auto;
  padding: 0 12px;
}

#lsvp-app .lsvp-topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;}
#lsvp-app .lsvp-brand{display:flex;gap:10px;align-items:center;}
#lsvp-app .lsvp-logo{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;}
#lsvp-app .lsvp-title{font-weight:700;font-size:16px;}
#lsvp-app .lsvp-sub{font-size:12px;opacity:.75;margin-top:2px;}
#lsvp-app .lsvp-wallet{display:flex;gap:10px;align-items:center;padding:10px 12px;}
#lsvp-app .lsvp-wallet-label{font-size:12px;opacity:.75;}
#lsvp-app .lsvp-wallet-value{font-weight:700;min-width:48px;text-align:right;}

#lsvp-app .lsvp-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--lsvp-gap);}
@media(max-width:900px){#lsvp-app .lsvp-grid{grid-template-columns:1fr;}}
#lsvp-app .lsvp-side{position:sticky;top:12px;height:fit-content;}

#lsvp-app .lsvp-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
#lsvp-app .lsvp-tab{cursor:pointer;font-weight:700;font-size:13px;border-radius:999px;padding:8px 12px;}
#lsvp-app .lsvp-tabpanel{display:none;}
#lsvp-app .lsvp-tabpanel.is-active{display:block;}

#lsvp-app .lsvp-form label{display:block;font-size:13px;margin:10px 0 6px;font-weight:700;}
#lsvp-app .lsvp-form input[type="file"],
#lsvp-app .lsvp-form input[type="number"],
#lsvp-app .lsvp-form textarea,
#lsvp-app .lsvp-input,
#lsvp-app .lsvp-select{width:100%;}
#lsvp-app .lsvp-form textarea{resize:vertical;}
#lsvp-app .lsvp-row{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap;}
#lsvp-app .lsvp-check{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:700;}

#lsvp-app .lsvp-muted{opacity:.75;font-size:13px;margin-top:0;}
#lsvp-app .lsvp-status{margin-top:10px;font-size:13px;white-space:pre-wrap;}
#lsvp-app .lsvp-result{margin-top:10px;}
#lsvp-app .lsvp-result img,
#lsvp-app .lsvp-result video{max-width:100%;border-radius:calc(var(--lsvp-radius) - 2px);}

#lsvp-app .lsvp-preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px;}
@media(max-width:600px){#lsvp-app .lsvp-preset-grid{grid-template-columns:1fr;}}
#lsvp-app .lsvp-jobs{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
#lsvp-app .lsvp-job-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}

#lsvp-app .lsvp-subtabs{display:flex;gap:8px;margin:10px 0 6px;flex-wrap:wrap;}
#lsvp-app .lsvp-subpanel{display:none;}
#lsvp-app .lsvp-subpanel.is-active{display:block;}

#lsvp-app .lsvp-portrait-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px;}
@media(max-width:900px){#lsvp-app .lsvp-portrait-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){#lsvp-app .lsvp-portrait-grid{grid-template-columns:repeat(2,1fr);}}
#lsvp-app .lsvp-portrait-item{overflow:hidden;cursor:pointer;position:relative;}
#lsvp-app .lsvp-portrait-item img{display:block;width:100%;height:120px;object-fit:cover;}
#lsvp-app .lsvp-portrait-badge{position:absolute;bottom:8px;left:8px;padding:4px 7px;border-radius:999px;font-size:11px;font-weight:800;}

/* Pricing table */
#lsvp-app .lsvp-h3{font-weight:900;font-size:16px;margin:0 0 6px;}
#lsvp-app .lsvp-pricing-table table{width:100%;border-collapse:collapse;margin-top:10px;}
#lsvp-app .lsvp-pricing-table th,
#lsvp-app .lsvp-pricing-table td{padding:10px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;font-size:13px;}
#lsvp-app .lsvp-pricing-table th{font-weight:900;}

/* Video engine selector */
#lsvp-app .lsvp-engine-grid{display:grid;grid-template-columns: repeat(4, minmax(0,1fr));gap:10px;margin-top:10px;}
@media (max-width: 900px){#lsvp-app .lsvp-engine-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }}
@media (max-width: 520px){#lsvp-app .lsvp-engine-grid{ grid-template-columns: 1fr; }}

#lsvp-app .lsvp-engine-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;}
#lsvp-app .lsvp-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;opacity:.9;white-space:nowrap;}

/* Requirements accordion structure */
#lsvp-app .lsvp-accordion{margin:12px 0 16px;overflow:hidden;}
#lsvp-app .lsvp-acc-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:transparent;border:0;cursor:pointer;text-align:left;}
#lsvp-app .lsvp-acc-title{font-weight:800;font-size:14px;}
#lsvp-app .lsvp-acc-icon{width:28px;height:28px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;}
#lsvp-app .lsvp-acc-panel{padding:0 14px 12px;}
#lsvp-app .lsvp-acc-list{margin:0;padding:0 0 0 18px;font-size:13px;line-height:1.45;}
#lsvp-app .lsvp-acc-list li{margin:6px 0;}

/* ------------------------------
   Theme inherit mode
--------------------------------*/
#lsvp-app.lsvp-ui-inherit{
  font-family: inherit;
  color: inherit;
}

#lsvp-app.lsvp-ui-inherit .lsvp-logo{
  background: var(--lsvp-accent);
  color: #fff;
}

#lsvp-app.lsvp-ui-inherit .lsvp-card,
#lsvp-app.lsvp-ui-inherit .lsvp-wallet,
#lsvp-app.lsvp-ui-inherit .lsvp-accordion,
#lsvp-app.lsvp-ui-inherit .lsvp-job,
#lsvp-app.lsvp-ui-inherit .lsvp-portrait-item,
#lsvp-app.lsvp-ui-inherit .lsvp-preset{
  background: var(--lsvp-card-bg);
  border: 1px solid var(--lsvp-card-border);
  border-radius: var(--lsvp-radius);
}

#lsvp-app.lsvp-ui-inherit .lsvp-card{
  padding: 14px;
  box-shadow: var(--lsvp-shadow);
}

#lsvp-app.lsvp-ui-inherit .lsvp-wallet{
  box-shadow: var(--lsvp-shadow);
  padding: 10px 12px;
}

#lsvp-app.lsvp-ui-inherit .lsvp-tab{
  border: 1px solid var(--lsvp-card-border);
  background: rgba(0,0,0,.03);
}

#lsvp-app.lsvp-ui-inherit .lsvp-tab.is-active{
  background: var(--lsvp-accent);
  border-color: var(--lsvp-accent);
  color: #fff;
}

#lsvp-app.lsvp-ui-inherit .lsvp-preset{
  padding: 10px 12px;
  text-align: left;
  font-weight: 800;
  font-size: 13px;
}

#lsvp-app.lsvp-ui-inherit .lsvp-preset.is-active{
  border-color: var(--lsvp-accent);
  box-shadow: 0 0 0 1px var(--lsvp-accent) inset;
}

#lsvp-app.lsvp-ui-inherit .lsvp-job{
  padding: 10px;
}

#lsvp-app.lsvp-ui-inherit .lsvp-pill,
#lsvp-app.lsvp-ui-inherit .lsvp-badge,
#lsvp-app.lsvp-ui-inherit .lsvp-portrait-badge{
  border: 1px solid var(--lsvp-card-border);
  background: rgba(255,255,255,.85);
}

#lsvp-app.lsvp-ui-inherit .lsvp-portrait-badge{
  background: var(--lsvp-accent);
  color: #fff;
  border-color: transparent;
}

#lsvp-app.lsvp-ui-inherit .lsvp-acc-icon{
  background: rgba(0,0,0,.06);
}

#lsvp-app.lsvp-ui-inherit .lsvp-result img,
#lsvp-app.lsvp-ui-inherit .lsvp-result video{
  border: 1px solid var(--lsvp-card-border);
}

/* ------------------------------
   Isolated mode (legacy UI)
--------------------------------*/
#lsvp-app.lsvp-ui-isolated{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;}

#lsvp-app.lsvp-ui-isolated .lsvp-logo{background:#111;color:#fff;}
#lsvp-app.lsvp-ui-isolated .lsvp-wallet{background:#fff;border:1px solid #e6e6e6;border-radius:16px;box-shadow:0 4px 18px rgba(0,0,0,.04);}
#lsvp-app.lsvp-ui-isolated .lsvp-card{background:#fff;border:1px solid #e6e6e6;border-radius:18px;padding:14px;box-shadow:0 6px 22px rgba(0,0,0,.05);}
#lsvp-app.lsvp-ui-isolated .lsvp-tab{border:1px solid #e6e6e6;background:#f7f7f7;}
#lsvp-app.lsvp-ui-isolated .lsvp-tab.is-active{background:#111;color:#fff;border-color:#111;}
#lsvp-app.lsvp-ui-isolated .lsvp-form input[type="file"],
#lsvp-app.lsvp-ui-isolated .lsvp-form input[type="number"],
#lsvp-app.lsvp-ui-isolated .lsvp-form textarea,
#lsvp-app.lsvp-ui-isolated .lsvp-input,
#lsvp-app.lsvp-ui-isolated .lsvp-select{padding:10px;border-radius:12px;border:1px solid #e6e6e6;background:#fff;}

#lsvp-app.lsvp-ui-isolated .lsvp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid #111;background:#111;color:#fff;font-weight:800;cursor:pointer;margin-top:12px;text-decoration:none;}
#lsvp-app.lsvp-ui-isolated .lsvp-btn:hover{opacity:.92;}
#lsvp-app.lsvp-ui-isolated .lsvp-btn:disabled{opacity:.55;cursor:not-allowed;}
#lsvp-app.lsvp-ui-isolated .lsvp-btn-ghost{background:#fff;color:#111;border-color:#e6e6e6;}

#lsvp-app.lsvp-ui-isolated .lsvp-result img,
#lsvp-app.lsvp-ui-isolated .lsvp-result video{border:1px solid #e6e6e6;}

#lsvp-app.lsvp-ui-isolated .lsvp-preset{border:1px solid #e6e6e6;background:#fff;border-radius:14px;padding:10px 12px;cursor:pointer;font-weight:800;font-size:13px;text-align:left;}
#lsvp-app.lsvp-ui-isolated .lsvp-preset.is-active{border-color:#111;}

#lsvp-app.lsvp-ui-isolated .lsvp-job{border:1px solid #e6e6e6;border-radius:14px;padding:10px;background:#fafafa;}

#lsvp-app.lsvp-ui-isolated .lsvp-pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid #e6e6e6;background:#fff;font-size:12px;font-weight:800;}
#lsvp-app.lsvp-ui-isolated .lsvp-badge{border:1px solid #e6e6e6;}

#lsvp-app.lsvp-ui-isolated .lsvp-portrait-item{border:1px solid #e6e6e6;border-radius:14px;background:#fff;}
#lsvp-app.lsvp-ui-isolated .lsvp-portrait-item.is-selected{border-color:#111;box-shadow:0 0 0 1px #111 inset;}
#lsvp-app.lsvp-ui-isolated .lsvp-portrait-badge{background:rgba(17,17,17,.85);color:#fff;border:0;}

#lsvp-app.lsvp-ui-isolated .lsvp-accordion{background:#fff;border:1px solid #e6e6e6;border-radius:18px;box-shadow:0 6px 22px rgba(0,0,0,.05);}
#lsvp-app.lsvp-ui-isolated .lsvp-acc-toggle:hover{background:rgba(0,0,0,.03);}
#lsvp-app.lsvp-ui-isolated .lsvp-acc-icon{background:#f3f3f3;}