/*
 * PortiQ – Find My Plan (Nutzertypen & Preise)
 * All tokens from style.css :root
 */

/* ── p-margin reset ────────────────────────────────────────────────── */
.fmp-shortcut-cards p,
.fmp-org-strip p,
.fmp-finder p,
.fmp-cmp-box p,
.fmp-addon-block p,
.fmp-notice p,
.fmp-section-label p,
.fmp-bridge p,
.fmp-api-co p {
  margin: 0 !important;
  padding: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   SECTION LABEL
   ══════════════════════════════════════════════════════════════════════ */
.fmp-section-label {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text);
  margin: 40px 0 !important;
  margin-top: 0 !important;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/* ── Section spacing ─────────────────────────────────────────────── */
.fmp-divider {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 40px 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   SHORTCUT CARDS
   ══════════════════════════════════════════════════════════════════════ */
.fmp-shortcut-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-bottom: 36px !important;
}

.fmp-sc-card {
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius-card) !important;
  padding: 16px !important;
  cursor: pointer;
  background: var(--white) !important;
  text-align: left;
  width: 100%;
  transition: border-color .15s, box-shadow .15s, background .15s;
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: auto;
  align-items: flex-start;
  font-family: inherit;
  justify-content: flex-start;
}
.fmp-sc-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 16px rgba(42,112,233,.08);
}
.fmp-sc-card.fmp-sc-active {
  border: 2px solid var(--primary) !important;
  background: var(--primary-50) !important;
}

.fmp-sc-label figure,
.fmp-sc-label img{
  max-width:24px;
  width: 24px;
  height: fit-content;
  margin: 0 !important;
}

.fmp-sc-icon  { color: var(--primary); display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.fmp-sc-label { font-size: 14px !important; font-weight: 700 !important; color: var(--text) !important; }
.fmp-sc-sub   { font-size: 12px !important; color: var(--text-grey) !important; line-height: 1.45; font-weight: 400;}
.fmp-sc-arrow { font-size: 11px !important; color: var(--primary) !important; display: flex; align-items: flex-end; flex: 1; gap: 3px; margin-top: 4px; font-weight: 500; }

.fmp-sc-icon figure,
.fmp-usg-title figure{
    max-width: 24px;
    height: fit-content;
    margin: 0;
}

.fmp-sc-arrow figure,
.fmp-snf-yes figure,
.fmp-snf-no figure{
  max-width: 16px;
  height: fit-content;
  margin: 0;
}

.fmp-sc-icon figure img,
.fmp-sc-arrow figure img,
.fmp-snf-yes figure img,
.fmp-snf-no figure img,
.fmp-usg-title figure img
{width: 100%;}

/* ══════════════════════════════════════════════════════════════════════
   ORG STRIP
   ══════════════════════════════════════════════════════════════════════ */
.fmp-org-strip {
  display: flex !important;
  align-items: flex-start;
  gap: 14px !important;
  background: var(--primary-50) !important;
  border-radius: var(--border-radius-card) !important;
  padding: 16px 18px !important;
  margin: 0 20px !important;
}
.fmp-org-strip-icon  { font-size: 20px; color: var(--primary); flex-shrink: 0; margin-top: 1px; }
.fmp-org-strip-title { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 3px !important; }
.fmp-org-strip-desc  { font-size: 12px !important; color: var(--text-grey) !important; line-height: 1.55; }


/* ══════════════════════════════════════════════════════════════════════
   FLOW DIAGRAM
   ══════════════════════════════════════════════════════════════════════ */
.fmp-flow-wrap {
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius-card) !important;
  padding: 20px 18px 16px !important;
  margin: 0 20px !important;
  background: var(--white);
}
.fmp-flow-title {
  font-size: 14px !important;
  font-weight: 600;
  margin-bottom: 20px !important;
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}
.fmp-flow-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 0;
  align-items: center;
  margin-bottom: 14px !important;
}
.fmp-flow-col-label {
  font-size: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-grey) !important;
  margin-bottom: 8px !important;
  opacity: .7;
}
.fmp-flow-creators,
.fmp-flow-signers { display: flex; flex-direction: column; gap: 8px; }

.fmp-flow-node {
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  padding: 9px 12px !important;
  background: var(--white);
}
.fmp-flow-node.fmp-admin { border-style: dashed;}
.fmp-fn-name { font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important; }
.fmp-fn-role { font-size: 10px !important; color: var(--text-grey) !important; margin-top: 2px !important; }

.fmp-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 16px;
}
.fmp-fa-label { font-size: 10px !important; color: var(--text-grey) !important; text-align: center; line-height: 1.4; }
.fmp-fa-icon  { font-size: 18px;}

/* Signer nodes */
.fmp-signer-node {
  border-radius: var(--border-radius) !important;
  padding: 10px 12px !important;
}
.fmp-sn-with-account {
  border: 1px solid var(--border) !important;
  background: var(--white);
}
.fmp-sn-extern {
  border: 1px dashed var(--border) !important;
  background: var(--grey-50) !important;
}
.fmp-sn-head   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px !important; }
.fmp-sn-name   { font-size: 12px !important; font-weight: 700 !important; color: var(--text) !important; }
.fmp-sn-badge  { font-size: 10px !important; padding: 2px 7px !important; border-radius: 4px !important; font-weight: 600; }
.fmp-snb-account { background: var(--primary-50)  !important; color: var(--primary)    !important; }
.fmp-snb-noact   { background: var(--grey-100)  !important; color: var(--text-grey) !important; border: 1px solid var(--border) !important; }

.fmp-sn-features { display: flex; flex-direction: column; gap: 3px; }
.fmp-snf { font-size: 10px !important; color: var(--text) !important; display: flex; align-items: center; gap: 5px; }
.fmp-snf-yes { font-weight: 500; }
.fmp-snf-no  { opacity: .45; }

 
.fmp-flow-note,
p.fmp-flow-note {
  font-size: 11px !important;
  color: var(--text-grey) !important;
  line-height: 1.55;
  border-top: 1px solid var(--border);
  padding-top: 12px !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}
.fmp-flow-note figure.wp-block-image,
.fmp-flow-note figure.wp-block-image img,
.fmp-flow-note > figure,
.fmp-flow-note > figure img {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  margin: 1px 0 0 !important;
  flex-shrink: 0;
  display: block !important;
}
/* The outer wrapper div containing the image + p */
.fmp-flow-note-wrap {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px !important;
  margin-top: 4px !important;
}
.fmp-flow-note-wrap figure.wp-block-image,
.fmp-flow-note-wrap figure.wp-block-image img {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  margin: 1px 0 0 !important;
  flex-shrink: 0;
  display: block !important;
}
.fmp-flow-note-wrap p {
  font-size: 11px !important;
  color: var(--text-grey) !important;
  line-height: 1.55;
  margin: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   FINDER WIDGET
   ══════════════════════════════════════════════════════════════════════ */
.fmp-finder {
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius-card) !important;
  overflow: hidden;
  margin-bottom: 24px !important;
}
.fmp-finder-head {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--border);
  background: var(--primary-50) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fmp-finder-head-label {
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-grey) !important;
  display: flex;
  flex-direction: column;
}

.fmp-section-label-description{
  color: var(--text) !important;
  font-weight: 400;
  text-transform:none;
  letter-spacing:normal;
  font-size: 12px !important;
  width: 100%;
  display: flex;
  justify-content: center;
}

.fmp-finder-steps { display: flex; gap: 4px; }
.fmp-fstep        { width: 20px; height: 4px; border-radius: 2px; background: var(--border); transition: background .2s; }
.fmp-fstep.done   { background: var(--secondary) !important; }
.fmp-fstep.active { background: var(--primary)   !important; }

.fmp-finder-body { padding: 18px !important; }
.fmp-finder-q {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 14px !important;
  line-height: 1.4;
}
.fmp-finder-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 20px;}

.fmp-fopt {
  display: flex;
  align-items: flex-start;
  padding: 12px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  cursor: pointer;
  background: none;
  text-align: left;
  width: 100%;
  transition: border-color .15s, background .15s;
  font-family: inherit;
  height: max-content;
  justify-content: flex-start;
}
.fmp-fopt:hover {
  border-color: var(--primary) !important;
  background: var(--primary-50) !important;
}
.fmp-fopt-icon  { font-size: 17px; color: var(--primary); margin-top: 1px; flex-shrink: 0; }
.fmp-fopt-title { font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important; margin-bottom: 2px !important; }
.fmp-fopt-desc  { font-size: 12px !important; color: var(--text-grey) !important; font-weight: 400;}

/* Result */
.fmp-finder-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fmp-fr-icon  { font-size: 22px; color: var(--primary); display: block; margin-bottom: 6px; }
.fmp-fr-label { font-size: 11px !important; color: var(--text-grey) !important; margin-bottom: 2px !important; }
.fmp-fr-name  { font-size: 17px !important; font-weight: 700 !important; color: var(--text) !important; }
.fmp-fr-desc  { font-size: 12px !important; color: var(--text-grey) !important; margin-top: 4px !important; line-height: 1.5; }

.fmp-fr-reset {
  font-size: 12px !important;
  color: var(--text-grey) !important;
  background: none;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  padding: 7px 14px !important;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.fmp-fr-reset:hover { background: var(--grey-100) !important; border-color: var(--primary) !important; }


/* ══════════════════════════════════════════════════════════════════════
   USER TYPE CARDS
   ══════════════════════════════════════════════════════════════════════ */
.fmp-utype-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin:0 20px 14px 20px !important;
}

.fmp-ucard {
  background: var(--white);
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius-card) !important;
  padding: 14px !important;
  display: flex;
  flex-direction: column;
  transition: opacity .2s, border-color .2s;
}
.fmp-ucard.fmp-active  { border: 2px solid var(--primary) !important; }
.fmp-ucard.fmp-dimmed  { opacity: .35; }

.fmp-uc-badge {
  display: none;
  font-size: 10px !important;
  font-weight: 600;
  background: var(--primary-100) !important;
  color: var(--primary) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
  width: fit-content;
}
.fmp-ucard.fmp-active .fmp-uc-badge { display: block; }

.fmp-uc-adds {
  font-size: 8px !important;
  color: var(--text-grey) !important;
  margin-bottom: 5px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid var(--border);
}
.fmp-uc-adds strong { color: var(--text) !important; }

.fmp-uc-name    { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 3px !important; }
.fmp-uc-tagline { font-size: 11px !important; color: var(--text-grey) !important; line-height: 1.45; margin-bottom: 10px !important; }
.fmp-uc-price   { font-size: 18px !important; font-weight: 700 !important; color: var(--primary) !important; margin-bottom: 1px !important; }
.fmp-uc-price span { font-size: 11px !important; font-weight: 400; color: var(--text-grey) !important; }
.fmp-uc-note    { font-size: 10px !important; color: var(--text-grey) !important; margin-bottom: 10px !important; opacity: .7; }

.fmp-uc-list { 
  list-style: none !important; 
  margin-bottom: 10px !important; 
  padding: 8px 0 0 0;
  margin-top: 0;
  border-top: 1px solid var(--border);
}

.fmp-uc-list li {
  font-size: 11px !important;
  color: var(--text-grey) !important;
  padding: 2px 0 2px 14px !important;
  position: relative;
  line-height: 1.45;
}
.fmp-uc-list li::before { 
  content: '' !important;
  background-image: url('https://portiq.seccommerce.de/wp-content/uploads/2026/05/icon-plus_blue.svg');
  background-repeat: no-repeat;
  position: absolute;
  background-size: contain;
  width: 16px;
  height: 16px;
  left: -3px;
}
.fmp-uc-list li.base::before {
  content: '' !important;
  background-image: url('https://portiq.seccommerce.de/wp-content/uploads/2026/05/icon-check_blue.svg');
  background-repeat: no-repeat;
  background-size: contain;
    position: absolute;
  width: 16px;
  height: 16px;
  display: block;
  left: -3px;
}

.fmp-uc-btn {
  font-size: 12px !important;
  font-weight: 600;
  text-align: center;
  padding: 8px !important;
  background: var(--primary) !important;
  border-radius: var(--border-radius) !important;
  cursor: pointer;
  background: none;
  width: 100%;
  color: var(--white) !important;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.fmp-uc-btn:hover { background: var(--primary-700) !important; color: var(--white) !important; }

.fmp-uc-seal {
  font-size: 10px !important;
  color: var(--text-grey) !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--border);
}
.fmp-uc-seal a { color: var(--primary) !important; text-decoration: none; cursor: pointer; }
.fmp-uc-seal a:hover { text-decoration: underline; }

.fmp-vol-note {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px !important;
  color: var(--text-grey) !important;
  padding: 10px 14px !important;
  background: var(--grey-100) !important;
  border-radius: var(--border-radius) !important;
  margin-bottom: 0 !important;
  line-height: 1.5;
  margin: 0 20px !important;
}
.fmp-vol-note figure.wp-block-image,
.fmp-vol-note figure.wp-block-image img {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px;
  margin: 1px 0 0 !important;
  flex-shrink: 0;
  display: block !important;
}
.fmp-vol-note p { font-size: 11px !important; color: var(--text-grey) !important; margin: 0 !important; line-height: 1.5; }
 


/* ══════════════════════════════════════════════════════════════════════
   COMPARISON TABLE
   ══════════════════════════════════════════════════════════════════════ */
.fmp-cmp-box {
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius-card) !important;
  overflow: hidden;
  margin: 0 20px !important;
}
.fmp-cmp-header {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
}
.fmp-cmp-h-cell {
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 600;
  color: var(--text) !important;
}
.fmp-cmp-h-cell:not(:first-child) { text-align: center; border-left: 1px solid var(--border); }
.fmp-cmp-h-cell .fmp-price     { font-size: 15px !important; font-weight: 700 !important; display: block; margin-top: 2px; color: var(--primary) !important; }
.fmp-cmp-h-cell .fmp-price-sub { font-size: 10px !important; font-weight: 400; color: var(--text-grey) !important; }

.fmp-cmp-row { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; border-top: 1px solid var(--border); }
.fmp-cmp-cell { padding: 9px 14px !important; font-size: 12px !important; display: flex; align-items: center; }
.fmp-cmp-cell:not(:first-child) { justify-content: center; border-left: 1px solid var(--border); }
.fmp-cmp-cell:first-child { color: var(--text-grey) !important; font-size: 11px !important; }

.fmp-cmp-yes { color: var(--primary) !important; font-size: 15px !important; font-weight: 700; }
.fmp-cmp-no  { color: var(--text-grey) !important; font-size: 15px !important; opacity: .4; }
.fmp-cmp-txt { font-size: 11px !important; text-align: center; color: var(--text-grey) !important; }


/* ══════════════════════════════════════════════════════════════════════
   ADD-ON BLOCKS
   ══════════════════════════════════════════════════════════════════════ */
.fmp-addon-2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px 32px !important;
  margin: 40px 20px !important;
}
.fmp-addon-block h4 {
  font-size: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-grey) !important;
  margin-bottom: 8px !important;
}
.fmp-pkg-tbl { width: 100%; border-collapse: collapse; }
.fmp-pkg-tbl td { font-size: 12px !important; padding: 5px 0 !important; border-bottom: 1px solid var(--border); color: var(--text) !important; }
.fmp-pkg-tbl td:last-child { text-align: right; font-weight: 600; }
.fmp-pkg-tbl tr:last-child td { border-bottom: none; }

.fmp-row-a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--border);
  font-size: 12px !important;
  color: var(--text) !important;
}
.fmp-row-a:last-child { border-bottom: none; }
.fmp-row-a .fmp-sub   { font-size: 10px !important; color: var(--text-grey) !important; display: block; }
.fmp-row-a .fmp-price { font-weight: 600; white-space: nowrap; padding-left: 8px; flex-shrink: 0; }

.fmp-ta-box {
  background: var(--primary-50) !important;
  border-radius: var(--border-radius) !important;
  padding: 14px 16px !important;
  margin: 20px !important;
}
.fmp-ta-box h4 {
  font-size: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-grey) !important;
  margin-bottom: 8px !important;
}
.fmp-ta-2col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 32px !important; }
.fmp-ta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--primary-100);
  font-size: 12px !important;
  color: var(--text) !important;
}
.fmp-ta-row:last-child { border-bottom: none; }
.fmp-ta-row .fmp-sub { font-size: 10px !important; color: var(--text-grey) !important; display: block; }
.fmp-ta-row .fmp-tp  { font-weight: 600; white-space: nowrap; text-align: right; flex-shrink: 0; padding-left: 6px; }


/* ══════════════════════════════════════════════════════════════════════
   SEAL SECTION
   ══════════════════════════════════════════════════════════════════════ */
.fmp-bridge {
  border-radius: var(--border-radius-card) !important;
  padding: 16px 20px !important;
  display: flex;
  align-items: center;
  gap: 14px !important;
  margin: 20px !important;
  background: var(--primary-50) !important;
}
.fmp-bridge-icon  { font-size: 22px; color: var(--primary); flex-shrink: 0; }
.fmp-bridge-title { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 3px !important; }
.fmp-bridge-desc  { font-size: 12px !important; color: var(--text-grey) !important; }

.fmp-svar-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.fmp-scard {
  background: var(--white);
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius-card) !important;
  padding: 16px !important;
}
/* .fmp-scard.fmp-hot { border: 2px solid var(--primary) !important; } */

.fmp-slevel-badge {
  display: inline-block;
  font-size: 10px !important;
  font-weight: 600;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-bottom: 8px !important;
}
.fmp-sl-inkl  { background: var(--green-50) !important;    color: #007e5a !important; }
.fmp-sl-fort  { background: var(--primary-50) !important;  color: var(--primary) !important; }
.fmp-sl-qual  { background: var(--primary-100) !important; color: var(--secondary) !important; }

.fmp-scard-icon { font-size: 20px; color: var(--primary); margin-bottom: 8px !important; }
.fmp-scard-name { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 6px !important; line-height: 1.35; }
.fmp-scard-desc { font-size: 11px !important; color: var(--text-grey) !important; line-height: 1.6; }
.fmp-scard-tag  { font-size: 10px !important; color: var(--text-grey) !important; margin-top: 10px !important; padding-top: 8px !important; border-top: 1px solid var(--border); opacity: .65; }

.fmp-use-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
}
.fmp-usg {
  background: var(--primary-50) !important;
  border-radius: var(--border-radius) !important;
  padding: 14px 16px !important;
  display: flex;
  flex-direction: column;
}
.fmp-usg-title { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 0px !important; display: flex; align-items: center; gap: 7px; }
.fmp-usg-title i { font-size: 16px; color: var(--primary); }
.fmp-usg-desc  { font-size: 11px !important; color: var(--text-grey) !important; line-height: 1.5; margin: 5px 0 !important; }
.fmp-usg-price { font-size: 11px !important; color: var(--text) !important;     margin-top: 10px !important; flex: 1;display: flex;  gap: 4px;  align-items: flex-end;}
.fmp-usg-price strong { color: var(--primary) !important; }

.fmp-spkg { width: 100%; border-collapse: collapse; margin-bottom: 12px !important; }
.fmp-spkg th {
  font-size: 10px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-grey) !important;
  padding: 0 10px 10px !important;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.fmp-spkg th:last-child { text-align: right; }
.fmp-spkg td {
  font-size: 12px !important;
  padding: 10px !important;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text) !important;
}
.fmp-spkg td:last-child { text-align: right; font-weight: 600; }
.fmp-spkg tr:last-child td { border-bottom: none; }

.fmp-gui-pill {
  font-size: 10px !important;
  color: var(--text) !important;
  background: var(--primary-50) !important;
  border-radius: 50px !important;
  padding: 1px 6px !important;
  margin-left: 5px;
  vertical-align: middle;
}

.fmp-api-co {
  border-radius: var(--border-radius) !important;
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 20px !important;
  background: var(--primary-50) !important;
}
.fmp-api-left  { display: flex; align-items: center; gap: 10px; }
.fmp-api-icon  { font-size: 18px; color: var(--primary); }
.fmp-api-title { font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; }
.fmp-api-sub   { font-size: 11px !important; color: var(--text-grey) !important; }
.fmp-api-price { font-size: 14px !important; font-weight: 700 !important; text-align: right; white-space: nowrap; color: var(--text) !important; }
.fmp-api-price span { font-size: 10px !important; font-weight: 400; color: var(--text-grey) !important; display: block; }

.fmp-info-note {
  font-size: 11px !important;
  color: var(--text-grey) !important;
  background: var(--grey-100) !important;
  border-radius: var(--border-radius) !important;
  padding: 10px 14px !important;
  line-height: 1.6;
  border: 1px solid var(--border) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .fmp-utype-grid     { grid-template-columns: 1fr 1fr !important; }
  .fmp-shortcut-cards { grid-template-columns: 1fr !important; }
  .fmp-addon-2col     { grid-template-columns: 1fr !important; }
  .fmp-ta-2col        { grid-template-columns: 1fr !important; }
  .fmp-svar-grid      { grid-template-columns: 1fr !important; }
  .fmp-flow-row       { grid-template-columns: 1fr !important; }
  .fmp-use-grid       { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .fmp-utype-grid { grid-template-columns: 1fr !important; }
  .fmp-cmp-header,
  .fmp-cmp-row    { grid-template-columns: 1fr !important; }
  .fmp-cmp-cell:not(:first-child) { border-left: none !important; border-top: 1px solid var(--border) !important; }
}

/* ── Box ─────────────────────────────────────────────────────────── */
.pq-dialog-box {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--border-radius-card);
  width: 100%;
  max-width: 600px;
  margin: 16px;
  padding: 32px 28px 28px;
  animation: pqDlgIn .2s ease;
}
@keyframes pqDlgIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
 
/* ── Close ───────────────────────────────────────────────────────── */
.pq-dialog-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  background: var(--grey-100);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  padding: 0;
}
.pq-dialog-close:hover { background: var(--grey-200); }
.pq-dialog-close img   { width: 24px; height: 24px; opacity: .6; }
 
/* ── Typography ──────────────────────────────────────────────────── */
.pq-dlg-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 6px !important;
}
.pq-dlg-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px !important;
  line-height: 1.2;
}
.pq-dlg-sub {
  font-size: 13px;
  color: var(--text-grey);
  margin: 0 0 22px !important;
  line-height: 1.5;
}
 
/* ── Choice buttons (step 1) ─────────────────────────────────────── */
.pq-dlg-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pq-dlg-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px !important;
  border: 1.5px solid var(--border);
  border-radius: var(--border-radius-card);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: border-color .15s, background .15s, box-shadow .15s;
  height: fit-content;
}
.pq-dlg-choice:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: 0 4px 14px rgba(42,112,233,.08);
}
.pq-dlg-choice-icon {
  width: 40px; height: 40px;
  min-width: 40px;
  border-radius: var(--border-radius);
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.pq-dlg-choice:hover .pq-dlg-choice-icon { background: var(--primary-100); }
.pq-dlg-choice-icon img { width: 20px; height: 20px; }
 
.pq-dlg-choice-body { flex: 1; }
.pq-dlg-choice-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.pq-dlg-choice-desc {
  display: block;
  font-size: 12px;
  color: var(--text-grey);
}
.pq-dlg-choice-arrow {
  font-size: 16px;
  color: var(--primary);
  flex-shrink: 0;
}
 
/* ── Back button (step 2) ────────────────────────────────────────── */
.pq-dlg-back {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-grey);
  cursor: pointer;
  margin-top: -18px;
  padding: 0 !important;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
  margin-bottom: 12px;
}
.pq-dlg-back:hover{ cursor: pointer; }
 
/* ── Form (step 2) ───────────────────────────────────────────────── */
.pq-dlg-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pq-dlg-field { display: flex; flex-direction: column; gap: 4px; }
.pq-dlg-field-full { grid-column: 1 / -1; }
 
.pq-dlg-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-grey);
  letter-spacing: .04em;
}
.pq-dlg-field label span { color: var(--red); }
 
.pq-dlg-field input,
.pq-dlg-field textarea {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--border-radius);
  padding: 9px 12px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.pq-dlg-field input:focus,
.pq-dlg-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(42,112,233,.1);
}
.pq-dlg-field input::placeholder,
.pq-dlg-field textarea::placeholder { color: var(--grey-200); }
 
/* Privacy checkbox */
.pq-dlg-privacy label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-grey);
  font-weight: 400;
  cursor: pointer;
  letter-spacing: 0;
}
.pq-dlg-privacy input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin-top: 1px;
  accent-color: var(--primary);
  border-radius: 3px;
  padding: 0;
}
.pq-dlg-privacy a { color: var(--primary); }
 
/* Error */
.pq-dlg-error {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--red);
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: var(--border-radius);
  padding: 9px 12px;
}
 
/* Submit */
.pq-dlg-submit {
  grid-column: 1 / -1;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  padding: 13px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: background .15s, box-shadow .15s;
  margin-top: 2px;
}
.pq-dlg-submit:hover:not(:disabled) {
  background: var(--primary-700);
  box-shadow: 0 4px 14px rgba(42,112,233,.3);
}
.pq-dlg-submit:disabled { opacity: .6; cursor: not-allowed; }
 
/* ── Success (step 3) ────────────────────────────────────────────── */
.pq-dlg-success {
  text-align: center;
  padding: 16px 0 4px;
}
.pq-dlg-success-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  border: 2px solid var(--green-200);
}
.pq-dlg-close-btn {
  margin-top: 20px;
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.pq-dlg-close-btn:hover { background: var(--primary-700); }

.forminator-checkbox-label{
  font-size: 12px;
}

.forminator-checkbox{
  margin-bottom: 0px !important;
  margin-top: 10px;
}

.forminator-row{
  margin-bottom: 15px !important;
}
 
/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .pq-dialog-box  { padding: 24px 18px 20px; }
  .pq-dlg-form    { grid-template-columns: 1fr; }
}