/* Payment Network Navigator — extracted from Inputs/PNN.html.
   Class names are PNN-specific so no need for additional scoping. The host
   page just writes <pnn-diagram></pnn-diagram> and links this file. */

.pnn-component {
  display: block;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  color: #070e3b;
}

.svg-master-container { position: relative; width: 100%; margin: 0 auto; }
.svg-master-container svg { width: 100%; height: auto; display: block; }

.sector-group { cursor: pointer; transition: opacity 500ms cubic-bezier(.4,0,.2,1), filter 500ms cubic-bezier(.4,0,.2,1); }
/* Dimmed states tuned to ~50% of the original effect: clear emphasis on
   the selected sector / block / line without greying out everything else. */
.circle-dimmed .sector-group { opacity: .64; filter: saturate(.65); }
.circle-dimmed .sector-group.sector-active { opacity: 1; filter: saturate(1.05) brightness(1.06) drop-shadow(0 0 12px rgba(0,0,0,.22)); }
.sector-group.sector-linked { opacity: 1 !important; filter: saturate(1.08) brightness(1.04) drop-shadow(0 0 6px rgba(0,0,0,.12)) !important; }
.diagram-block { transition: opacity 450ms cubic-bezier(.4,0,.2,1), filter 450ms cubic-bezier(.4,0,.2,1); }
.blocks-dimmed .diagram-block { opacity: .63; filter: saturate(.60); }
.blocks-dimmed .diagram-block.block-active { opacity: 1; filter: none; }
.connector-line { transition: opacity 450ms cubic-bezier(.4,0,.2,1), filter 450ms cubic-bezier(.4,0,.2,1); }
.lines-dimmed .connector-line { opacity: .58; filter: saturate(.55); }
.lines-dimmed .connector-line.line-active { opacity: 1; filter: none; }

.service-link { cursor: pointer; transition: transform 400ms cubic-bezier(.4,0,.2,1); pointer-events: all; }
.service-link:hover tspan { text-decoration: underline; fill: #FF9933 !important; }
.service-title { font-weight: bold; font-size: 22px; }

.custom-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(32, 33, 36, 0.85); z-index: 999999;
  justify-content: center; align-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: 'Open Sans', sans-serif;
}
.custom-modal-overlay.is-open { display: flex; }
.custom-modal-box {
  background: #fff; padding: 40px;
  border-radius: 20px; max-width: 1100px; width: 90%;
  position: relative; box-shadow: 0 30px 100px rgba(0,0,0,0.5);
  max-height: 85vh; overflow-y: auto;
}
.custom-modal-box::-webkit-scrollbar { width: 10px; }
.custom-modal-box::-webkit-scrollbar-track { background: transparent; border-radius: 20px; }
.custom-modal-box::-webkit-scrollbar-thumb { background: #c0bfce; border-radius: 20px; }
.modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 100000;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5f6c7c;
  font: inherit;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-appearance: none;
  transition: color .2s ease, transform .2s ease;
}
.modal-close-btn:hover { color: #FF9933; }
.modal-close-btn:focus { outline: 0; }
.modal-close-btn:focus-visible { outline: 2px solid #FF9933; outline-offset: 2px; border-radius: 4px; }
.modal-close-btn:active { transform: scale(0.94); }
.modal-category-tag { color: #f93; font-size: 12px; font-weight: 500; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 1.5px; }
.modal-title-text { font-size: 30px; font-weight: 400; color: #070e3b; margin-bottom: 25px; border-bottom: 2px solid #f93; padding-bottom: 15px; line-height: 1.2; }
.modal-body-text { font-size: 16px; line-height: 1.6; color: #5F6C7C; }
.modal-body-text p { margin: 0 0 1em; } .modal-body-text p:last-child { margin-bottom: 0; }
.modal-bonus-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; padding-top: 45px; }
.bonus-column { display: flex; flex-direction: column; }
.bonus-cell-top { background: #f8f9fa; border-radius: 8px 8px 0 0; padding: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; height: 60px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: #070e3b; text-transform: uppercase; }
.bonus-cell-top img { max-width: 90%; max-height: 30px; object-fit: contain; }
.bonus-cell-bottom { background: #fff; border-radius: 0 0 8px 8px; padding: 15px 10px; border: 1px solid #ddd; border-top: none; font-size: 14px; color: #5F6C7C; flex-grow: 1; display: flex; align-items: center; justify-content: center; line-height: 1.4; text-align: center; }

@media (max-width: 768px) {
  .modal-bonus-grid { grid-template-columns: repeat(2, 1fr); }
  .pnn-stats { gap: 30px; }
  .pnn-stat .num { font-size: 44px; }
  .pnn-header h1 { font-size: 28px; }
  .custom-modal-box { padding: 25px; }
  .modal-title-text { font-size: 22px; }
}

/* ========================================================================== */
/*  Responsive switch: desktop <=> mobile at 768px                            */
/* ========================================================================== */
.es-mobile-root { display: none; }

@media (max-width: 768px) {
  .svg-master-container { display: none; }
  .pnn-intro p { font-size: 15px; }
  .es-mobile-root {
    display: block;
    width: 100%;
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    position: relative;
    margin-top: 20px;
  }
  .es-m-container {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; background: #fff;
  }
  .es-m-visual {
    width: 100%; max-width: 500px; margin: 0 auto;
    position: sticky; top: -20px; z-index: 1;
  }
  .es-m-content-box {
    width: 100%; background: #fff;
    padding: 35px 25px;
    border-radius: 30px 30px 0 0;
    border: 1px solid #eef0f1;
    min-height: 400px;
    box-sizing: border-box;
    margin-top: -30px;
    position: relative; z-index: 10;
    box-shadow: 0 -20px 50px rgba(7, 14, 59, 0.08);
    transition: margin-top 0.4s ease;
  }
  .es-m-title {
    font-size: 24px; color: #070e3b; font-weight: 400;
    margin: 0 0 15px;
    border-bottom: 2px solid #FF9933;
    padding-bottom: 8px;
    display: inline-block;
  }
  .es-m-intro {
    color: #5f6c7c; font-size: 16px; margin: 0 0 20px;
  }
  .es-m-legend-item {
    display: flex; align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
  }
  .es-m-legend-dot {
    width: 14px; height: 14px; border-radius: 3px; margin-right: 15px;
    flex-shrink: 0;
  }
  .es-m-legend-text { font-size: 18px; color: #070e3b; flex-grow: 1; }
  .es-m-legend-chev { color: #FF9933; font-weight: bold; font-size: 22px; }
  .es-m-back {
    background: none; border: none; color: #FF9933; font-weight: 600;
    cursor: pointer; padding: 0; margin-bottom: 20px;
    font-size: 14px; display: block; text-align: left;
    width: 100%; font-family: inherit; letter-spacing: 1px;
  }
  .es-m-group-name {
    font-weight: 600; font-size: 14px; text-transform: uppercase;
    margin: 25px 0 10px; color: #070e3b;
  }
  .es-m-item {
    padding: 15px 0 15px 15px;
    border-bottom: 1px solid #eee;
    color: #5f6c7c; cursor: pointer; font-size: 18px;
  }
  .es-m-sector { transition: all 0.3s ease; cursor: pointer; }
  .es-m-sector-group.active .es-m-sector {
    filter: brightness(1.05);
    stroke: #070e3b; stroke-width: 2px;
  }
}