/* Shared by index.html, FraG Products.dc.html and FraG Product.dc.html.
   The site's policy is style-src 'self': styles must come from a stylesheet
   file. These rules used to be injected as <style> elements by support.js and
   frag-account.js; they are unchanged. support.js also adds its :hover and
   :focus rules to this sheet at runtime (through the CSSOM), which is why the
   pages link it with data-dc-styles. */

/* The raw page template is source text for the runtime, never shown. */
x-dc{display:none!important}

/* Page runtime (support.js) */
    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}

/* Purchases panel (frag-account.js) */
@keyframes fragAccountIn { from { transform: translateX(var(--from, 24px)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fragAccountVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes fragAccountPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes fragAccountWait { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { #frag-account, #frag-account * { animation: none !important; } }
/* The panel's buttons answer the pointer, a press and the keyboard. Their colours are set by the script. */
#frag-account .frag-acc-btn { transition: filter .15s ease, background-color .15s ease, border-color .15s ease, scale .12s ease; }
#frag-account .frag-acc-btn:hover:not(:disabled) { filter: brightness(1.07); }
#frag-account .frag-acc-quiet:hover:not(:disabled) { filter: none; background-color: #F3F3F7 !important; border-color: rgba(17,19,28,.24) !important; }
#frag-account .frag-acc-btn:active:not(:disabled) { scale: .975; }
#frag-account .frag-acc-btn:focus-visible, #frag-account input:focus-visible { outline: 2px solid #7C3AED; outline-offset: 2px; }
#frag-account [data-frag-body] { scrollbar-width: thin; scrollbar-color: rgba(17,19,28,.18) transparent; }

/* A pressed button gives slightly, so a click or tap visibly registers. The
   separate `scale` property is used so it never fights a transform a button
   already carries. */
#dc-root button:active:not(:disabled) { scale: .975; }

/* The Saudi riyal sign (U+20C1) is too new for the site's fonts, so one small
   font carries just that character. "FragRiyal" is named first in the font list
   wherever a price is set. It is deliberately NOT also registered under the
   site's own font names: doing that makes browsers prefer it for light weights
   and drop the real font for ordinary text. */
@font-face { font-family: "FragRiyal"; src: url("assets/symbols/frag-riyal.ttf") format("truetype"); unicode-range: U+20C1; font-weight: 100 900; font-display: swap; }

/* Footer: one row on a wide screen; on a phone the parts stack from the start edge and the links line up with the brand. */
@media (max-width: 760px) {
  .frag-foot-row { flex-direction: column; align-items: flex-start !important; gap: 18px !important; padding: 26px 20px 30px !important; }
  .frag-foot-nav { margin-inline-start: -12px; }
}

/* Icon motion, the same language as the admin panel: an outline icon draws itself
   when its link or button is pointed at or focused, and a few icons also act out
   what they do. Each shape carries pathLength="1", which is what makes the draw work. */
@keyframes fragIcDraw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes fragIcTurn { to { rotate: 360deg; } }
@keyframes fragIcTurnBack { to { rotate: -360deg; } }
@keyframes fragIcQuarter { 60% { rotate: 110deg; } 100% { rotate: 90deg; } }
@keyframes fragIcWiggle { 20% { rotate: -14deg; } 45% { rotate: 11deg; } 70% { rotate: -6deg; } 100% { rotate: 0deg; } }
@keyframes fragIcShake { 15% { translate: -2px 0; } 35% { translate: 2px 0; } 55% { translate: -1.5px 0; } 75% { translate: 1px 0; } 100% { translate: 0 0; } }
@keyframes fragIcPop { 40% { scale: 1.22; rotate: -10deg; } 70% { scale: .94; rotate: 4deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes fragIcHop { 40% { translate: 0 -2.4px; } 70% { translate: 0 .6px; } 100% { translate: 0 0; } }
@keyframes fragIcThrowDown { 45% { translate: 0 3.5px; opacity: 1; } 46% { opacity: 0; } 47% { translate: 0 -4px; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@keyframes fragIcRoll { 30% { translate: 3px 0; rotate: -7deg; } 62% { translate: -1.5px 0; rotate: 4deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes fragFlipIn { from { opacity: 0; transform: rotateX(90deg) translateY(-4px); } to { opacity: 1; transform: rotateX(0deg) translateY(0); } }
@keyframes fragCartIdle { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -2px; rotate: -4deg; } }
@keyframes fragPlusBeat { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .7; opacity: .45; } }
.frag-ic, .frag-ic > * { transform-box: fill-box; transform-origin: center; }
/* Account menu actions: quiet rows, each with its icon on a small tile; the admin row in the site's purple, signing out
   in red and set apart by a rule. */
.frag-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; box-sizing: border-box;
  padding-block: 6px; padding-inline: 6px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: #11131C; font-family: Nohemi, 'IBM Plex Sans Arabic', sans-serif; font-size: 13.5px; font-weight: 600;
  line-height: 1.2; text-align: start; text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.frag-menu-item > .frag-ic {
  box-sizing: content-box; flex-shrink: 0; padding: 7.5px; border-radius: 8px;
  color: #7C3AED; background: rgba(124,58,237,.09); transition: background-color .15s ease, color .15s ease;
}
.frag-menu-item.is-admin { color: #6D28D9; }
.frag-menu-item.is-admin > .frag-ic { color: #FFFFFF; background: linear-gradient(180deg, #8B5CF6, #6D28D9); box-shadow: 0 4px 10px -5px rgba(109,40,217,.8); }
.frag-menu-item.is-out { color: #B91C1C; }
.frag-menu-item.is-out > .frag-ic { color: #DC2626; background: rgba(220,38,38,.08); }
@media (hover: hover) {
  .frag-menu-item:hover { background: rgba(17,19,28,.045); }
  .frag-menu-item.is-admin:hover { background: rgba(124,58,237,.08); }
  .frag-menu-item.is-out:hover { background: rgba(220,38,38,.06); }
}
.frag-menu-item:focus-visible { outline: 2px solid #7C3AED; outline-offset: -2px; }
.frag-menu-sep { height: 1px; margin: 4px 6px; background: rgba(17,19,28,.08); }
/* The arrow at the end of "Admin Panel": it leaves this site for the admin site. */
.frag-menu-go { margin-inline-start: auto; flex-shrink: 0; opacity: .5; transition: opacity .15s ease, translate .15s ease; }
[dir="rtl"] .frag-menu-go, [dir="rtl"] .frag-menu-item.is-out > .frag-ic { scale: -1 1; }
@media (hover: hover) { .frag-menu-item:hover .frag-menu-go { opacity: .9; translate: 1px -1px; } [dir="rtl"] .frag-menu-item:hover .frag-menu-go { translate: -1px -1px; } }
/* The account menu opens from the avatar it hangs under. */
.frag-acc-menu { transform-origin: top right; animation: fragAccIn .18s cubic-bezier(.22,1,.36,1) both; }
[dir="rtl"] .frag-acc-menu { transform-origin: top left; }
/* The avatar in the top bar, signed in: a soft ring, stronger under the pointer, purple while its menu is open. */
.frag-me-btn[aria-haspopup="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px rgba(167,139,250,.55); transition: box-shadow .16s ease; }
@media (hover: hover) { .frag-me-btn[aria-haspopup="true"]:hover { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px #A78BFA; } }
.frag-me-btn[aria-haspopup="true"][aria-expanded="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #7C3AED; }
.frag-me-btn:focus-visible { outline: 2px solid #7C3AED; outline-offset: 5px; }
/* Cart drawer: the licence count as a small badge beside the title, and Checkout lit from above like the offer's
   "Get Truck Robbery" button that leads to it (a gradient, a bright top edge, a close shadow under a wider, fainter one). */
.frag-cart-count {
  align-self: center; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 600; line-height: 1.3; color: #6D28D9; background: rgba(124,58,237,.09);
}
.frag-checkout {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px;
  cursor: pointer; border-radius: 12px; color: #FFFFFF;
  font-family: Nohemi, 'IBM Plex Sans Arabic', sans-serif; font-size: 15px; font-weight: 700;
  background: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 55%, #6D28D9 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 2px 4px -1px rgba(46,16,101,.3), 0 14px 28px -16px rgba(76,29,149,.7);
  transition: filter .15s ease, box-shadow .15s ease;
}
@media (hover: hover) { .frag-checkout:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 3px 6px -2px rgba(46,16,101,.36), 0 18px 32px -16px rgba(76,29,149,.78); } }
.frag-checkout:active { filter: brightness(.94); }
.frag-checkout:focus-visible { outline: 2px solid #7C3AED; outline-offset: 3px; }
.frag-checkout:disabled { cursor: progress; filter: saturate(.6) brightness(1.05); }
/* Phone menu open: the page behind it dims a little (a tap on it closes the menu), just under the bar (z-index 40). */
.frag-sheet-veil { position: fixed; inset: 0; z-index: 39; background: rgba(17,19,28,.22); animation: fragVeilIn .2s ease both; }
@keyframes fragVeilIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .frag-sheet-veil { animation: none; } }
/* Phone menu: the signed-in account is a profile row that opens the same actions as the desktop menu. */
.frag-sheet-acct { transition: filter .15s ease, border-color .15s ease; }
@media (hover: hover) { .frag-sheet-acct:hover { filter: brightness(.97); } }
.frag-sheet-acct:focus-visible { outline: 2px solid #7C3AED; outline-offset: 2px; }
.frag-sheet-chev { margin-inline-start: auto; flex-shrink: 0; color: #7D8193; transition: rotate .22s cubic-bezier(.22,1,.36,1); }
.frag-sheet-acct[aria-expanded="true"] .frag-sheet-chev { rotate: 180deg; }
.frag-sheet-account { display: grid; gap: 2px; padding: 10px 0 2px; transform-origin: top center; animation: fragAccIn .18s cubic-bezier(.22,1,.36,1) both; }
.frag-sheet-account .frag-menu-item { min-height: 48px; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) { .frag-sheet-chev { transition: none; } .frag-sheet-account { animation: none; } }
@keyframes fragAccIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .frag-acc-menu { animation: none; } .frag-menu-go { transition: none; } }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic > * { animation: fragIcDraw .55s cubic-bezier(.65, 0, .35, 1) both; }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic > :nth-child(2) { animation-delay: .07s; }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic > :nth-child(3) { animation-delay: .14s; }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic > :nth-child(n+4) { animation-delay: .21s; }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-cart { animation: fragIcRoll .6s cubic-bezier(.22, 1, .36, 1); }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-close { animation: fragIcQuarter .4s cubic-bezier(.22, 1, .36, 1); }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) :is(.frag-ic-trash, .frag-ic-search, .frag-ic-card) { animation: fragIcWiggle .6s ease; }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-refresh { animation: fragIcTurn .7s cubic-bezier(.5, 0, .2, 1); }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-refund { animation: fragIcTurnBack .7s cubic-bezier(.5, 0, .2, 1); }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-alert { animation: fragIcShake .5s ease; }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-lock > :nth-child(2) { animation: fragIcHop .5s cubic-bezier(.22, 1, .36, 1); }
:is(a, button:not(:disabled)):is(:hover, :focus-visible) .frag-ic-download > :nth-child(n+2) { animation: fragIcThrowDown .6s ease; }
/* Language and currency: the letters and signs are the icons here, so they move too. */
.frag-lang-hover, .frag-lang-label { display: inline-block; }
.frag-lang-label { animation: fragFlipIn .36s cubic-bezier(.22, 1, .36, 1) both; }
.frag-lang:is(:hover, :focus-visible) .frag-lang-hover { animation: fragIcPop .5s cubic-bezier(.22, 1, .36, 1); }
.frag-cur:is(:hover, :focus-visible) .frag-cur-sym { animation: fragIcPop .5s cubic-bezier(.22, 1, .36, 1); }
.frag-cur:is(:hover, :focus-visible) .frag-cur-sym + .frag-cur-sym { animation-delay: .08s; }
/* The empty cart waits: it rocks a little and its plus keeps time. */
.frag-cart-empty .frag-ic { animation: fragCartIdle 2.8s ease-in-out infinite; }
.frag-cart-empty .frag-cart-empty-plus { animation: fragPlusBeat 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .frag-ic, .frag-ic > *, .frag-lang-hover, .frag-lang-label, .frag-cur-sym, .frag-cart-empty .frag-ic, .frag-cart-empty .frag-cart-empty-plus { animation: none !important; }
}

/* Selected text takes the site's purple. */
::selection { background: rgba(124,58,237,.22); color: #11131C; }