/* ═══════════════════════════════════════════════
   Prokerala Kundali Calculator v4
   Theme: #ff4d00 · Print-safe
   ═══════════════════════════════════════════════ */

:root {
  --pk:        #ff4d00;
  --pk-d:      #cc3d00;
  --pk-light:  #fff3ef;
  --pk-bg:     #fdf8f6;
  --pk-white:  #ffffff;
  --pk-border: #f0e8e4;
  --pk-text:   #1a1208;
  --pk-muted:  #7a6a63;
  --pk-ok:     #16a34a;
  --pk-warn:   #dc2626;
  --pk-r:      12px;
  --pk-sh:     0 2px 18px rgba(255,77,0,.10);
}

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

/* ─ Header ─ */
.pk-header {
  background: linear-gradient(135deg, #c73800 0%, #ff4d00 55%, #ff7a33 100%);
  border-radius: var(--pk-r) var(--pk-r) 0 0;
  padding: 30px 36px;
  color: #fff;
}
.pk-header-inner { display:flex; align-items:center; gap:18px; }
.pk-header-icon  { font-size:3rem; filter:drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.pk-title        { margin:0; font-size:1.85rem; font-weight:800; letter-spacing:-.02em; color:#fff; }
.pk-subtitle     { margin:5px 0 0; opacity:.88; font-size:.9rem; color:#fff; }

/* ─ Form section ─ */
.pk-form-section {
  background: var(--pk-bg);
  border: 1.5px solid var(--pk-border);
  border-top: none;
  padding: 30px 30px 24px;
}
.pk-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.pk-col-2 { grid-column: 1 / -1; }
.pk-opt   { font-size:.74rem; font-weight:400; color:var(--pk-muted); }

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

.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; appearance:none;
}
.pk-input:focus {
  outline:none;
  border-color:var(--pk);
  box-shadow:0 0 0 3px rgba(255,77,0,.13);
}

/* Time picker */
.pk-time-row { display:flex; align-items:center; gap:6px; flex-wrap:nowrap; }
.pk-sel-sm   { width:68px !important; min-width:0; flex:0 0 68px; padding:11px 8px; text-align:center; }
.pk-sep      { font-size:1.3rem; font-weight:700; color:var(--pk-muted); flex-shrink:0; }
.pk-ampm {
  display:flex; margin-left:4px; flex-shrink:0;
  border:2px solid var(--pk-border); border-radius:8px; overflow:hidden;
}
.pk-ampm-opt {
  padding:10px 14px; font-size:.87rem; font-weight:700;
  cursor:pointer; color:var(--pk-muted); background:#fff;
  user-select:none; transition:all .18s; white-space:nowrap;
}
.pk-ampm-opt input { display:none; }
.pk-ampm-opt:first-child { border-right:1.5px solid var(--pk-border); }
.pk-ampm-opt:hover { background:var(--pk-light); color:var(--pk); }
.pk-ampm-opt.active { background:var(--pk) !important; color:#fff !important; }

/* Language pills */
.pk-pill-group { display:flex; gap:10px; }
.pk-pill {
  flex:1; text-align:center;
  padding:11px 14px;
  border:2px solid var(--pk-border); border-radius:8px;
  cursor:pointer; font-weight:700; font-size:.9rem;
  color:var(--pk-muted); background:#fff;
  user-select:none; transition:all .18s;
}
.pk-pill input { display:none; }
.pk-pill:hover { border-color:var(--pk); color:var(--pk); }
.pk-pill--on   { border-color:var(--pk); background:var(--pk); color:#fff; }

/* Generate button */
.pk-form-footer { margin-top:28px; text-align:center; }
.pk-btn-gen {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 52px;
  background:linear-gradient(135deg, #c73800, #ff4d00);
  color:#fff; border:none; border-radius:50px;
  font-size:1.08rem; font-weight:800; cursor:pointer;
  box-shadow:0 4px 20px rgba(255,77,0,.38);
  transition:all .25s;
}
.pk-btn-gen:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,77,0,.46); }

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

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

.pk-card {
  background:var(--pk-white);
  border:1.5px solid var(--pk-border);
  border-radius:var(--pk-r);
  box-shadow:var(--pk-sh);
  overflow:hidden;
}
.pk-card-warn { border-color:#fca5a5; }
.pk-card-ok   { border-color:#86efac; }

.pk-card-hd {
  display:flex; align-items:center; gap:12px;
  padding:15px 22px;
  background:var(--pk-bg);
  border-bottom:1.5px solid var(--pk-border);
}
.pk-card-hd h3 { margin:0; font-size:1.04rem; font-weight:700; flex:1; }
.pk-card-hd > span:first-child { font-size:1.3rem; }

/* hero */
.pk-card--hero .pk-hd-hero {
  background:linear-gradient(135deg,#c73800,#ff4d00);
  border-bottom:none;
}
.pk-card--hero .pk-hd-hero h3 { color:#fff; }
.pk-card--hero .pk-hd-hero > span:first-child { filter:brightness(10); }
.pk-badge {
  background:var(--pk); color:#fff;
  font-size:.74rem; font-weight:700;
  padding:3px 11px; border-radius:50px;
}

/* Summary */
.pk-summary-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
}
.pk-si {
  display:flex; flex-direction:column;
  padding:14px 22px;
  border-bottom:1px solid var(--pk-border);
  border-right:1px solid var(--pk-border);
}
.pk-sl { font-size:.72rem; text-transform:uppercase; color:var(--pk-muted); letter-spacing:.06em; margin-bottom:4px; }
.pk-sv { font-weight:700; font-size:.97rem; }
.pk-hi { color:var(--pk); }

/* Chart */
.pk-chart-note {
  margin:0; padding:10px 22px;
  font-size:.88rem; color:var(--pk-muted);
  border-bottom:1px solid var(--pk-border);
}
.pk-chart-wrap {
  display:flex; justify-content:center; align-items:center;
  padding:20px 22px 24px;
}
.pk-chart-wrap svg { max-width:100%; height:auto; border-radius:8px; }

/* ─ Planet table ─ */
.pk-tbl-wrap { overflow-x:auto; }
.pk-tbl {
  width:100%; border-collapse:collapse;
  font-size:.89rem; min-width:660px;
}
.pk-tbl thead {
  background:linear-gradient(135deg,#c73800,#ff4d00);
  color:#fff;
}
.pk-tbl thead th {
  padding:12px 14px;
  text-align:left; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
}
.pk-tbl thead th:first-child { padding-left:20px; }
.pk-tbl tbody tr { border-bottom:1px solid var(--pk-border); transition:background .13s; }
.pk-tbl tbody tr:last-child  { border-bottom:none; }
.pk-tbl tbody tr:hover { background:var(--pk-bg); }
.pk-tbl tbody td { padding:11px 14px; vertical-align:middle; }
.pk-tbl tbody td:first-child { padding-left:20px; }

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

.pk-retro-row { background:#fffbeb; }
.pk-rb {
  display:inline-block;
  background:#dc2626; color:#fff;
  font-size:.68rem; font-weight:800;
  padding:1px 5px; border-radius:3px;
  vertical-align:middle; margin-left:2px;
}
.pk-rasi-chip {
  background:var(--pk-light); border:1px solid #ffd0bf;
  color:var(--pk-d); padding:2px 9px; border-radius:20px;
  font-size:.82rem; font-weight:600; white-space:nowrap;
}
.pk-lord-hl  { color:var(--pk); font-weight:700; }
.pk-retro-note {
  padding:6px 20px 14px;
  font-size:.8rem; color:var(--pk-muted);
  display:flex; align-items:center; gap:6px; margin:0;
}

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

/* Mangal Dosha */
.pk-mangal { padding:18px 22px; }
.pk-dosha-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-db-yes { background:#fee2e2; color:var(--pk-warn); }
.pk-db-no  { background:#dcfce7; color:var(--pk-ok);   }
.pk-mdesc  { color:var(--pk-muted); font-size:.9rem; margin:0 0 8px; }
.pk-exc    { background:#fef9c3; color:#92400e; padding:8px 14px; border-radius:8px; font-size:.87rem; margin:8px 0; }
.pk-exc-list { margin:6px 0 0 20px; font-size:.88rem; color:var(--pk-muted); }

/* Yoga */
.pk-yogas { padding:16px 22px; }
.pk-ygroup { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--pk-border); }
.pk-ygroup:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.pk-ygt   { font-size:.94rem; color:var(--pk); margin:0 0 4px; font-weight:700; }
.pk-ydesc { font-size:.87rem; color:var(--pk-muted); margin:0 0 8px; }
.pk-ylist { display:flex; flex-direction:column; gap:5px; }
.pk-yi    { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:9px 14px; border-radius:8px; background:var(--pk-bg); }
.pk-yi--on { background:var(--pk-light); border-left:3px solid var(--pk); }
.pk-yn    { font-weight:600; font-size:.9rem; flex:1; }
.pk-ybadge { background:var(--pk); color:#fff; font-size:.73rem; padding:2px 10px; border-radius:50px; font-weight:700; white-space:nowrap; }
.pk-yidesc { width:100%; font-size:.82rem; color:var(--pk-muted); margin:2px 0 0; }
.pk-ysimple { padding:6px 0; }

/* Dasha */
.pk-dasha-list  { padding:8px 18px 18px; }
.pk-dash-item   { border-bottom:1px solid var(--pk-border); }
.pk-dash-item:last-child { border-bottom:none; }
.pk-dash-hd {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 6px; cursor:pointer; border-radius:6px; transition:background .14s;
}
.pk-dash-hd:hover { background:var(--pk-bg); }
.pk-dash-left { display:flex; align-items:center; gap:8px; }
.pk-dash-arr  { font-size:.64rem; color:var(--pk-muted); transition:transform .22s; }
.pk-dash-arr.open { transform:rotate(90deg); }
.pk-dash-dates { font-size:.82rem; color:var(--pk-muted); }
.pk-ants { padding-left:28px; margin-bottom:6px; }
.pk-ant-hdr {
  display:flex; justify-content:space-between;
  font-size:.71rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pk-muted); font-weight:700;
  padding:4px 0 5px; border-bottom:1px solid var(--pk-border); margin-bottom:4px;
}
.pk-ant-row {
  display:flex; justify-content:space-between;
  font-size:.85rem; padding:6px 0;
  border-bottom:1px dashed var(--pk-border); color:var(--pk-muted);
}
.pk-ant-row:last-child { border-bottom:none; }
.pk-hidden { display:none !important; }
.pk-dash-toggle {
  margin-left:auto;
  background:none; border:1.5px solid var(--pk);
  color:var(--pk); border-radius:50px;
  padding:5px 16px; font-size:.79rem; font-weight:700;
  cursor:pointer; transition:all .18s;
}
.pk-dash-toggle:hover { background:var(--pk); color:#fff; }

/* Download button */
.pk-download-wrap { text-align:center; padding:10px 0; }
.pk-btn-download {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 48px;
  background:linear-gradient(135deg, #c73800, #ff4d00);
  color:#fff; border:none; border-radius:50px;
  font-size:1.05rem; font-weight:800; cursor:pointer;
  box-shadow:0 4px 20px rgba(255,77,0,.35);
  transition:all .25s;
}
.pk-btn-download:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,77,0,.46); }
.pk-dl-note { margin:8px 0 0; font-size:.8rem; color:var(--pk-muted); }

/* Responsive — tablet */
@media (max-width:768px) {
  .pk-kundali-wrapper { padding:0 4px 40px; }
  .pk-summary-grid { grid-template-columns:1fr 1fr; }
  .pk-detail-grid  { grid-template-columns:1fr 1fr; }
  .pk-yogas { padding:12px 16px; }
  .pk-mangal { padding:14px 16px; }
  .pk-dasha-list { padding:6px 12px 14px; }
}

/* Responsive — mobile */
@media (max-width:640px) {
  /* Header */
  .pk-header { padding:18px 14px; }
  .pk-header-inner { gap:12px; }
  .pk-header-icon { font-size:2.2rem; }
  .pk-title  { font-size:1.2rem; letter-spacing:-.01em; }
  .pk-subtitle { font-size:.78rem; }

  /* Wrapper & form */
  .pk-kundali-wrapper { padding:0 2px 32px; }
  .pk-form-section { padding:16px 12px 18px; }
  .pk-form-grid { grid-template-columns:1fr; gap:16px; }
  .pk-col-2 { grid-column:auto; }

  /* Time picker — prevent overflow */
  .pk-time-row { gap:4px; }
  .pk-sel-sm   { width:60px !important; flex:0 0 60px; padding:10px 6px; font-size:.88rem; }
  .pk-sep      { font-size:1.1rem; }
  .pk-ampm     { margin-left:2px; }
  .pk-ampm-opt { padding:9px 10px; font-size:.82rem; }

  /* Language pills */
  .pk-pill-group { gap:8px; }
  .pk-pill { padding:10px 10px; font-size:.84rem; }

  /* Generate button */
  .pk-btn-gen { padding:13px 32px; font-size:.97rem; width:100%; justify-content:center; }

  /* Summary / Detail grids */
  .pk-summary-grid { grid-template-columns:1fr 1fr; }
  .pk-si { padding:12px 14px; }
  .pk-detail-grid  { grid-template-columns:1fr 1fr; gap:0; }

  /* Planet table — horizontal scroll with better base */
  .pk-tbl-wrap { -webkit-overflow-scrolling:touch; }
  .pk-tbl thead th, .pk-tbl tbody td { padding:9px 8px; font-size:.8rem; }
  .pk-tbl { min-width:540px; }

  /* Card headers */
  .pk-card-hd { padding:12px 14px; gap:8px; }
  .pk-card-hd h3 { font-size:.95rem; }

  /* Dasha */
  .pk-dasha-list { padding:6px 10px 14px; }
  .pk-dash-dates { display:none; }
  .pk-ants { padding-left:14px; }
  .pk-ant-hdr span:last-child { display:none; }
  .pk-ant-row { font-size:.8rem; }

  /* Yoga */
  .pk-yogas { padding:12px 14px; }
  .pk-yi { padding:8px 10px; gap:6px; }
  .pk-yn { font-size:.85rem; }

  /* Mangal */
  .pk-mangal { padding:14px 14px; }

  /* Chart */
  .pk-chart-wrap { padding:14px 12px 18px; }

  /* Download button */
  .pk-btn-download { padding:13px 28px; font-size:.97rem; width:100%; justify-content:center; box-sizing:border-box; }

  /* Errors */
  .pk-errors { padding:12px 14px; }
}

/* ══════════════════════════════════════════════
   PRINT STYLES
   - Header shows ONLY on first page
   - No footer/form on any page
   - No repeating thead color on every page
   ══════════════════════════════════════════════ */
@media print {

  /* Hide all non-result elements */
  .pk-no-print,
  .pk-form-section,
  .pk-errors,
  .pk-form-footer,
  .pk-download-wrap,
  .pk-dash-toggle,
  .pk-btn-gen,
  .pk-btn-download { display:none !important; }

  /* Page setup */
  @page {
    margin: 15mm 12mm;
    /* No header/footer strings from browser */
  }
  @page :first {
    margin-top: 10mm;
  }

  /* Header: show ONLY on first page */
  .pk-print-header {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #ff4d00 !important;
    border-radius: 0;
    margin-bottom: 12pt;
  }

  /* Force header to stay on page 1 only by making it non-repeating */
  .pk-kundali-wrapper { padding:0; }

  /* Cards */
  .pk-card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 14pt;
  }

  /* Hero card header */
  .pk-card--hero .pk-hd-hero {
    background: #ff4d00 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Table: header color only once, no repeat */
  .pk-tbl { font-size: 8pt; }
  .pk-tbl thead { display: table-header-group; }
  .pk-tbl thead tr {
    background: #ff4d00 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pk-tbl thead th { padding: 7pt 8pt; font-size:7.5pt; }
  .pk-tbl tbody td { padding: 6pt 8pt; }

  /* Expand all dasha sections for print */
  .pk-ants  { display: block !important; }
  .pk-dash-arr { display: none; }

  /* Retro badge */
  .pk-rb {
    background: #dc2626 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Rasi chip */
  .pk-rasi-chip {
    background: #fff3ef !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Yoga active */
  .pk-yi--on {
    background: #fff3ef !important;
    border-left: 3px solid #ff4d00 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pk-ybadge {
    background: #ff4d00 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Remove hover effects */
  .pk-di:hover { background: transparent; }
  .pk-dash-hd:hover { background: transparent; }

  /* Chart full width */
  .pk-chart-wrap { padding: 8pt; }
  .pk-chart-wrap svg { max-width: 420pt; }

  /* Summary grid */
  .pk-summary-grid { grid-template-columns: repeat(3,1fr); }
}