/* Free safa (pagdi) swap — inc/safa-swap.php */
.ws-safa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 4px; padding: 8px 10px; border-radius: 10px; background: var(--ws-rose-tint, #fbecef); font-size: 13px; color: var(--ws-ink, #211a17); }
.ws-safa__now strong { font-weight: 700; }
.ws-safa__btn { padding: 5px 12px; border: 1px solid var(--ws-rose, #c4395d); border-radius: 99px; background: #fff; color: var(--ws-rose-deep, #a72c4c); font-size: 12px; font-weight: 700; cursor: pointer; }
.ws-safa__btn:hover { background: var(--ws-rose, #c4395d); color: #fff; }
html.ws-safa-open { overflow: hidden; }
.ws-safa-sheet { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: flex-end; justify-content: center; background: rgba(20, 14, 12, .55); }
@media (min-width: 600px) { .ws-safa-sheet { align-items: center; } }
.ws-safa-sheet__panel { position: relative; width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; background: #fff; }
@media (min-width: 600px) { .ws-safa-sheet__panel { border-radius: 18px; } }
.ws-safa-sheet__panel h3 { margin: 0 32px 4px 0; font-size: 20px; }
.ws-safa-sheet__sub { margin: 0 0 14px; color: var(--ws-ink-soft, #57493f); font-size: 13px; }
.ws-safa-sheet__x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: none; font-size: 18px; cursor: pointer; }
.ws-safa-sheet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ws-safa-opt { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 2px solid #eee3dc; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; }
.ws-safa-opt.is-on { border-color: var(--ws-rose, #c4395d); box-shadow: 0 0 0 3px var(--ws-rose-tint, #fbecef); }
.ws-safa-opt__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #f3eee8; font-size: 40px; }
.ws-safa-opt__img img { width: 100%; height: 100%; object-fit: cover; }
.ws-safa-opt__name { font-size: 13px; font-weight: 700; color: var(--ws-ink, #211a17); line-height: 1.3; }
.ws-safa-opt__name small { display: block; font-weight: 500; color: var(--ws-ink-soft, #57493f); }
.ws-safa-sheet__msg { margin: 10px 0 0; font-size: 13px; color: var(--ws-danger, #b32d2e); min-height: 1em; }