/*
 * StaticPress theme "Blocksy" - vip.css
 *
 * The gate of a VIP channel article (partials/vip_gate.html). It is a fixed
 * overlay with its own card, so it works on top of any page of the theme and
 * does not depend on the theme tokens: a channel renders with the same theme as
 * the main site, but only the article page of a VIP channel ever loads this
 * file.
 *
 * The container is printed hidden and sp-vip.js unhides it only when this
 * browser has no valid unlock, so nothing flashes for a reader who already
 * entered today's password.
 */
.sp-vip-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
}
.sp-vip-gate[hidden] { display: none; }

.sp-vip-card {
  width: 100%;
  max-width: min(92vw, 420px);
  padding: 24px 22px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.sp-vip-title { margin: 0 0 10px; font-size: 19px; }
.sp-vip-text { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #444; }

.sp-vip-form { display: flex; gap: 8px; align-items: stretch; }
.sp-vip-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #d0d4dc;
  border-radius: 8px;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center;
}
.sp-vip-input:focus { outline: none; border-color: #2b6cb0; }
.sp-vip-submit {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #2b6cb0;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.sp-vip-submit[disabled] { opacity: 0.6; cursor: default; }

.sp-vip-error { margin: 12px 0 0; font-size: 13px; color: #c53030; }
.sp-vip-error[hidden] { display: none; }

.sp-vip-contact {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
  word-break: break-all;
}

.sp-vip-skip {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #6b7280;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* The way back for a reader who chose "read the preview for now": it belongs
 * to the body of the article (the gate partial is included behind it) and
 * sp-vip.js unhides it when the dialog is dismissed. */
.sp-vip-restore {
  margin: 26px 0;
  padding: 18px 16px;
  border: 1px dashed #c6cddb;
  border-radius: 10px;
  background: #f7f9fc;
  text-align: center;
}
.sp-vip-restore[hidden] { display: none; }
.sp-vip-restore-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #4a5262;
}

/* The note a reader without JavaScript gets instead of the dialog. */
.sp-vip-noscript {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #f0d38a;
  border-radius: 8px;
  background: #fff9e6;
  font-size: 14px;
  line-height: 1.6;
  color: #6b4a00;
}