/* Design-System runtime shell — modal, toast, security block, contact buttons.
   Visual values come from CSS vars emitted by design.css.php. */

/* ── Confirm modal ── */
.ds-modal-ov{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
    background:var(--dsp-backdrop,rgba(6,39,71,.46));backdrop-filter:blur(var(--dsp-blur,6px));opacity:0;transition:opacity var(--dsp-speed,320ms)}
.ds-modal-ov.open{opacity:1}
.ds-modal-ov.closing{opacity:0}
.ds-modal{background:#fff;width:100%;max-width:var(--dsp-width,430px);border-radius:var(--dsp-radius,18px);
    padding:var(--dsp-pad,26px);text-align:center;box-shadow:0 30px 80px rgba(6,39,71,.34);transform:scale(.9);transition:transform var(--dsp-speed,320ms) cubic-bezier(.34,1.56,.64,1)}
.ds-anim-pop.open .ds-modal{transform:scale(1)}
.ds-anim-fade .ds-modal{transform:none}
.ds-anim-rise .ds-modal{transform:translateY(24px)}
.ds-anim-rise.open .ds-modal{transform:translateY(0)}
.ds-modal-ic{width:var(--dsp-ic,60px);height:var(--dsp-ic,60px);border-radius:50%;margin:0 auto 14px;
    background:linear-gradient(135deg,var(--dsp-pink,#e21e65),var(--dsp-navy,#062747));color:#fff;display:grid;place-items:center;font-size:26px}
.ds-modal-ic.is-danger{background:var(--dsp-danger,#c0392b)}
.ds-modal-title{color:var(--dsp-title,#062747);font-size:19px;font-weight:800;margin-bottom:8px}
.ds-modal-msg{color:var(--dsp-msg,#4a5a6a);font-size:15px;line-height:1.5;margin-bottom:20px}
.ds-modal-actions{display:flex;gap:10px;justify-content:center}
.ds-modal-actions button{min-width:120px}

/* ── Toast ── */
.ds-toast-stack{position:fixed;top:18px;right:18px;z-index:1100;display:flex;flex-direction:column;gap:10px;max-width:360px}
.ds-toast{position:relative;display:flex;align-items:center;gap:11px;background:#fff;border-radius:12px;padding:13px 14px;
    box-shadow:0 12px 34px rgba(20,24,33,.18);overflow:hidden;transform:translateX(120%);transition:transform .25s,opacity .25s;opacity:0;border-left:4px solid var(--dsn-success)}
.ds-toast.show{transform:translateX(0);opacity:1}
.ds-toast-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:15px;flex-shrink:0;background:var(--dsn-success)}
.ds-toast-msg{font-size:14px;font-weight:600;color:#141821;flex:1}
.ds-toast-x{background:none;border:none;color:#8a93a3;font-size:15px;cursor:pointer}
.ds-toast-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;background:var(--dsn-success)}
.ds-toast-success{border-left-color:var(--dsn-success)}.ds-toast-success .ds-toast-ic,.ds-toast-success .ds-toast-bar{background:var(--dsn-success)}
.ds-toast-error{border-left-color:var(--dsn-error)}.ds-toast-error .ds-toast-ic,.ds-toast-error .ds-toast-bar{background:var(--dsn-error)}
.ds-toast-info{border-left-color:var(--dsn-info)}.ds-toast-info .ds-toast-ic,.ds-toast-info .ds-toast-bar{background:var(--dsn-info)}
.ds-toast-warning{border-left-color:var(--dsn-warning)}.ds-toast-warning .ds-toast-ic,.ds-toast-warning .ds-toast-bar{background:var(--dsn-warning)}

/* ── Contact buttons on cards/profile (colours from vars) ── */
.dsc-call{background:var(--ds-call,#e21e65);color:#fff}
.dsc-whatsapp{background:var(--ds-whatsapp,#2bb572);color:#fff}
.dsc-telegram{background:var(--ds-telegram,#229ed9);color:#fff}
.card-contacts{display:flex;gap:8px;margin-top:10px}
.card-contacts a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:9px;
    font-size:13px;font-weight:700;text-decoration:none;transition:transform .15s;white-space:nowrap}
.card-contacts a:hover{transform:translateY(-1px)}
.card-contacts a i{flex-shrink:0}
.dsc-num{overflow:hidden;text-overflow:ellipsis}
/* icon-only variant (used when Call + WhatsApp + Telegram all show) */
.card-contacts a.dsc-iconly{flex:0 0 auto;width:46px;padding-left:0;padding-right:0;font-size:16px;gap:0}

/* ── Security Tips block ── */
.sec-tips{position:relative;margin:8px 0}
.sec-tips-flag{position:absolute;top:-6px;left:44px;z-index:2;background:linear-gradient(135deg,var(--dsp-pink,#e21e65),var(--dsp-pink,#e21e65));
    color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;padding:7px 14px 7px 20px;border-radius:6px;text-transform:uppercase}
.sec-tips-badge{position:absolute;top:-14px;left:8px;z-index:3;width:44px;height:44px;border-radius:50%;background:#fff;
    display:grid;place-items:center;box-shadow:0 6px 16px rgba(6,39,71,.2);font-size:20px;color:var(--dsp-navy,#062747)}
.sec-tips-badge .st-check{position:absolute;top:-2px;left:-2px;width:20px;height:20px;border-radius:50%;background:var(--dsp-pink,#e21e65);color:#fff;font-size:11px;display:grid;place-items:center}
.sec-tips-body{background:var(--dsp-navy,#062747);border-radius:16px;padding:44px 30px 30px;color:#fff;text-align:center;box-shadow:0 12px 34px rgba(6,39,71,.28)}
.sec-tips-body h3{font-size:22px;font-weight:800;margin-bottom:12px}
.sec-tips-slide{display:none}.sec-tips-slide.on{display:block}
.sec-tips-body p{color:rgba(255,255,255,.85);font-size:15px;line-height:1.6;max-width:760px;margin:0 auto}
.sec-tips-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.sec-tips-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.35);cursor:pointer;padding:0}
.sec-tips-dots button.on{background:var(--dsp-pink,#e21e65)}