/* Currency quote widget — sidebar-width embeddable form.
   Tokens come from assets/brand.css (France Media Group brand kit). */

html, body {
  margin: 0;
  padding: 0;
  background: transparent;
}

/* Embedded inside another site's iframe: never rely on viewport-relative
   heights, they track the frame's own height and can loop with the resizer. */
html.ragland-embedded,
html.ragland-embedded body {
  height: auto;
  min-height: 0;
}

body {
  font-family: var(--font-body);
  color: var(--brand-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

/* --- Shell -------------------------------------------------------- */
.fq {
  max-width: 420px;
  margin: 0 auto;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
}

/* --- Header ------------------------------------------------------- */
.fq__eyebrow {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.fq__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--brand-primary);
}

.fq__intro {
  margin: 0 0 14px;
  font-size: 0.875rem;
  color: var(--brand-muted);
}

/* --- Moneycorp partner note --------------------------------------- */
.fq__partner {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--brand-border);
  text-align: center;
}

.fq__partner-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

.fq__partner-logo {
  display: block;
  width: 110px;
  height: auto;
  margin: 0 auto 10px;
}

.fq__partner p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--brand-muted);
}

/* --- Fields ------------------------------------------------------- */
.fq__field { margin-bottom: 14px; }

.fq__label {
  display: block;
  margin-bottom: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-ink);
}

.fq__req {
  color: var(--brand-accent);
  font-weight: 400;
}

.fq__tel-group {
  display: flex;
  gap: 8px;
}

.fq__tel-country {
  flex: 0 0 6em;
  min-width: 0;
}

.fq__tel-number {
  flex: 1 1 auto;
  min-width: 0;
}

.fq input[type="text"],
.fq input[type="email"],
.fq input[type="tel"],
.fq select {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--brand-ink);
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  appearance: none;
}

.fq select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2352606D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  text-overflow: ellipsis;
}

.fq input:focus,
.fq select:focus,
.fq button:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 1px;
}

.fq input::placeholder { color: #98A3AE; }

.fq input[aria-invalid="true"],
.fq select[aria-invalid="true"] {
  border-color: var(--brand-accent);
}

.fq__note {
  margin: 5px 0 0;
  font-size: 0.75rem;
  color: var(--brand-muted);
}

/* --- Opt-ins ------------------------------------------------------ */
.fq__optins {
  margin: 20px 0 0;
  padding: 16px 16px 12px;
  background: var(--brand-surface-alt);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
}

.fq__optins-title {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.fq__optins-note {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--brand-muted);
}

.fq__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
}

.fq__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.fq__check small {
  display: block;
  margin-top: 1px;
  font-size: 0.75rem;
  color: var(--brand-muted);
}

/* --- reCAPTCHA ----------------------------------------------------
   The standard 304px widget is scaled down by script to whatever
   width the column actually is, so it never gets clipped. Height is
   set by the same script, measured after the widget renders. */
.fq__captcha {
  margin: 18px 0 0;
  overflow: hidden;
}

.fq__captcha .g-recaptcha {
  transform-origin: 0 0;
}

/* --- Submit ------------------------------------------------------- */
.fq__btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px 24px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius);
  cursor: pointer;
}

.fq__btn:hover { background: #082038; border-color: #082038; }
.fq__btn[disabled] { opacity: 0.55; cursor: default; }

.fq__smallprint {
  margin: 12px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--brand-muted);
  text-align: center;
}

.fq__smallprint a { color: var(--brand-muted); }

/* --- States ------------------------------------------------------- */
.fq__error {
  display: none;
  margin: 16px 0 0;
  padding: 11px 14px;
  font-size: 0.875rem;
  color: var(--brand-accent);
  background: var(--brand-surface-alt);
  border-left: 3px solid var(--brand-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.fq__success {
  display: none;
  padding: 8px 0;
  text-align: center;
}

.fq__success-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border: 1px solid var(--brand-primary);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 44px;
  color: var(--brand-primary);
}

.fq__success h3 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--brand-primary);
}

.fq__success p {
  margin: 0 0 8px;
  font-size: 0.875rem;
  color: var(--brand-muted);
}

.fq.is-sent .fq__form,
.fq.is-sent .fq__intro { display: none; }

.fq.is-sent .fq__success { display: block; }

@media (max-width: 360px) {
  .fq { padding: 20px 16px 18px; }
  .fq__title { font-size: 1.375rem; }
}