/* ========== ZEEVOU PUBLIC PAGES STYLE ========== */

:root {
  --zeevou-purple: #7c3aed;
  --zeevou-purple-dark: #6d28d9;
  --zeevou-purple-light: #ede9fe;
  --zeevou-text-dark: #1f2937;
  --zeevou-text-gray: #6b7280;
  --zeevou-border: #e5e7eb;
  --zeevou-bg: #f9fafb;
  --zeevou-white: #ffffff;
}

/* ===== BODY & BACKGROUND ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif !important;
  background-color: var(--zeevou-bg) !important;
  color: var(--zeevou-text-dark) !important;
  line-height: 1.6 !important;
}

/* ===== MAIN CONTAINER ===== */
.wrap,
.container,
main {
  max-width: 480px !important;
  margin: 40px auto !important;
  padding: 40px !important;
  background-color: var(--zeevou-white) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ===== LOGO ===== */
.logo img,
header img,
.header img {
  max-height: 50px !important;
  margin-bottom: 24px !important;
}

/* ===== HEADINGS ===== */
h1, h2, h3 {
  color: var(--zeevou-text-dark) !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

h1 {
  font-size: 24px !important;
}

h2 {
  font-size: 20px !important;
}

/* ===== PARAGRAPHS & TEXT ===== */
p {
  color: var(--zeevou-text-gray) !important;
  font-size: 15px !important;
  margin-bottom: 16px !important;
}

/* ===== FORM INPUTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  border: 1px solid var(--zeevou-border) !important;
  border-radius: 8px !important;
  background-color: var(--zeevou-white) !important;
  color: var(--zeevou-text-dark) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--zeevou-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* ===== LABELS ===== */
label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--zeevou-text-dark) !important;
  margin-bottom: 6px !important;
}

/* ===== CHECKBOXES & RADIO BUTTONS ===== */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--zeevou-purple) !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}

.checkbox-list label,
.lists label {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  background-color: var(--zeevou-bg) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.checkbox-list label:hover,
.lists label:hover {
  background-color: var(--zeevou-purple-light) !important;
}

/* ===== PRIMARY BUTTONS ===== */
button,
input[type="submit"],
.button,
a.button {
  background-color: var(--zeevou-purple) !important;
  color: var(--zeevou-white) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  text-decoration: none !important;
  text-align: center !important;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
a.button:hover {
  background-color: var(--zeevou-purple-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

/* Secondary/Cancel buttons */
button.secondary,
.button.secondary,
a.button.secondary {
  background-color: var(--zeevou-white) !important;
  color: var(--zeevou-text-dark) !important;
  border: 1px solid var(--zeevou-border) !important;
}

button.secondary:hover,
.button.secondary:hover {
  background-color: var(--zeevou-bg) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ===== LINKS ===== */
a {
  color: var(--zeevou-purple) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--zeevou-purple-dark) !important;
  text-decoration: underline !important;
}

/* ===== SUCCESS MESSAGES ===== */
.success,
.message.success,
.alert-success {
  background-color: #d1fae5 !important;
  color: #059669 !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  border: none !important;
}

/* ===== ERROR MESSAGES ===== */
.error,
.message.error,
.alert-error,
.alert-danger {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  border: none !important;
}

/* ===== INFO MESSAGES ===== */
.info,
.message.info,
.alert-info {
  background-color: var(--zeevou-purple-light) !important;
  color: var(--zeevou-purple-dark) !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  margin-bottom: 20px !important;
  border: none !important;
}

/* ===== LIST ITEMS (Subscription Lists) ===== */
.list-item,
.subscription-list {
  background-color: var(--zeevou-bg) !important;
  padding: 16px !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

/* ===== FOOTER ===== */
footer,
.footer {
  text-align: center !important;
  padding: 24px !important;
  color: var(--zeevou-text-gray) !important;
  font-size: 13px !important;
}

footer a,
.footer a {
  color: var(--zeevou-text-gray) !important;
}

footer a:hover,
.footer a:hover {
  color: var(--zeevou-purple) !important;
}

/* ===== RESPONSIVE ===== */
@media screen and (max-width: 600px) {
  .wrap,
  .container,
  main {
    margin: 20px !important;
    padding: 24px !important;
    border-radius: 12px !important;
  }
  
  h1 {
    font-size: 20px !important;
  }
  
  button,
  input[type="submit"],
  .button {
    width: 100% !important;
    padding: 14px !important;
  }
}