/* ============================================================
   SALONIQA — Settings Page Styles
   ============================================================ */

.settings-body {
  background: var(--bg);
  cursor: auto;
  min-height: 100vh;
}

.settings-body .custom-cursor { display: none; }

.settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
}

.settings-header h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 4px;
}

.settings-header p {
  color: #888;
  font-size: 14px;
  margin-bottom: 32px;
}

.settings-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.settings-card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}

.settings-card .card-desc {
  color: #888;
  font-size: 13px;
  margin-bottom: 24px;
}

.settings-form .form-group {
  margin-bottom: 20px;
}

.settings-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus {
  border-color: var(--gold);
}

.settings-form textarea { resize: vertical; min-height: 80px; }

.settings-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ── Logo Upload ───────────────────────── */
.logo-upload {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.logo-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #ccc;
  overflow: hidden;
  border: 2px dashed #ddd;
  flex-shrink: 0;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-upload-hint {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* ── Plan Card ─────────────────────────── */
.plan-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #eee;
}

.plan-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  font-family: 'Playfair Display', Georgia, serif;
}

.plan-price {
  font-size: 14px;
  color: #888;
}

.plan-badge {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Team List ─────────────────────────── */
.team-list {
  margin-top: 16px;
}

.team-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.team-member:last-child { border-bottom: none; }

.team-member-info strong {
  display: block;
  font-size: 14px;
}

.team-member-info span {
  font-size: 12px;
  color: #888;
}

.team-member-role {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Responsive ────────────────────────── */
@media (max-width: 768px) {
  .settings-container { padding: 24px 16px; }
  .settings-card { padding: 24px; }
  .settings-form .form-row { grid-template-columns: 1fr; }
  .settings-header h1 { font-size: 24px; }
  .logo-upload { flex-direction: column; text-align: center; }
}

/* ── Public gallery management ──────────────── */
.gallery-grid-settings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.gallery-thumb { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: var(--bg); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb-del {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer;
}
.gallery-thumb-del:hover { background: var(--danger); }

/* gallery card (thumb + alt + reorder) */
.gallery-card { display: flex; flex-direction: column; gap: 6px; }
.gallery-alt { width: 100%; padding: 6px 8px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px; box-sizing: border-box; outline: none; }
.gallery-alt:focus { border-color: var(--gold); }
.gallery-move { display: flex; gap: 6px; justify-content: center; }
.gallery-move .gmove {
  flex: 1; padding: 4px 0; border: 1px solid #ddd; border-radius: 6px;
  background: #fafafa; cursor: pointer; font-size: 13px; line-height: 1;
}
.gallery-move .gmove:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.gallery-move .gmove:disabled { opacity: .4; cursor: default; }

.empty { color: #888; font-size: 13px; padding: 8px 0; }

/* ── Services & tarifs ─────────────────────── */
.svc-list { display: flex; flex-direction: column; gap: 10px; }
.svc-row, .svc-add {
  display: grid;
  grid-template-columns: 1fr 90px 90px auto auto auto;
  gap: 8px; align-items: center;
}
.svc-add { grid-template-columns: 1fr 90px 90px auto; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.svc-row input, .svc-add input {
  padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; outline: none;
}
.svc-row input:focus, .svc-add input:focus { border-color: var(--gold); }
.svc-active { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; white-space: nowrap; }
.svc-active input { width: auto; }

/* ── Avis / testimonials ───────────────────── */
.rev-list { display: flex; flex-direction: column; gap: 16px; }
.rev-row { padding: 14px; border: 1px solid #eee; border-radius: 10px; background: #fafafa; }
.rev-row.rev-unapproved { border-style: dashed; opacity: .8; }
.rev-row .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.rev-row input, .rev-row textarea, .rev-add input, .rev-add textarea {
  width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; outline: none; font-family: 'Inter', sans-serif;
}
.rev-row input:focus, .rev-row textarea:focus, .rev-add input:focus, .rev-add textarea:focus { border-color: var(--gold); }
.rev-row textarea, .rev-add textarea { resize: vertical; min-height: 56px; margin-bottom: 10px; }
.rev-row-foot, .rev-add-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rev-row-foot label, .rev-add-foot label { font-size: 12px; color: #555; display: flex; align-items: center; gap: 6px; }
.rev-row-foot select, .rev-add-foot select { padding: 6px 8px; border: 1px solid #ddd; border-radius: 6px; }
.rev-approve input { width: auto; }
.rev-add { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.rev-add .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.rev-row-foot .btn, .rev-add-foot .btn { margin-left: auto; }
.rev-row-foot .rev-del, .rev-add-foot .rev-del { margin-left: 0; }

/* ── Gallery add actions ───────────────────── */
.gal-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.gal-actions .gal-or { color: #aaa; font-size: 12px; }
.gal-actions input[type="url"] { flex: 1; min-width: 180px; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; outline: none; }
.gal-actions input[type="url"]:focus { border-color: var(--gold); }

/* ── Public site preview links ─────────────── */
.preview-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.preview-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 1px solid #eee; border-radius: 10px;
  background: #fafafa; text-decoration: none; transition: border-color .2s, background .2s;
}
.preview-link:hover { border-color: var(--gold); background: #fff; }
.preview-link strong { font-size: 14px; color: var(--ink); }
.preview-link span { font-size: 12px; color: var(--gold); word-break: break-all; }

/* ── Employees ─────────────────────────────── */
.emp-list { display: flex; flex-direction: column; gap: 10px; }
.emp-row, .emp-add {
  display: grid; grid-template-columns: 1fr 1fr 90px auto auto auto;
  gap: 8px; align-items: center;
}
.emp-add { grid-template-columns: 1fr 1fr 90px auto; margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.emp-row input, .emp-add input {
  padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; outline: none;
}
.emp-row input:focus, .emp-add input:focus { border-color: var(--gold); }
.emp-active { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; white-space: nowrap; }
.emp-active input { width: auto; }

/* ── Presentation video (Media) ───────────── */
.vid-drop {
  border: 2px dashed #d8d8d8; border-radius: 12px; padding: 28px 18px; text-align: center;
  color: #777; transition: border-color .2s, background .2s; cursor: default;
}
.vid-drop.drag { border-color: var(--gold); background: #fffdf5; }
.vid-drop-ico { font-size: 30px; margin-bottom: 6px; }
.vid-drop p { margin: 4px 0; font-size: 13px; }
.vid-progress-wrap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.vid-progress { flex: 1; height: 8px; background: #eee; border-radius: var(--radius-pill, 999px); overflow: hidden; }
.vid-progress-bar { height: 100%; width: 0; background: var(--gold); transition: width .25s ease; }
.vid-progress-txt { font-size: 12px; color: #666; min-width: 36px; text-align: right; }
.vid-progress-label { font-size: 12px; color: #666; white-space: nowrap; }

/* presentation video cards (premium list) */
.vid-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.vid-card { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 12px; background: #fafafa; }
.vid-thumb { width: 132px; height: 74px; flex-shrink: 0; border-radius: 9px; background: #000; object-fit: cover; display: block; }
.vid-card-body { flex: 1; min-width: 0; }
.vid-card-title { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-card-meta { font-size: 12px; color: #888; margin: 3px 0 9px; }
.vid-card-actions, .tv-card-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* testimonial video cards */
.tv-list { display: flex; flex-direction: column; gap: 14px; }
.tv-card { display: flex; gap: 14px; padding: 12px; border: 1px solid #eee; border-radius: 12px; background: #fafafa; }
.tv-card .vid-thumb { width: 120px; height: 160px; }   /* portrait-ish preview */
.tv-fields { flex: 1; min-width: 0; }
.tv-fields .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tv-fields input { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; box-sizing: border-box; outline: none; }
.tv-fields input:focus { border-color: var(--gold); }
.tv-add { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.tv-add .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.tv-add input { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; outline: none; }
.tv-add input:focus { border-color: var(--gold); }
.tv-add-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-filename { font-size: 12px; color: #777; flex: 1; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* shared public-video style (16:9, rounded) — also used on salon.html/booking.html */
.salon-video {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border-radius: 14px; background: #000; object-fit: cover;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ── Before / After (settings) ─────────────── */
.ba-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ba-item { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid #eee; border-radius: 12px; background: #fafafa; }
.ba-item.ba-inactive { opacity: 0.55; }
.ba-item-imgs { display: flex; gap: 4px; flex-shrink: 0; }
.ba-item-imgs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #000; display: block; }
.ba-item-body { flex: 1; min-width: 0; }
.ba-item-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.ba-item-meta { font-size: 12px; color: #888; margin: 3px 0 9px; }
.ba-item-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.ba-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #555; white-space: nowrap; }
.ba-toggle input { width: auto; }

.ba-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.ba-form-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 10px; }
.ba-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; align-items: center; }
.ba-form input[type="text"] { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; box-sizing: border-box; outline: none; }
.ba-form input[type="text"]:focus { border-color: var(--gold); }
.ba-desc-input { display: block; width: 100%; margin-bottom: 10px; }
.ba-active-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #555; }
.ba-active-lbl input { width: auto; }
.ba-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.ba-up { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ba-up-prev {
  width: 100%; aspect-ratio: 16/10; border: 2px dashed #d8d8d8; border-radius: 10px;
  background: #f3f3f3 center/cover no-repeat; display: grid; place-items: center;
}
.ba-up-prev span { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 1px; }
.ba-up-prev.has-img span { display: none; }
.ba-up-prev.has-img { border-style: solid; border-color: var(--gold); }
.ba-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ba-form-actions .logo-upload-hint { flex: 1; min-width: 120px; margin: 0; }

@media (max-width: 768px) {
  .svc-row, .svc-add { grid-template-columns: 1fr 1fr; }
  .svc-row .svc-active { grid-column: 1 / -1; }
  .emp-row, .emp-add { grid-template-columns: 1fr 1fr; }
  .emp-row .emp-active { grid-column: 1 / -1; }
  .preview-links { grid-template-columns: 1fr; }
  .vid-card { flex-direction: column; align-items: stretch; }
  .vid-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }
  .tv-card { flex-direction: column; }
  .tv-card .vid-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }
  .ba-item { flex-direction: column; align-items: stretch; }
  .ba-item-imgs img { width: 100%; height: auto; aspect-ratio: 1/1; }
}

/* ── Phase 9: Custom domains (white-label) ── */
.cd-list{ margin:14px 0 6px; display:flex; flex-direction:column; gap:10px; }
.cd-row{ border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; background:var(--card); }
.cd-name{ font-weight:600; color:var(--ink); word-break:break-all; }
.cd-meta{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; }
.cd-badge{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:3px 10px; border-radius:999px; }
.cd-badge.pending{ background:#fdf3d8; color:#8a6d1a; }
.cd-badge.verified{ background:#d7ece3; color:var(--emerald); }
.cd-badge.active{ background:#d8f0de; color:#1c7a36; }
.cd-badge.error{ background:#fbe0e2; color:var(--danger); }
.cd-ind{ font-size:11.5px; color:var(--muted); display:inline-flex; align-items:center; gap:5px; }
.cd-ind .dot{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.cd-ind.on{ color:var(--emerald); }
.cd-ind.on .dot{ background:var(--success); }
.cd-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cd-dns{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.cd-dns h3{ font-size:14px; color:var(--ink); margin:0 0 6px; }
.cd-dns-table{ width:100%; border-collapse:collapse; margin:8px 0; }
.cd-dns-table td{ padding:8px 10px; border:1px solid var(--line); font-size:13.5px; }
.cd-dns-table td:first-child{ color:var(--muted); width:130px; font-weight:600; }
.cd-dns-table code{ background:var(--bg-soft); padding:2px 8px; border-radius:6px; font-size:13px; color:var(--emerald); }
.cd-dns-hint{ font-size:12px; color:var(--muted); }
@media(max-width:560px){ .cd-row{ flex-direction:column; align-items:flex-start; } .cd-actions{ width:100%; } .cd-dns-table td:first-child{ width:90px; } }
/* ── Phase 9: Branding (white-label) ── */
.brand-row{ display:flex; align-items:flex-start; gap:14px; margin:10px 0 16px; }
.brand-switch{ position:relative; display:inline-block; width:48px; height:28px; flex-shrink:0; }
.brand-switch input{ opacity:0; width:0; height:0; }
.brand-slider{ position:absolute; inset:0; background:var(--line); border-radius:999px; transition:.2s; cursor:pointer; }
.brand-slider::before{ content:''; position:absolute; width:22px; height:22px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.brand-switch input:checked + .brand-slider{ background:var(--emerald); }
.brand-switch input:checked + .brand-slider::before{ transform:translateX(20px); }
.brand-switch input:disabled + .brand-slider{ opacity:.5; cursor:not-allowed; }
.brand-row strong{ font-size:14.5px; color:var(--ink); }
.brand-hint{ font-size:13px; color:var(--muted); margin:4px 0 0; }
.brand-preview{ border:1px dashed var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--bg-soft); }
.brand-preview-label{ font-size:12px; color:var(--muted); display:block; margin-bottom:8px; }
.brand-preview-foot .ss-footer-by{ font-size:13px; color:var(--muted); }
.brand-preview-foot .ss-footer-by a{ color:var(--emerald); font-weight:600; text-decoration:none; }
.brand-muted{ font-size:13px; color:var(--muted); font-style:italic; }