/* AVIDE Services: professional-services intake form. Navy/gold accents, theme-agnostic. */

.avide-services-form { margin: 1.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid #d9dee8; border-radius: 10px; background: #f7f9fc; }
.avide-services-form input[type="text"],
.avide-services-form input[type="email"],
.avide-services-form input[type="tel"],
.avide-services-form select,
.avide-services-form textarea { width: 100%; max-width: 30rem; padding: 0.45rem 0.6rem; border: 1px solid #b9c2d4; border-radius: 4px; }
/* The long free-text answers take the whole form. A 30rem cap is right for a
   name or a phone number and far too narrow for a paragraph: it made the
   brief a tall thin well beside a wide empty margin. */
.avide-services-form textarea { max-width: 100%; }
.avide-services-form p { margin: 0.6rem 0; }
.avide-services-btn { display: inline-block; padding: 0.6rem 1.6rem; border: 0; border-radius: 4px; background: var(--brand-highlight, #FCB415); color: #131f3a; font-weight: 700; cursor: pointer; }
.avide-services-btn:hover { filter: brightness(1.06); }
.avide-services-notice { padding: 0.6rem 0.9rem; border-radius: 4px; background: #e6f4e6; border: 1px solid #9ec89e; }
.avide-services-notice.is-err { background: #fbeaea; border-color: #d6a0a0; }
.avide-services-hp { position: absolute !important; left: -9999px !important; }
.avide-services-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0.9rem; }
.avide-services-quickbtn { padding: 0.35rem 0.9rem; border: 1px solid #b9c2d4; border-radius: 999px; background: #fff; color: #131f3a; font-weight: 600; cursor: pointer; }
.avide-services-quickbtn:hover { background: var(--brand-highlight, #FCB415); border-color: var(--brand-highlight, #FCB415); }

/* Two-column layout for the short fields: halves the form height on a desktop
   screen and folds back to one column on a phone. Mobile-first, so the phone
   case is the default and needs no min-width guess: one column, full width,
   no track floor that could force a horizontal scroll on a 320px screen. The
   second column arrives only above 40em, and the count is fixed at two rather
   than auto-fit, which would otherwise reach three columns past ~1200px and
   scatter the label/field pairs. The grid also overrides the 30rem input cap
   so each control fills its own column. */
.avide-services-grid { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.25rem; }
@media (min-width: 40em) { .avide-services-grid { grid-template-columns: 1fr 1fr; } }
.avide-services-grid p { margin: 0.35rem 0; }
.avide-services-grid input,
.avide-services-grid select { max-width: 100%; }

/* Phone: reclaim the horizontal room the card padding takes, and give the
   controls a 44px touch target (WCAG 2.5.8 / iOS auto-zoom needs >= 16px). */
@media (max-width: 480px) {
  .avide-services-form { padding: 1rem 0.9rem; }
  .avide-services-form input[type="text"],
  .avide-services-form input[type="email"],
  .avide-services-form input[type="tel"],
  .avide-services-form input[type="number"],
  .avide-services-form select,
  .avide-services-form textarea { font-size: 1rem; min-height: 44px; }
  .avide-services-form textarea { min-height: 7rem; }
  .avide-services-btn { width: 100%; min-height: 44px; }
}

/* Catalogue cards ([avide_services_catalogue]).
   Mobile-first: one column by default, so a 320px screen needs no min-width
   guess and cannot scroll sideways. Cards stretch to equal height in a row and
   pin their button to the bottom, so a short card and a long one still line
   their buttons up. */
.avide-cat { margin: 0 0 2rem; }
.avide-cat__intro { max-width: 44rem; }
.avide-cat__boardnote { max-width: 44rem; padding: 0.6rem 0.9rem; border-radius: 4px; background: #fff6e0; border: 1px solid #e0c25a; }

/* Two columns, which is what a card of this shape wants: the thumbnail and
   the heading sit side by side, so a third column would squeeze the title to
   two words a line. One column on a phone. */
.avide-cat__grid { display: grid; grid-template-columns: 1fr; gap: 0.9rem; margin-top: 1.2rem; }
@media (min-width: 44em) { .avide-cat__grid { grid-template-columns: 1fr 1fr; } }

.avide-cat__card { display: grid; grid-template-columns: 76px 1fr; gap: 0 0.9rem; align-content: start; padding: 0.85rem 1rem 0.95rem; border: 1px solid #b9c2d4; border-radius: 8px; background: #fff; }
.avide-cat__card h3 { margin: 0 0 0.15rem; font-size: 1rem; line-height: 1.3; }

/* The illustration is a thumbnail beside the heading, not a banner above it.
   As a banner it took more vertical space than everything it introduced, and
   seven of them turned the listing into a scroll. */
.avide-cat__media { grid-row: span 2; width: 76px; height: 76px; overflow: hidden; border-radius: 6px; background: #f4f6fa; }
.avide-cat__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avide-cat__card > .avide-cat__text { grid-column: 2; }
/* No image: the text spans both tracks rather than leaving a hole. */
.avide-cat__card > .avide-cat__text:first-child { grid-column: 1 / -1; }

.avide-cat__text { display: flex; flex-direction: column; }
.avide-cat__draft { align-self: flex-start; margin-bottom: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #b23b3b; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; }

/* A draft must be unmistakable at a glance in a meeting, so it gets both a
   red badge and a dashed edge: colour alone would fail a colour-blind reader
   and a printed agenda. */
.avide-cat__card.is-draft { border-style: dashed; border-color: #d09b9b; background: #fffbfb; }

/* The price is the thing the reader came for, so it stops looking like the
   sentence above it: the figure carries the weight and the unit trails it in
   a lighter, smaller face, the way a price is set in print. */
.avide-cat__price { display: inline-flex; align-items: baseline; gap: 0.15rem; margin: 0 0 0.45rem; padding: 0.1rem 0.5rem; border-radius: 4px; background: #f2f5fa; font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: #1b2a4d; }
.avide-cat__price .avide-price__unit,
.avide-cat__price .avide-price__from { font-size: 0.8rem; font-weight: 600; color: #5a6480; }
.avide-cat__summary { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.45; color: #4a5268; }

.avide-cat__detail { align-self: flex-start; margin-top: auto; font-size: 0.88rem; font-weight: 600; color: #2f4b8a; text-decoration: none; }
.avide-cat__detail:hover { text-decoration: underline; }

.avide-cat__btn { display: inline-block; margin-top: 0.55rem; padding: 0.45rem 1rem; border-radius: 4px; background: var(--brand-highlight, #FCB415); color: #131f3a; font-weight: 700; font-size: 0.9rem; text-align: center; text-decoration: none; }
.avide-cat__btn:hover { filter: brightness(1.06); }
.avide-cat__btn.is-disabled { background: #eef0f4; color: #7b8296; cursor: not-allowed; }
.avide-cat__btn.is-disabled:hover { filter: none; }

@media (max-width: 480px) {
  .avide-cat__card { grid-template-columns: 60px 1fr; padding: 0.8rem 0.85rem 0.9rem; }
  .avide-cat__media { width: 60px; height: 60px; }
  .avide-cat__btn { min-height: 44px; line-height: 2.1; }
}

/* ------------------------------------------------------------------
   A service's own page
   ------------------------------------------------------------------ */
/* No max-width of its own: the theme already gives .entry-content.prose a
   840px measure and centres it. A second, narrower cap nested inside that one
   made the column both too narrow and off-centre against everything else on
   the site. */
.avide-svc-detail { max-width: 100%; }
.avide-svc-detail__back { margin: 0 0 1rem; font-size: 0.9rem; }
.avide-svc-detail__draft { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px dashed #d09b9b; border-radius: 6px; background: #fffbfb; font-size: 0.92rem; }
.avide-svc-detail__head { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; margin: 1.2rem 0 1.6rem; }
.avide-svc-detail__media { flex: 0 0 auto; width: 140px; overflow: hidden; border-radius: 8px; background: #f4f6fa; }
.avide-svc-detail__media img { display: block; width: 100%; height: auto; }
.avide-svc-detail__facts { flex: 1 1 16rem; }
.avide-svc-detail__price { display: inline-flex; align-items: baseline; gap: 0.2rem; margin: 0 0 0.35rem; padding: 0.2rem 0.7rem; border-radius: 6px; background: #f2f5fa; font-size: 1.6rem; font-weight: 800; line-height: 1.4; color: #1b2a4d; }
.avide-svc-detail__price .avide-price__unit,
.avide-svc-detail__price .avide-price__from { font-size: 0.95rem; font-weight: 600; color: #5a6480; }
.avide-svc-detail__answer { margin: 0 0 0.8rem; font-size: 0.92rem; color: #4a5268; }
.avide-svc-detail__body { font-size: 1rem; line-height: 1.6; }
.avide-svc-detail h2 { margin: 1.8rem 0 0.6rem; font-size: 1.2rem; }
.avide-svc-detail__docs { padding-left: 1.2rem; }
.avide-svc-detail__docs li { margin: 0.2rem 0; }

.avide-svc-detail__faq details { border-bottom: 1px solid #e6e9f0; }
.avide-svc-detail__faq details:first-child { border-top: 1px solid #e6e9f0; }
.avide-svc-detail__faq summary { padding: 0.75rem 0 0.75rem 1.4rem; font-weight: 600; cursor: pointer; list-style: none; position: relative; }
.avide-svc-detail__faq summary::-webkit-details-marker { display: none; }
.avide-svc-detail__faq summary::before { content: "\25B8"; position: absolute; left: 0.2rem; transition: transform 0.15s ease; }
.avide-svc-detail__faq details[open] summary::before { transform: rotate(90deg); }
.avide-svc-detail__faq details > div { padding: 0 0 0.8rem 1.4rem; font-size: 0.95rem; }
.avide-svc-detail__faq p { margin: 0 0 0.6rem; }

@media (max-width: 480px) {
  .avide-svc-detail__media { width: 96px; }
  .avide-svc-detail__price { font-size: 1.2rem; }
  .avide-svc-detail__faq summary { min-height: 44px; }
}

/* The selection list. Its look deliberately does not borrow shop conventions
   (no basket icon, no running total): it is a list of what the request will
   ask for, and no money moves until the board accepts. */
.avide-cat-picked { margin: 0 0 1.2rem; padding: 0.8rem 1rem; border: 1px solid #9ec89e; border-radius: 6px; background: #f2f8f2; }
.avide-cat-picked__heading { margin: 0 0 0.5rem; font-size: 1rem; }
.avide-cat-picked__list { margin: 0; padding: 0; list-style: none; }
.avide-cat-picked__list li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0; border-top: 1px solid #d5e5d5; }
.avide-cat-picked__list li:first-child { border-top: 0; }
.avide-cat-picked__remove { padding: 0.25rem 0.7rem; min-height: 32px; border: 1px solid #b9c2d4; border-radius: 999px; background: #fff; color: #131f3a; font-size: 0.85rem; cursor: pointer; }
.avide-cat-picked__remove:hover { border-color: #b23b3b; color: #b23b3b; }

/* A chosen card says so, so a second click is not a silent no-op. */
.avide-cat__btn.is-picked { background: #2f6b3a; color: #fff; }

/* The count beside the Dịch vụ link in the site menu, when the menu has one. */
.avide-cat-count { display: inline-block; min-width: 1.35em; margin-left: 0.35em; padding: 0 0.35em; border-radius: 999px; background: var(--brand-highlight, #FCB415); color: #131f3a; font-size: 0.75em; font-weight: 700; line-height: 1.5; text-align: center; }
.avide-cat-picked__empty { margin: 0; font-size: 0.92rem; }

.avide-services-uploads { margin-top: 1rem; }
.avide-services-uploads input[type="file"] { display: block; margin-top: 0.3rem; max-width: 100%; }
.avide-services-hint { display: block; margin-top: 0.35rem; font-size: 0.87rem; color: #4a5268; }
.avide-cat-picked__docs-label { margin: 0.3rem 0 0.1rem; font-size: 0.85rem; font-weight: 600; }
.avide-cat-picked__docs { margin: 0 0 0.2rem; padding-left: 1.1rem; font-size: 0.85rem; color: #4a5268; }
.avide-cat-picked__list li { flex-wrap: wrap; }
.avide-cat-picked__item { flex: 1 1 60%; }

/* Audience, shown to the board only. Amber, not the draft red: a published
   members-only service is a deliberate state, not an unfinished one. */
.avide-cat__audience { align-self: flex-start; margin-bottom: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: #8a6d1f; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; }

/* The pay-what-you-can band. The number field is the real control and is
   always present; the slider is added by script and sits above it. */
.avide-svc-amount { margin: 1.2rem 0; padding: 0.9rem 1rem; border: 1px solid #9ec89e; border-radius: 6px; background: #f2f8f2; }
.avide-svc-amount__note { margin: 0.3rem 0 0.7rem; font-size: 0.9rem; color: #4a5268; }
.avide-svc-amount__row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.avide-svc-amount__bound { font-size: 0.8rem; color: #6a7288; font-variant-numeric: tabular-nums; }
.avide-svc-amount__field { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.avide-svc-amount__field input[type="number"] { width: 6.5rem; max-width: 6.5rem; font-size: 1.15rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.avide-svc-amount__unit { font-size: 0.9rem; font-weight: 600; color: #4a5268; }
.avide-svc-amount__range { width: 100%; margin: 0 0 0.6rem; accent-color: var(--brand-accent, #EF3E23); }
@media (max-width: 480px) {
  .avide-svc-amount__field input[type="number"] { min-height: 44px; }
}