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

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

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

.mu-hidden {
  display: none; 
}

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

/* Email input */
.mu-unlock .mu-input[type="email"] {
  padding: 0.6rem 0.8rem;
  flex: 1 1 320px;
  min-width: 280px;
  max-width: 380px;
  border: 1px solid #cbd5e1;
  height:50px!important;
  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;
}
.mu-unlock .mu-input[type="email"]:focus {
  border-color: #efc648;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.15);
}

/* Send Code button */
.mu-send-btn {
  padding: 0.9rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  background: #efc648;
  color: #000;
  transition: background 0.2s ease, transform 0.06s ease;
  min-width: 120px;
  text-align: center;
}
/* Hover state */
.mu-send-btn:hover {
  background-color: #eab30c;
  color:#fff;
}
/* Focus state */
.mu-send-btn:focus {
  background-color: #eab30c;
  box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.25);
}
/* Active (pressed) state */
.mu-send-btn:active {
  background-color: #eab30c;
  transform: scale(0.98);
}

/* Message under the email row */
.mu-unlock .mu-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)
---------------------------- */
.mu-verify-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

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

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

/* Message under the code input */
.mu-verify-wrap .mu-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) */
.mu-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 */
.mu-message {
  font-size: 1rem;
  margin-top: 8px;
  display: block;
  font-weight: 600;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Error = red, with ❌ */
.mu-message.error::before {
  content: "❌ ";
  font-weight: 600;
  color: #ef0a33;
}

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

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

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

/* Spinner inside buttons */
.mu-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); }
}


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

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