/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ========== Root & Base ========== */
:root{
  --card-width:150px;
  --card-height:225px;
  --title-size:16px;
  --question-size:12px;
}

.lvvd{
  font-family: Arial, sans-serif;
  padding:20px;
  box-sizing:border-box;
}

.lvvd .app-title{
  text-align:center;
  font-size:24px;
  margin-bottom:20px;
}

/* ========== Toolbar (mobile-first) ========== */
/* Container */
.lvvd .toolbar{
  display:flex;
  flex-direction:column;       /* stacked by default */
  gap:6px;
  padding:6px;
  background:#f9f9f9;
  border:1px solid #ccc;
  border-radius:4px;
  margin-bottom:20px;
  overflow-x:hidden;
}

/* Each row is ALWAYS a panel */
.lvvd .toolbar-row{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  background: var(--lvvd-bg-panel);
  border: 1px solid var(--lvvd-border);
  border-radius: 6px;
  padding:6px 8px;
}

/* Controls */
.lvvd .toolbar select{
  width:auto;
  min-width:120px;
  max-width:220px;
  padding: 2px 4px;
  font-size: 14px; 
  height: 30px;
}

.lvvd .toolbar button{
  min-width:25px;
  height:30px;
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  cursor:pointer;
}

/* Make all toolbar selects the same text size */
.lvvd .toolbar select,
.lvvd .toolbar select option,
.lvvd .toolbar select optgroup {
  font-size:14px;           /* match your baseline */
  line-height:1.2;
}

/* Replace your existing .lvvd button:disabled rule with this */
.lvvd button:disabled {
  background-color: #a8c7c7;   /* soft desaturated teal/gray */
  color: #444;                 /* darker text/icon color for legibility */
  opacity: 1;                  /* don’t fade entire element */
  cursor: not-allowed;
}

/* Branded buttons */
.lvvd .toolbar button,
.lvvd dialog button{
  background: var(--lvvd-accent);
  color: var(--lvvd-btn-fg);
  border: 1px solid var(--lvvd-accent);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease;
}
.lvvd .toolbar button:hover:not(:disabled),
.lvvd dialog button:hover:not(:disabled){
  background: var(--lvvd-accent-hover);
  border-color: var(--lvvd-accent-hover);
  color: var(--lvvd-btn-fg-hover);
}
.lvvd .toolbar button:active:not(:disabled),
.lvvd dialog button:active:not(:disabled){
  transform: translateY(1px);
}
.lvvd .toolbar button:focus-visible,
.lvvd dialog button:focus-visible{
  outline: 2px solid var(--lvvd-accent-hover);
  box-shadow: 0 0 0 3px var(--lvvd-focus-ring);
}

/* icons - control size */
#saveSet, #deleteSet, #resetOrder, #clearSelection, #increaseSize, #decreaseSize, #resetSize {
  width:28px;
  height:28px;
  min-width:28px;
  font-size:16px;
  line-height:1;
  padding:0;
  text-align:center;
  background:none;
  border:none;
  cursor:pointer;
}

/* Selects & inputs */
.lvvd select,
.lvvd input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--lvvd-border);
  border-radius: 6px;
  background-color: #fff;   /* use background-color, not shorthand */
}

/* Links inside dialogs (if any) */
.lvvd dialog a{
  color: var(--lvvd-accent);
}
.lvvd dialog a:hover{
  color: var(--lvvd-accent-hover);
}

/* Set description bar */
.lvvd .set-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 16px 20px;
  margin: 12px auto 36px;
  background: #fff;
  border: 1px solid var(--lvvd-border, #ddd);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);

  max-width: 900px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lvvd .set-desc strong.set-desc__title {
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 1.05rem;
  color: #111;
}

.lvvd .set-desc .set-desc__body {
  max-width: 700px;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .lvvd .set-desc {
    margin: 8px 10px 24px;
    padding: 12px 14px;
  }
}


/* Tablet: compact panels, allow wrap (up to two rows) */
@media (min-width:720px) and (max-width:1023.98px){
  .lvvd .toolbar{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }
  .lvvd .toolbar-row{
    flex:0 0 auto;
    gap:10px;
	flex-wrap: nowrap;
  }
  .lvvd .toolbar select{
    width:auto;
    min-width:120px;
    max-width:240px;
  }
}

/* Laptop & small desktop: allow 2nd row earlier (1024–1359px) */
@media (min-width:1024px) and (max-width:1359.98px){
  .lvvd .toolbar{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 8px;
    padding:6px;
	overflow: visible; 
  }
  .lvvd .toolbar-row{
    flex:0 1 auto;                /* allow slight shrink if needed */
    gap:8px;
	flex-wrap: nowrap; 
  }
  .lvvd .toolbar select{
    width:auto;
    min-width:120px;              /* tighten to avoid wrapping */
    max-width:240px;
  }
  .lvvd .toolbar-row label{
    display:inline-flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
  }
}

/* Wide desktop: force a single row (≥1360px) */
@media (min-width:1360px){
  .lvvd .toolbar{
    flex-direction: row;
    flex-wrap: nowrap;          /* one row only at wide widths */
    justify-content: center;
    gap: 10px;
    padding: 10px;
    overflow: visible;
  }
  .lvvd .toolbar-row{
    flex: 0 1 auto;             /* natural width for each panel */
    gap: 10px;
    flex-wrap: nowrap;
  }
  .lvvd .toolbar select{
    width: auto;
    min-width: 120px;
    max-width: 240px;
  }
}

/* ========== Cards ========== */
.lvvd #cardsContainer{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;        /* center on wide screens */
  margin:0 auto;                 /* play nice with theme padding */
}

/* Two-up on small screens, centered */
@media (max-width:740px){
  .lvvd #cardsContainer{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    justify-content:center;      /* centers the grid track if narrower */
    align-content:start;
    width:100%;
    margin:0 auto;
  }
  .lvvd .card{
    width:100%;                  /* fill grid cell; avoids left-lean */
    height:calc(var(--card-height) - 20px);
    margin:0;
  }
}

.lvvd .card{
  position:relative;
  width:var(--card-width);
  height:var(--card-height);
  border-radius:8px;
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:10px;
  box-sizing:border-box;
  user-select:none;
  cursor:grab;
  transition:filter .2s, box-shadow .2s;
  /* semi-transparent gradient over the category colour */
  /* these two lines create the gradient overlay */
  background-image: linear-gradient(225deg, rgba(255,255,255,0.20), rgba(0,0,0,0.25));
  background-blend-mode: overlay;
}
.lvvd .card:active{ cursor:grabbing; }

/* Dim all cards slightly while dragging */
.lvvd #cardsContainer.dragging .card {
  filter: brightness(50%);
  transition: filter 0.15s ease;
}

/* Highlight the current drop target */
.lvvd .card.dz-over {
  filter: brightness(100%) !important;
  box-shadow: 0 0 10px yellow !important;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
}

/* Optional: show potential drop areas when active */
.lvvd .card.dz-active {
  outline: 2px dashed var(--lvvd-accent-soft);
  outline-offset: 2px;
}


/* Inner white frame */
.lvvd .card::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid #fff;
  border-radius: 5px;
  pointer-events: none;
}

/* Selection ring without layout shift + stronger glow */
.lvvd .card.selected {
  border: none !important;
  box-shadow:
    0 0 0 3px var(--ring-color, rgba(17,17,17,0.95)),
    0 0 18px rgba(0,0,0,0.60),
    0 0 36px rgba(0,0,0,0.35);
}

.lvvd .card-title{
  font-weight:bold;
  font-size:var(--title-size);
  text-align:center;
  margin:10px 0 8px;
}

.lvvd .card-question{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--question-size);
  font-family:'Poppins', sans-serif;
  line-height:1.3;
  text-align:center;
  padding:0 5px;
}

.lvvd .tick{
  position:absolute;
  top:8px; right:8px;
  background:rgba(0,0,0,.5);
  border-radius:50%;
  width:20px; height:20px;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.lvvd .card.selected .tick{ display:flex; }

.lvvd .info-icon,
.lvvd .predef-icon{
  position:absolute;
  bottom:8px;
  background:rgba(0,0,0,0.5);
  border-radius:50%;
  width:20px; height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:default;
}
.lvvd .info-icon{ right:8px; }
.lvvd .predef-icon{ left:8px; }

.lvvd #cardsContainer.dragging .card{ filter:brightness(50%); }
.lvvd .card.drag-target{
  filter:brightness(100%) !important;
  box-shadow:0 0 10px yellow !important;
}


/* ========== Dialogs ========== */
.lvvd dialog{
  border:none;
  border-radius:8px;
  padding:20px;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
  background: #fff;
}
.lvvd dialog label{
  display:block;
  margin-bottom:10px;
  font-size:14px;
}
.lvvd dialog input{
  width:100%;
  padding:5px;
  box-sizing:border-box;
  margin-bottom:10px;
}
.lvvd dialog menu{ text-align:right; }
.lvvd dialog button{ margin-left:5px; }

/* Desktop: show grab cursor */
@media (pointer: fine) {
  .lvvd .card { cursor: grab !important; }
  .lvvd .card:active { cursor: grabbing !important; }
}

/* Mobile/tablet: no drag, allow normal scroll/tap */
@media (pointer: coarse) {
  .lvvd .card { cursor: default !important; touch-action: auto; }
}

/* ================================
   Hard-scope all button states in .lvvd
   ================================ */

/* Base reset (beats UA + theme) */
.lvvd .toolbar .toolbar-row button,
.lvvd dialog menu button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: var(--lvvd-accent) !important;
  color: var(--lvvd-btn-fg) !important;
  border: 1px solid var(--lvvd-accent) !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .05s ease;
  outline: none !important; /* we’ll draw our own below */
}

/* Hover / focus / active (enabled only) */
.lvvd .toolbar .toolbar-row button:not([disabled]):hover,
.lvvd .toolbar .toolbar-row button:not([disabled]):focus,
.lvvd .toolbar .toolbar-row button:not([disabled]):focus-visible,
.lvvd .toolbar .toolbar-row button:not([disabled]):active,
.lvvd dialog menu button:not([disabled]):hover,
.lvvd dialog menu button:not([disabled]):focus,
.lvvd dialog menu button:not([disabled]):focus-visible,
.lvvd dialog menu button:not([disabled]):active {
  background: var(--lvvd-accent-hover) !important;
  border-color: var(--lvvd-accent-hover) !important;
  color: var(--lvvd-btn-fg-hover) !important;
  box-shadow: 0 0 0 3px var(--lvvd-focus-ring) !important;
  outline: 2px solid var(--lvvd-accent-hover) !important;
}

/* Active press nudge */
.lvvd .toolbar .toolbar-row button:not([disabled]):active,
.lvvd dialog menu button:not([disabled]):active {
  transform: translateY(1px);
}

/* Disabled: lock styling & kill interactions */
.lvvd .toolbar .toolbar-row button[disabled],
.lvvd dialog menu button[disabled] {
  background: var(--lvvd-accent-soft) !important;
  border-color: var(--lvvd-border) !important;
  color: #777 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: none !important; /* no hover/focus from theme */
}

/* Also neutralize any stray :hover/:focus applied by themes on disabled */
.lvvd .toolbar .toolbar-row button[disabled]:hover,
.lvvd .toolbar .toolbar-row button[disabled]:focus,
.lvvd .toolbar .toolbar-row button[disabled]:focus-visible,
.lvvd .toolbar .toolbar-row button[disabled]:active,
.lvvd dialog menu button[disabled]:hover,
.lvvd dialog menu button[disabled]:focus,
.lvvd dialog menu button[disabled]:focus-visible,
.lvvd dialog menu button[disabled]:active {
  background: var(--lvvd-accent-soft) !important;
  border-color: var(--lvvd-border) !important;
  color: #777 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure selects/inputs also don’t pick up pink focus */
.lvvd select,
.lvvd input[type="text"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--lvvd-border) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.lvvd select:focus,
.lvvd select:focus-visible,
.lvvd input[type="text"]:focus,
.lvvd input[type="text"]:focus-visible {
  outline: 2px solid var(--lvvd-accent) !important;
  box-shadow: 0 0 0 3px var(--lvvd-focus-ring) !important;
  border-color: var(--lvvd-accent) !important;
}

/* ================================
   Promo / Upgrade Card (refined)
   ================================ */
.lvvd .card.cta {
  /* more vivid gradient between dark & light grey */
  background: linear-gradient(45deg, #2f2f2f 0%, #8a8a8a 100%) !important;
  background-color: #555 !important; /* fallback */
  color: #fff !important;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none;
  position: relative;
  overflow: hidden;

  /* mimic spacing of normal card content */
  display: flex;
  flex-direction: column;
  justify-content: center;      /* vertically center block */
  padding: 10px;
}

/* remove inner white frame and any other pseudo from base .card */
.lvvd .card.cta::before{
  content: none !important;
  border: 0 !important;
  background: none !important;
}

/* hide icons not used on CTA */
.lvvd .card.cta .tick,
.lvvd .card.cta .predef-icon,
.lvvd .card.cta .info-icon {
  display: none !important;
}

/* typography (same spacing as normal cards) */
.lvvd .card.cta .card-title {
  font-weight: 700;
  letter-spacing: 0.3px;
  margin: 10px 0 8px;           /* match normal card-title */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lvvd .card.cta .card-question {
  flex: 1;
  display: flex;
  align-items: center;          /* center text vertically in available space */
  justify-content: center;
  font-size: var(--question-size);
  line-height: 1.3;
  text-align: center;
  padding: 0 5px;
  opacity: 0.95;
}

/* optional button */
.lvvd .card.cta .cta-btn {
  margin: 12px auto 10px;
  display: inline-block;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
  color: #fff;
  transition: background 0.2s ease;
}

/* hover & focus */
.lvvd .card.cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.85),
              0 0 18px rgba(0, 0, 0, 0.4);
}
.lvvd .card.cta .cta-btn:hover {
  background: rgba(255,255,255,0.2);
}
.lvvd .card.cta:focus-visible {
  outline: 3px solid var(--lvvd-focus-ring, rgba(59,130,246,.35));
  outline-offset: 2px;
}

/* ensure any "selected" styles never leak onto CTA */
.lvvd .card.cta.selected {
  box-shadow: none !important;
  outline: none !important;
}

/* mobile: allow 3 lines of text */
@media (max-width: 480px) {
  .lvvd .card.cta .card-question {
    -webkit-line-clamp: 3;
    min-height: unset;
  }
}

/* Keep the native arrow. Simple and reliable. */
.lvvd select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;

  /* visual styling */
  color: #222;
  background-color: #fff;            /* use background-color, not shorthand */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 6px;                 /* comfortable text padding */
  /* a touch more room on the right so arrow never crowds text */
  padding-right: 22px;
}

/* Make sure nothing elsewhere wipes the arrow/caret */
.lvvd select::-ms-expand { display: inline; }   /* allow in old Edge/IE */

/* Focus polish (keeps your accent ring) */
.lvvd select:focus-visible {
  outline: 2px solid var(--lvvd-accent);
  outline-offset: 2px;
  border-color: var(--lvvd-accent);
}