/* marketing.css -- styles for landing, profile and reset pages (separate from main app)
   Modern, professional color palette inspired by activation_email.html
   Blue header: #0a7bd9, Green action: #28a745, card border: #e6eef4
*/
:root {
    --logo-blue: #0000FF;
    --logo-red: #FF0000;
    --banner-bg: #d0d4d9;
    --brand-blue: #0000FF;
    --brand-red: #FF0000;
    --brand-green: #28a745;
    --card-bg: #ffffff;
    --card-border: #e6eef4;
    --muted: #666;
    --panel-bg: #f6f9fb;
    --max-width: 1100px;
}

/* Training grid layout: Beginner on row 1 (centered), then 2-col rows */
.training-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.training-grid .level-item { max-width: 100%; }

/* Keyboard wrapper to ensure proper sizing and centering */
.keyboard-wrapper { display:flex; align-items:center; justify-content:center; }
.keyboard-bg { padding: 12px; border-radius: 12px; background: #000; box-shadow: 0 6px 18px rgba(2,6,23,0.25); }
.keyboard { max-width: 460px; width:100%; }

/* Responsive: single column on small screens */
@media (max-width: 840px) {
  .training-grid { grid-template-columns: 1fr; gap: 14px; }
  .training-grid .tier-beginner { max-width: 100% !important; }
}

body.marketing {
  background:var(--panel-bg);
  font-family: Inter, Arial, Helvetica, sans-serif;
  color:#222;
  margin:0;
  padding:20px;
}

/* Override app.css dark-theme globals when showing marketing page */
html.marketing, body.marketing, #app {
  background: var(--panel-bg) !important;
  color: #0b1b2b !important;
  height: auto !important;
  min-height: auto !important;
}

.container {
  max-width:var(--max-width);
  margin:0 auto;
  padding:0;
}

.card {
  background:var(--card-bg);
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--card-border);
  box-shadow:0 8px 24px rgba(15,23,36,0.06);
}

.card-header{
  background:var(--brand-blue);
  color:#fff;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:12px;
}
.card-header .brand{font-weight:800;font-size:20px}
.card-header .sub{margin-left:auto;font-size:13px;opacity:0.9}

/* ── Header layout ────────────────────────────────────────────────── */
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  justify-content: space-between;
}

/* Tagline: centered in header on desktop */
.header-tagline {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
  color: #0f172a;
  padding: 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tagline bar below header: hidden on desktop */
.tagline-bar {
  display: none;
  background: var(--banner-bg);
  text-align: center;
  font-size: 0.9rem;
  color: #0f172a;
  padding: 6px 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Header action buttons: show label on desktop */
.btn-label {
  display: inline;
}

/* Actions group stays right-aligned */
.card-header .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Mobile: hide tagline in header, show tagline bar below; buttons icon-only */
@media (max-width: 520px) {
  .header-tagline { display: none; }
  .tagline-bar { display: block; }
  .btn-label { display: none; }
  .card-header .actions button {
    padding: 8px !important;
  }
}

/* Brand two-color parts (use logo variables) */
.brand-vision { color: var(--logo-red); font-weight:800; }
.brand-sync { color: var(--logo-blue); font-weight:800; }

/* When brand appears in a colored card header, ensure contrast
   - keep Vision in brand-red, but allow Sync to use the logo blue so it remains visible on light banner
   - the small tag (page label) should be black when the banner is light */
.card-header .brand-vision { color: var(--brand-red); }
.card-header .brand-sync { color: var(--logo-blue); }
.card-header .tag { color: black; }

.card-body{padding:20px;color:#111}
.card-title{color:var(--brand-blue);margin:0 0 8px 0}

/* Ensure form controls inside cards override dark app.css defaults */
.card input[type="text"], .card input[type="password"], .card input[type="email"], .card input[type="number"], .card textarea, .card select {
  background:#fbfdff !important;
  color:#0b1b2b !important;
  border:1px solid #e8eef6 !important;
  padding:10px !important;
  border-radius:8px !important;
}

/* Profile edit input override: ensure inputs on profile become light when editing (remove dark app default) */
.profile-input {
  background: #fbfdff !important;
  color: #0b1b2b !important;
  border: 1px solid #e8eef6 !important;
  padding: 8px !important;
  border-radius: 6px !important;
}
.card .primary{
  background:var(--brand-blue) !important;
  color:#fff !important;
  border:none !important;
  padding:10px 14px !important;
  border-radius:8px !important;
}
.card .link-accent{color:var(--brand-blue) !important}

/* Ensure any marketing page inputs (including pages not using .card wrappers) override global dark app.css */
body.marketing input[type="text"],
body.marketing input[type="password"],
body.marketing input[type="email"],
body.marketing input[type="number"],
body.marketing textarea,
body.marketing select {
  background:#fbfdff !important;
  color:#0b1b2b !important;
  border:1px solid #e8eef6 !important;
  padding:10px !important;
  border-radius:8px !important;
}

/* Links inside marketing pages should use the brand color */
body.marketing a { color: var(--brand-blue) !important; }

.card-illustration{background:transparent;padding:24px;border-top:1px solid var(--card-border)}

/* Profile specific layout */
.profile-grid{display:grid;grid-template-columns:1fr 320px;gap:18px}
.profile-aside{background:#fafcff;padding:12px;border-radius:8px;border:1px solid var(--card-border)}

.avatar{
  width:84px;height:84px;border-radius:12px;background:#08345a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:28px
}

.table{width:100%;border-collapse:collapse}
.table td{padding:8px;border-bottom:1px solid #eef6fb}

/* Reset page CTA */
.btn-primary-green{
  background:var(--brand-green);color:#fff;padding:10px 14px;border-radius:6px;border:none;cursor:pointer;font-weight:600
}

a.link-accent{color:var(--brand-blue);text-decoration:none}

/* Responsive */
@media(max-width:720px){
  .profile-grid{grid-template-columns:1fr}
  .container{padding:12px}
  .card-body{padding:16px}
  .signup-grid{grid-template-columns:1fr}
}

/* Modal (sign-in / sign-up) modern variant -- centralized here for marketing pages */
.login-overlay{
  position:fixed;inset:0;background:rgba(2,6,23,0.75);display:none;align-items:flex-start;justify-content:center;z-index:1100;padding:20px;
  overflow-y:auto;
}
.login-card{
  width:min(96%,600px);max-width:600px;border-radius:12px;overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);box-shadow:0 12px 40px rgba(2,6,23,0.35);
  /* ensure modal fits vertically and is scrollable on small screens */
  max-height: calc(100vh - 40px);
  display:flex;flex-direction:column;
  margin:auto 0;
}
.login-card .modal-header{background:var(--brand-blue);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:12px}
.login-card .modal-header h3{margin:0;font-size:1.05rem;font-weight:700}
.login-card .modal-body{padding:14px 18px;display:block;flex:1;overflow:auto}
.login-card label{display:block;font-size:0.9rem;color:var(--muted);margin-bottom:6px}
.login-card input[type="text"], .login-card input[type="password"], .login-card input[type="email"], .login-card input[type="number"]{
  width:100%;padding:10px;border-radius:8px;border:1px solid #e8eef6;background:#fbfdff;color:#0b1b2b;margin-bottom:12px;box-shadow:none;font-size:0.95rem
}

/* Force signup grid inputs to fill their grid cells and use consistent box-sizing */
.signup-grid > div, .signup-grid .field {
  width:100%;
}
.signup-grid input[type="text"], .signup-grid input[type="email"], .signup-grid input[type="password"], .signup-grid textarea {
  width:100% !important;
  box-sizing: border-box !important;
  padding:10px !important;
}

/* Password wrap for signup fields (custom toggle removed; keep normal input padding) */
.pw-wrap { position: relative; }
.pw-wrap .pw-toggle { display:none !important; }
.pw-wrap input { padding-right:10px !important; }

/* Make captcha row span full width and align inputs nicely */
.signup-grid #signupCaptcha { grid-column: 1 / -1; display:flex; gap:10px; align-items:center; }
.captcha-image { width: 200px; height: auto; max-height:60px; object-fit:cover; }
.captcha-answer { flex: 0 0 160px; }

.field-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.field-row .label-left{flex:1}
.field-row .link-right{flex:0 0 auto;font-size:0.9rem}
.link-right a{color:var(--brand-blue);text-decoration:none}
.login-card .actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.login-card .primary{background:var(--brand-blue);color:#fff;border:none;padding:10px 16px;border-radius:8px;font-weight:700;cursor:pointer}
.login-card .primary.ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff}
.login-card .text-btn{background:none;border:none;color:var(--brand-blue);cursor:pointer;padding:6px}
.login-card .error-msg{color:#ffb3b3;background:#fff6f6;padding:8px;border-radius:6px;border:1px solid #ffd6d6;margin-bottom:8px;display:none}
.login-card .success-msg{color:#0a5;background:#f0fff5;padding:8px;border-radius:6px;border:1px solid #c7f0d0;margin-bottom:8px}
.signup-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--brand-blue);cursor:pointer}

/* Slight typography tweaks for marketing pages */
body.marketing, body.marketing .card-body, body.marketing p { font-family: 'Inter', Arial, Helvetica, sans-serif; color:#0b1b2b; }
h1, h2, h3 { font-family: 'Inter', Arial, Helvetica, sans-serif; }

/* Ensure hero and major headings are highly readable on white card background */
.card .hero h1,
.card .hero h2,
.card .hero h3 {
  color: #0b1b2b; /* dark text for strong contrast */
}
.card .hero p.sub {
  color: #4b5563; /* muted but readable */
}

/* Make compare-card and pricing text darker for readability */
.compare-card, .plan, .level-item {
  color: #0b1b2b;
}
.compare-card ul { color: #475569; }

.level-item, .plan {
  /* slightly darker card background for tiers and pricing to increase contrast */
  background: #f3f7fb;
  border: 1px solid #dbeaf5;
  color: #0b1b2b;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(15,23,36,0.06);
}
.level-item .level-name { color: var(--brand-blue); font-weight:800; margin-bottom:8px; }
.level-item .level-desc { color: #475569; }
.plan .price { color: #0b1b2b; font-weight:800; }
.plan .plan-sub { color: #475569; }
.plan.featured { border-color: var(--brand-blue); }


/* Accent title stronger contrast */
.accent-title { color: var(--brand-blue); }

/* Captcha and password strength */
.captcha-image{height:60px;display:block}
.captcha-answer{width:160px;min-width:120px;padding:10px;border-radius:8px;border:1px solid #e8eef6;background:#fbfdff;font-size:0.95rem}

/* adjust actions layout inside modal body for register/back buttons */
.login-card .modal-body .actions { justify-content: flex-start; }
.pw-strength{height:8px;background:#eee;width:100%;border-radius:4px;overflow:hidden}
.pw-strength-bar{height:8px;width:0%;background:#f66}

/* Utility */
.full-width{width:100%}

/* Hide number input spinners (in case type=number used elsewhere) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Additional pricing badge styles appended */
/* Price badge: darker rounded panel to highlight the price number */
/* Revert price badge to simple text appearance - keep price readable */
.plan .price {
  display: block;
  background: transparent;
  color: #0b1b2b;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

/* Featured plan subtle ring instead of heavy badge */
.plan.featured { box-shadow: 0 6px 18px rgba(10,123,217,0.06); border: 1px solid rgba(10,123,217,0.08); }

.plan h3 { font-weight:700; color:#0b1b2b; margin-bottom:6px; }


/* ── Large screen / TV / projector responsive ─────────────────────── */
/* Landing + profile pages scale up content gracefully on very large displays */

@media (min-width: 1400px) {
  :root { --max-width: 1240px; }
}

@media (min-width: 1920px) {
  :root { --max-width: 1440px; }
  body.marketing { font-size: 1.05rem; }
  .section-centered { padding: 32px 24px; }
  .hero h1 { font-size: 2.6rem; }
  .level-item, .plan { padding: 22px; border-radius: 16px; }
  .avatar { width: 96px; height: 96px; font-size: 32px; }
  .table td { padding: 10px; }
}

@media (min-width: 2560px) {
  :root { --max-width: 1760px; }
  body.marketing { font-size: 1.15rem; }
  .hero h1 { font-size: 3rem; }
  .level-item, .plan { padding: 26px; }
  .container { padding: 0 32px; }
  .card-body { padding: 28px; }
  .avatar { width: 108px; height: 108px; font-size: 36px; }
}

/* ── Profile page responsive ──────────────────────────────────────── */
/* Better action card layout for narrow screens */

/* Base styles for profile grids (desktop: 2 columns) */
.profile-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.profile-edit-grid {
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px 20px;
  align-items: start;
}

@media (max-width: 480px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-aside { margin-top: 8px; }
  .table td { padding: 6px 4px; font-size: 0.9rem; }
  .avatar { width: 64px; height: 64px; font-size: 22px; border-radius: 8px; }

  .profile-top-grid {
    grid-template-columns: 1fr !important;
  }

  .profile-edit-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  /* Profile action buttons: icon-only on mobile */
  .profile-btn-label {
    display: none;
  }
  .profile-action-btn {
    padding: 8px !important;
    min-width: unset !important;
    gap: 0 !important;
  }
}

/* ── Marketing landing responsive tweaks ─────────────────────────── */
/* Pricing grid: always single column on phone, 3 cols on tablet+ */
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr !important; }
  .compare-grid { grid-template-columns: 1fr !important; }
  .hero { text-align: center; }
  .hero h1 { font-size: 1.6rem; text-align: center !important; }
  .hero .sub { font-size: 0.95rem; text-align: center !important; max-width: 100% !important; margin: 0 auto; }
  .section-centered { padding: 16px 12px; }
}

@media (max-width: 840px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
}

/* Footer: wrap on small screens */
.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .site-footer-inner { flex-direction: column; text-align: center; }
  .site-footer-nav { justify-content: center; }