/*
 * Marketing-site additions that aren't part of the vendored Astro CSS
 * bundles. Loaded after index.*.css on every marketing page, unscoped on
 * purpose, and kept small.
 */

/* F-09: quote wizard review step. Rows are generated by JS, so the scoped
   styles now apply via the data-astro-cid attribute the script adds. This
   only enlarges the Edit control to a comfortable tap target. */
.review-list .review-edit {
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  min-width: 44px;
  padding: 0 .5rem;
  border-radius: var(--radius-sm, 3px);
}
.review-list .review-edit { align-self: center; }
.review-list .review-edit:focus-visible {
  outline: 3px solid var(--teal-500, #1f8d80);
  outline-offset: 2px;
}

/* Truthful state art under the wizard status line (draft prepared / copied). */
.wizard-state-art {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3, 1rem);
}
.wizard-state-art[hidden] { display: none; }
.wizard-state-art img { width: 160px; height: auto; }

/* F-14: "several.com.bd" link in the footer: readable on navy (4.5:1+). */
.site-footer .footer-group-link {
  color: #7dd5c6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .footer-group-link:hover,
.site-footer .footer-group-link:focus-visible { color: #faf8f3; }

/* How It Works: animated step art (motion pack), replaces the 28px glyphs. */
.step-motion {
  display: block;
  width: 96px;
  height: 72px;
  margin-bottom: var(--space-2, .75rem);
}

/* Service pages: small animated accent beside the page intro. */
.service-accent {
  display: block;
  width: 120px;
  height: 90px;
  margin-bottom: var(--space-3, 1rem);
}
.support-accent {
  display: block;
  width: 96px;
  height: 72px;
  margin-bottom: var(--space-2, .75rem);
}

/* ---- Stage 1: quote wizard sends requests to PMESC directly ---- */

/* The hidden attribute must win over component display rules (.btn etc.). */
[hidden] { display: none !important; }

/* Honeypot: invisible to people (and to screen readers), filled by bots. */
.hp-field {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-block--server { margin-bottom: var(--space-5, 2rem); }
.submit-status { min-height: 1.4em; font-weight: 600; margin: var(--space-2, .75rem) 0 0; }
.submit-status--busy { color: var(--color-text-secondary, #2f5d8a); }
.submit-status--error { color: var(--status-error-text, #b3261e); }
.submit-status--error::before { content: "! " / ""; font-weight: 800; }
#submit-request-btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.fallback-heading {
  font-size: var(--fs-500, 1.25rem);
  margin: var(--space-4, 1.5rem) 0 var(--space-2, .75rem);
  padding-top: var(--space-4, 1.5rem);
  border-top: 1px solid var(--color-border, #e3e7ec);
}

/* Confirmation after a request is saved. */
.quote-confirmation {
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e3e7ec);
  border-top: 4px solid var(--color-success, #3a9b68);
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-5, 2rem);
  text-align: left;
}
.quote-confirmation[hidden] { display: none; }
.quote-confirmation .confirm-art { display: block; width: 180px; height: auto; margin: 0 0 var(--space-3, 1rem); }
.quote-confirmation h2 { margin-bottom: var(--space-3, 1rem); }
.quote-confirmation h2:focus { outline: none; }
.confirm-ref-label { margin: 0; font-weight: 600; color: var(--color-text-secondary, #2f5d8a); }
.confirm-ref {
  display: inline-block;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--color-primary, #123b5d);
  background: var(--color-highlight, #d5f2a3);
  padding: .1em .45em;
  border-radius: var(--radius-md, 5px);
  margin: .2em 0 var(--space-3, 1rem);
  user-select: all;
}
.confirm-steps { padding-left: 1.3em; margin: 0 0 var(--space-4, 1.5rem); }
.confirm-steps li { margin-bottom: .35em; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2, .75rem); margin-bottom: var(--space-3, 1rem); }
.confirm-actions .btn[hidden] { display: none; }
.confirm-keep { font-size: var(--fs-300, .95rem); color: var(--color-text-secondary, #2f5d8a); margin: 0; }
/* In server mode the email options are a fallback under their own heading. */
.fallback-heading + .submit-block { border-top: 0; margin-top: 0; padding-top: 0; }
.quote-confirmation h3 { font-size: var(--fs-500, 1.25rem); margin: var(--space-4, 1.5rem) 0 var(--space-2, .75rem); }

/* Stage 1 visuals: service explainer scenes (rows 21-23) and the quote intro scene (row 17). */
.service-scene {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: var(--space-5, 2rem);
  align-items: center;
}
.service-scene img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg, 8px); }
@media (max-width: 767px) {
  .service-scene { grid-template-columns: 1fr; }
  .service-scene img { max-width: 420px; }
}
.quote-banner .wrap { position: relative; }
.quote-banner-scene { display: none; }
@media (min-width: 1100px) {
  .quote-banner-scene {
    display: block;
    position: absolute;
    right: var(--space-4, 1.5rem);
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    height: auto;
    border-radius: var(--radius-lg, 8px);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
  }
  .quote-banner-scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 1100px) {
  .quote-banner .wrap > :not(.quote-banner-scene) { max-width: calc(100% - 400px) !important; }
}
/* Row 28: small line icons beside quote-form labels (decorative). */
.field label .field-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--color-secondary, #2f5d8a); stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Stage 4.2: notice banner (home page and news page) */
.notice-banner { background: #e9f0fc; border-bottom: 1px solid #c9d8f2; }
.notice-banner--important { background: #f5e2ee; border-bottom-color: #e7bfd6; }
.notice-banner-inner { display: flex; flex-wrap: wrap; gap: .75em; align-items: center; padding-block: .7rem; }
.notice-banner-tag { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3d5d97; }
.notice-banner--important .notice-banner-tag { color: #9c2a70; }
.notice-banner a { color: #123b5d; font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }