/*
 * replica-pages.css - area F (static-pages): /pages/*, /pages/contact, /policies/*, 404.
 * Loaded by templates/layout.html after the Horizon theme CSS (DESIGN-PHASE.md, "CSS contract").
 *
 * The structure of these pages comes from the theme classes copied from the live DOM (section, page-width-content,
 * spacing-style, layout-panel-flex, text-block, contact-form, resource-list...), so base.css / styles.css style them.
 * This file only holds what the theme bundle does not:
 *   1. the storefront policy stylesheet Shopify serves on /policies/* (policy-0e156355.css, outside the theme),
 *   2. a block display for <rte-formatter> inside the page-content block (the theme styles it only through JS),
 *   3. the contact-form error/success rows (theme block stylesheet, kept here as a safety net) and their icon size,
 *   4. the replica-only fallbacks of FAQ (Chatty app) and Your Privacy Choices (opt-out form); Track Your Order
 *      (17TRACK) needs no CSS of its own, its notice goes into the live #ubt-msg slot.
 */

/* 1. Shopify storefront policy stylesheet (verbatim). base.css adds padding-block: var(--padding-xl) to the container. */
.shopify-policy__container {
  max-width: 560px;
  max-width: 65ch;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

.shopify-policy__title {
  text-align: center;
}

.shopify-policy__remote-policy-heading-wrapper {
  text-align: center;
}

.shopify-policy__remote-policy-heading-wrapper h1 {
  margin-bottom: 20px;
}

.shopify-policy__remote-policy-body {
  margin-bottom: 20px;
}

/* <main> is a flex column; a flex item with inline auto margins does not stretch, so keep the container full width
   up to its max-width (the live page gets the same result from the block layout of a non-flex <main>). */
.content-for-layout > .shopify-policy__container {
  width: 100%;
  box-sizing: border-box;
}

/* 2. The page-content block wraps the body in a custom element with no theme CSS. */
.shopify-block.rte > rte-formatter {
  display: block;
}

/* 3. Contact form status rows (blocks/contact-form.liquid stylesheet) + icon sizing. */
.contact-form__error,
.contact-form__success {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.contact-form__error > svg,
.contact-form__success > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex: 0 0 auto;
}

/* 4a. Track Your Order: nothing extra. The live #ubtrack card carries its own inline <style>; the replica notice is
   written into the live #ubt-msg paragraph by the page script (round 3 QA removed the former dashed notice card). */

/* 4b. FAQ: the live page shows a centered loader until the Chatty script fills #AVADA_PAGE_FAQS; same look for the notice. */
.ub-faq-local {
  text-align: center;
  padding: 40px 0;
  font-size: 16px;
  color: #666;
}

.ub-faq-local p {
  margin: 0;
}

/* 4c. Your Privacy Choices: static version of the Shopify opt-out form (data-sale-opt-out.js) with theme input tokens. */
.pc-opt-out {
  margin-top: var(--margin-2xl);
}

.pc-opt-out__description,
.pc-opt-out__not-applicable {
  margin: 0 0 var(--margin-lg);
}

.pc-opt-out__form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  max-width: 32rem;
}

.pc-opt-out__label {
  display: block;
  margin-bottom: var(--margin-xs);
}

.pc-opt-out__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  padding: var(--padding-lg) var(--padding-xl);
  border-radius: var(--style-border-radius-inputs);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  -webkit-font-smoothing: antialiased;
}

.pc-opt-out__checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.pc-opt-out__button {
  width: fit-content;
}

/* Replica-only footnotes (English, small, muted). */
.ub-replica-note {
  margin: var(--margin-md) 0 0;
  font-size: var(--font-size--xs);
  color: var(--color-foreground-muted);
}