/* PriceReduc - submit an offer. Everything is scoped under .pro so it cannot
   collide with fr733.css (which styles bare input/label/p/h2/ul globally). */

.pro {
  --pro-navy: #002153;
  --pro-blue: #1c4d7e;
  --pro-sky: #3fb8e8;
  --pro-sky-soft: #eaf6fd;
  --pro-cta: #c2410c;
  --pro-cta-hover: #9a3412;
  --pro-ok: #137a3c;
  --pro-err: #b42318;
  --pro-ink: #1d2733;
  --pro-muted: #5b6776;
  --pro-line: #d7dde5;
  --pro-bg: #f4f7fa;
  --pro-radius: 12px;
  font: 16px/1.5 "Helvetica Neue", Roboto, Helvetica, Arial, sans-serif;
  color: var(--pro-ink);
  text-align: left;
  margin: 0 0 16px;
}
.pro *, .pro *::before, .pro *::after { box-sizing: border-box; }
.pro [hidden] { display: none !important; }
.pro p, .pro li, .pro label, .pro legend, .pro small, .pro span, .pro strong, .pro em { font-size: inherit; }
.pro p { margin: 0; }
.pro ul { list-style: none; margin: 0; padding: 0; }
.pro svg { display: block; flex: none; }

/* ---------- benefits strip ---------- */
.pro-benefits {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px;
}
.pro-benefit {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: #fff; border: 1px solid var(--pro-line); border-radius: var(--pro-radius);
}
.pro-benefit-ico {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--pro-sky-soft); color: var(--pro-blue);
}
.pro-benefit strong { display: block; font-size: 15px; line-height: 1.3; color: var(--pro-navy); margin-bottom: 2px; }
.pro-benefit span { display: block; font-size: 13.5px; line-height: 1.4; color: var(--pro-muted); }

/* ---------- layout ---------- */
.pro-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.pro-card {
  background: #fff; border: 1px solid var(--pro-line); border-radius: var(--pro-radius);
  padding: 24px; box-shadow: 0 1px 2px rgba(0, 33, 83, .04), 0 8px 24px rgba(0, 33, 83, .06);
}
.pro-kicker {
  display: inline-block; margin-bottom: 18px !important; padding: 5px 12px; border-radius: 999px;
  background: var(--pro-sky-soft); color: var(--pro-blue); font-size: 13px; font-weight: 700; letter-spacing: .01em;
}

/* ---------- sections ---------- */
.pro-section { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.pro-section legend {
  display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px;
  font-size: 17px; font-weight: 700; color: var(--pro-navy);
}
.pro-section legend em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--pro-muted); }
.pro-num {
  width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--pro-navy); color: #fff; font-size: 13px; font-weight: 700;
}

/* ---------- offer type cards ---------- */
.pro-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pro-type { position: relative; display: block; cursor: pointer; }
.pro-type input {
  position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.pro-type-box {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%;
  padding: 14px; border: 2px solid var(--pro-line); border-radius: 10px; background: #fff;
  color: var(--pro-muted); transition: border-color .15s, background-color .15s, color .15s;
}
.pro-type-box strong { font-size: 15px; color: var(--pro-ink); line-height: 1.25; }
.pro-type-box small { font-size: 13px; line-height: 1.35; color: var(--pro-muted); }
.pro-type:hover .pro-type-box { border-color: #9db3cf; }
.pro-type input:checked + .pro-type-box { border-color: var(--pro-navy); background: var(--pro-sky-soft); color: var(--pro-navy); }
.pro-type input:focus-visible + .pro-type-box { outline: 3px solid var(--pro-sky); outline-offset: 2px; }

/* ---------- fields ---------- */
.pro-field { margin-bottom: 14px; }
.pro-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--pro-ink); }
.pro .pro-input {
  display: block; width: 100%; max-width: none; height: 48px; padding: 10px 14px; margin: 0;
  font: inherit; font-size: 16px; color: var(--pro-ink); background: #fff;
  border: 1.5px solid #b9c3d0; border-radius: 10px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.pro textarea.pro-input { height: auto; min-height: 96px; resize: vertical; line-height: 1.45; }
.pro .pro-input::placeholder { color: #8591a1; }
.pro .pro-input:hover { border-color: #8aa0bb; }
.pro .pro-input:focus { outline: 0; border-color: var(--pro-blue); box-shadow: 0 0 0 4px rgba(63, 184, 232, .28); }
.pro .pro-input[aria-invalid="true"] { border-color: var(--pro-err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.pro .pro-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: none; font-weight: 700; }
.pro .pro-code::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; font-family: inherit; }
.pro-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pro-counter { margin-top: 4px; text-align: right; font-size: 12.5px; color: var(--pro-muted); }
.pro-counter.is-near { color: var(--pro-err); font-weight: 700; }
.pro-hint { margin-top: 6px !important; font-size: 13px !important; color: var(--pro-muted); }
.pro-hint.is-ok { color: var(--pro-ok); font-weight: 700; }
.pro-error { margin-top: 6px !important; font-size: 13.5px !important; font-weight: 700; color: var(--pro-err); }
.pro-error:empty { display: none; }

/* ---------- store autosuggest ---------- */
.pro-combo { position: relative; }
.pro-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--pro-line); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 33, 83, .16); overflow: hidden;
}
.pro-suggest li {
  padding: 12px 14px; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.pro-suggest li + li { border-top: 1px solid #eef1f5; }
.pro-suggest li[aria-selected="true"], .pro-suggest li:hover { background: var(--pro-sky-soft); }

/* ---------- captcha / status / buttons ---------- */
.pro-captcha { margin: 4px 0 10px; min-height: 78px; overflow: visible; }
.pro-captcha > div { width: 304px; max-width: none; }
.pro-status { min-height: 22px; margin-bottom: 10px !important; font-size: 14.5px !important; font-weight: 700; }
.pro-status.is-error { color: var(--pro-err); }
.pro-status.is-ok { color: var(--pro-ok); }
.pro-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px;
  padding: 14px 22px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 700; color: #fff; background: var(--pro-cta);
  box-shadow: 0 3px 0 var(--pro-cta-hover); transition: background-color .15s, transform .05s, box-shadow .05s;
}
.pro-submit:hover { background: var(--pro-cta-hover); }
.pro-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pro-cta-hover); }
.pro-submit:focus-visible, .pro-secondary:focus-visible { outline: 3px solid var(--pro-sky); outline-offset: 3px; }
.pro-submit[disabled] { opacity: .75; cursor: progress; }
.pro-submit.is-loading .pro-submit-label::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: pro-spin .7s linear infinite;
}
@keyframes pro-spin { to { transform: rotate(360deg); } }
.pro-secondary {
  padding: 12px 20px; border: 2px solid var(--pro-navy); border-radius: 10px; background: #fff; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--pro-navy);
}
.pro-secondary:hover { background: var(--pro-sky-soft); }

/* ---------- success ---------- */
.pro-success { text-align: center; padding: 40px 24px; }
.pro-success:focus { outline: 0; }
.pro-success h3 { margin: 14px 0 8px; font-size: 22px; line-height: 1.25; color: var(--pro-navy); padding: 0; font-weight: 700; white-space: normal; }
.pro-success p { max-width: 460px; margin: 0 auto 22px !important; font-size: 16px !important; color: var(--pro-muted); }
.pro-success-ico {
  width: 60px; height: 60px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e6f6ec; color: var(--pro-ok);
}
.pro-success-ico svg { width: 30px; height: 30px; stroke-width: 2.6; }

/* ---------- aside: tips ---------- */
.pro-aside { position: sticky; top: 16px; display: grid; gap: 16px; }
.pro-aside-title { margin-bottom: 10px !important; font-size: 13px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pro-blue); }
.pro-tips { padding: 18px; background: #fff; border: 1px solid var(--pro-line); border-radius: var(--pro-radius); }
.pro-tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--pro-ink); }
.pro-tips li + li { margin-top: 10px; }
.pro-tips svg { width: 18px; height: 18px; margin-top: 1px; color: var(--pro-ok); stroke-width: 2.6; }

/* ---------- page hero (replaces the old h1 + grey intro box) ---------- */
.pro-hero {
  position: relative; overflow: hidden; float: none; width: auto; margin: 10px 0 18px !important; padding: 0 !important;
  border-radius: 16px; color: #fff;
  background:
    radial-gradient(700px 260px at 88% -10%, rgba(63, 184, 232, .50), transparent 62%),
    radial-gradient(420px 220px at 0% 120%, rgba(63, 184, 232, .22), transparent 70%),
    linear-gradient(135deg, #001a42 0%, #002153 45%, #1c4d7e 100%);
}
.pro-hero::after {                      /* decorative ticket-notch rings */
  content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .22); box-shadow: 0 0 0 28px rgba(255, 255, 255, .04);
  pointer-events: none;
}
.pro-hero-in { position: relative; z-index: 1; padding: 38px 44px 40px; }
.pro .pro-hero-in h1, .pro-hero h1 {
  display: block !important; float: none; white-space: normal !important; overflow: visible; text-overflow: clip;
  margin: 0 0 12px; padding: 0; max-width: 24em; background: none;
  font-size: 40px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #fff;
}
.pro .pro-hero-in p { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.6; color: #dbe8f7; }

/* ---------- section headers (replace the grey bars + arrow sprite) ---------- */
.pro-sec { display: flow-root; clear: both; margin: 26px 0 0; }
.pro-sec-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; float: none; width: auto; background: none; height: auto; }
.pro-sec-head::before {
  content: ""; flex: none; width: 6px; height: 32px; border-radius: 4px;
  background: linear-gradient(180deg, var(--pro-sky), var(--pro-navy));
}
.pro .pro-sec-head h2 {
  display: block; float: none; margin: 0; padding: 0; background: none; white-space: normal; text-overflow: clip;
  font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.005em; color: var(--pro-navy);
}

/* ---------- long SEO article: full width card ---------- */
.pro .pro-article {
  width: 100%; max-width: none; padding: 32px 36px; color: var(--pro-ink);
  background: #fff; border: 1px solid var(--pro-line); border-radius: var(--pro-radius);
  box-shadow: 0 1px 2px rgba(0, 33, 83, .04), 0 8px 24px rgba(0, 33, 83, .06);
}
.pro .pro-article section + section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--pro-line); }
.pro .pro-article h1, .pro .pro-article h2, .pro .pro-article h3 {
  display: block; float: none; white-space: normal; text-overflow: clip; background: none; height: auto; color: var(--pro-navy);
}
.pro .pro-article h1 { margin: 0 0 14px; padding: 0; font-size: 28px; line-height: 1.25; font-weight: 800; }
.pro .pro-article h2 { margin: 30px 0 10px; padding: 0 0 0 14px; font-size: 21px; line-height: 1.3; font-weight: 700; border-left: 4px solid var(--pro-sky); }
.pro .pro-article h3 { margin: 20px 0 6px; padding: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--pro-blue); }
.pro .pro-article p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.pro .pro-article strong { color: var(--pro-navy); }
.pro .pro-article a { color: var(--pro-blue); text-decoration: underline; }
.pro .pro-article ul { margin: 0 0 18px; padding: 0; }
.pro .pro-article li { position: relative; margin: 0 0 9px; padding-left: 30px; font-size: 16px; line-height: 1.6; }
.pro .pro-article li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%;
  background: #e6f6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137a3c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pro-layout { grid-template-columns: 1fr; }
  .pro-aside { position: static; }
}
@media (max-width: 720px) {
  .pro-hero-in { padding: 26px 18px 28px; }
  .pro-hero::after { display: none; }
  .pro .pro-hero-in p { font-size: 16px; }
  .pro .pro-sec-head h2 { font-size: 20px; }
  .pro .pro-article { padding: 20px 16px; }
  .pro .pro-article h1 { font-size: 23px; }
  .pro-benefits { grid-template-columns: 1fr; gap: 8px; }
  .pro-benefit { padding: 12px 14px; }
  .pro-card { padding: 18px 14px; }
  .pro-types { grid-template-columns: 1fr; }
  .pro-type-box { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .pro-type-box small { flex-basis: 100%; padding-left: 36px; margin-top: -2px; }
  .pro-dates { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pro *, .pro *::before { transition: none !important; animation-duration: 1.5s !important; }
}

/* share-to-publish step (offers on an existing store page) */
.pro-proof[hidden]{display:none}
.pro-proof h3{margin:0 0 8px}

/* ---------- spacing hardening ----------
   The host theme restyles ul/li/span, which made the benefit cards and tips touch each other.
   These rules are scoped under .pro and use real margins (not only grid gap) so spacing survives. */
.pro .pro-benefits { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; margin: 0 0 28px !important; padding: 0 !important; }
.pro .pro-benefit { margin: 0 0 16px !important; padding: 16px 18px !important; gap: 14px; }
.pro .pro-benefit > div { min-width: 0; }
.pro .pro-benefit strong { display: block !important; margin: 0 0 4px !important; }
.pro .pro-benefit span { display: block !important; }
.pro .pro-layout { gap: 28px; margin-top: 4px; }
.pro .pro-aside { gap: 20px; }
.pro .pro-tips { padding: 20px 22px; }
.pro .pro-tips li { margin: 0 0 14px !important; }
.pro .pro-tips li:last-child { margin-bottom: 0 !important; }
.pro .pro-aside-title { margin: 0 0 14px !important; }
@media (max-width: 860px) {
  .pro .pro-benefits { grid-template-columns: 1fr; }
  .pro .pro-layout { gap: 20px; }
}

/* ---------- soft-keyboard helper bar (touch screens only; created by offer-form.js) ---------- */
.pro-kbbar{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;display:flex;gap:8px;padding:8px 10px;background:#eef1f6;border-top:1px solid #c9d1dc;box-shadow:0 -2px 8px rgba(0,0,0,.12)}
.pro-kbbar[hidden]{display:none}
.pro-kbbar button{flex:1 1 0;min-height:44px;border:0;border-radius:10px;background:#fff;color:#0b3d91;font:inherit;font-weight:700;font-size:16px;box-shadow:0 1px 0 rgba(0,0,0,.15)}
.pro-kbbar button[data-k=done]{background:#0b3d91;color:#fff}
.pro-kbbar button:disabled{opacity:.4}
.pro .pro-input{scroll-margin-bottom:96px;scroll-margin-top:80px}

/* benefit cards now sit UNDER the form (form first): breathing room above them */
.pro .pro-benefits.pro-benefits-below { margin: 32px 0 8px !important; }

/* ---------- calendar sheet (touch screens): titled "Start date" / "End date" ---------- */
.pro-cal-overlay{position:fixed;inset:0;z-index:2147483100;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center}
.pro-cal-overlay[hidden]{display:none}
.pro-cal{width:100%;max-width:440px;background:#fff;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 30px rgba(0,0,0,.25);max-height:92vh;overflow:auto}
@media (min-width:600px){.pro-cal-overlay{align-items:center}.pro-cal{border-radius:18px}}
.pro-cal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e5eaf2}
.pro-cal-title{font-size:20px;font-weight:800;color:#0b3d91;line-height:1.2}
.pro-cal-sub{font-size:13px;color:#5b6678;margin-top:2px;min-height:1.2em;text-transform:capitalize}
.pro-cal-x{border:0;background:#eef1f6;width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;color:#33415c;flex:0 0 auto}
.pro-cal-nav{display:flex;align-items:center;justify-content:space-between;margin:6px 0 8px}
.pro-cal-nav strong{font-size:16px;text-transform:capitalize}
.pro-cal-nav button{border:0;background:#eef1f6;width:44px;height:44px;border-radius:12px;font-size:24px;color:#0b3d91}
.pro-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.pro-cal-dow{font-size:11px;font-weight:700;color:#7b8798;text-transform:uppercase;padding:4px 0}
.pro-cal-day{border:0;background:transparent;height:44px;border-radius:12px;font:inherit;font-size:16px;color:#1f2937}
.pro-cal-day.is-today{box-shadow:inset 0 0 0 2px #93b4e8}
.pro-cal-day.is-sel{background:#0b3d91;color:#fff;font-weight:800}
.pro-cal-day:disabled{color:#c3cad6}
.pro-cal-foot{display:flex;gap:10px;margin-top:12px}
.pro-cal-foot button{flex:1;min-height:46px;border:0;border-radius:12px;background:#eef1f6;color:#0b3d91;font:inherit;font-weight:700;font-size:15px}
.pro-cal-foot button:disabled{opacity:.4}
.pro-cal-open .pro-kbbar{display:none!important}
.pro-cal-open{overflow:hidden}
/* date fields: make the field name stand out where it is filled */
.pro .pro-dates .pro-field label{font-weight:700}

/* optional title: checkbox row + field */
.pro .pro-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600;cursor:pointer}
.pro .pro-check input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;margin:0;accent-color:#0b3d91}
.pro .pro-title-field #offertitlearea{margin-top:6px}
.pro .pro-title-field #offertitlearea[hidden]{display:none}