:root {
  --hhwa-navy: #0f172a;
  --hhwa-text: #26344d;
  --hhwa-muted: #66758f;
  --hhwa-line: #dbe5f0;
  --hhwa-soft: #f8fbfd;
  --hhwa-green: #25d366;
  --hhwa-green-dark: #16b956;
  --hhwa-green-deep: #07883d;
  --hhwa-wa-ink: #ffffff;
  --hhwa-radius: 22px;
  --hhwa-shadow: 0 22px 58px rgba(15, 23, 42, .10);
}

.hhwa-card-wrap { margin: 32px 0; font-family: inherit; }
.hhwa-card, .hhwa-card *, .hhwa-modal-card, .hhwa-modal-card * { box-sizing: border-box; }

.hhwa-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
  gap: 30px;
  align-items: center;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: var(--hhwa-radius);
  background: linear-gradient(135deg, #fff 0%, #fcfefd 55%, #f6fff9 100%);
  box-shadow: var(--hhwa-shadow);
}

.hhwa-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--hhwa-green), var(--hhwa-green-deep));
}

.hhwa-card__content { min-width: 0; }
.hhwa-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 13px;
  border-radius: 999px;
  color: #04783b;
  background: #dcfce7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hhwa-title {
  margin: 14px 0 8px;
  color: var(--hhwa-navy);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.04em;
}

.hhwa-subtitle {
  margin: 0;
  max-width: 690px;
  color: #334155;
  font-size: 16px;
  line-height: 1.55;
}

.hhwa-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #e8eef5;
}

.hhwa-summary div { min-width: 0; padding-right: 18px; }
.hhwa-summary div + div { padding-left: 18px; border-left: 1px solid #e8eef5; }
.hhwa-summary dt {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .065em;
  line-height: 1;
  text-transform: uppercase;
}
.hhwa-summary dd {
  margin: 0;
  color: #27354d;
  font-size: 15px;
  font-weight: 740;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.hhwa-card__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 4px 0;
}


.hhwa-button, .hhwa-modal-submit {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  padding: 0 26px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 18px;
  color: var(--hhwa-wa-ink) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #2ee877 0%, #20c969 45%, #12a94f 100%);
  box-shadow:
    0 22px 42px rgba(18, 169, 79, .28),
    0 8px 18px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0, 91, 44, .24);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.015em;
  text-decoration: none !important;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .22s cubic-bezier(.2,.78,.2,1),
    box-shadow .22s cubic-bezier(.2,.78,.2,1),
    filter .22s ease,
    border-color .22s ease;
  will-change: transform;
}

.hhwa-button::before, .hhwa-modal-submit::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,0) 42%, rgba(0,0,0,.08));
  pointer-events: none;
}

.hhwa-button::after, .hhwa-modal-submit::after {
  content: "";
  position: absolute;
  top: -85%;
  bottom: -85%;
  left: -55%;
  z-index: -1;
  width: 46%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,.46) 50%, rgba(255,255,255,.18) 62%, transparent 100%);
  transform: translateX(-120%) rotate(10deg);
  animation: hhwaButtonShine 4.8s ease-in-out infinite;
  pointer-events: none;
}

.hhwa-button:hover, .hhwa-modal-submit:hover {
  transform: translateY(-2px) scale(1.006);
  border-color: rgba(255, 255, 255, .42);
  box-shadow:
    0 28px 56px rgba(18, 169, 79, .34),
    0 12px 24px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(0, 91, 44, .24);
  filter: saturate(1.05) contrast(1.02);
}

.hhwa-button:active, .hhwa-modal-submit:active {
  transform: translateY(0) scale(.992);
  box-shadow:
    0 15px 30px rgba(18, 169, 79, .25),
    inset 0 1px 0 rgba(255,255,255,.40),
    inset 0 2px 7px rgba(0, 65, 32, .16);
}

.hhwa-button__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 999px;
  color: #0fa64d;
  background: rgba(255,255,255,.92);
  box-shadow:
    0 8px 18px rgba(1, 90, 42, .20),
    inset 0 1px 0 rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1;
  transform: translateZ(0);
  transition: transform .22s cubic-bezier(.2,.78,.2,1), background .22s ease;
}
.hhwa-button:hover .hhwa-button__icon { transform: translateY(-1px) rotate(-4deg) scale(1.04); background:#fff; }

.hhwa-card__actions .hhwa-button {
  min-height: 64px;
  border-radius: 20px;
}

.hhwa-card__actions::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 18px;
  height: 52px;
  z-index: -1;
  border-radius: 999px;
  background: rgba(37, 211, 102, .35);
  filter: blur(22px);
  opacity: .78;
  pointer-events: none;
  animation: hhwaButtonGlow 3.6s ease-in-out infinite;
}

.hhwa-card__microcopy {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  color: #526076;
}
.hhwa-card__microcopy span {
  padding: 6px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}
.hhwa-response-text { margin: 0; color: #66758f; font-size: 13px; line-height: 1.45; text-align: center; }

.hhwa-resume-link, .hhwa-resume-mini {
  display: block;
  margin-top: 2px;
  padding: 13px 15px;
  border: 1px solid var(--hhwa-line);
  border-radius: 16px;
  color: var(--hhwa-navy) !important;
  background: rgba(255,255,255,.88);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.4;
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hhwa-resume-link:hover { border-color: rgba(34,197,94,.45); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15,23,42,.07); }
.hhwa-resume-mini span { display:block; margin-bottom:3px; color:#64748b; font-size:11px; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.hhwa-resume-mini strong { display:block; color:var(--hhwa-navy); font-size:14px; }

.hhwa-button:focus-visible,
.hhwa-resume-link:focus-visible,
.hhwa-modal-submit:focus-visible,
.hhwa-modal-skip:focus-visible,
.hhwa-modal-link:focus-visible,
.hhwa-modal-field input:focus-visible,
.hhwa-modal-close:focus-visible {
  outline: 3px solid rgba(34, 197, 94, .24);
  outline-offset: 3px;
}

.hhwa-modal[hidden] { display: none !important; }
.hhwa-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.hhwa-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: hhwaFadeIn .18s ease both;
}
.hhwa-modal-card {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  max-height: min(720px, calc(100dvh - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 26px;
  border: 1px solid rgba(226,232,240,.98);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(2,6,23,.32);
  animation: hhwaModalIn .23s cubic-bezier(.2,.78,.2,1) both;
}
.hhwa-modal-card::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background: linear-gradient(90deg, var(--hhwa-green), #86efac);
}
.hhwa-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #94a3b8;
  background: #f8fafc;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.hhwa-modal-close:hover { color: var(--hhwa-navy); background:#eef2f7; transform: rotate(90deg); }

.hhwa-modal-header { padding-right: 46px; }
.hhwa-modal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #04783b;
  background: #ecfdf5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}
.hhwa-modal-title {
  margin: 12px 0 7px;
  color: var(--hhwa-navy);
  font-size: clamp(25px, 4vw, 31px);
  font-weight: 860;
  line-height: 1.12;
  letter-spacing: -.04em;
}
.hhwa-modal-subtitle {
  margin: 0 0 20px;
  color: #526078;
  font-size: 15px;
  line-height: 1.55;
}
.hhwa-modal-fields { display: grid; gap: 14px; }
.hhwa-modal-field label {
  display: block;
  margin-bottom: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
}
.hhwa-modal-field input {
  width: 100%;
  min-height: 54px;
  padding: 14px 15px;
  border: 1px solid #d8e2ed;
  border-radius: 15px;
  color: var(--hhwa-navy);
  background: #fff;
  font-size: 16px;
  line-height: 1.35;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.hhwa-modal-field input:focus { border-color: rgba(34,197,94,.70); box-shadow: 0 0 0 4px rgba(34,197,94,.12); }
.hhwa-modal-field input.hhwa-field-error { border-color:#ef4444; box-shadow:0 0 0 4px rgba(239,68,68,.10); }
.hhwa-field-help { display:block; margin-top:6px; color:#64748b; font-size:12px; line-height:1.35; }

.hhwa-modal-assist {
  margin-top: 15px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #f8fafc;
}
.hhwa-modal-assist__item { display:flex; align-items:center; gap:10px; }
.hhwa-assist-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; flex:0 0 28px; border-radius:999px; color:#04783b; background:#dcfce7; font-weight:900; }
.hhwa-modal-assist__item strong, .hhwa-modal-assist__item span { display:block; }
.hhwa-modal-assist__item strong { color:var(--hhwa-navy); font-size:14px; }
.hhwa-modal-assist__item span { color:#64748b; font-size:13px; }
.hhwa-modal-link, .hhwa-modal-skip {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  padding:12px 15px;
  border:1px solid var(--hhwa-line);
  border-radius:15px;
  color:var(--hhwa-navy) !important;
  background:#fff;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  text-decoration:none !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hhwa-modal-link:hover, .hhwa-modal-skip:hover { border-color:rgba(34,197,94,.46); transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,.07); }
.hhwa-modal-actions { display:grid; gap:11px; margin-top:18px; }
.hhwa-modal-submit { min-height:56px; }
.hhwa-modal-submit[disabled] { cursor: wait; opacity:.78; transform:none; }
.hhwa-modal-message { min-height:18px; margin-top:10px; color:#ef4444; font-size:13px; font-weight:700; }
.hhwa-modal-message[data-type="info"] { color:#04783b; }
.hhwa-modal-note {
  margin: 12px 0 0;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
  color:#64748b;
  font-size:12.5px;
  line-height:1.5;
}

.hhwa-fallback { padding:16px; border:1px dashed #cbd5e1; border-radius:16px; color:#64748b; background:#f8fafc; }
html.hhwa-modal-open, html.hhwa-modal-open body { overflow:hidden; }

@keyframes hhwaButtonShine {
  0%, 58% { transform: translateX(-130%) rotate(10deg); opacity: 0; }
  68% { opacity: 1; }
  86%, 100% { transform: translateX(355%) rotate(10deg); opacity: 0; }
}
@keyframes hhwaButtonGlow {
  0%, 100% { opacity: .58; transform: scaleX(.92); }
  50% { opacity: .90; transform: scaleX(1.04); }
}

@keyframes hhwaFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes hhwaModalIn { from { opacity:0; transform: translateY(14px) scale(.982); } to { opacity:1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .hhwa-button, .hhwa-modal-submit, .hhwa-button__icon, .hhwa-card__actions::before {
    animation: none !important;
    transition: none !important;
  }
  .hhwa-button::after, .hhwa-modal-submit::after { animation: none !important; display: none; }
}

@media (max-width: 980px) {
  .hhwa-card { grid-template-columns: 1fr; gap: 24px; }
  .hhwa-card__actions { max-width: 430px; }
}
@media (max-width: 720px) {
  .hhwa-card-wrap { margin: 26px 0; }
  .hhwa-card { padding: 24px 20px; border-radius: 22px; }
  .hhwa-summary { grid-template-columns: 1fr; gap: 12px; padding-top: 14px; }
  .hhwa-summary div { padding: 0; }
  .hhwa-summary div + div { padding: 12px 0 0; border-left: 0; border-top: 1px solid #e8eef5; }
  .hhwa-card__actions { max-width: none; }
  .hhwa-modal { align-items: end; padding: 12px; }
  .hhwa-modal-card { width:100%; max-height: calc(100dvh - 24px); padding: 24px 20px 20px; border-radius: 24px; }
  .hhwa-modal-header { padding-right: 42px; }
}
@media (max-width: 420px) {
  .hhwa-title { font-size: 25px; }
  .hhwa-subtitle { font-size: 15px; }
  .hhwa-button, .hhwa-modal-submit { min-height: 54px; }
  .hhwa-card__microcopy { justify-content: flex-start; }
  .hhwa-response-text { text-align:left; }
}
@media (prefers-reduced-motion: reduce) {
  .hhwa-modal-card, .hhwa-modal-backdrop, .hhwa-button, .hhwa-modal-submit, .hhwa-resume-link, .hhwa-modal-link, .hhwa-modal-skip { animation:none !important; transition:none !important; }
}

/* v2.2.4: Premium main card WhatsApp CTA only. Modal/layout is untouched. */
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal {
  min-height: 66px;
  padding: 0 28px;
  gap: 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.34);
  background: radial-gradient(circle at 16% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 34%), linear-gradient(135deg, #43e685 0%, #19bf62 48%, #078d42 100%);
  box-shadow: 0 22px 46px rgba(7,141,66,.28), 0 8px 18px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.48), inset 0 -2px 0 rgba(0,92,42,.22);
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 900;
  letter-spacing: -.025em;
  text-shadow: 0 1px 1px rgba(0,77,35,.16);
}
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal::before { inset: 2px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 48%, rgba(0,74,34,.12)); }
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 28px 58px rgba(7,141,66,.34), 0 11px 24px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.54), inset 0 -2px 0 rgba(0,92,42,.22); }
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal:active { transform: translateY(0) scale(.992); }
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal .hhwa-button__icon { width: 38px; height: 38px; flex: 0 0 38px; color: #fff; background: transparent; box-shadow: none; filter: drop-shadow(0 4px 8px rgba(0,83,38,.22)); }
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal .hhwa-button__svg { display: block; width: 38px; height: 38px; }
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal .hhwa-button__text { display: inline-flex; align-items: center; min-width: 0; line-height: 1.08; }
/* Keep main Quick Apply button icon and text on one line. */
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal {
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal .hhwa-button__text {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: visible;
}

.hhwa-card__actions > .hhwa-button.js-hhwa-open-modal:hover .hhwa-button__icon { background: transparent; transform: translateY(-1px) rotate(-3deg) scale(1.045); }
@media (max-width: 420px) {
  .hhwa-card__actions > .hhwa-button.js-hhwa-open-modal { min-height: 58px; padding: 0 18px; gap: 10px; border-radius: 18px; font-size: 14px; }
  .hhwa-card__actions > .hhwa-button.js-hhwa-open-modal .hhwa-button__icon,
  .hhwa-card__actions > .hhwa-button.js-hhwa-open-modal .hhwa-button__svg { width: 32px; height: 32px; flex-basis: 32px; }
}