/* Call Data shortlist feature (star + cart-style tray), plus (further down)
   the shared report-card styling (rounded corners, colours, title row, help
   banner) used by both Call Data and Put Data - Put Data doesn't have the
   shortlist feature itself, so the star/tray rules below are simply unused
   there. */

.shortlist-star {
	background: none;
	border: none;
	padding: 4px;
	margin: 0 auto;
	cursor: pointer;
	line-height: 0;
	display: inline-block;
}
.shortlist-star .star-icon {
	width: 18px;
	height: 17px;
	fill: none;
	stroke: #1B1B1B;
	stroke-width: 1.1;
	vertical-align: middle;
	transition: fill 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}
.shortlist-star:hover .star-icon {
	stroke: #f5a623;
	transform: scale(1.08);
}
.shortlist-star.is-active .star-icon {
	fill: #f5a623;
	stroke: #f5a623;
}

.shortlist-flying {
	position: fixed;
	z-index: 10000;
	pointer-events: none;
	/* Transition timing (ease in/out on transform, opacity held until the
	   last stretch) is computed and set inline in js/shortlist.js so it stays
	   in sync with FLY_DURATION_MS. */
}
.shortlist-flying .star-icon {
	width: 100%;
	height: 100%;
	fill: #f5a623;
	stroke: #f5a623;
}

@keyframes shortlist-pulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.18); }
	60% { transform: scale(0.95); }
	100% { transform: scale(1); }
}
#shortlist-tray .shortlist-pill.is-pulse {
	animation: shortlist-pulse 0.4s ease;
}

/* Briefly highlights a contract's row when jumped to from the shortlist tray */
@keyframes shortlist-row-flash {
	0% { background-color: #FFDA9E; }
	100% { background-color: transparent; }
}
tr.mycc-row-flash > td {
	animation: shortlist-row-flash 1.4s ease-out;
}

#shortlist-tray {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
}
#shortlist-tray .shortlist-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #1B1B1B;
	color: #fff;
	border-radius: 999px;
	padding: 10px 16px;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	white-space: nowrap;
}
#shortlist-tray .shortlist-pill .star-icon {
	fill: #f5a623;
	stroke: #f5a623;
	width: 15px;
	height: 14px;
}
#shortlist-tray .shortlist-pill .shortlist-count {
	background: #f5a623;
	color: #1B1B1B;
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
#shortlist-tray .shortlist-panel {
	display: none;
	width: 320px;
	max-width: calc(100vw - 36px);
	max-height: 360px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0,0,0,0.3);
	margin-bottom: 10px;
	overflow: hidden;
	flex-direction: column;
}
#shortlist-tray.is-open .shortlist-panel {
	display: flex;
}
#shortlist-tray .shortlist-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: #1B1B1B;
	color: #fff;
	font-weight: bold;
}
#shortlist-tray .shortlist-panel-close {
	background: none;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	padding: 2px 4px;
}
#shortlist-tray .shortlist-items {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
}
#shortlist-tray .shortlist-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 14px;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
#shortlist-tray .shortlist-item:last-child {
	border-bottom: none;
}
#shortlist-tray .shortlist-item:hover {
	background: #FFF8EC;
}
#shortlist-tray .shortlist-item-info {
	line-height: 1.35;
	overflow: hidden;
}
#shortlist-tray .shortlist-item-code {
	font-weight: bold;
	color: #1B1B1B;
}
#shortlist-tray .shortlist-item-meta {
	color: #777;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#shortlist-tray .shortlist-item-remove {
	background: none;
	border: none;
	color: #b33;
	font-size: 16px;
	cursor: pointer;
	padding: 2px 6px;
	line-height: 1;
	flex-shrink: 0;
}
#shortlist-tray .shortlist-empty {
	padding: 20px 14px;
	color: #888;
	text-align: center;
}
#shortlist-tray .shortlist-panel-footer {
	padding: 10px 14px;
	border-top: 1px solid #eee;
}
#shortlist-tray .shortlist-cta {
	display: block;
	width: 100%;
	background: #f5a623;
	color: #1B1B1B;
	border: none;
	border-radius: 6px;
	padding: 9px 10px;
	font-weight: bold;
	font-size: 13px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
#shortlist-tray .shortlist-cta:hover {
	background: #e0951a;
}
#shortlist-tray .shortlist-sample-notice {
	margin-top: 8px;
	padding: 8px 10px;
	background: #FDEAEA;
	border-left: 3px solid #FF4242;
	border-radius: 4px;
	font-size: 12px;
	color: #1B1B1B;
	text-align: center;
}
#shortlist-tray .shortlist-sample-notice p {
	margin: 0 0 8px;
}
#shortlist-tray .shortlist-sample-signup {
	display: inline-block;
	background: #f5a623;
	color: #1B1B1B;
	border-radius: 6px;
	padding: 6px 14px;
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
}
#shortlist-tray .shortlist-sample-signup:hover {
	background: #e0951a;
}

/* Highlights the nearest-to-market contract row on Call Data and Put Data */
table td.highlight {
	background-color: #FFF395 !important;
}
table td.asx {
	background-color: #4D71B8 !important;
}

/* Rounded corners around each company's data block. The card itself no
   longer scrolls - only .mycc-company-scroll inside it does, so the Company
   Name/Last Sale/Bid row above stays fixed in place as a reference point.
   overflow:hidden here still masks that inner table's rounded corners at any
   scroll position, same as the old overflow-x:auto did. */
.mycc-company-card {
	border-radius: 8px;
	overflow: hidden;
}
.mycc-company-scroll {
	overflow-x: auto;
	overflow-y: hidden;
}

/* "Data Last Updated" banner */
.panel-dkgreen {
	background: #34425C;
	border-radius: 4px;
}

/* Outer white content panel */
.panel-white-mycc {
	border-radius: 4px;
	overflow: hidden;
}

/* Call Data title row: heading left, settings/print icons right */
.mycc-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.mycc-title-row h2 {
	margin: 0;
}
.mycc-title-icons {
	display: flex;
	align-items: center;
	gap: 2px;
}
.mycc-title-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	transition: background 0.15s ease;
}
.mycc-title-icon-link:hover {
	background: #f0f0f0;
}
.mycc-title-icon-link svg {
	width: 18px;
	height: 18px;
}

/* Instructional banner under the "Call Data" heading */
.mycc-help-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #FFF3E6;
	border-left: 3px solid #FF8F2A;
	border-radius: 4px;
	padding: 10px 14px;
	margin: 8px 0 30px;
	font-size: 13px;
	color: #555;
	/* The shared template wraps page content in a container with an inline
	   white-space:nowrap (to suit the wide report tables); override it here
	   so this banner's text wraps normally instead of overflowing. */
	white-space: normal;
}
.mycc-help-banner .mycc-help-icon {
	flex-shrink: 0;
}
.mycc-help-banner span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}
.mycc-help-banner .mycc-help-star {
	fill: none;
	stroke: #1B1B1B;
	stroke-width: 1.2;
	vertical-align: middle;
	margin: 0 1px;
	position: relative;
	top: -1px;
}

/* Next-month fallback notice on Call Data - same banner shape as the help
   banner above it, but red-flagged since it's telling the user their normal
   view came back empty, and dismissable since it's a one-off explanation. */
.mycc-help-banner.mycc-alert-banner {
	background: #FDEAEA;
	border-left: 3px solid #FF4242;
}
.mycc-alert-dismiss {
	flex-shrink: 0;
	align-self: flex-start;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	color: #999;
	padding: 0 2px;
}
.mycc-alert-dismiss:hover {
	color: #555;
}