/**
 * WC Category Password — Frontend Styles
 *
 * Design: "Luxury VIP Access" — escuro, elegante, gold accents
 * Compatível com Flatsome (usa variáveis CSS do tema quando disponíveis)
 *
 * @package WC_Category_Password
 */

/* ── Reset local ─────────────────────────────────────────────────────────── */
.wccp-overlay *,
.wccp-overlay *::before,
.wccp-overlay *::after {
  box-sizing: border-box;
}

/* ── Variáveis ───────────────────────────────────────────────────────────── */
:root {
  --wccp-bg:            #0a0a0f;
  --wccp-card-bg:       rgba(15, 15, 22, 0.96);
  --wccp-gold:          #c9a96e;
  --wccp-gold-light:    #e0c78a;
  --wccp-text:          #f0ece4;
  --wccp-text-muted:    #8a8580;
  --wccp-border:        rgba(201, 169, 110, 0.25);
  --wccp-error:         #e05252;
  --wccp-success:       #52c089;
  --wccp-radius:        16px;
  --wccp-input-bg:      rgba(255, 255, 255, 0.05);
  --wccp-transition:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper principal ───────────────────────────────────────────────────── */
.wccp-overlay {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background-color: var(--wccp-bg);
  overflow: hidden;
}

/* ── Background image ────────────────────────────────────────────────────── */
.wccp-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(8px) saturate(0.4);
  transform: scale(1.1); /* compensa o blur nas bordas */
  z-index: 0;
}

.wccp-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 15, 0.88) 0%,
    rgba(10, 10, 15, 0.78) 100%
  );
  z-index: 1;
}

/* ── Card central ────────────────────────────────────────────────────────── */
.wccp-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  background: var(--wccp-card-bg);
  border: 1px solid var(--wccp-border);
  border-radius: var(--wccp-radius);
  padding: 56px 48px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(201, 169, 110, 0.1),
    0 32px 80px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Entrada animada */
  animation: wccp-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes wccp-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Borda dourada sutil no topo */
.wccp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wccp-gold), transparent);
}

/* ── Ícone do cadeado ────────────────────────────────────────────────────── */
.wccp-lock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.15), rgba(201, 169, 110, 0.05));
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 50%;
  color: var(--wccp-gold);
}

.wccp-lock-icon svg {
  width: 28px;
  height: 28px;
}

/* ── Tipografia ──────────────────────────────────────────────────────────── */
.wccp-title {
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  color: var(--wccp-text);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.wccp-message {
  font-size: 15px;
  line-height: 1.6;
  color: var(--wccp-text-muted);
  margin-bottom: 36px;
}

.wccp-message strong { color: var(--wccp-text); }

/* ── Formulário ──────────────────────────────────────────────────────────── */
.wccp-form {
  text-align: left;
}

.wccp-field-group {
  margin-bottom: 24px;
}

.wccp-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wccp-gold);
  margin-bottom: 10px;
}

/* ── Input wrapper ───────────────────────────────────────────────────────── */
.wccp-input-wrapper {
  position: relative;
}

.wccp-input {
  width: 100%;
  padding: 14px 50px 14px 18px;
  background: var(--wccp-input-bg);
  border: 1px solid var(--wccp-border);
  border-radius: 10px;
  color: var(--wccp-text);
  font-size: 16px; /* ≥16px evita zoom no iOS */
  letter-spacing: 0.06em;
  transition: border-color var(--wccp-transition), box-shadow var(--wccp-transition);
  outline: none;
  -webkit-appearance: none;
}

.wccp-input::placeholder {
  color: rgba(240, 236, 228, 0.2);
  letter-spacing: 0.2em;
}

.wccp-input:focus {
  border-color: var(--wccp-gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}

.wccp-input.is-error {
  border-color: var(--wccp-error);
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.15);
}

/* ── Botão olhinho ───────────────────────────────────────────────────────── */
.wccp-toggle-visibility {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wccp-text-muted);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--wccp-transition);
}

.wccp-toggle-visibility:hover { color: var(--wccp-gold); }
.wccp-toggle-visibility svg   { width: 18px; height: 18px; }

/* ── Dica ────────────────────────────────────────────────────────────────── */
.wccp-hint {
  font-size: 13px;
  color: var(--wccp-text-muted);
  margin: 10px 0 0;
  font-style: italic;
}

/* ── Mensagem de erro inline ─────────────────────────────────────────────── */
.wccp-error {
  font-size: 13px;
  color: var(--wccp-error);
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wccp-error::before {
  content: '⚠';
  font-style: normal;
}

/* ── Botão principal ─────────────────────────────────────────────────────── */
.wccp-btn-submit {
  width: 100%;
  padding: 16px 24px;
  background: linear-gradient(135deg, var(--wccp-gold) 0%, var(--wccp-gold-light) 100%);
  color: #0a0a0f;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform var(--wccp-transition), box-shadow var(--wccp-transition), opacity var(--wccp-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.wccp-btn-submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background var(--wccp-transition);
}

.wccp-btn-submit:hover:not(:disabled)::before { background: rgba(255, 255, 255, 0.1); }
.wccp-btn-submit:active:not(:disabled)        { transform: scale(0.98); }

.wccp-btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ── Estado de loading do botão ──────────────────────────────────────────── */
.wccp-spinner {
  width: 16px;
  height: 16px;
  animation: wccp-spin 0.8s linear infinite;
}

@keyframes wccp-spin {
  to { transform: rotate(360deg); }
}

/* ── Estado de sucesso ───────────────────────────────────────────────────── */
.wccp-btn-submit.is-success {
  background: linear-gradient(135deg, var(--wccp-success), #3da870);
}

/* ── Alerta de bloqueio ──────────────────────────────────────────────────── */
.wccp-alert {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.wccp-alert--error {
  background: rgba(224, 82, 82, 0.12);
  border: 1px solid rgba(224, 82, 82, 0.3);
  color: #f08080;
}

/* ── Link de volta ───────────────────────────────────────────────────────── */
.wccp-back-link {
  margin-top: 28px;
  font-size: 13px;
}

.wccp-back-link a {
  color: var(--wccp-text-muted);
  text-decoration: none;
  transition: color var(--wccp-transition);
}

.wccp-back-link a:hover { color: var(--wccp-gold); }

/* ── Responsividade ──────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .wccp-card {
    padding: 40px 28px;
    border-radius: 12px;
  }
  .wccp-lock-icon { width: 56px; height: 56px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   INTEGRAÇÃO FLATSOME
   O Flatsome usa a classe .page-wrapper e .section para layout.
   Garantimos que o overlay ocupe tudo mesmo dentro desses contêineres.
   ────────────────────────────────────────────────────────────────────────── */
.page-wrapper #wccp-overlay,
.main-content  #wccp-overlay {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* Flatsome adiciona padding no main — zeramos para o overlay ficar full */
.main-content > #wccp-overlay {
  margin-top: -30px;
  margin-bottom: -30px;
}

/* ── Animação de shake (erro de senha) ───────────────────────────────────── */
@keyframes wccp-shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-6px); }
  30%       { transform: translateX(6px); }
  45%       { transform: translateX(-4px); }
  60%       { transform: translateX(4px); }
  75%       { transform: translateX(-2px); }
  90%       { transform: translateX(2px); }
}

.wccp-shake {
  animation: wccp-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}