/* settings.css — Settings screen, legal reader, delete-account modal */

/* ===== Overlay shell ===== */
.settings-overlay{
  position:fixed;inset:0;background:#5e0c23;z-index:322;
  display:none;flex-direction:column;overflow:hidden;
}
.settings-overlay.open{display:flex}

.settings-header{
  display:flex;align-items:center;gap:12px;
  padding:16px;background:rgba(0,0,0,0.2);
  border-bottom:2.5px solid #c9a550;flex-shrink:0;
}
.settings-back{
  width:40px;height:40px;flex-shrink:0;
  background:rgba(255,255,255,0.12);border:1.5px solid #c9a550;border-radius:10px;
  color:#e8d5a0;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .15s;
}
.settings-back:active{transform:scale(0.92);background:rgba(255,255,255,0.2)}
.settings-header-title{
  font-family:var(--font-display);font-size:20px;letter-spacing:2px;color:#fff;
}

.settings-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Bottom clearance = the floating nav pill (z-index 324, ABOVE this 322 overlay) + the home
     indicator: with the old 40px the scroll ended UNDER the bar and «Supprimer mon compte» could
     never be revealed (2026-08-26). */
  padding:16px 16px calc(110px + env(safe-area-inset-bottom,0px));
}

/* ===== Sections ===== */
.set-section{margin-bottom:22px}
.set-section-title{
  font-family:var(--font-display);font-size:15px;letter-spacing:2.5px;
  color:#e8d5a0;margin:0 4px 9px;text-transform:uppercase;
}
.set-card{
  background:#fff;border:2px solid #c9a550;border-radius:14px;
  padding:6px 14px;margin-bottom:10px;overflow:hidden;
  /* Non-Britannic font for all card content */
  font-family:'Helvetica Neue',Arial,sans-serif;
}

/* ===== Fields (inputs) ===== */
.set-field{padding:12px 0;border-bottom:1px solid #f0e8d8}
.set-field:last-child{border-bottom:none}
.set-field-label{
  display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:#8a6a20;font-family:'Helvetica Neue',Arial,sans-serif;font-weight:600;margin-bottom:6px;
}
.set-input{
  width:100%;padding:11px 12px;border:1.5px solid #c9a550;border-radius:9px;
  font-size:15px;color:#5e0c23;background:#fdf8f0;font-family:inherit;
  box-sizing:border-box;
}
.set-input:focus{outline:none;border-color:#5e0c23}
.set-name-row{display:flex;gap:8px}
.set-name-row .set-input{flex:1}
.set-field-err{font-size:11px;color:#ae182b;margin-top:5px;min-height:0;line-height:1.3}

/* ===== Avatar / ID rows ===== */
.set-avatar-row{display:flex;align-items:center;gap:12px}
.set-avatar-preview{
  width:48px;height:48px;border-radius:50%;border:2px solid #c9a550;background:#fdf8f0;
  display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
/* Earned avatar image — art has its own ring, so drop the border/padding. */
.set-avatar-preview.has-avatar{border:none;background:transparent;overflow:hidden}
.set-avatar-note{font-size:12px;color:#8a6f57;line-height:1.35}
.set-id-row{display:flex;align-items:stretch;gap:8px}
.set-id-value{
  flex:1;font-family:'Courier New',monospace;font-size:12px;color:#5e0c23;
  background:#fdf8f0;border:1px solid #e8d5a0;border-radius:8px;padding:9px 10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===== Buttons ===== */
.set-btn-inline{
  padding:0 18px;background:#5e0c23;color:#e8d5a0;border:1.5px solid #c9a550;
  border-radius:9px;font-family:var(--font-display);font-size:13px;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;flex-shrink:0;transition:transform .15s,background .15s,border-color .15s,color .15s;min-height:44px;
}
.set-btn-inline:active{transform:scale(0.94);background:#9a9a9a;border-color:#9a9a9a;color:#fff}
/* Persistent "saved" state — OK turns grey after a successful name save (until edited again). */
.set-btn-inline.set-btn-saved{background:#9a9a9a;border-color:#9a9a9a;color:#fff}
.set-btn-secondary{
  padding:9px 14px;background:#fdf8f0;color:#5e0c23;border:1.5px solid #c9a550;
  border-radius:9px;font-family:var(--font-display);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:transform .15s;
}
.set-btn-secondary:active{transform:scale(0.95)}

/* Full-width action rows (white cards that act as buttons) */
.set-btn-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:15px 16px;margin-bottom:10px;
  background:#fff;border:2px solid #c9a550;border-radius:12px;
  /* Match the "Statistiques d'utilisation" label: Helvetica Neue, 14px, semi-bold */
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:0;color:#5e0c23;
  cursor:pointer;text-align:left;transition:transform .12s,background .15s;
}
.set-btn-row:active{transform:scale(0.985);background:#fdf8f0}
.set-btn-link{color:#5e0c23}
/* Logout + delete are de-emphasised: a bit smaller and not bold */
.set-btn-logout{
  color:#8a6a20;justify-content:center;
  font-weight:400;font-size:13px;padding:12px 16px;
}
.set-btn-danger{
  color:#ae182b;border-color:#e0a0a8;justify-content:center;
  font-weight:400;font-size:13px;padding:12px 16px;
}
.set-btn-danger:active{background:#fff0f0}
.set-btn-danger[disabled]{opacity:0.4;cursor:not-allowed}

/* ===== Rows (toggles, selects, info) ===== */
.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid #f0e8d8;
}
.set-row:last-child{border-bottom:none}
.set-row-text{display:flex;flex-direction:column;gap:2px}
.set-row-label{font-size:14px;color:#5e0c23;font-weight:600}
.set-row-sub{font-size:11px;color:#999;font-weight:400;line-height:1.3}
.set-row-value{font-size:13px;color:#888;font-family:'Courier New',monospace}

/* "(optionnel)" hint inside a field label */
.set-field-opt{font-weight:400;text-transform:none;color:#b09a6a;font-size:10px;letter-spacing:0}

/* Clickable phrase rows (inside a card, like a grouped list) */
.set-link-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid #f0e8d8;
  font-size:14px;color:#5e0c23;cursor:pointer;
}
.set-link-row:last-child{border-bottom:none}
.set-link-row:active{opacity:0.55}
.set-link-chev{color:#c9a550;font-size:20px;line-height:1;font-weight:400}

/* Bottom de-emphasised grey actions (logout + delete), on the bordeaux body */
.set-bottom-actions{margin-top:4px}
.set-btn-grey{
  display:block;width:100%;padding:12px;margin-bottom:10px;
  background:transparent;color:rgba(255,255,255,0.55);
  border:1px solid rgba(255,255,255,0.22);border-radius:10px;
  font-family:'Helvetica Neue',Arial,sans-serif;font-size:14px;font-weight:400;
  text-align:center;cursor:pointer;transition:transform .15s,background .15s;
}
.set-btn-grey:active{transform:scale(0.97);background:rgba(255,255,255,0.07)}
.set-btn-grey-danger{color:rgba(232,170,175,0.75);border-color:rgba(232,170,175,0.3)}

/* Toggle switch */
.set-switch{position:relative;display:inline-block;width:46px;height:27px;flex-shrink:0}
.set-switch input{position:absolute;opacity:0;width:0;height:0}
.set-switch-track{
  position:absolute;inset:0;background:#cfc9bf;border-radius:14px;
  transition:background .2s;cursor:pointer;
}
.set-switch-track::before{
  content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;
  background:#fff;border-radius:50%;transition:transform .2s;
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.set-switch input:checked + .set-switch-track{background:#3B6D11}
.set-switch input:checked + .set-switch-track::before{transform:translateX(19px)}

/* Language select */
.set-lang-select{
  padding:8px 10px;border:1.5px solid #c9a550;border-radius:8px;
  font-size:13px;color:#5e0c23;background:#fdf8f0;font-family:inherit;cursor:pointer;
}

/* ===== Responsible gaming ===== */
.set-responsible{display:flex;gap:12px;align-items:flex-start;padding:12px 0}
.set-responsible-token{width:40px;height:40px;flex-shrink:0;object-fit:contain}
.set-responsible p{margin:0;font-size:13px;line-height:1.5;color:#5e0c23}
.set-responsible-note{
  border-top:1px solid #f0e8d8;padding-top:12px;margin-top:4px;
}
.set-responsible-note p{margin:0 0 6px;font-size:12px;color:#888;line-height:1.4}
.set-responsible-link{font-size:13px;color:#8a1538;font-weight:600;text-decoration:none}

.set-footer{
  text-align:center;font-size:10px;color:rgba(232,213,160,0.6);
  letter-spacing:0.5px;margin-top:8px;line-height:1.5;padding:0 10px;
}

/* ===== Legal reader ===== */
.legal-overlay{z-index:326}
.legal-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fdf8f0;padding:22px 18px 50px;color:#3a2228;
  font-family:'Helvetica Neue',Arial,sans-serif;line-height:1.6;font-size:14px;
}
.legal-body h1{font-family:var(--font-display);font-size:20px;color:#5e0c23;margin:0 0 6px}
.legal-body h2{font-family:var(--font-display);font-size:15px;color:#8a1538;margin:22px 0 6px;letter-spacing:0.5px}
.legal-body p{margin:0 0 10px}
.legal-body ul{margin:0 0 10px;padding-left:20px}
.legal-body li{margin-bottom:5px}
.legal-body strong{color:#5e0c23}
.legal-body blockquote{
  background:#fff;border-left:3px solid #c9a550;margin:0 0 14px;padding:10px 14px;
  border-radius:0 8px 8px 0;font-size:13px;color:#8a6a20;
}
.legal-body hr{border:none;border-top:1px solid #e8d5a0;margin:18px 0}
.legal-body .legal-updated{font-size:12px;color:#999;font-style:italic;margin-bottom:18px}

/* ===== Delete-account modal ===== */
.set-modal-overlay{
  position:fixed;inset:0;background:rgba(40,5,15,0.8);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:328;display:none;align-items:center;justify-content:center;padding:20px;
}
.set-modal-overlay.open{display:flex}
.set-modal{
  background:#fff;border-radius:16px;padding:24px 22px;max-width:380px;width:100%;
  border:2px solid #ae182b;box-shadow:0 12px 40px rgba(0,0,0,0.5);text-align:center;
  max-height:90vh;overflow-y:auto;
}
.set-modal-icon{font-size:38px;margin-bottom:8px}
.set-modal-title{font-family:var(--font-display);font-size:19px;color:#ae182b;margin-bottom:12px;letter-spacing:1px}
.set-modal-text{font-size:13px;color:#5e0c23;line-height:1.5;text-align:left}
.set-modal-input{text-align:center;letter-spacing:3px;margin-top:12px;font-family:var(--font-display)}
.set-modal .set-btn-row{margin-top:12px}

/* ===== Gear button in dash-header ===== */
.dash-settings-btn{
  width:36px;height:36px;flex-shrink:0;border-radius:9px;
  background:rgba(255,255,255,0.88);border:none;color:#5e0c23;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);transition:transform .15s,background .15s;
}
.dash-settings-btn:active{transform:scale(0.9) rotate(40deg);background:#fff}

/* User info area is now the profile entry-point (replaces MON PROFIL button) */
.dash-user-info-clickable{cursor:pointer;border-radius:8px;padding:4px 6px;margin:-4px -6px;transition:background .15s}
.dash-user-info-clickable:active{background:rgba(255,255,255,0.1)}

/* ===== Notifications section ===== */
/* Time inputs styled like the language select (compact, gold-bordered) */
.set-time-input{
  padding:8px 10px;border:1.5px solid #c9a550;border-radius:8px;
  font-size:13px;color:#5e0c23;background:#fdf8f0;font-family:inherit;
}
.set-time-input:focus{outline:none;border-color:#5e0c23}
.set-quiet-times{display:flex;align-items:center;gap:6px}
.set-quiet-dash{color:#b09a6a;font-size:13px}
/* Category rows are inert while the master toggle is off */
#notifPrefsBlock.notif-off{opacity:.45;pointer-events:none}