/* Legion Patches Quote Builder — scoped styles.
   Prefixed with .lqb- throughout so this never leaks into
   or gets overridden by the active WordPress theme.
   Designed as a light, rounded "card" that sits nicely on a
   dark page background — soft, not stark. */

.lqb-calculator{
  --lqb-card: #FBF6EC;
  --lqb-card-2: #F3EAD9;
  --lqb-line: #E7DCC8;
  --lqb-text: #241E16;
  --lqb-dim: #8A7F6E;
  --lqb-accent: #C97A34;
  --lqb-accent-hover: #B5651F;

  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 0;
  background: var(--lqb-card);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--lqb-text);
  max-width: 980px;
  margin: 0 auto;
}

.lqb-controls{
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.lqb-field label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lqb-dim);
  margin-bottom: 10px;
}

.lqb-size-note{ margin: 8px 0 0; font-size: 12px; color: var(--lqb-dim); }
.lqb-size-note a{ color: var(--lqb-accent); text-decoration: underline; }

.lqb-optional{ text-transform: none; font-weight: 400; color: var(--lqb-dim); letter-spacing: 0; }
.lqb-file-input{
  width: 100%;
  background: #fff;
  border: 1px solid var(--lqb-line);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--lqb-text);
}

.lqb-pill-row{ display: flex; gap: 8px; flex-wrap: wrap; }

.lqb-pill{
  background: #fff;
  border: 1px solid var(--lqb-line);
  color: var(--lqb-text);
  padding: 10px 15px;
  min-height: 40px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lqb-pill:active{ transform: scale(.97); }
.lqb-pill.is-active{ box-shadow: 0 4px 12px rgba(201,122,52,.3); }
.lqb-pill em{ font-style: normal; color: var(--lqb-dim); font-size: .85em; margin-left: 4px; }
.lqb-pill:hover{ border-color: var(--lqb-accent); }
.lqb-pill.is-active{ background: var(--lqb-accent); color: #fff; border-color: var(--lqb-accent); }
.lqb-pill.is-active em{ color: rgba(255,255,255,.75); }

.lqb-result{
  background: var(--lqb-card-2);
  padding: 34px;
  display: flex;
  flex-direction: column;
}
.lqb-result-label{ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lqb-dim); margin: 0 0 6px; }
.lqb-result-price{ font-size: 40px; font-weight: 700; color: var(--lqb-accent); margin: 0 0 18px; line-height: 1; }
.lqb-per-patch{ font-size: 14px; font-weight: 400; color: var(--lqb-dim); margin-left: 6px; }
.lqb-result-row{ display: flex; justify-content: space-between; font-size: 14px; padding: 11px 0; border-top: 1px solid var(--lqb-line); }
.lqb-result-total{ color: var(--lqb-text); font-weight: 700; font-size: 16px; }
.lqb-note{ font-size: 12px; color: #A79C8C; margin: 14px 0 18px; }

.lqb-btn{
  width: 100%;
  background: var(--lqb-accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.lqb-btn:hover{ background: var(--lqb-accent-hover); transform: translateY(-1px); }
.lqb-btn:disabled{ opacity: .6; cursor: default; transform: none; }

.lqb-error{
  color: #C0402E;
  font-size: 13px;
  margin-top: 12px;
}

/* Cart/checkout: locked quantity note (from PHP hook) */
.lqb-locked-qty{ font-size: 14px; }
.lqb-qty-note{ display: block; font-size: 11px; color: #8F8F8B; margin-top: 2px; }

@media (max-width: 760px){
  .lqb-calculator{ grid-template-columns: 1fr; border-radius: 18px; }
  .lqb-result{ border-top: 1px solid var(--lqb-line); }
  .lqb-pill{ padding: 12px 16px; font-size: 14px; min-height:44px; }
  .lqb-btn{ min-height:52px; font-size:15px; }
  .lqb-file-input{ padding:12px; }
}

/* Compact mode — for embedding beside other content (e.g. a homepage
   hero) where the widget needs to stay narrow at any screen size. */
.lqb-calculator.is-compact{
  grid-template-columns: 1fr;
  max-width: 420px;
  border-radius: 18px;
}
.lqb-calculator.is-compact .lqb-controls{ padding: 26px; gap: 18px; }
.lqb-calculator.is-compact .lqb-result{ border-top: 1px solid var(--lqb-line); padding: 26px; }
.lqb-calculator.is-compact .lqb-result-price{ font-size: 32px; }
.lqb-calculator.is-compact .lqb-pill{ padding: 10px 14px; font-size: 13px; min-height:40px; }

@media (max-width: 480px){
  .lqb-calculator{ max-width: 100%; }
  .lqb-calculator.is-compact{ max-width: 100%; }
  .lqb-calculator .lqb-controls, .lqb-calculator .lqb-result{ padding: 22px; }
  .lqb-pill{ flex: 1 1 auto; text-align:center; }
}