/* Doorzad features.css — loaded on every page after basera.css (fragments/shell :: head).
   Same tokens, fonts and rules as basera.css; kept in its own file so these
   pieces read as one unit:
     1. Profile photo avatars (V27) and the "Photo" section of Name & email
     2. The Success card's note and error on Plan & billing
     3. "Pay from another phone" (billing/qr.html) and its QR buttons
     4. "Install Doorzad app": banner modes and the guidance sheet
   Phone first; the Account-area layout rule in basera.css is untouched. */

/* ---------- 1. Profile photo ---------- */
.bs-avatar--photo{background:var(--soft);overflow:hidden;padding:0}
.bs-avatar--photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.bs-avatar--36{width:36px;height:36px;font-size:14.5px}
.bs-avatar--96{width:96px;height:96px;font-size:30px}
.bs-photo{padding:18px}
.bs-photo__h{margin:0 0 12px}
.bs-photo .bs-alert{margin-bottom:12px}
.bs-photo__row{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.bs-photo__help{margin:0}
.bs-photo__file{padding:10px;height:auto}
.bs-photo__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.bs-photo__remove{margin-top:10px}
.bs-photo__vis{margin-top:18px;padding-top:16px;border-top:1px solid var(--divider)}
.bs-photo__check{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px;cursor:pointer;min-height:44px}
.bs-photo__check input{width:22px;height:22px;accent-color:var(--coral-strong);flex:none}
.bs-photo__vis .bs-help{margin:2px 0 10px}

/* ---------- 2. Success card ---------- */
.bs-plan__why{margin:2px 0 4px;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.bs-plan__error{margin:2px 0}
.bs-plan:focus{outline:none;box-shadow:var(--focus-ring)}

/* ---------- 3. Pay from another phone ---------- */
.bs-qr-alt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px;font-size:14px;color:var(--ink2)}
.bs-qr-alt__btn{font-size:14px;padding:8px 2px;min-height:24px;text-decoration:underline;text-underline-offset:3px}
.bs-qr-alt__btn--under{display:block;margin:2px 0 0 auto;padding:6px 0 0}
.bs-qr-alt__stack{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.mg-qrlink{display:block;width:100%;min-height:44px;margin-top:6px;border:none;background:transparent;cursor:pointer;font-family:inherit;
  font-size:14.5px;font-weight:700;color:var(--coral-dk);text-decoration:underline;text-underline-offset:3px;border-radius:10px}
.bs-qrpay__card{padding:20px;margin-top:14px;text-align:center}
.bs-qrpay__amount{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.bs-qrpay__gst{margin-top:2px}
.bs-qrpay__figure{margin:16px auto 0;max-width:340px}
.bs-qrpay__img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:16px;border:1px solid var(--line);background:#fff;image-rendering:pixelated}
.bs-qrpay__scan{margin-top:10px;font-weight:700;font-size:16.5px;color:var(--ink)}
.bs-qrpay__apps{margin:4px auto 0;max-width:34ch}
.bs-qrpay__timer{margin:12px 0 14px;font-weight:600;color:var(--ink2)}
.bs-qrpay__timer [role="timer"]{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:800}
.bs-qrpay__wa svg{vertical-align:-4px;margin-right:6px}
.bs-qrpay__link{display:inline-block;margin-top:8px}
.bs-qrpay__check{margin-top:10px}
.bs-qrpay__state{padding:18px 0 4px;display:grid;gap:10px;justify-items:center}
.bs-qrpay__state--paid{color:var(--teal)}
.bs-qrpay__state-title{font-family:var(--font-display);font-weight:800;font-size:20.5px;color:var(--ink)}
.bs-qrpay__state .bs-btn,.bs-qrpay__state form{width:100%}
.bs-qrpay [hidden]{display:none !important}

/* ---------- 4. Install the app ---------- */
.bs-install{flex-wrap:wrap}
.bs-install__sub--inapp{display:none}
.bs-install[data-mode="inapp"] .bs-install__sub--inapp{display:block}
.bs-install__acts{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.bs-install__later{padding:9px 10px}
@media (max-width:420px){
  .bs-install__acts{width:100%;justify-content:flex-end}
}
.bs-install-sheet .bs-install-pane{margin-top:4px}
.bs-install-sheet .bs-dialog__sub{margin-bottom:14px}
.bs-install-sheet__later{margin-top:8px}
.bs-install-steps{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:14px}
.bs-install-step{display:grid;grid-template-columns:30px 1fr;gap:4px 12px;align-items:start}
.bs-install-step__n{width:30px;height:30px;border-radius:99px;background:var(--coral-strong);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.bs-install-step__text{font-size:15.5px;line-height:1.45;color:var(--ink);padding-top:4px}
.bs-install-step__art{grid-column:2;width:100%;max-width:260px;height:auto;margin-top:4px}
.bs-install-copied:empty{display:none}
.bs-install-copy{margin-top:8px}
.bs-acct-side__btn{display:flex;align-items:center;font-family:inherit;font-weight:600;font-size:15.5px;color:var(--ink2);padding:10px 12px;border-radius:12px;border:none;background:transparent;cursor:pointer;width:100%;text-align:left}
.bs-acct-side__btn:hover{background:var(--soft);color:var(--ink)}