/* PayLogic terminal cards + modal. Themed to match the site's purple-gradient cards
   (light: #e9d8fd -> #c99efa, dark: #2a1a43 -> #6740a5) and follows data-bs-theme. */
.pl-card, .pl-modal, .pl-termwrap {
    --pl-bg: linear-gradient(160deg, #f3e8ff 0%, #e9d8fd 45%, #c99efa 100%);
    --pl-fg: #2b1650;
    --pl-sub: rgba(43,22,80,.75);
    --pl-mute: rgba(43,22,80,.6);
    --pl-accent: #59319e;
    --pl-panel: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.5) 100%);
    --pl-imgbg: radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), rgba(201,158,250,.35) 75%);
    --pl-line: rgba(111,66,193,.4);
    --pl-pill: rgba(111,66,193,.15);
    --pl-track: rgba(111,66,193,.22);
    --pl-thumb: #6f42c1;
    --pl-free: #92400e;
    --pl-free-bg: rgba(245,158,11,.25);
    --pl-free-line: #d97706;
    --pl-shadow: rgba(111,66,193,.22);
}
[data-bs-theme=dark] .pl-card, [data-bs-theme=dark] .pl-modal, [data-bs-theme=dark] .pl-termwrap {
    --pl-bg: linear-gradient(160deg, #2a1a43 0%, #45297a 55%, #6740a5 100%);
    --pl-fg: #fff;
    --pl-sub: rgba(255,255,255,.72);
    --pl-mute: rgba(255,255,255,.55);
    --pl-accent: #dccbff;
    --pl-panel: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 100%);
    --pl-imgbg: radial-gradient(circle at 50% 40%, rgba(176,132,255,.4), rgba(255,255,255,.04) 70%);
    --pl-line: rgba(176,132,255,.4);
    --pl-pill: rgba(176,132,255,.2);
    --pl-track: rgba(255,255,255,.18);
    --pl-thumb: #a78bfa;
    --pl-free: #fbbf24;
    --pl-free-bg: rgba(251,191,36,.18);
    --pl-free-line: #fbbf24;
    --pl-shadow: rgba(0,0,0,.35);
}

.pl-card { position: relative; overflow: hidden; border-radius: var(--bs-border-radius-xl, 1rem); padding: 3rem 2.5rem; margin: 2rem 0; background: var(--pl-bg); border: 2px solid var(--pl-line); color: var(--pl-fg); box-shadow: 0 24px 60px var(--pl-shadow); }
.pl-termwrap { border-radius: var(--bs-border-radius-xl, 1rem); padding: .9rem; background: var(--pl-bg); border: 1.5px solid var(--pl-line); color: var(--pl-fg); }
.pl-sub { color: var(--pl-sub); }
@media (max-width: 767px) { .pl-card { padding: 2rem 1.25rem; } }

#plTerminals { display: flex; flex-direction: column; gap: .5rem; }
.pl-term-card { display: grid; grid-template-columns: 96px 1fr auto; column-gap: 1rem; align-items: center; text-align: left; padding: .7rem 1.1rem; border-radius: var(--bs-border-radius-xl, 1rem); background: var(--pl-panel); border: 1px solid var(--pl-line); color: var(--pl-fg); box-shadow: 0 10px 26px var(--pl-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; }
.pl-term-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px var(--pl-shadow), 0 0 0 4px var(--pl-pill); }
.pl-term-card.is-free { border-color: var(--pl-free-line); border-width: 2px; }
.pl-term-img { grid-column: 1; grid-row: 1 / span 4; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: var(--bs-border-radius-lg, .5rem); background: var(--pl-imgbg); }
.pl-term-img img { max-height: 84%; max-width: 84%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.3)); }
.pl-term-name { grid-column: 2; grid-row: 1; font-size: 1.1rem; font-weight: 700; margin: 0 0 .1rem; color: var(--pl-fg); }
.pl-term-spec { grid-column: 2; grid-row: 2; font-size: .8rem; color: var(--pl-sub); margin-bottom: .3rem; }
.pl-term-note { grid-column: 2; grid-row: 3; font-size: .78rem; color: var(--pl-mute); margin-top: .15rem; }
.pl-term-more { grid-column: 2; grid-row: 4; justify-self: start; margin-top: .2rem; padding: 0; background: none; border: 0; color: var(--pl-accent); font-size: .8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pl-term-more:hover { color: var(--pl-fg); }
.pl-term-price { grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: end; display: inline-block; padding: .3rem 1.1rem; border-radius: 99px; background: var(--pl-pill); font-size: 1.5rem; font-weight: 800; color: var(--pl-accent); }
.pl-term-swivel { grid-column: 3; grid-row: 3 / span 2; justify-self: end; align-self: start; text-align: right; font-size: .8rem; color: var(--pl-sub); margin-top: .25rem; }
.pl-term-card:not(:has(.pl-term-swivel)) .pl-term-price { grid-row: 1 / span 4; align-self: center; }
.pl-term-card.is-free .pl-term-price { background: var(--pl-free-bg); color: var(--pl-free); }
@media (max-width: 575px) {
    .pl-term-card { grid-template-columns: 80px 1fr; }
    .pl-term-img { grid-row: 1 / span 6; align-self: start; }
    .pl-term-card .pl-term-price, .pl-term-card:not(:has(.pl-term-swivel)) .pl-term-price { grid-column: 2; grid-row: 5; justify-self: start; align-self: start; margin-top: .4rem; font-size: 1.2rem; padding: .2rem .9rem; }
    .pl-term-card .pl-term-swivel { grid-column: 2; grid-row: 6; justify-self: start; align-self: start; text-align: left; }
}

.pl-modal { border-radius: var(--bs-border-radius-xl, 1rem); color: var(--pl-fg); background: var(--pl-bg); border: 2px solid var(--pl-line); padding: .5rem; }
[data-bs-theme=dark] .pl-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.pl-modal-img { border-radius: var(--bs-border-radius-lg, .5rem); padding: 1.5rem; background: var(--pl-imgbg); }
.pl-modal-img img { max-height: 220px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.pl-modal-specs { list-style: none; padding: 0; margin: 0 0 1rem; }
.pl-modal-specs li { padding: .45rem 0; border-bottom: 1px solid var(--pl-line); font-size: .9rem; }
.pl-modal-specs li b { color: var(--pl-accent); display: inline-block; min-width: 7.5rem; }
.pl-modal-price { display: inline-block; padding: .4rem 1.1rem; border-radius: 99px; background: var(--pl-pill); color: var(--pl-accent); font-weight: 700; }