/* 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 used on the landing page to place keyboard between tiers */
.training-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 520px) 1fr;
  gap: 20px;
  align-items: start;
}

.training-grid .level-item { max-width: 420px; }

/* 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: stack columns on small screens */
@media (max-width: 840px) {
  .training-grid { grid-template-columns: 1fr; gap:18px; }
  .training-grid .level-item { justify-self: center; }
  .keyboard-wrapper { order: 2; }
}

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}

/* 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; }

/* Make the small tag next to brand ("Eye Training") use brand blue for visibility */
.brand .tag {
  color: var(--brand-blue);
  font-weight:600;
  margin-left:8px;
}

.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 */
@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; }
}

/* ── 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 h1 { font-size: 1.6rem; }
  .hero .sub { font-size: 0.95rem; }
  .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; }
}

/* 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)}

/* Profile header: avatar + name + action buttons */
.profile-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.profile-name { flex: 1; min-width: 0; }
.profile-email { color: #666; word-break: break-word; }
.profile-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.profile-sub-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Action cards grid (Feedback / Refer / Support) */
.profile-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.profile-action-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
}
.profile-action-card h4 { margin: 0 0 8px 0; color: #1e3a8a; }
.profile-action-card p { margin: 0 0 10px 0; color: #475569; font-size: 0.95rem; }

/* Landing page responsiveness */
@media (max-width: 1024px) {
  body.marketing { padding: 12px; }

  .card-header {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 10px;
  }

  .card-header .actions {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .hero { padding: 30px 16px; }
  .hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.3rem); }
  .sub { margin-bottom: 24px; }

  .section-centered { margin: 30px auto; padding: 0 12px; }

  .training-grid .training-top-item,
  .training-grid .training-col,
  .training-grid .keyboard-wrapper {
    grid-column: auto !important;
    justify-self: center !important;
    align-items: center !important;
    width: 100%;
  }

  .training-grid .training-col {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  #pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  #pricing-grid .plan {
    width: 100% !important;
    max-width: 460px;
    margin: 0 auto;
    padding: 18px 16px;
  }

  .tabs {
    width: 100%;
    max-width: 420px;
    justify-content: space-between;
  }

  .tab {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
  }

  .site-footer-inner,
  .site-footer-nav {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center;
  }

  .site-footer-nav > div {
    margin-left: 0 !important;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  body.marketing { padding: 8px; }

  .card-header .actions .primary {
    width: 100%;
    margin-left: 0 !important;
  }

  .compare-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tabs .discount-badge {
    position: static;
    transform: none;
    margin-left: 8px;
    padding: 6px 8px;
    font-size: 11px;
    align-self: center;
  }
}

/* Landing hero background image (therapy glasses) */
body.marketing .hero.hero-with-glasses {
  position: relative;
  border-radius: 12px;
  margin: 16px 22px 0;
  padding: 48px 26px;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 42%, rgba(255,255,255,0.70) 64%, rgba(255,255,255,0.90) 100%),
    url('/images/therapy-glasses.png');
  background-size: cover, 520px auto;
  background-position: center, right 24px center;
  background-repeat: no-repeat, no-repeat;
  border: 1px solid rgba(226,232,240,0.9);
}

body.marketing .hero.hero-with-glasses h1,
body.marketing .hero.hero-with-glasses .sub {
  max-width: 720px;
  text-align: left;
}

@media (max-width: 1024px) {
  body.marketing .hero.hero-with-glasses {
    margin: 12px 12px 0;
    background-size: cover, 340px auto;
    background-position: center, right -20px center;
  }
}

@media (max-width: 720px) {
  body.marketing .hero.hero-with-glasses {
    padding: 24px 14px;
    margin: 10px 8px 0;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.87) 100%),
      url('/images/therapy-glasses.png');
    background-size: cover, 240px auto;
    background-position: center, center bottom;
  }
}