/* ============================================================================
   Commercial Project Request
   ----------------------------------------------------------------------------
   Its own stylesheet, and its own page. This flow used to share project-request.html
   with the final year one, which meant a single form that first asked WHICH kind of
   project you wanted and then hid half of itself. Two audiences, two vocabularies,
   two price models - a budget you name versus a package you pick - and one set of
   markup trying to be both. Splitting them lets each page ask only its own questions.

   Nothing here is shared with css/projects.css: that file is the catalogue's visual
   system, and borrowing from it would couple a form to a card grid.
   ========================================================================= */

:root {
  --cr-ink:    var(--phoenix-emphasis-color, #141824);
  --cr-muted:  var(--phoenix-secondary-color, #6e7891);
  --cr-line:   var(--phoenix-border-color, #e3e6ed);
  --cr-card:   var(--phoenix-card-bg, #fff);
  --cr-indigo: #5b4bd6;
  --cr-indigo-d: #4338ca;
  --cr-tint:   rgba(99, 102, 241, .08);
}
[data-bs-theme="dark"] {
  --cr-card: #171c2c;
  --cr-line: #2b3247;
  --cr-tint: rgba(165, 180, 252, .10);
}

/* ---- hero ---------------------------------------------------------------- */
.cr-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 1.5rem 0 8rem;          /* deep bottom pad: the form card overlaps upward into it */
  background:
    radial-gradient(38rem 26rem at 82% 10%, rgba(124, 108, 243, .5), transparent 62%),
    linear-gradient(135deg, #3b2fa8 0%, #4a3ccb 48%, #5b4bd6 100%);
}
.cr-crumb { font-size: .78rem; opacity: .85; margin-bottom: .7rem; }
.cr-crumb a { color: #d7d3ff; text-decoration: none; }
.cr-crumb a:hover { color: #fff; text-decoration: underline; }
.cr-crumb .sep { opacity: .5; margin: 0 .4rem; }
.cr-crumb .here { color: #fff; font-weight: 600; }

.cr-hero h1 {
  color: #fff; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .45rem;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
}
.cr-hero p { margin: 0; max-width: 32rem; font-size: .92rem; line-height: 1.6; opacity: .9; }

.cr-hero-art { position: absolute; right: 3%; top: 1.5rem; width: min(24rem, 32vw); }
.cr-hero-art svg { display: block; width: 100%; height: auto; }
@media (max-width: 991.98px) { .cr-hero-art { display: none; } }

/* ---- layout -------------------------------------------------------------- */
/* Pulled up into the hero, so the card reads as the page's subject rather than as
   something parked underneath a banner. */
.cr-wrap { margin-top: -6.5rem; position: relative; z-index: 2; }

.cr-card {
  background: var(--cr-card); border: 1px solid var(--cr-line);
  border-radius: 1.1rem; box-shadow: 0 .6rem 1.8rem rgba(16, 24, 52, .10);
}
[data-bs-theme="dark"] .cr-card { box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .4); }
.cr-main { padding: 1.6rem 1.7rem 1.8rem; }

/* ---- numbered sections --------------------------------------------------- */
.cr-sec { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.05rem; }
.cr-sec + * { margin-top: 0; }
.cr-sec-n {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #6366f1, var(--cr-indigo-d));
}
.cr-sec h2 { margin: 0; font-size: 1.02rem; font-weight: 750; color: var(--cr-ink); }
.cr-sec .opt { font-size: .78rem; font-weight: 500; color: var(--cr-muted); }
/* A rule BETWEEN sections rather than under each: the last one would otherwise draw a
   line immediately above the submit button and fence it off from the form it submits. */
.cr-group + .cr-group { border-top: 1px solid var(--cr-line); margin-top: 1.6rem; padding-top: 1.5rem; }

.cr-label { display: block; font-size: .82rem; font-weight: 650; color: var(--cr-ink); margin-bottom: .4rem; }
.cr-label .req { color: #e5484d; margin-left: .15rem; }
.cr-label .opt { font-weight: 500; color: var(--cr-muted); }
.cr-help { font-size: .74rem; color: var(--cr-muted); margin-top: .35rem; }

.cr-input, .cr-textarea, .cr-select {
  width: 100%; border: 1px solid var(--cr-line); border-radius: .6rem;
  padding: .62rem .8rem; font-size: .88rem; background: var(--cr-card); color: var(--cr-ink);
}
.cr-textarea { resize: vertical; min-height: 6.5rem; line-height: 1.55; }
.cr-input:focus, .cr-textarea:focus, .cr-select:focus {
  outline: none; border-color: #a5b4fc; box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18);
}
.cr-input.is-invalid, .cr-textarea.is-invalid { border-color: #e5484d; }

/* Character counter, bottom-right inside the textarea's box. */
.cr-count-wrap { position: relative; }
.cr-count {
  position: absolute; right: .7rem; bottom: .55rem;
  font-size: .7rem; color: var(--cr-muted); pointer-events: none;
}
.cr-count.over { color: #e5484d; font-weight: 700; }

/* ---- choice tiles (project type, urgency) -------------------------------- */
.cr-tiles { display: grid; gap: .6rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cr-tiles.cr-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-tile {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .35rem; text-align: center; cursor: pointer;
  padding: .85rem .5rem; border: 1px solid var(--cr-line); border-radius: .7rem;
  background: var(--cr-card); transition: border-color .15s ease, background-color .15s ease;
}
.cr-tile input { position: absolute; opacity: 0; pointer-events: none; }
.cr-tile .ico { font-size: 1.05rem; color: var(--cr-muted); }
.cr-tile .t { font-size: .78rem; font-weight: 600; color: var(--cr-ink); line-height: 1.25; }
.cr-tile .s { font-size: .68rem; color: var(--cr-muted); }
.cr-tile:hover:not(.is-disabled) { border-color: #a5b4fc; }
.cr-tile:has(input:checked) { border-color: var(--cr-indigo); background: var(--cr-tint); }
.cr-tile:has(input:checked) .ico, .cr-tile:has(input:checked) .t { color: var(--cr-indigo-d); }
.cr-tile:has(input:focus-visible) { outline: 2px solid var(--cr-indigo); outline-offset: 2px; }

/* Disabled options are SHOWN, not removed. Removing them would say these project types do
   not exist; greying them says they exist and are not open yet, which is the true statement
   and stops people asking for something that will be refused. */
.cr-tile.is-disabled { cursor: not-allowed; opacity: .5; background: var(--phoenix-secondary-bg, #f5f7fa); }
[data-bs-theme="dark"] .cr-tile.is-disabled { background: rgba(255, 255, 255, .04); }
.cr-tile-soon {
  position: absolute; top: .3rem; right: .3rem;
  font-size: .55rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .05rem .25rem; border-radius: 4px;
  background: var(--phoenix-secondary-bg, #eef1f6); color: var(--cr-muted);
}

/* Urgency tiles read left-aligned with an icon beside the text, not stacked. */
.cr-tiles-3 .cr-tile { flex-direction: row; align-items: center; text-align: left; gap: .6rem; }
.cr-tiles-3 .cr-tile .txt { display: flex; flex-direction: column; min-width: 0; }

/* ---- budget -------------------------------------------------------------- */
.cr-money { display: flex; }
.cr-money .cur {
  display: flex; align-items: center; gap: .25rem; padding: .62rem .7rem;
  border: 1px solid var(--cr-line); border-right: 0;
  border-radius: .6rem 0 0 .6rem; font-size: .82rem; font-weight: 700; color: var(--cr-muted);
  background: var(--phoenix-secondary-bg, #f5f7fa); white-space: nowrap;
}
.cr-money .cr-input { border-radius: 0 .6rem .6rem 0; }

/* ---- technology chips ---------------------------------------------------- */
.cr-chips {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  min-height: 2.6rem; padding: .4rem .5rem;
  border: 1px solid var(--cr-line); border-radius: .6rem; background: var(--cr-card);
}
.cr-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; border-radius: 5px; font-size: .74rem; font-weight: 650;
  background: var(--cr-tint); color: var(--cr-indigo-d);
}
.cr-chip button {
  border: 0; background: none; padding: 0; line-height: 1; cursor: pointer;
  color: inherit; opacity: .65; font-size: .8rem;
}
.cr-chip button:hover { opacity: 1; }
.cr-chip-add {
  border: 0; background: none; font-size: .76rem; color: var(--cr-muted);
  padding: .2rem .3rem; cursor: pointer;
}
[data-bs-theme="dark"] .cr-chip { color: #c7d2fe; }

/* ---- dropzone ------------------------------------------------------------ */
.cr-drop {
  display: flex; align-items: center; gap: .9rem;
  padding: 1rem 1.1rem; border: 1.5px dashed var(--cr-line); border-radius: .8rem;
  background: var(--phoenix-secondary-bg, #f8f9fc); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
[data-bs-theme="dark"] .cr-drop { background: rgba(255, 255, 255, .03); }
.cr-drop:hover, .cr-drop.is-over { border-color: var(--cr-indigo); background: var(--cr-tint); }
.cr-drop .ico {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .6rem;
  display: grid; place-items: center; color: var(--cr-indigo-d); background: var(--cr-tint);
}
.cr-drop .txt { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--cr-ink); }
.cr-drop .sub { font-size: .72rem; color: var(--cr-muted); }
.cr-drop .n { font-size: .74rem; color: var(--cr-muted); white-space: nowrap; }
.cr-files { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .78rem; }
.cr-files li { display: flex; align-items: center; gap: .4rem; padding: .15rem 0; color: var(--cr-muted); }

/* ---- submit -------------------------------------------------------------- */
.cr-send {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border: 0; border-radius: .7rem; cursor: pointer;
  font-size: .92rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #6366f1, var(--cr-indigo-d));
  box-shadow: 0 .4rem 1rem rgba(79, 70, 229, .32);
  transition: filter .15s ease;
}
.cr-send:hover:not(:disabled) { filter: brightness(1.07); }
.cr-send:disabled { opacity: .65; cursor: progress; }
.cr-send-note { font-size: .78rem; color: var(--cr-muted); }

/* ---- sidebar ------------------------------------------------------------- */
.cr-side { display: flex; flex-direction: column; gap: 1rem; }
.cr-side-card { padding: 1.15rem 1.2rem; }
.cr-side-card h3 { margin: 0 0 .95rem; font-size: .95rem; font-weight: 750; color: var(--cr-ink); }

/* The connector line runs behind the icons and stops at the last one, so it never dangles
   past the final step. */
.cr-steps { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.cr-step { position: relative; display: flex; gap: .75rem; }
.cr-step .ico {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: .6rem; z-index: 1;
  display: grid; place-items: center; font-size: .8rem;
  color: var(--cr-indigo-d); background: var(--cr-tint);
}
.cr-step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.05rem; top: 2.1rem; bottom: -1rem;
  width: 2px; background: var(--cr-line);
}
.cr-step .t { font-size: .82rem; font-weight: 700; color: var(--cr-ink); }
.cr-step .s { font-size: .75rem; line-height: 1.45; color: var(--cr-muted); }

.cr-why { display: flex; flex-direction: column; gap: .85rem; }
.cr-why-item { display: flex; gap: .75rem; }
.cr-why-item .ico {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  display: grid; place-items: center; font-size: .8rem;
  color: var(--cr-indigo-d); background: var(--cr-tint);
}
.cr-why-item .t { font-size: .82rem; font-weight: 700; color: var(--cr-ink); }
.cr-why-item .s { font-size: .75rem; line-height: 1.45; color: var(--cr-muted); }

.cr-help-card { background: var(--cr-tint); border-color: transparent; }
.cr-help-card h3 { color: var(--cr-indigo-d); }
.cr-help-card p { font-size: .8rem; color: var(--cr-muted); margin: 0 0 .85rem; line-height: 1.5; }
.cr-help-btn {
  display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
  padding: .55rem 1rem; border-radius: 0; font-size: .82rem; font-weight: 650;
  background: var(--cr-card); border: 1px solid var(--cr-line); color: var(--cr-ink);
}
.cr-help-btn:hover { border-color: var(--cr-indigo); color: var(--cr-indigo-d); }
.cr-secure { display: flex; align-items: flex-start; gap: .5rem; font-size: .74rem; color: var(--cr-muted); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 991.98px) {
  .cr-hero { padding-bottom: 6rem; }
  .cr-wrap { margin-top: -4.5rem; }
}
@media (max-width: 767.98px) {
  /* Five type tiles do not fit; two columns keeps the labels readable rather than
     wrapping every one onto three lines. */
  .cr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-tiles.cr-tiles-3 { grid-template-columns: 1fr; }
  .cr-main { padding: 1.2rem 1.1rem 1.4rem; }
  .cr-hero { padding-bottom: 5rem; }
  .cr-wrap { margin-top: -3.5rem; }
}