/* Refactored settings CSS: consolidated, clearer tokens, and reduced duplication.
   - Kept all existing selectors and behavior but simplified cascade and mobile rules.
   - Key improvements: compact variables, consistent spacing, and accessible controls.
*/

:root {
  --settings-pad: 16px;
  --settings-radius: 12px;
  --settings-gap: 12px;
  --modal-max-w: 460px;
  --ball-size: 50px;
}

/* Overlay + modal shell */
.settings-modal-overlay {
  position: fixed; inset: 0; z-index: 50000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.settings-modal-content {
  width: 90%; max-width: var(--modal-max-w);
  padding: var(--settings-pad);
  border-radius: var(--settings-radius);
  background: rgba(30,30,30,0.08);
  color: var(--text-color);
  border: 1px solid var(--primary-color);
  box-shadow: 0 6px 26px rgba(0,0,0,.48);
  position: relative;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Close & header */
.settings-close-button {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; color: inherit; font-size: 1.6rem; cursor: pointer;
}
.settings-modal-content h2 {
  margin: 0 0 16px 0; display:flex; align-items:center; justify-content:center;
  height: 44px; color: var(--primary-color); cursor: move;
}
.settings-logo-img {
  width: 150px; height: 44px; background: var(--primary-color);
  -webkit-mask-image: url('6d-300.png'); -webkit-mask-size: contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
  mask-image: url('6d-300.png'); mask-size: contain; mask-position:center; mask-repeat:no-repeat;
}

/* Sections & subsections */
.settings-section { margin-bottom: calc(var(--settings-gap) + 4px); padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.settings-section:first-of-type { border-top: none; padding-top: 0; }
.settings-section h3,
.settings-subsection .subsection-header {
  margin: 0 0 10px 0;
  padding: 8px 12px;
  background: var(--secondary-color);
  border: 1px solid var(--primary-color);
  border-radius: 8px;
  color: var(--lighter-primary-color);
  text-transform: uppercase;
  cursor: pointer;
}
.settings-section h3:hover,
.settings-subsection .subsection-header:hover { background: var(--primary-color); color: #000; box-shadow: 0 0 10px rgba(var(--primary-color-rgb),0.45); }

/* Basic form layout */
.setting-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom: 10px;
}
.setting-item label { flex-shrink:0; font-size:1rem; }

/* Inputs */
.select-wrapper { position:relative; width:160px; }
.select-wrapper select{ width:100%; padding:8px 30px 8px 10px; border-radius:6px; border:1px solid var(--primary-color); background: rgba(0,0,0,.45); color:var(--text-color);}
.select-wrapper::after{ content:'▾'; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--primary-color); pointer-events:none; }

.number-input-container { display:flex; gap:8px; align-items:center; }
.number-input-container input[type="number"] {
  width:64px; text-align:center; padding:3px; border-radius:6px; border:1px solid var(--primary-color); background:rgba(0,0,0,.45); color:var(--text-color);
  -moz-appearance:textfield;
}
.number-input-btn { width:32px; height:32px; border-radius:50%; background:var(--primary-color); color:#000; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }

/* Range/slider */
.slider-container { display:flex; align-items:center; gap:12px; width:70%; }
input[type="range"]{ -webkit-appearance:none; appearance:none; height:10px; background:var(--secondary-color); border-radius:6px; border:1px solid rgba(var(--primary-color-rgb),0.35); width:100%; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--primary-color); cursor:pointer; }
.range-bubble{ position:absolute; top:-34px; transform:translateX(-50%); background:rgba(0,0,0,.85); color:#fff; padding:4px 8px; border-radius:6px; border:1px solid var(--primary-color); font-size:12px; pointer-events:none; }

/* Radio groups */
.radio-group{ display:flex; flex-wrap:wrap; gap:8px; }
.radio-group label{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:.95rem; }

/* Switch */
.switch{ position:relative; width:72px; height:30px; display:inline-block; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:#c0392b; border-radius:30px; transition:.22s; }
.slider:before{ content:''; position:absolute; left:4px; bottom:3px; width:24px; height:24px; background:#fff; border-radius:50%; transition:.22s; }
input:checked + .slider{ background:#28a745; }
input:checked + .slider:before{ transform:translateX(42px); }
.slider::after{ content:'OFF'; position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#fff; font-weight:700; font-size:12px; }
input:checked + .slider::after{ content:'ON'; left:14px; right:auto; }

/* Theme ball and info button */
.settings-theme-ball{ position:absolute; left:14px; bottom:14px; width:var(--ball-size); height:var(--ball-size); border-radius:50%; background:var(--primary-color); opacity:.6; border:2px solid rgba(255,255,255,.18); cursor:pointer; transition:transform .18s, box-shadow .18s; }
.settings-theme-ball:hover{ transform:scale(1.05); box-shadow:0 6px 18px rgba(0,0,0,.4); }

.settings-info-button{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:6px 12px; border-radius:999px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.6); color:#fff; font-weight:700; text-transform:uppercase; cursor:pointer; }

/* Collapsed states (JS toggles these) */
.settings-section.collapsed > .setting-item,
.settings-subsection.collapsed .setting-item { display:none; }

/* Accessibility & small-screen adjustments */
@media (max-width:768px){
  .settings-modal-content{ width:86%; padding:12px; max-height:calc(100vh - 40px); overflow:auto; font-size:.92rem; }
  .select-wrapper{ width:140px; }
  .number-input-container input[type="number"]{ width:56px; font-size:.9rem; }
  .number-input-btn{ width:26px; height:26px; font-size:1rem; }
  .settings-theme-ball{ width:40px; height:40px; left:10px; bottom:10px; }
  .settings-section h3, .settings-subsection .subsection-header{ padding:6px 8px; font-size:.95rem; }
}

/* Light-theme tweaks moved to root-level theme rules when present (keeps specificity low) */
[data-theme^="light"] .settings-modal-content{ background: rgba(255,255,255,0.9); color:var(--text-color); }
[data-theme^="light"] .settings-section h3, [data-theme^="light"] .settings-subsection .subsection-header{ background:var(--primary-color); color:#000; }