/* ============================================================
   Islamabad Capital Police – Complaint Portal
   style.css  |  Bootstrap 5 + Custom
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --icp-blue-dark:   #0d2247;
  --icp-blue:        #1a3a6b;
  --icp-blue-mid:    #1e4d8c;
  --icp-blue-light:  #3d8fe8;
  --icp-sky:         #d6eaff;
  --icp-bg:          #eaf3fb;
  --icp-white:       #ffffff;
  --icp-gold:        #c8a951;
  --icp-text:        #1a2e4a;
  --icp-text-muted:  #6b7e99;
  --icp-border:      #c5d8ee;
  --icp-shadow:      0 4px 24px rgba(13,34,71,.10);
  --icp-shadow-lg:   0 8px 40px rgba(13,34,71,.16);
  --icp-radius:      10px;
  --icp-radius-sm:   7px;
  --transition:      all .22s cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--icp-bg);
  color: var(--icp-text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- Navbar ---------- */
.icp-navbar {
  background: linear-gradient(135deg, var(--icp-blue-dark) 0%, var(--icp-blue) 60%, var(--icp-blue-mid) 100%);
  padding: .7rem 0;
  box-shadow: 0 2px 16px rgba(13,34,71,.3);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--icp-white);
  letter-spacing: .4px;
}

.nav-lnk {
  color: rgba(255,255,255,.82) !important;
  font-size: .82rem;
  font-weight: 500;
  padding: .38rem .75rem !important;
  border-radius: 6px;
  transition: var(--transition);
}

.nav-lnk:hover,
.nav-lnk.active {
  color: var(--icp-white) !important;
  background: rgba(255,255,255,.14);
}

/* ---------- Main Wrapper ---------- */
.main-wrapper {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: stretch;
}

/* ---------- Split Container ---------- */
.split-container {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 60px);
}

/* ========== LEFT PANEL ========== */
.left-panel {
  width: 300px;
  min-width: 280px;
  flex-shrink: 0;
  background: linear-gradient(160deg,
    var(--icp-blue-dark) 0%,
    var(--icp-blue) 45%,
    #1c5296 80%,
    #1e60a8 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Geometric background decoration */
.left-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.05) 0%, transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(61,143,232,.15) 0%, transparent 50%);
  pointer-events: none;
}

.left-panel::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,169,81,.18);
  pointer-events: none;
}

.left-inner {
  position: relative;
  z-index: 2;
  padding: 2.5rem 1.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  width: 100%;
}

.badge-wrap {
  animation: badgeDrop .7s cubic-bezier(.34,1.56,.64,1) both;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

@keyframes badgeDrop {
  from { opacity: 0; transform: translateY(-30px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.police-heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--icp-white);
  line-height: 1.3;
  margin: 0;
  animation: fadeUp .6s .2s both;
}

.police-sub {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: .82rem;
  color: rgba(255,255,255,.7);
  margin: 0;
  direction: rtl;
  animation: fadeUp .6s .3s both;
}

.police-tagline {
  font-size: .7rem;
  font-weight: 500;
  color: var(--icp-gold);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 0;
  animation: fadeUp .6s .35s both;
}

.phone-illustration {
  margin: .5rem 0;
  animation: fadeUp .7s .4s both;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.4));
}

/* Stats Row */
.stats-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 30px;
  padding: .5rem 1rem;
  width: 100%;
  justify-content: center;
  animation: fadeUp .6s .6s both;
  backdrop-filter: blur(4px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.stat-num {
  font-size: .82rem;
  font-weight: 700;
  color: var(--icp-white);
}

.stat-lbl {
  font-size: .62rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.2);
}

/* ========== RIGHT PANEL ========== */
.right-panel {
  flex: 1;
  overflow-y: auto;
  background: transparent;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 2rem 2.5rem;
}

/* Form Card */
.form-card {
  background: var(--icp-white);
  border-radius: 16px;
  box-shadow: var(--icp-shadow-lg);
  padding: 2rem 2rem 2.2rem;
  width: 100%;
  animation: cardSlide .6s .1s cubic-bezier(.4,0,.2,1) both;
}

@keyframes cardSlide {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--icp-bg);
}

.form-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--icp-blue-dark);
  margin: 0 0 2px;
  letter-spacing: -.2px;
}

.form-title-urdu {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: .88rem;
  color: var(--icp-text-muted);
  direction: rtl;
  margin: 0;
}

.form-badge {
  background: linear-gradient(135deg, var(--icp-blue) 0%, var(--icp-blue-light) 100%);
  color: white;
  font-size: .7rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .3px;
  flex-shrink: 0;
}

/* ---- Animated Form Rows ---- */
.form-row-animated {
  animation: rowFade .5s var(--delay, 0s) both;
  margin-bottom: .1rem;
}

@keyframes rowFade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Field Wrap ---- */
.field-wrap {
  margin-bottom: .2rem;
}

/* ---- Bilingual Labels ---- */
.bilingual-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .35rem;
  gap: .3rem;
}

.lbl-en {
  font-size: .75rem;
  font-weight: 600;
  color: var(--icp-blue);
  white-space: nowrap;
  letter-spacing: .1px;
}

.lbl-ur {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: .7rem;
  color: var(--icp-text-muted);
  direction: rtl;
  text-align: right;
  line-height: 1.2;
}

.label-icon {
  font-size: .65rem;
  margin-right: .28rem;
  color: var(--icp-blue-light);
}

.req { color: #e74c3c; font-weight: 700; }

/* ---- Inputs & Selects ---- */
.icp-input,
.icp-select {
  width: 100%;
  border: 1.5px solid var(--icp-border);
  border-radius: var(--icp-radius-sm);
  padding: .52rem .9rem;
  font-family: 'Poppins', sans-serif;
  font-size: .8rem;
  color: var(--icp-text);
  background: #f8fbff;
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.icp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d8fe8' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
}

.icp-input:hover,
.icp-select:hover {
  border-color: #a0c4e8;
  background: #f2f8ff;
}

.icp-input:focus,
.icp-select:focus {
  border-color: var(--icp-blue-light);
  background: var(--icp-white);
  box-shadow: 0 0 0 3px rgba(61,143,232,.12);
}

.icp-input::placeholder { color: #b0bec5; font-size: .78rem; }

.icp-textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* Date input fix */
input[type="date"].icp-input::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
}

/* Validation states */
.icp-input.is-invalid,
.icp-select.is-invalid {
  border-color: #e74c3c;
  background: #fff8f8;
}

.icp-input.is-valid,
.icp-select.is-valid {
  border-color: #27ae60;
  background: #f8fff9;
}

.invalid-feedback {
  font-size: .72rem;
  color: #e74c3c;
  margin-top: .2rem;
  display: none;
}

.icp-input.is-invalid ~ .invalid-feedback,
.icp-select.is-invalid ~ .invalid-feedback {
  display: block;
}

/* Char counter */
.char-counter {
  font-size: .68rem;
  color: var(--icp-text-muted);
  text-align: right;
  margin-top: .25rem;
}

/* ---- Upload Zone ---- */
.upload-zone {
  position: relative;
  border: 2px dashed var(--icp-border);
  border-radius: var(--icp-radius);
  background: #f8fbff;
  padding: 1.5rem;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  overflow: hidden;
}

.upload-zone:hover {
  border-color: var(--icp-blue-light);
  background: #f0f6ff;
}

.upload-zone.drag-over {
  border-color: var(--icp-blue-light);
  background: var(--icp-sky);
  transform: scale(1.01);
}

.upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.upload-icon {
  font-size: 2rem;
  color: var(--icp-blue-light);
  display: block;
  margin-bottom: .4rem;
}

.upload-text {
  font-size: .8rem;
  font-weight: 600;
  color: var(--icp-blue);
  margin: 0;
}

.upload-hint {
  font-size: .7rem;
  color: var(--icp-text-muted);
  margin: .2rem 0 0;
}

.upload-preview {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.upload-preview span {
  font-size: .8rem;
  font-weight: 500;
  color: var(--icp-blue);
}

.btn-remove-file {
  background: none;
  border: none;
  color: #e74c3c;
  font-size: .9rem;
  cursor: pointer;
  padding: .1rem .3rem;
  border-radius: 4px;
  transition: var(--transition);
}

.btn-remove-file:hover { background: #ffeaea; }

/* ---- Declaration Box ---- */
.declaration-box {
  background: #f7faff;
  border: 1.5px solid #d0e4f5;
  border-radius: var(--icp-radius);
  padding: 1rem 1.1rem;
}

.declaration-check {
  width: 17px;
  height: 17px;
  margin-top: .2rem;
  flex-shrink: 0;
  accent-color: var(--icp-blue);
  cursor: pointer;
}

.declaration-label {
  font-size: .78rem;
  color: var(--icp-text);
  cursor: pointer;
  line-height: 1.5;
}

.declaration-list {
  font-size: .75rem;
  color: var(--icp-text-muted);
  margin: .3rem 0 0 .5rem;
  padding-left: 1.2rem;
  line-height: 1.7;
}

.declaration-feedback {
  font-size: .72rem;
  color: #e74c3c;
  margin-top: .3rem;
  display: none;
}

.declaration-check:invalid ~ .declaration-feedback,
.declaration-box.show-error .declaration-feedback {
  display: block;
}

/* ---- Register Button ---- */
.btn-register {
  background: linear-gradient(135deg, #1565c0 0%, var(--icp-blue-light) 100%);
  color: var(--icp-white);
  border: none;
  border-radius: var(--icp-radius-sm);
  padding: .65rem 2.2rem;
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(21,101,192,.3);
  display: inline-flex;
  align-items: center;
  min-width: 150px;
  justify-content: center;
}

.btn-register:hover {
  background: linear-gradient(135deg, var(--icp-blue-mid) 0%, #2196f3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(21,101,192,.4);
}

.btn-register:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(21,101,192,.3);
}

.btn-register:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

/* ---- Success Modal ---- */
.success-modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.success-icon-wrap {
  display: inline-block;
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1); }
}

.success-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a2e4a;
  margin-bottom: .3rem;
}

.success-subtitle {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-size: .9rem;
  color: #27ae60;
  direction: rtl;
  margin-bottom: .5rem;
}

.success-body {
  font-size: .85rem;
  color: #6b7e99;
  margin-bottom: .8rem;
}

.complaint-id-box {
  background: #f0f8ff;
  border: 2px dashed #3d8fe8;
  border-radius: 10px;
  padding: .6rem 1.5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--icp-blue);
  letter-spacing: 1px;
}

/* ---- Check Status Modal ---- */
#statusResult {
  border-left: 4px solid #3d8fe8;
  background: #f0f8ff !important;
  border-radius: 8px;
}

#statusResult p {
  font-size: .9rem;
  color: var(--icp-text);
}

#statusResult span {
  font-weight: 600;
  color: var(--icp-blue);
}

#statusError {
  border-left: 4px solid #dc3545;
  background: #fff5f5 !important;
  border-radius: 8px;
  color: #842029;
  font-weight: 500;
}

#statusLoading {
  padding: 2rem 0;
}

.form-badge {
  background: linear-gradient(135deg, var(--icp-blue-light) 0%, var(--icp-blue) 100%);
  color: white;
  padding: .5rem 1.2rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(61, 143, 232, 0.3);
}

.form-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(61, 143, 232, 0.4);
  color: white;
  text-decoration: none;
}

.form-badge:active {
  transform: translateY(0);
}

/* ========== ENHANCED LEFT PANEL STYLING ========== */

/* Logo Section */
.logo-section {
  margin-bottom: 1.5rem;
}

.icp-logo {
  max-width: 140px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.25));
  transition: var(--transition);
}

.icp-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}

/* Panel Divider */
.panel-divider {
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--icp-gold), transparent);
  margin: 1rem 0;
  border-radius: 1px;
}

/* Support Section */
.support-section {
  margin: 1.5rem 0;
  padding: 1.2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.support-image {
  max-width: 120px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.2));
}

.support-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--icp-white);
  margin: 0;
  letter-spacing: -.3px;
}

.support-subtitle {
  font-size: .75rem;
  font-weight: 600;
  color: var(--icp-gold);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0;
}

/* Trust Badges */
.trust-badges {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 1.4rem 0;
  width: 100%;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(200,169,81,.3);
  border-radius: 8px;
  padding: .5rem .75rem;
  transition: var(--transition);
  cursor: pointer;
}

.badge-item:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(200,169,81,.5);
  transform: translateX(4px);
}

.badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(200,169,81,.2);
  border-radius: 50%;
  color: var(--icp-gold);
  font-size: .65rem;
  flex-shrink: 0;
}

.badge-text {
  font-size: .7rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  letter-spacing: .3px;
}

/* Features Section */
.features-section {
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 1rem;
  margin: 1.2rem 0;
  border: 1px solid rgba(255,255,255,.1);
}

.features-heading {
  font-size: .85rem;
  font-weight: 700;
  color: var(--icp-white);
  margin: 0 0 .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.features-list li {
  font-size: .75rem;
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
}

.features-list i {
  color: var(--icp-gold);
  font-size: .65rem;
}

/* Contact Section */
.contact-section {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  align-items: center;
}

.contact-heading {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 0;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--icp-gold);
  text-decoration: none;
  transition: var(--transition);
  padding: .4rem .8rem;
  border-radius: 6px;
  border: 1px solid rgba(200,169,81,.4);
}

.contact-link:hover {
  color: var(--icp-white);
  background: rgba(200,169,81,.15);
  border-color: var(--icp-gold);
  transform: scale(1.05);
}

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Large screens: constrain card width */
@media (min-width: 1200px) {
  .right-panel { padding: 2.5rem 2.5rem 3rem; }
}

/* Hide left panel on screens less than 768px */
@media (max-width: 767px) {
  .left-panel {
    display: none;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .split-container { flex-direction: column; }

  .left-panel {
    width: 100%;
    min-width: unset;
    padding: 1.5rem 1rem;
    min-height: auto;
  }

  .left-inner {
    flex-direction: column;
    padding: 1.2rem 1rem;
    gap: .8rem;
  }

  .support-image { max-width: 100px; }
  .icp-logo { max-width: 120px; }
  .features-section { padding: .8rem; }
  .contact-section { margin-top: 1rem; }

  .right-panel { padding: 1.5rem 1.2rem 2rem; }
}

/* Mobile */
@media (max-width: 576px) {
  .left-panel { padding: 1rem; }
  .left-inner { padding: .8rem; gap: .5rem; }
  
  .icp-logo { max-width: 100px; }
  .support-image { max-width: 80px; }
  .support-heading { font-size: .95rem; }
  .support-subtitle { font-size: .7rem; }
  
  .badge-item { padding: .4rem .6rem; }
  .badge-text { font-size: .65rem; }
  .badge-icon { width: 20px; height: 20px; }
  
  .features-heading { font-size: .75rem; margin-bottom: .6rem; }
  .features-list li { font-size: .7rem; gap: .4rem; }
  .features-section { padding: .6rem; margin: 1rem 0; }
  
  .contact-heading { font-size: .7rem; }
  .contact-link { font-size: .8rem; padding: .3rem .6rem; }

  .form-card { padding: 1.2rem 1rem 1.5rem; }
  .form-title { font-size: 1.15rem; }
  .form-badge { font-size: .62rem; padding: .25rem .55rem; }

  .right-panel { padding: 1rem .7rem 1.5rem; }

  .btn-register {
    width: 100%;
    padding: .7rem;
    font-size: .85rem;
  }

  .bilingual-label {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1px;
  }
}

/* Accessibility */
*:focus-visible {
  outline: 2.5px solid var(--icp-blue-light);
  outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--icp-bg); }
::-webkit-scrollbar-thumb { background: #a0c4e8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--icp-blue-light); }