/* ==========================================================================
   3D Magic Tree Share & QR Modal (.share-tree-modal)
   Apple-inspired Liquid Glass design with interactive seasonal 3D tree canvas.
   ========================================================================== */

.share-tree-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.46);
  -webkit-backdrop-filter: var(--glass-filter-navbar, blur(24px) saturate(2));
  backdrop-filter: var(--glass-filter-navbar, blur(24px) saturate(2));
  animation: shareBackdropIn 240ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

.share-tree-modal[hidden] {
  display: none !important;
}

@keyframes shareBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes shareDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.share-tree-dialog {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  padding: 26px 24px 22px;
  border-radius: var(--radius-lg, 22px);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--ink, #1d1d1f);
  box-shadow:
    var(--glass-inner-glow, inset 0 1px 1px rgba(255, 255, 255, 0.28)),
    0 32px 84px rgba(0, 0, 0, 0.28),
    0 8px 24px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: var(--glass-filter-md, blur(16px) saturate(1.8));
  backdrop-filter: var(--glass-filter-md, blur(16px) saturate(1.8));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  animation: shareDialogIn 280ms var(--ease, cubic-bezier(0.2, 0.8, 0.2, 1));
  overflow: hidden;
}

html[data-theme="dark"] .share-tree-dialog {
  background: rgba(26, 28, 36, 0.82);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    0 36px 90px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.3);
  color: #f5f5f7;
}

/* Close Button */
.share-tree-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: var(--pill-surface, rgba(0, 0, 0, 0.06));
  color: var(--muted, #6e6e73);
  font-size: 18px;
  cursor: pointer;
  transition: all 180ms ease;
}

.share-tree-close:hover {
  background: var(--pill-surface-hover, rgba(0, 0, 0, 0.1));
  color: var(--ink, #1d1d1f);
  transform: scale(1.08);
}

/* Header */
.share-tree-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.share-tree-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue, #0071e3);
}

.share-tree-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.share-tree-desc {
  font-size: 13px;
  color: var(--muted, #6e6e73);
  max-width: 340px;
  line-height: 1.45;
}

/* Seasonal Tabs */
.share-tree-seasons {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: var(--pill-surface, rgba(0, 0, 0, 0.05));
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
}

html[data-theme="dark"] .share-tree-seasons {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.08);
}

.share-season-btn {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6e6e73);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
}

.share-season-btn:hover {
  color: var(--ink, #1d1d1f);
}

.share-season-btn.is-active {
  background: #ffffff;
  color: var(--ink, #1d1d1f);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] .share-season-btn.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* 3D Canvas Stage Container */
.share-canvas-stage {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 20px;
  background: var(--card-surface, rgba(255, 255, 255, 0.45));
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 12px 32px rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: grab;
}

.share-canvas-stage:active {
  cursor: grabbing;
}

html[data-theme="dark"] .share-canvas-stage {
  background: rgba(18, 20, 26, 0.65);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 16px 36px rgba(0, 0, 0, 0.4);
}

#share-tree-canvas {
  width: 280px;
  height: 280px;
  display: block;
}

/* View Mode Badge & Toggle */
.share-view-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink, #1d1d1f);
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .share-view-toggle {
  background: rgba(30, 32, 40, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f5f5f7;
}

.share-view-toggle:hover {
  transform: scale(1.05);
  background: var(--blue, #0071e3);
  color: #ffffff;
  border-color: var(--blue, #0071e3);
}

/* Action Buttons */
.share-tree-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.share-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  background: var(--card-surface, rgba(0, 0, 0, 0.04));
  color: var(--ink, #1d1d1f);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
}

.share-action-btn:hover {
  background: var(--pill-surface-hover, rgba(0, 0, 0, 0.08));
  transform: translateY(-1px);
}

.share-action-primary {
  background: var(--blue, #0071e3);
  color: #ffffff;
  border-color: var(--blue, #0071e3);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
}

.share-action-primary:hover {
  background: #0077ed;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 113, 227, 0.45);
}

/* Header Trigger Button */
.nav-share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--card-border, rgba(0, 0, 0, 0.08));
  background: var(--pill-surface, rgba(0, 0, 0, 0.04));
  color: var(--ink, #1d1d1f);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
}

.nav-share-trigger:hover {
  background: var(--pill-surface-hover, rgba(0, 0, 0, 0.08));
  transform: translateY(-1px);
}

@media (max-width: 820px) {
  .nav-share-trigger span.nav-share-text {
    display: none;
  }
}

/* Toast Feedback */
.share-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1500;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(29, 29, 31, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: all 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.share-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}