/*
 * Shortcode Popup – popup.css
 * Plugin: Shortcode Popup v1.0.0
 * ─────────────────────────────────────────────────────────────────────────────
 * Design: Refined dark-glass aesthetic with liquid-ink motion.
 * Palette: deep navy base · electric amber accent · warm white text
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  --scp-accent:        #f5a623;
  --scp-accent-dark:   #c97f0a;
  --scp-accent-glow:   rgba(245, 166, 35, 0.35);
  --scp-bg-overlay:    rgba(6, 8, 20, 0.85);
  --scp-dialog-bg:     #0d1117;
  --scp-dialog-border: rgba(245, 166, 35, 0.18);
  --scp-header-border: rgba(255, 255, 255, 0.06);
  --scp-text:          #e8eaf0;
  --scp-text-muted:    rgba(232, 234, 240, 0.55);
  --scp-radius:        18px;
  --scp-radius-btn:    50px;
  --scp-shadow:        0 32px 80px rgba(0, 0, 0, 0.70),
                       0  8px 24px rgba(0, 0, 0, 0.45),
                       0  0  0  1px rgba(245, 166, 35, 0.10);
  --scp-transition:    cubic-bezier(0.22, 1, 0.36, 1);
  --scp-duration:      0.42s;
}

/* ── Trigger Button ─────────────────────────────────────────────────────────── */
/*.scp-trigger-btn {*/
/*  display:         inline-flex;*/
/*  align-items:     center;*/
/*  gap:             10px;*/
/*  padding:         14px 28px;*/
/*  background:      linear-gradient(135deg, var(--scp-accent) 0%, #e8881a 100%);*/
/*  color:           #0d1117;*/
/*  font-family:     'Georgia', 'Times New Roman', serif;*/
/*  font-size:       15px;*/
/*  font-weight:     700;*/
/*  letter-spacing:  0.04em;*/
/*  text-transform:  uppercase;*/
/*  border:          none;*/
/*  border-radius:   var(--scp-radius-btn);*/
/*  cursor:          pointer;*/
/*  position:        relative;*/
/*  overflow:        hidden;*/
/*  transition:      transform 0.18s var(--scp-transition),*/
/*                   box-shadow 0.25s var(--scp-transition),*/
/*                   background 0.25s ease;*/
/*  box-shadow:      0 4px 20px var(--scp-accent-glow),*/
/*                   0 2px  6px rgba(0,0,0,0.25);*/
/*  outline:         none;*/
/*}*/

/* Liquid shimmer sweep */
/*.scp-trigger-btn::before {*/
/*  content:          '';*/
/*  position:         absolute;*/
/*  inset:            0;*/
/*  background:       linear-gradient(*/
/*                      110deg,*/
/*                      transparent 30%,*/
/*                      rgba(255,255,255,0.28) 50%,*/
/*                      transparent 70%*/
/*                    );*/
/*  background-size:  220% 100%;*/
/*  background-position: 200% 0;*/
/*  transition:       background-position 0.55s ease;*/
/*}*/

/*.scp-trigger-btn:hover::before {*/
/*  background-position: -60% 0;*/
/*}*/

/*.scp-trigger-btn:hover {*/
/*  transform:   translateY(-2px) scale(1.02);*/
/*  box-shadow:  0 8px 32px var(--scp-accent-glow),*/
/*               0 4px 12px rgba(0,0,0,0.30);*/
/*}*/

/*.scp-trigger-btn:active {*/
/*  transform:   translateY(0) scale(0.98);*/
/*  box-shadow:  0 2px 10px var(--scp-accent-glow);*/
/*}*/

/*.scp-trigger-btn:focus-visible {*/
/*  outline: 3px solid var(--scp-accent);*/
/*  outline-offset: 3px;*/
/*}*/

.scp-btn-icon {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.22s var(--scp-transition);
}

.scp-trigger-btn:hover .scp-btn-icon {
  transform: rotate(45deg);
}

/* ── Overlay ────────────────────────────────────────────────────────────────── */
.scp-overlay {
  position:         fixed;
  inset:            0;
  z-index:          999998;
  background:       var(--scp-bg-overlay);
  backdrop-filter:  blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  display:          flex;
  align-items:      center;
  justify-content:  end;
  padding:          20px;
  opacity:          0;
  visibility:       hidden;
  transition:       opacity    var(--scp-duration) var(--scp-transition),
                    visibility var(--scp-duration) var(--scp-transition);
}

/* Radial spotlight effect behind the dialog */
.scp-overlay::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(
                ellipse 60% 50% at 50% 50%,
                rgba(245, 166, 35, 0.06) 0%,
                transparent 70%
              );
  pointer-events: none;
}

.scp-overlay.is-open {
  opacity:    1;
  visibility: visible;
}

/* ── Dialog Box ─────────────────────────────────────────────────────────────── */
.scp-dialog {
  position:         relative;
  width:            100%;
  max-width:        680px;
  max-height:       90vh;
  background:       #fff !important;
  border:           1px solid var(--scp-dialog-border);
  border-radius:    0;
  box-shadow:       var(--scp-shadow);
  display:          flex;
  flex-direction:   column;
  overflow:         hidden;
  color:            var(--scp-text);
  transform:        translateY(36px) scale(0.94);
  opacity:          0;
  transition:       transform var(--scp-duration) var(--scp-transition),
                    opacity   var(--scp-duration) var(--scp-transition);
}

/* Thin accent top stripe */
.scp-dialog::before {
  content:   '';
  position:  absolute;
  top:       0;
  left:      10%;
  right:     10%;
  height:    2px;
  background: linear-gradient(
                90deg,
                transparent,
                var(--scp-accent) 40%,
                var(--scp-accent) 60%,
                transparent
              );
  border-radius: 0 0 4px 4px;
}

.scp-overlay.is-open .scp-dialog {
  transform: translateY(0) scale(1);
  opacity:   1;
}

/* ── Dialog Header ──────────────────────────────────────────────────────────── */
.scp-dialog-header {
  display:         flex;
  align-items:     center;
  justify-content: end;
  padding:         22px 28px 20px;
  border-bottom:   1px solid var(--scp-header-border);
  flex-shrink:     0;
}

.scp-dialog-title {
  margin:         0;
  font-family:    'Georgia', 'Times New Roman', serif;
  font-size:      1.25rem;
  font-weight:    700;
  letter-spacing: 0.02em;
  color:          var(--scp-text);
  line-height:    1.3;
}

/* Amber underline accent on title */
.scp-dialog-title::after {
  content:    '';
  display:    block;
  width:      36px;
  height:     2px;
  background: var(--scp-accent);
  margin-top: 6px;
  border-radius: 2px;
}

/* ── Close Button ───────────────────────────────────────────────────────────── */
.scp-close-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  padding:         0;
  background:      #D97F5E;
  border:          1px solid rgba(255,255,255,0.08);
  border-radius:   50%;
  color:           var(--scp-text-muted);
  cursor:          pointer;
  transition:      background  0.20s ease,
                   color       0.20s ease,
                   border-color 0.20s ease,
                   transform   0.20s var(--scp-transition),
                   box-shadow  0.20s ease;
  flex-shrink:     0;
  outline:         none;
  margin-left:     16px;
}

.scp-close-btn svg {
  width:  16px;
  height: 16px;
  display: block;
  transition: transform 0.25s var(--scp-transition);
}

.scp-close-btn:hover {
  background:   rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.40);
  color:        var(--scp-accent);
  transform:    scale(1.10);
  box-shadow:   0 0 14px var(--scp-accent-glow);
}

.scp-close-btn:hover svg {
  transform: rotate(90deg);
  fill: #000;
}

.scp-close-btn:active {
  transform: scale(0.94);
}

.scp-close-btn:focus-visible {
  outline: 2px solid var(--scp-accent);
  outline-offset: 2px;
}

/* ── Dialog Body ────────────────────────────────────────────────────────────── */
.scp-dialog-body {
  /*padding:    28px;*/
  overflow-y: auto;
  flex:       1 1 auto;
  color:      var(--scp-text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size:   15px;
  line-height: 1.7;

  /* Custom scrollbar */
  scrollbar-width: thin;
  /*scrollbar-color: rgba(245,166,35,0.35) transparent;*/
}

.scp-dialog-body::-webkit-scrollbar {
  width: 5px;
}
.scp-dialog-body::-webkit-scrollbar-track {
  background: transparent;
}
.scp-dialog-body::-webkit-scrollbar-thumb {
  background:    rgba(245, 166, 35, 0.35);
  border-radius: 10px;
}
.scp-dialog-body::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.60);
}

/* Inherited content resets */
.scp-dialog-body a {
  color: var(--scp-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.scp-dialog-body a:hover {
  color: #ffd580;
}
.scp-dialog-body img,
.scp-dialog-body video,
.scp-dialog-body iframe {
  max-width: 100%;
  border-radius: 8px;
}

/* ── Keyboard trap indicator (screen-reader focus ring) ─────────────────────── */
.scp-dialog *:focus-visible {
  outline:        2px solid var(--scp-accent);
  outline-offset: 2px;
  border-radius:  4px;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .scp-overlay {
    padding:    12px;
    align-items: flex-end;
  }

  .scp-dialog {
    max-width:    100%;
    max-height:   88vh;
    border-radius: var(--scp-radius) var(--scp-radius) 0 0;
    transform:    translateY(60px) scale(1);
  }

  .scp-overlay.is-open .scp-dialog {
    transform: translateY(0) scale(1);
  }

  .scp-dialog-header {
    padding: 18px 20px 16px;
  }

  .scp-dialog-body {
    padding: 20px;
  }
}

/* ── Reduced-motion respect ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scp-overlay,
  .scp-dialog,
  .scp-trigger-btn,
  .scp-close-btn,
  .scp-close-btn svg,
  .scp-btn-icon,
  .scp-trigger-btn::before {
    transition: none !important;
    animation:  none !important;
  }
}