/* Book a Demo page: CF7 form on the left, editable product and follow-up details on the right. */

.demo-page { background: #fff; }

.demo-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 24px 58px;
  text-align: center;
  background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
}

.demo-hero::before,
.demo-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.demo-hero::before { width: 360px; height: 360px; left: -190px; top: -220px; background: rgba(59,130,246,.12); }
.demo-hero::after { width: 300px; height: 300px; right: -160px; bottom: -220px; background: rgba(124,58,237,.10); }

.demo-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.demo-hero h1 { max-width: 860px; margin: 0 auto 18px; font-size: clamp(38px, 5vw, 62px); line-height: 1.12; letter-spacing: -.045em; color: var(--slate-900); }
.demo-hero h1 span { display: block; color: var(--blue-600); }
.demo-hero p { max-width: 690px; margin: 0 auto; font-size: 17px; line-height: 1.75; color: var(--slate-500); }

.demo-booking { padding: 20px 24px 104px; }
.demo-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr); gap: 34px; align-items: start; }
.demo-form-card, .demo-details { border: 1px solid var(--slate-200); border-radius: 26px; }
.demo-form-card { position: relative; overflow: hidden; min-width: 0; padding: 40px; background: #fff; box-shadow: 0 20px 60px rgba(15,23,42,.09); }
.demo-form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--blue-600), var(--indigo-600), var(--purple-600)); }
.demo-card-heading { margin-bottom: 28px; }
.demo-card-heading h2, .demo-details-intro h2 { font-size: 27px; line-height: 1.3; letter-spacing: -.025em; color: var(--slate-900); }
.demo-card-heading h2 { margin-bottom: 8px; }
.demo-card-heading p, .demo-details-intro p { font-size: 14.5px; line-height: 1.7; color: var(--slate-500); }

.demo-cf7-wrap .wpcf7 form { display: grid; gap: 18px; }
.demo-cf7-wrap .wpcf7 form > p { margin: 0; }
.demo-cf7-wrap .wpcf7 label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--slate-700); }
.demo-cf7-wrap .wpcf7-form-control-wrap { display: block; margin-top: 0; }
.dpdp-demo-form { display: grid; gap: 22px; }
.dpdp-demo-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dpdp-demo-form .form-group { min-width: 0; margin: 0; }
.dpdp-demo-form .form-group > label { margin-bottom: 6px; line-height: 1.35; }
.dpdp-demo-form .form-group > br,
.dpdp-demo-form .form-group > label + br,
.dpdp-demo-form .form-row > br { display: none; }
.demo-cf7-wrap input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.demo-cf7-wrap select,
.demo-cf7-wrap textarea { width: 100%; min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--slate-200); border-radius: 13px; outline: none; background: #f8fafc; color: var(--slate-900); font: 500 14.5px/1.5 var(--font); box-shadow: inset 0 1px 2px rgba(15,23,42,.025); transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; }
.demo-cf7-wrap textarea { min-height: 132px; resize: vertical; }
.demo-cf7-wrap select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; cursor: pointer; }
.demo-cf7-wrap input[type="date"] { color-scheme: light; }
.demo-cf7-wrap input::placeholder, .demo-cf7-wrap textarea::placeholder { color: var(--slate-400); font-weight: 400; }
.demo-cf7-wrap input:focus, .demo-cf7-wrap select:focus, .demo-cf7-wrap textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(59,130,246,.11); background-color: #fff; transform: translateY(-1px); }
.demo-cf7-wrap input[type="submit"] { width: 100%; min-height: 54px; padding: 14px 22px; border: 0; border-radius: 13px; background: linear-gradient(135deg, var(--blue-600), var(--indigo-600)); color: #fff; font: 750 15px var(--font); letter-spacing: .01em; cursor: pointer; box-shadow: 0 10px 24px rgba(37,99,235,.24); transition: transform .15s, box-shadow .15s, filter .15s; }
.demo-cf7-wrap input[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(37,99,235,.28); }
.demo-cf7-wrap input[type="submit"]:focus-visible { outline: 3px solid rgba(59,130,246,.28); outline-offset: 3px; }
.demo-cf7-wrap input[type="submit"]:disabled { cursor: wait; filter: saturate(.65); opacity: .75; }
.dpdp-demo-form .form-submit { padding-top: 2px; }

/* CF7 solution choices become clear, touch-friendly option cards. */
.dpdp-demo-form .wpcf7-checkbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dpdp-demo-form .wpcf7-checkbox .wpcf7-list-item { min-width: 0; margin: 0; }
.dpdp-demo-form .wpcf7-checkbox .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; height: 100%; margin: 0; padding: 12px 13px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; color: var(--slate-600); font-size: 12.5px; font-weight: 650; line-height: 1.45; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, color .15s; }
.dpdp-demo-form .wpcf7-checkbox .wpcf7-list-item label:hover { border-color: var(--blue-300, #93c5fd); background: var(--blue-50); color: var(--blue-800); }
.dpdp-demo-form .wpcf7-checkbox input { width: 17px; height: 17px; flex: 0 0 17px; margin: 1px 0 0; accent-color: var(--blue-600); cursor: pointer; }
.dpdp-demo-form .wpcf7-checkbox label:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50); color: var(--blue-800); box-shadow: 0 0 0 2px rgba(59,130,246,.08); }

/* Privacy acceptance is visually separated from the data-entry fields. */
.dpdp-demo-form .consent-field { padding: 16px 17px; border: 1px solid var(--slate-200); border-radius: 13px; background: linear-gradient(180deg, #f8fafc, #f5f8ff); }
.dpdp-demo-form .consent-field .wpcf7-list-item { margin: 0; }
.dpdp-demo-form .consent-field label { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--slate-600); font-size: 12.5px; font-weight: 500; line-height: 1.65; cursor: pointer; }
.dpdp-demo-form .consent-field input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--blue-600); }
.demo-cf7-wrap .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--red-600); }
.demo-cf7-wrap .wpcf7-response-output { margin: 18px 0 0 !important; padding: 13px 15px !important; border-radius: 11px; font-size: 13px; line-height: 1.6; }
.demo-cf7-wrap form.sent .wpcf7-response-output { border-color: var(--green-500); background: var(--green-100); color: #166534; }
.demo-cf7-wrap form.invalid .wpcf7-response-output { border-color: var(--orange-500); background: var(--orange-100); color: #9a3412; }
.demo-form-placeholder { padding: 30px 24px; border: 1.5px dashed var(--slate-300); border-radius: 14px; background: var(--slate-50); text-align: center; }
.demo-form-placeholder strong { display: block; margin-bottom: 7px; color: var(--slate-800); }
.demo-form-placeholder p, .demo-privacy { font-size: 12.5px; line-height: 1.65; color: var(--slate-500); }
.demo-privacy { margin-top: 17px; text-align: center; }
.demo-privacy a { color: var(--blue-600); text-decoration: underline; }

.demo-details { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(191,219,254,.42) transparent; background: linear-gradient(145deg, #172554 0%, #312e81 58%, #3b1b75 100%); color: #fff; box-shadow: 0 20px 60px rgba(30,58,138,.16); }
.demo-details::-webkit-scrollbar { width: 7px; }
.demo-details::-webkit-scrollbar-track { background: transparent; }
.demo-details::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 99px; background: rgba(191,219,254,.42); background-clip: padding-box; }
.demo-details-intro { padding: 36px 36px 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
.demo-details-intro h2 { margin-bottom: 11px; color: #fff; }
.demo-details-intro p { color: rgba(255,255,255,.68); }
.demo-process { padding: 28px 36px; }
.demo-details h3 { margin-bottom: 18px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #bfdbfe; }
.demo-process strong { display: block; margin-bottom: 3px; font-size: 14px; color: #fff; }
.demo-process p { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.62); }
.demo-process { transition: background .25s, box-shadow .25s; }
.demo-process.is-active { background: rgba(34,197,94,.11); box-shadow: inset 4px 0 0 #4ade80; }
.demo-process ol { display: grid; gap: 18px; }
.demo-process li { position: relative; display: flex; gap: 13px; }
.demo-process li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 31px; width: 1px; height: calc(100% + 6px); background: rgba(191,219,254,.24); }
.demo-process li > span { position: relative; z-index: 1; width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--blue-700); font-size: 11px; font-weight: 800; }

@media (max-width: 900px) {
  .demo-layout { grid-template-columns: 1fr; max-width: 720px; }
  .demo-details { position: static; order: 2; max-height: none; overflow: hidden; }
}

@media (max-width: 600px) {
  .demo-hero { padding: 58px 20px 42px; }
  .demo-hero h1 { font-size: 36px; }
  .demo-hero p { font-size: 15px; }
  .demo-booking { padding: 10px 16px 72px; }
  .demo-form-card { padding: 30px 22px; border-radius: 20px; }
  .demo-details { border-radius: 20px; }
  .demo-details-intro, .demo-process { padding-left: 24px; padding-right: 24px; }
  .dpdp-demo-form .form-row, .dpdp-demo-form .wpcf7-checkbox { grid-template-columns: 1fr; }
  .dpdp-demo-form { gap: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-cf7-wrap input[type="submit"] { transition: none; }
}