/* ============================================================
   Photoshoot Studio — premium İMZA aesthetic (navy + neutral)
   Reuses dashboard :root tokens (--accent, --bg-card, --text-*,
   --border, --shadow-*, --dur-*, --ease-*). No raw brand hex.
   Layout: left product library grid · center stage (selected
   product + preset rail + generate) · bottom result gallery.
   ============================================================ */

#page-photoshoot-studio .page-header { position: relative; }

.psx-bg-glow {
  position: absolute; inset: -40px -20px auto -20px; height: 200px;
  background: radial-gradient(60% 100% at 28% 0%, var(--accent-glow, rgba(47,92,168,0.16)), transparent 70%);
  pointer-events: none; z-index: 0; filter: blur(6px);
}

/* ── budget meter (small, restrained) ─────────────────────── */
.psx-budget {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 5px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; font-size: 11.5px; color: var(--text-secondary);
}
.psx-budget-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success, #3fb98a); }
.psx-budget.is-near .psx-budget-dot { background: var(--warning, #d9a851); }
.psx-budget.is-full .psx-budget-dot { background: var(--danger, #e0685f); }
.psx-budget b { color: var(--text-primary); font-weight: 600; }

/* ── main 2-column workspace ──────────────────────────────── */
.psx-workspace {
  display: grid; grid-template-columns: 320px 1fr; gap: 22px;
  margin-top: 22px; align-items: start;
}
@media (max-width: 1100px) { .psx-workspace { grid-template-columns: 1fr; } }

.psx-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px;
}
.psx-panel-title {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 14px;
}
.psx-panel-title .psx-count {
  font-weight: 500; color: var(--text-secondary); text-transform: none; letter-spacing: 0;
}

/* ── product library grid (left) ──────────────────────────── */
.psx-library { position: sticky; top: 12px; }
.psx-prod-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  max-height: 560px; overflow-y: auto; padding-right: 4px;
}
.psx-prod-grid::-webkit-scrollbar { width: 8px; }
.psx-prod-grid::-webkit-scrollbar-thumb { background: rgba(47,92,168,0.20); border-radius: 999px; }

.psx-prod {
  position: relative; cursor: pointer; border-radius: 12px;
  overflow: hidden; border: 1.5px solid var(--border);
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  transition: border-color var(--dur-base, 200ms) var(--ease, ease),
              transform var(--dur-fast, 120ms) var(--ease, ease),
              box-shadow var(--dur-base, 200ms) var(--ease, ease);
}
.psx-prod:hover { transform: translateY(-2px); border-color: var(--border-hover, rgba(80,130,200,0.28)); }
.psx-prod.is-selected {
  border-color: var(--accent, #2f5ca8);
  box-shadow: 0 0 0 1px var(--accent, #2f5ca8), var(--glow-accent, 0 0 18px rgba(47,92,168,0.18));
}
.psx-prod-thumb {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--bg-tertiary, #1c2030);
}
.psx-prod-noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 3 / 4; font-size: 18px; color: var(--text-muted);
  background: var(--bg-tertiary, #1c2030);
}
.psx-prod-name {
  padding: 6px 8px; font-size: 11px; line-height: 1.3; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.psx-prod.is-selected .psx-prod-name { color: var(--text-primary); }
.psx-prod-check {
  position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--accent, #2f5ca8); color: #fff;
  display: none; align-items: center; justify-content: center; font-size: 12px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.5));
}
.psx-prod.is-selected .psx-prod-check { display: flex; }

/* ── center stage ─────────────────────────────────────────── */
.psx-stage { display: flex; flex-direction: column; gap: 22px; }

.psx-selected-row { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.psx-selected-thumb {
  width: 96px; height: 128px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg-tertiary, #1c2030);
}
.psx-selected-empty-thumb {
  width: 96px; height: 128px; border-radius: 12px;
  border: 1px dashed var(--border); background: var(--bg-secondary, rgba(255,255,255,0.02));
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 22px;
}
.psx-selected-meta .psx-selected-label { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.psx-selected-meta .psx-selected-hint { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* preset rail */
.psx-preset-rail {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 560px) { .psx-preset-rail { grid-template-columns: repeat(2, 1fr); } }
.psx-preset {
  text-align: left; cursor: pointer; padding: 13px 14px; border-radius: 12px;
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  border: 1.5px solid var(--border); color: var(--text-secondary);
  transition: border-color var(--dur-base, 200ms) var(--ease, ease),
              background var(--dur-base, 200ms) var(--ease, ease),
              transform var(--dur-fast, 120ms) var(--ease, ease);
}
.psx-preset:hover { transform: translateY(-2px); border-color: var(--border-hover, rgba(80,130,200,0.28)); }
.psx-preset.is-selected {
  border-color: var(--accent, #2f5ca8);
  background: var(--accent-subtle, rgba(47,92,168,0.14));
  color: var(--text-primary);
}
.psx-preset-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.psx-preset-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }

/* quality toggle */
.psx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.psx-quality { display: inline-flex; align-items: center; gap: 8px; }
.psx-quality-label { font-size: 12px; color: var(--text-muted); }
.psx-seg {
  display: inline-flex; padding: 3px; gap: 3px; border-radius: 999px;
  background: var(--bg-secondary, rgba(255,255,255,0.04)); border: 1px solid var(--border);
}
.psx-seg-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--text-secondary); transition: background var(--dur-fast, 120ms) var(--ease, ease), color var(--dur-fast, 120ms) var(--ease, ease);
}
.psx-seg-btn.is-active { background: var(--accent, #2f5ca8); color: #fff; }

/* generate button */
.psx-generate {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-left: auto; padding: 11px 24px; border-radius: 12px; border: none;
  background: var(--accent, #2f5ca8); color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-base, 200ms) var(--ease, ease), opacity var(--dur-base, 200ms) var(--ease, ease), transform var(--dur-fast, 120ms) var(--ease, ease);
  box-shadow: var(--glow-accent, 0 0 18px rgba(47,92,168,0.18));
}
.psx-generate:hover:not(:disabled) { background: var(--accent-hover, #3a68b0); transform: translateY(-1px); }
.psx-generate:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (max-width: 560px) { .psx-generate { margin-left: 0; width: 100%; } }

.psx-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: psx-spin .7s linear infinite;
}
@keyframes psx-spin { to { transform: rotate(360deg); } }

/* ── results gallery (bottom) ─────────────────────────────── */
.psx-gallery-wrap { margin-top: 26px; }
.psx-gallery-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.psx-gallery-head h2 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.psx-gallery-head .psx-count { font-size: 12px; color: var(--text-muted); }

.psx-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}

.psx-shot {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-md, 0 4px 18px rgba(0,0,0,0.5));
  animation: psx-fade-in var(--dur-slow, 320ms) var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes psx-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.psx-shot-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg-tertiary, #1c2030); cursor: zoom-in; }
.psx-shot-body { padding: 12px 14px; }
.psx-shot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.psx-shot-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  font-size: 11px; font-weight: 600; border-radius: 999px;
  background: var(--accent-subtle, rgba(47,92,168,0.14)); color: var(--accent-secondary, #3f6fbb);
}
.psx-shot-meta { font-size: 10.5px; color: var(--text-muted); }
.psx-shot-actions { display: flex; gap: 8px; }
.psx-shot-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border-radius: 9px; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-secondary, rgba(255,255,255,0.03)); color: var(--text-secondary);
  transition: border-color var(--dur-fast, 120ms) var(--ease, ease), color var(--dur-fast, 120ms) var(--ease, ease), background var(--dur-fast, 120ms) var(--ease, ease);
  text-decoration: none;
}
.psx-shot-btn:hover { border-color: var(--border-hover, rgba(80,130,200,0.28)); color: var(--text-primary); }
.psx-shot-btn.is-primary { background: var(--accent-subtle, rgba(47,92,168,0.14)); color: var(--accent-secondary, #3f6fbb); border-color: transparent; }

/* skeleton placeholder while generating */
.psx-shot-skeleton .psx-shot-img {
  background: linear-gradient(100deg, var(--bg-tertiary, #1c2030) 30%, rgba(255,255,255,0.06) 50%, var(--bg-tertiary, #1c2030) 70%);
  background-size: 220% 100%; animation: psx-shimmer 1.4s ease-in-out infinite; cursor: default;
}
@keyframes psx-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.psx-skeleton-line { height: 11px; border-radius: 6px; background: var(--bg-tertiary, #1c2030); }

/* ── empty states (honest) ────────────────────────────────── */
.psx-empty {
  border: 1px dashed var(--border); border-radius: 16px;
  padding: 38px 24px; text-align: center; color: var(--text-muted);
}
.psx-empty-icon { font-size: 26px; opacity: .6; margin-bottom: 10px; }
.psx-empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); margin: 0 0 4px; }
.psx-empty-sub { font-size: 12.5px; margin: 0; }

/* loading inline skeletons for grids */
.psx-skel-card { border-radius: 12px; aspect-ratio: 3 / 4; background: var(--bg-tertiary, #1c2030); animation: psx-shimmer 1.4s ease-in-out infinite; background-size: 220% 100%; background-image: linear-gradient(100deg, var(--bg-tertiary, #1c2030) 30%, rgba(255,255,255,0.06) 50%, var(--bg-tertiary, #1c2030) 70%); }

/* lightbox */
.psx-lightbox {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 5vh 5vw;
  background: rgba(8, 11, 16, 0.86); backdrop-filter: blur(6px);
  animation: psx-fade-in .2s ease both;
}
.psx-lightbox.is-open { display: flex; }
.psx-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 12px; box-shadow: var(--shadow-lg, 0 14px 46px rgba(0,0,0,0.6)); }
.psx-lightbox-close {
  position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .psx-shot, .psx-lightbox, .psx-spinner, .psx-shot-skeleton .psx-shot-img, .psx-skel-card { animation: none !important; }
  .psx-prod, .psx-preset, .psx-generate { transition: none !important; }
}