/* ============================================================
   ReviewKu - Custom Styles (Refreshed)
   Theme: Two-tone (orange/blue) primary accents + neutral SaaS cards
   Purpose: Fix white-on-white text, ensure contrast & visible buttons
   ============================================================ */

/* ---------------------------
   Base & Typography
----------------------------*/

:root{
  --text-default: #0f172a;
  --muted: #6b7280;
  --surface: #ffffff;
  --card-border: rgba(2,6,23,0.06);
  --primary-from: #fb923c; /* orange */
  --primary-to: #f97316;
  --secondary-from: #06b6d4; /* cyan/blue */
  --secondary-to: #0891b2;
  --accent-star: #facc15;
  --success-from: #16a34a;
  --success-to: #059669;
  --danger: #dc2626;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#f8fafc,#eef2ff);
  color: var(--text-default);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Links & buttons default */
a, button { transition: all .18s ease; font-weight:600; }
a { color: var(--primary-to); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Normal text utilities */
.small-muted, .text-slate-500, .text-slate-600 { color: var(--muted) !important; }

/* ---------------------------
   Cards (SaaS white)
----------------------------*/
.card, .card-saas, .card-saas * {
  background: transparent;
  color: var(--text-default);
}

.card, .card-saas {
  background: var(--surface);
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}

/* Keep images inside cards tidy */
.card-saas img, article.card-saas img {
  border-radius: 8px;
  object-fit:cover;
  display:block;
}

/* Subtle hover lift */
.card-saas:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(2,6,23,0.08); }

/* ---------------------------
   Buttons: explicit color & contrast
   Use utility classes in templates: .btn-primary .btn-secondary .btn-ghost
----------------------------*/
.btn, button, input[type="submit"], .btn-primary, .btn-secondary {
  border: none;
  cursor: pointer;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  display: inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  font-size:0.95rem;
}

/* Primary (orange two-tone) */
.btn-primary, .bg-primary {
  background: linear-gradient(135deg,var(--primary-from),var(--primary-to));
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(249,115,22,0.12);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(249,115,22,0.14); }

/* Secondary (blue/cyan two-tone) */
.btn-secondary, .bg-secondary {
  background: linear-gradient(135deg,var(--secondary-from),var(--secondary-to));
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(6,182,212,0.10);
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(6,182,212,0.12); }

/* Success (green) */
.btn-success {
  background: linear-gradient(135deg,var(--success-from),var(--success-to));
  color: #fff !important;
}

/* Neutral / ghost / outline */
.btn-ghost, .bg-slate-100, .btn-neutral {
  background: #f8fafc !important;
  color: var(--text-default) !important;
  border: 1px solid rgba(2,6,23,0.04);
}
.btn-ghost:hover { background:#eef2ff; }

/* Disabled state */
.btn[disabled], button[disabled], .disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Ensure anchor buttons also show correct contrast */
a.btn-primary, a.btn-secondary, a.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
}

/* Ensure icons inside buttons inherit visible color */
a.btn-primary i, .btn-primary i, .btn-secondary i, .btn-ghost i { color:inherit; }

/* ---------------------------
   Badges & rating
----------------------------*/
.badge-green {
  background: #d1fae5;
  color: #065f46;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight:700;
}

.badge-rating {
  background: var(--primary-to);
  color: white;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight:700;
}

/* Star rating */
.star { font-size:1.1rem; color: #e6edf0; }
.star.filled { color: var(--accent-star); }

/* ---------------------------
   Forms & inputs
----------------------------*/
input, textarea, select {
  font-family: inherit;
  border: 1px solid rgba(15,23,42,0.06);
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  width:100%;
  color: var(--text-default);
  background: #fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}

input:focus, textarea:focus, select:focus {
  outline:none;
  border-color: rgba(15,23,42,0.14);
  box-shadow: 0 6px 20px rgba(2,6,23,0.06);
}

/* small helper classes used in templates */
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.icon-circle { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background: linear-gradient(180deg, rgba(2,6,23,0.03), rgba(2,6,23,0.02)); color: var(--text-default); }

/* ---------------------------
   Alerts (explicit colors)
----------------------------*/
.alert-success {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
  padding: 0.9rem;
  border-radius: 8px;
  color: #065f46;
}

.alert-error {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  padding: 0.9rem;
  border-radius: 8px;
  color: #7f1d1d;
}

/* ---------------------------
   Navbar / header
----------------------------*/
.navbar, .navbar-green {
  background: #fff;
  border-bottom: 1px solid rgba(2,6,23,0.04);
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
}
.nav-link { color: var(--text-default); padding: 0.5rem 0.8rem; border-radius: 8px; }
.nav-link:hover { background:#f1f5f9; color:var(--text-default); }

/* ---------------------------
   Layout helpers
----------------------------*/
.container { max-width:1200px; margin:0 auto; padding: 1rem; }

/* Responsive cards grid tidy */
.grid-cols-1 { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:768px){ .grid-cols-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; } }

/* ---------------------------
   Overrides (force contrast where previous CSS forced white)
   These are targeted and conservative
----------------------------*/

/* Prevent buttons/links inside cards from inheriting unwanted white color */
.card a, .card button, .card-saas a, .card-saas button {
  color: inherit !important;
}

/* For any element that mistakenly got color: white, reset within main UI regions */
.card, .card-saas, .templates, .main, .content, body, header, footer {
  color: var(--text-default) !important;
}

/* Ensure text inside actionable buttons is visible (even if other CSS sets text-white) */
.btn-primary, .btn-secondary, .btn-success, .btn-ghost, a.btn-primary, a.btn-secondary {
  color: #fff !important;
}

/* Ensure neutral buttons have dark text */
.btn-ghost, .bg-slate-100, .btn-neutral { color: var(--text-default) !important; }

/* Ensure small-muted and helper texts overridden properly */
.small-muted, .text-xs, .muted, .text-muted { color: var(--muted) !important; }

/* Ensure icons are visible */
.fa, .fa-solid, i { color: inherit !important; }

/* force visible labels/inputs text */
label, input, textarea, select, button, a { color: var(--text-default) !important; }

/* Specific: fix any .text-white applied globally inside cards */
.card .text-white, .card-saas .text-white { color: var(--text-default) !important; }

/* ---------------------------
   Tiny animations & hover
----------------------------*/
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); }

/* ---------------------------
   Footer
----------------------------*/
.footer-green {
  background: #fff;
  border-top: 1px solid rgba(2,6,23,0.04);
  padding: 2rem 0;
  color: var(--muted);
}

/* ---------------------------
   Accessibility: focus visible
----------------------------*/
:focus { outline: 3px solid rgba(59,130,246,0.12); outline-offset: 2px; }

/* ---------------------------
   Media tweaks
----------------------------*/
@media (max-width:768px){
  .icon-circle { width:40px; height:40px; }
  .card-saas { padding:0.8rem; }
}

/* ============================================================
   Developer notes:
   - Use .btn-primary / .btn-secondary / .btn-ghost on anchors/buttons in templates.
   - Avoid inline styles that set color to white unless paired with dark bg.
   - If you still see white text, inspect element to find the rule — copy selector and paste here and saya perbaiki langsung.
   ============================================================ */