/* ─────────────────────────────────────────
   Customize section — interactive widgets
   All scoped under .br-widget to avoid
   conflicting with main page variables.
───────────────────────────────────────── */

.br-widget {
  --onyx:        #1A1A1A;
  --amber:       #D97706;
  --amber-tint:  #FEF3C7;
  --grad-top:    #FFF7ED;
  --bg:          #FFFFFF;
  --text:        #1A1A1A;
  --text-2:      #595959;
  --text-3:      #8a8a8a;
  --tan:         #8a7a55;
  --border:      #ECECEC;
  --canvas:      #F4F1EC;
  --s-card:      0 1px 2px rgba(40,30,10,0.04);
  --s-glow:      0 0 0 3px rgba(217,119,6,0.08), 0 1px 2px rgba(40,30,10,0.04);

  width: 100%;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
}

.br-widget, .br-widget *, .br-widget *::before, .br-widget *::after {
  box-sizing: border-box;
}

/* ─── Card base ─── */
.br-widget .br-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--s-card);
  width: 100%;
}

/* ─── Field ─── */
.br-widget .br-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.br-widget .br-field__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tan);
}

.br-widget .br-field__help {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 2px;
}

/* ─── Input / textarea ─── */
.br-widget .br-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  appearance: none;
  -webkit-appearance: none;
}

.br-widget .br-input::placeholder { color: var(--text-3); }

.br-widget .br-input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(217,119,6,0.10);
}

.br-widget .br-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
  font-family: inherit;
}

/* ─── Custom select ─── */
.br-widget .br-select-wrap {
  position: relative;
  width: 100%;
}

.br-widget .br-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 32px 9px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.005em;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.br-widget .br-select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(217,119,6,0.10);
}

.br-widget .br-select__chev {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-3);
  font-size: 10px;
}

/* ─── Segmented control ─── */
.br-widget .br-segmented {
  display: flex;
  background: var(--canvas);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  width: 100%;
}

.br-widget .br-seg {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-widget .br-seg:hover { color: var(--text); }

.br-widget .br-seg.is-active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(40,30,10,0.06);
  font-weight: 600;
}

.br-widget .br-seg--mono {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0;
}

/* ─── Tone grid (2×2) ─── */
.br-widget .br-tone-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.br-widget .br-tone {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: pointer;
  transition: all 120ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  color: inherit;
  box-shadow: var(--s-card);
  min-width: 0;
}

.br-widget .br-tone:hover { border-color: #d8d3c9; }

.br-widget .br-tone__emoji { font-size: 14px; line-height: 1; flex-shrink: 0; }

.br-widget .br-tone__name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-widget .br-tone.is-active {
  background: linear-gradient(180deg, var(--grad-top) 0%, var(--amber-tint) 100%);
  border-color: var(--amber);
  box-shadow: var(--s-glow);
}

/* ─── Length row ─── */
.br-widget .br-len-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

.br-widget .br-len {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  transition: all 120ms ease;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
  box-shadow: var(--s-card);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-widget .br-len:hover { border-color: #d8d3c9; }

.br-widget .br-len.is-active {
  background: linear-gradient(180deg, var(--grad-top) 0%, var(--amber-tint) 100%);
  border-color: var(--amber);
  box-shadow: var(--s-glow);
  color: #6b3f08;
}

/* ─── Shared preview (tone + length) ─── */
.br-widget .br-shared-preview {
  background: var(--canvas);
  border-radius: 10px;
  padding: 11px 13px;
  border-left: 2px solid var(--amber);
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: brFade 180ms ease;
}

@keyframes brFade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.br-widget .br-shared-preview__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tan);
}

.br-widget .br-shared-preview__body {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text-2);
  line-height: 1.5;
  min-height: 57px;
}

.br-widget .br-foot-note {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 10px 2px 0;
}

/* ─── Signature card ─── */
.br-widget .br-sig {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ─── Language card ─── */
.br-widget .br-lang {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-widget .br-lang .br-foot-note { margin: 0; }

.br-widget .br-sig__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-2);
}

.br-widget .br-sig.is-disabled .br-field__label,
.br-widget .br-sig.is-disabled .br-preview {
  opacity: 0.45;
}
.br-widget .br-sig.is-disabled .br-input,
.br-widget .br-sig.is-disabled .br-seg {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── Toggle switch ─── */
.br-toggle {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  flex-shrink: 0;
}
.br-toggle input { opacity: 0; width: 0; height: 0; }
.br-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--rule, #E8E2D4);
  border-radius: 999px;
  transition: background 150ms;
}
.br-toggle__slider::before {
  content: '';
  position: absolute;
  height: 13px;
  width: 13px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform 150ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.br-toggle input:checked + .br-toggle__slider { background: var(--amber, #D97706); }
.br-toggle input:checked + .br-toggle__slider::before { transform: translateX(13px); }

.br-widget .br-preview {
  background: var(--canvas);
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  border-left: 2px solid var(--amber);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.br-widget .br-preview__body { color: var(--text); }

.br-widget .br-preview__sig {
  color: var(--text);
  white-space: pre-wrap;
}

/* ─── Business profile card ─── */
.br-widget .br-bp {
  overflow: hidden;
  transition: background 200ms ease;
}

.br-widget .br-bp:not(.is-open) {
  background: linear-gradient(180deg, #FFFBF3 0%, #FFFFFF 100%);
}

.br-widget .br-bp__toggle {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  font: inherit;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.br-widget .br-bp:not(.is-open):hover .br-bp__toggle {
  background: rgba(217,119,6,0.04);
}

.br-widget .br-bp.is-open .br-bp__toggle {
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.br-widget .br-bp__toggle-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.br-widget .br-bp__chev {
  color: var(--amber);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 220ms ease;
}

.br-widget .br-bp__chev.is-open {
  transform: rotate(90deg);
  color: var(--text-3);
}

.br-widget .br-bp:not(.is-open):hover .br-bp__chev {
  transform: translateX(3px);
}

.br-widget .br-bp__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.br-widget .br-input:disabled,
.br-widget .br-select:disabled {
  opacity: 0.72;
  cursor: default;
  background: var(--canvas);
}