/*!
 * Sales Notification — Frontend Styles
 * Version: 1.0.0
 * License: GPL v2 or later
 */

/* ==========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
  --sn-bg:              #ffffff;
  --sn-color-text:      #333333;
  --sn-color-secondary: #777777;
  --sn-color-accent:    #0071a1;
  --sn-color-border:    #e0e0e0;
  --sn-border-width:    1px;
  --sn-border-radius:   8px;
  --sn-shadow-soft:     0 4px 16px rgba(0, 0, 0, 0.10);
  --sn-shadow-medium:   0 8px 24px rgba(0, 0, 0, 0.16);
  --sn-shadow-strong:   0 12px 36px rgba(0, 0, 0, 0.24);
  --sn-font-family:     inherit;
  --sn-font-size:       14px;
  --sn-font-weight:     400;
  --sn-image-size:      60px;
  --sn-max-width:       320px;
  --sn-gap:             12px;
  --sn-padding:         14px 16px;
  --sn-anim-duration:   350ms;
  --sn-anim-easing:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --sn-z-index:         999999;
}

/* ==========================================================================
   2. Popup Container & Base
   ========================================================================== */
.sn-popup {
  position: fixed;
  z-index: var(--sn-z-index);
  max-width: var(--sn-max-width);
  width: calc(100% - 32px);
  background: var(--sn-bg);
  color: var(--sn-color-text);
  font-family: var(--sn-font-family);
  font-size: var(--sn-font-size);
  font-weight: var(--sn-font-weight);
  line-height: 1.5;
  border: var(--sn-border-width) solid var(--sn-color-border);
  border-radius: var(--sn-border-radius);
  padding: var(--sn-padding);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  will-change: transform, opacity;
}

.sn-popup * {
  box-sizing: border-box;
}

/* Shadow variants */
.sn-shadow-none   { box-shadow: none; }
.sn-shadow-soft   { box-shadow: var(--sn-shadow-soft); }
.sn-shadow-medium { box-shadow: var(--sn-shadow-medium); }
.sn-shadow-strong { box-shadow: var(--sn-shadow-strong); }

/* ==========================================================================
   3. Positions
   ========================================================================== */
.sn-pos-bottom-left   { bottom: 24px; left: 24px; }
.sn-pos-bottom-right  { bottom: 24px; right: 24px; }
.sn-pos-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
.sn-pos-top-left      { top: 80px;   left: 24px; }
.sn-pos-top-right     { top: 80px;   right: 24px; }
.sn-pos-top-center    { top: 80px;   left: 50%; transform: translateX(-50%); }

/* ==========================================================================
   4. Template 1 — Horizontal (image left, text right)
   ========================================================================== */
.sn-template-1 .sn-popup__inner {
  display: flex;
  align-items: center;
  gap: var(--sn-gap);
}

.sn-template-1 .sn-popup__image-wrap {
  flex-shrink: 0;
}

.sn-template-1 .sn-popup__image {
  width: var(--sn-image-size);
  height: var(--sn-image-size);
  object-fit: cover;
  border-radius: calc(var(--sn-border-radius) * 0.6);
  display: block;
}

.sn-template-1 .sn-popup__content {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   5. Template 2 — Vertical (image top, text below)
   ========================================================================== */
.sn-template-2 .sn-popup__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sn-gap);
}

.sn-template-2 .sn-popup__image {
  width: var(--sn-image-size);
  height: var(--sn-image-size);
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.sn-template-2 .sn-popup__content {
  width: 100%;
}

/* ==========================================================================
   6. Template 3 — Minimal (text only)
   ========================================================================== */
.sn-template-3 .sn-popup__inner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sn-template-3 .sn-popup__image-wrap {
  display: none;
}

.sn-template-3 .sn-popup__content {
  flex: 1;
}

.sn-template-3 .sn-popup__name::before {
  content: "🛒 ";
}

/* ==========================================================================
   7. Content Elements
   ========================================================================== */
.sn-popup__name {
  margin: 0 0 2px;
  font-size: var(--sn-font-size);
  font-weight: 600;
  color: var(--sn-color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sn-popup__name strong {
  color: var(--sn-color-text);
}

.sn-popup__product {
  margin: 0 0 4px;
  font-size: var(--sn-font-size);
  font-weight: 500;
  color: var(--sn-color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sn-popup__product:hover {
  text-decoration: underline;
}

.sn-popup__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.sn-popup__location,
.sn-popup__time {
  font-size: calc(var(--sn-font-size) - 1px);
  color: var(--sn-color-secondary);
  line-height: 1.4;
}

.sn-popup__location::before {
  content: "📍 ";
  font-size: 11px;
}

.sn-popup__time::before {
  content: "🕒 ";
  font-size: 11px;
}

/* Avatar */
.sn-popup__avatar {
  width: var(--sn-image-size);
  height: var(--sn-image-size);
  object-fit: cover;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

/* Initials avatar fallback */
.sn-popup__avatar-initials {
  width: var(--sn-image-size);
  height: var(--sn-image-size);
  border-radius: 50%;
  background: var(--sn-color-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--sn-image-size) * 0.35);
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}

/* ==========================================================================
   8. Close Button
   ========================================================================== */
.sn-popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--sn-color-secondary);
  padding: 0;
  transition: color 150ms ease, background 150ms ease;
  z-index: 1;
}

.sn-popup__close:hover,
.sn-popup__close:focus {
  color: var(--sn-color-text);
  background: rgba(0, 0, 0, 0.06);
  outline: 2px solid var(--sn-color-accent);
  outline-offset: 1px;
}

/* ==========================================================================
   9. Entrance Animations
   ========================================================================== */

/* slide-in */
@keyframes sn-slide-in-left {
  from { opacity: 0; transform: translateX(-120%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sn-slide-in-right {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes sn-slide-in-bottom {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sn-slide-in-top {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Center positions use vertical slide */
.sn-pos-bottom-center.sn-anim-in-slide-in { animation: sn-slide-in-bottom var(--sn-anim-duration) var(--sn-anim-easing) forwards; }
.sn-pos-top-center.sn-anim-in-slide-in    { animation: sn-slide-in-top    var(--sn-anim-duration) var(--sn-anim-easing) forwards; }
/* Left positions */
.sn-pos-bottom-left.sn-anim-in-slide-in,
.sn-pos-top-left.sn-anim-in-slide-in      { animation: sn-slide-in-left   var(--sn-anim-duration) var(--sn-anim-easing) forwards; }
/* Right positions */
.sn-pos-bottom-right.sn-anim-in-slide-in,
.sn-pos-top-right.sn-anim-in-slide-in     { animation: sn-slide-in-right  var(--sn-anim-duration) var(--sn-anim-easing) forwards; }

/* fade-in */
@keyframes sn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sn-anim-in-fade-in { animation: sn-fade-in var(--sn-anim-duration) ease forwards; }

/* bounce-in */
@keyframes sn-bounce-in {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.08); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
.sn-anim-in-bounce-in { animation: sn-bounce-in 500ms var(--sn-anim-easing) forwards; }

/* zoom-in */
@keyframes sn-zoom-in {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.sn-anim-in-zoom-in { animation: sn-zoom-in var(--sn-anim-duration) ease forwards; }

/* flip-in */
@keyframes sn-flip-in {
  from { opacity: 0; transform: rotateX(-90deg); transform-origin: top center; }
  to   { opacity: 1; transform: rotateX(0deg);   transform-origin: top center; }
}
.sn-anim-in-flip-in { animation: sn-flip-in var(--sn-anim-duration) ease forwards; perspective: 600px; }

/* ==========================================================================
   10. Exit Animations
   ========================================================================== */

/* fade-out */
@keyframes sn-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.sn-anim-out-fade-out { animation: sn-fade-out 250ms ease forwards; }

/* slide-out left/right */
@keyframes sn-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-120%); }
}
@keyframes sn-slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(120%); }
}
@keyframes sn-slide-out-down {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(120%); }
}
.sn-pos-bottom-left.sn-anim-out-slide-out,
.sn-pos-top-left.sn-anim-out-slide-out    { animation: sn-slide-out-left  250ms ease forwards; }
.sn-pos-bottom-right.sn-anim-out-slide-out,
.sn-pos-top-right.sn-anim-out-slide-out   { animation: sn-slide-out-right 250ms ease forwards; }
.sn-pos-bottom-center.sn-anim-out-slide-out,
.sn-pos-top-center.sn-anim-out-slide-out  { animation: sn-slide-out-down  250ms ease forwards; }

/* zoom-out */
@keyframes sn-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.8); }
}
.sn-anim-out-zoom-out { animation: sn-zoom-out 250ms ease forwards; }

/* ==========================================================================
   11. Hover / Interaction
   ========================================================================== */
.sn-popup:hover {
  transform: translateY(-2px);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.sn-pos-bottom-center:hover,
.sn-pos-top-center:hover {
  transform: translateX(-50%) translateY(-2px);
}

/* ==========================================================================
   12. Accessibility — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sn-popup,
  .sn-popup * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */
@media (max-width: 767px) {
  .sn-popup {
    max-width: 90vw;
    width: 90vw;
    bottom: 16px;
    left: 5vw !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  .sn-popup__image {
    width: calc(var(--sn-image-size) * 0.8);
    height: calc(var(--sn-image-size) * 0.8);
  }

  .sn-popup__name,
  .sn-popup__product {
    font-size: calc(var(--sn-font-size) - 1px);
  }
}

/* ==========================================================================
   14. RTL Support
   ========================================================================== */
[dir="rtl"] .sn-popup__close {
  right: auto;
  left: 8px;
}

[dir="rtl"] .sn-template-1 .sn-popup__inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .sn-popup__location::before,
[dir="rtl"] .sn-popup__time::before {
  margin-left: 2px;
  margin-right: 0;
}

[dir="rtl"] .sn-pos-bottom-left   { bottom: 24px; left: auto;  right: 24px; }
[dir="rtl"] .sn-pos-bottom-right  { bottom: 24px; right: auto; left: 24px;  }
[dir="rtl"] .sn-pos-top-left      { top: 80px;    left: auto;  right: 24px; }
[dir="rtl"] .sn-pos-top-right     { top: 80px;    right: auto; left: 24px;  }

/* ==========================================================================
   15. Utility — Hidden state
   ========================================================================== */
.sn-popup[hidden],
.sn-popup.sn-hidden {
  display: none !important;
}

.sn-popup.sn-exiting {
  pointer-events: none;
}