/*!
 * ss-modal - styling for the Soft Space web console iframe modal
 *
 * Project-owned replacement for the fancyBox 2.x stylesheet and imagery,
 * removed under CVE-2024-5020. Class names are preserved because the consoles'
 * own stylesheets and 66 views reference them.
 *
 * All chrome is drawn in CSS. No raster assets ship with this component, which
 * is what makes it resolution-independent on high-density displays (FR-020)
 * without maintaining @2x variants.
 *
 * Colours below were measured from the vendor assets before deletion:
 *   overlay tint      rgba(16, 12, 12, 0.69)   [fancybox_overlay.png, 10x10 RGBA]
 *   panel text        #444444
 *
 * Note on what users actually saw: the vendor stylesheet's own close sprite
 * (#222 disc) and panel background (#f9f9f9) were BOTH overridden by the
 * console theme with !important - OCBC's red btnClose.png and a #fff panel.
 * The theme values are therefore the real prior appearance, and this file
 * defers to the theme for both. See the .fancybox-close block below.
 *
 * Deliberately plain CSS - no custom properties, no multi-stop gradient
 * shorthand - to match the consoles' existing browser support baseline.
 */

/* Reset, mirroring the replaced stylesheet's first rule. */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-wrap iframe {
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
	-webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}

.fancybox-skin {
	position: relative;
	/* The theme forces #FFFFFF !important; this matches it so the two agree
	   rather than relying on override order. */
	background: #fff;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer,
.fancybox-inner {
	position: relative;
}

/*
 * The framed page pushes its measured height onto this element from inside the
 * frame. That height must visibly resize the modal, and the iframe must follow
 * it - see contract 6.4 / 6.5.
 */
.fancybox-inner {
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-error {
	color: #444;
	font: 14px/20px OpenSansRegular, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ close */

/*
 * IMPORTANT - the console theme owns this button's appearance, not this file.
 *
 * Both consoles override it in their own stylesheet (bank `ssCommon.css`,
 * merchant `Common.css`), which every page loads:
 *
 *   .fancybox-close { background:url("../images/icon/btnClose.png") left top
 *                     no-repeat!important; width:42px!important; height:42px!important; }
 *
 * That is OCBC's branded red close button. An earlier revision of this file
 * drew its own dark disc and white cross as :before/:after pseudo-elements,
 * which paint *above* the element's background and so hid the branded icon
 * entirely - a visible regression against the previous appearance.
 *
 * Therefore: no pseudo-elements here, and the fallback below is set through
 * the `background` shorthand *without* !important, so the theme's rule wins
 * cleanly wherever it is present. Only position and box metrics are set here,
 * matching the replaced component (36x36 at -18px; the theme resizes to 42x42,
 * which is what places the icon over the panel corner as it does in production).
 */
.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 8040;
	text-decoration: none;
	/* The accessible label is a text node inside; keep it available to assistive
	   technology but invisible on screen, as the sprite version was. */
	font-size: 0;
	line-height: 0;
	color: transparent;
	/* Fallback only, for a page that somehow loads without the theme. Plain
	   shorthand, no !important - the theme's branded image overrides all of it. */
	background:
		linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) 50% 50% / 14px 14px no-repeat,
		linear-gradient(135deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%) 50% 50% / 14px 14px no-repeat,
		radial-gradient(circle at 50% 50%, #222 0, #222 14px, transparent 14px) 50% 50% / 100% 100% no-repeat;
}

/* Keyboard operability must be at least as good as before (FR-010, 8.5).
   An outline is used rather than a box-shadow on a pseudo-element, so it does
   not interfere with the theme's background image. */
.fancybox-close:focus {
	outline: 2px solid #fff;
	outline-offset: -2px;
	-webkit-box-shadow: 0 0 0 2px #d0021b;
	        box-shadow: 0 0 0 2px #d0021b;
}

/* ---------------------------------------------------------------- overlay */

/*
 * Fixed rather than the replaced component's absolute + explicit sizing: it
 * covers the viewport without JavaScript having to measure the document, and
 * behaves identically for a modal that is always viewport-centred.
 */
.fancybox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 8010;
	background: rgba(16, 12, 12, 0.69);
}