/* RANK tab: mini tab bar on top of the coupon panel. Everything is scoped to .sst-rkt,
   the class this feature puts on the coupon panel; removing the feature removes it. */
.sst-qct-panel.sst-rkt{padding-top:10px}
.sst-rkt .sst-rkt-bar{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid #ececec;overflow-x:auto;scrollbar-width:none}
.sst-rkt .sst-rkt-bar::-webkit-scrollbar{display:none}
.sst-qo .sst-rkt button.sst-rkt-tab{appearance:none;flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:12px 18px;margin:0 0 -1px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:#656565;font:800 13.5px/1.2 Figtree,-apple-system,"Segoe UI",sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:none}
.sst-qo .sst-rkt button.sst-rkt-tab:hover{color:#1a1a1a}
.sst-qo .sst-rkt button.sst-rkt-tab[aria-selected="true"]{color:#1a1a1a;border-bottom-color:#9e2c5f}
.sst-qo .sst-rkt button.sst-rkt-tab:focus-visible{outline:2px solid #9e2c5f;outline-offset:-2px}
.sst-rkt .sst-rkt-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#c2261b;color:#fff;font:800 11.5px/1 Figtree,sans-serif;letter-spacing:0}
.sst-rkt .sst-rkt-count[hidden]{display:none}
html[data-sst-theme="dark"] .sst-rkt .sst-rkt-bar{border-bottom-color:rgba(255,255,255,.16)}
html[data-sst-theme="dark"] .sst-qo .sst-rkt button.sst-rkt-tab{color:#a7a7a7}
html[data-sst-theme="dark"] .sst-qo .sst-rkt button.sst-rkt-tab:hover,
html[data-sst-theme="dark"] .sst-qo .sst-rkt button.sst-rkt-tab[aria-selected="true"]{color:#e8e8e8}

/* "Your rank": the rank page, edge to edge */
.sst-rkt .sst-rkt-rank[hidden]{display:none}
.sst-rkt .sst-rkt-frame{display:block;width:100%;max-width:none;height:1200px;border:0;border-radius:0;background:#14060e}
/* while the rank page is on its way: a small spinner on the dark panel, so the tap is answered at once */
.sst-rkt .sst-rkt-rank{position:relative}
.sst-rkt .sst-rkt-rank.sst-rkt-loading::before{content:"";position:absolute;z-index:1;left:50%;top:140px;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#f3dfa6;pointer-events:none;animation:sst-rkt-spin .8s linear infinite}
@keyframes sst-rkt-spin{to{transform:rotate(360deg)}}

/* "Your coupons" is the coupon panel as it was; while "Your rank" is showing, its parts wait */
.sst-rkt[data-sst-rkt-pane="rank"] > .sst-qct-title,
.sst-rkt[data-sst-rkt-pane="rank"] > .sst-qct-message,
.sst-rkt[data-sst-rkt-pane="rank"] > .sst-qcw{display:none}
.sst-rkt[data-sst-rkt-pane="rank"] > .sst-qct-back{margin-top:24px}

/* "Your rank" now explains every rank. The coupon pane's own rank comparison stops at Gold and calls
   the higher ranks a secret, so inside the RANK tab those three blocks are not shown (the coupons,
   their conditions, the welcome points and the log-in buttons stay). Nothing is removed from the
   wallet itself: without this file they are back. */
.sst-rkt .sst-qcw .sst-qcw-b-intro,
.sst-rkt .sst-qcw .sst-qcw-b-compare,
.sst-rkt .sst-qcw .sst-qcw-b-secret,
.sst-rkt .sst-qcw .sst-qcw-guest-secret{display:none !important}

/* The coupon counter on the tab itself: "RANK" is a short word, so keep the counter beside it, not on it.
   (This file is only on the page while the feature is active.) */
html body .sst-qo:not(#sst-never) .sst-qo__tabs--family > .sst-qo__tab--family.sst-qct-tab:has(> .sst-qcw-notification:not([hidden])){padding-right:42px !important}
html body .sst-qo:not(#sst-never) .sst-qo__tabs--family > .sst-qo__tab--family.sst-qct-tab > .sst-qcw-notification{right:8px}

@media (max-width:760px){
  .sst-qo .sst-rkt button.sst-rkt-tab{padding:12px 12px;font-size:12.5px}
}