/* ── TRIGGER BUTTON ── */
.dbank-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #000000;
    border: none;
    cursor: pointer;
    font-family: 'Geologica', sans-serif;
    font-size: 14px;
    color: #FFFFFF; /* white text on black bg */
    border-radius: 0px 15px 15px 15px;
    padding: 10px 24px;
}
.dbank-menu-trigger:hover,
.dbank-menu-trigger:focus,
.dbank-menu-trigger:active {
    background-color: #000000; /* no hover effect */
    color: #FFFFFF;            /* keep text white */
    box-shadow: none;
    opacity: 1;
}
.dbank-menu-trigger__icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* ── OVERLAY ── */
.bpm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background-color: rgba(8, 18, 38, 0.92);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Anchor popup from a consistent top offset to avoid vertical jumping */
    align-items: flex-start;          /* top align instead of center */
    justify-content: center;          /* keep horizontal centering */
    padding: 120px 24px 40px;         /* top space below header/close; bottom safe space */
    box-sizing: border-box;
    opacity: 0;
    /* circle reveal animation from top-left */
    /* start reveal near top-right (close button side) */
    clip-path: circle(0 at calc(100% - 24px) 20px);
    -webkit-clip-path: circle(0 at calc(100% - 24px) 20px);
    transition: opacity 0.3s ease, background-image 0.35s ease, clip-path 0.6s ease-out;
}
.bpm-overlay.is-open   { display: flex; }
.bpm-overlay.is-visible { opacity: 1; clip-path: circle(150% at calc(100% - 24px) 20px); -webkit-clip-path: circle(150% at calc(100% - 24px) 20px); }

/* Физически лица: gradient background */
.bpm-overlay.bpm-bg-fiz {
    background-image: linear-gradient(252deg, #C3DDF8 2.36%, #FFFBF4 84.58%);
}

/* Popup header logo (top-left inside popup) */
.bpm-logo {
    position: absolute;
    top: 20px;
    left: 24px;
    z-index: 11;
    display: block;
}
.bpm-logo img {
    display: block;
    width: 240px;
    height: auto;
    margin-left: 72px;
    margin-top: -10px;
}

/* ── POPUP ── */
.bpm-popup {
    width: 90vw;
    max-width: 960px;
    height: auto; /* allow popup to size naturally to content */
    display: flex;
    border-radius: 37px;
    overflow: visible; /* allow tabs to extend outside */
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Geologica', sans-serif;
    position: relative;
}
.bpm-overlay.is-visible .bpm-popup { transform: translateY(0) scale(1); }

/* ── CLOSE ── */
.bpm-close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 11;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FDB913; /* circle background color */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #081226; /* high contrast against yellow */
    font-size: 16px;
    line-height: 1;
    transition: none;
}
.bpm-close:hover { background: #FDB913; color: #081226; }

/* ── LEFT TABS ── */
.bpm-tabs {
    width: 22%;
    min-width: 160px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  /* start from top, not vertically centered */
    padding: 20px 0;              /* align top with right panel padding */
    gap: 4px;
    flex-shrink: 0;
    position: relative;
    left: -10%; /* shift tablist slightly to the left */
}
.bpm-tab {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0; /* no icon gap */
    padding: 18px 12px; /* move content slightly more left */
    color: rgba(255,255,255,0.5);
    font-size: 18px; /* larger font */
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap; /* prevent wrapping to two lines */
    border-left: 0;
    border-radius: 0 6px 6px 0;
    transition: all 0.22s ease;
    position: relative; /* for active arrow icon */
}
.bpm-tab:hover { color: rgba(255,255,255,0.9); background: none; }
.bpm-tab.is-active {
    color: rgba(255,255,255,0.9);
    background: none;
    border-left-color: transparent;
}
/* add right-side arrow-in-circle for active tab */
.bpm-tab.is-active { padding-right: 56px; }
.bpm-tab.is-active::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230345A5'/%3E%3Cpath d='M10 7l5 5-5 5' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Hide left-side icons in tab list */
.bpm-tab-icon { display: none !important; }
/* no special background change for the left icon on active */
.bpm-tab-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 20px; }

/* ── RIGHT PANEL ── */
.bpm-right {
    flex: 0 0 auto;            /* do not stretch */
    width: max-content;        /* size to longest menu item */
    max-width: 70vw;           /* keep within viewport */
    background: rgba(255,255,255,0.05);
    border: 3px solid rgba(255,255,255,0.36);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: 20px;
    display: inline-flex;
    flex-direction: column;
}
.bpm-content {
    padding: 20px; /* equal padding on all sides */
    flex: 0 0 auto;            /* content-sized */
    overflow-y: auto;
    width: max-content;        /* match list width */
}

.bpm-panel { display: none; animation: bpmFade 0.25s ease; }
.bpm-panel.is-active { display: block; }

@keyframes bpmFade {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.bpm-panel-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #C8A84B;
    margin: 0 0 20px;
}
.bpm-list { display: flex; flex-direction: column; gap: 4px; width: max-content; }
.bpm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 6px;
    text-decoration: none;
    color: rgba(255,255,255,0.65);
    font-size: 16px; /* text size */
    font-weight: 400;
    transition: all 0.18s ease;
    border: 1px solid transparent;
    white-space: nowrap; /* prevent wrapping so width reflects longest item */
}
.bpm-item:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
.bpm-item .bpm-item-icon {
    font-size: 18px; /* icon size */
    margin-right: 0; /* use flex gap for spacing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0345A5; /* default icon color (Физически лица override below) */
    flex-shrink: 0;
}
.bpm-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #C8A84B;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.18s;
}
.bpm-item:hover .bpm-item-dot { opacity: 1; }

/* Физически лица: black text + blue icons */
#bpmPanel-fizicheski .bpm-item { color: #000000; }
#bpmPanel-fizicheski .bpm-item:hover { color: #000000; background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
#bpmPanel-fizicheski .bpm-item-icon { color: #0345A5; }

/* Бизнес клиенти: white text + yellow icons */
#bpmPanel-biznes .bpm-item { color: #FFFFFF; }
#bpmPanel-biznes .bpm-item:hover { color: #FFFFFF; background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
#bpmPanel-biznes .bpm-item-icon { color: #FDB913; }

/* Back control (outside glass panel, only in detail mode) */
.bpm-back {
    position: static; /* no absolute positioning */
    z-index: 12;
    /* Always reserve space to prevent layout shift; toggle visibility only */
    display: inline-flex;
    visibility: hidden;            /* hidden by default */
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    padding: 0;
    color: #000000; /* black label text */
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    pointer-events: none;          /* avoid focus/click when hidden */
}
.bpm-overlay.is-biznes .bpm-back { color: #FFFFFF; }
.bpm-overlay.is-detail .bpm-back { visibility: visible; pointer-events: auto; }
.bpm-back-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0345A5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bpm-back-icon i { color: #FFFFFF; font-size: 14px; line-height: 1; }

/* No hover effect for back button */
.bpm-back:hover,
.bpm-back:focus,
.bpm-back:active {
    color: #000000 !important; /* keep black on states (default) */
    background: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    outline: none !important;
}
.bpm-overlay.is-biznes .bpm-back:hover,
.bpm-overlay.is-biznes .bpm-back:focus,
.bpm-overlay.is-biznes .bpm-back:active {
    color: #FFFFFF !important; /* keep white on states for business */
}
.bpm-back:hover .bpm-back-icon,
.bpm-back:focus .bpm-back-icon,
.bpm-back:active .bpm-back-icon {
    background: #0345A5 !important;
}

/* Detail view toggling */
.bpm-detail { display: none; padding: 20px; }
.bpm-overlay.is-detail .bpm-content { display: none; }
.bpm-overlay.is-detail .bpm-detail { display: block; }

/* Detail list styles */
.bpm-detail-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bpm-detail-item {
    display: block;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 14px;
    width: 100%; /* fill list width for consistent item width */
}
/* Fizicheski detail colors (black text) */
#bpmDetail-potrebitelski { width: 600px; max-width: 600px; }
#bpmDetail-potrebitelski .bpm-detail-item { color: #000000; }
#bpmDetail-potrebitelski .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-potrebitelski .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-zhilishtni .bpm-detail-item { color: #000000; }
#bpmDetail-zhilishtni .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-zhilishtni .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-zastrahovki .bpm-detail-item { color: #000000; }
#bpmDetail-zastrahovki .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-zastrahovki .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-smetki { max-width: 600px; }
#bpmDetail-smetki .bpm-detail-item { color: #000000; }
#bpmDetail-smetki .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-smetki .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-dplus .bpm-detail-item { color: #000000; }
#bpmDetail-dplus .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-dplus .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-depoziti { max-width: 600px; }
#bpmDetail-depoziti .bpm-detail-item { color: #000000; }
#bpmDetail-depoziti .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-depoziti .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-seifove { max-width: 600px; }
#bpmDetail-seifove .bpm-detail-item { color: #000000; }
#bpmDetail-seifove .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-seifove .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-razplashtania { max-width: 600px; }
#bpmDetail-razplashtania .bpm-detail-item { color: #000000; }
#bpmDetail-razplashtania .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-razplashtania .bpm-detail-sub { font-weight: 300; opacity: 0.8; font-size: 14px; margin-top: 4px; }
#bpmDetail-biz-malak { max-width: 600px; }
#bpmDetail-biz-malak .bpm-detail-item { color: #FFFFFF; }
#bpmDetail-biz-malak .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-biz-malak .bpm-detail-sub { font-weight: 300; opacity: 0.85; font-size: 14px; margin-top: 4px; color: #FFFFFF; }
#bpmDetail-biz-korporativni { max-width: 600px; }
#bpmDetail-biz-korporativni .bpm-detail-item { color: #FFFFFF; }
#bpmDetail-biz-korporativni .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-biz-korporativni .bpm-detail-sub { font-weight: 300; opacity: 0.85; font-size: 14px; margin-top: 4px; color: #FFFFFF; }
#bpmDetail-biz-obshtini { max-width: 600px; }
#bpmDetail-biz-obshtini .bpm-detail-item { color: #FFFFFF; }
#bpmDetail-biz-obshtini .bpm-detail-title { font-weight: 600; font-size: 16px; }
#bpmDetail-biz-obshtini .bpm-detail-sub { font-weight: 300; opacity: 0.85; font-size: 14px; margin-top: 4px; color: #FFFFFF; }
#bpmDetail-zhilishtni { max-width: 600px; }

/* Картови продукти: 3-column layout (narrower columns) */
#bpmDetail-kartovi { color: #000000; }
.bpm-detail-grid { display: grid; grid-template-columns: repeat(3, 220px); gap: 16px; align-items: start; }
.bpm-detail-kartovi .bpm-col-title { font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.bpm-col-title--spaced { margin-top: 20px; }
.bpm-detail-kartovi .bpm-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bpm-detail-kartovi .bpm-card-img { width: 100%; background: none; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bpm-detail-kartovi .bpm-card-img img { display: block; width: 100%; height: auto; object-fit: contain; }
.bpm-detail-kartovi .bpm-card-name { font-weight: 500; font-size: 15px; }
.bpm-detail-kartovi .bpm-list-plain { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bpm-detail-kartovi .bpm-list-plain li { font-size: 15px; }

@media (max-width: 900px) {
  .bpm-detail-grid { grid-template-columns: 1fr; }
  .bpm-detail-kartovi .bpm-card-img { width: 100%; height: 140px; }
}
.bpm-right-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Unify width for all single-column detail lists (keep cards grid auto) */
#bpmDetail-zhilishtni,
#bpmDetail-zastrahovki,
#bpmDetail-smetki,
#bpmDetail-dplus,
#bpmDetail-depoziti,
#bpmDetail-seifove,
#bpmDetail-razplashtania,
#bpmDetail-biz-malak,
#bpmDetail-biz-korporativni,
#bpmDetail-biz-obshtini {
  width: 600px;
  max-width: 600px;
}

@media (max-width: 700px) {
  #bpmDetail-potrebitelski,
  #bpmDetail-zhilishtni,
  #bpmDetail-zastrahovki,
  #bpmDetail-smetki,
  #bpmDetail-dplus,
  #bpmDetail-depoziti,
  #bpmDetail-seifove,
  #bpmDetail-razplashtania,
  #bpmDetail-biz-malak,
  #bpmDetail-biz-korporativni,
  #bpmDetail-biz-obshtini {
    width: 100%;
    max-width: 600px;
  }
}

/* Responsive adjustments to keep top offset comfortable on smaller viewports */
@media (max-width: 680px) {
  .bpm-overlay {
    padding: 72px 12px 20px;
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .bpm-logo {
    position: fixed;
    top: 14px;
    left: 12px;
  }

  .bpm-logo img {
    max-width: 108px;
  }

  .bpm-close {
    position: fixed;
    top: 14px;
    right: 12px;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .bpm-popup {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
    border-radius: 0;
    margin: 4px auto 0;
    align-items: start !important;
    justify-items: center !important;
  }

  .bpm-tabs {
    width: min(100%, 560px) !important;
    min-width: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    gap: 8px;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch;
    order: 1;
    justify-content: center;
    margin: 0 auto !important;
    max-width: 560px !important;
  }

  .bpm-tab-divider {
    display: none;
  }

  .bpm-tab {
    flex: initial;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 14px 16px;
    font-size: 15px;
    white-space: normal;
    line-height: 1.3;
    border-radius: 16px;
    color: rgba(255,255,255,0.78);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
  }

  .bpm-tab:hover {
    background: rgba(255,255,255,0.12);
  }

  .bpm-tab.is-active {
    padding-right: 16px;
    color: #FFFFFF;
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.2);
  }

  .bpm-tab.is-active::after {
    display: none;
  }

  .bpm-right-wrap {
    width: 100% !important;
    gap: 12px;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto !important;
  }

  .bpm-back {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    font-size: 14px;
    justify-content: flex-start;
    margin: 0 auto !important;
  }

  .bpm-right {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    min-width: 0 !important;
    display: flex !important;
    overflow: hidden;
    border-radius: 18px;
    margin: 0 auto !important;
    flex: 0 1 auto !important;
  }

  .bpm-content,
  .bpm-detail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 0 auto !important;
  }

  .bpm-content,
  .bpm-detail {
    padding: 16px;
  }

  .bpm-list {
    width: 100% !important;
  }

  .bpm-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px;
    font-size: 15px;
    white-space: normal !important;
    line-height: 1.35;
    align-items: flex-start;
  }

  .bpm-item-dot {
    display: none;
  }

  .bpm-item .bpm-item-icon {
    margin-top: 2px;
  }

  .bpm-detail-item {
    padding: 12px;
  }

  .bpm-detail-title {
    font-size: 15px !important;
    line-height: 1.3;
  }

  .bpm-detail-sub {
    font-size: 13px !important;
    line-height: 1.5;
  }

  .bpm-detail-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .bpm-detail-kartovi .bpm-card-img {
    height: 110px;
  }

  #bpmDetail-potrebitelski,
  #bpmDetail-zhilishtni,
  #bpmDetail-zastrahovki,
  #bpmDetail-smetki,
  #bpmDetail-dplus,
  #bpmDetail-depoziti,
  #bpmDetail-seifove,
  #bpmDetail-razplashtania,
  #bpmDetail-biz-malak,
  #bpmDetail-biz-korporativni,
  #bpmDetail-biz-obshtini {
    width: 100%;
    max-width: 100%;
  }

  .bpm-overlay.is-detail .bpm-right {
    width: 100%;
  }
}
@media (max-height: 700px) {
  .bpm-overlay { padding-top: 80px; }
}

@media (max-width: 420px) {
  .bpm-overlay {
    padding-left: 10px;
    padding-right: 10px;
  }

  .bpm-tab {
    padding: 12px 10px;
    font-size: 14px;
  }

  .bpm-content,
  .bpm-detail {
    padding: 14px;
  }

  .bpm-item {
    font-size: 14px;
    gap: 10px;
  }
}