:root{
  --gradient-primary: linear-gradient(140deg, #135ab4, #00b9b4);
  --brand-text-on-dark: #ffffff;
  --body-bg: #f7f9fc;
  --radius: 12px;
  --shadow: 0 10px 24px rgba(0,0,0,.08);
  --sidebar-w: 520px;            /* width of the fixed left panel */
}

/* Page */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--body-bg);
  overflow: hidden;              /* ensures only the right panel scrolls on desktop */
}

/* Wrapper */
.demo-wrapper {
  min-height: 100vh;
  /* no need for flex when the left side is fixed */
}

/* LEFT: fixed sidebar */
.info-panel {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--gradient-primary);
  color: var(--brand-text-on-dark);
  padding: 60px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;              /* keep it fixed and not scrollable */
}

/* brand */
.navbar-brand-logo img{ filter: invert(1); }
.navbar-brand-logo{
  color: var(--brand-text-on-dark);
  font-size: 2rem;
  text-decoration: none;
}
.navbar-brand-logo:hover{ color: var(--brand-text-on-dark); }

/* RIGHT: scrollable form panel */
.form-panel {
  margin-left: var(--sidebar-w); /* sit to the right of the fixed panel */
  height: 90vh;                 /* take full viewport height */
  overflow: auto;                /* this is the only scroller */
  background: #ffffff;
  padding: 60px 40px;
  min-width: 300px;
  box-shadow: var(--shadow);
  padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* extra space for button & mobile safe area */
  box-sizing: border-box;
}


/* Typography & inputs (retain your existing styles) */
h1, h2 { font-weight: 700; margin-bottom: .75rem; }
ul { padding-left: 1rem; }
ul li { margin-bottom: 10px; font-size: 1rem; }

.form-control, .form-select, textarea {
  border-radius: 8px;
  padding: 10px 14px;
  border: 1px solid #dbe1ea;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, textarea:focus {
  border-color: #5aa6ff;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Button (you used .btn-primary) */
.btn-primary {
  border-radius: 25px;
  padding: 10px 18px;
  font-weight: 600;
  border: none;
  transition: transform .08s ease, background-color .2s ease-in-out;
}
.btn-primary:hover { background-color: #0b5ed7; }
.btn-primary:active { transform: translateY(1px); }

/* Ratings chip */
.ratings p{
  background: #bebebe6e;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  font-size: 1.05rem;
  display: inline-block;
  margin: 0;
}

/* required asterisk */
.req::after { content: ' *'; color: #dc3545; font-weight: 600; }

/* Responsive: stack on mobile (left not fixed there) */
@media (max-width: 992px) {
  :root { --sidebar-w: 100%; }

  html, body { overflow: auto; }       /* allow normal page scroll on mobile */

  .info-panel {
    position: static;
    width: 100%;
    padding: 48px 32px;
  }

  .form-panel {
    margin-left: 0;
    height: auto;
    overflow: visible;
    padding: 48px 32px;
    box-shadow: none;                  /* optional: remove shadow when stacked */
  }
}

@media (max-width: 576px) {
  .info-panel, .form-panel { padding: 32px 20px; }
  .navbar-brand-logo { font-size: 1.6rem; }
  .ratings p { font-size: 1rem; }
}