/* ─── Add to Favorites — savefast.cc ──────────────────────────────
   Include with: <link rel="stylesheet" href="/css/favorites.css">
   Pairs with /js/favorites.js, which injects the button automatically. */

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;overflow:visible;}
.fav-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:11px;
  min-width:180px;flex:0 0 auto;box-sizing:border-box;
  background:linear-gradient(135deg,rgba(176,106,255,.14),rgba(74,31,204,.14));
  border:1px solid rgba(176,106,255,.38);
  color:#e6d9ff;font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;white-space:nowrap;user-select:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  outline:none;touch-action:manipulation;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease;
}
.fav-btn:hover{
  background:linear-gradient(135deg,rgba(176,106,255,.26),rgba(74,31,204,.26));
  border-color:rgba(176,106,255,.7);
  box-shadow:0 0 18px rgba(176,106,255,.35);
  transform:translateY(-1px);
}
.fav-btn:active{transform:translateY(0) scale(.97);}
.fav-btn:focus,.fav-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(176,106,255,.35);}
.fav-btn.active{
  background:linear-gradient(135deg,#b06aff,#4a1fcc);
  border:none;padding:10px 16px;color:#fff;
  box-shadow:0 0 8px rgba(176,106,255,.28);
}
.fav-star{flex-shrink:0;transition:fill .2s ease,stroke .2s ease,transform .25s ease;}
.fav-btn.active .fav-star{fill:#ffd84d;stroke:#ffd84d;transform:scale(1.12);}
.fav-modal-overlay{
  position:fixed;inset:0;background:rgba(6,3,16,.75);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
  z-index:10000;
}
.fav-modal-overlay.show{opacity:1;visibility:visible;}
.fav-modal{
  background:linear-gradient(160deg,#180c33,#0a0612);
  border:1px solid rgba(176,106,255,.35);border-radius:18px;
  padding:30px 28px 26px;max-width:360px;width:100%;text-align:center;position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(176,106,255,.15);
  transform:translateY(10px) scale(.97);transition:transform .25s ease;
}
.fav-modal-overlay.show .fav-modal{transform:translateY(0) scale(1);}
.fav-modal-close{
  position:absolute;top:10px;right:12px;background:none;border:none;
  color:#a898c9;font-size:24px;line-height:1;cursor:pointer;padding:6px;
}
.fav-modal-close:hover{color:#fff;}
.fav-modal-icon{font-size:34px;margin-bottom:8px;}
.fav-modal-title{color:#fff;font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;margin:0 0 8px;}
.fav-modal-text{color:#b6a8d4;font-family:'Outfit',sans-serif;font-size:13.5px;line-height:1.55;margin:0 0 22px;}
.fav-modal-keys{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;}
.fav-modal-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;text-align:left;}
.fav-step{display:flex;align-items:center;gap:12px;background:rgba(176,106,255,.08);border:1px solid rgba(176,106,255,.25);border-radius:11px;padding:10px 12px;}
.fav-step-num{
  flex-shrink:0;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#b06aff,#4a1fcc);border-radius:50%;
  color:#fff;font-family:'Outfit',sans-serif;font-size:12px;font-weight:700;
}
.fav-step-icon{
  flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(176,106,255,.22),rgba(74,31,204,.22));
  border:1px solid rgba(176,106,255,.35);border-radius:9px;color:#e6d9ff;
}
.fav-step-text{color:#e6d9ff;font-family:'Outfit',sans-serif;font-size:13px;line-height:1.4;}
.fav-step-text strong{color:#fff;}
.fav-modal-keys.pulse .fav-key{animation:favKeyPulse 1.3s ease-in-out infinite;}
@keyframes favKeyPulse{0%,100%{box-shadow:0 0 0 rgba(176,106,255,0)}50%{box-shadow:0 0 16px rgba(176,106,255,.65)}}
.fav-key{
  display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
  background:linear-gradient(180deg,rgba(176,106,255,.24),rgba(74,31,204,.24));
  border:1px solid rgba(176,106,255,.55);border-bottom:3px solid rgba(74,31,204,.75);
  border-radius:9px;color:#fff;font-family:'Space Mono',monospace;font-size:14px;font-weight:700;
}
.fav-modal-plus{color:#a898c9;font-size:14px;}
.fav-modal-confirm{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:12px 18px;margin-bottom:12px;box-sizing:border-box;
  background:linear-gradient(135deg,#b06aff,#4a1fcc);border:none;border-radius:11px;
  color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease;
  -webkit-tap-highlight-color:transparent;outline:none;
}
.fav-modal-confirm:hover{box-shadow:0 0 18px rgba(176,106,255,.45);transform:translateY(-1px);}
.fav-modal-confirm:active{transform:translateY(0) scale(.98);}
.fav-modal-status{color:#c8b8ef;font-family:'Outfit',sans-serif;font-size:12.5px;min-height:18px;transition:color .2s;}
.fav-modal-status.success{color:#7ee787;font-weight:600;}
@media (max-width:768px){
  .fav-btn{padding:0;width:38px;height:38px;min-width:38px;justify-content:center;border-radius:50%;}
  .fav-btn.active{padding:0;width:38px;height:38px;}
  .fav-label{display:none;}
}