/**
 * Fleek Newsletter Pro - Sticky Bar Stylesheet
 *
 * Design principles:
 * - Three built-in themes: dark, light, brand
 * - Smooth slide-in animation (top and bottom positions)
 * - WCAG 2.1 AA colour contrast on all themes
 * - Fully keyboard-accessible (focus rings, Esc key handled in JS)
 * - Zero framework dependency - vanilla CSS only
 * - Bootstrap CSS variables used where available (J4/5/6 templates ship Bootstrap 5)
 *
 * @package  plg_system_fleeknewsletter
 * @version  1.0.0
 */

/* ============================================================
   CSS Custom Properties (tokens)
   ============================================================ */
:root {
  --flkn-font:         system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --flkn-radius:       6px;
  --flkn-transition:   0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --flkn-z:            9999;
  --flkn-bar-height:   auto;

  /* Dark theme (default) */
  --flkn-dark-bg:            #18181b;
  --flkn-dark-text:          #f4f4f5;
  --flkn-dark-subtext:       #a1a1aa;
  --flkn-dark-btn-bg:        #6366f1;
  --flkn-dark-btn-text:      #ffffff;
  --flkn-dark-btn-hover:     #4f46e5;
  --flkn-dark-input-bg:      #27272a;
  --flkn-dark-input-border:  #3f3f46;
  --flkn-dark-input-text:    #f4f4f5;
  --flkn-dark-close:         #71717a;
  --flkn-dark-close-hover:   #f4f4f5;
  --flkn-dark-credit:        #52525b;

  /* Light theme */
  --flkn-light-bg:           #ffffff;
  --flkn-light-text:         #18181b;
  --flkn-light-subtext:      #52525b;
  --flkn-light-btn-bg:       #6366f1;
  --flkn-light-btn-text:     #ffffff;
  --flkn-light-btn-hover:    #4f46e5;
  --flkn-light-input-bg:     #fafafa;
  --flkn-light-input-border: #d4d4d8;
  --flkn-light-input-text:   #18181b;
  --flkn-light-close:        #a1a1aa;
  --flkn-light-close-hover:  #18181b;
  --flkn-light-credit:       #a1a1aa;

  /* Brand theme */
  --flkn-brand-bg:           linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --flkn-brand-text:         #ffffff;
  --flkn-brand-subtext:      rgba(255,255,255,0.8);
  --flkn-brand-btn-bg:       #ffffff;
  --flkn-brand-btn-text:     #6366f1;
  --flkn-brand-btn-hover:    #f4f4f5;
  --flkn-brand-input-bg:     rgba(255,255,255,0.15);
  --flkn-brand-input-border: rgba(255,255,255,0.35);
  --flkn-brand-input-text:   #ffffff;
  --flkn-brand-close:        rgba(255,255,255,0.6);
  --flkn-brand-close-hover:  #ffffff;
  --flkn-brand-credit:       rgba(255,255,255,0.5);

  /* Glassmorphism theme */
  --flkn-glass-bg:           rgba(255, 255, 255, 0.7);
  --flkn-glass-text:         #18181b;
  --flkn-glass-subtext:      #3f3f46;
  --flkn-glass-btn-bg:       rgba(0, 0, 0, 0.85);
  --flkn-glass-btn-text:     #ffffff;
  --flkn-glass-btn-hover:    #000000;
  --flkn-glass-input-bg:     rgba(255, 255, 255, 0.5);
  --flkn-glass-input-border: rgba(0, 0, 0, 0.1);
  --flkn-glass-input-text:   #18181b;
  --flkn-glass-close:        #71717a;
  --flkn-glass-close-hover:  #18181b;
  --flkn-glass-credit:       #a1a1aa;

  /* Minimal theme */
  --flkn-minimal-bg:           #ffffff;
  --flkn-minimal-text:         #000000;
  --flkn-minimal-subtext:      #666666;
  --flkn-minimal-btn-bg:       #000000;
  --flkn-minimal-btn-text:     #ffffff;
  --flkn-minimal-btn-hover:    #333333;
  --flkn-minimal-input-bg:     #ffffff;
  --flkn-minimal-input-border: #000000;
  --flkn-minimal-input-text:   #000000;
  --flkn-minimal-close:        #999999;
  --flkn-minimal-close-hover:  #000000;
  --flkn-minimal-credit:       #cccccc;

  /* Vibrant theme */
  --flkn-vibrant-bg:           #ec4899;
  --flkn-vibrant-text:         #ffffff;
  --flkn-vibrant-subtext:      #fdf2f8;
  --flkn-vibrant-btn-bg:       #ffffff;
  --flkn-vibrant-btn-text:     #ec4899;
  --flkn-vibrant-btn-hover:    #fdf2f8;
  --flkn-vibrant-input-bg:     #be185d;
  --flkn-vibrant-input-border: #9d174d;
  --flkn-vibrant-input-text:   #ffffff;
  --flkn-vibrant-close:        #fdf2f8;
  --flkn-vibrant-close-hover:  #ffffff;
  --flkn-vibrant-credit:       #be185d;
}

/* ============================================================
   Base Bar
   ============================================================ */
#flkn-bar {
  position:   fixed;
  left:       0;
  right:      0;
  z-index:    var(--flkn-z);
  width:      100%;
  font-family:var(--flkn-font);
  font-size:  0.9rem;
  line-height: 1.4;
  box-sizing: border-box;
  transition: transform var(--flkn-transition), opacity var(--flkn-transition);
  will-change: transform, opacity;
}

/* Hidden state (pre-animation) */
#flkn-bar[hidden] {
  display: block !important; /* override HTML hidden so CSS can animate */
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Position variants */
#flkn-bar.flkn-pos-top {
  top:    0;
  bottom: auto;
  transform: translateY(-110%);
}

#flkn-bar.flkn-pos-bottom {
  bottom: 0;
  top:    auto;
  transform: translateY(110%);
}

#flkn-bar.flkn-pos-modal {
  top: 0; bottom: 0; left: 0; right: 0;
  height: 100vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transform: none;
  border: none !important;
  box-shadow: none !important;
}

#flkn-bar.flkn-pos-modal .flkn-inner {
  position: relative;
  width: 90%;
  max-width: 550px;
  border-radius: 12px;
  padding: 2.5rem 2rem 2rem 2rem;
  display: block;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(0.95) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#flkn-bar.flkn-pos-modal .flkn-content {
  margin-bottom: 1.5rem;
}

#flkn-bar.flkn-pos-modal .flkn-form {
  justify-content: center;
}

/* Modal theme assignments to inner container */
#flkn-bar.flkn-pos-modal.flkn-theme-dark .flkn-inner { background: var(--flkn-dark-bg); color: var(--flkn-dark-text); border: 1px solid #27272a; }
#flkn-bar.flkn-pos-modal.flkn-theme-light .flkn-inner { background: var(--flkn-light-bg); color: var(--flkn-light-text); border: 1px solid #e4e4e7; }
#flkn-bar.flkn-pos-modal.flkn-theme-brand .flkn-inner { background: var(--flkn-brand-bg); color: var(--flkn-brand-text); }
#flkn-bar.flkn-pos-modal.flkn-theme-glass .flkn-inner { background: var(--flkn-glass-bg); color: var(--flkn-glass-text); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(12px); }
#flkn-bar.flkn-pos-modal.flkn-theme-vibrant .flkn-inner { background: var(--flkn-vibrant-bg); color: var(--flkn-vibrant-text); }

#flkn-bar.flkn-pos-modal .flkn-close {
  top: 1.25rem;
  right: 1.25rem;
  transform: none;
}

/* ============================================================
   Floating Layouts (Bottom Right & Bottom Left)
   ============================================================ */
#flkn-bar.flkn-pos-br, #flkn-bar.flkn-pos-bl {
  top: auto;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  width: auto;
  transform: translateY(20px);
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

#flkn-bar.flkn-pos-bl {
  right: auto;
  left: 1.5rem;
}

#flkn-bar.flkn-pos-br .flkn-inner, #flkn-bar.flkn-pos-bl .flkn-inner {
  width: 400px;
  max-width: calc(100vw - 3rem);
  flex-direction: column;
  padding: 2rem;
  border-radius: 12px;
  display: block;
  text-align: center;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

#flkn-bar.flkn-pos-br .flkn-content, #flkn-bar.flkn-pos-bl .flkn-content { margin-bottom: 1.5rem; }
#flkn-bar.flkn-pos-br .flkn-form, #flkn-bar.flkn-pos-bl .flkn-form { justify-content: center; }

/* Floating Layout Theme Assignments */
#flkn-bar.flkn-pos-br.flkn-theme-dark .flkn-inner, #flkn-bar.flkn-pos-bl.flkn-theme-dark .flkn-inner { background: var(--flkn-dark-bg); color: var(--flkn-dark-text); border: 1px solid #27272a; }
#flkn-bar.flkn-pos-br.flkn-theme-light .flkn-inner, #flkn-bar.flkn-pos-bl.flkn-theme-light .flkn-inner { background: var(--flkn-light-bg); color: var(--flkn-light-text); border: 1px solid #e4e4e7; }
#flkn-bar.flkn-pos-br.flkn-theme-brand .flkn-inner, #flkn-bar.flkn-pos-bl.flkn-theme-brand .flkn-inner { background: var(--flkn-brand-bg); color: var(--flkn-brand-text); }
#flkn-bar.flkn-pos-br.flkn-theme-glass .flkn-inner, #flkn-bar.flkn-pos-bl.flkn-theme-glass .flkn-inner { background: var(--flkn-glass-bg); color: var(--flkn-glass-text); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(12px); }
#flkn-bar.flkn-pos-br.flkn-theme-vibrant .flkn-inner, #flkn-bar.flkn-pos-bl.flkn-theme-vibrant .flkn-inner { background: var(--flkn-vibrant-bg); color: var(--flkn-vibrant-text); }

#flkn-bar.flkn-pos-br .flkn-close, #flkn-bar.flkn-pos-bl .flkn-close {
  top: 1rem;
  right: 1rem;
  transform: none;
}

/* ============================================================
   Sticky Trigger
   ============================================================ */
.flkn-trigger {
  position: fixed;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}
.flkn-trigger.flkn-visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.flkn-trigger:hover { transform: scale(1.1); }

.flkn-trigger-br { bottom: 1.5rem; right: 1.5rem; }
.flkn-trigger-bl { bottom: 1.5rem; left: 1.5rem; }
.flkn-trigger-left { top: 50%; left: 0; transform: translateY(-50%) translateX(-20px); border-radius: 0 8px 8px 0; width: 45px; height: 50px; }
.flkn-trigger-left.flkn-visible { transform: translateY(-50%) translateX(0); }
.flkn-trigger-left:hover { transform: translateY(-50%) translateX(5px); }
.flkn-trigger-right { top: 50%; right: 0; transform: translateY(-50%) translateX(20px); border-radius: 8px 0 0 8px; width: 45px; height: 50px; }
.flkn-trigger-right.flkn-visible { transform: translateY(-50%) translateX(0); }
.flkn-trigger-right:hover { transform: translateY(-50%) translateX(-5px); }

/* Trigger Theme Assignments */
.flkn-trigger.flkn-theme-dark { background: var(--flkn-dark-bg); color: var(--flkn-dark-text); border: 1px solid #27272a; }
.flkn-trigger.flkn-theme-light { background: var(--flkn-light-bg); color: var(--flkn-light-text); border: 1px solid #e4e4e7; }
.flkn-trigger.flkn-theme-brand { background: var(--flkn-brand-bg); color: var(--flkn-brand-text); }
.flkn-trigger.flkn-theme-glass { background: var(--flkn-glass-bg); color: var(--flkn-glass-text); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(12px); }
.flkn-trigger.flkn-theme-vibrant { background: var(--flkn-vibrant-bg); color: var(--flkn-vibrant-text); }

/* Visible state - added by JS */
#flkn-bar.flkn-visible {
  opacity:       1;
  visibility:    visible;
  pointer-events: auto;
}

#flkn-bar.flkn-pos-top.flkn-visible,
#flkn-bar.flkn-pos-bottom.flkn-visible,
#flkn-bar.flkn-pos-br.flkn-visible,
#flkn-bar.flkn-pos-bl.flkn-visible {
  transform: translateY(0);
}

#flkn-bar.flkn-pos-modal.flkn-visible .flkn-inner {
  transform: scale(1) translateY(0);
}

/* ============================================================
   Theme: Dark
   ============================================================ */
#flkn-bar.flkn-theme-dark {
  background: var(--flkn-dark-bg);
  color:      var(--flkn-dark-text);
  border-bottom: 1px solid #27272a;
}

#flkn-bar.flkn-theme-dark.flkn-pos-bottom {
  border-bottom: none;
  border-top:    1px solid #27272a;
}

#flkn-bar.flkn-theme-dark .flkn-input {
  background:   var(--flkn-dark-input-bg);
  border-color: var(--flkn-dark-input-border);
  color:        var(--flkn-dark-input-text);
}

#flkn-bar.flkn-theme-dark .flkn-input::placeholder {
  color: var(--flkn-dark-subtext);
}

#flkn-bar.flkn-theme-dark .flkn-btn {
  background: var(--flkn-dark-btn-bg);
  color:      var(--flkn-dark-btn-text);
}

#flkn-bar.flkn-theme-dark .flkn-btn:hover,
#flkn-bar.flkn-theme-dark .flkn-btn:focus-visible {
  background: var(--flkn-dark-btn-hover);
}

#flkn-bar.flkn-theme-dark .flkn-subtext  { color: var(--flkn-dark-subtext); }
#flkn-bar.flkn-theme-dark .flkn-close    { color: var(--flkn-dark-close); }
#flkn-bar.flkn-theme-dark .flkn-close:hover,
#flkn-bar.flkn-theme-dark .flkn-close:focus-visible { color: var(--flkn-dark-close-hover); }
#flkn-bar.flkn-theme-dark .flkn-credit a { color: var(--flkn-dark-credit); }

/* ============================================================
   Theme: Light
   ============================================================ */
#flkn-bar.flkn-theme-light {
  background: var(--flkn-light-bg);
  color:      var(--flkn-light-text);
  border-bottom: 1px solid #e4e4e7;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#flkn-bar.flkn-theme-light.flkn-pos-bottom {
  border-bottom: none;
  border-top:    1px solid #e4e4e7;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

#flkn-bar.flkn-theme-light .flkn-input {
  background:   var(--flkn-light-input-bg);
  border-color: var(--flkn-light-input-border);
  color:        var(--flkn-light-input-text);
}

#flkn-bar.flkn-theme-light .flkn-input::placeholder {
  color: #a1a1aa;
}

#flkn-bar.flkn-theme-light .flkn-btn {
  background: var(--flkn-light-btn-bg);
  color:      var(--flkn-light-btn-text);
}

#flkn-bar.flkn-theme-light .flkn-btn:hover,
#flkn-bar.flkn-theme-light .flkn-btn:focus-visible {
  background: var(--flkn-light-btn-hover);
}

#flkn-bar.flkn-theme-light .flkn-subtext  { color: var(--flkn-light-subtext); }
#flkn-bar.flkn-theme-light .flkn-close    { color: var(--flkn-light-close); }
#flkn-bar.flkn-theme-light .flkn-close:hover,
#flkn-bar.flkn-theme-light .flkn-close:focus-visible { color: var(--flkn-light-close-hover); }
#flkn-bar.flkn-theme-light .flkn-credit a { color: var(--flkn-light-credit); }

/* ============================================================
   Theme: Brand (gradient)
   ============================================================ */
#flkn-bar.flkn-theme-brand {
  background: var(--flkn-brand-bg);
  color:      var(--flkn-brand-text);
}

#flkn-bar.flkn-theme-brand .flkn-input {
  background:   var(--flkn-brand-input-bg);
  border-color: var(--flkn-brand-input-border);
  color:        var(--flkn-brand-input-text);
}

#flkn-bar.flkn-theme-brand .flkn-input::placeholder {
  color: rgba(255,255,255,0.65);
}

#flkn-bar.flkn-theme-brand .flkn-btn {
  background: var(--flkn-brand-btn-bg);
  color:      var(--flkn-brand-btn-text);
}

#flkn-bar.flkn-theme-brand .flkn-btn:hover,
#flkn-bar.flkn-theme-brand .flkn-btn:focus-visible {
  background: var(--flkn-brand-btn-hover);
}

#flkn-bar.flkn-theme-brand .flkn-subtext  { color: var(--flkn-brand-subtext); }
#flkn-bar.flkn-theme-brand .flkn-close    { color: var(--flkn-brand-close); }
#flkn-bar.flkn-theme-brand .flkn-close:hover,
#flkn-bar.flkn-theme-brand .flkn-close:focus-visible { color: var(--flkn-brand-close-hover); }
#flkn-bar.flkn-theme-brand .flkn-credit a { color: var(--flkn-brand-credit); }

/* ============================================================
   Theme: Glassmorphism
   ============================================================ */
#flkn-bar.flkn-theme-glass {
  background: var(--flkn-glass-bg);
  color:      var(--flkn-glass-text);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

#flkn-bar.flkn-theme-glass.flkn-pos-bottom {
  border-bottom: none;
  border-top:    1px solid rgba(255,255,255,0.3);
}

#flkn-bar.flkn-theme-glass .flkn-input {
  background:   var(--flkn-glass-input-bg);
  border-color: var(--flkn-glass-input-border);
  color:        var(--flkn-glass-input-text);
}

#flkn-bar.flkn-theme-glass .flkn-input::placeholder { color: rgba(0,0,0,0.4); }
#flkn-bar.flkn-theme-glass .flkn-btn { background: var(--flkn-glass-btn-bg); color: var(--flkn-glass-btn-text); }
#flkn-bar.flkn-theme-glass .flkn-btn:hover,
#flkn-bar.flkn-theme-glass .flkn-btn:focus-visible { background: var(--flkn-glass-btn-hover); }
#flkn-bar.flkn-theme-glass .flkn-subtext  { color: var(--flkn-glass-subtext); }
#flkn-bar.flkn-theme-glass .flkn-close    { color: var(--flkn-glass-close); }
#flkn-bar.flkn-theme-glass .flkn-close:hover,
#flkn-bar.flkn-theme-glass .flkn-close:focus-visible { color: var(--flkn-glass-close-hover); }
#flkn-bar.flkn-theme-glass .flkn-credit a { color: var(--flkn-glass-credit); }

/* ============================================================
   Theme: Minimal
   ============================================================ */
#flkn-bar.flkn-theme-minimal {
  background: var(--flkn-minimal-bg);
  color:      var(--flkn-minimal-text);
  border-bottom: 2px solid #000;
}

#flkn-bar.flkn-theme-minimal.flkn-pos-bottom {
  border-bottom: none;
  border-top:    2px solid #000;
}

#flkn-bar.flkn-theme-minimal .flkn-input {
  background:   var(--flkn-minimal-input-bg);
  border-color: var(--flkn-minimal-input-border);
  color:        var(--flkn-minimal-input-text);
  border-width: 2px;
  border-radius: 0;
}

#flkn-bar.flkn-theme-minimal .flkn-input::placeholder { color: #999; }
#flkn-bar.flkn-theme-minimal .flkn-btn { 
  background: var(--flkn-minimal-btn-bg); 
  color: var(--flkn-minimal-btn-text); 
  border-radius: 0;
}
#flkn-bar.flkn-theme-minimal .flkn-btn:hover,
#flkn-bar.flkn-theme-minimal .flkn-btn:focus-visible { background: var(--flkn-minimal-btn-hover); }
#flkn-bar.flkn-theme-minimal .flkn-subtext  { color: var(--flkn-minimal-subtext); }
#flkn-bar.flkn-theme-minimal .flkn-close    { color: var(--flkn-minimal-close); }
#flkn-bar.flkn-theme-minimal .flkn-close:hover,
#flkn-bar.flkn-theme-minimal .flkn-close:focus-visible { color: var(--flkn-minimal-close-hover); }
#flkn-bar.flkn-theme-minimal .flkn-credit a { color: var(--flkn-minimal-credit); }

/* ============================================================
   Theme: Vibrant
   ============================================================ */
#flkn-bar.flkn-theme-vibrant {
  background: var(--flkn-vibrant-bg);
  color:      var(--flkn-vibrant-text);
}

#flkn-bar.flkn-theme-vibrant .flkn-input {
  background:   var(--flkn-vibrant-input-bg);
  border-color: var(--flkn-vibrant-input-border);
  color:        var(--flkn-vibrant-input-text);
}

#flkn-bar.flkn-theme-vibrant .flkn-input::placeholder { color: rgba(255,255,255,0.7); }
#flkn-bar.flkn-theme-vibrant .flkn-btn { background: var(--flkn-vibrant-btn-bg); color: var(--flkn-vibrant-btn-text); }
#flkn-bar.flkn-theme-vibrant .flkn-btn:hover,
#flkn-bar.flkn-theme-vibrant .flkn-btn:focus-visible { background: var(--flkn-vibrant-btn-hover); }
#flkn-bar.flkn-theme-vibrant .flkn-subtext  { color: var(--flkn-vibrant-subtext); }
#flkn-bar.flkn-theme-vibrant .flkn-close    { color: var(--flkn-vibrant-close); }
#flkn-bar.flkn-theme-vibrant .flkn-close:hover,
#flkn-bar.flkn-theme-vibrant .flkn-close:focus-visible { color: var(--flkn-vibrant-close-hover); }
#flkn-bar.flkn-theme-vibrant .flkn-credit a { color: var(--flkn-vibrant-credit); }

/* ============================================================
   Inner layout
   ============================================================ */
.flkn-inner {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             0.75rem;
  padding:         0.75rem 3.5rem 0.75rem 1.25rem; /* right padding for close btn */
  max-width:       1200px;
  margin:          0 auto;
  position:        relative;
}

.flkn-content {
  flex:       1 1 220px;
  min-width:  0;
}

.flkn-headline {
  font-size:   1rem;
  font-weight: 700;
  margin:      0;
  line-height: 1.2;
}

.flkn-subtext {
  font-size:  0.8rem;
  margin:     0.2rem 0 0;
  opacity:    0.85;
}

/* ============================================================
   Form layout
   ============================================================ */
.flkn-form {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         0.5rem;
  flex:        2 1 320px;
}

.flkn-input {
  flex:          1 1 160px;
  min-width:     140px;
  height:        2.375rem;
  padding:       0 0.75rem;
  border:        1px solid;
  border-radius: var(--flkn-radius);
  font-size:     0.875rem;
  font-family:   inherit;
  outline:       none;
  transition:    border-color 0.18s, box-shadow 0.18s;
}

.flkn-input:focus {
  border-color: #6366f1;
  box-shadow:   0 0 0 3px rgba(99, 102, 241, 0.25);
}

/* ============================================================
   Submit button
   ============================================================ */
.flkn-btn {
  flex:          0 0 auto;
  height:        2.375rem;
  padding:       0 1.25rem;
  border:        none;
  border-radius: var(--flkn-radius);
  font-size:     0.875rem;
  font-weight:   600;
  font-family:   inherit;
  cursor:        pointer;
  transition:    background-color var(--flkn-transition), transform 0.1s, box-shadow 0.18s;
  white-space:   nowrap;
}

.flkn-btn:hover { transform: translateY(-1px); }
.flkn-btn:active { transform: translateY(0); }

.flkn-btn:focus-visible {
  outline:    3px solid #6366f1;
  outline-offset: 2px;
}

.flkn-btn[disabled] {
  opacity: 0.65;
  cursor:  not-allowed;
}

/* ============================================================
   GDPR consent row
   ============================================================ */
.flkn-gdpr {
  flex:    1 0 100%;
  margin:  0;
}

.flkn-gdpr-label {
  display:     flex;
  align-items: flex-start;
  gap:         0.5rem;
  font-size:   0.75rem;
  cursor:      pointer;
  line-height: 1.4;
}

.flkn-gdpr-checkbox {
  flex-shrink: 0;
  margin-top:  0.15rem;
  width:       1rem;
  height:      1rem;
  accent-color:#6366f1;
  cursor:      pointer;
}

.flkn-gdpr-text a {
  text-decoration: underline;
  color:           inherit;
}

/* ============================================================
   Status message
   ============================================================ */
.flkn-message {
  flex:       1 0 100%;
  padding:    0.6rem 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: var(--flkn-radius);
  font-size:  0.85rem;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.flkn-message[hidden] { display: none; }

.flkn-message.flkn-success {
  background: #f0fdf4;
  color:      #15803d;
  border:     1px solid #86efac;
}

.flkn-message.flkn-error {
  background: #fef2f2;
  color:      #b91c1c;
  border:     1px solid #fca5a5;
}

/* ============================================================
   Close button
   ============================================================ */
.flkn-close {
  position:   absolute;
  top:        50%;
  right:      0.875rem;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  padding:    0.375rem;
  cursor:     pointer;
  border-radius: 4px;
  line-height: 0;
  transition: color var(--flkn-transition);
}

.flkn-close:focus-visible {
  outline:        3px solid #6366f1;
  outline-offset: 2px;
}

/* ============================================================
   Credit link
   ============================================================ */
.flkn-credit {
  text-align: center;
  padding:    0.15rem 1.25rem 0.35rem;
  font-size:  0.68rem;
}

.flkn-credit a {
  text-decoration: none;
  transition:      opacity 0.18s;
}

.flkn-credit a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ============================================================
   Responsive - mobile breakpoint handled by JS config
   (the bar is hidden/shown by JS; CSS handles layout reflow)
   ============================================================ */

/* Tablet and below: stack content above form */
@media (max-width: 575.98px) {
  .flkn-inner {
    flex-direction: column;
    align-items:    flex-start;
    padding-right:  3rem;
  }

  .flkn-content { flex: none; }
  .flkn-form    { width: 100%; }

  .flkn-headline { font-size: 0.9rem; }
  .flkn-subtext  { display: none; }
}

/* Small phones (320-400px): prevent bar from covering the full viewport
   when name field + GDPR consent are both enabled.
   Adds scrolling inside the bar as a last resort. */
@media (max-width: 400px) {
  #flkn-bar {
    max-height:    60vh;
    overflow-y:    auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide GDPR label text; keep only the checkbox + a minimal hint.
     The full legal text is still readable on scroll if the user needs it. */
  .flkn-gdpr-text {
    font-size: 0.68rem;
  }

  /* Button fills full width on very small screens for easier tapping */
  .flkn-btn {
    width: 100%;
    flex:  none;
  }
}

/* Print: never render the bar in print output. */
@media print {
  #flkn-bar { display: none !important; }
}

/* No GDPR Layout Adjustment */
.flkn-form.flkn-no-gdpr .flkn-btn {
  flex: 1 1 100%;
}