/* TemplateXPress cards. Every color is a CSS variable, so the Elementor widget (or the theme) can restyle it. */
.txp-cards{--txp-accent:#23B531;--txp-accent-fg:#fff;--txp-fg:#0C1630;--txp-muted:#55627D;--txp-card:#fff;--txp-line:#DDE4F2;--txp-radius:16px;--txp-cols:3;color:var(--txp-fg)}
.txp-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.txp-filter button{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--txp-line);background:transparent;color:var(--txp-muted);cursor:pointer;transition:.2s}
.txp-filter button:hover{color:var(--txp-fg)}
.txp-filter button.on{background:var(--txp-fg);border-color:var(--txp-fg);color:var(--txp-card)}
.txp-grid{display:grid;grid-template-columns:repeat(var(--txp-cols),minmax(0,1fr));gap:22px}
.txp-card{display:flex;flex-direction:column;background:var(--txp-card);border:1px solid var(--txp-line);border-radius:var(--txp-radius);overflow:hidden;box-shadow:0 20px 50px -32px rgba(12,22,48,.35);transition:transform .25s,box-shadow .25s}
.txp-card:hover{transform:translateY(-4px);box-shadow:0 30px 70px -30px rgba(12,22,48,.35)}
.txp-card[hidden]{display:none}
.txp-thumb{aspect-ratio:16/10;overflow:hidden;background:#F6F8FD;border-bottom:1px solid var(--txp-line)}
.txp-img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.txp-ph{display:flex;align-items:flex-end;padding:16px;color:#fff;font-weight:800;font-size:20px}
.txp-body{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;flex:1}
.txp-tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--txp-muted);background:#F1F4FB;border-radius:999px;padding:4px 10px}
.txp-title{margin:0;font-size:19px;line-height:1.25;color:var(--txp-fg)}
.txp-desc{margin:0;color:var(--txp-muted);font-size:14.5px;line-height:1.5;flex:1}
.txp-acts{display:flex;gap:10px;margin-top:8px}
.txp-btn{flex:1;display:inline-flex;justify-content:center;align-items:center;padding:11px 14px;border-radius:12px;font-weight:700;font-size:14px;text-decoration:none!important;transition:.2s;cursor:pointer}
.txp-ghost{border:1px solid var(--txp-line);color:var(--txp-fg)!important;background:transparent}
.txp-ghost:hover{border-color:var(--txp-fg)}
.txp-primary{background:var(--txp-accent);color:var(--txp-accent-fg)!important;box-shadow:0 10px 30px -12px var(--txp-accent)}
.txp-primary:hover{filter:brightness(.93);transform:translateY(-1px)}
.txp-empty{color:#55627D}
@media (max-width:1024px){.txp-grid{grid-template-columns:repeat(min(var(--txp-cols),2),minmax(0,1fr))}}
@media (max-width:640px){.txp-grid{grid-template-columns:1fr}}

/* Preview modal */
.txp-modal{--txp-accent:#23B531;--txp-accent-fg:#fff;position:fixed;inset:0;z-index:99999;background:rgba(6,17,46,.72);display:flex;align-items:center;justify-content:center;padding:24px}
.txp-modal[hidden]{display:none}
.txp-modal-box{width:min(1200px,100%);height:min(88vh,900px);background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.txp-modal-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #DDE4F2;color:#0C1630}
.txp-modal-bar h3{margin:0;font-size:17px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txp-devs{display:flex;background:#F1F4FB;border-radius:10px;padding:3px}
.txp-devs button{font:inherit;font-size:13px;font-weight:600;border:0;background:transparent;padding:6px 12px;border-radius:8px;cursor:pointer;color:#55627D}
.txp-devs button.on{background:#fff;color:#0C1630;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.txp-modal .txp-btn{flex:none}
.txp-x{border:0;background:#F1F4FB;width:36px;height:36px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer;color:#0C1630}
.txp-modal-body{flex:1;background:#E9EDF6;display:flex;justify-content:center}
.txp-modal-body iframe{width:100%;height:100%;border:0;background:#fff;transition:width .3s}
.txp-modal-body.mob iframe{width:390px;max-width:100%}
@media (max-width:640px){.txp-devs{display:none}.txp-modal{padding:0}.txp-modal-box{height:100%;border-radius:0}}