/* TAYF Lovable UI skin for Gutenberg blocks.
   Apply by inserting the pattern (it already wraps with .tayf-lovable),
   or add class "tayf-lovable" to any outer Group block.
*/

.tayf-lovable{
  --tayf-bg:#0b1220;
  --tayf-panel:#0f172a;
  --tayf-panel-2:#0b1326;
  --tayf-border:#1f2937;
  --tayf-text:#e2e8f0;
  --tayf-muted:#94a3b8;
  --tayf-title:#ffffff;
  --tayf-accent:#22c55e;
  --tayf-accent-2:#16a34a;
  --tayf-warn:#f59e0b;
  --tayf-radius-xl:24px;
  --tayf-radius-lg:18px;
  --tayf-radius-md:16px;
  --tayf-radius-sm:12px;
  --tayf-shadow:0 10px 30px rgba(0,0,0,.25);
  color:var(--tayf-text);
}

/* Better RTL + spacing inside editor too */
.tayf-lovable, .tayf-lovable *{ box-sizing:border-box; }
.tayf-lovable a{ color:var(--tayf-accent); text-decoration:none; }
.tayf-lovable a:hover{ text-decoration:underline; }

.tayf-lovable .tayf-hero{
  background:var(--tayf-bg);
  border:1px solid var(--tayf-border);
  border-radius:var(--tayf-radius-xl);
  padding:44px 28px;
  box-shadow:var(--tayf-shadow);
}

.tayf-lovable .tayf-pills{ gap:10px; margin-bottom:16px; }
.tayf-lovable .tayf-pill{
  display:inline-block;
  background:var(--tayf-panel);
  border:1px solid var(--tayf-border);
  color:var(--tayf-text);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  margin:0;
}

.tayf-lovable h1, .tayf-lovable h2, .tayf-lovable h3{ color:var(--tayf-title); }
.tayf-lovable h1{ font-size:36px; line-height:1.2; font-weight:800; margin:12px 0; }
.tayf-lovable .tayf-lead{ color:var(--tayf-text); font-size:16px; line-height:1.9; margin:0 0 22px; }

/* Buttons */
.tayf-lovable .tayf-btn .wp-block-button__link{
  background:var(--tayf-accent);
  color:#071019;
  border-radius:999px;
  padding:12px 20px;
  font-weight:700;
  border:1px solid rgba(0,0,0,0);
}
.tayf-lovable .tayf-btn-outline .wp-block-button__link{
  background:transparent;
  color:var(--tayf-title);
  border-radius:999px;
  padding:12px 20px;
  font-weight:600;
  border:1px solid #334155;
}
.tayf-lovable .tayf-btn-outline-dark .wp-block-button__link{
  background:transparent;
  color:#0f172a;
  border-radius:999px;
  padding:10px 20px;
  font-weight:500;
  border:1px solid #cbd5f5;
}

/* Cards (dark) */
.tayf-lovable .tayf-card{
  background:var(--tayf-panel);
  border:1px solid var(--tayf-border);
  border-radius:var(--tayf-radius-md);
  padding:16px;
}
.tayf-lovable .tayf-card-title{ margin:0 0 6px; color:var(--tayf-title); font-size:13px; font-weight:700; }
.tayf-lovable .tayf-card-text{ margin:0; color:#cbd5e1; font-size:12px; line-height:1.7; }
.tayf-lovable .tayf-card-link{ margin:10px 0 0; font-size:12px; font-weight:700; }
.tayf-lovable .tayf-card-link a{ color:var(--tayf-accent); }

.tayf-lovable .tayf-quicklinks{
  margin-top:16px;
  background:var(--tayf-panel);
  border:1px solid var(--tayf-border);
  border-radius:var(--tayf-radius-sm);
  padding:12px 16px;
}
.tayf-lovable .tayf-quicklinks p{ margin:0; font-size:12px; line-height:1.8; color:var(--tayf-muted); }
.tayf-lovable .tayf-quicklinks a{ color:var(--tayf-text); }

/* Sections */
.tayf-lovable .tayf-section h2{ color:#0f172a; font-size:22px; font-weight:800; margin:0 0 6px; }
.tayf-lovable .tayf-sub{ color:#64748b; font-size:13px; line-height:1.7; margin:0 0 16px; }

/* Light cards */
.tayf-lovable .tayf-card-light{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--tayf-radius-lg);
  padding:18px;
}
.tayf-lovable .tayf-card-light h3{ color:#0f172a; font-size:16px; font-weight:800; margin:0 0 6px; }
.tayf-lovable .tayf-card-light p{ color:#475569; font-size:13px; line-height:1.7; margin:0 0 10px; }
.tayf-lovable .tayf-card-light .tayf-card-link{ margin:0; }
.tayf-lovable .tayf-card-light .tayf-card-link a{ color:var(--tayf-accent-2); }

/* CTA */
.tayf-lovable .tayf-cta{
  background:#f8fafc;
  border:1px solid #0f172a;
  border-radius:16px;
  padding:24px;
}
.tayf-lovable .tayf-cta h2{ color:#0f172a; font-size:20px; font-weight:800; margin:0 0 8px; }
.tayf-lovable .tayf-cta p, .tayf-lovable .tayf-cta li{ color:#475569; font-size:13px; line-height:1.7; }

/* Dashboard mock */
.tayf-lovable .tayf-dashboard{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:16px 18px;
}
.tayf-lovable .tayf-badge{
  margin:0;
  display:inline-block;
  background:var(--tayf-accent-2);
  color:#fff;
  font-size:11px;
  font-weight:600;
  border-radius:999px;
  padding:2px 10px;
}
.tayf-lovable .tayf-muted{ margin:0; font-size:11px; color:#475569; }

.tayf-lovable .tayf-tabs{ gap:6px; padding:10px 0; }
.tayf-lovable .tayf-tab{
  margin:0;
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  color:#475569;
  background:transparent;
}
.tayf-lovable .tayf-tab.is-active{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }

.tayf-lovable .tayf-mini{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:8px 10px; }
.tayf-lovable .tayf-mini-label{ margin:0; font-size:11px; color:#64748b; }
.tayf-lovable .tayf-mini-value{ margin:0; font-size:13px; font-weight:600; color:#0f172a; }

.tayf-lovable .tayf-table{ margin-top:8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.tayf-lovable .tayf-table-row{ display:grid; grid-template-columns: 1.6fr .9fr .6fr; gap:8px; padding:10px; font-size:12px; color:#0f172a; }
.tayf-lovable .tayf-table-head{ font-size:11px; font-weight:600; color:#64748b; background:#ffffff; border-bottom:1px solid #e2e8f0; }
.tayf-lovable .tayf-status{ font-weight:700; font-size:11px; }
.tayf-lovable .tayf-status.ok{ color:var(--tayf-accent); }
.tayf-lovable .tayf-status.warn{ color:var(--tayf-warn); }
.tayf-lovable .tayf-status.idle{ color:#94a3b8; }

/* Stage cards */
.tayf-lovable .tayf-stage,
.tayf-lovable .tayf-plan{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px;
}
.tayf-lovable .tayf-stage-k{ margin:0 0 8px; font-size:12px; font-weight:700; color:#0f172a; }
.tayf-lovable .tayf-stage h3,
.tayf-lovable .tayf-plan h3{ margin:0 0 8px; color:#0f172a; font-size:16px; font-weight:800; }
.tayf-lovable .tayf-stage p,
.tayf-lovable .tayf-plan p{ margin:0 0 10px; color:#475569; font-size:13px; line-height:1.7; }

.tayf-lovable .tayf-plan.is-featured{
  border:2px solid var(--tayf-accent);
  background:#f0fdf4;
}
.tayf-lovable .tayf-feature{
  margin:0;
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:4px 10px;
  border-radius:999px;
  background:var(--tayf-accent);
  color:#071019;
}

/* Make columns look tight on mobile */
@media (max-width: 781px){
  .tayf-lovable h1{ font-size:28px; }
  .tayf-lovable .tayf-hero{ padding:28px 18px; }
  .tayf-lovable .tayf-table-row{ grid-template-columns:1fr; }
}

/* Ensure the block editor canvas doesn't force light text on light sections */
.editor-styles-wrapper .tayf-lovable{ color:var(--tayf-text); }