/* Dark theme for Gift Studio (gifts.stel.com).
   Loaded in both themes: also holds the theme toggle button
   styles and the view-transition rules used by promote-theme.js. */

:root {
  --gs-dark-bg-color: #1A2026;
  --gs-dark-surface: #212A33;
  --gs-dark-surface-hover: #293440;
  --gs-dark-text-primary: #fff;
  --gs-dark-text-secondary: #8794A1;
  --gs-dark-text-accent: #4CB2FF;
  --gs-dark-border: #293440;
  --gs-dark-border-light: #3a4756;
  --gs-dark-danger: #ff5863;
  --gs-dark-warning: #f28c48;
  --gs-dark-overlay: rgba(0, 0, 0, 0.55);
}

@property --pr-theme-hole-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ===== Theme toggle button (fixed, top-right) ===== */

.pr-theme-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #8a939d;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  opacity: 0.7;
  padding: 0 16px;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.15s ease;
  view-transition-name: pr-theme-toggle;
  z-index: 1001;
}
.pr-theme-toggle:hover {
  opacity: 1;
}
.pr-theme-toggle canvas,
.pr-theme-toggle--static:before {
  display: block;
  height: 22px;
  width: 22px;
}
.pr-theme-toggle--static canvas {
  display: none;
}
.pr-theme-toggle--static:before {
  content: '';
  background-size: contain;
  background-image: url('/img/themeMoon.webp');
}

/* Room in the header for the fixed toggle. */
#header-panel {
  padding-right: 66px;
}

html.pr-theme-switching body,
html.pr-theme-switching body * {
  transition: none !important;
}

::view-transition-group(root) {
  isolation: isolate;
  overflow: hidden;
}
::view-transition-image-pair(root) {
  isolation: auto;
  overflow: hidden;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 9999;
  will-change: clip-path;
  transform: translateZ(0);
}
::view-transition-new(root) { z-index: 1; }

:root.pr-theme-reveal::view-transition-old(root) {
  z-index: 9999;
  transform: none;
  will-change: auto;
  -webkit-mask-image: radial-gradient(
    circle at var(--pr-theme-origin-x) var(--pr-theme-origin-y),
    transparent 0,
    transparent var(--pr-theme-hole-radius),
    #000 calc(var(--pr-theme-hole-radius) + 1px)
  );
  mask-image: radial-gradient(
    circle at var(--pr-theme-origin-x) var(--pr-theme-origin-y),
    transparent 0,
    transparent var(--pr-theme-hole-radius),
    #000 calc(var(--pr-theme-hole-radius) + 1px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}
:root.pr-theme-reveal::view-transition-new(root) { z-index: 1; }

/* Theme toggle icon morph animation. */
@keyframes pr-icon-out {
  to { opacity: 0; transform: rotate(-90deg) scale(0.5); }
}
@keyframes pr-icon-in {
  from { opacity: 0; transform: rotate(90deg) scale(0.5); }
}
::view-transition-old(pr-theme-toggle) {
  animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) both pr-icon-out;
}
::view-transition-new(pr-theme-toggle) {
  animation: 500ms cubic-bezier(0.16, 1, 0.3, 1) both pr-icon-in;
}

/* ============ Core dark overrides ============ */

html[data-theme="dark"] {
  color-scheme: dark;
  background: var(--gs-dark-bg-color);
}
html[data-theme="dark"] body {
  color: var(--gs-dark-text-primary);
  background: var(--gs-dark-bg-color);
  -webkit-font-smoothing: antialiased;
  --text-color: var(--gs-dark-text-primary);
  --link-color: var(--gs-dark-text-accent);
}

html[data-theme="dark"] .pr-theme-toggle--static:before {
  background-image: url('/img/themeSun.webp');
}
html[data-theme="dark"] .pr-theme-toggle {
  color: #c2cbd4;
}

/* ============ Header ============ */

html[data-theme="dark"] #header-panel {
  border-bottom: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .header-auth-photo {
  background: var(--gs-dark-surface-hover);
}
html[data-theme="dark"] .header-auth-photo .photo-char {
  color: var(--gs-dark-text-secondary);
}
html[data-theme="dark"] .header-auth-name {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .header-auth-name:after {
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%226%22%20viewBox%3D%220%200%2013%206%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M%201.68%201%20L%205.8%204.46%20C%206.17%204.77%206.71%204.77%207.08%204.46%20L%2011.2%201%20L%2011.2%201%22%2F%3E%3C%2Fsvg%3E');
}

/* ============ Dropdowns ============ */

html[data-theme="dark"] ul.dropdown-menu {
  background: var(--gs-dark-surface);
  border: 1px solid var(--gs-dark-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] ul.dropdown-menu > li > a:hover,
html[data-theme="dark"] ul.dropdown-menu > li > a:focus {
  background: var(--gs-dark-surface-hover);
}
html[data-theme="dark"] a.dropdown-menu-item {
  color: #ffffff !important;
}

/* ============ Forms / inputs ============ */

html[data-theme="dark"] .form-control {
  color: var(--gs-dark-text-primary);
  background-color: var(--gs-dark-bg-color);
  border: 1px solid var(--gs-dark-border-light);
}
html[data-theme="dark"] .form-control::placeholder {
  color: var(--gs-dark-text-secondary);
}
html[data-theme="dark"] select.form-control:has(.select-default:checked) {
  color: var(--gs-dark-text-secondary);
}
html[data-theme="dark"] .form-control.error {
  border-color: var(--gs-dark-danger);
  --input-color: var(--gs-dark-danger);
}
html[data-theme="dark"] .gs-form-control-msg,
html[data-theme="dark"] .warn {
  color: var(--gs-dark-danger);
}
html[data-theme="dark"] .skins-row input {
  color: var(--gs-dark-text-primary);
}
html[data-theme="dark"] .help-block {
  color: var(--gs-dark-text-secondary);
}
html[data-theme="dark"] .btn-link {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .radio-item .radio-input-icon,
html[data-theme="dark"] .checkbox-item .checkbox-input-icon {
  border-color: var(--gs-dark-border-light);
  background: var(--gs-dark-bg-color);
}

/* ============ Collections table ============ */

html[data-theme="dark"] .gs-table {
  border: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .gs-row {
  border-bottom: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .gs-row:hover:not(.gs-row-selected) {
  background: rgba(255, 255, 255, 0.04);
}
html[data-theme="dark"] .gs-cell-errors {
  color: var(--gs-dark-danger) !important;
}
html[data-theme="dark"] .gs-status-select button {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .gs-sort-marker:before,
html[data-theme="dark"] .gs-sort-marker:after {
  background: url('data:image/svg+xml,%3Csvg%20height%3D%224%22%20viewBox%3D%220%200%207%204%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m3.71%203.29%202.78-2.78c.12-.12.12-.3%200-.42-.06-.06-.13-.09-.21-.09h-5.56c-.16%200-.3.13-.3.3%200%20.08.04.16.09.21l2.78%202.78c.12.12.3.12.42%200z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') no-repeat top;
}
html[data-theme="dark"] .gs-search-input {
  color: var(--gs-dark-text-primary);
  background-image: url('data:image/svg+xml,%3Csvg%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%238794A1%22%20stroke-width%3D%221.3%22%3E%3Ccircle%20cx%3D%2213.18%22%20cy%3D%2210.5%22%20r%3D%224.85%22%2F%3E%3Cpath%20d%3D%22m9.83%2014.38-3.83%203.83%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
html[data-theme="dark"] .gs-file-input-label {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .secondary-button {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .secondary-button::after {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%226%22%20viewBox%3D%220%200%2013%206%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%234CB2FF%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M%201.68%201%20L%205.8%204.46%20C%206.17%204.77%206.71%204.77%207.08%204.46%20L%2011.2%201%20L%2011.2%201%22%2F%3E%3C%2Fsvg%3E');
}

/* ============ Skins lists ============ */

html[data-theme="dark"] .gs-list-subheader {
  background: var(--gs-dark-surface);
  border-bottom: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .gs-error-banner {
  color: var(--gs-dark-danger);
  background: rgba(255, 88, 99, 0.1);
}
html[data-theme="dark"] .skins-row {
  border-bottom: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] #symbols_list .skins-row img {
  filter: brightness(0) invert(1);
}
html[data-theme="dark"] .gs-skins-list {
  border: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] #backdrops_list,
html[data-theme="dark"] #symbols_list {
  border: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .gs-row-total {
  background: var(--gs-dark-surface);
  border: 1px solid var(--gs-dark-border);
  border-top: none;
}
html[data-theme="dark"] .update-skins-button {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .update-skins-button:hover {
  background: rgba(76, 178, 255, 0.1);
}

/* ============ Gift preview ============ */

html[data-theme="dark"] .preview-skins-container {
  border: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .preview-skin {
  background: var(--gs-dark-surface);
}
html[data-theme="dark"] .preview-info {
  color: var(--gs-dark-text-secondary);
}
html[data-theme="dark"] .preview-info > div {
  color: var(--gs-dark-text-primary);
}
html[data-theme="dark"] .gs-gift-preview-plain {
  background: var(--gs-dark-surface);
  color: rgba(255, 255, 255, 0.25);
}
html[data-theme="dark"] .bg-image {
  background-color: var(--gs-dark-surface);
}
html[data-theme="dark"] .gs-user-photo img {
  background: var(--gs-dark-surface);
}
html[data-theme="dark"] .gs-upload-img-btn {
  background: var(--gs-dark-surface);
  border: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .gs-sticker-picker {
  background: var(--gs-dark-surface);
  border: 1px solid var(--gs-dark-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .gs-sticker-picker button:hover {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .gift-buy-button {
  color: var(--gs-dark-warning);
  background: rgba(242, 140, 72, 0.15);
}

/* ============ Rollout gallery / popups ============ */

html[data-theme="dark"] .gs-rollout-gallery {
  background: var(--gs-dark-bg-color);
}
html[data-theme="dark"] li.gs-rollout-gift {
  background: var(--gs-dark-surface);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .gs-rollout-upgrade-row {
  color: var(--gs-dark-text-secondary);
  background: var(--gs-dark-surface);
  border-bottom: 1px solid var(--gs-dark-border);
}
html[data-theme="dark"] .ui-sortable-placeholder {
  border-color: var(--gs-dark-border-light);
}
html[data-theme="dark"] .popup {
  background: var(--gs-dark-surface);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .gs-layer-popup {
  background: var(--gs-dark-surface);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .popup-button {
  color: var(--gs-dark-text-accent);
}
html[data-theme="dark"] .popup-button:hover {
  background: rgba(76, 178, 255, 0.12);
}