/*! ==========================================================================
 * Saransh Dainik — Market Ticker + New-News Popup + Business World + App Prompt
 * Phase: Market/News/App (2026-08-16)
 * ---------------------------------------------------------------------------
 * OVERLAY Z-INDEX SCALE — defined ONCE here, used by every new fixed element
 * (this is the ONLY place these values exist; do not scatter z-index values):
 *
 *     9000  radio player / launcher        (existing — untouched)
 *     9010  .sd-news-popup                 (new-news popup card)
 *     9020  .sd-app-prompt                 (app download MODAL — full-screen
 *                                          overlay; highest coordinated sd-* layer)
 *     9999  cookies-warning                (existing — untouched, stays on top)
 *   999999  search modal                   (existing — untouched)
 *  9999999  mobile nav drawer              (existing — untouched)
 *
 * Overlay coordination is done through body classes set by sd-overlays.js:
 *   body.sd-radio-open  -> radio drawer is open (news popup moves to top)
 *   body.sd-app-open    -> app prompt visible (mobile news popup rises above it)
 *   body.sd-news-open   -> news popup visible (app prompt waits)
 * ========================================================================== */

/* ==========================================================================
   1. MARKET TICKER BAR (in-flow, under the breaking-news ticker)
   ========================================================================== */
.sd-market {
	background: #07152f;                  /* brand navy */
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	color: #fff;
	width: 100%;                          /* never 100vw */
	overflow: hidden;
}
.sd-market-inner {
	display: flex;
	align-items: center;
	min-height: 40px;
	gap: 10px;
}
.sd-market-label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	background: #f5b301;                  /* brand gold */
	color: #07152f;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .5px;
	padding: 0 10px;
	height: 22px;
	border-radius: 4px;
	white-space: nowrap;
}
.sd-market-track {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
}
.sd-market-track-inner {
	display: flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
}
.sd-mi {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: #e9ecf2;
	font-size: 13px;
	padding: 0 18px;
	white-space: nowrap;
}
.sd-mi-name { font-weight: 700; color: #fff; }
.sd-mi-value { font-weight: 600; }
.sd-mi-arrow { font-size: 10px; }
.sd-mi-up .sd-mi-arrow, .sd-mi-up .sd-mi-chg { color: #2ecc71; }   /* green up */
.sd-mi-down .sd-mi-arrow, .sd-mi-down .sd-mi-chg { color: #ff6b6b; } /* red down */
.sd-mi-flat .sd-mi-arrow { color: #c9cdd6; }
.sd-mi-flat .sd-mi-chg { color: #c9cdd6; }
.sd-mi-chg { font-size: 12px; color: #e9ecf2; }
.sd-market-meta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	font-size: 11px;
	color: #b8bfcc;
}
.sd-market-delayed {
	background: #ffd34d;
	color: #07152f;
	font-weight: 700;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 3px;
	letter-spacing: .4px;
}
.sd-market-unavailable {
	flex: 1 1 auto;
	min-width: 0;
	color: #ffd34d;
	font-size: 13px;
	padding: 8px 0;
}
.sd-market-disclaimer {
	display: block;
	font-size: 10px;
	color: #b8bfcc;
	line-height: 1.4;
	padding: 2px 0 6px;
}
/* seamless marquee (content duplicated once; -50% == one full set) */
@keyframes sd-market-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.sd-market-track-inner { animation: none !important; }
}

/* ==========================================================================
   1b. LIVE SHARE-MARKET STRIP (TradingView ticker-tape) — in-flow, ABOVE
       Breaking News. No 100vw, no negative margins, no absolute/fixed
       positioning, no horizontal page overflow workaround.
       HEIGHT: never force a small height on the iframe. TradingView's
       ticker-tape item stacks name/value/change vertically (~62px of text +
       padding -> native 72px). Forcing 36/38px clipped price & change lines;
       ~46-48px still clips (change line ends at 62px). Native 72px renders
       fully, so here we only set min-heights (the embed script sets the
       iframe's inline height to 72px itself).
   ========================================================================== */
.sd-market-strip {
	display: flex;
	align-items: stretch;
	width: 100%;                          /* never 100vw */
	min-width: 0;
	min-height: 72px;
	height: auto;
	overflow: hidden;
	background: #ffffff;
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
}
.sd-market-strip .sd-market-label {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	min-height: 72px;
	padding: 0 12px;
	display: flex;
	align-items: center;
	background: #ffffff;
	color: #d71920;
	border-right: 1px solid #eeeeee;
	border-radius: 0;
	letter-spacing: normal;
	font-size: 12px;
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
}
.sd-market-strip .tradingview-widget-container {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	min-height: 72px;
	overflow: hidden;
}
.sd-market-strip .tradingview-widget-container__widget {
	width: 100%;
	min-height: 72px;
	overflow: hidden;
}
.sd-market-strip iframe {
	display: block;
	width: 100% !important;
	max-width: 100%;
	border: 0;
}
/* clean one-shot hide when TradingView never mounts (blocked / unavailable /
   CSP) — added by the partial's inline fallback; smooth, no retry loop. */
.sd-market-strip.sd-market-strip-failed {
	max-height: 0;
	border-top-width: 0;
	border-bottom-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .45s ease, opacity .45s ease, border-width .45s ease;
}
@media (max-width: 767px) {
	.sd-market-strip .sd-market-label {
		padding: 0 8px;
		font-size: 11px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sd-market-strip { scroll-behavior: auto; }
	.sd-market-strip.sd-market-strip-failed { transition: none; }
}

/* ==========================================================================
   2. BUSINESS WORLD — mobile header button (highlighted gold pill)
   ========================================================================== */
.mobile-header-container .mobile-button-buttons {
	width: 74px;                          /* make room for the extra button */
}
.mobile-header-container .mobile-button-buttons .sd-biz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: #f5b301;                  /* gold accent, dark readable text */
	color: #07152f !important;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	padding: 5px 8px;
	margin: 3px auto 0;
	width: auto;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, transform .15s ease;
}
.mobile-header-container .mobile-button-buttons .sd-biz-btn:hover,
.mobile-header-container .mobile-button-buttons .sd-biz-btn:focus-visible {
	background: #ffc107;
	color: #07152f !important;
	outline: 2px solid rgba(255, 255, 255, .7);
	outline-offset: 1px;
}
.mobile-header-container .mobile-button-buttons .sd-biz-btn.sd-biz-active {
	background: #ffc107;
	box-shadow: inset 0 0 0 2px rgba(7, 21, 47, .35);
}
.mobile-header-container .mobile-button-buttons .sd-biz-ico { font-size: 13px; line-height: 1; }
.mobile-header-container .mobile-button-buttons .sd-biz-label { line-height: 1; }
/* dark mode: header is dark navy — gold button stays readable */
.nav-mobile-header .mobile-button-buttons .sd-biz-btn { color: #07152f !important; }

/* ==========================================================================
   3. NEW-NEWS POPUP
   ========================================================================== */
.sd-news-popup {
	position: fixed;
	top: 50%;
	left: 50%;
	bottom: auto;                 /* overrides mobile-news.css bottom for a centered card */
	right: auto;
	transform: translate(-50%, -50%);
	width: 360px;
	max-width: calc(100vw - 28px);
	z-index: 9010;
	background: #ffffff;
	color: #333;
	border: 1px solid #e2e5e9;
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(7, 21, 47, .22);
	overflow: hidden;
	font-family: inherit;
	text-align: left;
}
/* Higher-specificity aliases so the centred position always wins over the
   older mobile-news.css bottom-anchored rule (loaded later in the cascade). */
#sd-news-popup.sd-news-popup {
	top: 50%;
	left: 50%;
	bottom: auto;
	right: auto;
	transform: translate(-50%, -50%);
}
.sd-news-popup[hidden] { display: none; }
/* backdrop (one per popup; below the card, above page content) */
.sd-news-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9009;
	background: rgba(7, 21, 47, .28);
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
}
.sd-news-backdrop[hidden] { display: none; }
.sd-news-popup.sd-news-in { animation: sd-news-in .28s ease; }
@keyframes sd-news-in {
	from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
	to { opacity: 1; transform: translate(-50%, -50%); }
}
.sd-news-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 14px;
	background: #07152f;
	color: #fff;
}
.sd-news-head-label { font-size: 13px; font-weight: 800; letter-spacing: .4px; }
.sd-news-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
}
.sd-news-close:hover, .sd-news-close:focus-visible { color: #ffd34d; outline: none; }
.sd-news-body {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
}
.sd-news-thumb {
	width: 76px;
	height: 56px;
	flex: 0 0 76px;
	object-fit: cover;
	border-radius: 6px;
	background: #eef0f3;
}
.sd-news-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: #07152f;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sd-news-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-top: 1px solid #eef0f3;
}
.sd-news-read {
	display: inline-flex;
	align-items: center;
	background: #c8102e;                  /* brand red CTA */
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 6px;
	text-decoration: none;
}
.sd-news-read:hover, .sd-news-read:focus-visible { background: #a80d26; color: #fff; outline: none; }
.sd-news-note { font-size: 11px; color: #8890a0; }

/* radio drawer open -> lift the centred news card above the drawer (the drawer
   expands upward) so it is never covered; stays horizontally centred */
body.sd-radio-open #sd-news-popup,
body.sd-radio-open .sd-news-popup {
	top: 96px;
	bottom: auto;
	transform: translate(-50%, 0);
}

/* ==========================================================================
   4. APP DOWNLOAD MODAL (mobile-only; centred ~43% down the visible viewport)
   ========================================================================== */
.sd-app-prompt {
	position: fixed;                 /* fixed viewport overlay, not absolute */
	inset: 0;                        /* covers the whole viewport */
	z-index: 9020;                   /* highest coordinated sd-* layer (see scale) */
	display: flex;
	align-items: center;             /* centred, then offset below the exact middle */
	justify-content: center;
	padding: 20px 20px 14vh;         /* 14vh bottom padding -> card centre ~43% down */
	margin: 0;
	font-family: inherit;
}
.sd-app-prompt[hidden] { display: none; }

/* backdrop */
.sd-app-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
/* fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
	.sd-app-overlay { background: rgba(0, 0, 0, 0.68); }
}

/* modal card */
.sd-app-card {
	position: relative;
	width: min(90vw, 380px);
	max-width: 380px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;                /* never crop on short screens */
	background: #ffffff;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(7, 21, 47, .35);
	padding: 28px 22px 24px;
	text-align: center;
	color: #333;
}

/* circular X close button (independent, top-right) */
.sd-app-x {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;                /* >= 40x40 touch target */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f1f2f4;
	color: #444;
	border: 0;
	border-radius: 50%;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;                      /* above icon/title, stays top-right */
}
.sd-app-x:hover, .sd-app-x:focus-visible {
	background: #e2e5e9;
	color: #07152f;
	outline: 2px solid #0494b1;
	outline-offset: 1px;
}

/* app branding / icon */
.sd-app-icon {
	width: 80px;
	height: 80px;
	margin: 0 auto 14px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #0494b1 0%, #07152f 100%);
	box-shadow: 0 8px 22px rgba(4, 148, 177, .35);
	overflow: hidden;
}
.sd-app-icon img {
	width: 80px;
	height: 80px;
	object-fit: contain;             /* never stretch/distort */
	border-radius: 18px;
}
.sd-app-icon-fallback { font-size: 40px; line-height: 1; }

/* text layout */
.sd-app-label {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #0494b1;
}
.sd-app-title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 800;
	color: #07152f;
	line-height: 1.3;
}
.sd-app-desc {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: #555;
	line-height: 1.55;
}
.sd-app-reassure {
	margin: 12px 0 0;
	font-size: 11.5px;
	color: #7a8494;
	line-height: 1.4;
}
.sd-app-benefits {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sd-app-benefits li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12.5px;
	color: #444;
}
.sd-app-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e6f6f9;
	color: #0494b1;
	font-size: 11px;
	font-weight: 800;
}

/* download CTA (full width) */
.sd-app-download {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 50px;                /* ~48-52px touch target */
	background: #0494b1;             /* brand teal */
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(4, 148, 177, .3);
	transition: background-color .15s ease, transform .1s ease;
}
.sd-app-download:hover, .sd-app-download:focus-visible { background: #037b94; color: #fff; outline: none; }
.sd-app-download:active { transform: scale(.98); }
.sd-app-play-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	color: #0494b1;
	font-size: 10px;
	line-height: 1;
}

/* entrance / exit animations (short + professional; enter from the top and
   settle slightly above the vertical centre) */
@keyframes sd-app-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sd-app-card-in { from { opacity: 0; transform: translateY(-12vh) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sd-app-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sd-app-card-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8vh) scale(.97); } }
.sd-app-prompt.sd-app-in .sd-app-overlay { animation: sd-app-backdrop-in .2s ease; }
.sd-app-prompt.sd-app-in .sd-app-card { animation: sd-app-card-in .26s ease; }
.sd-app-prompt.sd-app-out .sd-app-overlay { animation: sd-app-backdrop-out .16s ease forwards; }
.sd-app-prompt.sd-app-out .sd-app-card { animation: sd-app-card-out .16s ease forwards; }

/* Coexistence with the latest-news popup: while the app modal is open the
   news card is hidden but NEVER marked as read (its state is untouched); it
   resumes automatically when the modal closes. */
body.sd-app-open .sd-news-popup { visibility: hidden; pointer-events: none; }

/* ==========================================================================
   RESPONSIVE (mobile)
   ========================================================================== */
@media (max-width: 991px) {
	.sd-market-inner { min-height: 38px; gap: 8px; }
	.sd-market-label { font-size: 11px; padding: 0 8px; height: 20px; }
	.sd-mi { font-size: 12px; padding: 0 14px; }
	.sd-market-meta { display: none; }    /* keep the strip compact on tablets */
}
@media (max-width: 767px) {
	/* news popup: almost full width, safe 14px margins, centred in the
	   visible viewport (never pinned to the footer/edges) */
	#sd-news-popup.sd-news-popup,
	.sd-news-popup {
		right: auto;
		left: 50%;
		top: 50%;
		bottom: auto;
		transform: translate(-50%, -50%);
		width: calc(100vw - 28px);
		max-width: 420px;
	}
	body.sd-radio-open #sd-news-popup,
	body.sd-radio-open .sd-news-popup {
		top: 96px;
		bottom: auto;
		transform: translate(-50%, 0);
	}
	/* The app-download modal is a centred fixed overlay at every width
	   (mobile-only by device rules); no width-specific repositioning needed. */
}

/* reduced motion: disable decorative entrance/exit animations */
@media (prefers-reduced-motion: reduce) {
	.sd-news-popup.sd-news-in,
	.sd-app-prompt.sd-app-in .sd-app-overlay,
	.sd-app-prompt.sd-app-in .sd-app-card,
	.sd-app-prompt.sd-app-out .sd-app-overlay,
	.sd-app-prompt.sd-app-out .sd-app-card { animation: none; }
}