/* ============================================================
   Survey Renderer - Wave-aligned theme overrides (standalone)
   Reuses the approved Wave colour palette so the standalone
   survey pop-up matches the post-registration Wave UI.

   Palette (from wave colours.scss):
     primary500  #216bba   (buttons / links / accent)
     primary600  #35568e   (button hover)
     primary100  #f2f5f9   (page background)
     neutral900  #1d1d1d   (body text)
     neutral500  #6b6b7b   (secondary text)
     neutral200  #e0e2ec   (soft borders / dividers)
     white       #ffffff   (card surface)
     negative500 #a71a1a   (errors)

   Loaded LAST in survey_head_standalone.jsp so it wins the cascade.
   Scoped to .pgeSurveyMigrationEmbed to avoid affecting other clients.
   ============================================================ */

/* Page background - Wave "logged in" background image, tiled like Wave.
   Card stays white (see .bdrStyle1 below).
   Uses !important + body class selectors to override the dark
   body{background:#1f2024} set in global-main.css. */
html body,
body.pgeMySony-ProductSurveyAgreement,
body.pgeMySony-ProductSurvey,
body {
	background: #f2f5f9 url(../image/layout/skin/background-logged-in.jpg) repeat top center !important;
	background-size: cover !important;
	background-attachment: fixed !important;
}

/* Make the outer layout fluid so it fits the 900px pop-up (legacy .main is
   fixed 1003px which forces a horizontal scrollbar and breaks centering). */
.mainOuter, .main {
	width: auto !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	float: none !important;
}

/* ---- Header: same centered width as the card so contents line up ---- */
.cntHeader, .cntHeaderNoNav {
	max-width: 640px;
	margin: 0 auto;
	width: auto;
	text-align: left;
}
.cntHeader a.logo, .cntHeaderNoNav a.logo {
	display: inline-block;
	float: none;
}
/* Logo left-aligned, sitting exactly above the box's left edge, minimal gap */
.cntHeader img.lgo, .cntHeaderNoNav img.lgo {
	position: static;
	height: 34px;
	width: auto;
	margin: 12px 0 0;
}
.cntHeader, .cntHeaderNoNav {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Collapse the legacy spacer divs that add a large gap between the logo
   and the card top. */
.mainTop, .contentUpper, .brandftrlgos {
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: none !important;
}

/* Ensure the layout wrappers around the card are transparent so the
   body background image is visible around the white card. */
.pgeSurveyMigrationEmbed,
.pgeSurveyMigrationEmbed .contentMiddle,
.mainOuter, .main, .mainTop, .mainBottom,
.content.pgeSurveyMigrationEmbed,
.brandftrlgos {
	background: transparent !important;
}

/* ---- Survey content card: replace hard image border with a soft card ---- */
.pgeSurveyMigrationEmbed .bdrStyle1Top,
.pgeSurveyMigrationEmbed .bdrStyle1Bot,
.pgeSurveyMigrationEmbed .contentUpper,
.pgeSurveyMigrationEmbed .contentLower {
	display: none;
}

.pgeSurveyMigrationEmbed .bdrStyle1 {
	background: #ffffff;
	border: 1px solid #e0e2ec;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	/* generous inner spacing so questions/answers don't touch the border */
	padding: 32px 36px 28px;
	box-sizing: border-box;
}

/* Center the card in the pop-up window (Wave survey popup is 900x700).
   Override the legacy .content{float:left;width:700px;margin:30px 0 0 4px}
   and .pgeSurveyMigrationEmbed{margin-left:140px} so the box is centered
   regardless of window width. */
.content.pgeSurveyMigrationEmbed,
.pgeSurveyMigrationEmbed {
	float: none !important;
	width: auto !important;
	max-width: 640px !important;
	margin: 16px auto 24px !important;
	_margin-left: auto !important;
}
.pgeSurveyMigrationEmbed .contentMiddle {
	position: static !important;
	left: 0 !important;
	width: auto !important;
	height: auto !important;
}

/* ---- Content typography & spacing ---- */
.pgeSurveyMigrationEmbed .cntSurveyMigration {
	margin: 0;
	color: #1d1d1d;
}

/* "Page 1" / page title */
.pgeSurveyMigrationEmbed .cntSurveyMigrationHeader {
	margin: 0 0 8px;
	color: #6b6b7b;
	font-size: 14px;
}

/* Question text */
.pgeSurveyMigrationEmbed .cntSurveyMigration h2,
.pgeSurveyMigrationEmbed .cntSurveyMigration h3,
.pgeSurveyMigrationEmbed .cntSurveyMigration legend,
.pgeSurveyMigrationEmbed .cntSurveyMigration .questionTitle {
	color: #1d1d1d;
	font-size: 18px;
	line-height: 1.4;
	margin: 0 0 16px;
}

/* Answer options - vertical rhythm so they don't crowd */
.pgeSurveyMigrationEmbed .cntSurveyMigration label,
.pgeSurveyMigrationEmbed .cntSurveyMigration li {
	color: #1d1d1d;
	line-height: 1.5;
	margin-bottom: 10px;
}

/* Free-text inputs */
.pgeSurveyMigrationEmbed input[type="text"],
.pgeSurveyMigrationEmbed textarea {
	border: 1px solid #e0e2ec;
	border-radius: 4px;
	padding: 8px 10px;
	color: #1d1d1d;
}
.pgeSurveyMigrationEmbed input[type="text"]:focus,
.pgeSurveyMigrationEmbed textarea:focus {
	outline: none;
	border-color: #216bba;
}

/* ---- Progress bar / percentage: keep it inside the card ---- */
/* Legacy code positions the % label absolutely against the (0-width at 0%)
   green fill, which pushes it outside/left of the box. Re-anchor the label
   to the progress track so it always stays inside the card, top-right. */
.pgeSurveyMigrationEmbed .progress-bar {
	position: relative;
	margin: 8px 0 24px !important;
	border-radius: 4px;
	overflow: hidden;
}
.pgeSurveyMigrationEmbed .progress-bar .progress-label {
	position: absolute !important;
	top: 0 !important;
	right: 8px !important;
	line-height: normal !important;
	border-right: none !important;
	color: #6b6b7b !important;
	font-size: 13px !important;
	padding: 4px 0 !important;
	z-index: 2;
}

/* NOTE: Buttons (Continue) and CTA links (Cancel) intentionally left to
   their original styling - no overrides applied here per requirement. */

/* ---- "Back to top" footer divider softening ---- */
.pgeSurveyMigrationEmbed .cntContentFooter {
	border-top: 1px solid #e0e2ec;
	color: #6b6b7b;
}