/* Form styles shared by the campaign forms (Phase 9) and, later, the inquiry, contact and login forms (Phase 10).
   Ordinary responsive CSS. Colours come from the tokens in style.css and inner.css. */
.sf { background: var(--brand-light); border: 1px solid var(--line); border-radius: 20px; padding: 34px; }
.sf h2 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 28px); margin-bottom: 8px; }
.sf-intro { color: var(--ink-70); margin-bottom: 22px; }
.sf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-field { display: block; margin-bottom: 16px; font-weight: 600; font-size: 14px; }
.sf-field input, .sf-field textarea, .sf-field select { display: block; width: 100%; margin-top: 6px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); }
.sf-field textarea { min-height: 120px; resize: vertical; }
.sf-field input:focus, .sf-field textarea:focus, .sf-field select:focus { outline: 3px solid var(--g2); outline-offset: 1px; border-color: var(--brand); }
.sf-field input:disabled, .sf-field textarea:disabled, .sf-field select:disabled { background: #f3f7f7; color: var(--ink-70); cursor: not-allowed; }
.sf .btn:disabled { opacity: .55; cursor: not-allowed; }
.sf-hint { margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-70); }

/* "Coming soon" notice shown while a form is only a screen (saving is built in Phase 10) */
.sf-notice { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px dashed var(--brand); font-size: 15px; line-height: 1.55; }
.sf-notice svg { flex: none; margin-top: 2px; color: var(--brand); }
.sf-notice a { color: var(--brand-dark); font-weight: 700; text-decoration: underline; }

@media (max-width: 640px) {
  .sf { padding: 22px 18px; }
  .sf-row { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .sf * { transition: none !important; } }

/* ===== Phase 10: working forms (inquiry, contact, campaigns, login, account) ===== */

/* Honeypot: off-screen, not display:none, so simple bots still fill it. People and screen readers never reach it. */
.sf-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Field errors and form banners (js/forms.js adds the classes and the text) */
.has-error input, .has-error textarea, .has-error select { border-color: #b3261e !important; }
.sf-error { display: block; margin-top: 5px; font-size: 13px; font-weight: 600; line-height: 1.4; color: #b3261e; }
.sf-banner { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.55; }
.sf-banner[hidden] { display: none; }
.sf-banner.is-ok { background: #e7f6ec; border: 1px solid #9bd3ae; color: #14532d; }
.sf-banner.is-error { background: #fdecea; border: 1px solid #f0b4ae; color: #7a1710; }
.sf .btn[aria-busy="true"], .c-form .btn[aria-busy="true"], .lg-card .btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.sf-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23008088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.sf-req { color: #b3261e; }

/* Inquiry page */
.inq-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.inq-aside { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.inq-aside h2 { font-family: var(--font-heading); font-size: 22px; margin-bottom: 14px; }
.inq-steps { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: inq; }
.inq-steps li { position: relative; padding: 0 0 14px 44px; line-height: 1.55; color: var(--ink-70); counter-increment: inq; }
.inq-steps li::before { content: counter(inq); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 14px; }
.inq-steps strong { display: block; color: var(--ink); }
.inq-direct { border-top: 1px solid var(--line); padding-top: 18px; font-size: 15px; line-height: 1.8; }
.inq-direct a { color: var(--brand-dark); font-weight: 700; }
.inq-success { background: #fff; border: 1px solid #9bd3ae; border-radius: 20px; padding: 40px 34px; text-align: center; box-shadow: var(--shadow); }
.inq-success[hidden] { display: none; }
.inq-success svg { color: #1b7f46; margin-bottom: 12px; }
.inq-success h2 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 28px); margin-bottom: 10px; }
.inq-success p { color: var(--ink-70); line-height: 1.7; max-width: 460px; margin: 0 auto 20px; }
.inq-success:focus { outline: none; }

/* Login page */

/* Login page (redesigned): brand panel on the left, form on the right. One column on tablets and phones.
   The hooks used by js/auth.js ([data-auth], .lg-tabs, .lg-tab, [data-step], .lg-otp ...) are unchanged. */
.lg-page { padding: clamp(24px, 5vw, 64px) 0 clamp(48px, 8vw, 96px); background: radial-gradient(900px 420px at 88% -8%, rgba(0, 128, 136, .14), transparent 62%), linear-gradient(180deg, var(--brand-light), #fff 78%); }
.lg-shell { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); max-width: 1040px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 70, 76, .14); overflow: hidden; }

.lg-aside { position: relative; display: flex; align-items: center; padding: clamp(30px, 4vw, 52px); overflow: hidden; color: #fff; background: linear-gradient(155deg, #0aa0a8 0%, var(--brand) 42%, var(--brand-dark) 100%); }
.lg-aside::before { content: ""; position: absolute; right: -170px; bottom: -190px; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 48px rgba(255, 255, 255, .045), 0 0 0 96px rgba(255, 255, 255, .03); pointer-events: none; }
.lg-aside::after { content: ""; position: absolute; left: -90px; top: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .07); pointer-events: none; }
.lg-aside-in { position: relative; z-index: 1; }
.lg-kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.lg-aside h1 { margin: 10px 0 14px; font-family: var(--font-heading); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; color: #fff; }
.lg-lead { line-height: 1.7; color: rgba(255, 255, 255, .9); }
.lg-points { display: grid; gap: 20px; margin-top: 32px; }
.lg-points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.lg-pt-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .15); }
.lg-points strong { display: block; font-size: 16px; line-height: 1.35; }
.lg-points li span:not(.lg-pt-ico) { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .84); }

.lg-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(26px, 4vw, 52px); }
.lg-card .sf-field input { padding-left: 46px; background-repeat: no-repeat; background-position: 14px center; background-size: 20px; }
.lg-card #lg-identifier, .lg-card #lg-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23008088' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.lg-card #lg-name { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23008088' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.lg-card #lg-mobile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23008088' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.500 1.500a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.lg-card #lg-company { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23008088' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1'/%3E%3Cpath d='M9 8h2M13 8h2M9 12h2M13 12h2M10 21v-4h4v4'/%3E%3C/svg%3E"); }
.lg-card .sf-field input { border-radius: 12px; padding-top: 14px; padding-bottom: 14px; }
.lg-card .btn { display: block; width: 100%; padding: 15px 24px; border-radius: 12px; font-size: 16px; text-align: center; box-shadow: 0 8px 20px rgba(0, 128, 136, .26); }
.lg-card .btn:disabled { box-shadow: none; }
.lg-secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink-70); text-align: center; }
.lg-secure svg { flex: none; color: var(--brand); }

/* Tablet and phone: one column, the brand panel becomes a short banner on top */
@media (max-width: 900px) {
  .lg-shell { grid-template-columns: minmax(0, 1fr); max-width: 580px; }
  .lg-aside { padding: 28px 28px 30px; }
  .lg-aside h1 { margin: 6px 0 8px; font-size: clamp(26px, 5.5vw, 32px); }
  .lg-points { display: none; }
  .lg-aside::before { right: -200px; bottom: -250px; }
  .lg-card { padding: 28px 28px 30px; }
}
@media (max-width: 520px) {
  .lg-page { padding-top: 16px; }
  .lg-page .wrap { padding: 0 12px; }
  .lg-shell { border-radius: 18px; }
  .lg-aside { padding: 22px 20px 24px; }
  .lg-card { padding: 22px 18px 24px; }
}
.lg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin-bottom: 26px; background: var(--brand-light); border-radius: 999px; }
.lg-tab { padding: 11px 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 700; font-size: 16px; color: var(--ink-70); cursor: pointer; }
.lg-tab[aria-selected="true"] { background: var(--brand); color: #fff; }
.lg-tab:focus-visible { outline: 3px solid var(--g2); outline-offset: 2px; }
.lg-panel[hidden], .lg-step[hidden] { display: none; }
.lg-card .sf-field { margin-bottom: 16px; }
.lg-note { margin-top: 14px; font-size: 14px; color: var(--ink-70); text-align: center; line-height: 1.55; }
.lg-demo { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; border: 1.5px dashed #d9a21b; background: #fff8e1; color: #5a4300; font-size: 15px; line-height: 1.55; }
.lg-demo strong.lg-demo-code { display: inline-block; margin: 0 4px; padding: 2px 10px; border-radius: 8px; background: #fff; border: 1px solid #f0c36d; font-size: 22px; letter-spacing: .18em; color: #3b2b00; }
.lg-demo button { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: #7a4b00; text-decoration: underline; cursor: pointer; }
.lg-step h2 { font-family: var(--font-heading); font-size: 22px; margin-bottom: 6px; }
.lg-step > p { color: var(--ink-70); line-height: 1.6; margin-bottom: 18px; }
.lg-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.lg-otp input { width: 100%; height: 58px; padding: 0; border: 1.5px solid var(--line); border-radius: 10px; text-align: center; font: inherit; font-size: 26px; font-weight: 700; color: var(--ink); background: #fff; }
.lg-otp input:focus { outline: 3px solid var(--g2); outline-offset: 1px; border-color: var(--brand); }
.lg-otp.has-error input { border-color: #b3261e; }
.lg-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 15px; }
.lg-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--brand-dark); text-decoration: underline; cursor: pointer; }
.lg-link:disabled { color: var(--ink-70); text-decoration: none; cursor: default; font-weight: 400; }

/* Account page */
.acc-page { padding: 48px 0 90px; }
.acc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.acc-top h1 { font-family: var(--font-heading); font-size: clamp(26px, 4vw, 38px); }
.acc-top p { color: var(--ink-70); margin-top: 4px; }
.acc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 28px; align-items: start; }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 28px; }
.acc-card h2 { font-family: var(--font-heading); font-size: 21px; margin-bottom: 16px; }
.acc-dl { margin: 0; }
.acc-dl dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-70); margin-top: 14px; }
.acc-dl dt:first-child { margin-top: 0; }
.acc-dl dd { margin: 3px 0 0; font-size: 17px; overflow-wrap: anywhere; }
.acc-list { list-style: none; margin: 0; padding: 0; }
.acc-item { padding: 16px 0; border-top: 1px solid var(--line); }
.acc-item:first-child { border-top: 0; padding-top: 0; }
.acc-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 6px; }
.acc-item h3 { font-family: var(--font-heading); font-size: 17px; }
.acc-date { font-size: 14px; color: var(--ink-70); }
.acc-msg { color: var(--ink-70); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.acc-badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.acc-badge.is-new { background: var(--brand-light); color: var(--brand-dark); }
.acc-badge.is-contacted { background: #fff3d6; color: #6b4a00; }
.acc-badge.is-closed { background: #e9ecec; color: #3d4a4c; }
.acc-empty { text-align: center; padding: 26px 10px; color: var(--ink-70); line-height: 1.7; }
.acc-empty .btn { margin-top: 14px; }

@media (max-width: 900px) {
  .inq-grid, .acc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .lg-otp { gap: 6px; }
  .lg-otp input { height: 52px; font-size: 22px; }
  .acc-card, .inq-aside { padding: 22px 18px; }
  .inq-success { padding: 30px 20px; }
}

/* Phase 11 (merge): phone and email links in the contact cards and on the Inquire Now side panel were 17px high; give them a 24px touch target (WCAG 2.2, 2.5.8) */
.inq-aside a, .c-card a { display: inline-block; min-height: 24px; line-height: 24px; }