/* ═══════════════════════════════════════════════
   Prokerala Kundali Calculator v2 – Stylesheet
   ═══════════════════════════════════════════════ */

:root {
  --pk-primary:   #6b35c4;
  --pk-primary-d: #5228a0;
  --pk-accent:    #e8a427;
  --pk-bg:        #f7f5ff;
  --pk-card-bg:   #ffffff;
  --pk-border:    #e0d9f7;
  --pk-text:      #1a1a2e;
  --pk-muted:     #6b7280;
  --pk-success:   #16a34a;
  --pk-warning:   #dc2626;
  --pk-radius:    12px;
  --pk-shadow:    0 2px 16px rgba(107,53,196,.10);
}

.pk-kundali-wrapper {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--pk-text);
  max-width: 900px;
  margin: 0 auto;
  padding: 0 8px 60px;
}

/* ─── Header ───────────────────────────────────── */
.pk-header {
  background: linear-gradient(135deg, #4a1d96 0%, #7c3aed 50%, #9b59b6 100%);
  border-radius: var(--pk-radius) var(--pk-radius) 0 0;
  padding: 30px 36px;
  color: #fff;
}
.pk-header-inner { display:flex; align-items:center; gap:18px; }
.pk-header-icon  { font-size:3rem; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.pk-title        { margin:0; font-size:1.8rem; font-weight:800; letter-spacing:-.02em; }
.pk-subtitle     { margin:5px 0 0; opacity:.85; font-size:.93rem; }

/* ─── Form ─────────────────────────────────────── */
.pk-form-section {
  background: var(--pk-bg);
  border: 1.5px solid var(--pk-border);
  border-top: none;
  padding: 30px 30px 22px;
}
.pk-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pk-form-group--wide { grid-column: 1 / -1; }
.pk-optional { font-size:.75rem; font-weight:400; color:var(--pk-muted); }

.pk-label {
  display:block;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:var(--pk-muted);
  margin-bottom:7px;
}
.pk-label-icon { margin-right:5px; }

.pk-input {
  width:100%; box-sizing:border-box;
  padding:11px 14px;
  border:2px solid var(--pk-border);
  border-radius:8px;
  font-size:.96rem;
  color:var(--pk-text);
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
  -webkit-appearance:none;
}
.pk-input:focus {
  outline:none;
  border-color:var(--pk-primary);
  box-shadow:0 0 0 3px rgba(107,53,196,.13);
}

/* ─── Time picker AM/PM ────────────────────────── */
.pk-time-row {
  display:flex;
  align-items:center;
  gap:6px;
}
.pk-time-part { width:auto; flex:0 0 70px; padding:11px 8px; text-align:center; }
.pk-time-sep  { font-size:1.3rem; font-weight:700; color:var(--pk-muted); }
.pk-ampm-group { display:flex; border:2px solid var(--pk-border); border-radius:8px; overflow:hidden; margin-left:4px; }
.pk-ampm-btn {
  padding:10px 14px;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  color:var(--pk-muted);
  background:#fff;
  user-select:none;
  transition:all .2s;
}
.pk-ampm-btn input { display:none; }
.pk-ampm-btn:first-child { border-right:1.5px solid var(--pk-border); }
.pk-ampm-btn:hover { background:var(--pk-bg); color:var(--pk-primary); }
.pk-ampm-btn--active { background:var(--pk-primary) !important; color:#fff !important; }

/* ─── Toggle groups ────────────────────────────── */
.pk-toggle-group { display:flex; gap:8px; flex-wrap:wrap; }
.pk-toggle {
  flex:1; min-width:80px;
  text-align:center;
  padding:10px 8px;
  border:2px solid var(--pk-border);
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  font-size:.85rem;
  color:var(--pk-muted);
  transition:all .2s;
  user-select:none;
}
.pk-toggle input { display:none; }
.pk-toggle:hover { border-color:var(--pk-primary); color:var(--pk-primary); }
.pk-toggle--active { border-color:var(--pk-primary); background:var(--pk-primary); color:#fff; }

/* ─── Submit ───────────────────────────────────── */
.pk-form-actions { margin-top:26px; text-align:center; }
.pk-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 44px;
  border:none; border-radius:50px;
  font-size:1.05rem; font-weight:800;
  cursor:pointer;
  transition:all .25s;
}
.pk-btn--primary {
  background:linear-gradient(135deg, #4a1d96, #7c3aed);
  color:#fff;
  box-shadow:0 4px 18px rgba(107,53,196,.38);
}
.pk-btn--primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(107,53,196,.45);
}
.pk-btn-icon { font-size:1.15rem; }

/* ─── Errors ───────────────────────────────────── */
.pk-errors {
  margin:18px 0 0; padding:14px 20px;
  background:#fff5f5; border:1.5px solid #fca5a5; border-radius:var(--pk-radius);
}
.pk-error-item { color:#b91c1c; font-size:.92rem; padding:3px 0; }

/* ─── Cards ────────────────────────────────────── */
.pk-results { margin-top:30px; display:flex; flex-direction:column; gap:22px; }

.pk-card {
  background:var(--pk-card-bg);
  border:1.5px solid var(--pk-border);
  border-radius:var(--pk-radius);
  box-shadow:var(--pk-shadow);
  overflow:hidden;
}
.pk-card--warning { border-color:#fca5a5; }
.pk-card--success { border-color:#86efac; }

.pk-card-header {
  display:flex; align-items:center; gap:12px;
  padding:16px 24px;
  background:var(--pk-bg);
  border-bottom:1.5px solid var(--pk-border);
}
.pk-card-header--gradient {
  background:linear-gradient(135deg, #4a1d96, #7c3aed);
  border-bottom:none;
}
.pk-card-header--gradient h3 { color:#fff; }
.pk-card-icon  { font-size:1.35rem; }
.pk-card-header h3 { margin:0; font-size:1.05rem; font-weight:700; flex:1; }
.pk-chart-style-badge {
  background:var(--pk-primary); color:#fff;
  font-size:.75rem; font-weight:700;
  padding:3px 10px; border-radius:50px;
}

/* ─── Summary Card ─────────────────────────────── */
.pk-summary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
}
.pk-summary-item {
  display:flex; flex-direction:column;
  padding:14px 24px;
  border-bottom:1px solid var(--pk-border);
  border-right:1px solid var(--pk-border);
}
.pk-summary-label { font-size:.73rem; text-transform:uppercase; color:var(--pk-muted); letter-spacing:.06em; margin-bottom:4px; }
.pk-summary-value { font-weight:700; font-size:.97rem; }
.pk-highlight { color:var(--pk-primary); }

/* ─── Chart ────────────────────────────────────── */
.pk-chart-description { padding:12px 24px 0; }
.pk-chart-description p { margin:0; font-size:.9rem; color:var(--pk-muted); }
.pk-chart-container {
  padding:20px 24px 24px;
  display:flex; justify-content:center;
}
.pk-chart-container svg {
  max-width:100%;
  height:auto;
  border-radius:8px;
}
.pk-chart-placeholder { background:var(--pk-bg); }

/* ─── Planet Table ─────────────────────────────── */
.pk-planet-desc { padding:12px 24px 0; }
.pk-planet-desc p { margin:0; font-size:.9rem; color:var(--pk-muted); }
.pk-table-wrap { overflow-x:auto; padding:16px 0; }

.pk-planet-table {
  width:100%; border-collapse:collapse;
  font-size:.9rem; min-width:640px;
}
.pk-planet-table thead {
  background: linear-gradient(135deg, #4a1d96, #7c3aed);
  color:#fff;
}
.pk-planet-table thead th {
  padding:12px 14px;
  text-align:left;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pk-planet-table thead th:first-child { border-radius:0; padding-left:20px; }
.pk-planet-table tbody tr {
  border-bottom:1px solid var(--pk-border);
  transition:background .15s;
}
.pk-planet-table tbody tr:last-child { border-bottom:none; }
.pk-planet-table tbody tr:hover { background:var(--pk-bg); }
.pk-planet-table tbody td {
  padding:12px 14px;
  vertical-align:middle;
  font-size:.9rem;
}
.pk-planet-table tbody td:first-child { padding-left:20px; }

.pk-planet-name-cell { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.pk-planet-sym { font-size:1.25rem; line-height:1; }

.pk-retro-row { background:#fffbeb; }
.pk-retro-badge {
  display:inline-block;
  background:#dc2626; color:#fff;
  font-size:.7rem; font-weight:800;
  padding:1px 5px; border-radius:3px;
  vertical-align:middle; margin-left:2px;
}
.pk-retro-note {
  padding:6px 20px 14px;
  font-size:.8rem;
  color:var(--pk-muted);
  display:flex; align-items:center; gap:6px;
  margin:0;
}

.pk-rasi-label {
  background:var(--pk-bg);
  border:1px solid var(--pk-border);
  padding:2px 8px; border-radius:20px;
  font-size:.82rem; font-weight:600;
  white-space:nowrap;
}
.pk-lord-highlight { color:var(--pk-primary); font-weight:700; }

/* ─── Nakshatra Details ────────────────────────── */
.pk-detail-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  padding:8px;
  gap:2px;
}
.pk-detail-item {
  display:flex; flex-direction:column;
  padding:10px 16px; border-radius:8px;
}
.pk-detail-item:hover { background:var(--pk-bg); }
.pk-detail-label { font-size:.72rem; text-transform:uppercase; color:var(--pk-muted); margin-bottom:3px; }
.pk-detail-value { font-weight:600; font-size:.92rem; }

/* ─── Mangal Dosha ─────────────────────────────── */
.pk-mangal-status { padding:18px 24px; }
.pk-status-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:50px;
  font-weight:700; font-size:.9rem; margin-bottom:12px;
}
.pk-status-badge--yes { background:#fee2e2; color:var(--pk-warning); }
.pk-status-badge--no  { background:#dcfce7; color:var(--pk-success); }
.pk-mangal-desc { color:var(--pk-muted); font-size:.9rem; margin:0 0 8px; }
.pk-mangal-exception { background:#fef9c3; color:#92400e; padding:8px 14px; border-radius:8px; font-size:.88rem; margin:8px 0; }
.pk-mangal-exceptions ul { margin:6px 0 0 20px; font-size:.88rem; color:var(--pk-muted); }

/* ─── Yoga Details ─────────────────────────────── */
.pk-yogas { padding:16px 24px; }
.pk-yoga-group { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--pk-border); }
.pk-yoga-group:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.pk-yoga-group-title { font-size:.95rem; color:var(--pk-primary); margin:0 0 4px; font-weight:700; }
.pk-yoga-desc { font-size:.87rem; color:var(--pk-muted); margin:0 0 10px; }
.pk-yoga-list { display:flex; flex-direction:column; gap:5px; }
.pk-yoga-item {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:9px 14px; border-radius:8px; background:var(--pk-bg);
}
.pk-yoga-item--active { background:#f0ebff; border-left:3px solid var(--pk-primary); }
.pk-yoga-name { font-weight:600; font-size:.9rem; flex:1; }
.pk-yoga-badge { background:var(--pk-primary); color:#fff; font-size:.73rem; padding:2px 10px; border-radius:50px; font-weight:700; white-space:nowrap; }
.pk-yoga-item-desc { width:100%; font-size:.82rem; color:var(--pk-muted); margin:2px 0 0; }
.pk-yoga-simple { padding:6px 0; }

/* ─── Dasha Periods ────────────────────────────── */
.pk-dasha-list  { padding:8px 20px 20px; }
.pk-dasha-item  { border-bottom:1px solid var(--pk-border); }
.pk-dasha-item:last-child { border-bottom:none; }

.pk-dasha-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 6px;
  cursor:pointer; border-radius:6px;
  transition:background .15s;
}
.pk-dasha-header:hover { background:var(--pk-bg); }
.pk-dasha-name { display:flex; align-items:center; gap:8px; }
.pk-dasha-arrow { font-size:.65rem; color:var(--pk-muted); transition:transform .25s; }
.pk-dasha-arrow.open { transform:rotate(90deg); }
.pk-dasha-dates { font-size:.82rem; color:var(--pk-muted); }

.pk-antardasha-list { padding-left:28px; margin-bottom:8px; }
.pk-ant-header-row {
  display:flex; justify-content:space-between;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pk-muted); font-weight:700;
  padding:4px 0 6px; border-bottom:1px solid var(--pk-border);
  margin-bottom:4px;
}
.pk-antardasha-item {
  display:flex; justify-content:space-between;
  font-size:.85rem; padding:6px 0;
  border-bottom:1px dashed var(--pk-border);
  color:var(--pk-muted);
}
.pk-antardasha-item:last-child { border-bottom:none; }
.pk-hidden { display:none !important; }

.pk-collapse-btn {
  margin-left:auto;
  background:none; border:1.5px solid var(--pk-primary);
  color:var(--pk-primary); border-radius:50px;
  padding:5px 16px; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:all .2s; white-space:nowrap;
}
.pk-collapse-btn:hover { background:var(--pk-primary); color:#fff; }

/* ─── Responsive ───────────────────────────────── */
@media (max-width:640px) {
  .pk-header { padding:22px 18px; }
  .pk-title  { font-size:1.35rem; }
  .pk-form-section { padding:20px 14px; }
  .pk-form-grid { grid-template-columns:1fr; }
  .pk-form-group--wide { grid-column:auto; }
  .pk-summary-grid { grid-template-columns:1fr 1fr; }
  .pk-detail-grid  { grid-template-columns:1fr 1fr; }
  .pk-time-part { flex:0 0 58px; }
  .pk-ampm-btn { padding:10px 10px; font-size:.82rem; }
  .pk-planet-table thead th, .pk-planet-table tbody td { padding:9px 8px; font-size:.82rem; }
  .pk-dasha-dates { display:none; }
  .pk-ant-header-row span:last-child { display:none; }
}