/* The request page (version B, picked 2026-10-22; A is archived in old-versions-2026-10-22). Loaded after pages.css. Both drop the three step cards for a light 1-2-3,
   mark the link-or-files part and the email as required, and fit one laptop screen. A: centred, the 1-2-3 as a strip
   above one card. B: one wide card, a blue side with the title and a quiet 1-2-3, the form beside it. */
.reqab { padding-top: clamp(20px, 2.6vw, 34px); padding-bottom: clamp(40px, 5vw, 70px); margin-top: clamp(10px, 1.6vw, 20px); }
.reqab h1 { margin-top: 4px; font-size: clamp(28px, 3vw, 40px); }

/* the form, shared */
.ab-form { gap: 14px; margin-top: 0; }
.ab-f { display: grid; gap: 6px; }
.ab-l { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 15px; }
.ab-hint { color: var(--muted); font-size: 13px; line-height: 1.4; }
.reqab select, .reqab input:not([type=checkbox]):not([type=file]), .reqab textarea { padding: 11px 13px; }
.reqab textarea { resize: vertical; min-height: 0; line-height: 1.45; }
.tag { padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tag-req { background: #ebedff; color: var(--blue); }
.tag-opt { background: #f0f1f6; color: var(--muted); margin-right: 4px; }
.ab-src { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: start; }
.ab-or { align-self: center; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ab-drop { padding: 0 16px; height: 46px; border-radius: 12px; white-space: nowrap; font-size: 15px; cursor: pointer; }
.ab-under { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 0; }
.ab-under .req-add { padding: 0 2px; font-size: 14px; }
.ab-under .req-drop-n { font-size: 13px; color: var(--ink); }
.ab-under .req-drop-n:empty { display: none; }
.ab-demo { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.ab-check { flex: 1; display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 14px; line-height: 1.45; cursor: pointer; }
.ab-check input { flex: none; width: 18px; height: 18px; padding: 0; margin-top: 1px; accent-color: var(--blue); }
.req-q { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #c5c9ee; background: #fff; color: var(--blue);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.req-q[aria-expanded="true"], .req-q:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.req-tip { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 10px); width: min(360px, 100%); padding: 12px 14px; border-radius: 14px;
  background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.5; box-shadow: 0 20px 40px -20px rgba(20,22,80,.6); }
.req-tip::after { content: ""; position: absolute; right: 8px; top: 100%; border: 7px solid transparent; border-top-color: var(--ink); }
.req-tip[hidden] { display: none; }
.ab-form .req-msg { min-height: 0; margin-top: -6px; }
.ab-form .req-msg:empty { display: none; }
.ab-form .btn { margin-top: 0; }

/* A: centred, a 1-2-3 strip above the card */
.reqA { padding-top: clamp(16px, 2vw, 24px); margin-top: clamp(8px, 1vw, 12px); }
.reqA .a-head { text-align: center; max-width: 960px; margin: 0 auto 14px; }
.reqA .a-head .small { display: none; }   /* the title already says free; saves a line */
.a-strip { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; color: var(--muted); font-size: 14px; }
.a-strip li { display: flex; align-items: center; gap: 8px; }
.a-strip li + li::before { content: ""; width: 16px; height: 1px; margin-right: 6px; background: #c5c9ee; }
.a-strip i, .b-steps i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff;
  font-style: normal; font-size: 12px; font-weight: 700; }
.a-strip b { color: var(--ink); font-weight: 600; }
.reqA .req-card { max-width: 760px; margin: 0 auto; padding: 24px 32px; }
.reqA .ab-form { gap: 12px; }

/* B: one wide card, a blue side and the form */
.b-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); max-width: 1080px; margin: 0 auto; overflow: hidden;
  border-radius: 28px; background: #fff; border: 1px solid rgba(37,49,217,.08); box-shadow: 0 40px 80px -50px rgba(30,34,140,.55); }
.b-side { display: flex; flex-direction: column; padding: 36px 34px; color: #dfe2ff;
  background: radial-gradient(120% 80% at 0% 0%, #4b57ff 0%, transparent 60%), linear-gradient(160deg, var(--blue) 0%, #1a1f8f 100%); }
.reqB .b-side .small { color: #c9ceff; }
.reqB .b-side h1 { color: #fff; }
.b-line { margin-top: 12px; font-size: 16px; line-height: 1.5; color: #dfe2ff; }
.b-steps { list-style: none; margin: auto 0 0; padding: 26px 0 0; display: grid; gap: 12px; font-size: 14px; }
.b-steps li { display: flex; align-items: center; gap: 10px; }
.b-steps i { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); }
.b-steps b { color: #fff; font-weight: 600; } .b-steps span { color: #bfc4ff; }
.b-form { padding: 32px 36px; }

@media (max-width: 900px) {
  .b-card { grid-template-columns: 1fr; }
  .b-side { padding: 26px 22px; } .b-steps { margin-top: 0; padding-top: 18px; }
  .b-form { padding: 24px 20px; }
  .reqA .req-card { padding: 22px 18px; }
}
@media (max-width: 560px) {
  .ab-src { grid-template-columns: 1fr; gap: 8px; }
  .ab-or { justify-self: center; }
  .ab-drop { height: 46px; }
  .a-strip { flex-direction: column; align-items: flex-start; width: max-content; margin: 14px auto 0; gap: 8px; }
  .a-strip li + li::before { display: none; }
  .req-tip { width: 100%; }
}

/* B as the request page (2026-10-22): two to three times more space between the form's sections */
.reqB .ab-form { gap: 30px; }
.reqB { padding-top: clamp(14px, 1.6vw, 22px); margin-top: clamp(8px, 1vw, 12px); }
.reqB .b-form { padding: 26px 36px; }   /* a little less padding so the form still fits a laptop screen */
.reqB .ab-form .req-msg { margin-top: -18px; }

/* our own "Kind of video" menu, replacing the browser's dropdown */
.kp { position: relative; }
.kp-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 18px 11px 13px;
  border-radius: 12px; border: 1px solid #d6d8ee; background: #fbfbff; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.kp-btn:hover { border-color: #b9bde8; }
.kp-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.kp-arr { flex: none; width: 12px; height: 8px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.kp.open .kp-arr { transform: rotate(180deg); }
.kp-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  border-radius: 14px; background: #fff; border: 1px solid rgba(37,49,217,.12); box-shadow: 0 24px 50px -24px rgba(30,34,140,.45); }
.kp-menu[hidden] { display: none; }
.kp-menu li { display: flex; align-items: center; border-radius: 10px; }
.kp-menu li:hover, .kp-menu li:focus-within { background: #f4f5ff; }
.kp-menu li.on { background: #ebedff; }
.kp-opt { flex: 1; min-width: 0; padding: 11px 12px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; border-radius: 10px; }
.kp-menu li.on .kp-opt { color: var(--blue); font-weight: 700; }
.kp-opt:focus-visible, .kp-ex:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.kp-ex { flex: none; padding: 8px 12px; color: var(--blue); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 8px; }
.kp-ex:hover { text-decoration: underline; }
@media (max-width: 900px) { .reqB .ab-form { gap: 26px; } .reqB .ab-form .req-msg { margin-top: -14px; } }
.kp-btn, .kp-opt, .kp-ex { -webkit-tap-highlight-color: transparent; }   /* no grey/blue flash on phones; the open menu shows the tap */
.kp-opt:active { background: #ebedff; }
/* spam trap (2026-10-22): a field people never see; send.php drops any request that fills it */
.req-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* the privacy line beside the Send button (2026-10-22) */
.ab-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ab-pv { color: var(--muted); font-size: 13px; line-height: 1.4; }
.ab-pv a { color: var(--blue); font-weight: 600; }
/* after Send (2026-10-23, body.req-sent from request.js): the light panel fills the space between the header and the
   footer, the card sits in its middle with equal space above and below, and the panel's bottom corners are rounded
   like its top. */
.req-sent main { display: flex; flex-direction: column; }
.req-sent .reqB { flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(14px, 1.6vw, 22px); padding-bottom: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(8px, 1vw, 12px); border-radius: clamp(22px, 3vw, 44px); }