/* =============================================================================================================================
   TENDERCompass on the website (owner request 2026-11-15):
   - the "New" badge and the Compass item in the "Explore tenders" menu (Web.Master and the home page header),
   - the TENDERCompass band on the home page (Default.aspx), under the slider.
   Brand: teal #368B94, orange #F5833D (white text on orange), success #98CE44. RTL and LTR, desktop and phone.
   ============================================================================================================================= */

/* ---- "New" badge + menu item ---- */
.tg-new-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;margin-inline-start:6px;border-radius:999px;background:#F5833D;color:#fff !important;
  font-size:10px;font-weight:800;line-height:1;letter-spacing:.02em;vertical-align:middle;box-shadow:0 2px 6px rgba(245,131,61,.35)}
.nav-link-title .tg-new-badge{height:15px;font-size:9px;padding:0 6px;transform:translateY(-1px)}
.dropdown-item.tg-dd-compass{display:flex !important;align-items:center;gap:8px;font-weight:700;color:#236e72 !important}
.dropdown-item.tg-dd-compass svg{width:18px;height:18px;flex:none}
.dropdown-item.tg-dd-compass:hover{background:#eef6f6}

/* ---- Animated compass icon (owner request 2026-11-15): the approved Web Kit SVG (.compass-face / .compass-mark / .compass-needle)
   and its needleSweep movement - the needle only, around 100px 100px. Scoped to .tgc-cicon so no other icon is affected, and the
   fills are fixed here so generic button or icon styles cannot repaint them. ---- */
.tgc-cicon{display:block;width:22px;height:22px;flex:0 0 22px}
.tgc-cicon.lg{width:24px;height:24px;flex-basis:24px}
.tgc-cicon .compass-face{fill:#368B94 !important;stroke:none !important}
.tgc-cicon .compass-mark{fill:rgba(255,255,255,.92) !important;stroke:none !important}
.tgc-cicon .cn-o{fill:#F5833D !important;stroke:none !important}
.tgc-cicon .cn-w{fill:#fff !important;stroke:none !important}
.tgc-cicon .compass-needle{transform-box:view-box;transform-origin:100px 100px;animation:needleSweep 5.5s cubic-bezier(.65,.05,.22,1) infinite}
@keyframes needleSweep{0%,100%{transform:rotate(-14deg)}22%{transform:rotate(12deg)}44%{transform:rotate(3deg)}62%{transform:rotate(20deg)}82%{transform:rotate(-6deg)}}

/* ---- Tender details: circular Compass button (owner request 2026-11-15). At rest only the 44px circle with the animated compass.
   On hover / keyboard focus a small label slides out from behind the circle on its inline-end side (left in Arabic, right in
   English); the label is absolutely positioned, so the circle stays anchored and nothing around it moves. Saved: a small ✓ badge
   on the lower edge, the label then reads «فتح في البوصلة ↗». ---- */
.tgc-cbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;vertical-align:middle;
  text-decoration:none !important;color:#153E43 !important;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tgc-cbtn__circle{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;
  border:1px solid #d5e4e3;box-shadow:0 1px 3px rgba(21,62,67,.12);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.tgc-cbtn .tgc-cicon{width:30px;height:30px;flex-basis:30px}
.tgc-cbtn:hover .tgc-cbtn__circle,.tgc-cbtn:focus-visible .tgc-cbtn__circle{border-color:#368B94;box-shadow:0 4px 12px rgba(21,62,67,.16)}
.tgc-cbtn:focus-visible{outline:none}
.tgc-cbtn:focus-visible .tgc-cbtn__circle{outline:3px solid #F5833D;outline-offset:2px}
.tgc-cbtn__label{position:absolute;z-index:1;top:50%;inset-inline-start:calc(100% - 22px);display:inline-flex;align-items:center;height:34px;
  padding-inline:30px 14px;border-radius:0 17px 17px 0;background:#eef6f5;border:1px solid #cfe2e1;color:#153E43;font-size:13px;font-weight:700;
  line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(-50%) translateX(-6px);transition:opacity .18s ease,transform .18s ease}
[dir=rtl] .tgc-cbtn__label{border-radius:17px 0 0 17px;transform:translateY(-50%) translateX(6px)}
.tgc-cbtn:hover .tgc-cbtn__label,.tgc-cbtn:focus-visible .tgc-cbtn__label,.tgc-cbtn.is-flash .tgc-cbtn__label{opacity:1;transform:translateY(-50%) translateX(0)}
.tgc-cbtn__label > span{display:none}
.tgc-cbtn .tgc-cbtn__add{display:inline}
.tgc-cbtn.is-saved .tgc-cbtn__add{display:none}
.tgc-cbtn.is-saved .tgc-cbtn__open{display:inline}
.tgc-cbtn.is-flash .tgc-cbtn__add,.tgc-cbtn.is-flash .tgc-cbtn__open{display:none}
.tgc-cbtn.is-flash .tgc-cbtn__msg{display:inline}
.tgc-cbtn.is-error .tgc-cbtn__label{background:#fff1f0;border-color:#f3c4bf;color:#a3271b}
.tgc-cbtn__check{position:absolute;z-index:3;bottom:-3px;inset-inline-end:-3px;width:16px;height:16px;border-radius:50%;background:#368B94;
  color:#fff;display:none;place-items:center;box-shadow:0 0 0 2px #fff}
.tgc-cbtn__check svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tgc-cbtn.is-saved .tgc-cbtn__check{display:grid}
.tgc-cbtn.is-saved .tgc-cbtn__circle{border-color:#9fc9c7;background:#f5fafa}
.tgc-cbtn.is-busy{cursor:progress}
.tgc-cbtn.is-busy .tgc-cbtn__circle::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(54,139,148,.2);border-top-color:#368B94;animation:tgc-spin .9s linear infinite}
@keyframes tgc-spin{to{transform:rotate(360deg)}}
@media (hover:none){.tgc-cbtn:hover .tgc-cbtn__label{opacity:0}.tgc-cbtn.is-flash .tgc-cbtn__label{opacity:1}}
@media (prefers-reduced-motion:reduce){.tgc-cbtn__label,.tgc-cbtn__circle{transition:none}.tgc-cbtn.is-busy .tgc-cbtn__circle::after{animation:none;border-color:#368B94}}

@media (prefers-reduced-motion:reduce){
  .tgc-cicon .compass-needle{animation:none}
}