/* ===== POKERPUG video strip (styles for gallery + uploader) ===== */

.ppug-strip{
  --gap:20px; --card-w:clamp(320px,34vw,560px); --btn:42px;
  background:#000; color:#fff; padding:40px 12px 18px;
  position:relative; overflow:hidden;
}
.ppug-strip h2{
  margin:0 0 16px; text-align:center; font-size:clamp(1.4rem,2.2vw,2rem);
  letter-spacing:.12em; font-weight:800;
}

/* ----- Header row: title + Upload pill (aligned) ----- */
.ppug-header{
  display:flex;
  align-items:center;             /* vertical align */
  justify-content:center;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.ppug-header h2{ margin:0; }

/* Pill link */
.ppug-uplink{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  color:#111 !important;
  text-decoration:none;
  font-weight:800;
  font-size:.9em;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.20);

  /* Lift it slightly to visually align with the h2 baseline */
  transform: translateY(-2px);
}
.ppug-uplink:hover{ background:#f3f4f6; }

@media (max-width:640px){
  .ppug-uplink{ transform:translateY(-1px); }
}

/* Rail + edge fades */
.ppug-rail-wrap{ position:relative; }
.ppug-rail-wrap::before,.ppug-rail-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:3; pointer-events:none;
}
.ppug-rail-wrap::before{ left:0;  background:linear-gradient(90deg,#000 0%,transparent 100%); }
.ppug-rail-wrap::after { right:0; background:linear-gradient(270deg,#000 0%,transparent 100%); }

/* Horizontal scroller */
.ppug-rail{
  display:flex; gap:var(--gap); overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:8px 4px 14px; cursor:grab; user-select:none; scrollbar-width:none;
}
.ppug-rail::-webkit-scrollbar{ display:none; }
.ppug-rail:active{ cursor:grabbing; }

/* Cards & video */
.ppug-card{
  flex:0 0 auto; width:var(--card-w);
  background:#111; box-shadow:0 10px 26px rgba(0,0,0,.55);
  border-radius:14px;
  display:flex; flex-direction:column;
  overflow:visible !important;           /* ensure caption isn't clipped */
}
.ppug-card video{
  width:100%;
  aspect-ratio:16/9;                     /* keep uniform shape */
  height:auto;
  display:block !important;
  object-fit:contain;
  background:#000;
  border-top-left-radius:14px; border-top-right-radius:14px;
}

/* Arrow buttons (gallery) */
.ppug-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:var(--btn); height:var(--btn); display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); color:#fff; font-size:18px;
  z-index:4; cursor:pointer; backdrop-filter:blur(2px);
  transition:background .2s ease, transform .08s ease, box-shadow .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.ppug-btn:hover{ background:rgba(255,255,255,.18); }
.ppug-btn:active{ transform:translateY(-50%) scale(.98); }
.ppug-btn.left{ left:6px; }
.ppug-btn.right{ right:6px; }

.ppug-hint{ text-align:center; color:#9aa; font-size:.95rem; margin-top:8px; }
@media (max-width:640px){ .ppug-btn{ display:none; } }

/* Captions (name + quote) centered UNDER the video, same width */
.ppug-cap{
  position:static !important;
  display:block !important;
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  margin:0 !important;
  background:transparent !important;
  color:#fff; font-size:.95rem;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}
.ppug-cap-name{ font-weight:700; display:block; }
.ppug-cap-quote{ color:#cfd3d7; font-style:italic; font-size:.9rem; display:block; }

/* ===== Uploader (layout) ===== */

.ppug-upload{ display:block; }
.ppug-lede{
  font-size:1.05em; margin:0 auto 18px auto; color:#e5e7eb;
  max-width:680px; text-align:left;       /* widen to match the form width */
}

.ppug-form{
  max-width:680px;                         /* wider fields for more horizontal room */
  width:100%;
  margin:0 auto;
  display:grid;
  gap:14px;
}

.ppug-field{ display:grid; gap:6px; }
.ppug-field label{ font-weight:700; color:#fff; }

/* Text inputs */
.ppug-upload input[type="text"],
.ppug-upload input[type="email"]{
  width:100%;
  max-width:720px; height:48px;
  padding:12px 16px; font-size:17px; line-height:1.3;
  border-radius:10px; box-sizing:border-box;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.07); color:#fff;
  -webkit-appearance:none; appearance:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .1s ease;
}
.ppug-upload input[type="text"]:hover,
.ppug-upload input[type="email"]:hover{
  background:rgba(255,255,255,.09);
}
.ppug-upload input[type="text"]::placeholder,
.ppug-upload input[type="email"]::placeholder{
  font-size:1em; color:#cfd3d7; opacity:.95;
}
.ppug-upload input[type="text"]:focus,
.ppug-upload input[type="email"]:focus{
  outline:none; border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.20);
  background:rgba(255,255,255,.10); transform:scale(1.01);
}

/* Actions row */
.ppug-actions{
  display:grid;
  grid-template-columns: 1fr auto;   /* left: label+file+note, right: button */
  gap:14px;
  align-items:start;
}
@media (max-width:720px){
  .ppug-actions{ grid-template-columns: 1fr; }
}

/* Left column (label + file + note) */
.ppug-file{ display:grid; gap:8px; }
.ppug-file label{ font-weight:700; color:#fff; margin:0; }

/* Native file input + button */
.ppug-upload input[type="file"]{
  width:100%;
  color:#d1d5db; font-size:16px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.06);
  border-radius:12px; padding:10px;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ppug-upload input[type="file"]:focus{
  outline:none; border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}
.ppug-upload input[type="file"]::file-selector-button{
  margin-right:12px; padding:12px 18px;
  border:none; border-radius:12px; background:#fff; color:#111827;
  font-weight:800; font-size:16px; cursor:pointer;
  transition:background .2s ease, transform .08s ease, box-shadow .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
}
.ppug-upload input[type="file"]::file-selector-button:hover{ background:#f3f4f6; }
.ppug-upload input[type="file"]::file-selector-button:active{ transform:scale(.98); }

/* Note under file input */
.ppug-note{ color:#9aa; font-size:.9rem; margin:0; }

/* Right column (submit button) */
.ppug-submit{
  display:grid; justify-items:start;
  padding-top: 40px;   /* aligns button with file input baseline */
}
.ppug-btn-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:#ffffff; color:#111827; cursor:pointer;
  font-weight:800; font-size:16px;
  transition:background .2s ease, transform .08s ease, box-shadow .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
}
.ppug-btn-submit:hover{ background:#f3f4f6; }
.ppug-btn-submit:active{ transform:scale(.98); }

/* System messages */
.ppug-errors{
  background:#3b0000; color:#ffcccc; padding:8px 10px; border-radius:8px;
  max-width:680px; margin:10px auto;
}
.ppug-success{
  background:#002c14; color:#b6ffde; padding:8px 10px; border-radius:8px;
  max-width:680px; margin:10px auto;
}

/* Mobile polish */
@media (max-width:640px){
  .ppug-upload input[type="text"],
  .ppug-upload input[type="email"]{
    max-width:100%; height:44px; padding:10px 14px; font-size:16px;
  }
  .ppug-upload input[type="file"]{ font-size:16px; }
  .ppug-upload input[type="file"]::file-selector-button{
    font-size:16px; padding:14px 20px; border-radius:12px;
  }
  .ppug-btn-submit{
    width:100%; font-size:16px; padding:14px 20px; border-radius:12px;
  }
}

/* Grok logo */
.ppug-lede img.ppug-grok-logo{
  height:40px !important; max-height:40px !important; width:auto !important;
  vertical-align:middle; margin:0 6px; display:inline-block; line-height:0;
}
@media (max-width:640px){
  .ppug-lede img.ppug-grok-logo{ height:32px !important; max-height:32px !important; }
}

/* Elementor hard overrides to ensure inputs render as designed */
.ppug-upload form input[type="text"],
.ppug-upload form input[type="email"],
.elementor .ppug-upload form input[type="text"],
.elementor .ppug-upload form input[type="email"]{
  width:100% !important; max-width:720px !important; height:48px !important;
  padding:12px 16px !important; font-size:17px !important; line-height:1.3 !important;
  border-radius:10px !important; box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.25) !important;
  background:rgba(255,255,255,.07) !important; color:#fff !important;
}
.ppug-upload form input[type="text"]::placeholder,
.ppug-upload form input[type="email"]::placeholder{
  font-size:1em !important; line-height:1.3 !important; color:#cfd3d7 !important; opacity:.95 !important;
}
@media (max-width:640px){
  .ppug-upload form input[type="text"],
  .ppug-upload form input[type="email"],
  .elementor .ppug-upload form input[type="text"],
  .elementor .ppug-upload form input[type="email"]{
    max-width:100% !important; height:44px !important; padding:10px 14px !important; font-size:16px !important;
  }
}