/* The consent notice.
 *
 * A sheet at the foot of the page, not a wall across it. It never covers the
 * content, never blocks a tap, and never dims the page behind it — because
 * nothing on a tap page depends on the answer, and a modal would imply
 * otherwise. There is no backdrop element in this file at all, which is the
 * cheapest way to guarantee no backdrop is ever left behind.
 *
 * Accept and Reject are the same size, the same weight and side by side. The
 * asymmetric version of this control — a bright Accept beside a grey, smaller,
 * underlined "manage preferences" — is a dark pattern, and it is the single
 * most common one in this category.
 *
 * ── the rule this file was rewritten for ──────────────────────────────────
 *
 * VISIBLE IS THE DEFAULT AND THE FAILURE STATE.
 *
 * The previous version started the sheet at `opacity: 0` and depended on
 * JavaScript adding a class inside `requestAnimationFrame` to reveal it. In any
 * document that is backgrounded, prerendered, or launched into a throttled
 * webview — an NFC tap that opens Instagram's in-app browser, for one — that
 * frame never arrives. The result was a fully transparent, `position: fixed`,
 * `z-index: 9000` panel lying across the foot of somebody's landing page,
 * silently eating every tap on the cards underneath it.
 *
 * So the resting state of `.ytc` is now SHOWN. The entrance is a CSS animation:
 * if it plays, the sheet slides up; if the document is too throttled to animate,
 * the sheet is simply already there. Both outcomes are usable. There is no state
 * in this file in which the notice is invisible and still able to take a click —
 * anything mid-exit is `pointer-events: none`, and `@media (prefers-reduced-
 * motion)` skips the animation entirely rather than making it instant-invisible.
 *
 * Tokens are read from the page it lands on, with the platform's own values as
 * the fallback, so it inherits a business's palette rather than fighting it.
 * The notice itself is always English and always LTR, on Arabic pages too.
 */

.ytc {
  position: fixed;
  inset-inline: 12px;
  bottom: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  margin-inline: auto;
  max-width: 460px;
  /* long copy on a short phone must scroll inside the sheet rather than grow
     the sheet over the page it is asking about */
  max-height: min(70vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 14px;
  border-radius: var(--r-lg, 20px);
  background: var(--surface, #fff);
  color: var(--ink, #0E0F11);
  border: 1px solid var(--line, #E7E6E1);
  box-shadow: 0 12px 40px rgba(14, 15, 17, .16);
  font-family: var(--f-sans, Inter, system-ui, -apple-system, sans-serif);
  /* The resting state is visible. Read the note at the top of this file before
     changing either of these two lines. */
  opacity: 1;
  transform: none;
  /* An enhancement: it arrives from below when the document is awake enough to
     animate, and is simply present when it is not.
     There is deliberately NO fill-mode here. `both` — or `backwards` — would
     apply the keyframe's `from` state (opacity 0) to the element while the
     animation is merely PENDING, which in a throttled document is forever: the
     exact invisible-overlay defect this file was rewritten to remove, rebuilt
     in CSS. With no fill mode the element shows its own declared style until
     the animation actually runs, and returns to it afterwards. Visible is the
     resting state and visible is the failure state. */
  animation: ytc-in .24s cubic-bezier(.2, .8, .2, 1);
}

@keyframes ytc-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* The notice is English on every page, including the Arabic ones, and carries
   its own direction so an English sentence never renders inside an RTL
   container — which is how "Count this visit?" once became "?Count this visit". */
.ytc { direction: ltr; text-align: left; }

/* Nothing that is not fully shown may take a pointer. This is the backstop for
   every way a node could linger: mid-exit, hidden by a stale bundle, or left
   over by a script that failed halfway. An invisible consent element is the
   defect this whole file guards against, so it is made harmless in CSS as well
   as removed in JavaScript. */
.ytc[hidden],
.ytc[aria-hidden="true"],
.ytc.ytc-out { pointer-events: none !important; opacity: 0 !important; }

.ytc-t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ytc-b { font-size: 13.2px; line-height: 1.55; color: var(--ink-2, #54534E); margin-top: 5px; }

.ytc-a { display: flex; gap: 8px; margin-top: 14px; }
.ytc-btn {
  flex: 1 1 0;                     /* equal width — neither choice is the loud one */
  min-height: 44px;                /* a thumb target, not a link */
  padding: 11px 14px;
  border-radius: var(--r-pill, 999px);
  font: inherit;
  font-size: 13.6px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line, #E7E6E1);
  background: var(--surface-2, #F6F5F1);
  color: var(--ink, #0E0F11);
  transition: background .18s cubic-bezier(.2, .8, .2, 1), border-color .18s;
}
.ytc-btn:hover { background: var(--hover, #EFEEE9); border-color: var(--ink-3, #8C8B84); }
.ytc-btn:focus-visible { outline: 2px solid var(--accent, #2231DE); outline-offset: 2px; }
/* Pressed once and now working: still legible, no longer pressable. It is on
   screen for a few milliseconds at most — the sheet is removed synchronously —
   but a disabled control that looks enabled is wrong even briefly. */
.ytc-btn[disabled] { opacity: .6; cursor: default; }
/* There is deliberately no `.ytc-yes` here. Accept and Reject share one class
   and one appearance: same width, same height, same weight, same colour. A
   filled accent beside an outline is a prominence difference, and a prominence
   difference in this particular control is the dark pattern the whole category
   is known for. If one of them ever needs to stand out, that is a decision to
   argue for, not a default to inherit from a button system. */

.ytc-more {
  display: block;
  margin: 10px auto 0;
  padding: 6px 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 12.4px;
  color: var(--ink-2, #54534E);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ytc-more:focus-visible { outline: 2px solid var(--accent, #2231DE); outline-offset: 2px; border-radius: 6px; }
a.ytc-more { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  /* no entrance, and — importantly — no path to being invisible */
  .ytc { animation: none; opacity: 1; transform: none; }
  .ytc-btn { transition: none; }
}

@media (max-width: 400px) {
  .ytc { inset-inline: 8px; padding: 14px 15px 12px; }
  .ytc-a { flex-direction: column; }   /* still equal, still both visible, reject first */
}

/* ── the way back ─────────────────────────────────────────────────────────
   A quiet line in the footer, under "Powered by YalaTap". Withdrawal has to be
   reachable without devtools, and a visitor looking for it looks at the foot of
   the page. It is deliberately understated: it is a control, not an offer. */
.ytc-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 6px auto 0;
  flex-wrap: wrap;
  direction: ltr;
}
.ytc-sep { font-size: 11.6px; color: var(--ink-3, #8C8B84); opacity: .55; }
.ytc-link {
  display: inline-block;
  margin: 0;
  padding: 6px 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 11.6px;
  color: var(--ink-3, #8C8B84);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: .85;
}
.ytc-link:hover { opacity: 1; }
.ytc-link:focus-visible { outline: 2px solid var(--accent, #2231DE); outline-offset: 2px; border-radius: 6px; }