/*

Theme Name: Vital Video
Theme URI: https://vitalvideo.ai/
Description: AI-Powered Video Creation. Simplified. — LFM theme matching the Vital Video brand system. Plain modern CSS, no framework, no Bootstrap, no jQuery.
Version: 1.0
Author: VitalVideo.ai

*/

@charset "utf-8";

@import url("style_files/css/colors_and_type.css");
@import url("style_files/css/components.css");
@import url("style_files/css/members.css");
@import url("style_files/css/salespage-longform.css");


/* -----------------------------------------------------------
   Page baseline
----------------------------------------------------------- */
html {
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

a {
  color: var(--vv-violet-500);
  text-decoration: none;
}
a:hover { color: var(--vv-violet-600); }

button { font-family: inherit; }


/* -----------------------------------------------------------
   Main page wrapper used by content.php
   .vv-page = full-width wrapper
   .vv-page__inner = constrained 1280px container
----------------------------------------------------------- */
.vv-page {
  min-height: 60vh;
  background: var(--bg-1);
}
.vv-page__inner {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}


/* -----------------------------------------------------------
   Members-area overrides
   These let unmodified LFM page templates inherit the Vital
   Video look without rewriting each member page. Class names
   are the ones LFM emits in mysites.php / surfing.php / etc.
----------------------------------------------------------- */

/* Legacy LFM menu bar fallback — neutralized.
   header.php emits .vv-nav directly, but other LFM page
   templates may still reference .lfm_menu_bar. */
.lfm_menu_bar {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Headings emitted by LFM page templates */
.lfm_title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0 0 16px;
}
.lfm_descr {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.lfm_descr_bold {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--fg-1);
}

/* Profile picture sizing utilities — kept from original */
.profilepic_small { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.profilepic_med   { width: 75px; height: 75px; border-radius: 50%; object-fit: cover; }
.profilepic_large { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }

/* Feed icon recolor */
.feedicon {
  color: var(--vv-violet-500);
  font-size: 20px;
  margin-right: 5px;
}

/* Icon margin parity with the original theme — only kicks in when Font Awesome IS loaded externally */
.far, .fas, .fab, .fal { margin-right: 3px; }

/* Buttonlink (LFM custom <a>-as-button) → recolored to VV violet */
.buttonlink {
  cursor: pointer;
  background: var(--vv-violet-500);
  border-radius: var(--r-md);
  border: 1px solid var(--vv-violet-600);
  display: inline-block;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  margin: 2px 1px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.buttonlink:hover {
  color: #FFFFFF;
  background: var(--vv-violet-400);
  box-shadow: 0 4px 14px rgba(123, 92, 255, 0.28);
}

/* Bootstrap-compat button shims so legacy LFM markup
   that emits .btn / .btn-primary still renders on-brand */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 18px;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary,
.btn.btn-primary {
  background: var(--vv-violet-500);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(123, 92, 255, 0.28);
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--vv-violet-400);
  color: #fff;
  box-shadow: 0 8px 22px rgba(123, 92, 255, 0.38);
}
.btn-secondary,
.btn.btn-secondary {
  background: var(--vv-white);
  color: var(--vv-ink-900);
  border-color: var(--vv-ink-200);
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: var(--vv-paper);
  border-color: var(--vv-ink-300);
  color: var(--vv-ink-900);
}
.btn-success { background: var(--vv-success); color: #fff; }
.btn-danger  { background: var(--vv-danger); color: #fff; }
.btn-info    { background: var(--vv-info);   color: #fff; }
.btn-warning { background: var(--vv-warning); color: #fff; }
.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* Infobar (full-width band emitted by LFM page templates) */
.infobar {
  width: 100%;
  padding: 24px 0;
  color: var(--fg-1);
  background: var(--bg-3);
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.infobar h2 {
  color: var(--fg-1);
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0 0 8px;
}

/* Bootstrap-style vcenter helper — kept */
.vcenter { display: flex; align-items: center; }

/* Data tables — opt-in via .table class only.
   Plain <table> is left unstyled so legacy LFM pages that use
   tables for layout (login form, some plugin pages) keep their
   invisible chrome and don't pick up row-hover backgrounds. */
table.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
table.table th,
table.table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: middle;
}
table.table thead th,
table.table th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  background: var(--bg-3);
}
table.table tbody tr:nth-child(even) td {
  background: rgba(247, 248, 250, 0.5);
}
table.table tbody tr:hover td {
  background: var(--bg-3);
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
textarea,
select,
.form-control {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 10px 14px;
  width: 100%;
  max-width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  outline: none;
  border-color: var(--vv-violet-500);
  box-shadow: 0 0 0 3px rgba(123, 92, 255, 0.18);
}

label, .form-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
  margin-bottom: 6px;
}

/* Cards (Bootstrap-named .card emitted by some LFM templates) */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--fg-1);
  background: var(--bg-3);
}
.card-body { padding: 20px; }
.card-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-2);
  background: var(--bg-1);
}

/* Alerts */
.alert {
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14px;
  border: 1px solid transparent;
  margin: 0 0 16px;
}
.alert-success { background: rgba(16, 185, 129, 0.10); color: #065F46; border-color: rgba(16, 185, 129, 0.30); }
.alert-warning { background: rgba(245, 158, 11, 0.12); color: #92400E; border-color: rgba(245, 158, 11, 0.30); }
.alert-danger  { background: rgba(239, 68, 68, 0.10);  color: #991B1B; border-color: rgba(239, 68, 68, 0.30); }
.alert-info    { background: rgba(59, 130, 246, 0.10); color: #1E40AF; border-color: rgba(59, 130, 246, 0.30); }


/* Headings within members content */
.vv-page__inner h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-3xl); letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fg-1); }
.vv-page__inner h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-2xl); letter-spacing: -0.01em; margin: 24px 0 12px; color: var(--fg-1); }
.vv-page__inner h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-xl); margin: 20px 0 10px; color: var(--fg-1); }
.vv-page__inner h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--t-md); margin: 16px 0 8px; color: var(--fg-1); }
.vv-page__inner p  { color: var(--fg-2); line-height: var(--lh-base); margin: 0 0 12px; }

/* Focus ring fallback */
:focus-visible {
  outline: 2px solid var(--vv-violet-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Selection */
::selection {
  background: rgba(123, 92, 255, 0.22);
  color: var(--vv-ink-900);
}

/* Scrollbar (modern browsers only — gracefully ignored on Safari) */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--vv-ink-300) transparent; }
}


/* -----------------------------------------------------------
   Salespage container break-out helper.
   salespage_template.html opens with </div> to close the
   .vv-container wrapper from content.php, so its full-width
   sections can bleed edge-to-edge. The closing
   <div class="vv-container"> at the end of the template
   reopens it before content.php's </div> lands.
   This rule guarantees the body has zero side-padding so
   the bleed works correctly when content.php is the only
   page-content wrapper.
----------------------------------------------------------- */
body.vv-salespage .vv-page__inner { padding: 0; }