/* ==========================================================================
   IKON — Promotional Popup Widget — Styles
   Uses the same brand tokens as the main site (assets/css/style.css).
   If style.css is already loaded on the page, these var() calls will pick
   up the real IKON palette automatically. The fallbacks after the commas
   only kick in if this file is used stand-alone, without style.css.
   ========================================================================== */

:root {
  /* Brand colors — fallbacks match assets/css/style.css exactly */
  --promo-magenta: var(--ikon-magenta, #ec1279);
  --promo-purple: var(--ikon-purple, #5b2a8c);
  --promo-orange: var(--ikon-orange, #f4691e);
  --promo-gold: var(--ikon-gold, #f7b733);
  --promo-navy: var(--ikon-navy, #2c2a4a);
  --promo-cream: var(--ikon-cream, #faf9f6);
  --promo-white: var(--ikon-white, #ffffff);
  --promo-gray: var(--ikon-gray, #6b7280);

  --promo-gradient-brand: var(
    --gradient-brand,
    linear-gradient(135deg, #f4691e 0%, #f7b733 32%, #5b2a8c 68%, #ec1279 100%)
  );

  --promo-radius: 18px;
  --promo-radius-sm: 12px;
  --promo-shadow:
    0 20px 60px rgba(44, 42, 74, 0.28), 0 6px 18px rgba(44, 42, 74, 0.14);
  --promo-duration: 0.4s;
  --promo-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --promo-ease-out: cubic-bezier(0.4, 0, 0.2, 1);

  --promo-font-display: var(--font-display, "Georgia", serif);
  --promo-font-body: var(--font-body, "Segoe UI", Arial, sans-serif);
  --promo-font-label: var(--font-label, "Segoe UI", Arial, sans-serif);
}

/* ---------------------------------------------------------------------- */
/* Positioning + visibility states                                         */
/* ---------------------------------------------------------------------- */
/* .promo-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 360px;
  max-width: calc(100% - 30px);
  z-index: 999999;

  Hidden by default: faded out, scaled down, shifted down slightly 
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  pointer-events: none;
  visibility: hidden;

  transition:
    opacity var(--promo-duration) var(--promo-ease-out),
    transform var(--promo-duration) var(--promo-ease),
    visibility 0s linear var(--promo-duration);
} */
.promo-popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);

  z-index: 999999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}
/* .promo-popup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity var(--promo-duration) var(--promo-ease-out),
    transform var(--promo-duration) var(--promo-ease),
    visibility 0s linear 0s;
} */
.promo-popup.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Explicit closing state — plays the fade-out + slide-down before the
   widget is fully hidden (JS toggles this instead of jumping straight
   back to the default hidden transform, so the reverse animation reads
   as intentional rather than an abrupt cut). */
/* .promo-popup.is-closing {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  pointer-events: none;
} */
.promo-popup.is-closing {
  opacity: 0;
}

/* ---------------------------------------------------------------------- */
/* Card shell                                                              */
/* ---------------------------------------------------------------------- */
/* .promo-popup__card {
  position: relative;
  display: flex;
  background: var(--promo-white);
  border-radius: var(--promo-radius);
  box-shadow: var(--promo-shadow);
  overflow: hidden;
  font-family: var(--promo-font-body);
} */
.promo-popup__card {
  position: relative;
  width: 760px;
  max-width: 92%;
  min-height: 380px;

  display: flex;

  background: #fff;
  border-radius: 22px;
  overflow: hidden;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);

  transform: scale(0.85);
  transition: transform 0.35s ease;
}
.promo-popup.is-visible .promo-popup__card {
  transform: scale(1);
}
/* ---------------------------------------------------------------------- */
/* Close button                                                            */
/* ---------------------------------------------------------------------- */
.promo-popup__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--promo-white);
  color: var(--promo-navy);
  box-shadow: 0 4px 12px rgba(44, 42, 74, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition:
    background var(--promo-duration) var(--promo-ease-out),
    color var(--promo-duration) var(--promo-ease-out),
    transform 0.25s var(--promo-ease);
}
.promo-popup__close svg {
  width: 15px;
  height: 15px;
}
.promo-popup__close:hover {
  background: var(--promo-magenta);
  color: var(--promo-white);
  transform: rotate(90deg);
}
.promo-popup__close:focus-visible {
  outline: 2px solid var(--promo-magenta);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Left column — image (40%)                                               */
/* ---------------------------------------------------------------------- */
.promo-popup__media {
  flex: 0 0 40%;
  max-width: 40%;
  position: relative;
  min-height: 100%;
}
.promo-popup__img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
  border-radius: var(--promo-radius) 0 0 var(--promo-radius);
  box-shadow: inset -8px 0 24px rgba(44, 42, 74, 0.08);
}

/* ---------------------------------------------------------------------- */
/* Right column — content (60%)                                            */
/* ---------------------------------------------------------------------- */
/* .promo-popup__content {
  flex: 0 0 60%;
  max-width: 60%;
  padding: 18px 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
} */
.promo-popup__content {
  flex: 0 0 60%;
  max-width: 60%;

  padding: 24px 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Main change */

  min-height: 380px; /* Card ni height jetli */
}

.promo-popup__eyebrow {
  display: inline-block;
  font-family: var(--promo-font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--promo-magenta);
  margin-bottom: 2px;
}

.promo-popup__heading {
  margin: 8px 0 12px;
  font-family: var(--promo-font-display);
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--promo-navy);
}

.promo-popup__desc {
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--promo-gray);
}

.promo-popup__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  padding: 8px 10px;
  background: var(--promo-cream);
  border-radius: var(--promo-radius-sm);
  border: 1px dashed rgba(44, 42, 74, 0.18);
}
.promo-popup__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.promo-popup__meta-label {
  font-family: var(--promo-font-label);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--promo-gray);
}
.promo-popup__meta-value {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--promo-navy);
}
.promo-popup__code {
  font-family: var(--promo-font-label);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--promo-white);
  background: var(--promo-gradient-brand);
  padding: 2px 9px;
  border-radius: 999px;
}

.promo-popup__discount {
  font-size: 11.5px;

  color: var(--promo-navy);
  margin: 12px 0 18px;
  line-height: 1.7;
}
.promo-popup__discount strong {
  color: var(--promo-magenta);
}

/* ---------------------------------------------------------------------- */
/* CTA button                                                              */
/* ---------------------------------------------------------------------- */
.promo-popup__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--promo-gradient-brand);
  color: var(--promo-white);
  font-family: var(--promo-font-body);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;

  box-shadow: 0 8px 22px rgba(236, 18, 121, 0.32);
  transition:
    transform 0.25s var(--promo-ease),
    box-shadow var(--promo-duration) var(--promo-ease-out);
  animation: promo-pulse 2.4s ease-in-out infinite;
}
.promo-popup__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--promo-ease);
}
.promo-popup__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(236, 18, 121, 0.42);
  animation-play-state: paused;
}
.promo-popup__cta:hover svg {
  transform: translateX(3px);
}
.promo-popup__cta:focus-visible {
  outline: 2px solid var(--promo-navy);
  outline-offset: 3px;
}

@keyframes promo-pulse {
  0%,
  100% {
    box-shadow: 0 8px 22px rgba(236, 18, 121, 0.32);
  }
  50% {
    box-shadow: 0 8px 26px rgba(236, 18, 121, 0.55);
  }
}
.promo-popup__code-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-popup__copy-btn {
  width: 34px;
  height: 34px;

  border: none;
  border-radius: 50%;

  background: #5b2a8c;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition: 0.3s ease;
}

.promo-popup__copy-btn:hover {
  background: #ec1279;
  transform: scale(1.08);
}

.promo-popup__copy-btn i {
  font-size: 15px;
}

.promo-popup__copy-btn.copied {
  background: #16a34a;
}
/* ---------------------------------------------------------------------- */
/* Responsive                                                               */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* .promo-popup {
    right: 15px;
    bottom: 15px;
    left: 15px;
    width: auto;
    max-width: calc(100% - 30px);
  } */
  .promo-popup__card {
    width: 95%;
    flex-direction: column;
    min-height: auto;
  }

  .promo-popup__media,
  .promo-popup__content {
    max-width: 100%;
    flex: 1;
  }

  .promo-popup__img {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .promo-popup__card {
    flex-direction: column;
  }
  .promo-popup__media,
  .promo-popup__content {
    max-width: 100%;
    flex: 1 1 auto;
  }
  .promo-popup__img {
    min-height: 130px;
    border-radius: var(--promo-radius) var(--promo-radius) 0 0;
  }
  .promo-popup__content {
    padding: 16px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .promo-popup,
  .promo-popup__close,
  .promo-popup__cta,
  .promo-popup__cta svg {
    transition: none !important;
    animation: none !important;
  }
}