/*
 * wholesale-account-queries.css
 * Page-scoped styles for /wholesale-account-queries
 * Generated from visual-preview.html — PAGE-WORKFLOW.md Phase 4 (Path B)
 */

/* ─── Edge-to-edge container override ──────────────────────────────────────
 * BC's body.html wraps non-home pages in <div class="container">.
 * Override so .aw-page sections span full viewport width.
 * ────────────────────────────────────────────────────────────────────────── */
.body > .container:has(> #wholesaleAccountQueries) {
  max-width: none;
  padding: 0;
  width: 100%;
}

/* Remove default theme padding/margin for this page */
.body:has(.container > #wholesaleAccountQueries) {
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: 0;
}

/* ─── CSS variables ─────────────────────────────────────────────────────── */
#wholesaleAccountQueries {
  --sage: #c5d7c1; --pale-sage: #e8efe6; --ink: #1a1a1a;
  --accent: #c5d7c1; --accent-deep: #6a9e66;
  --cta: #721313; --cta-dark: #501313;
  --mute: #5a5a5a; --line: #e6e2d8;
  --soft: #f5f3ee; --white: #ffffff; --pale-white: #f0ede7;
  --card-dark-bg: #1a1a1a;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
#wholesaleAccountQueries {
  margin: 0;
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  font-size: 16px;
}

#wholesaleAccountQueries h1,
#wholesaleAccountQueries h2,
#wholesaleAccountQueries h3,
#wholesaleAccountQueries h4 { text-transform: none; }

#wholesaleAccountQueries .container {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ─── Section headings ──────────────────────────────────────────────────── */
/* Specificity raised to beat #wholesaleAccountQueries h2 { text-transform: none } */
#wholesaleAccountQueries .waq-section-heading {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 10px;
  padding-top: 18px;
  position: relative;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.waq-section-heading::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--accent-deep);
}

.waq-section-sub {
  color: var(--mute);
  margin: 0 0 40px;
  max-width: 780px;
  font-size: 17px;
  line-height: 1.55;
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.waq-hero {
  background-image: url("https://cdn11.bigcommerce.com/s-xoo1uq/images/stencil/original/image-manager/pastel-banner-1.jpg?t=1742811362");
  background-size: cover;
  background-position: center 20%;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.waq-hero-box {
  background: rgba(255, 255, 255, 0.82);
  padding: 5px 30px;
  margin: 0 25px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
}

.waq-hero-box p { margin: 0; font-size: inherit; line-height: inherit; }

@media (max-width: 551px) {
  .waq-hero { height: 260px; }
  .waq-hero-box { font-size: 20px; padding: 5px 18px; }
}

/* ─── Features strip ────────────────────────────────────────────────────── */
.waq-features {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.waq-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); }

.waq-feature {
  padding: 32px 20px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.waq-feature:last-child { border-right: none; }

.waq-feature-icon {
  width: 38px; height: 38px;
  display: block;
  margin: 0 auto 12px;
  color: var(--ink);
}

.waq-feature-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  line-height: 1.3;
}

.waq-feature-desc { font-size: 13px; color: var(--mute); line-height: 1.4; }

@media (max-width: 801px) {
  .waq-features-grid { grid-template-columns: repeat(2, 1fr); }
  .waq-feature:nth-child(2) { border-right: none; }
  .waq-feature:nth-child(3),
  .waq-feature:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 551px) {
  .waq-features-grid { grid-template-columns: 1fr; }
  .waq-feature { border-right: none; border-top: 1px solid var(--line); padding: 24px 20px; }
  .waq-feature:first-child { border-top: none; }
}

/* ─── Signup + Benefits (aw-widget) ─────────────────────────────────────── */
.waq-signup {
  background: var(--soft);
  padding: 32px 0;
}

.aw-widget {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: 100%;
  font-family: "Montserrat", Arial, sans-serif;
  align-items: stretch;
}

/* Form side */
.aw-form-side {
  flex: 1 1 50%;
  background: #fff;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #e0e0e0;
  box-sizing: border-box;
}

.aw-form-top {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Specificity raised to beat #wholesaleAccountQueries h2 { text-transform: none } */
#wholesaleAccountQueries .aw-form-side h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.aw-form-side .aw-intro {
  font-size: 14px;
  color: #666;
  margin: 0 0 18px 0;
  line-height: 1.5;
}

.aw-trust-block {
  background: #f4f8f3;
  border: 1px solid #C5D7C1;
  border-radius: 5px;
  padding: 14px 16px;
  margin-bottom: 18px;
}

.aw-trust-block p {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin: 0 0 8px 0;
}

.aw-trust-block a {
  font-size: 13px;
  font-weight: 600;
  color: #6a9e66;
  text-decoration: none;
}

.aw-trust-block a:hover { text-decoration: underline; }

.aw-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.aw-form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.aw-form-group label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
}

.aw-form-group input,
.aw-form-group select {
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid #C5D7C1;
  border-radius: 5px;
  background: #fff;
  color: #1a1a1a;
  font-size: 14px;
  font-family: "Montserrat", Arial, sans-serif;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.aw-form-group input::placeholder { color: #bbb; }
.aw-form-group select option { color: #333; }

.aw-form-group input:focus,
.aw-form-group select:focus {
  border-color: #7a9e76;
  box-shadow: 0 0 0 3px rgba(197, 215, 193, 0.45);
  outline: none;
}

/* Newsletter checkbox */
.aw-form-group--checkbox {
  margin-top: 8px;
  margin-bottom: 8px;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
  flex-direction: column;
  gap: 0;
}

.aw-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: #555;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
}

.aw-checkbox-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.aw-checkbox-box {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 2px solid #C5D7C1;
  border-radius: 3px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}

.aw-checkbox-label:hover .aw-checkbox-box { border-color: #6a9e66; }

.aw-checkbox-label input[type="checkbox"]:checked + .aw-checkbox-box {
  background: #6a9e66;
  border-color: #6a9e66;
}

.aw-checkbox-label input[type="checkbox"]:checked + .aw-checkbox-box::after {
  content: "";
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.aw-checkbox-text { flex: 1; }

.aw-checkbox-helper {
  margin: 4px 0 0 27px;
  font-size: 11px;
  color: #999;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
}

.aw-submit-btn {
  width: 100%;
  height: 40px;
  background: #7a1a1a;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: auto;
  transition: background 0.15s;
}

.aw-submit-btn:hover { background: #611515; }
.aw-submit-btn:disabled { background: #ccc; cursor: not-allowed; }

/* Response message boxes */
.aw-message-box {
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-size: 14px;
  line-height: 1.6;
}

.aw-message-box.success  { background: #f0faf4; border: 1px solid #C5D7C1; color: #1a5c35; }
.aw-message-box.duplicate { background: #f0f4fa; border: 1px solid #b5cef4; color: #1a3a5c; }
.aw-message-box.error    { background: #fef6f0; border: 1px solid #f5c4a0; color: #7a3a10; }
.aw-message-box h3 { font-size: 15px; font-weight: 600; margin-bottom: 0.5rem; }
.aw-message-box p  { margin-bottom: 0.5rem; }
.aw-message-box p:last-child { margin-bottom: 0; }
.aw-message-box a  { font-weight: 600; }
.aw-message-box hr { border: none; border-top: 1px solid #C5D7C1; margin: 0; }

.aw-password-box {
  background: #fff;
  border: 1px solid #C5D7C1;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  font-family: monospace;
  font-size: 14px;
  color: #1a5c35;
  letter-spacing: 0.05em;
}

/* Right side */
.aw-right-side {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.aw-what-you-get {
  background: #fff;
  padding: 32px 32px 24px;
  flex-shrink: 0;
}

/* Specificity raised to beat #wholesaleAccountQueries h2 { text-transform: none } */
#wholesaleAccountQueries .aw-what-you-get h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.aw-benefit {
  margin-bottom: 0;
  padding: 20px 0;
  border-bottom: 1px solid #e8e8e8;
}

.aw-benefit:first-child { padding-top: 0; }
.aw-benefit:last-child  { border-bottom: none; padding-bottom: 0; }

/* Specificity raised to beat #wholesaleAccountQueries h3 { text-transform: none } */
#wholesaleAccountQueries .aw-benefit h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6a9e66;
  margin: 0 0 6px 0;
}

#wholesaleAccountQueries .aw-benefit p {
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  margin: 0;
}

.aw-terms-section {
  background: #C5D7C1;
  padding: 24px 32px 32px;
  flex-grow: 1;
}

.aw-terms-heading {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.aw-terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.aw-term-card {
  background: rgba(255, 255, 255, 0.45);
  border-radius: 5px;
  padding: 12px 14px;
}

.aw-term-label { font-size: 11px; color: #5a7a57; margin: 0 0 4px; }
.aw-term-val   { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 0; }

/* Responsive */
@media (max-width: 801px) {
  .aw-widget { flex-direction: column; }
  .aw-form-side { border-right: none; border-bottom: 1px solid #e0e0e0; padding: 28px 24px; justify-content: flex-start; }
  .aw-what-you-get { padding: 28px 24px 20px; }
  .aw-terms-section { padding: 18px 24px 28px; }
}

@media (max-width: 551px) {
  .aw-form-side { padding: 20px 18px; }
  .aw-what-you-get { padding: 20px 18px 16px; }
  .aw-terms-section { padding: 16px 18px 20px; }
  #wholesaleAccountQueries .aw-form-side h2,
  #wholesaleAccountQueries .aw-what-you-get h2 { font-size: 1.15rem; }
  .aw-terms-grid { grid-template-columns: 1fr; }
}

/* ─── Who can open ──────────────────────────────────────────────────────── */
.waq-who {
  background: var(--white);
  padding: 72px 0;
}

.waq-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.waq-card {
  padding: 24px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.waq-card:nth-child(4n)  { border-right: none; }
.waq-card:nth-child(n+5) { border-bottom: none; }
.waq-card--dark { background: var(--card-dark-bg); }

.waq-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.waq-card--dark .waq-card-title { color: var(--white); }
.waq-card-desc  { font-size: 13px; color: var(--mute); margin-bottom: 14px; line-height: 1.4; }
.waq-card--dark .waq-card-desc  { color: #cccccc; }
.waq-card-link  { font-size: 13px; font-weight: 700; color: var(--accent-deep); text-decoration: none; display: inline-block; }
.waq-card-link:hover { text-decoration: underline; }
.waq-card--dark .waq-card-link  { color: var(--white); }

@media (max-width: 801px) {
  .waq-who { padding: 48px 0; }
  .waq-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .waq-card:nth-child(4n)  { border-right: 1px solid var(--line); }
  .waq-card:nth-child(n+5) { border-bottom: 1px solid var(--line); }
  .waq-card:nth-child(2n)  { border-right: none; }
  .waq-card:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 551px) {
  .waq-cards-grid { grid-template-columns: 1fr; }
  .waq-card { border-right: none; }
  .waq-card:last-child { border-bottom: none; }
}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.waq-faq {
  background: var(--soft);
  padding: 72px 0;
}

.waq-faq-list {
  max-width: 780px;
  margin: 40px 0 0;
}

.waq-faq-item { border-bottom: 1px solid var(--line); }
.waq-faq-item:first-child { border-top: 1px solid var(--line); }

.waq-faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 48px 20px 0;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  position: relative;
  display: block;
  line-height: 1.4;
}

.waq-faq-question::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  color: var(--accent-deep);
  line-height: 1;
}

.waq-faq-question[aria-expanded="true"]::after { content: "\2212"; }

.waq-faq-answer {
  padding: 0 48px 20px 0;
  font-size: 15px;
  color: var(--mute);
  line-height: 1.6;
}

.waq-faq-answer a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; }

@media (max-width: 801px) {
  .waq-faq { padding: 48px 0; }
}