/* ============================================================
   ENQUIRY-LIST.CSS — Arihant Fabrics
   Role: the Enquiry List page (/enquiry-list) — decisions log section E.
   Page layout, title block, the list of designs (rows, quantity + unit,
   remove), Undo messages, empty states, the "Send your enquiry" panel,
   the form, the "Sent your enquiry?" prompt, and the bottom bar on phones / tablets.
   Depends on: base.css (tokens), layout.css, components.css
   ============================================================ */

/* ── Page layout ── */
.el-wrap {
  max-width: calc(var(--max-width) + 2 * var(--page-padding-inline));
  margin: 0 auto;
  padding: 32px var(--page-padding-inline) 64px;
}

/* Title block: gold left bar as on the About / Contact heroes (E-85); no eyebrow, no
   subheading; the site's standard page-title size so it does not compete with the list (I-1). */
.el-head { border-left: 3px solid var(--color-gold); padding-left: 20px; margin-bottom: 20px; }
.el-title { font-size: var(--font-size-h1); line-height: 1.2; }
.el-count {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 0; font-size: 13px; color: rgba(10,37,117,.72);
}
.el-count[hidden], .el-count__sep[hidden], .el-clear[hidden], .el-full[hidden] { display: none; }
.el-full { color: rgba(10,37,117,.85); font-weight: 600; }
.el-clear {
  margin: 0; padding: 0 2px; min-height: 32px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--color-navy);
  text-decoration: underline; text-underline-offset: 2px;
}

.el-grid { display: block; }
.el-panel { margin-top: 32px; }
.el-panel[hidden] { display: none; }
@media (min-width: 1024px) {
  /* list on the left, the send panel pinned on the right */
  .el-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
  .el-panel { margin-top: 0; position: sticky; top: calc(var(--header-height) + 24px); }
  /* with nothing to send, the page is one centred column (E-63) */
  .list-empty .el-grid { display: block; }
}

/* ── The list ── */
.el-list { list-style: none; margin: 0; padding: 0; }
.el-row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(10,37,117,.08); }
.el-row:last-child { border-bottom: 1px solid rgba(10,37,117,.08); }

/* Thumbnail 3:4. If the photo will not load, the plain light tile stays — same size, no broken-image icon. */
.el-thumb { display: block; flex-shrink: 0; width: 84px; height: 112px; border-radius: 8px; overflow: hidden; background: #f4f3ee; }
.el-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Details: top-aligned with the thumbnail; the quantity control's bottom edge = the thumbnail's bottom edge. */
.el-body { flex: 1; min-width: 0; height: 112px; display: flex; flex-direction: column; justify-content: space-between; }
.el-top { display: flex; gap: 12px; align-items: flex-start; }
.el-info { flex: 1; min-width: 0; }
.el-eyebrow { margin: 0; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(10,37,117,.8); }
/* Long names are cut with "…" (full name: tooltip here, and the design's own page) */
.el-name {
  display: block; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 28px;
  color: var(--color-navy); text-decoration: none;
}
a.el-name:hover { color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.el-meta { display: flex; margin: 4px 0 0; font-size: 12px; line-height: 16px; color: rgba(10,37,117,.72); white-space: nowrap; }
.el-meta__cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* the category shortens… */
.el-meta__id { flex-shrink: 0; }                                              /* …the Design No. never does */

/* Remove: a quiet bin icon in a 36px tap area (accepted size); a light square appears on hover / focus (H3-7) */
.el-remove {
  flex-shrink: 0; width: 36px; height: 36px; margin: 0; padding: 0; border: none; border-radius: 8px;
  background: transparent; color: #54669e; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.el-remove:hover, .el-remove:focus-visible { background: #f4f3ee; color: var(--color-navy); }
.el-remove svg { display: block; width: 20px; height: 20px; }

/* Quantity + unit — one control (H3-7 "refined, corners"): 36px, 1px border in navy-50% (#8492ba), navy on focus.
   12px text is Aaditya's accepted choice (E; iPhones zoom slightly on focus below 16px). */
.el-qty {
  display: flex; align-items: stretch; height: 36px; overflow: hidden;
  border: 1px solid #8492ba; border-radius: 8px; background: var(--color-white);
}
.el-qty:focus-within { border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(238,204,26,.9); }   /* the focus ring for both inner fields */
.el-qty input {
  flex: 1; min-width: 0; margin: 0; padding: 0 4px 0 11px; border: none; background: transparent; outline: none;
  font-family: var(--font-body); font-size: 12px; color: var(--color-navy);
}
.el-qty input::placeholder { color: rgba(10,37,117,.75); opacity: 1; }
.el-qty__unit { position: relative; flex-shrink: 0; display: flex; align-items: center; border-left: 1px solid #8492ba; }
.el-qty select {
  -webkit-appearance: none; appearance: none; height: 100%; margin: 0; padding: 0 26px 0 10px;
  border: none; background: transparent; outline: none; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-navy);
}
.el-qty__chev { position: absolute; right: 11px; top: 50%; width: 10px; height: 10px; margin-top: -5px; pointer-events: none; }

@media (min-width: 768px) {
  .el-row { gap: 20px; }
  .el-thumb { width: 96px; height: 128px; }
  .el-body { height: 128px; }
  .el-remove svg { width: 18px; height: 18px; }
  .el-qty { width: 300px; max-width: 100%; }
  .el-bottom { padding-right: 48px; }   /* the field sits under the details only — not under the remove button (36px + 12px) */
}

/* ── Undo (E-51 to E-56): "Your list was cleared." above the list; "[name] removed" in the design's place.
   No timer — it stays until the buyer's next action. ── */
.el-cleared {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 16px; background: #f4f3ee; border-radius: 8px;
}
.el-cleared[hidden] { display: none; }
.el-cleared p { margin: 0; font-size: 14px; color: var(--color-navy); }
.el-undo-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 72px;
  padding: 16px 0; border-top: 1px solid rgba(10,37,117,.08);
}
.el-undo-row:last-child { border-bottom: 1px solid rgba(10,37,117,.08); }
.el-undo-row p { margin: 0; font-size: 14px; color: rgba(10,37,117,.85); }
.el-undo-row b { font-weight: 600; color: var(--color-navy); }
/* compact button (button system H3-11: 38px / 12px, 8px corners, 1px outline, Inter 500) */
.el-undo-btn {
  height: 38px; min-height: 38px; margin: 0; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--color-navy); border-radius: 8px; background: var(--color-white);
  font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-navy);
}
.el-clear:focus-visible, .el-undo-btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* ── Empty list (E-60), browser not saving (E-71) ── */
.el-empty { max-width: 520px; margin: 0 auto; padding: 40px 16px 48px; text-align: center; }
.el-empty[hidden] { display: none; }
.el-empty__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%;
  background: #f4f3ee; color: #7382ab;   /* a SOLID colour (= navy 55% on this circle): see-through lines darken where they overlap (E-64) */
}
.el-empty__icon svg { display: block; width: 40px; height: 40px; }
.el-empty__h { margin: 20px 0 0; font-size: 24px; line-height: 30px; }
.el-empty__p { max-width: 44ch; margin: 10px auto 0; font-size: 15px; line-height: 1.6; color: rgba(10,37,117,.8); }
/* standard button (H3-11: 44px / 14px, 8px corners, Inter 500, sentence case) */
.el-empty__cta {
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 44px;
  margin-top: 24px; padding: 0 24px; white-space: nowrap; border-radius: 8px;
  background: var(--color-navy); color: var(--color-white); font-size: 14px; font-weight: 500; text-decoration: none;
}
.el-empty__cta:hover { background: var(--color-navy-dark); color: var(--color-white); text-decoration: none; }
.el-empty__cta:focus-visible, .el-empty__alt a:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.el-empty__alt { margin: 18px 0 0; font-size: 13px; color: rgba(10,37,117,.75); }
.el-empty__alt a { color: var(--color-navy); font-weight: 600; text-underline-offset: 2px; }

/* ── JavaScript switched off (E-84) ── */
.el-noscript { margin: 8px 0 24px; padding: 14px 16px; background: #f4f3ee; border-radius: 8px; font-size: 14px; color: var(--color-navy); }

/* On the narrowest phones the placeholder "Quantity (optional)" fits with no room to spare,
   so the unit part gives up 4px there (the fit was failing by a fraction of a pixel on Windows). */
@media (max-width: 359px) {
  .el-qty select { padding: 0 24px 0 8px; }
  .el-qty__chev { right: 9px; }
}

/* ── "Send your enquiry" panel (E-20 to E-36) ── */
.el-send { position: relative; padding: 24px; background: #f4f3ee; border-radius: 12px; }
@media (min-width: 1024px) {
  /* never taller than the window: if its content does not fit, the panel scrolls inside itself (E-28) */
  .el-send {
    max-height: calc(100vh - var(--header-height) - 48px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(10,37,117,.28) transparent;
  }
}
.el-send__h { margin: 0; font-size: 22px; line-height: 28px; }
.el-send__cue { margin: 6px 0 18px; font-size: 13px; line-height: 1.5; color: rgba(10,37,117,.8); }

/* The two ways to send — standard buttons (H3-11: 44px / 14px, 8px corners, Inter 500, sentence case) */
.el-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 8px; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;   /* same padding on links and buttons, so two side by side are equally wide */
}
.el-btn__ic { display: block; flex-shrink: 0; }
.el-btn:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
/* WhatsApp: its own bright green with navy text (6.9:1 — E-29) */
.el-btn--wa { border: 1px solid #25d366; background: #25d366; color: var(--color-navy); }   /* a border in its own colour: same box as the outlined Form button, so the two are equally wide in the bar */
.el-btn--wa:hover { color: var(--color-navy); text-decoration: none; filter: brightness(.94); }
/* Form: outlined; when open it is tinted, never solid — so it cannot be mistaken for the WhatsApp button (E-24) */
.el-btn--form { background: transparent; border: 1px solid var(--color-navy); color: var(--color-navy); }
.el-btn--form:hover { background: var(--color-navy); color: var(--color-white); }
.el-btn--form[aria-expanded="true"] { background: rgba(10,37,117,.08); }
.el-btn--form[aria-expanded="true"]:hover { background: var(--color-navy); color: var(--color-white); }
/* More than 20 designs in the list (L-44): the line under the heading says what to do, and both ways
   to send are unavailable until the list is back to 20. They stay reachable by keyboard, so the reason is read out. */
.el-send__cue.is-limit { font-weight: 600; color: var(--color-navy); }
.el-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.el-btn--wa[aria-disabled="true"]:hover { filter: none; }
.el-btn--form[aria-disabled="true"]:hover { background: transparent; color: var(--color-navy); }
.el-bar__limit { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--color-navy); }
.el-bar__limit[hidden] { display: none; }
.el-hint { margin: 6px 0 14px; font-size: 12px; line-height: 1.4; text-align: center; color: rgba(10,37,117,.72); }
.el-formwrap { margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(10,37,117,.12); }
.el-formwrap[hidden] { display: none; }

/* ── "Sent your enquiry?" prompt (E-40 to E-49): a gold-tinted banner (E-46) ── */
.el-prompt-slot { margin-bottom: 18px; }
.el-prompt-slot[hidden], .el-bar__prompt[hidden] { display: none; }
.el-prompt {
  padding: 12px 14px; background: #fbf5d6;
  border: 1px solid var(--color-gold); border-left-width: 3px; border-radius: 0 8px 8px 0;
}
.el-prompt p { margin: 0; font-size: 13px; color: var(--color-navy); }
.el-prompt .el-prompt__q { font-weight: 600; }
.el-prompt .el-prompt__sub { margin-top: 2px; }
.el-prompt__row { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
/* compact button (H3-11), as the Undo buttons */
.el-prompt__clear {
  height: 38px; min-height: 38px; margin: 0; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--color-navy); border-radius: 8px; background: var(--color-white);
  font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--color-navy);
}
.el-prompt__keep {
  min-height: 36px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--color-navy);
  text-decoration: underline; text-underline-offset: 2px;
}
.el-prompt__clear:focus-visible, .el-prompt__keep:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* ── Bottom bar — phones and tablets only (E-30): both send buttons, always within reach while the buyer
   is in the list. Hidden while the send panel itself is on screen or has been scrolled past, while a
   field is being typed in (H3-3), and when the list is empty. Shows the prompt instead of the buttons
   when there is a question to answer (E-45), and the "up to 20 designs" line instead of the buttons
   when the list holds more than 20 (L-44). ── */
.el-bar { display: none; }
@media (max-width: 1023px) {
  .el-wrap { padding-bottom: 96px; }                 /* room for the bar under the last row */
  .el-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px var(--page-padding-inline) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-white); border-top: 1px solid rgba(10,37,117,.08); box-shadow: 0 -4px 16px rgba(10,37,117,.06);
  }
  .el-bar__btn { flex: 1; }
  .el-bar.has-prompt, .el-bar.has-limit { display: block; }
  .el-bar.has-prompt .el-bar__btn, .el-bar.has-limit .el-bar__btn { display: none; }
  .el-bar.has-prompt.has-limit .el-bar__limit { margin-bottom: 10px; }
  .el-bar.is-hidden, .el-bar.has-prompt.is-hidden, .is-typing .el-bar { display: none; }
}

/* ── The form inside the panel (E-22 to E-36): the live enquiry form's fields and messages,
   fitted to the panel's width. Shared form styles: see the SHARED FORM STYLES part. ── */
.el-form .form-group { margin-bottom: 14px; }
/* "Your enquiry": a read-only preview of exactly what is sent (E-33) */
.el-form .form-group > textarea.el-preview {
  min-height: 0; resize: none; cursor: default; font-size: 13px; line-height: 1.5;
  color: rgba(10,37,117,.85); background: rgba(10,37,117,.04); border: 1px dashed rgba(10,37,117,.28);
}
.el-form .form-group > textarea.el-preview:focus { border-color: rgba(10,37,117,.45); }
.el-preview-note { margin: 4px 0 0; font-size: 11px; color: rgba(10,37,117,.72); }
/* bot trap: off-screen, out of the keyboard order, hidden from screen readers */
.el-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Send button: as wide as the fields, text centred; note and error box aligned with the fields (E-34, E-36) */
.el-form .cta-form-footer { display: block; padding: 4px 0 0; }
.el-form .cta-submit { display: flex; width: 100%; justify-content: center; }
.el-form .cta-form-note { margin: 8px 0 0; text-align: left; }
.el-form .form-submit-error { margin: 0 0 12px; }
/* notice at the point of collection (F-07): the shared .cta-form-privacy, a little further from the note */
.el-form .cta-form-privacy { margin: 6px 0 0; }

/* ── After sending: "Enquiry received", the question, "Send another enquiry" (E-42 to E-44) ── */
.el-sent { margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(10,37,117,.12); }
.el-sent[hidden] { display: none; }
.el-sent .el-prompt { margin-top: 14px; }
.el-sent__again {
  display: inline-block; min-height: 32px; margin: 12px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; color: var(--color-navy); text-decoration: underline; text-underline-offset: 2px;
}
.el-sent__again:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }