/* =========================================================
   RegjistroPro – Unified Stripe‑Inspired Design System
   Applies to: index, app, pricing, terms
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --accent: #7C3AED;
  --accent2: #22D3EE;
  --ink: #0b1220;
  --text: #0f172a;
  --muted: #475569;
  --muted2: #64748b;

  --bg: #f6f7fb;
  --card: #ffffff;
  --border: #e6e9f2;

  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow-sm: 0 6px 18px rgba(2,6,23,.06);

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
}

/* =========================
   Global
========================= */
html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--text);
  background: var(--bg);
}

/* Language toggle */
[data-lang="sq"] .lang-en { display: none !important; }
[data-lang="en"] .lang-sq { display: none !important; }

/* =========================
   Buttons (one line, Stripe‑like)
========================= */
.rp-btn,
button,
input[type="button"] {
  border-radius: 999px;
  font-weight: 600;
  transition: all .15s ease;
}

.rp-btn-primary,
.btn-primary,
button.bg-emerald-600 {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #061019 !important;
  border: none;
  box-shadow: 0 12px 26px rgba(124,58,237,.25);
}

.rp-btn-primary:hover,
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* =========================
   Cards
========================= */
.rp-card,
.card,
.plan {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* =========================
   Manual Edit Table
========================= */
#reviewSection table {
  border-radius: var(--radius);
  overflow: hidden;
}

#reviewSection thead th {
  background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
  font-weight: 800;
}

#reviewSection tbody tr:hover td {
  background: rgba(124,58,237,.04);
}

/* Inputs inside table */
#reviewSection input,
#reviewSection select,
#reviewSection textarea {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(203,213,225,.9);
  background: #fff;
}

#reviewSection input:focus,
#reviewSection select:focus,
#reviewSection textarea:focus {
  outline: none;
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(34,211,238,.2);
}

/* Action buttons inside table – single row */
#reviewSection .row-actions,
#reviewSection .action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

#reviewSection .row-actions button {
  padding: 6px 12px;
  font-size: 12px;
}

/* =========================
   Profile Modal
========================= */
#profileModal > div {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

#profileModal h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

#profileModal .rp-btn {
  margin-top: 6px;
}

/* =========================
   Forms (Profile / Auth)
========================= */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(203,213,225,.9);
  background: #fff;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent2);
  box-shadow: 0 0 0 3px rgba(34,211,238,.2);
}

/* =========================
   Small mobile polish
========================= */
@media (max-width: 480px) {
  .rp-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* =========================
   RP Button System
========================= */
.rp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  user-select:none;
  cursor:pointer;
  border:1px solid rgba(203,213,225,.9);
  background:rgba(255,255,255,.75);
  color:var(--text);
  transition:transform .15s ease, background .15s ease, filter .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}

.rp-btn:hover{ transform: translateY(-1px); filter: brightness(0.97); }
.rp-btn:active{ transform: translateY(0px); }

.rp-btn-ghost{
  background: rgba(15,23,42,.04);
  border-color: rgba(203,213,225,.9);
  color: var(--text);
}
.rp-btn-ghost:hover{ background: rgba(15,23,42,.07); }

.rp-btn-primary{
  border: none;
  color:#061019 !important;
  background: linear-gradient(135deg, rgba(124,58,237,.98), rgba(34,211,238,.90));
  box-shadow: 0 12px 26px rgba(124,58,237,.22);
}
.rp-btn-primary:hover{ filter: brightness(1.03); }

.rp-btn-blue{
  border: none;
  color: #fff !important;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  box-shadow: 0 12px 24px rgba(37,99,235,.18);
}
.rp-btn-blue:hover{ filter: brightness(1.04); }

.rp-btn-success{
  border: none;
  color:#fff !important;
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 12px 24px rgba(16,185,129,.16);
}
.rp-btn-success:hover{ filter: brightness(1.04); }

/* Review footer buttons – keep in one line and match style */
#reviewSection #btnSaveCorrections,
#reviewSection #downloadLink{
  border-radius: 999px !important;
}

#reviewSection .rp-review-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}