/*
 * CompApp restrained product skin.
 * Visual-only overrides for the custom app pages. Keep business logic in PHP untouched.
 */
:root {
  --ca-bg: #f6f7f8;
  --ca-surface: #ffffff;
  --ca-surface-2: #f0f3f5;
  --ca-surface-3: #e7ebef;
  --ca-text: #17202a;
  --ca-muted: #64717f;
  --ca-soft: #8a96a3;
  --ca-border: #dbe2e8;
  --ca-accent: #23745d;
  --ca-accent-2: #2456d6;
  --ca-warning: #b7791f;
  --ca-danger: #c2413b;
  --ca-shadow: 0 10px 24px rgba(21, 32, 43, .07);
  --ca-radius: 8px;
}

html,
body {
  background: var(--ca-bg) !important;
  color: var(--ca-text) !important;
  letter-spacing: 0 !important;
}

body::before,
body::after,
.bg-orb,
.orb,
.orb-1,
.orb-2,
.orb-3,
[class*="orb"] {
  display: none !important;
}

a {
  color: var(--ca-accent-2);
}

.logo,
.ca-logo,
.ca-app-logo,
.ca-app-footer-logo {
  color: var(--ca-text) !important;
  font-weight: 760 !important;
}

.logo span,
.ca-logo span,
.ca-app-logo span,
.ca-app-footer-logo span {
  color: var(--ca-accent-2) !important;
}

.logo-dot,
.ca-logo-dot,
.ca-app-footer-dot {
  background: var(--ca-accent) !important;
  box-shadow: none !important;
}

.wrap,
.page,
.ca-app-shell,
.compapp-page,
.auth-wrap {
  background: var(--ca-bg) !important;
}

.card,
.ca-card,
.compapp-card,
.plan-card,
.modal-box,
.info-box,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
#ca-faq-box,
#ca-support-modal [style*="background:#13131A"],
#ca-perfil-modal [style*="background:#13131A"],
[style*="background:#13131A"][style*="border"],
[style*="background: #13131A"][style*="border"] {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: var(--ca-shadow) !important;
}

.card::before,
.plan-card::before,
.compapp-card::before {
  display: none !important;
}

.card-title,
.title,
.plan-title,
.compapp-card h3,
.ca-title,
h1,
h2,
h3 {
  color: var(--ca-text) !important;
  letter-spacing: 0 !important;
}

.card-sub,
.subtitle,
.note,
.plan-sub,
.plan-card-tagline,
.info-label,
.muted,
p,
label,
small {
  color: var(--ca-muted) !important;
}

input,
select,
textarea,
.field input,
.input-wrap input,
[style*="background:rgba(255,255,255"] {
  background: #fff !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.field input:focus {
  border-color: var(--ca-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(36, 86, 214, .13) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--ca-soft) !important;
}

button,
.btn,
.btn-primary,
.ca-btn-green,
.btn-green,
.modal-btn,
.plan-btn,
.ca-trial-cta,
input[type="submit"] {
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.btn-primary,
.ca-btn-green,
.btn-green,
.modal-btn,
.plan-btn.primary,
button[type="submit"],
input[type="submit"] {
  background: var(--ca-accent) !important;
  color: #fff !important;
  border: 1px solid var(--ca-accent) !important;
}

.btn-secondary,
.dev-btn,
.woocommerce-MyAccount-navigation a {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
}

.ca-help-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ca-text) !important;
}

.btn-primary:hover,
.ca-btn-green:hover,
.btn-green:hover,
.modal-btn:hover,
.plan-btn.primary:hover,
button[type="submit"]:hover {
  background: #0b865f !important;
  border-color: #0b865f !important;
}

.btn-secondary:hover,
.dev-btn:hover,
.ca-help-btn:hover {
  border-color: var(--ca-accent-2) !important;
  color: var(--ca-accent-2) !important;
}

.plan-card.featured,
.plan-card.featured-mes,
.plan-card.trial {
  background: var(--ca-surface) !important;
  border-color: var(--ca-border) !important;
}

.plan-card.featured {
  border-top: 3px solid var(--ca-accent) !important;
}

.plan-card.featured-mes,
.plan-card.trial {
  border-top: 3px solid var(--ca-accent-2) !important;
}

.plan-badge,
.plan-ars-tag,
.badge,
.ca-status,
.info-value {
  background: var(--ca-surface-2) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: 999px !important;
}

.avatar,
.av-lg,
.ca-avatar,
#ca-perfil-avatar,
[style*="linear-gradient(135deg,#7B61FF,#00E5A0)"] {
  background: #263442 !important;
  color: #fff !important;
  border: 1px solid #c9d3dc !important;
  box-shadow: none !important;
}

.avatar img,
.av-lg img,
.ca-avatar img,
#ca-perfil-avatar img {
  background: transparent !important;
  object-fit: contain !important;
  padding: 3px !important;
}

.ca-dropdown,
.ca-app-footer,
.ca-app-header,
.hdr,
.topbar {
  background: rgba(255, 255, 255, .92) !important;
  color: var(--ca-text) !important;
  border-color: var(--ca-border) !important;
  box-shadow: 0 10px 28px rgba(21, 32, 43, .07) !important;
  backdrop-filter: blur(10px);
}

.cm-app-shell,
.cm-app-shell.cm-light {
  background: var(--ca-bg) !important;
  color: var(--ca-text) !important;
}

.cm-trial-banner {
  background: #fff8eb !important;
  border: 1px solid #f1d6a8 !important;
  color: #6b4a12 !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
}

.cm-trial-banner strong,
.cm-trial-cta {
  color: #7a4f05 !important;
}

.check-circle {
  background: #e9f8f1 !important;
  border-color: #b9e8d4 !important;
  color: var(--ca-accent) !important;
}

hr {
  border-color: var(--ca-border) !important;
}

table,
tr,
td,
th {
  border-color: var(--ca-border) !important;
}

@media (max-width: 720px) {
  .card,
  .ca-card,
  .plan-card,
  .modal-box {
    border-radius: var(--ca-radius) !important;
  }
}

/* App search surface: explicit product UI, no mixed dark/light cards. */
.cm-app-shell {
  --cm-accent: var(--ca-accent) !important;
  --cm-purple: var(--ca-accent-2) !important;
  --cm-card-bg: var(--ca-surface) !important;
  --cm-card-border: var(--ca-border) !important;
  min-height: 100svh !important;
  background: var(--ca-bg) !important;
  color: var(--ca-text) !important;
  overflow: visible !important;
}

.cm-layout { max-width: 760px !important; }
.cm-bg-orb,
.cm-discovery-bg,
.cm-particle,
.cm-chromosome { display: none !important; }

.cm-hero {
  align-items: stretch !important;
  gap: 16px !important;
  text-align: left !important;
}

.cm-hero-top { justify-content: flex-start !important; }

.cm-badge {
  width: fit-content !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ca-text) !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 760 !important;
}

.cm-badge-dot { display: none !important; }

.cm-hero-title {
  max-width: 620px !important;
  color: var(--ca-text) !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
}

.cm-search-card,
.cm-focus-history,
.cm-discovery-shell,
.cm-activity-card,
.cm-ranking-card,
.cm-results-grid .result-card,
.cm-official-block,
.cm-user-block,
.cm-rc-validated,
.cm-rc-suggested {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: var(--ca-shadow) !important;
  backdrop-filter: none !important;
}

.cm-search-card { padding: 18px !important; }
.cm-input-row { grid-template-columns: minmax(0, 1fr) auto !important; }

.cm-search-input {
  background: #fff !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
}

.cm-search-input::placeholder { color: var(--ca-soft) !important; }

.cm-search-input:focus {
  border-color: var(--ca-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(36, 86, 214, .13) !important;
}

.cm-search-btn {
  min-width: 120px !important;
  background: var(--ca-accent) !important;
  color: #fff !important;
  border: 1px solid var(--ca-accent) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
  transform: none !important;
}

.cm-search-btn:hover {
  background: #0b865f !important;
  border-color: #0b865f !important;
  transform: none !important;
  box-shadow: none !important;
}

.cm-icon-btn,
.cm-install-btn,
#cm-mic-btn,
.cm-focus-chip,
.cm-suggested-search,
.cm-admin-help-toggle {
  background: var(--ca-surface-2) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
}

.cm-kbd-hint,
.cm-kbd-hint kbd,
.cm-focus-label,
.cm-section-label,
.cm-activity-subheading,
.cm-ranking-count,
.cm-ranking-empty,
.cm-search-match-soft,
.cm-results-grid .result-card p,
.cm-results-grid [style*="color:#94a3b8"],
.cm-results-grid [style*="color:#64748b"],
.cm-results-grid [style*="color:#475569"],
.cm-results-grid [style*="color:rgba(240,240,240"] {
  color: var(--ca-muted) !important;
}

.cm-kbd-hint kbd {
  background: var(--ca-surface-2) !important;
  border-color: var(--ca-border) !important;
}

.cm-help-text,
.cm-results-grid .result-card,
.cm-results-grid .result-card div,
.cm-results-grid .result-card span,
.cm-results-grid .result-card li,
.cm-search-activity-item,
.cm-ranking-item {
  color: var(--ca-text) !important;
}

.cm-results-grid .result-card strong,
.cm-search-query,
.cm-search-match,
.cm-ranking-name,
.cm-ranking-title,
.cm-activity-heading {
  color: var(--ca-text) !important;
}

.cm-results-grid a,
.cm-results-grid [style*="color:#00E5A0"],
.cm-search-arrow {
  color: var(--ca-accent-2) !important;
}

.cm-results-grid [style*="background:#13131A"],
.cm-results-grid [style*="background:#0f172a"],
.cm-results-grid [style*="background:rgba(15,23,42"],
.cm-results-grid [style*="background:rgba(2,6,23"],
.cm-results-grid [style*="background:rgba(255,255,255,.04)"],
.cm-results-grid [style*="background:rgba(255,255,255,0.04)"] {
  background: var(--ca-surface) !important;
  border-color: var(--ca-border) !important;
}

.cm-results-grid [style*="background:rgba(20,83,45"],
.cm-rc-validated {
  background: #eefaf4 !important;
  border-color: #b9e8d4 !important;
}

.cm-results-grid [style*="color:#4ade80"],
.cm-results-grid [style*="color:#16a34a"] {
  color: #147a55 !important;
}

.cm-discovery-shell {
  margin-top: 28px !important;
  overflow: visible !important;
}

.cm-discovery-shell::before { display: none !important; }
.cm-section-header { padding: 18px 18px 0 !important; }
.cm-section-line { background: var(--ca-border) !important; }
.cm-activity-grid,
.cm-ranking-section { padding: 14px 18px 18px !important; }

.cm-discovery-chip,
.cm-search-activity-item,
.cm-ranking-item {
  background: var(--ca-surface-2) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
}

.cm-ranking-medal {
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--ca-surface-3) !important;
  color: var(--ca-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.cm-trial-icon { font-size: 0 !important; }
.cm-trial-icon::before {
  content: "Trial";
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f1d6a8;
  color: #6b4a12;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 520px) {
  .cm-input-row { grid-template-columns: 1fr !important; }
  .cm-search-btn { width: 100% !important; }
  .cm-hero-title { font-size: 22px !important; }
}

/* App template badges/modals that arrive with inline dark colors. */
.ca-badge {
  background: var(--ca-surface-2) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: 999px !important;
}

.ca-btn,
.ca-btn-green,
.ca-btn-purple {
  border-radius: var(--ca-radius) !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

.ca-btn-green,
.ca-btn-purple {
  background: var(--ca-accent) !important;
  color: #fff !important;
  border: 1px solid var(--ca-accent) !important;
}

.ca-btn-green:hover,
.ca-btn-purple:hover {
  background: #0b865f !important;
  border-color: #0b865f !important;
}

#ca-faq-box p[style*="color:#f1f5f9"],
#ca-support-modal p[style*="color:#f1f5f9"],
#ca-perfil-modal p[style*="color:#f1f5f9"],
[style*="color:#f1f5f9"] {
  color: var(--ca-text) !important;
}

/* Auth screens: restore contrast where old dark-theme vars remain. */
.remember-row,
.remember-row span,
.divider,
.forgot a,
.register-link,
.register-link a,
.signup,
.signup a {
  color: var(--ca-muted) !important;
}

.forgot a,
.register-link a,
.signup a {
  color: var(--ca-accent-2) !important;
}

.divider::before,
.divider::after {
  background: var(--ca-border) !important;
}

.toggle-pw {
  width: auto !important;
  min-width: 54px !important;
  right: 12px !important;
  padding: 4px 6px !important;
  color: var(--ca-muted) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.toggle-pw:hover {
  color: var(--ca-accent-2) !important;
}

.input-wrap .field input,
.input-wrap input {
  padding-right: 76px !important;
}

.card,
.ca-card,
.cm-search-card,
.cm-results-grid .result-card,
.plan-card {
  opacity: 1 !important;
}

/* User menu and account page: old dark labels on the new light surface. */
.ca-user-btn {
  background: transparent !important;
  color: var(--ca-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ca-user-btn:hover {
  background: transparent !important;
  border-color: transparent !important;
}

.ca-user-name,
.ca-dropdown-name,
.user-name,
.modal-title,
.dev-name,
.info-v {
  color: var(--ca-text) !important;
}

.ca-user-chevron,
.ca-dropdown-email,
.ca-dropdown-item,
.ca-dropdown-plan,
.ca-app-footer-copy,
.ca-app-footer-links a,
.user-email,
.card-label,
.info-l,
.dev-meta,
.field-label,
.helper,
.modal-x,
.logo-btn {
  color: var(--ca-muted) !important;
}

.ca-dropdown {
  background: var(--ca-surface) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: var(--ca-shadow) !important;
}

.ca-dropdown-header,
.ca-dropdown-divider {
  border-color: var(--ca-border) !important;
  background: var(--ca-border) !important;
}

.ca-dropdown-header {
  background: var(--ca-surface) !important;
  border-bottom: 1px solid var(--ca-border) !important;
}

.ca-dropdown-item {
  background: transparent !important;
  border: 0 !important;
}

.ca-dropdown-item:hover {
  background: var(--ca-surface-2) !important;
  color: var(--ca-text) !important;
}

.ca-dropdown-item.danger:hover {
  background: #fff1f0 !important;
  color: var(--ca-danger) !important;
}

.ca-dropdown-plan {
  background: var(--ca-surface-2) !important;
  border: 1px solid var(--ca-border) !important;
}

.btn-ghost,
.ca-logout,
.ca-btn-ghost {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
}

.btn-ghost:hover,
.ca-logout:hover,
.ca-btn-ghost:hover {
  border-color: var(--ca-accent-2) !important;
  color: var(--ca-accent-2) !important;
}

.user-edit {
  color: var(--ca-accent-2) !important;
}

.dev-item,
.logo-btn {
  background: var(--ca-surface-2) !important;
  border: 1px solid var(--ca-border) !important;
}

.dev-icon {
  min-width: 34px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--ca-surface-3) !important;
  color: var(--ca-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.modal-bg {
  background: rgba(23, 32, 42, .38) !important;
}

.modal-box {
  background: var(--ca-surface) !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
  border-radius: var(--ca-radius) !important;
  box-shadow: var(--ca-shadow) !important;
}

.field-input {
  background: #fff !important;
  color: var(--ca-text) !important;
  border: 1px solid var(--ca-border) !important;
}

.field-input:focus {
  border-color: var(--ca-accent-2) !important;
  box-shadow: 0 0 0 3px rgba(36, 86, 214, .13) !important;
}

/* Catch remaining dark-theme inline text in app/account modals. */
[style*="color:rgba(240,240,240"],
[style*="color:#F0F0F0"],
[style*="color:#f0f0f0"],
[style*="color:#e2e8f0"],
[style*="color:#94a3b8"] {
  color: var(--ca-muted) !important;
}

[style*="font-weight:700"][style*="color:#F0F0F0"],
[style*="font-weight:700"][style*="color:#f1f5f9"],
[style*="font-weight:800"][style*="color:#f1f5f9"] {
  color: var(--ca-text) !important;
}

/* Final tuning: quieter green, flatter activity layout, less nested-card feel. */
.logo-dot,
.ca-logo-dot,
.ca-app-logo-dot,
.ca-app-footer-dot,
.cm-status-dot,
[style*="background:#00E5A0"],
[style*="background: #00E5A0"] {
  background: var(--ca-accent) !important;
  box-shadow: none !important;
}

.logo,
.ca-logo,
.ca-app-logo,
.ca-app-footer-logo,
.info-value,
.user-edit,
.cm-badge,
.cm-results-grid [style*="color:#00E5A0"],
[style*="color:#00E5A0"],
[style*="color: #00E5A0"],
[style*="color:#00c988"],
[style*="color:#00946a"] {
  color: var(--ca-accent) !important;
}

.btn-primary,
.ca-btn-green,
.ca-btn-purple,
.btn-green,
.modal-btn,
.cm-search-btn,
button[type="submit"],
input[type="submit"] {
  background: var(--ca-accent) !important;
  border-color: var(--ca-accent) !important;
}

.btn-primary:hover,
.ca-btn-green:hover,
.ca-btn-purple:hover,
.btn-green:hover,
.modal-btn:hover,
.cm-search-btn:hover,
button[type="submit"]:hover {
  background: #1c604d !important;
  border-color: #1c604d !important;
}

.ca-dropdown-plan,
.cm-ranking-tag,
.cm-trial-icon::before {
  background: #edf4f1 !important;
  color: #2b5f50 !important;
  border-color: #cbdcd6 !important;
}

.cm-discovery-shell {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 24px !important;
  padding: 0 !important;
}

.cm-discovery-shell .cm-section-header,
.cm-ranking-section .cm-section-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cm-activity-grid,
.cm-ranking-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.cm-activity-card,
.cm-ranking-card {
  box-shadow: none !important;
}

@media (min-width: 780px) {
  .cm-layout {
    max-width: 1160px !important;
  }

  .cm-hero,
  .cm-trial-banner,
  .cm-results-grid {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .cm-discovery-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, .85fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .cm-discovery-shell > .cm-section-header {
    grid-column: 1 / -1 !important;
    padding-bottom: 0 !important;
  }

  .cm-activity-grid {
    display: contents !important;
  }

  .cm-activity-card {
    min-height: 100% !important;
  }

  .cm-ranking-section {
    padding: 0 !important;
  }

  .cm-ranking-section .cm-section-header {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
  }

  .cm-ranking-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 779px) {
  .cm-hero {
    text-align: center !important;
    align-items: center !important;
  }

  .cm-badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}