/* Prevent flash: hide these by default (JS reveals them) */
.unlocktoview-unlock,
.unlocktoview-verify-wrap,
.unlocktoview-already-code-msg,
.unlocktoview-video {
  display: none;
}

/* If backend/JS marks the container as having a code, show verify row */
.unlocktoview-container.has-code .unlocktoview-verify-wrap {
  display: flex !important;
}
.unlocktoview-container.has-code .unlocktoview-already-code-msg {
  display: block !important;
}

/* The primary button should be visible initially */
.unlocktoview-rent-btn {
  display: inline-block;
}

/* Container & utility */
.unlocktoview-container {
  margin: 1rem 0;
  font-family: sans-serif;
}

.unlocktoview-hidden {
  display: none;
}

/* ---------------------------
   Unlock section (email row)
---------------------------- */
.unlocktoview-unlock {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

/* Email input */
.unlocktoview-unlock .unlocktoview-input[type="email"] {
  padding: 0.6rem 0.8rem;
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 380px;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.unlocktoview-unlock .unlocktoview-input[type="email"]:focus {
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}
/* Send Code button */
.unlocktoview-send-btn {
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: #4f8cff;
  color: #fff;
  transition: background 0.2s ease, transform 0.06s ease;
  min-width: 120px;
  text-align: center;
}
/* Hover state */
.unlocktoview-send-btn:hover {
  background-color: #3a6edc;
}
/* Focus state */
.unlocktoview-send-btn:focus {
  background-color: #3a6edc;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.25);
}
/* Active (pressed) state */
.unlocktoview-send-btn:active {
  background-color: #3458a1;
  transform: scale(0.98);
}

/* Message under the email row */
.unlocktoview-unlock .unlocktoview-message {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------
   Verify row (code + button)
---------------------------- */
.unlocktoview-verify-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

/* Code input (4–6 chars) */
.unlocktoview-verify-wrap .unlocktoview-input[type="text"] {
  width: 150px;
  max-width: 200px;
  text-align: center;
  padding: 0.55rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.unlocktoview-verify-wrap .unlocktoview-input[type="text"]:focus {
  border-color: #4f8cff;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}

/* Verify button */
.unlocktoview-verify-btn {
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: #4f8cff;
  color: #fff;
  transition: background 0.2s ease, transform 0.06s ease;
  min-width: 120px;
  text-align: center;
}
.unlocktoview-verify-btn:hover { background: #3a6edc; }
.unlocktoview-verify-btn:focus { background: #3a6edc; box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.25); }
.unlocktoview-verify-btn:active { background: #3458a1; transform: scale(0.98); }
.unlocktoview-verify-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Message under the code input */
.unlocktoview-verify-wrap .unlocktoview-message {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Already-code notice (shown by JS when applicable) */
.unlocktoview-already-code-msg {
  display: none;
  width: 100%;
  margin: 0.25rem 0 0.25rem;
  font-weight: 600;
  font-size: 1rem;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #1a7f37;
}

/* General message style */
.unlocktoview-message {
  font-size: 1rem;
  margin-top: 8px;
  display: block;
  font-weight: 600;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Error */
.unlocktoview-message.error {
  color: #ef0a33;
}
.unlocktoview-message.error::before {
  font-weight: 600;
  color: #ef0a33 !important;
}

/* Success */
.unlocktoview-message.success::before {
  font-weight: 600;
  color: #46b450;
}
/* Force code input to display uppercase letters */
.unlocktoview-verify-wrap input[type="text"] {
    text-transform: uppercase;
    letter-spacing: 1px; /* optional: nicer spacing for codes */
}

/* Main Unlock button */
.unlocktoview-rent-btn {
  padding: 0.7rem 1.1rem;
  border: none;
  border-radius: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: #4f8cff;
  color: #fff;
  transition: background 0.2s ease, transform 0.06s ease;
}
.unlocktoview-rent-btn:hover { background: #3a6edc; }
.unlocktoview-rent-btn:focus { background: #3a6edc; box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.25); }
.unlocktoview-rent-btn:active { transform: scale(0.98); }

/* Video spacing */
.unlocktoview-video { margin-top: 1rem; }

/* Spinner inside buttons */
.unlocktoview-send-btn .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* FIX: ensure fadeIn() restores proper flex layouts instead of block */
.unlocktoview-unlock { display: none; }        /* hidden by default */
.unlocktoview-verify-wrap { display: none; }  /* hidden by default */

/* when visible via JS, they should be flex (not block) */
.unlocktoview-unlock.is-visible,
.unlocktoview-verify-wrap.is-visible {
  display: flex !important;
}

/* ---------------------------
   Responsive
---------------------------- */
@media (max-width: 480px) {
  .unlocktoview-unlock { flex-direction: column; align-items: stretch; }
  .unlocktoview-unlock .unlocktoview-input[type="email"] { width: 100%; max-width: none; }
  .unlocktoview-send-btn { width: 100%; }

  .unlocktoview-verify-wrap { flex-direction: column; align-items: stretch; }
  .unlocktoview-verify-wrap .unlocktoview-input[type="text"],
  .unlocktoview-verify-wrap .unlocktoview-verify-btn { width: 100%; max-width: none; }
}