/*
  FS MPC Modal – UI v1.5
  Minimalista, full responsive, accesible.
*/

:root{
  --fs-mpc-bg: #ffffff;
  --fs-mpc-fg: #0f172a;
  --fs-mpc-muted: rgba(15,23,42,.68);
  --fs-mpc-line: rgba(15,23,42,.10);
  --fs-mpc-soft: rgba(15,23,42,.06);
  --fs-mpc-shadow: 0 18px 55px rgba(0,0,0,.30);
  --fs-mpc-radius: 18px;
}

/* Modal base */
.fs-mpc-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  font-family: inherit;
  color: var(--fs-mpc-fg);
}

.fs-mpc-modal.is-open{display:block}

.fs-mpc-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  transition: opacity .18s ease;
}
.fs-mpc-modal.is-open .fs-mpc-backdrop{opacity:1}

.fs-mpc-dialog{
  position:relative;
  width: min(960px, calc(100% - 24px));
  margin: min(6vh, 42px) auto;
  background: var(--fs-mpc-bg);
  border-radius: var(--fs-mpc-radius);
  box-shadow: var(--fs-mpc-shadow);
  border: 1px solid var(--fs-mpc-line);
  max-height: 88vh;
  overflow:auto;
  outline: none;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.fs-mpc-modal.is-open .fs-mpc-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header */
.fs-mpc-header{
  position: sticky;
  top: 0;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 18px 12px;
  background: var(--fs-mpc-bg);
  border-bottom: 1px solid var(--fs-mpc-line);
  border-top-left-radius: var(--fs-mpc-radius);
  border-top-right-radius: var(--fs-mpc-radius);
}
.fs-mpc-title{margin:0;font-size:22px;line-height:1.15;letter-spacing:-0.01em}
.fs-mpc-subtitle{margin-top:6px;font-size:12px;color:var(--fs-mpc-muted);line-height:1.35}

.fs-mpc-close{
  border:1px solid var(--fs-mpc-line);
  background: var(--fs-mpc-bg);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fs-mpc-close:hover{background: var(--fs-mpc-soft)}

/* Body padding */
.fs-mpc-dialog > *:not(.fs-mpc-header){padding-left: 18px; padding-right: 18px}

/* Prices */
.fs-mpc-prices{
  padding-top: 14px;
  padding-bottom: 8px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.fs-mpc-pricebox{
  border: 1px solid var(--fs-mpc-line);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(15,23,42,.02);
}
.fs-mpc-muted{color:var(--fs-mpc-muted);font-size:12px;margin-bottom:6px}
.fs-mpc-amount{font-weight:750;font-size:18px}

/* Card picker */
.fs-mpc-card-selector{padding-top: 8px; padding-bottom: 8px}
.fs-mpc-card-help{display:block;margin-top:10px;color:var(--fs-mpc-muted);font-size:11px;line-height:1.35}
.fs-mpc-error{color:#b42318;font-size:12px;margin-top:10px}

.fs-mpc-card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.fs-mpc-card-btn{
  appearance:none;
  border: 1px solid var(--fs-mpc-line);
  background: var(--fs-mpc-bg);
  border-radius: 14px;
  padding: 10px 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 48px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.fs-mpc-card-btn:hover{background: rgba(15,23,42,.02); transform: translateY(-1px)}
.fs-mpc-card-btn.is-active{box-shadow: 0 10px 25px rgba(15,23,42,.12); border-color: rgba(15,23,42,.22)}
.fs-mpc-card-btn:focus-visible{outline: 3px solid rgba(59,130,246,.35); outline-offset: 2px}

.fs-mpc-card-logo{
  width: 34px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15,23,42,.06);
  flex: 0 0 auto;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
}

.fs-mpc-card-name{font-size: 13px; font-weight: 650; line-height:1.2}

/* Simple SVG logos as data URIs */
.fs-mpc-card-logo[data-brand="visa"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Cpath d='M9 27l3-14h5l-3 14H9zm20-14l-5 14h-5l-2-10c-.1-.6-.2-.9-.6-1.2-.7-.6-1.9-1.1-2.9-1.3l.1-.4h8c1 0 1.9.7 2.2 1.8l1 6 2.5-7.8h5.7zm7 14H31l5-14h5l-5 14zm22 0h-4.7c-1 0-1.8-.3-2.2-1.2L46 13h5.6l.8 2.2h6.8l.5-2.2h5.1l-6.9 14zM53 23h4l-1.2-5-2.8 5z' fill='%231a1f71'/%3E%3C/svg%3E");}
.fs-mpc-card-logo[data-brand="master"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Ccircle cx='30' cy='20' r='10' fill='%23eb001b'/%3E%3Ccircle cx='42' cy='20' r='10' fill='%23f79e1b' fill-opacity='.95'/%3E%3Cpath d='M36 12a10 10 0 000 16 10 10 0 000-16z' fill='%23ff5f00'/%3E%3C/svg%3E");}
.fs-mpc-card-logo[data-brand="amex"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Cpath d='M10 12h52v16H10V12z' fill='%23006fcf'/%3E%3Cpath d='M14 16h8l1 2h-6l-.4 1h6l1.4 5h-3l-.3-1h-3.7l-.3 1h-3l3-8zm4 5l-.7-2-.7 2H18zm12-5h3l2 3 2-3h3v8h-3v-3l-2 3-2-3v3h-3v-8zm18 0h8v2h-5v1h5v2h-5v1h5v2h-8v-8z' fill='%23ffffff'/%3E%3C/svg%3E");}
.fs-mpc-card-logo[data-brand="cabal"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Cpath d='M14 25c0-6 4.9-11 11-11h7v4h-7c-3.9 0-7 3.1-7 7s3.1 7 7 7h7v4h-7c-6.1 0-11-4.9-11-11z' fill='%230d6efd'/%3E%3Cpath d='M44 14h14v4H44v-4zm0 7h14v4H44v-4zm0 7h14v4H44v-4z' fill='%230d6efd' opacity='.85'/%3E%3C/svg%3E");}
.fs-mpc-card-logo[data-brand="naranja"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Cpath d='M14 28V12h6l8 9v-9h6v16h-6l-8-9v9h-6z' fill='%23ff6a00'/%3E%3Cpath d='M44 12h14v4H50v2h8v4h-8v6h-6V12z' fill='%23ff6a00' opacity='.9'/%3E%3C/svg%3E");}
.fs-mpc-card-logo[data-brand="argencard"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Cpath d='M14 28l6-16h6l6 16h-6l-.7-2H20.7l-.7 2h-6zm8-6h2l-1-3-1 3z' fill='%232563eb'/%3E%3Cpath d='M40 12h18v4H46v2h10v4H46v2h12v4H40V12z' fill='%232563eb' opacity='.9'/%3E%3C/svg%3E");}
.fs-mpc-card-logo[data-brand="diners"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40' viewBox='0 0 72 40'%3E%3Crect width='72' height='40' rx='8' fill='%23ffffff'/%3E%3Ccircle cx='26' cy='20' r='10' fill='%230b3a82'/%3E%3Ccircle cx='46' cy='20' r='10' fill='%230b3a82' opacity='.15'/%3E%3Cpath d='M26 10a10 10 0 000 20 10 10 0 000-20zm0 3c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z' fill='%23ffffff'/%3E%3Cpath d='M42 14h12v3H42v-3zm0 5h12v3H42v-3zm0 5h12v3H42v-3z' fill='%230b3a82'/%3E%3C/svg%3E");}

/* Table */
.fs-mpc-tablewrap{
  margin-top: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--fs-mpc-line);
  border-radius: 16px;
  overflow:hidden;
}
.fs-mpc-table{width:100%;border-collapse:collapse}
.fs-mpc-table th,.fs-mpc-table td{padding:12px 14px;border-bottom:1px solid var(--fs-mpc-soft);text-align:left;vertical-align:middle}
.fs-mpc-table th{background: rgba(15,23,42,.03);font-weight:700;font-size:12px;color: rgba(15,23,42,.78)}
.fs-mpc-table tr:last-child td{border-bottom:0}

.fs-mpc-footnote{margin: 0 0 18px;color: var(--fs-mpc-muted);font-size:12px;line-height:1.45}

/* Screen reader only */
.fs-mpc-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Responsive tweaks */
@media (max-width: 780px){
  .fs-mpc-prices{grid-template-columns: 1fr;}
}

@media (max-width: 560px){
  .fs-mpc-dialog{width: calc(100% - 16px); margin: 10px auto; max-height: calc(100vh - 20px)}
  .fs-mpc-header{padding: 14px 14px 10px}
  .fs-mpc-dialog > *:not(.fs-mpc-header){padding-left: 14px; padding-right: 14px}

  /* Table -> cards */
  .fs-mpc-table thead{display:none}
  .fs-mpc-table, .fs-mpc-table tbody, .fs-mpc-table tr{display:block;width:100%}
  .fs-mpc-table tr{padding:10px 12px;border-bottom:1px solid var(--fs-mpc-soft)}
  .fs-mpc-table tr:last-child{border-bottom:0}
  .fs-mpc-table td{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border:0}
  .fs-mpc-table td::before{content: attr(data-label); color: var(--fs-mpc-muted); font-size:12px; padding-right:10px}
}